Bootstrap 5 หน้าแสดงระบบกริด

ระบบเน็ต

ระบบเน็ตของ Bootstrap จัดทำด้วย flexbox และสามารถมีคอลัมน์สูงสุดได้ 12 คอลัมน์

หากคุณไม่ต้องการใช้ทั้ง 12 คอลัมน์อย่างเดี่ยวๆ คุณสามารถรวมกันตัวคอลัมน์เพื่อสร้างคอลัมน์กว้างขึ้น:

ระบบเน็ตตอบสนองรวดเร็ว คอลัมน์จะเปลี่ยนตำแหน่งอัตโนมัติตามขนาดหน้าจอ

โปรดแน่ใจว่ารวมกันต้องเท่าหรือต่ำกว่า 12 (ไม่จำเป็นต้องใช้ทั้ง 12 คอลัมน์ที่มีอยู่)

รูปแบบเน็ต

ระบบเน็ตของ Bootstrap 5 มีรูปแบบหกเหล่านี้:

  • .col- (อุปกรณ์ขนาดเล็กสูงสุด - ความกว้างหน้าจอต่ำกว่า 576px)
  • .col-sm- (อุปกรณ์ขนาดเล็ก - ความกว้างหน้าจอเท่าหรือมากกว่า 576px)
  • .col-md- (อุปกรณ์ขนาดกลาง - ความกว้างหน้าจอเท่าหรือมากกว่า 768px)
  • .col-lg- (อุปกรณ์ขนาดใหญ่ - ความกว้างหน้าจอเท่าหรือมากกว่า 992px)
  • .col-xl- (อุปกรณ์ขนาดใหญ่สูงสุด - ความกว้างหน้าจอเท่าหรือมากกว่า 1200px)
  • .col-xxl- (อุปกรณ์ขนาดใหญ่ - ความกว้างหน้าจอเท่าหรือมากกว่า 1400px)

ดัดแปลงรูปแบบของรูปแบบดังกล่าวเพื่อสร้างการจัดแถวที่มีความเคลื่อนไหวและละเอียดอ่อนมากขึ้น

คำเตือน：แต่ละรูปแบบถูกขยายเป็นระบอบสัดส่วน ดังนั้นหากคุณต้องการให้ความกว้างของ sm และ md เหมือนกัน คุณเพียงจะต้องกำหนด sm。

โครงสร้างเน็ตของ Bootstrap 5 ตัวพื้นฐาน

นี่คือโครงสร้างเน็ตของ Bootstrap 5 ตัวพื้นฐาน:

<!-- ควบคุมความกว้างของคอลัมน์ และการแสดงในอุปกรณ์ต่าง ๆ -->
<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>
<!-- หรือให้ Bootstrap จัดการตัวแทนโดยอัตโนมัติ -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

ทดลองด้วยตัวเอง

ตัวอย่างที่หนึ่ง: สร้างบรรทัดหนึ่ง (<div class = "row">）。เพิ่มตัวแทนจำนวนที่ต้องการ (โดยมี .col-*-* ของคลาส (class ที่มีอยู่เดิม) ดาวดวง (*) แรกเป็นตัวแสดงความสามารถตอบสนอง: sm, md, lg, xl หรือ xxl และดาวดวงที่สองเป็นตัวเลข แต่ละบรรทัดจะมีจำนวน 12

ตัวอย่างที่สอง: ไม่ต้องใส่เลขให้แก่แต่ละ col เพิ่มเลขเพื่อให้ bootstrap จัดการตัวแทน เพื่อทำคอลัมน์ที่มีความกว้างเท่ากัน "col" อิเลิ้ม = ความกว้าง 50% ของคอลัมน์ และสามคอลัมน์ = ความกว้าง 33.33% ของคอลัมน์ สี่คอลัมน์ = 25% ของความกว้าง และอื่น ๆ คุณยังสามารถใช้ .col-sm|md|lg|xl|xxl ทำให้คอลัมน์มีความสามารถตอบสนอง

ตัวเลือกเครือง

ตารางด้านล่างนี้นับรวม Bootstrap 5 ระบบเครืองในการทำงานบนขนาดหน้าจอต่าง ๆ

เซ็กต์ขนาดเล็ก (<576px) เซ็กต์เล็ก (>=576px) เซ็กต์กลาง (>=768px) เซ็กต์ใหญ่ (>=992px) เซ็กต์ฟาก (>=1200px) เซ็กต์ยักษ์ (>=1400px)
เซ็กต์ประกาศ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
พฤติกรรมของแนวโน้ม ระดับน้ำทะเลตั้งแต่เริ่มต้น ยืดเองตั้งแต่ต้นตัวเลข ในตัวแทนระดับต่าง ๆ ยืดเองตั้งแต่ต้นตัวเลข ในตัวแทนระดับต่าง ๆ ยืดเองตั้งแต่ต้นตัวเลข ในตัวแทนระดับต่าง ๆ ยืดเองตั้งแต่ต้นตัวเลข ในตัวแทนระดับต่าง ๆ ยืดเองตั้งแต่ต้นตัวเลข ในตัวแทนระดับต่าง ๆ
ความกว้างของตัวแทน ไม่มี (auto) 540px 720px 960px 1140px 1320px
เหมาะสำหรับ ตั้งโทรศัพท์แบบแยกแนวตั้ง ตั้งโทรศัพท์แบบแยกแนวตั้ง ตั้งโทรศัพท์แบบแยก คอมพิวเตอร์แบบโทรศัพท์ คอมพิวเตอร์และตั้งโต๊ะ คอมพิวเตอร์และตั้งโต๊ะ
คอลัมน์ # 12 12 12 12 12 12
ความกว้างของอารยะทาง 1.5rem (0.75rem ต่อทุกฝั่งของคอลัมน์) 1.5rem (0.75rem ต่อทุกฝั่งของคอลัมน์) 1.5rem (0.75rem ต่อทุกฝั่งของคอลัมน์) 1.5rem (0.75rem ต่อทุกฝั่งของคอลัมน์) 1.5rem (0.75rem ต่อทุกฝั่งของคอลัมน์) 1.5rem (0.75rem ต่อทุกฝั่งของคอลัมน์)
การร่วมด้าน ใช่ ใช่ ใช่ ใช่ ใช่ ใช่
การเปลี่ยนทิศทาง ใช่ ใช่ ใช่ ใช่ ใช่ ใช่
การจัด序号ในตาราง ใช่ ใช่ ใช่ ใช่ ใช่ ใช่