แผงบูตสแตรป
แผง
แผงในบูตสแตรปเป็นกล่องที่มีขอบซึ่งมีช่องว่างภายในบางส่วน:
แผงพื้นฐาน
แผงต่างๆ ถูกสร้างขึ้นพร้อมกับ.panelคลาส และเนื้อหาภายในแผงจะมี
.panel-bodyคลาส:
ตัวอย่าง
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
คลาส.panel-defaultนี้ใช้เพื่อจัดสไตล์สีของแผง ดูตัวอย่างสุดท้ายในหน้านี้สำหรับคลาสเชิงบริบทเพิ่มเติม
ส่วนหัวของแผง
ส่วนหัวของแผง
เนื้อหาแผง
ชั้น.panel-headingเรียนเพิ่มหัวข้อไปที่แผง:
ตัวอย่าง
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
ส่วนท้ายของแผง
เนื้อหาแผง
ชั้น.panel-footerเรียนเพิ่มส่วนท้ายให้กับแผง:
ตัวอย่าง
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
กลุ่มแผง
หากต้องการจัดกลุ่มแผงหลายๆ แผงเข้าด้วยกัน ให้ห่อ a <div>โดยมีชั้นเรียน
.panel-groupอยู่รอบๆ
คลาส.panel-groupล้างระยะขอบด้านล่างของแต่ละแผง:
ตัวอย่าง
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
</div>
แผงที่มีคลาสตามบริบท
ในการระบายสีพาเนล ให้ใช้คลาสตามบริบท ( .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, หรือ.panel-danger):
ตัวอย่าง
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content