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.

Baca Juga:   Tutorial Installasi PHP, MySQL, & Apache dengan XAMPP

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.

 

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.