Bootstrap ตัวอย่างตาราง: อุปกรณ์ขนาดเล็ก
สมมติว่าเรามีรูปแบบที่เรียบง่ายด้วยสองคอลัมน์ เราต้องการคอลัมน์ที่จะแบ่ง 25%/75% สำหรับอุปกรณ์ขนาดเล็ก
เคล็ดลับ: อุปกรณ์ขนาดเล็กที่มีการกำหนดไว้ว่ามีความกว้างหน้าจอจาก 768 พิกเซล 991 พิกเซล
สำหรับอุปกรณ์ขนาดเล็กเราจะใช้ .col-sm-* เรียน
เราจะเพิ่มการเรียนต่อไปนี้เพื่อสองคอลัมน์ของเรา:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>ตอนนี้ Bootstrap จะไปพูด "ที่มีขนาดเล็กให้มองหาชั้นเรียนที่มี -sm- ในพวกเขาและใช้เหล่านั้น"
ตัวอย่างต่อไปนี้จะมีผลใน 25%/75% แยกขนาดเล็ก (และขนาดกลางและขนาดใหญ่) อุปกรณ์ บนอุปกรณ์ขนาดเล็กเป็นพิเศษก็จะสแต็ค (100%):
Col-SM-3
Col-SM-9
ตัวอย่าง
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> ลองตัวเอง» หมายเหตุ: ตรวจสอบให้แน่ใจว่าผลรวมเสมอเพิ่มขึ้นถึง 12
สำหรับ / 66.6% 33.3% แยกคุณจะใช้ .col-sm-4 และ .col-sm-8 :
Col-SM-4
Col-SM-8
ตัวอย่าง
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> ลองตัวเอง» บทต่อไปแสดงให้เห็นถึงวิธีการเพิ่มร้อยละแยกที่แตกต่างกันสำหรับอุปกรณ์ขนาดกลาง