โดยอันดับแรกเลยเราจำเป็นจะต้องสร้าง from ค้นหา ที่ต้องการแสดงที่หน้าจอคอมและสร้าง from ค้นหาที่จะแสดงเฉพาะหน้าโทรศัพท์ของเราออกมาก่อน
เมือเรามี 2 from แล้วเราก็ให้กำหนด class ของแต่ละ from ต่างกันออกไปแบบตัวอย่างนี้
โค้ด: เลือกทั้งหมด
<!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>
เมือแสดงหน้าจอคอมพิวเตอร์ เมื่อแสดงหน้าจอมือถือ จากโค้ดก็จะเห็นได้ว่าผมได้กำหนด class ที่ต่างกันเถ้าเป็น from ผมก็จะกำหนด class เป็น hidden-xs แต่ถ้าเป็น from ที่จะให้แสดงเฉพาะมือถือก็จะกำหนด class เป็น visible-xs-block นั้นเอง สามารถดู 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 ของเราได้ตามที่เราต้องการเลยก็หวังว่าบทความนี้จะเป็นความรู้ให้กับทุกท่านที่ได้เข้ามาอ่านกันนะครับ