Home / Bootstrap / Tutorial Bootstrap Bagian 10: Membuat Panel Dengan Bootstrap

Tutorial Bootstrap Bagian 10: Membuat Panel Dengan Bootstrap

Tutorial bootstrap kali ini kita akan membahas cara membuat panel dengan bootstrap. Panel digunakan untuk membagi-bagi sebuah halaman website agar terlihat lebih terstruktur dan rapi sehingga mempermudah pengguna mendapatkan informasi. Selain pada content, panel juga dapat digunakan pada sidebar, form inputan maupun pada tabel(baca: Membuat tabel dengan Bootstrap) . Bootstrap sudah menyediakan class-class untuk membuat panel, sehingga mempermudah kita untuk mendesign halaman website.

Dalam penerapannya, class panel ditempatkan dalam content website sehingga posisinya ditempatkan setelah class col. Silakan baca kembali tutorial sebelumnya mengenai Penggunaan Grid System Bootstrap untuk Mengatur Layout Halaman Website.

Selain untuk mempermudah pengguna, panel juga akan mempercantik halaman sebuah website. Website yang menggunakan panel akan terlihat rapi karena panel sudah di design memiliki border, header dan footer. Panel dalam bootstrap juga memiliki variasi warna yang dapat kita gunakan dengan hanya memanggil class-classnya. Class-class yang dapat digunakan pada panel sebagai berikut:

  • panel-default
    Class yang digunakan untuk membuat panel berwana default/putih
  • panel-primary
    Class yang digunakan untuk membuat panel berwarna biru
  • panel success
    Class yang digunakan untuk membuat panel berwarna hijau
  • panel-info
    Class yang digunakan untuk membuat panel berwarna biru muda
  • panel-warning
    Class yang digunakan untuk membuat panel berwarna kuning
  • panel-danger
    Class yang digunakan untuk emmbuat panel berwarna merah

Untuk membuat panel, terlebih dahulu harus diberikan class panel dan class jenis panelnya. Struktur panel dimulai dari class panel beserta jenis panelnya, kemudian class heading-panel, class body-panel dan class footer-panel.

Untuk lebih jelasnya mengenai struktur class panel, perhatikan kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Panel dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading"><h4>Heading Panel</h4></div>
                      <div class="panel-body"> 
                        <p>Content Panel</p>
                      </div>
                    <div class="panel-footer">Content Panel</div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
</html>
  • Pada contoh diatas, untuk membuat panel dimulai dari baris 11 sampai 17. Pada baris 11 kita membuat class panel dengan jenis panel-default dengan warna putih.
  • Di dalam class panel terdapat class panel-header untuk membuat judul pada panel. Class panel-body digunakan untuk membuat tempat content panel. Pada bagian bawah ada class panel-footer untuk membuat footer panel yang bisa berisi keterangan tentang panel.

Hasilnya adalah sebagai berikut

Hasil tampilan Panel Dengan Bootstrap

Penggunaan class-class jenis panel untuk merubah warna panel dapat di lihat pada kode berikut:

<!DOCTYPE html>
  <head>
    <title>Membuat Panel dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-primary">
                    <div class="panel-heading"><h4>Heading Panel</h4></div>
                      <div class="panel-body"> 
                        <p>Content Panel</p>
                      </div>
                    <div class="panel-footer">Ini adalah Panel dengan warna biru</div>
                </div>
                <div class="panel panel-danger">
                    <div class="panel-heading"><h4>Heading Panel</h4></div>
                      <div class="panel-body"> 
                        <p>Content Panel</p>
                      </div>
                    <div class="panel-footer">Ini adalah Panel dengan warna Merah</div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Pada contoh diatas tidak jauh berbeda dengan yang sebelumnya. Di sini dibuatkan dua panel yang berbeda jenis. Panel yang pertama menggunakan class panel-primary untuk membuat panel berwarna biru dan yang satu lagi menggunakan class panel-danger untuk membuat panel berwarna merah. Penggunaan class untuk merubah jenis panel dapat dilihat pada baris ke 11 dan 18.

Hasilnya adalah sebagai berikut:

Hasil kedua tampilan Panel Dengan Bootstrap

Demikian tutorial Membuat Panel Dengan Bootstrap, yang memungkinkan kita membuat kontent yang terstruktur dan rapi dalam sebuah website. Selamat mencoba dan Semoga bermanfaat!

Tutorial selanjutnya adalah Cara membuat List Group dengan Bootstrap. Dalam tutorial tersebut kita akan membahas class-class bootstrap yang dapat digunakan dalam sebuah list.

Comments

comments

About Roberto Kaban

Roberto Kaban
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial bootstrap kali ini membahas cara membuat jumbotron dengan bootstrap. Jumbotron umumnya ditempatkan pada halaman …

Leave a Reply

Your email address will not be published. Required fields are marked *