Tutorial Bootstrap: Membuat Panel Dengan Bootstrap 3

0 Comments


Penggunaan panel dalam web desain banyak diperlukan terutama untuk masalah tata letak konten dialog box. Di Bootstrap 3 terdapat class .panel yang bisa digunakan untuk membuat panel ataupun dialog box dengan tampilan yang rapi dan baik.

Nah, untuk penggunaan class .panel Bootstrap 3 anda cukup menambahkan class tersebut pada container (<div) yang akan digunakan. Berikut ini contoh penggunaannya.

Pembuatan Panel di Bootstrap 3

<div class="panel panel-default">
 <div class="panel-heading"><h3 class="panel-title">Belajarlah Dengan Baik</h3></div>
 <div class="panel-body">Untuk bisa lancar menggunakan framework Bootstrap, sering-seringlah berlatih dan belajar.</div>
 <div class="panel-footer clearfix">
  <div class="pull-right">
   <a href="#" class="btn btn-primary">Pelajari</a>
   <a href="#" class="btn btn-default">Kembali</a>
  </div>
 </div>
</div>
Kode panel bootstrap tersebut akan menampilkan :
Tutorial Panel di Bootstrap 3
Panel Default dengan Bootstrap

Baca juga : Membuat kotak alert dengan Bootstrap 3

Selain class .panel-default, Bootstrap 3 juga menyediakan beberapa tipe panel lain untuk berbagai kebutuhan. Class panel yang tersedia di Bootstrap 3 diantaranya .panel-success, .panel-primary, .panel-danger, dan .panel-warning. Berikut ini contoh penggunaan class-class panel bootstrap tersebut.

<div class="panel panel-primary">
 <div class="panel-heading"><h3 class="panel-title">Contoh Panel Primary</h3></div>
 <div class="panel-body">Ini adalah contoh panel Primary</div>
</div>

<div class="panel panel-success">
 <div class="panel-heading"><h3 class="panel-title">Contoh Panel Success</h3></div>
 <div class="panel-body">Ini adalah contoh panel Success</div>
</div>

<div class="panel panel-info">
 <div class="panel-heading"><h3 class="panel-title">Contoh Panel Info</h3></div>
 <div class="panel-body">Ini adalah contoh panel Info</div>
</div>

<div class="panel panel-danger">
 <div class="panel-heading"><h3 class="panel-title">Contoh Panel Danger</h3></div>
 <div class="panel-body">Ini adalah contoh panel Danger</div>
</div>

<div class="panel panel-warning">
 <div class="panel-heading"><h3 class="panel-title">Contoh Panel warning</h3></div>
 <div class="panel-body">Ini adalah contoh panel Warning</div>
</div>

Hasilnya:
Tutorial panel di Bootstrap 3
Macam-macam Class Panel Bootstrap

Selamat mencoba.

Baca Tulisan Lainnya Juga :)

0 komentar: