Cara Mudah Menerapkan Bootstrap List Groups

Bootstrap List sering kita jumpai artinya hal ini mungkin bukan merupakan sesuatu yang asing, Bootstrap List dapat ditempat dibilah sambing atau tempat yang anda idamkan :D. Untuk membuat Bootstrap List ini tidaklah sulit karena sudah disediakan dan kita hanya perlu menuliskan struktur HTMLnya saja.

Suapaya terlihat jelas dan tidak samar, pertama akan saya contohkan dengan bentuk Bootstrap List yang sederhana. Untuk membuat Bootstrap List dibutuhkan elemen <ul> dengan class .list-group dan elemen <li> dengan class .list-group-item, contoh

Bootstrap List Groups

Satu
Satu Dua
Satu Dua dan Tiga

Kode HTML


<ul class="list-group">
  <li class="list-group-item">Satu</li>
  <li class="list-group-item">Satu Dua</li>
  <li class="list-group-item">Satu Dua dan Tiga</li>
</ul>

dengan hasil diatas dan sudah terlihat jelas mudah untuk diimplementasikan dan tentunya tidak samar lagi. Selanjutnya membuat Bootstrap List tersebut agar mempunyai badges didalamnya, hal ini tidaklah rumit bahkan saya sudah memberikan caranya menggunakan Bootstrap Badges, contoh

Bootstrap List Groups dengan Badges

Satu 1
Satu Dua 12
Satu Dua dan Tiga 123

Kode HTML


<ul class="list-group">
  <li class="list-group-item">Satu <span class="badge">1</span></li>
  <li class="list-group-item">Satu Dua <span class="badge">12</span></li>
  <li class="list-group-item">Satu Dua dan Tiga <span class="badge">123</span></li>
</ul>

untuk menggunakan seperti hasil diatas kita hanya perlu menambahkan elemen dengan class .badge. setelah hasil tersebut kemudian kita akan menggunakan Bootstrap List dengan link, contoh

Bootstrap List Groups dengan Link

Satu 1

Satu Dua 12

Satu Dua dan Tiga 123

Kode HTML


<ul class="list-group">
  <a class="list-group-item">Satu <span class="badge">1</span></a>
  <a class="list-group-item">Satu Dua <span class="badge">12</span></a>
  <a class="list-group-item">Satu Dua dan Tiga <span class="badge">123</span></a>
</ul>

dengan hasil dan kode diatas kita hanya perlu merubah elemen <li> menjadi elemen <a>. Maka dengan begitu list tersebut akan menjadi list yang memiliki link. Kemudian bagai mana caranya untuk menempatkan link aktif? untuk menjadikan link tersebut aktif kita hanya perlu menambahkan class .active pada elemen <a>, contoh

Bootstrap List Groups dengan Link Active

Satu 1

Satu Dua 12

Satu Dua dan Tiga 123

Kode HTML


<ul class="list-group">
  <a class="list-group-item" href="https://draft.blogger.com/null">Satu <span class="badge">1</span></a>
  <a class="list-group-item active" href="https://draft.blogger.com/null">Satu Dua <span class="badge">12</span></a>
  <a class="list-group-item" href="https://draft.blogger.com/null">Satu Dua dan Tiga <span class="badge">123</span></a>
</ul>

kode diatas sudah terlihat jelas dan sangat mudah untuk diiplentasikan. Bagaimana jika ingin menonaktifkan link tersebut? kita hanya perlu untuk merubah class .active menjadi .disabled atau dapat juga ditambahkan tanpa menghapus class, contoh

Bootstrap List Groups dengan Link Disabled

Satu 1

Satu Dua 12

Satu Dua dan Tiga 123

Kode HTML


<ul class="list-group">
  <a class="list-group-item" href="https://draft.blogger.com/null">Satu <span class="badge">1</span></a>
  <a class="list-group-item active disabled" href="https://draft.blogger.com/null">Satu Dua <span class="badge">12</span></a>
  <a class="list-group-item" href="https://draft.blogger.com/null">Satu Dua dan Tiga <span class="badge">123</span></a>
</ul>

selesai sudah menjadi link yang tidak aktif. Silahkan untuk dicoba dengan melihat hasil dan kode yang sudah diterapkan diatas. Good Luck....