ในการแสดงผลของ web นั้นในอดีตแสดงให้แก่หน้าจอน้อยประเภท ส่วนใหญ่คือหน้าจอ pc หรือไม่ก็ notebook ไม่ได้หลากหลายเท่าปัจจุบัน ในปัจจุบันมีขนาดหน้าจอเพิ่มขึ้น ไม่ว่าจะเป็น tablet หรือ smart phone ทำให้ web ที่ได้ทำการพัฒนาขึ้นต้องรองรับในความหลากหลายนี้ให้ได้ Bootstrap ก็เช่นกัน เนื่องจาก Bootstrap เป็นเครื่องมือในการสร้าง web แบบ responsive ด้วย ทำให้ขาดคุณสมบัติเกี่ยวกับการแสดงผลในหน้าจอที่มีขนาดที่หลากหลายไปไม่ได้ และต้องรองรับความแตกต่างของหน้าจอให้ได้

Bootstrap ได้ใช้หลักการซอยย่อยหน้าจอเป็นส่วนๆ โดยแต่ละส่วนนั้นเป็นแนวตั้ง หรือที่เรียกว่า คอลัมภ์ โดยมี 12 กล่อง ขนาดเท่าๆกัน ดังรูป

grids

ซึ่งในแต่ละ row จะมีกี่ column ก็ได้ แต่ทั้งแถวต้องมีขนาด column รวมกันเท่ากับ 12 เท่านั้น และ row ต่างกัน ไม่จำเป็นต้องมีจำนวน  column เท่ากัน Bootstrap ให้อิสระในการวาง layout อย่างเต็มที่ แต่ทุก column ต้องอยู่ภายใต row และแต่ละ row จะมีความสูงต่างกันได้ ขึ้นอยู่กับข้อมูลที่ใส่ใน column นั้นๆ

นั้นเรามาเริ่มต้นใช้งาน grid กันเลย grid นั้น ส่วนใหญ่จะนำมาสร้าง layout ของ web แทน frame แทน table ในอดีตครับ ซึ่ง grid นั้นจะใช้ <div> ในการวาง layout และมีการไปเรียก class ที่ Bootstrap ได้กำหนดไว้แล้ว โดยลำดับแรกต้องสร้างกล่องสำหรับบรรจุของได้ ถ้าพูดง่ายๆ ก็คือการประกาศบริเวณ เหมือนกับการสร้าง <table></table> นั่นแหละครับ ซึ่งในที่นี้ใช้  class container หรือ container-fluid โดย container นั้นเป็นแบบ fixed ความกว้าง คือจะกำหนดความกว้างมาตามขนาดของหน้าจอเลย ส่วน container-fluid จะใช้การกำหนดความกว้างแบบ full-width ซึ่งก็คือใช้แบบ % ครับ ดังตัวอย่าง code ด้านล่างครับ
<div class="container">....</div>
ขั้นตอนต่อไปก็คือกำหนด row ให้กล่องใหญ่ ซึ่งคล้ายกับการใช้ <tr> ของ html แต่ใน Bootstrap จะใช้ class row แทน ดัง code ต่อไปนี้
<div class="container">
<div class="row">....</div>
</div>

ต่อไปเราก็ต้องสร้างกล่อง column ภายใต้ row เปรียบกับ <table> ก็คือ <td> นั่นแหละครับ ซึ่งตรงนี้เป็นที่เดียวที่ควรใส่ content ต่างๆ ลงไป (จริงๆ ก็อิงจาก table มาเลย) class css ที่ Bootstrap ใช้สำหรับกำหนดขนาด column นั้น จะอิงตามจำนวน grid พูดง่ายๆ ก็คือ มี 12 ขนาด จำนวนรวมของขนาดของทุก column ต้องเท่ากับ 12 ถ้าเกิน column ที่ทำให้ขนาดเกินจะตกไปอีกบรรทัดหนึ่ง และอาจทำให้การแสดงผล layout ไม่ตรงกับที่ต้องการได้

class ที่ใช้จะขึ้นต้นด้วย col- เสมอ และตามด้วยประเภทของขนาดหน้าจอ ซึ่งมี 4 ประเภท แล้วตามด้วยเลขที่บ่งบอกขนาดของ column นั้นๆ ซึ่งจะมีตั้งแต่ 1-12 โดยประเภทของหน้าจอทั้ง 4 ประเภทมีดังต่อไปนี้

class ประเภทหน้าจอ ขนาดหน้าจอ
.col-xs- Smart Phone <768px
.col-sm- Tablet 768px
.col-md- Desktop ขนาดกลาง ≥992px
.col-lg- Desktop ขนาดใหญ่ ≥1200px

ถ้าเราต้องการกำหนดว่า row นั้นมี column เดียว จะต้องใช้กล่องขนาด 12 เลย ดัง code ต่อไปนี้
<div class="col-md-12">...</div>

ถ้าเราต้องการกำหนดว่า row นั้นมี 2 column ขนาดเท่าๆ กัน จะต้องใช้กล่องขนาด 6 จำนวน 2 กล่อง ดัง code ต่อไปนี้
<div class="col-md-6">...</div>
<div class="col-md-6">...</div>

ถ้าเราต้องการกำหนดว่า row นั้นมี 2 column ขนาดไม่เท่ากัน จะต้องใช้กล่อง 2 กล่อง แต่ขนาดเป็น 8 4 หรือ 3 9 หรือเท่าใดก็ได้ แต่ต้องรวมให้ได้ 12 เช่น code ต่อไปนี้
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
เมื่อเรากำหนดกล่องตามด้านบนครบทั้ง 3 ขั้นตอนแล้ว เราก็จะได้ layout ของหน้า web ที่ต้องการ ดังเช่นรูปต่อไปนี้
null
จากรูปด้านบน แปลงมาเป็น code ต่อไปนี้

<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>

ลองไปออกแบบ layout ตามแนวทางนี้นะครับ แล้วครั้งหน้าจะมาเล่าในส่วนอื่นต่อครับ ^^

Comments are closed.