Panel Bootstrap
panel
Panel di bootstrap adalah kotak berbatas dengan beberapa bantalan di sekitar kontennya:
Panel Dasar
Panel dibuat dengan .panelkelas, dan konten di dalam panel memiliki
.panel-bodykelas:
Contoh
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
Kelas .panel-defaultdigunakan untuk memberi gaya pada warna panel. Lihat contoh terakhir di halaman ini untuk kelas kontekstual lainnya.
Judul Panel
Judul Panel
Konten Panel
Kelas .panel-headingmenambahkan heading ke panel:
Contoh
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Catatan Kaki Panel
Konten Panel
Kelas .panel-footermenambahkan footer ke panel:
Contoh
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Grup Panel
Untuk mengelompokkan banyak panel, bungkus <div>dengan kelas
.panel-groupdi sekelilingnya.
Kelas .panel-groupmembersihkan margin bawah setiap panel:
Contoh
<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 dengan Kelas Kontekstual
Untuk mewarnai panel, gunakan kelas kontekstual ( .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, atau .panel-danger):
Contoh
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