สอน PHP ASP ASP.NET C# JSP Javascript Java Perl IT Solution Opensource Source Code MVC Software Freeware Shareware
 หน้าแรก  |  ข่าวสารต่างๆ  |  ค้นหาบทความ

Bootstrap Grid | การใช้ Bootstrap Grid

Bootstrap Grid อนุญาติให้มีได้มากสุด 12 คอลัม
ถ้าคุณไม่ต้องการใช้ถึง 12 columns คุณสามารถยุบ column เข้าด้วยกันเพื่อสร้าง column ที่กว้างได้

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Bootstrap grid system


มีการแสดงผลแบบ responsive และ column จะมีการจัดใหม่อัตโนมัติขึ้นอยู่กับขนาดของหน้าจอ

Grid Classes


Bootstrap grid system มีทั้งหมด 4 คลาสด้วยกัน คือ
xs (สำหรับ phones)
sm (สำหรับ tablets)
md (สำหรับ desktops)
lg (สำหรับ larger desktops)

คลาสข้างบนนี้สามารถใช้ร่วมกันเพื่อสร้างหน้าจอที่ยืดหยุ่นได้

โครงสร้างพื้นฐานของ Bootstrap Grid


<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>

เริ่มต้นจะต้องสร้าง row หรือแถวก่อน โดยใช้ <div class="row"> หลังจากนั้นจึงเพิ่ม column ใน row นั้น โดยจะต้องกำหนดจำนวน column ทั้งหมดในแถวนั้นก่อน โดยจำนวนรวมของตัวเลขที่ชื่อ class ของ column นั้น รวมกันทั้งหมดต้องเท่ากับ 12 เราจะกำหนดขนาดตามอุปกรณ์ด้วย ตัวอย่างเช่น

3 Columns กว้างเท่ากัน


.col-sm-4 .col-sm-4 .col-sm-4
จากตัวอย่างจะมี 3 columns โดยเริ่มจาก col-sm ซึ่งหมายถึงสำหรับ tablets แต่หากขยายหน้าจอเป็น desktop ก็จะทำการยืด column ให้พอดีกับหน้าจอ และถ้าเปิดจากมือถือก็จะมีการย่อให้แต่ละ column กลายเป็นบรรทัดๆ ไปอัตโนมัติ

2 Columns กว้างไม่เท่ากัน


.col-sm-4 .col-sm-8
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

จากตัวอย่างจะมี 2 column กว้างไม่เท่ากัน โดยเริ่มจากขนาด tablet และขยายไปยังขนาด large desktop
  
แผนผังเว็บไซต์ Codethep.com
ข่าวสารต่างๆ เว็บบอร์ด ค้นหาบทความ

ติดตาม ข่าวสารจาก Codethep ผ่านช่องทางข้างล่างนี้
Codethep:  Facebook Codethep  Twitter Codethep
- เกี่ยวกับ Codethep
- ติดต่อ Codethep
- ลงโฆษณากับ Codethep
- ช่วยเหลือ