Bootstrap 3 Panels - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Panels

TrikSonic - Apa itu Panels pada Bootstrap ? Panels bootstrap digunakan untuk membuat sebuah box atau kotak, yang memungkinkan kita dapat menuliskan sebuah konten didalamnya

Secara tampilan Panels Bootstrap memiliki ketebalan batas dan jarak antara panel dan element lainnya

Panel Default

Secara default Panel Bootstrap memiliki class .panel dan diiringi class .panel-default sebagai type panel.

Untuk menuliskan sebuah konten didalam panel diperlukan struktur baru yang ditulis didalam panel, tambahkan element HTML misal element <div> dengan nama class .panel-body

Contoh :

<div class="panel panel-default">
  <div class="panel-body">Konten kamu disini</div>
</div>

Panel dengan heading

Untuk membuat sebuah heading pada panel tambahkan element HTML baru misal element <div> dengan nama class .panel-heading

Alternative lain yang bisa digunakan adalah dengan menulisakan langsung tag html <h1> - <h6> dengan class .panel-title (jika diperlukan) yang dituliskan didalam element yang memiliki class .panel-heading

Contoh :

<!--contoh 1-->
<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">Konten kamu disini</div>
</div>

<!--contoh 2-->
<div class="panel panel-default">
  <div class="panel-heading">
    <h2 class="panel-title">
      Panel heading 3 dengan class <code>.panel-title</code>
    </h2>
  </div>
  <div class="panel-body">Konten kamu disini</div>
</div>

<!--contoh 3-->
<div class="panel panel-default">
  <div class="panel-heading">
    <h3>Panel heading 3 tanpa attribute class</h3>
  </div>
  <div class="panel-body">Konten kamu disini</div>
</div>

Panel dengan footer

Untuk membuat sebuah footer didalam panel gunakan class .panel-footer yang dituliskan pada element HTML misal pada element <div> yang diletakkan setelah bagian panel body.

Contoh :

<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    Konten kamu disini
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Panel Contextual Classes

Digunakan untuk memberikan tampilan yang berbeda-beda pada setiap panel yang disesuaikan dengan keperluan, yang dituliskan didalam class dasar .panel

Adapun class yang bisa digunakan adalah sebagai berikut :

1. .panel-default
2. .panel-primary
3. .panel-success
4. .panel-info
5. .panel-warning
6. .panel-danger

Contoh Lengkap :

<!-- Panel Default-->
<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">Konten kamu disini</div>
  <div class="panel-footer">Panel footer</div>
</div>

<!-- Panel Primary-->
<div class="panel panel-primary">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">Konten kamu disini</div>
  <div class="panel-footer">Panel footer</div>
</div>

<!-- Panel Success-->
<div class="panel panel-success">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">Konten kamu disini</div>
  <div class="panel-footer">Panel footer</div>
</div>

<!-- Panel Info-->
<div class="panel panel-info">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">Konten kamu disini</div>
  <div class="panel-footer">Panel footer</div>
</div>

<!-- Panel Warning-->
<div class="panel panel-warning">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">Konten kamu disini</div>
  <div class="panel-footer">Panel footer</div>
</div>

<!-- Panel Danger-->
<div class="panel panel-danger">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">Konten kamu disini</div>
  <div class="panel-footer">Panel footer</div>
</div>

Panel dengan table

Berikut contoh yang bisa digunakan untuk menuliskan sebuah table didalam panel.

Contoh :

<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">Konten kamu disini</div>
  <div class="table-responsive">
    <table class="table">
      <thead>
      <tr>
        <th>#</th>
        <th>Nama</th>
        <th>Umur</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1</td>
        <td>Nafis</td>
        <td>12 Tahun</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Hafizah</td>
        <td>13 Tahun</td>
      </tr>      
      </tbody>
    </table>
  </div>
</div>

Panel Dengan list group

Berikut contoh yang bisa digunakan untuk menuliskan sebuah daftar grup didalam panel.

Contoh :

<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">Konten kamu disini</div>
  <ul class="list-group">
    <li class="list-group-item">List 1</li>
    <li class="list-group-item">List 2</li>
    <li class="list-group-item">List 3</li>
  </ul>
</div>