บูตสาธารณูปโภคที่ตอบสนองต่อ
เงินทุนให้เรียนผู้ช่วยบางอย่างเพื่อให้เกิดการพัฒนาสำหรับอุปกรณ์มือถือที่เป็นมิตรได้เร็วขึ้น คำสั่งเหล่านี้สามารถรวมขนาดใหญ่ขนาดเล็กและขนาดกลางอุปกรณ์ผ่านสื่อเพื่อให้ตระหนักถึงเนื้อหาของอุปกรณ์ที่จะแสดงและซ่อน
โดยใช้เครื่องมือเหล่านี้จะต้องระมัดระวังเพื่อหลีกเลี่ยงการสร้างรุ่นที่แตกต่างกันอย่างสมบูรณ์ของเว็บไซต์เดียวกันยูทิลิตี้ที่ตอบสนองในขณะนี้จะใช้ได้เฉพาะในบล็อกและการเปลี่ยนตาราง
| หน้าจอขนาดเล็กพิเศษ โทรศัพท์ (<768px) | หน้าจอขนาดเล็ก แท็บเล็ต (≥768px) | หน้าจอขนาดกลาง สก์ท็อป (≥992px) | หน้าจอขนาดใหญ่ สก์ท็อป (≥1200px) | |
|---|---|---|---|---|
| .visible-xs- * | มองเห็นได้ | ปิดบัง | ปิดบัง | ปิดบัง |
| .visible-sm- * | ปิดบัง | มองเห็นได้ | ปิดบัง | ปิดบัง |
| .visible-md- * | ปิดบัง | ปิดบัง | มองเห็นได้ | ปิดบัง |
| .visible-lg- * | ปิดบัง | ปิดบัง | ปิดบัง | มองเห็นได้ |
| .hidden-XS | ปิดบัง | มองเห็นได้ | มองเห็นได้ | มองเห็นได้ |
| .hidden-SM | มองเห็นได้ | ปิดบัง | มองเห็นได้ | มองเห็นได้ |
| .hidden-MD | มองเห็นได้ | มองเห็นได้ | ปิดบัง | มองเห็นได้ |
| .hidden-LG | มองเห็นได้ | มองเห็นได้ | มองเห็นได้ | ปิดบัง |
จากรุ่น v3.2.0 รูปร่างเหมือน .visible - * - * ขนาดของชั้นเรียนสำหรับแต่ละหน้าจอมีสามสายพันธุ์แต่ละรายการคุณสมบัติการแสดงผล CSS ที่แตกต่างกันดังนี้
| กระจุก | การแสดงผล CSS |
|---|---|
| .visible - * - บล็อก | จอแสดงผล: บล็อก |
| .visible - * - อินไลน์ | จอแสดงผล: อินไลน์; |
| .visible - * - อินไลน์บล็อก | จอแสดงผล: อินไลน์บล็อก |
ดังนั้นพิเศษขนาดเล็กหน้าจอ (XS), ตัวอย่างเช่น .visible ใช้ได้ - * - * ชั้นเรียน: .visible-XS-บล็อก .visible-XS-อินไลน์และ .visible-XS-อินไลน์บล็อก
.visible-XS, .visible-SM, .visible-MD และการเรียน .visible-แอลจียังมีอยู่ แต่จากรุ่น v3.2.0 เริ่มต้นจะไม่แนะนำ ในกรณีพิเศษ <table> องค์ประกอบที่เกี่ยวข้องกับการออกไปข้างนอกพวกเขา .visible - * - บล็อกเดียวกัน
ประเภทการพิมพ์
ตารางต่อไปนี้แสดงประเภทการพิมพ์ ใช้เหล่านี้เพื่อสลับพิมพ์เนื้อหา
| ชั้น | เบราว์เซอร์ | เครื่องพิมพ์ |
|---|---|---|
| .visible พิมพ์บล็อก .visible-พิมพ์แบบอินไลน์ .visible-พิมพ์อินไลน์บล็อก | ปิดบัง | มองเห็นได้ |
| .hidden พิมพ์ | มองเห็นได้ | ปิดบัง |
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานที่ระบุไว้ข้างต้นระดับผู้ช่วย ปรับขนาดของหน้าต่างเบราว์เซอร์หรือโหลดอินสแตนซ์บนอุปกรณ์ที่แตกต่างกันทดสอบระดับยูทิลิตี้การตอบสนอง
ตัวอย่าง
ลอง»
ผลมีดังนี้
เครื่องหมายถูก (✔) ระบุว่าองค์ประกอบที่จะมองเห็นได้ในวิวพอร์ตปัจจุบัน