Available classes คลาสที่สามารถทำให้แสดง element หรือซ่อน element ตามหน้าขนาดหน้าจอได้ Booststap เวอร์ชั่น 3.3

Post a reply


This question is a means of preventing automated form submissions by spambots.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is ON
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: Available classes คลาสที่สามารถทำให้แสดง element หรือซ่อน element ตามหน้าขนาดหน้าจอได้ Booststap เวอร์ชั่น 3.3

Available classes คลาสที่สามารถทำให้แสดง element หรือซ่อน element ตามหน้าขนาดหน้าจอได้ Booststap เวอร์ชั่น 3.3

Post by jamepiyawat » 26/08/2019 5:37 pm

สวัดดีครับพอดีว่าผมได้ทำ from ออกมา from หนึ่งนั้นก็คือ from ค้นหาตอนที่ผมได้ทำ from ออกมาก็สามารถแสดงในหน้าของคอมพิวเตอร์ก็ได้สวยงามดีแต่ว่าพอเราลองมาดูในจอมือถือที่เล็กลงมากลับกลายเป็นว่า from ค้นหาของเล็กมาและไม่สวยเลยผมจึงได้ใช้ Available classes คลาสของ Booststap เวอร์ชั่น 3.3 มาซ่อน from ค้นหาของผมเมือเปิดดูในโทรศัพท์ วิธีการจะเป็นอย่างไรลองไปดูกันเลย

โดยอันดับแรกเลยเราจำเป็นจะต้องสร้าง from ค้นหา ที่ต้องการแสดงที่หน้าจอคอมและสร้าง from ค้นหาที่จะแสดงเฉพาะหน้าโทรศัพท์ของเราออกมาก่อน
เมือเรามี 2 from แล้วเราก็ให้กำหนด class ของแต่ละ from ต่างกันออกไปแบบตัวอย่างนี้

Code: Select all

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <body>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  </head>

  <div class="hidden-xs">
    <p>แสดงเฉพาะหน้าจอคอมพิวเตอร์</p>
      <input type="text" placeholder="แสดงเฉพาะหน้าจอคอมพิวเตอรและแท็บเล็ต" name="search">
    <input type = "submit" />
  </div>

  <div class="visible-xs-block">
    <p>แสดงเฉพาะหน้าจอมือถือ</p>
    <input type="text" placeholder="แสดงเฉพาะหน้าจอมือถือ" name="search">
    <input type = "submit" />
  </div>
  </body>
  </html>


ผลลัพธ์ที่ได้
เมือแสดงหน้าจอคอมพิวเตอร์
Selection_999(579).png
Selection_999(579).png (15.19 KiB) Viewed 79 times


เมื่อแสดงหน้าจอมือถือ
Selection_999(583).png
Selection_999(583).png (13.78 KiB) Viewed 78 times


จากโค้ดก็จะเห็นได้ว่าผมได้กำหนด class ที่ต่างกันเถ้าเป็น from ผมก็จะกำหนด class เป็น hidden-xs แต่ถ้าเป็น from ที่จะให้แสดงเฉพาะมือถือก็จะกำหนด class เป็น visible-xs-block นั้นเอง
Screenshot_2019-08-26 CSS · Bootstrap(1).png
Screenshot_2019-08-26 CSS · Bootstrap(1).png (168.96 KiB) Viewed 79 times

สามารถดู Available classes ได้ตาม Link นี้ https://getbootstrap.com/docs/3.3/css/# ... es-classes
ถ้าเเป็นเวอร์ชั่น 4 ก็ Link นี้ https://getbootstrap.com/docs/4.0/utili ... g-elements

เป็นอย่างไรบ้างครับสำหรับ Available classes ใน Booststap เวอร์ชั่น 3.3 เป็นอะไรดีมากเลยนะครับเพราะจะทำให้เว็บไซต์ของเราสามารถแสดง from ของเราได้ตามที่เราต้องการเลยก็หวังว่าบทความนี้จะเป็นความรู้ให้กับทุกท่านที่ได้เข้ามาอ่านกันนะครับ

Top