tRikSonic
Tema

Bootstrap 3 List Groups - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.56

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 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>

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 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>

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 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>

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>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.