tRikSonic
Tema
/ / Bootstrap 3 Panels - Tutorial Bootstrap Indonesia

Bootstrap 3 Panels - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.47
/ / 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>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 - Panel Default</h2>


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


</section>
</body>
</html>

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>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 - Panel Heading</h2>

<!--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>

</section>
</body>
</html>

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>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 - Panel Footer</h2>

<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>

</section>
</body>
</html>

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>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 - Panel Contextual Classes</h2>

<!-- 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>

</section>
</body>
</html>

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>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 - Panel Table</h2>

<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>


</section>
</body>
</html>

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>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 - Panel List Groups</h2>

<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">Konten kamu disini</div>
  <!--list group-->
  <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>


</section>
</body>
</html>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

 
Loading.....
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.