Bootstrap Grids
Bootstrap Grid System
ระบบกริดของ Bootstrap อนุญาตให้มีคอลัมน์ถึง 12 คอลัมน์ทั่วทั้งหน้า
หากคุณไม่ต้องการใช้ทั้ง 12 คอลัมน์แยกกัน คุณสามารถจัดกลุ่มคอลัมน์เข้าด้วยกันเพื่อสร้างคอลัมน์ที่กว้างขึ้นได้:
| ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 | ช่วง 1 |
| ช่วง 4 | ช่วง 4 | ช่วง 4 | |||||||||
| ช่วง 4 | ช่วง8 | ||||||||||
| ช่วง 6 | ช่วง 6 | ||||||||||
| ช่วง 12 | |||||||||||
ระบบกริดของ Bootstrap นั้นตอบสนอง และคอลัมน์จะจัดเรียงใหม่โดยอัตโนมัติตามขนาดหน้าจอ
คลาสกริด
ระบบกริด Bootstrap มีสี่คลาส:
xs(สำหรับโทรศัพท์ - หน้าจอกว้างน้อยกว่า 768px)sm(สำหรับแท็บเล็ต - หน้าจอกว้างเท่ากับหรือมากกว่า 768px)md(สำหรับแล็ปท็อปขนาดเล็ก - หน้าจอกว้างเท่ากับหรือมากกว่า 992px)lg(สำหรับแล็ปท็อปและเดสก์ท็อป - หน้าจอกว้างเท่ากับหรือมากกว่า 1200px)
คลาสข้างต้นสามารถรวมกันเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น
โครงสร้างพื้นฐานของ Bootstrap Grid
ต่อไปนี้เป็นโครงสร้างพื้นฐานของตาราง Bootstrap:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
อันดับแรก; สร้างแถว ( <div
class="row">) จากนั้น เพิ่มจำนวนคอลัมน์ที่ต้องการ (แท็กที่มี
.col-*-*คลาสที่เหมาะสม) โปรดทราบว่าตัวเลขใน.col-*-*ควรรวมกันได้ไม่เกิน 12 สำหรับแต่ละแถว
ด้านล่างนี้ เราได้รวบรวมตัวอย่างเค้าโครงตาราง Bootstrap พื้นฐานบางส่วน
สามคอลัมน์เท่ากัน
ตัวอย่างต่อไปนี้แสดงวิธีรับคอลัมน์ที่มีความกว้างเท่ากันสามคอลัมน์โดยเริ่มต้นที่แท็บเล็ตและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่ บนโทรศัพท์มือถือหรือหน้าจอที่มีความกว้างน้อยกว่า 768px คอลัมน์จะเรียงซ้อนกันโดยอัตโนมัติ:
ตัวอย่าง
<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-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
เคล็ดลับ:คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับกริด Bootstrap ในภายหลังในบทช่วยสอนนี้