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