1. การสร้าง Panel แบบง่ายๆ
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>Basic Panel</h2>
<div class="panel panel-default">
<div class="panel-body">Panel</div>
</div>
</div>
- Heading ส่วนของการกำหนดชื่อหัวข้อ
- Content ส่วนของการแสดงผลด้านใน หรือส่วนของเนื้อหาของพาเนล
- Footer ส่วนท้ายของพาเนล
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>Panel</h2>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
โค้ด: เลือกทั้งหมด
<div class="panel (ตามด้วยพาเนลที่เราต้องการใส่)">
โค้ด: เลือกทั้งหมด
<div class="panel panel-default">
panel-default
โค้ด: เลือกทั้งหมด
<div class="panel panel-default">
<div class="panel-heading"> Class panel-default</div>
<div class="panel-body">Panel Content</div>
</div>
โค้ด: เลือกทั้งหมด
<div class="panel panel-primary">
<div class="panel-heading"> Class panel-primary</div>
<div class="panel-body">Panel Content</div>
</div>
โค้ด: เลือกทั้งหมด
<div class="panel panel-success">
<div class="panel-heading"> Class panel-success</div>
<div class="panel-body">Panel Content</div>
</div>
โค้ด: เลือกทั้งหมด
<div class="panel panel-info">
<div class="panel-heading"> Class panel-info</div>
<div class="panel-body">Panel Content</div>
</div>
โค้ด: เลือกทั้งหมด
<div class="panel panel-warning">
<div class="panel-heading"> Class panel-warning</div>
<div class="panel-body">Panel Content</div>
</div>
โค้ด: เลือกทั้งหมด
<div class="panel panel-danger">
<div class="panel-heading"> Class panel-danger</div>
<div class="panel-body">Panel Content</div>
</div>