ตาราง Bootstrap Grids

ตาราง Bootstrap Grids 

ระบบตารางของ Bootstrap ช่วยให้สามารถแบ่งใช้ส่วนหน้าเว็บได้ถึง 12 คอลัมน์ แต่ถ้าไม่ต้องการใช้ทั้ง 12 คอลัมน์ ก็สามารถจัดกลุ่มคอลัมน์ร่วมกันเพื่อสร้างคอลัมน์ที่กว้างขึ้นได้






ระบบกริดของ Bootstrap จะตอบสนองและจะจัดเรียงคอลัมน์ใหม่โดยอัตโนมัติตามขนาดหน้าจอ

กริด คลาส Grid Classes

ระบบ Bootstrap grid มีสี่คลาส ได้แก่
        คลาส 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 - * - * classes) โปรดทราบว่าตัวเลขใน. col - * - * ควรเพิ่มได้ถึง 12 สำหรับแต่ละแถว

ด้านล่างเราได้รวบรวมตัวอย่างตารางพื้นฐาน Bootstrap ตาราง