เนื้อหาต่อไปนี้ จะเป็นแนวทางอย่างง่าย สำหรับใช้ในการประยุกต์ใช้งาน ระบบ grid ใน
bootstrap แบ่งรายการเป็นคอลัมน์ ให้ได้สัดส่วนที่เหมาะสม โดยจะเน้นการใช้งาน css class
ของ bootstrap เป็นหลัก
เราจะเริ่มต้นด้วย การใช้งาน grid โดย จะใช้ "container-fluid" ที่จะขยายเต็ม 100% ตามตัวอย่าง
อย่างง่ายดังนี้
<div class="page bg-dark"> <!--page bg-dark--> <div class="container-fluid"> <!--container-fluid--> <div class="row"> <!--row--> <?php for($i=1;$i<=6;$i++){?> <div class="col-6 col-sm-4 col-md-3 bg-light"> <a href="javascript:void(0);"> <div class="bg-warning mb-2" style="height:100px;"> </div> </a> </div> <?php } ?> </div> <!--row--> </div> <!--container-fluid--> </div> <!--page bg-dark-->
ในตัวอย่างข้างต้น เราใช้ php วนลูปแสดงข้อมูลตัวอย่าง จำนวนทั้งหมด 6 รายการ และใช้รูปแบบ css class
พื้นหลังของ bootsrap กำหนดสีให้สังเกตเห็นชัด สำหรับการวนลูป เราจะวนลูปในส่วนของ col class ตามที่เรา
ได้รู้จักการวนลูปรายการเบื้องต้นไปแล้ว ทบทวนได้ที่บทความ
รู้จักและใช้งาน Layout และ Grid System ใน Bootstrap 4 อย่างง่าย http://niik.in/872
https://www.ninenik.com/content.php?arti_id=872 via @ninenik
คอลัมน์รายการ เราได้กำหนดการแสดงแบบ responsive ตามค่า breakpoint คือ
- col-6 สำหรับแสดงรายการ 2 คอลันม์ ในหน้าจอที่กว้างน้อยกว่า 576px (sm)
- col-sm-4 สำหรับแสดงรายการ 3 คอลัมน์ ในหน้าจอที่กว้างตั้งแต่ 576px (sm) แต่น้อยกว้า 768px (md)
- col-md-3 สำหรับแสดงรายการ 4 คอลัมน์ ในหน้าจอที่กว้างตั้งแต่ 768px (md) เป็นต้นไป
มาดูผลลัพธ์ของแต่หน้าจอ
หน้าจอที่กว้างน้อยกว่า 576px (sm)
![](https://c2.staticflickr.com/2/1753/42798644111_fd6c2e310e_o.png)
หน้าจอที่กว้างตั้งแต่ 576px (sm) แต่น้อยกว้า 768px (md)
![](https://c2.staticflickr.com/2/1741/42798643981_e37a9a8394_o.png)
หน้าจอที่กว้างตั้งแต่ 768px (md) เป็นต้นไป
![](https://c2.staticflickr.com/2/1727/42798643781_37787cdc30_o.png)
จากรูปแบบทั้ง 3 จะเห็นว่าเราสามารถแบ่งรายการเป็นคอลัมน์ได้ตามต้องการ แต่ยังมีส่วนที่ต้องแก้ไข คือ
แต่ละรายการ จะมีช่องว่างเกิดขึ้น ไม่ได้สัดส่วนที่เหมาะสม ทั้งนี้ก็เพราะในส่วนของ "container-fluid" "row"
"col" class จะยัง มีส่วนของ padding หรือ margin เหลืออยู่ ส่วนรูปสุดท้ายเนื่องจากเรากำหนดพื้นหลังเป็น dark
ทำให้เราเห็นสีพื้นหลังตรงช่องว่างที่ไม่มีรายการ
ก่อนอื่น ก่อนที่เราจะปรับให้แต่ละคอลัมน์มีสัดส่วนช่องว่างระหว่างกัน และระหว่างขอบได้สัดส่วนที่เหมาะสม เรา
ต้องทำการลบส่วนของ margin หรือ padding ออกก่อน โดยใช้ m-0 p-0 และ no-gutters สำหรับกำหนด paddming
ให้กับรายการดังนี้ (ในที่นี้เราจะแสดงตัวอย่างรูปในหน้าจอ xs)
<div class="page bg-dark"> <!--page bg-dark--> <div class="container-fluid m-0 p-0"> <!--container-fluid--> <div class="row no-gutters "> <!--row--> <?php for($i=1;$i<=6;$i++){?> <div class="col-6 col-sm-4 col-md-3 bg-light"> <a href="javascript:void(0);"> <div class="bg-warning mb-2" style="height:100px;"> Data <?=$i?> </div> </a> </div> <?php } ?> </div> <!--row--> </div> <!--container-fluid--> </div> <!--page bg-dark-->
จะได้ผลลัพธ์เป็นดังนี้
![](https://c2.staticflickr.com/2/1756/42798643661_c8cbf16946_o.png)
จะเห็นว่าตอนนี้ เราตัดส่วน padding และ margin ของ container-fluid ออก โดยใช้ "m-0" และ "p-0"
และตัด margin ของ row กับตัด padding ของ col ออกโดยใช้ "no-gutters" จะได้แต่ละคอลัมน์แสดงเต็มพื้นที่
ส่วน margin-bottom ของแต่ละคอลัมน์ ที่เรากำหนดด้วย "mb-2" ที่เรากำหนดลงไปเพื่อให้แยกแถวชัดเจนขึ้น
สำหรับใครที่ยังไม่เข้าใจ ค่า margin และ padding สามารถดูจากรูปด้านล่าง
![](https://c1.staticflickr.com/1/888/41898093945_2a79dc9169_o.png)
เมื่อเราจัดการให้ค่า margin และ padding เป็น 0 แล้ว ต่อไป เราก็สามารถที่จะเพิ่ม หรือจัดการ margin และ
padding แต่ละคอลัมน์ตามที่้ต้องการได้ ในที่นี้เราจะใช้ "px-1"และ "px-2" หรือก็คือ padding ซ้ายและขวา ค่าระดับ 1
และ padding ซ้ายและขวา ค่าระดับ 2 มาใช้งาน โดยสมมติว่า เราต้องการให้แต่ละคอลัมน์ห่างกันเท่ากับค่าระดับ 2
* ค่าระดับ 1 เท่ากับ .25rem
* ค่าระดับ 2 เท่ากับ .5rem
* ค่าระดับ 3 เท่ากับ 1rem
* ค่าระดับ 4 เท่ากับ 1.5rem
* ค่าระดับ 5 เท่ากับ 3rem
เราสามารถกำหนด ค่าในแต่ละคอลัมส์ด้วย px-1 เข้าไปใน col ยกตัวอย่าง 2 คอลัมน์แรก ขอเรียกเป็น box1 และ box2
เมื่อเรากำหนด px-1 ให้กับ box1 และ box2 จะทำให้ระหว่าง box1 และ box2 จะห่างกัน 2 ระดับ ซึ่งเกิดจาก
ห่างจากด้านขวาของ box1 เท่ากับ 1 ระดับ และห่างจากด้านซ้ายของ box2 อีก 1 ระดับ ดังรูป
<div class="container-fluid m-0 p-0"> <!--container-fluid--> <div class="row no-gutters "> <!--row--> <?php for($i=1;$i<=6;$i++){?> <div class="col-6 col-sm-4 col-md-3 bg-light px-1"> <a href="javascript:void(0);"> <div class="bg-warning mb-2" style="height:100px;"> Data <?=$i?> </div> </a> </div> <?php } ?> </div> <!--row--> </div> <!--container-fluid-->
![](https://c2.staticflickr.com/2/1733/42798643351_eceb51537b_o.png)
จะเห็นว่าระห่าง box1 และ box2 ห่างกัน 2 ระดับแล้ว ต่อไปก็คือ ระหว่างขอบด้านซ้าย กับ box1 และระหว่างขอบด้านขวา
กับ box2 จะยังเป็น 1 อยู่ เราต้องทำการเพิ่มความห่างจากขอบให้เท่ากับ 2 โดยเพิ่มอีก 1 ระดับให้กับ row ดังนี้
<div class="page bg-dark"> <!--page bg-dark--> <div class="container-fluid m-0 p-0"> <!--container-fluid--> <div class="row no-gutters px-1"> <!--row--> <?php for($i=1;$i<=6;$i++){?> <div class="col-6 col-sm-4 col-md-3 bg-light px-1"> <a href="javascript:void(0);"> <div class="bg-warning mb-2" style="height:100px;"> Data <?=$i?> </div> </a> </div> <?php } ?> </div> <!--row--> </div> <!--container-fluid--> </div> <!--page bg-dark-->
![](https://c2.staticflickr.com/2/1739/42081560634_c897a8c54f_o.png)
จะเห็นว่าตอนนี้แต่ละคอลัมน์ห่างกัน 2 ระดับ รวมทั้งห่างจากขอบเท่ากับ 2 ระดับด้วย เราจะตัดสีส่วนของ bg-dark ออก
แล้วดูผลลัพธ์ในหน้าขนาดต่างๆ จะได้เป็นดังนี้
![](https://c1.staticflickr.com/1/887/42081560504_70458822b2_o.png)
![](https://c2.staticflickr.com/2/1726/42081560374_4618c08117_o.png)
![](https://c2.staticflickr.com/2/1732/42081560274_043c29ed26_o.png)
ต่อไปเราลองใส่ส่วนของเนื้อหาสมมติเข้าไป จะได้รูปแบบเต็มของโค้ดตัวอย่างดังนี้
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" > <style type="text/css"> body{ font-family: system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif; font-size: 14px; } .pic_preview{height:175px;} .price{font-size: 18px;font-weight: 500;color: #f57224;} .discount_price{font-size: 10px;color: #9e9e9e;} </style> </head> <body> <div class="page"> <!--page bg-dark--> <div class="container-fluid m-0 p-0"> <!--container-fluid--> <div class="row no-gutters px-1"> <!--row--> <?php for($i=1;$i<=6;$i++){?> <div class="col-6 col-sm-4 col-md-3 bg-light px-1"> <a href="javascript:void(0);"> <div class="bg-warning pic_preview"> Data <?=$i?> </div> <div class="bg-white mb-2 shadow-sm"> <div>หัวเรื่องรายการทดสอบ This is test title</div> <div class="price">฿1,500</div> <div class="discount_price">฿2,500 <span>-50%</span></div> </div> </a> </div> <?php } ?> </div> <!--row--> </div> <!--container-fluid--> </div> <!--page bg-dark--> <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script> <script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ }); </script> </body> </html>
ผลลัพธ์ที่ได้ จะเป็นดังนี้
![](https://c2.staticflickr.com/2/1749/42081560134_305633c71d_o.png)
สมมติพื้นที่สีเหลือง เดิมเราแบบกำหนดความสูงตายตัวไปที่ 175px เราสามารถให้ส่วนของสีเหลืองแสดงเป็นสี่เหลี่ยม
จัตุรัส เสมอไม่ว่าจะหน้าจอขนาดใดๆ ก็ตาม ซึ่งเหมาะกับการแสดงรูปภาพแบบพื้นหลัง
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" > <style type="text/css"> body{ font-family: system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif; font-size: 14px; } .pic_preview{height:auto;padding-bottom:100%;background-size:cover;background-position:center;} .price{font-size: 18px;font-weight: 500;color: #f57224;} .discount_price{font-size: 10px;color: #9e9e9e;} </style> </head> <body> <div class="page"> <!--page bg-dark--> <div class="container-fluid m-0 p-0"> <!--container-fluid--> <div class="row no-gutters px-1"> <!--row--> <?php for($i=1;$i<=6;$i++){?> <div class="col-6 col-sm-4 col-md-3 bg-light px-1"> <a href="javascript:void(0);"> <div class="bg-warning pic_preview" style="background-image:url('https://www.ninenik.com/images/9.jpg')"> </div> <div class="bg-white mb-2 shadow-sm"> <div>หัวเรื่องรายการทดสอบ This is test title</div> <div class="price">฿1,500</div> <div class="discount_price">฿2,500 <span>-50%</span></div> </div> </a> </div> <?php } ?> </div> <!--row--> </div> <!--container-fluid--> </div> <!--page bg-dark--> <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script> <script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ }); </script> </body> </html>
ผลลัพธ์ที่ได้ จะเป็นดังนี้
![](https://c1.staticflickr.com/1/879/41898092785_8e29b9663a_o.png)
![](https://c1.staticflickr.com/1/887/42798643011_936ca65d91_o.png)
ซึ่งในกรณีเราต้องการกำหนดสัดส่วนความสูงของ <div> ที่จะใช้เป็นส่วนของรูปภาพ ใน <div> นั้นจะต้องไม่มีข้อความ
หรือเนื้อหาใดๆ ภายใน การกำหนดความสูงให้เป็นไปตามสัดส่วนที่ต้องการ เราจะกำหนดด้วย style
"height:auto;padding-bottom:100%;" ถ้าต้องการแสดงเป็น สี่เหลียมจัตุรัส ตามตัวอย่างโค้ดในส่วนของ
pic_preview class
หรือถ้าเราต้องการให้เป็นสี่เหลี่ยมผืนผ้าในส่วน 100/80 หรือ 5:4 ก็สามารถกำหนดเป็นเป็น
.pic_preview{height:auto;padding-bottom:80%;background-size:cover;background-position:center;}
![](https://c2.staticflickr.com/2/1745/42081559974_68294d2a03_o.png)
.pic_preview{height:auto;padding-bottom:120%;background-size:cover;background-position:center;}
![](https://c2.staticflickr.com/2/1721/41898092315_328826333f_o.png)
ค่าเหล่านี้ สามารถไปลองปรับเล่นได้ตามต้องการ
หวังว่าเนื้อหานี้จะเป็นแนวทางนำไปประยุกต์เพิ่มเติมต่อไป