Bootstrap Chapter 10 - Membuat Panel dengan Bootstrap

Monday, April 10, 2017

Bootstrap Chapter 10 - Membuat Panel dengan Bootstrap

    1 comment


MEMBUAT PANEL DENGAN BOOTSTRAP
Panel adalah sebuah kotak yang memiliki garis dan padding. Bootstrap menyediakan class panel untuk membuat kotak yang memiliki heading dan footer kotak tersebut. Panel yangyang disediakan oleh Bootstrap terdiri dari panel heading atau kepala dari panel, Panel body atau badan dari panel, dan panel footer alias panel yang terletak pada bagian bawah sebagai footer.

Ada beberapa Class Panel yang disediakan oleb Bootstrap untuk membuat panel

  • panel-default Merupakan class yang digunakan untuk membuat panel dengan warna standar alias bawaan dari Bootstrap
  • panel-success Merupakan class yang disediakan Bootstrap untuk membuat panel berwarna hijau
  • panel-info Merupakan class yang disediakan Bootstrap untuk membuat panel berwarna biru
  • panel-warning Merupakan class yang disediakan Bootstrap untuk membuat panel berwarna kuning
  • panel-heading Merupakan class Bootstrap yang digunakan untuk membuat bagian kepala dari panel tersebut
  • panel-body Merupakan class yang disediakan Bootstrap untuk membuat bagian badan dari panel
  • panel-footer Merupakan class Bootstrap yang disediakan Bootstrap untuk membuat panel bagian bawah atau footer
Berikut adalah contoh Penggunaan Class Panel Bootstrap

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 10 : Membuat Panel Dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
 
     <h1>Membuat Panel Dengan Bootstrap | SCRIPT KIDDIES</h1>
    <div class="panel panel-default">
        <div class="panel-heading">
        <b>Panel Kepala</b>
        </div>
        <div class="panel-body">
        <p>Panel Body</p>
        </div>
        <div class="panel-footer">
        <b>Isi Dari Footer</b>
        </div>
        </div>
</body>
</html>


Image
Ketika kita Run Dalam Web Browser

Dapat dilihat pada contoh diatas. Contoh panel diatas meruapakan panel default. Untuk membuat panel dengan Bootstrap yang pertama kali dilakukan adalah menentukan model panel. Contoh diatas kita menggunakan "panel-default"
<div class="panel panel-default">
</div>
Untuk menggunakan model panel yang lain sobat dapat mengganti panel-default menjadi panel-success,panel-danger,panel-warning sesuai yang saya jelaskan diatas.

Kemudian berikan isi panel dengan membuat heading, panel-body dan panel-footer,  panel-heading dan panel-footer merupakan optional. Sobat bsa menggunakanya boleh tidak sesuai keinginan sobat.
 <div class="panel panel-default">
        <div class="panel-heading">
                <b>Panel Kepala</b>
                </div>
        <div class="panel-body">
                <p>Panel Body</p>
        </div>
                <div class="panel-footer">
                 <b>Isi Dari Footer</b>
                 </div>
        </div>
Dan berikut adalah contoh lain penggunaan panel Bootstrap

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap Part 10 : Membuat Panel Dengan Bootstrap</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
 <h1>Membuat Panel Dengan Bootstrap | SCRIPT KIDDIES</h1>

 <div class="panel panel-default">
  <div class="panel-heading">
  <b>Panel Kepala</b>
  </div>
  <div class="panel-body">
  <p>Membuat Panel Success Dengan Bootstrap</p>
  </div>
  <div class="panel-footer">
  <b>Isi Dari Footer</b>
  </div>
  </div>
  <br>

 <div class="panel panel-danger">
  <div class="panel-heading">
  <b>Panel Heading</b>
  </div>
  <div class="panel-body">
  <p>Membuat Panel Danger Dengan Bootstrap</p>
  </div>
  <div class="panel-footer">
  <b>Isi Dari Footer</b>
  </div>
  </div>
  <br>
 
 <div class="panel panel-success">
 <div class="panel-heading">
  <b>Panel Heading</b>
  </div>
  <div class="panel-body">
  <p>Membuat Panel Success Dengan Bootstrap</p>
  </div>
  <div class="panel-footer">
  <b>Isi Dari Footer</b>
  </div>
  </div>
 <br>

<div class="panel panel-warning">
 <div class="panel-heading">
  <b>Panel Heading</b>
  </div>
  <div class="panel-body">
  <p>Membuat Panel Warning Dengan Bootstrap</p>
  </div>
  <div class="panel-footer">
  <b>Isi Dari Footer</b>
  </div>
  </div>
 <br>

 <div class="panel panel-info">
 <div class="panel-heading">
  <b>Panel Heading</b>
  </div>
  <div class="panel-body">
  <p>Membuat Panel Success Dengan Bootstrap</p>
  </div>
  <div class="panel-footer">
  <b>Isi Dari Footer</b>
  </div>
  </div>
 <br>
</body>
</html>

Image
Contoh lengkap penggunaan Panel bootstrap
KESIMPULAN
Dengan adanya panel ini kita dapat dimudahkan dalam pembuatan panel pada website kita tidak perlu membuat script CSS yang panjang, dan karena adanya Bootstrap ini kita dapat dengan mudah membuat panel dan merubah warna dari panel tersebut yaitu dengan memanggil class panel tersebut

REFERENSI : Malas Ngoding

1 comment :

Subscribe to: Post Comments ( Atom )