ด้านล่างนี้เราได้เก็บรวบรวมตัวอย่างบางส่วนของพื้นฐาน 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> ลองตัวเอง» สองคอลัมน์ที่มีสองคอลัมน์ที่ซ้อนกัน
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการที่จะได้รับสองคอลัมน์เริ่มต้นที่แท็บเล็ตและปรับตั้งโต๊ะขนาดใหญ่ที่มีอีกสองคอลัมน์ (ความกว้างเท่ากัน) ภายในคอลัมน์ขนาดใหญ่ (ที่โทรศัพท์มือถือคอลัมน์เหล่านี้และคอลัมน์ที่ซ้อนกันของพวกเขาจะสแต็ค):
ตัวอย่าง
<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> ลองตัวเอง» เคล็ดลับ: โปรดจำไว้ว่าคอลัมน์ตารางควรเพิ่มได้ถึงสิบสองสำหรับแถว ยิ่งไปกว่านั้นคอลัมน์จะสแต็คไม่ว่า viewport
ผสม: มือถือ, แท็บเล็ตและสก์ท็อป
ตัวอย่าง
<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-8</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 class) ที่จุดพักที่เฉพาะเจาะจงเพื่อป้องกันการตัดแปลกที่มีเนื้อหาที่ไม่สม่ำเสมอ:
ตัวอย่าง
<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">
.col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</div> ลองตัวเอง» ผลักดันและดึง - เปลี่ยนการสั่งซื้อคอลัมน์
เปลี่ยนลำดับของคอลัมน์ตารางที่มี .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> ลองตัวเอง»