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

wave
มานพ กองอุ่น 23 เม.ย. 2016 16:41:04 8,914

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

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 8,914
  • รักเลย 0
  • หมวดหมู่ Bootstrap 3.x
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags bootstrap grid
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009