Menerapkan Table Inverse pada Bootstrap 4

Hallo semuanya, pada tutorial kali ini kita akan coba membuat table menggunakan Bootstrap menggunakan versi terbaru, yaitu versi 4 beta. Yang pasti, kalian sudah tau apa itu Bootstrap, kalau ada yang belum tau disini saya akan jelaskan sedikit apa itu Bootstrap. Bootstrap adalah Front-end framework untuk membuat sebuah website yang responsive atau dapat dijalankan disemua ukuran layar. Bootstrap ini juga sangat mempermudah dalam membangun sebuah website dengan cepat. Nah pada tutorial kali ini kita akan belajar mengenai bagaimana cara membuat sebuah table responsive menggunakan Bootstrap 4 yang sangat powerful. Baiklah langsung saja kita mulai pembahasannya.

Disini saya menganggap kalian sudah mengerti cara menghubungkan file bootstrap  dengan HTML yang kalian punya.  

Selanjutnya kita akan bahas tentang Bagian apa saja yang berubah pada bootstrap versi 4 beta ini.

Disini kita akan membuat sebuah table biasa menggunakan class table pada bootstrap seerti berikut

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

 

Maka hasilnya akan seperti ini.

Perubahan pada bootstrap 4 memberikan kesempatan bagi penggunak untuk mengganti background table menjadi gelap hanya dengan menambahkan nama class .table-inverse pada tag <table> maka akan menjadi seperti ini

 

Atau kalian juga bisa meletakkan class .thead-inverse pada tag <thead> di HTML sehingga judul kolom table akan menjadi gelap seperti ini

 

Atau bisa juga menggunakan class .thead-default seperti ini.

Dari penjelasan diatas sebenarnya kalian masih bisa memberikan kombinasi dengan table-stripped ataupun table-hover, disini kalian juga bisa menggunakan contextual classes untuk memberi warna pada kolom atau baris table. Apa itu contextual classes? Nanti kita akan bahas pada artikel lainnya.

Baiklah teman teman, demikian artikel yang membahas tentang penerapan table-inverse pada bootstrap 4, semoga dapat bermanfaat untuk pengetahuan kalian tentang fitur baru bootstrap 4 ini.

 

30 Agustus 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat