เรียนรู้ระบบ Grid ใน Bootstrap 3

เรียนรู้ระบบ Grid ใน Bootstrap 3

มานพ กองอุ่น bootstrap grid 2,310

ระบบ 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>

 


หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com
มานพ กองอุ่น

มานพ กองอุ่น
admin

  • 2 เพื่อน
  • 16 ผู้ติดตาม
  • 773 โพสต์