Grid System ของ Bootstrap

Grid System ของ Bootstrap

grid system คือ การจัด คอลัมน์ ในหน้าจอ ปกติแล้ว grid system ที่ Bootstrap ให้มาจะเป็นแบบ 12 คอลัมน์ ครับ ซึ่งจะใช้ร่วมกับ container ที่เราเพิ่งสร้างขึ้นมานั่นเอง โดยแต่ละคอลัมน์จะมีความกว้างเท่ากันคือ 60px และจะอยู่ห่างกัน 20px จะได้ว่า (60*12) + (20*11) = 940 หรือความกว้างของ container เรานั่นเองครับ
การจะสร้าง layouts ด้วย Bootstrap ให้เราสร้าง html element ที่มี class “row” ขึ้นมาก่อนครับ ทีนี้เราจะสามารถสร้างแต่ละคอลัมน์ขึ้นมาได้ด้วยการใส่ html element ที่มี class “span*” เข้าไปข้างใน โดย * ที่อยู่ข้างหลัง span นั้นจะเป็นตัวเลขที่จะระบุว่าเราต้องการให้คอลัมน์นี้ “กาง” แค่ไหน สมมติว่าเราจะสร้าง layouts แบบ 12 คอลัมน์ ให้เราใส่โค้ดด้านล่างนี้เข้าไปที่ container ของเราครับ
12 คอลัมน์

<div class="row"> <div class="span1"> Column 1</div> <div class="span1"> Column 2</div> <div class="span1"> Column 3</div> <div class="span1"> Column 4</div> <div class="span1"> Column 5</div> <div class="span1"> Column 6</div> <div class="span1"> Column 7</div> <div class="span1"> Column 8</div> <div class="span1"> Column 9</div> <div class="span1"> Column 10</div> <div class="span1"> Column 11</div> <div class="span1"> Column 12</div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="row">     <div class="span1">Column 1</div>     <div class="span1">Column 2</div>     <div class="span1">Column 3</div>     <div class="span1">Column 4</div>     <div class="span1">Column 5</div>     <div class="span1">Column 6</div>     <div class="span1">Column 7</div>     <div class="span1">Column 8</div>     <div class="span1">Column 9</div>     <div class="span1">Column 10</div>     <div class="span1">Column 11</div>     <div class="span1">Column 12</div>  </div>

จาก โค้ดด้านบน เราใส่ html elements ที่มี class ชื่อ “span1″ รวมทั้งหมด 12 elements ด้วยกัน เมื่อพรีวิวดู เราจะพบว่า container ของเราถูกแบ่งออกเป็นคอลัมน์ต่างๆ ที่มีความกว้างเท่ากันทั้งหมดจำนวน 12 คอลัมน์ ด้วยกัน
2 คอลัมน์
หากเราต้องการแค่ 2 คอลัมน์ โดยเราอยากให้คอลัมน์ทางซ้ายใหญ่กว่าทางขวา เราก็เขียนแบบนี้ได้ครับ

<div class="row"> <div class="span8"> Main</div> <div class="span4"> Sidebar</div> </div>

1 2 3 4

<div class="row">     <div class="span8">Main</div>     <div class="span4">Sidebar</div>  </div>

จะ เห็นว่าความกว้างของทั้ง 2 คอลัมน์ นี้จะเป็น 8 + 4 = 12 พอดี สาเหตุที่เราต้องกำหนดความกว้างให้รวมกันเท่ากับ 12 ก็เพราะว่า grid system ของ bootstrap นั้นเป็นแบบ 12 คอลัมน์ ครับ นั่นหมายความว่าทั้ง 2 คอลัมน์นี้จะกางเต็ม container พอดี
3 คอลัมน์
ในทำนองเดียวกัน หากเราต้องการ 3 คอลัมน์ ก็ให้เรากำหนดความกว้างรวมให้ได้เท่ากับ 12 เหมือนเดิม

<div class="row"> <div class="span3"> Secondary</div> <div class="span6"> Primary</div> <div class="span3"> Sidebar</div> </div>

1 2 3 4 5

<div class="row">     <div class="span3">Secondary</div>     <div class="span6">Primary</div>     <div class="span3">Sidebar</div>  </div>

