Bootstrap Table
Melanjutkan postingan saya selanjutnya tentang Tutorial Framework Bootstrap dikarenakan jika di posting dalam satu artikel menjadi panjang sekali, maka saya bagi-bagi dalam beberapa bagian, pada kali pembahasan yang akan saya berikan mengenai Bootstrap Table.
Tabel di bootstrap, paling mendasar adalah hanya memanggil satu class .table contoh implementasinya seperti ini.
<table class=”table”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Hasilnya :
Ada class lagi untuk table di bootstrap, yaitu untuk tables stripped seperti zebra. Anda tinggal menambah class .table-stripped setelah class .table . implementasinya beigini. <table class=”table table-striped”> Ada lagi, jika anda ingin table nya ber border seperti ini
Tinggal ubah class .table-stripped tadi dengan class .table-bordered . implementasinya seperti ini.
<table class=”table table-bordered”>
Ada lagi . .! bagaimana jika kita ingin table kita memiliki efek hover ?? jadi ketika cursor ada di atas table, maka warna table ada perubahan, bootstrap menyediakan itu. Caranya juga sama, , tinggal mengubah class yang tadi .table-bordered menjadi class .table-hover . dan lihat hasilnya.
untuk .table-hover ini bisa di gunakan berbarengan dengan .table-bordered maupun .table-stripped . implementasinya begini.
<table class=”table table-bordered table-hover”>
Mudah sekali bukan ?? coba bayangkan jika kita membuat nya manual sendiri dari awal ?? butuh waktu berapa lama agar sebagus itu ? belum lagi hal responsive nya ? jadi tidak heran kalau front end developer di tuntut bisa framework.
Ada lagi satu class untuk table yaitu class .table-codensed silahkan dicoba sendiri dan gunakan sesuai kebutuhan.
WARNA TABLE
Bagaimana jika kita ingin memberi background untuk table nya ? seperti contoh ini misalnya.
Bootstrap menyediakan hal tersebut, tapi sayang nya tidak untuk semua warna, yakni sama dengan warna teks di atas.
.active .success .info .warning .danger
Implementasinya seperti ini.
<div class=”container”>
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.</p>
<table class=”table”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class=”success“>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class=”danger“>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr class=”info“>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
Perhatikan class yang saya beri warna biru . jadi untuk memberi warna background table, adalah dengan memberi class tersebut di tag <tr>.
Demikian postingan saya tentang Bootstrap Table pada Framework Bootstrap, selanjutnya saya akan bahas mengenai Bootstrap Images, silahkan diikuti. Semoga bermanfaat.
