Kamis, 09 Maret 2017

Membuat Panel pada Bootstrap

on Maret 09, 2017 Tidak ada komentar


Membuat Panel Dengan Bootstrap

Panel  adalah sebuah kotak yang memiliki garis dan pading teman-teman. Bootstrap juga menyediakan Class Panel  untuk membuat kotak yang memiliki heading dan footer kotak tersebut. Panel yang di sediakan oleh bootstrap terdiri dari Panel Heading { Bagian Kepala Panel }, Panel Body { Bagian Badan }, Panel Footer { Panel Yang Terletak Di Bawah Panel Sebagai Footer }

Dan ada beberapa Class Panel yang di sediakan oleh Bootstrap  untuk membuat Panel  tersebut dan di bawah ini adalah Class Panel yang di sediakan oleh Bootstrap :
  • panel-default : Merupakan class yang digunakan untuk membuat panel dengan warna standar.
  • 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 yang berwarna merah.
  • panel-heading : Merupakan class Bootstrap yang digunakan untuk membuat panel bagian kepala atau heading.
  • panel-body : Merupakan class yang disediakan Bootstrap untuk membua panel bagian badan.
  • panel-footer : Merupakan class Bootstrap yang disediakan Bootstrap untuk membuat panel bagian footer atau kaki.
Contoh Panel pada bootstrap
Di bawah ini adalah hasil dari script di atas
Dan dapat kita lihat pada Contoh Membuat Panel Dengan Bootstrap di atas tadi teman-teman.
Contoh panel di atas merupakan panel defalut. Perhatkan contoh di atas untuk membuat panel dengan bootstrap yang pertama kai di buat adalah menentukan model panelnya. Dan contoh di atas tadi saya menggunakan "panel-defalut"

<div class="panel panel-default">
   
</div>
Untuk menggunakan model panel yang lain teman-teman bisa mengganti panel-defalut dengan panel-succes, panel-danger, panel-info, panelwarning seperti yang sudah saya jelaskan tadi di atas teman-teman.
Dan saya akan berikan contoh lagi penggunaan Panel Bootstrap.

Index.html :
<!DOCTYPE html>
<html>
<head>
    <title>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</h1>
       
        <div class="panel panel-default">
            <div class="panel-heading">
                <b>Panel Default</b>
            </div>
            <div class="panel-body">
                <p>Membuat panel default dengan bootstrap</p>
            </div>           
        </div>
        <br/>

        <div class="panel panel-success">
            <div class="panel-heading">
                <b>Panel Success</b>
            </div>
            <div class="panel-body">
                <p>Membuat panel success dengan bootstrap</p>
            </div>           
        </div>
        <br/>
<div class="panel panel-danger">
            <div class="panel-heading">
                <b>Panel Danger</b>
            </div>
            <div class="panel-body">
                <p>Membuat panel danger dengan bootstrap</p>
            </div>           
        </div>
        <br/>

        <div class="panel panel-info">
            <div class="panel-heading">
                <b>Panel Info</b>
            </div>
            <div class="panel-body">
                <p>Membuat panel info dengan bootstrap</p>
            </div>           
        </div>
        <br/>

        <div class="panel panel-warning">
            <div class="panel-heading">
                <b>Panel Warning</b>
            </div>
            <div class="panel-body">
                <p>Membuat panel warning dengan bootstrap</p>
            </div>           
        </div>

    </div>
</div>
</body>
</html>
 Di bawah ini adalah hasil script di atas

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )