Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Bootstrap 3

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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - List Groups Default</h2>  <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>   </div> </body> </html>

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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - List Groups Badges</h2>  <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>  </div> </body> </html>

List Groups berupa Link

Untuk menciptakan daftar grup berupa link gunakan element <div> dengan nilai class .list-group yang dipakai sebagai pembungkus daftar grup.
Untuk menciptakan daftar gunakan element HTML <a> dengan nilai class .list-group-item yang diletakkan didalam area pembungkus .list-group
Efek yang ditampilkan untuk metode ini yaitu mempunyai warna background embel-embel pada dikala 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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - List Groups Link</h2>  <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>  </div> </body> </html>

List Groups berupa Button

Untuk menciptakan daftar grup berupa daftar element <button>, gunakan element <div> dengan nilai class .list-group yang dipakai sebagai pembungkus daftar grup.
Untuk menciptakan daftar gunakan element HTML <button> dengan nilai class .list-group-item yang diletakkan didalam area pembungkus .list-group
Efek yang ditampilkan untuk metode ini yaitu mempunyai warna background embel-embel pada dikala element daftar tersorot/dilintasi/disentuh oleh pointer dan mempunyai outline pada dikala 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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - List Groups Button</h2>  <div class="list-group">   <button class="list-group-item">Aplikasi</button>   <button class="list-group-item">Gambar</button>   <button class="list-group-item">Musik</button>   <button class="list-group-item">Video</button> </div>  </div> </body> </html>

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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <section class="container"> <h2>Bootstrap 3 - List Groups Aktif</h2> <hr/>  <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>  </section> </body> </html>

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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <section class="container"> <h2>Bootstrap 3 - List Groups Disabled</h2> <hr/>  <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>  </section> </body> </html>

List Groups dengan Contextual classes

Contextual class artinya class embel-embel yang dapat dipakai untuk memperlihatkan tampilan embel-embel pada daftar list.
Nama class yang dapat dituliskan kedalam class dasar .list-group-item yaitu 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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <section class="container"> <h2>Bootstrap 3 - List Groups Contextual classes</h2>   <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>   </section> </body> </html>

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>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <section class="container"> <h2>Bootstrap 3 - List Groups Custom Content</h2>   <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>   </section> </body> </html>