หากกริดปรากฏขึ้นรหัสควรมีลักษณะเช่นนี้:
<div> <div> <p> กล่อง 1 </p> </div> <div> <p> กล่อง 2 </p> </div> <p> <p> กล่อง 3 </p> </div> <p> <p> กล่อง 4 </p> </div> <div> <p> 7 </p> </div> <div> <p> กล่อง 8 </p> </div> <div> <p> กล่อง 9 </p> </div> <div> <p> กล่อง 10 </p> </div> <p> <p> กล่อง 11 </p> </div> <p> <p> 8 </p> </div> <div> <p> กล่อง 9 </p> </div> <div> <p> กล่อง 10 </p> </div> <div> <p> กล่อง 11 </p> </div> <div> <p> กล่อง 12 </p> </div> </div> </div>
โดยที่ col-*-* แสดงถึงความกว้างของคอลัมน์ที่ครอบครองโดยระบบกริดภายใต้อุปกรณ์ประเภทต่างๆ
เล็กมาก โทรศัพท์มือถือ (<768px) | เล็ก แท็บเล็ต (≥768px) | กลาง คอมพิวเตอร์ (≥992px) | ใหญ่ คอมพิวเตอร์ (≥1200px) | |
|---|---|---|---|---|
| ความกว้างสูงสุดของคอนเทนเนอร์ | ไม่มี (อัตโนมัติ) | 750px | 970px | 1170px |
| คำนำหน้าชื่อคลาส | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| ความกว้างคอลัมน์สูงสุด | Auto | ~62px | ~81px | ~97px |
| ช่องว่างคอลัมน์ | 15px (เช่น 30px ) | |||
เมื่อความสูงของคอลัมน์แตกต่างกันผลของการลอยจะทำลายโครงสร้างของกริดซึ่งสามารถหลีกเลี่ยงได้โดยใช้คลาสการตอบสนอง นี่คือรหัสกริดที่สมบูรณ์:
<div> <div> <p> กล่อง 1 </p> </div> <div> <p> กล่อง 2 </p> </div> <div> </div> <p> <p> กล่อง 3 </p> </div> </div> </div> <div> <p> 6 </p> </div> <div> </div> <div> <p> กล่อง 7 </p> </div> <div> <p> กล่อง 8 </p> </div> </div> </div> <p> <p> กล่อง 8 </p> </div> </div> </div> </div> 6 </p> </div> <div> </div> <div> <p> กล่อง 7 </p> </div> <div> <p> กล่อง 8 </p> </div> </div> </div> <p> <p> กล่อง 9 </p> </div> </div> </div> </div> 11 </p> </div> <div> <p> กล่อง 12 </p> </div> </div> </div>
Visible-*-* บ่งชี้ว่าอุปกรณ์ใดที่แสดงด้วยแอตทริบิวต์การแสดงผล เนื่องจากอุปกรณ์ขนาดเล็กเริ่มต้นเป็นคอลัมน์เดียวจึงไม่จำเป็นต้องใช้คลาสตอบกลับเพื่อปรับแต่ง
คลาสตอบกลับสามารถใช้ในแท็กปกติเช่นรหัสต่อไปนี้:
<p> ย่อหน้านี้สามารถมองเห็นได้เฉพาะบนอุปกรณ์ขนาดเล็กพิเศษ </p> <p> ย่อหน้านี้สามารถมองเห็นได้เฉพาะบนอุปกรณ์ขนาดเล็ก </p> <p> ย่อหน้านี้สามารถมองเห็นได้บนอุปกรณ์ขนาดกลาง </p> <p> ย่อหน้านี้สามารถมองเห็นได้บนอุปกรณ์ขนาดใหญ่เท่านั้น </p>
ในทำนองเดียวกันคุณสามารถใช้ Hidden-* เพื่อตั้งค่าให้ซ่อนในอุปกรณ์เฉพาะ:
<p> ย่อหน้านี้ถูกซ่อนไว้บนอุปกรณ์ขนาดเล็กพิเศษเท่านั้น </p> <p> ย่อหน้านี้ถูกซ่อนอยู่บนอุปกรณ์ขนาดเล็กเท่านั้น </p> <p> ย่อหน้านี้จะถูกซ่อนไว้บนอุปกรณ์ขนาดกลางเท่านั้น </p> <p> ย่อหน้านี้ถูกซ่อนไว้บนอุปกรณ์ขนาดใหญ่เท่านั้น
คลาสตอบกลับยังสามารถตั้งค่ารูปแบบการพิมพ์:
ข้างต้นคือระบบกริดของบันทึกการศึกษา bootstrap3 (1) แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!