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 :- .list-group-item-success
- .list-group-item-info
- .list-group-item-warning
- .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>
Posting Komentar