Offsetting columns
ใน บางครั้ง เราอาจต้องการเพิ่มระยะห่างระหว่างคอลัมน์ เราสามารถทำได้ด้วยการเพิ่ม class ที่ชื่อ “offset*” เข้าไป โดย * นั้นหมายถึงจำนวนของคอลัมน์ที่จะกลายมาเป็นระยะห่าง ลองดูตัวอย่างนี้ครับ

<div class="row"> <div class="span2"> Logo</div> <div class="span4 offset6"> Search</div> </div>

1 2 3 4

<div class="row">     <div class="span2">Logo</div>     <div class="span4 offset6">Search</div>  </div>

เมื่อพรีวิวดู เราจะพบว่าทั้ง 2 คอลัมน์นี้ยังคงกางเต็ม container อยู่ เนื่องจาก 2 + 4 + 6 = 12 ครับ
Nesting columns
นอกจากนั้น เรายังสามารถสร้างคอลัมน์ซ้อนภายในคอลัมน์ได้อีกด้วยนะครับ ลองดูตัวอย่างนี้

<div class="row"> <div class="span8"> Main <div class="row"> <div class="span2"> Menu</div> <div class="span6"> Content</div> </div> </div> <div class="span4"> Sidebar</div> </div>

1 2 3 4 5 6 7 8 9 10

<div class="row">     <div class="span8">         Main         <div class="row">             <div class="span2">Menu</div>             <div class="span6">Content</div>         </div>     </div>     <div class="span4">Sidebar</div>  </div>

จะ เห็นว่าเราได้สร้างคอลัมน์ “span2″ กับ “span6″ ซ้อนข้างในคอลัมน์ “span8″ ซึ่งคอลัมน์ที่อยู่ภายในทั้ง 2 คอลัมน์ จะกางเต็มคอลัมน์ข้างนอกพอดีเนื่องจาก 2 + 6 = 8
หากยังมองไม่เห็นภาพเกี่ยวกับการใช้งาน grid system ของ Bootstrap ลองดูภาพนี้ครับ

Fluid Grid System

Bootstrap ได้เตรียม fluid grid system มาให้เราด้วยครับ วิธีใช้ก็ง่ายๆ คือ ก่อนอื่นเราต้องเปลี่ยน container มาเป็นแบบ fluid ก่อน ด้วยการเปลี่ยน class จาก “container” มาเป็น “container-fluid” แบบนี้ครับ

<body> <div class="container-fluid"> ... </div> </body>

1 2 3 4 5

<body>     <div class="container-fluid">     ...     </div> </body>

จากนั้นเราก็ต้องเปลี่ยน grid ของเรามาเป็นแบบ fluid เหมือนกัน ให้เราเปลี่ยน class จาก “row” มาเป็น “row-fluid” ครับ

<div class="row-fluid"> <div class="span8"> Main</div> <div class="span4"> Sidebar</div> </div>

1 2 3 4

<div class="row-fluid">     <div class="span8">Main</div>     <div class="span4">Sidebar</div>  </div>

เพียง เท่านี้ grid system ของเราก็จะเปลี่ยนมาใช้หน่วย percents แทนหน่วย pixels ในการกำหนดความกว้างของแต่ละคอลัมน์แล้วล่ะครับ สำหรับการใช้งาน fluid grid system นั้นจะเหมือนกับ fixed grid system แทบทุกประการครับ แต่มันจะต่างกันตรง nesting columns เท่านั้นเอง ลองมาดูตัวอย่างนี้ครับ

<div class="row-fluid"> <div class="span8"> <div class="row-fluid"> <div class="span3"> Menu</div> <div class="span9"> Content</div> </div> </div> <div class="span4"> Sidebar</div> </div>

1 2 3 4 5 6 7 8 9

<div class="row-fluid">     <div class="span8">         <div class="row-fluid">             <div class="span3">Menu</div>             <div class="span9">Content</div>         </div>     </div>     <div class="span4">Sidebar</div>  </div>

จะ สังเกตว่าความกว้างของคอลัมน์ “Menu” กับ “Content” จะมีผลรวมเท่ากับ 3 + 9 = 12 ซึ่งก็คือ 100% นั่นเอง ไม่เหมือนกับ fixed grid system ที่ผลรวมจะต้องเท่ากับ 8