ASSALAMU'ALLAIKUM WR.WB
A. Pendahuluan
Hallo kawan kali ini saya akan menyampaikan atau memberitahu cara membuat tabel di bootstrap sebenarnya hampir mirip tampilannya dengan tabel di css tapi lebih responsive tampilan dengan bootstrap langsung saja saya mulai pembahasannya.
B. Pembahasan
Pengertian tabel :
- Tabel ialah Sebuah alat untuk menampilkan informasi dalam bentuk matriks.
- .table = Bentuknya tabel tanpa adanya border
- .table-striped = Memberikan efek belang - belang pada row tabel
- .table-bordered = Memberikan border pada tabel
- .table-hover = Memberikan efek / animasi sentuhan saat di sentuh dan untuk membuat pewarnaan pada row atau table data anda dapat menggunakan class-class berikut ini yang dapat anda tambahkan pada tag <tr> untuk memberi warna pada table row, atau tambahkan pada tag <td> untuk memberi warna pada table data :
- .success
.class ini di gunakan untuk memberi warna hijau di tabel row atau tabel data
- .danger
.class ini di gunakan untuk memberi warna merah di tabel row atau tabel data
- .info
.class ini di gunakan untuk memberi warna biru di tabel row atau tabel data
- .warning
.class ini di gunakan untuk memberi warna kuning di tabel row atau tabel data.
Cara Membuat Tabel Dengan Bootstrap
Contoh script & hasilnya ketika di jalankan di web browser.
Pada gambar di atas, karena menggunakan class .table tidak di berikan border di setiap coloumnnya.
Cara Membuat Tabel Border Dengan bootstrap
Cara Membuat Tabel Strip Dengan Bootstrap
gambar di atas, merupakan perpaduan dari class .table-bordered dengan .table-striped dan menjadi belang-belang dari setiap rownya.
Ini hasilnya kombinasi antara cara yang diatas tadi dan akan di tambah dengan hover
C. Kesimpulan
Jadi kesimpulannya ketika kalianmemakai bootstrap akan lebih responsive dan menghemat ruang.
SEMOGA BLOG SAYA BERMANFAAT BAGI KALIAN!!!!!!
WASSALAMU'ALLAIKUM WR.WB
No comments:
Post a Comment