Bootstraps Panel

Beginilah cara membuat panel ala Bootstraps

by Achmad Muharya

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>

CSS

/*Struktur Panel*/
 .panel {
    font-family:Oswald, "Arial Narrow", "Source Sans Pro", Calibri, Segoe, "Segoe UI", Frutiger, "Frutiger Linotype", "DeJavu Sans", "Helvetica Neue", Arial, Sans-Serif;
    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 >...

JavaScript

//Hanya contoh, silahkan disesuaikan lagi sesuai selera