Bootstrap Table pada Framework Bootstrap

Diposting pada

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.

 

Baca Juga:   Format Data Pada Respon Ajax

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.