Daftar dasar Grup
Kelompok daftar yang paling mendasar adalah daftar unordered dengan daftar item:
- item pertama
- kedua barang
- Item ketiga
Untuk membuat grup daftar dasar, menggunakan <ul> elemen dengan kelas .list-group , dan <li> elemen dengan kelas .list-group-item :
Contoh
<ul class="list-group">
<li class="list-group-item">First
item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul> Cobalah sendiri " Daftar Grup Dengan Lencana
Anda juga dapat menambahkan lencana ke grup daftar. Lencana akan secara otomatis diposisikan di sebelah kanan:
- 12 New
- 5 Dihapus
- 3 Peringatan
Untuk membuat lencana, membuat <span> elemen dengan kelas .badge dalam item daftar:
Contoh
<ul class="list-group">
<li
class="list-group-item"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul> Cobalah sendiri " Daftar Grup Dengan Produk Terkait
Item dalam kelompok daftar juga bisa hyperlink. Ini akan menambahkan warna latar belakang abu-abu di hover:
Untuk membuat grup daftar dengan item terkait, penggunaan <div> bukan <ul> dan <a> bukannya <li> :
Contoh
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> Cobalah sendiri " Negara aktif
Gunakan .active kelas untuk menyorot item saat ini:
Contoh
<div class="list-group">
<a href="#" class="list-group-item
active">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> Cobalah sendiri " Barang cacat
Kelompok Daftar berikut memiliki item cacat:
Untuk menonaktifkan item, tambahkan .disabled kelas:
Contoh
<div class="list-group">
<a href="#" class="list-group-item
disabled">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> Cobalah sendiri " Kelas kontekstual
kelas kontekstual dapat digunakan untuk daftar warna item:
- item pertama
- kedua barang
- Item ketiga
- butir keempat
Kelas-kelas untuk mewarnai daftar-item adalah: .list-group-item-success , list-group-item-info , list-group-item-warning , dan .list-group-item-danger :
Contoh
<ul class="list-group">
<li class="list-group-item
list-group-item-success">First item</li>
<li
class="list-group-item list-group-item-info">Second item</li>
<li
class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul> Cobalah sendiri " Konten kustom
Anda dapat menambahkan hampir HTML dalam item daftar grup.
Bootstrap memberikan kelas .list-group-item-heading dan .list-group-item-text yang dapat digunakan sebagai berikut:
Contoh
<div class="list-group">
<a href="#" class="list-group-item
active">
<h4 class="list-group-item-heading">First
List Group Item Heading</h4>
<p
class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4
class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4
class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div> Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »