grid systemg เป็นอย่างไร เพื่อให้ง่ายต่อความเข้าใจ รูปแบบการแสดงของ grid จะคล้ายๆ กับการแสดงผลของตาราง แต่สำหรับ bootstrap นั้น grid จะเป็นลักษณะกล่องสี่เหลี่ยมวางเรียงซ้อนกันคล้ายแผ่นตะแกรง ซึ่งจะเรียกกล่องแต่ละอันว่า flexbox หรือกล่องที่มีความยืดหยุ่นปรับเปลี่ยนขนาดอัตโนมัติ โดยระบบ grid จะต้องประกอบไปด้วย 3 class หลักๆ คือ container, row และ col ตามโค้ดด้านล่างดังนี้
โค้ด: เลือกทั้งหมด
<div class="container">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
เราสามารถกำหนดจำนวนคอลัมน์หรือจำนวนของ col ได้ไม่เกิน 12 คอลัมน์ใน 1 row การเรียกใช้นั้นด้วยวิธี ระบุตัวเลข 1 - 12 ต่อเข้าไปในclass "col" ตัวอย่างเช่น col-3, col-6, col-12 เป็นต้น แต่ถ้าไม่ได้มีการกำหนดตัวเลข คอลัมน์นั้นๆ จะปรับขนาดด้วยสัดส่วนความกว้างให้อัตโนมัติ อย่างโค้ดตัวอย่างที่เห็นด้านบนไม่มีการต่อตัวเลข
ซึงมีจำนวนclass col ทั้งหมด 3 คลาส ซึ่งหมาถึง 3 คอลัมน์ สัดส่วนความกว้างของแต่ละคอลัมน์ก็จะเป็น 12 หาร 3 หรือเท่า 4 ซึ่งก็คือสัดส่วน 4:12 เราสามารถกำหนดแบบระบุและไม่ระบุตัวเลขรวมกันได้ อย่าง เราต้องการ 3 คอลัมน์ โดยให้คอลัมน์ตรงกลาง มีสัดส่วนเป็น 6:12 ส่วนคอลัมน์ซ้ายขวาให้ปรับอัตโนมัติอย่งละ 3:12
เพื่อให้เห็นภาพ เราสามารถกำหนดได้ดังนี้โดยมีโค้ดดังนี้
โค้ด: เลือกทั้งหมด
<div class="container">
<div class="row">
<div class="col">
col
</div>
<div class="col-6">
col-6
</div>
<div class="col">
col
</div>
</div>
</div>
โค้ด: เลือกทั้งหมด
<div class="container">
<div class="row">
<div class="col col-sm-4">
col col-sm-4
</div>
<div class="col col-sm-8">
col col-sm-8
</div>
</div>
</div>
ทั้งหมดนี้เป็นส่วนหนึ่งของ ระบบ grid ใน bootstrap 4 สำหรับเนื้อหาเพิ่มเติมจะมาเขียนในกาสต่อไป สามารถสอบถามได้ในคอมเม้นได้เลยครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : bootstrap
-สอนการใช้งาน bootstrap
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP