ตัวอย่าง Bootstrap Grid
ด้านล่างนี้ เราได้รวบรวมตัวอย่างเค้าโครงตาราง Bootstrap พื้นฐานบางส่วน
สามคอลัมน์เท่ากัน
ตัวอย่างต่อไปนี้แสดงวิธีรับคอลัมน์ที่มีความกว้างเท่ากันสามคอลัมน์โดยเริ่มต้นที่แท็บเล็ตและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่ บนโทรศัพท์มือถือ คอลัมน์จะเรียงซ้อนโดยอัตโนมัติ:
ตัวอย่าง
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
สามคอลัมน์ไม่เท่ากัน
ตัวอย่างต่อไปนี้แสดงวิธีรับคอลัมน์ความกว้างต่างๆ สามคอลัมน์โดยเริ่มจากแท็บเล็ตและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่:
ตัวอย่าง
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
สองคอลัมน์ไม่เท่ากัน
ตัวอย่างต่อไปนี้แสดงวิธีรับคอลัมน์ความกว้างต่างๆ สองคอลัมน์โดยเริ่มจากแท็บเล็ตและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่:
ตัวอย่าง
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
ไม่มีรางน้ำ
ใช้.row-no-guttersคลาสเพื่อลบรางน้ำออกจากแถวและคอลัมน์:
ตัวอย่าง
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
สองคอลัมน์ที่มีสองคอลัมน์ที่ซ้อนกัน
ตัวอย่างต่อไปนี้แสดงวิธีทำให้สองคอลัมน์เริ่มต้นที่แท็บเล็ตและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่ โดยมีอีกสองคอลัมน์ (ความกว้างเท่ากัน) ภายในคอลัมน์ที่ใหญ่กว่า (ที่โทรศัพท์มือถือ คอลัมน์เหล่านี้และคอลัมน์ที่ซ้อนกันจะซ้อนกัน):
ตัวอย่าง
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
ผสม: มือถือและเดสก์ท็อป
ระบบกริด Bootstrap มีสี่คลาส: xs (โทรศัพท์), sm (แท็บเล็ต), md (เดสก์ท็อป) และ lg (เดสก์ท็อปขนาดใหญ่กว่า) สามารถรวมคลาสเข้าด้วยกันเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น
เคล็ดลับ:แต่ละคลาสจะขยายขนาดขึ้น ดังนั้น หากคุณต้องการตั้งค่าความกว้างเท่ากันสำหรับ xs และ sm คุณจะต้องระบุ xs เท่านั้น
ตัวอย่าง
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
เคล็ดลับ:จำไว้ว่าคอลัมน์กริดควรรวมกันเป็นสิบสองแถว ยิ่งไปกว่านั้น คอลัมน์จะสแต็กไม่ว่าวิวพอร์ตจะเป็นอย่างไรก็ตาม
ผสม: มือถือ แท็บเล็ต และเดสก์ท็อป
ตัวอย่าง
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
ลอยน้ำใส
เคลียร์ทุ่น (กับ.clearfixคลาส) ที่จุดสั่งหยุดเฉพาะเพื่อป้องกันการห่อแบบแปลกๆ ที่มีเนื้อหาไม่สม่ำเสมอ:
ตัวอย่าง
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
คอลัมน์ออฟเซ็ต
ย้ายคอลัมน์ไปทางขวาโดยใช้.col-md-offset-*คลาส คลาสเหล่านี้เพิ่มระยะขอบด้านซ้ายของคอลัมน์โดย * คอลัมน์:
ตัวอย่าง
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Push And Pull - เปลี่ยนการเรียงลำดับคอลัมน์
เปลี่ยนลำดับของคอลัมน์กริดด้วย.col-md-push-*และ
.col-md-pull-*คลาส:
ตัวอย่าง
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>