Bootstrap 3 Panels - Tutorial Bootstrap Indonesia
Tutorial Bootstrap 3 Panels
TrikSonic - Apa itu Panels pada Bootstrap ? Panels bootstrap dipakai untuk menciptakan sebuah box atau kotak, yang memungkinkan kita sanggup menuliskan sebuah konten didalamnya
Secara tampilan Panels Bootstrap mempunyai ketebalan batas dan jarak antara panel dan element lainnya
Panel Default
Secara default Panel Bootstrap mempunyai class
.panel dan diiringi class .panel-default sebagai type panel.Untuk menuliskan sebuah konten didalam panel dibutuhkan struktur gres yang ditulis didalam panel, tambahkan element HTML misal element
<div> dengan nama class .panel-bodyContoh :
<div class="panel panel-default"> <div class="panel-body">Konten kau 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 kau disini</div> </div> </section> </body> </html>
Panel dengan heading
Untuk menciptakan sebuah heading pada panel tambahkan element HTML gres misal element
<div> dengan nama class .panel-headingAlternative lain yang sanggup dipakai yaitu dengan menulisakan eksklusif tag html
<h1> - <h6> dengan class .panel-title (jika diperlukan) yang dituliskan didalam element yang mempunyai class .panel-headingContoh :
<!--contoh 1--> <div class="panel panel-default"> <div class="panel-heading">Panel heading</div> <div class="panel-body">Konten kau 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 kau 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 kau 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 kau 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 kau 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 kau disini</div> </div> </section> </body> </html>
Panel dengan footer
Untuk menciptakan sebuah footer didalam panel gunakan class
.panel-footer yang dituliskan pada element HTML misal pada element <div> yang diletakkan sehabis bab panel body.Contoh :
<div class="panel panel-default"> <div class="panel-heading">Panel heading</div> <div class="panel-body"> Konten kau 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 kau disini </div> <div class="panel-footer">Panel footer</div> </div> </section> </body> </html>
Panel Contextual Classes
Digunakan untuk memperlihatkan tampilan yang berbeda-beda pada setiap panel yang diubahsuaikan dengan keperluan, yang dituliskan didalam class dasar
.panelAdapun class yang sanggup dipakai yaitu 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 kau 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 kau 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 kau 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 kau 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 kau 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 kau 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 kau 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 kau 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 kau 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 kau 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 kau 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 kau disini</div> <div class="panel-footer">Panel footer</div> </div> </section> </body> </html>
Panel dengan table
Berikut pola yang sanggup dipakai untuk menuliskan sebuah table didalam panel.
Contoh :
<div class="panel panel-default"> <div class="panel-heading">Panel heading</div> <div class="panel-body">Konten kau 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 kau 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 pola yang sanggup dipakai 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 kau 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 kau 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>