Bootstrap merupakan pondasi dengan technologi framework yang fenomenal
dikalangan Programmers. Dengan tampilan yang sangat elegan dan responsive dengan
desain yang memukau dan compatible dengan berbagai jenis browser baik Personal
Computer maupun pada perangkat browser perangkat lunak lainya yang ada pada Smartphone,
IPhone, Mobile . Dalam kesempatan ini kita akan mengenal lebih dekar elemen
responsive table pada bootstrap 3.3.1.
Dalam pembahasan ini kita lebih awal mengenal satu persatu elemen dan fitur
pada bootstrap, kali ii kita mengambil elemen dalam pembuatan dasar yang
terdapat pada bootstrap. Sebaiknya kita mempelajari step by step elemen apa
saja yang terdapat pada bootstrap, karena dalam pembelajaran kita ditunttut
untuk mempelajari satu per satu sebelum mengembangkan dengan sekala besar.
Banyak dari teman-teman programing yang terburu nafsu untuk mempelajari
keseluruhan namun meninggalkan elemen dasar, ini akan mempersulit kita dalam
mendesign atau melakukan pengembangan kedepanya. Jika kita telah mempelajari
dasar maka akan lebh mudah untuk membangun system yang akan kita buat nantinya.
Berikut sedikit penjelasan mengenai Elemen – Elemen penting dalam mendisain
tabel yang lebih responsive dan lebih interaktif.
Table Dasar
Untuk membuat tabel standar versi bootstrap, cukup menambahkan class
.table pada setiap tabel yang kita buat,
class ini yang sudah memiliki pondasi CSS yang terdapat pada bootstrap 3.3.1
dan dengan menggunakan fungsi DIV
<div class="table-responsive">
<table class="table>
</table>
</div>
<table class="table>
</table>
</div>
Baiklah sekarang kita membedah sebuah kasus, kita sudah memiliki pondasi
table seperti diatas, sekarang kita akan menerapkan beberapa ID / Class pada
table kita dengan masalah yang pertama adalah:
Striped Rows
Striped Rows digunakan untuk membedakan background baris ganjil dengan baris
genap. Dengan meletakannya pada <tr> sebagai contoh cukup menambahakan
class
.table-striped<div class="table-responsive">
<table class="table
table-striped"></table>
</div>
Bordered Table
Ini bertujuan untuk membuat tabel bergaris pada setiap baris dan kolom
tambahkan
.table-border
Hover Rows
Ini untuk mengaktifkan Hover
background pada saat coursor berada pada baris maka Hover Rows akan menandai
dengan mberubah Hover background, untuk menggunakan ini pada tabel silahkan tambahkan
class
.table-hover
Tabel yang responsive merupakan tabel yang dinamis dapat ditampilkan disemua
ukuran layar baik yang ukuran 736px keatas maupun kebawah seperti layar mobile
yang lebih kecil. Tampilan tabel dapat discrool secara vertical maupun
horizontal
Belajar ngblog biar ngak goblog. Ngeblog sambil ngopi, ngoding bersama coffiee - Lengkapi informasi dengan Coffiee Blog.
ConversionConversion EmoticonEmoticon