Membuat Panel Ala Bootstrap

Mad Trik - Masih main-main di Bootstrap lagi kali ini, tapi bukan untuk ngebahas soal template lagi ya. Jujur capek bikin template dari Bootstrap makanya mungkin untuk sementara saya berhenti dulu buat memperbarui templatenya.

Ini yang namanya "Panel" itu.

Nah, kali ini saya cuman mau ngebagiin tutorial untuk membuat panel ala Bootstrap. Untuk tampilan panelnya sendiri saya ambil di tema Bootstrap Paper tema untuk bootstrap paling bagus selama saya tau tentang bootstrap ini dan juga punya CDN, jadi bisa dipasang juga di Blogger.

Fungsinya sih banyak, contohnya buat semacam peringatan atau pemberitahuan dsb. Jadi langsung ke kodenya aja kali ya:

CSS

/*Struktur Panel*/
 .panel {
    margin-bottom: 23px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
    padding: 15px;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 15px;
    color: inherit;
}
.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #dddddd;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}
/*Style Panel*/
 .panel-default {
    border-color: #dddddd;
}
.panel-default > .panel-heading {
    color: #212121;
    background-color: #f5f5f5;
    border-color: #dddddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #dddddd;
}
.panel-default > .panel-heading .badge {
    color: #f5f5f5;
    background-color: #212121;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #dddddd;
}
.panel-primary {
    border-color: #2196f3;
}
.panel-primary > .panel-heading {
    color: #ffffff;
    background-color: #2196f3;
    border-color: #2196f3;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #2196f3;
}
.panel-primary > .panel-heading .badge {
    color: #2196f3;
    background-color: #ffffff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #2196f3;
}
.panel-success {
    border-color: #d6e9c6;
}
.panel-success > .panel-heading {
    color: #ffffff;
    background-color: #4caf50;
    border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #d6e9c6;
}
.panel-success > .panel-heading .badge {
    color: #4caf50;
    background-color: #ffffff;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #d6e9c6;
}
.panel-info {
    border-color: #cba4dd;
}
.panel-info > .panel-heading {
    color: #ffffff;
    background-color: #9c27b0;
    border-color: #cba4dd;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #cba4dd;
}
.panel-info > .panel-heading .badge {
    color: #9c27b0;
    background-color: #ffffff;
}
.panel-info > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #cba4dd;
}
.panel-warning {
    border-color: #ffc599;
}
.panel-warning > .panel-heading {
    color: #ffffff;
    background-color: #ff9800;
    border-color: #ffc599;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #ffc599;
}
.panel-warning > .panel-heading .badge {
    color: #ff9800;
    background-color: #ffffff;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #ffc599;
}
.panel-danger {
    border-color: #f7a4af;
}
.panel-danger > .panel-heading {
    color: #ffffff;
    background-color: #e51c23;
    border-color: #f7a4af;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #f7a4af;
}
.panel-danger > .panel-heading .badge {
    color: #e51c23;
    background-color: #ffffff;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #f7a4af;
}

HTML

<div class='panel panel-default'>
    <div class='panel-heading'>
         <h3 class='panel-title'>Just an example</h3>

    </div>
    <div class='panel-body'>
        <p>You're only supposed to blow the bloody doors off! you want a guarantee, buy a toaster. you are as precious to me as you were to your own mother and father.</p>
    </div>
</div>
<div class='panel panel-primary'>
    <div class='panel-heading'>
         <h3 class='panel-title'>Just an example</h3>

    </div>
    <div class='panel-body'>
        <p>You're only supposed to blow the bloody doors off! you want a guarantee, buy a toaster. you are as precious to me as you were to your own mother and father.</p>
    </div>
</div>
<div class='panel panel-success'>
    <div class='panel-heading'>
         <h3 class='panel-title'>Just an example</h3>

    </div>
    <div class='panel-body'>
        <p>You're only supposed to blow the bloody doors off! you want a guarantee, buy a toaster. you are as precious to me as you were to your own mother and father.</p>
    </div>
</div>
<div class='panel panel-warning'>
    <div class='panel-heading'>
         <h3 class='panel-title'>Just an example</h3>

    </div>
    <div class='panel-body'>
        <p>You're only supposed to blow the bloody doors off! you want a guarantee, buy a toaster. you are as precious to me as you were to your own mother and father.</p>
    </div>
</div>
<div class='panel panel-danger'>
    <div class='panel-heading'>
         <h3 class='panel-title'>Just an example</h3>

    </div>
    <div class='panel-body'>
        <p>You're only supposed to blow the bloody doors off! you want a guarantee, buy a toaster. you are as precious to me as you were to your own mother and father.</p>
    </div>
</div>

Silahkan berkreasi sendiri. CSS hanya sebagai contoh saja selebihnya ya tinggal di edit saja lagi sesuai selera kamu masing-masing.