Bootstrap 4 ตัวอย่างกริด
ด้านล่างนี้ เราได้รวบรวมตัวอย่างเค้าโครงตาราง Bootstrap 4 บางส่วน
สามคอลัมน์เท่ากัน
ใช้.colคลาสตามจำนวนองค์ประกอบที่ระบุและ Bootstrap จะรับรู้ว่ามีกี่องค์ประกอบ (และสร้างคอลัมน์ที่มีความกว้างเท่ากัน) ในตัวอย่างด้านล่าง เราใช้องค์ประกอบ col สามองค์ประกอบ ซึ่งได้ความกว้าง 33.33% แต่ละองค์ประกอบ
ตัวอย่าง
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div
class="col">col</div>
</div>
สามคอลัมน์เท่ากันโดยใช้ตัวเลข
คุณยังสามารถใช้ตัวเลขเพื่อควบคุมความกว้างของคอลัมน์ได้อีกด้วย เพียงตรวจสอบให้แน่ใจว่าผลรวมรวมกันได้ไม่เกิน 12 หรือน้อยกว่า (คุณไม่จำเป็นต้องใช้คอลัมน์ที่มีอยู่ทั้งหมด 12 คอลัมน์):
ตัวอย่าง
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div
class="col-4">col-4</div>
</div>
สามคอลัมน์ไม่เท่ากัน
ในการสร้างคอลัมน์ที่ไม่เท่ากัน คุณต้องใช้ตัวเลข ตัวอย่างต่อไปนี้จะสร้างการแบ่ง 25%/50%/25%:
ตัวอย่าง
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div
class="col-3">col-3</div>
</div>
การตั้งค่าความกว้างหนึ่งคอลัมน์
อย่างไรก็ตาม การกำหนดความกว้างของคอลัมน์เดียวก็เพียงพอแล้ว และให้คอลัมน์พี่น้องปรับขนาดรอบๆ คอลัมน์โดยอัตโนมัติ ตัวอย่างต่อไปนี้จะสร้างการแบ่ง 25%/50%/25%:
ตัวอย่าง
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div
class="col">col</div>
</div>
คอลัมน์ที่เท่าเทียมกันมากขึ้น
ตัวอย่าง
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
แถว Cols
คุณยังสามารถควบคุมจำนวนคอลัมน์ที่ควรปรากฏติดกัน (โดยไม่คำนึงถึงจำนวนคอลัมน์) ด้วย.row-cols-*คลาส:
ตัวอย่าง
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
คอลัมน์ที่ไม่เท่ากันเพิ่มเติม
ตัวอย่าง
<!-- Two Unequal
Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3
of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
ความสูงเท่ากัน
หากคอลัมน์ใดคอลัมน์หนึ่งสูงกว่าคอลัมน์อื่น (เนื่องจากข้อความหรือความสูงของ CSS) คอลัมน์ที่เหลือจะเป็นไปตามนี้
ตัวอย่าง
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
คอลัมน์ที่ซ้อนกัน
ตัวอย่างต่อไปนี้แสดงวิธีสร้างเค้าโครงสองคอลัมน์ โดยมีอีกสองคอลัมน์อยู่ภายในคอลัมน์ใดคอลัมน์หนึ่ง:
ตัวอย่าง
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
ชั้นเรียนตอบสนอง
ระบบตาราง Bootstrap 4 มีห้าคลาส:
.col-(อุปกรณ์ขนาดเล็กพิเศษ - ความกว้างของหน้าจอน้อยกว่า 576px).col-sm-(อุปกรณ์ขนาดเล็ก - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 576px).col-md-(อุปกรณ์ขนาดกลาง - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 768px).col-lg-(อุปกรณ์ขนาดใหญ่ - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 992px).col-xl-(อุปกรณ์ขนาดใหญ่ - ความกว้างของหน้าจอเท่ากับหรือมากกว่า 1200px)
คลาสข้างต้นสามารถรวมกันเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น
เคล็ดลับ:แต่ละคลาสจะขยายขนาดขึ้น ดังนั้นหากคุณต้องการตั้งค่าความกว้างเท่ากันสำหรับ
smและmdคุณเพียงแค่ระบุsmเท่านั้น
ซ้อนกันเป็นแนวนอน
ตัวอย่างต่อไปนี้แสดงวิธีสร้างเลย์เอาต์คอลัมน์ที่เริ่มซ้อนกันบนอุปกรณ์ขนาดเล็กพิเศษ ก่อนที่จะจัดวางแนวนอนบนอุปกรณ์ขนาดใหญ่ (sm, md, lg และ xl):
ตัวอย่าง
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div
class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
มิกซ์แอนด์แมทช์
ตัวอย่าง
<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices
-->
<div class="row">
<div class="col-6
col-sm-9">col-6 col-sm-9</div>
<div class="col-6
col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 58%/42% split
on extra small, small and medium devices and 66.3%/33.3% split on large and
xlarge devices -->
<div class="row">
<div class="col-7 col-lg-8">col-7
col-lg-8</div>
<div class="col-5 col-lg-4">col-5
col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split
on medium devices, and a 33%/66% split on large and xlarge devices. On extra
small devices, it will automatically stack (100%) -->
<div
class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3
col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6
col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
ไม่มีรางน้ำ
เพิ่ม.no-guttersคลาสลงใน.rowคอนเทนเนอร์เพื่อลบรางน้ำ (พื้นที่เพิ่มเติม):
เพื่อให้ได้มาอย่างน้อยที่สุด ใครในพวกเราควรใช้การจ้างงานใด ๆ ยกเว้นเพื่อใช้ประโยชน์จากผลที่ตามมา
ตัวอย่าง
<div class="row no-gutters">