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

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1097
Joined: 21/05/2019 10:45 am

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

Postby 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 95 times


เมื่อแสดงหน้าจอมือถือ
Selection_999(583).png
Selection_999(583).png (13.78 KiB) Viewed 94 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 95 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 ของเราได้ตามที่เราต้องการเลยก็หวังว่าบทความนี้จะเป็นความรู้ให้กับทุกท่านที่ได้เข้ามาอ่านกันนะครับ

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 6 guests