- ตัวอย่างที่ 1 การสร้าง row และ col แบบไม่มีการกำหนดใส่เส้นแบ่งแต่ละช่อง
ผลลัพธ์ที่ได้
โค้ด: เลือกทั้งหมด
<HTML> <HEAD> <TITLE> mdsoft_html_trial_balance_print </TITLE> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </HEAD> <body> <center> <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 70%"> <div class="col" >ช่องที่ 1</div> <div class="col" >ช่องที่ 2</div> <div class="col" >ช่องที่ 3</div> </div> </center> </body> </HTML>
- ตัวอย่างที่ 2 การสร้าง row และ col แบบมีการกำหนดใส่เส้นแบ่งแต่ละช่อง
ผลลัพธ์ที่ได้
โค้ด: เลือกทั้งหมด
<HTML> <HEAD> <TITLE> mdsoft_html_trial_balance_print </TITLE> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </HEAD> <body> <center> <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 70%"> <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 1</div> <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 2</div> <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 3</div> </div> </body> </HTML>
- ตัวอย่างที่ 3 การสร้าง row และ col แบบมี row หลายๆอัน
ผลลัพธ์ที่ได้
โค้ด: เลือกทั้งหมด
<HTML> <HEAD> <TITLE> mdsoft_html_trial_balance_print </TITLE> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </HEAD> <body> <center> <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 70%"> <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 1</div> <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 2</div> <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 3</div> </div> <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 70%"> <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 4</div> <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 5</div> <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 6</div> </div> </center> </body> </HTML>
อ้างอิง https://getbootstrap.com/docs/4.0/layout/grid/