Bootstrap 3 List Groups - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 - List Groups

TrikSonic - List Group pada bootstrap mempunyai dasar susunan yang digunakan, yaitu mengunakan class .list-group yang dituliskan pada element HTML <ul> sebagai element pembungkus dari daftar. Sedangkan class .list-group-item dituliskan pada element <li> sebagai element pembuat daftar.

Contoh :

<ul class="list-group">
  <li class="list-group-item">Aplikasi</li>
  <li class="list-group-item">Gambar</li>
  <li class="list-group-item">Musik</li>
  <li class="list-group-item">Video</li>
</ul>

List Groups dengan Badges

Untuk menambahkan sebuah badge (lencana/tanda pengenal/emblem) gunakan class .badge yang ditulis pada element <span> pada umumnya.

Contoh :

<ul class="list-group">
  <li class="list-group-item">Aplikasi <span class="badge">50</span></li>
  <li class="list-group-item">Gambar <span class="badge">150</span></li>
  <li class="list-group-item">Musik <span class="badge">70</span></li>
  <li class="list-group-item">Video <span class="badge">30</span></li>
</ul>

List Groups berupa Link

Untuk membuat daftar grup berupa link gunakan element <div> dengan nilai class .list-group yang digunakan sebagai pembungkus daftar grup.

Untuk membuat daftar gunakan element HTML <a> dengan nilai class .list-group-item yang diletakkan didalam area pembungkus .list-group

Efek yang ditampilkan untuk metode ini adalah memiliki warna background tambahan pada saat element daftar tersorot/dilintasi/disentuh oleh pointer

Contoh :

<div class="list-group">
  <a class="list-group-item" href="#">Aplikasi</a>
  <a class="list-group-item" href="#">Gambar</a>
  <a class="list-group-item" href="#">Musik</a>
  <a class="list-group-item" href="#">Video</a>
</div>

List Groups berupa Button

Untuk membuat daftar grup berupa daftar element <button>, gunakan element <div> dengan nilai class .list-group yang digunakan sebagai pembungkus daftar grup.

Untuk membuat daftar gunakan element HTML <button> dengan nilai class .list-group-item yang diletakkan didalam area pembungkus .list-group

Efek yang ditampilkan untuk metode ini adalah memiliki warna background tambahan pada saat element daftar tersorot/dilintasi/disentuh oleh pointer dan mempunyai outline pada saat button dalam keadaan focus

Contoh :

<div class="list-group">
  <button class="list-group-item">Aplikasi</abutton>
  <button class="list-group-item">Gambar</button>
  <button class="list-group-item">Musik</button>
  <button class="list-group-item">Video</button>
</div>

List Groups Aktif

Untuk menampilkan daftar yang sedang aktif tambahkan class .active ke dalam class dasar .list-group-item

Contoh :

<h2>Contoh default</h2>
<ul class="list-group">
  <li class="list-group-item active">Daftar 1</li>
  <li class="list-group-item">Daftar 2</li>
  <li class="list-group-item">Daftar 3</li>
  <li class="list-group-item">Daftar 4</li>
</ul>

<h2>Contoh dengan badge</h2>
<ul class="list-group">
  <li class="list-group-item">Aplikasi <span class="badge">50</span></li>
  <li class="list-group-item active">Gambar <span class="badge">150</span></li>
  <li class="list-group-item">Musik <span class="badge">70</span></li>
  <li class="list-group-item">Video <span class="badge">30</span></li>
</ul>

<h2>Contoh dengan button</h2>
<div class="list-group">
  <button class="list-group-item active">HTML</button>
  <button class="list-group-item">CSS</button>
  <button class="list-group-item">JavaScript</button>
  <button class="list-group-item">PHP</button>
</div>

<h2>Contoh dengan Link</h2>
<div class="list-group">
  <a class="list-group-item active" href="#">Google Plus</a>
  <a class="list-group-item" href="#" href="#">Facebook</a>
  <a class="list-group-item " href="#">Twitter</a>
</div>

List Groups Disabled

Untuk menampilkan daftar yang tidak aktif tambahkan class .disabled ke dalam class dasar .list-group-item

Contoh :

<h2>Contoh default</h2>
<ul class="list-group">
  <li class="list-group-item disabled">Daftar 1</li>
  <li class="list-group-item">Daftar 2</li>
  <li class="list-group-item">Daftar 3</li>
  <li class="list-group-item">Daftar 4</li>
</ul>

<h2>Contoh dengan badge</h2>
<ul class="list-group">
  <li class="list-group-item">Aplikasi <span class="badge">50</span></li>
  <li class="list-group-item disabled">Gambar <span class="badge">150</span></li>
  <li class="list-group-item">Musik <span class="badge">70</span></li>
  <li class="list-group-item">Video <span class="badge">30</span></li>
</ul>

<h2>Contoh dengan button</h2>
<div class="list-group">
  <button class="list-group-item disabled">HTML</button>
  <button class="list-group-item">CSS</button>
  <button class="list-group-item">JavaScript</button>
  <button class="list-group-item">PHP</button>
</div>

<h2>Contoh dengan Link</h2>
<div class="list-group">
  <a class="list-group-item disabled" href="#">Google Plus</a>
  <a class="list-group-item" href="#" href="#">Facebook</a>
  <a class="list-group-item " href="#">Twitter</a>
</div>

List Groups dengan Contextual classes

Contextual class artinya class tambahan yang bisa digunakan untuk memberikan tampilan tambahan pada daftar list.

Nama class yang bisa dituliskan kedalam class dasar .list-group-item adalah sebagai berikut :

1. .list-group-item-success
2. .list-group-item-info
3. .list-group-item-warning
4. .list-group-item-danger

Contoh :

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Daftar 1</li>
  <li class="list-group-item list-group-item-info">Daftar 2</li>
  <li class="list-group-item list-group-item-warning">Daftar 3</li>
  <li class="list-group-item list-group-item-danger">Daftar 4</li>
</ul>

<div class="list-group">
  <a class="list-group-item list-group-item-success" href="#">Aplikasi</a>
  <a class="list-group-item list-group-item-info" href="#" href="#">Gambar</a>
  <a class="list-group-item list-group-item-warning" href="#">Musik</a>
  <a class="list-group-item list-group-item-danger" href="#">Video</a>
</div>

List Groups Custom content

Gunakan class .list-group-item-heading (Jika berupa sebuah Heading) dan .list-group-item-text (Jika hanya teks biasa) yang dituliskan didalam area .list-group-item

Contoh :

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h3 class="list-group-item-heading">Judul 1</h3>
    <p class="list-group-item-text">Teks tambahan</p>
  </a>
  <a href="#" class="list-group-item">
    <h3 class="list-group-item-heading">Judul 2</h3>
    <p class="list-group-item-text">Teks tambahan</p>
  </a>
  <a href="#" class="list-group-item">
    <h3 class="list-group-item-heading">Judul 3</h3>
    <p class="list-group-item-text">Teks tambahan</p>
  </a>
</div>