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 :
- .panel-default
- .panel-primary
- .panel-success
- .panel-info
- .panel-warning
- .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>
Posting Komentar