Bootstrap 5 กริด:เครื่องมือย่อย
- หน้าก่อน BS5 ซอปเปอร์/นอน
- หน้าต่อไป BS5 กริดเล็ก
ตัวอย่างเครือข่ายของอุปกรณ์ขนาดเล็กที่สุด
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| คำนำหน้าคลาส | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| ความกว้างของหน้าจอ | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
ตอนนี้เรามีต้นแบบตารางที่มีสองคอลัมน์. เราอยากให้คอลัมน์ทั้งหมดแบ่งแยกอุปกรณ์ 25% / 75%。
เราจะเพิ่มคลาสต่างๆ ลงในสองคอลัมน์ดังนี้：
<div class="col-3">....</div> <div class="col-9">....</div>
ตัวอย่างดังกล่าวจะทำให้มีการแบ่งแยกอุปกรณ์ทั้งหมด (ขนาดเล็กที่สุด, ขนาดเล็ก, ขนาดปานกลาง, ขนาดใหญ่, ขนาดใหญ่ที่สุด และ ขนาดยักษ์ใหญ่) 25% / 75%。
ตัวอย่าง
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-primary">
<p>มูลนิธิธรรมชาติโลก (WWF) ก่อตั้งขึ้นเมื่อวันที่ 29 เมษายน 1961 โลกที่มีลักษณะของหมีโปโมโม ...</p>
</div>
<div class="col-9 bg-dark">
<p>ปี 1980 องค์กร WWF มาเข้าสู่ประเทศจีนอย่างเป็นทางการ ถูกเชิญโดยรัฐบาลจีนมาจัดการปกป้องหญ้าและที่อยู่อาศัยของหมีโปโมโม ...</p>
</div>
</div>
</div>
注意：กรุณาให้รวมเป็นตัวเลขที่เท่ากับหรือต่ำกว่า 12 (ไม่จำเป็นต้องใช้ทั้ง 12 คอลัมน์ที่มีอยู่):
สำหรับการแบ่ง 33.3% / 66.6% คุณควรใช้ .col-4 และ .col-8สำหรับการแบ่ง 50% / 50% คุณควรใช้ .col-6 และ .col-6):
ตัวอย่าง
<!-- การแบ่ง 33.3%/66.6% -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-primary">
<p>มูลนิธิธรรมชาติโลก (WWF) ก่อตั้งขึ้นเมื่อวันที่ 29 เมษายน 1961 โลกที่มีลักษณะของหมีโปโมโม ...</p>
</div>
<div class="col-8 bg-dark">
<p>ปี 1980 องค์กร WWF มาเข้าสู่ประเทศจีนอย่างเป็นทางการ ถูกเชิญโดยรัฐบาลจีนมาจัดการปกป้องหญ้าและที่อยู่อาศัยของหมีโปโมโม ...</p>
</div>
</div>
</div>
<!-- การแบ่ง 50%/50% -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-primary">
<p>มูลนิธิธรรมชาติโลก (WWF) ก่อตั้งขึ้นเมื่อวันที่ 29 เมษายน 1961 โลกที่มีลักษณะของหมีโปโมโม ...</p>
</div>
<div class="col-6 bg-dark">
<p>ปี 1980 องค์กร WWF มาเข้าสู่ประเทศจีนอย่างเป็นทางการ ถูกเชิญโดยรัฐบาลจีนมาจัดการปกป้องหญ้าและที่อยู่อาศัยของหมีโปโมโม ...</p>
</div>
</div>
</div>
คอลัมน์ตั้งตารางอัตโนมัติ
ใน Bootstrap 5 มีวิธีง่ายๆ ที่จะสร้างคอลัมน์ตั้งตารางอัตโนมัติสำหรับทุกอุปกรณ์คอลัมน์ที่มีขนาดเท่ากันเพียงแค่ถอดเลขออกจาก .col-* ลบตัวเลขและใช้เฉพาะ col อันที่จะเป็นตัวอย่าง .col คลาส Bootstrap จะตรวจสอบจำนวนคอลัมน์ และแต่ละคอลัมน์จะได้รับความกว้างเดียวกัน
<!-- สองคอลัมน์: 50% ความกว้าง --> <div class="row"> <div class="col">1 ของ 2</div> <div class="col">2 ของ 2</div> </div> <!-- สี่คอลัมน์: 25% ความกว้าง --> <div class="row"> <div class="col">1 ของ 4</div> <div class="col">2 ของ 4</div> <div class="col">3 ของ 4</div> <div class="col">4 ของ 4</div> </div>
ช่วงต่อไปจะแสดงวิธีการเพิ่มเปอร์เซ็นต์ส่วนของการแบ่งที่แตกต่างกันสำหรับอุปกรณ์ขนาดเล็ก
- หน้าก่อน BS5 ซอปเปอร์/นอน
- หน้าต่อไป BS5 กริดเล็ก
