tRikSonic
Tema
/ / Bootstrap 3 List Groups - Tutorial Bootstrap Indonesia

Bootstrap 3 List Groups - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.56
/ / 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 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.....
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.