ระบบ Grid ใน Bootstrap 3
การทำงานของระบบ Grid ใน Bootstrap 3 นั้นแสดงได้จากตารางต่อไปนี้
| ขนาดเล็กพิเศษ (โทรศัพท์: xs) (<768px) | ขนาดเล็ก (แทปเบล็ต: sm) (≥768px) | ขนาดกลาง (เดสทอป: md) (≥992px) | ขนาดใหญ่ (เดสทอป :lg) (≥1200px) | |
|---|---|---|---|---|
| ลักษณะของ Grid | แสดงในแนวนอนทุกครั้ง | ย่อและแสดงผลตามขนาดที่กำหนด | ||
| ความกว้างของ Container | ไม่มี (อัตโนมัติ) | 750px | 970px | 1170px |
| คำนำหน้า Class | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| จำนวนคอลัมน์ | 12 | |||
| ความกว้างของ Column | อัตโนมัติ | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | Yes | |||
| Column ordering | Yes | |||
ตัวอย่าง: การกำหนด Grid
ตัวอย่างนี้ใช้ .col-md-* ซึ่งเป็นการแสดงผลในหน้าจอแบบเดสทอป โดยสามารถเปลี่ยนเป็นต่างๆ ได้ตามต้องการตามตารางด้านบน ซึ่งจะอยู่ภายใต้ .row
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
ความคิดเห็น