HASANONTA - Kelebihan membuat List dengan Bootstrap adalah tampilan akan menjadi lebih menarik, dan mudah untuk membuatnya. Untuk membuat list dengan Bootstrap cukup menambahkan class "list-group" pada tag <ul> atau <ol>. lalu tambahkan class "list-group-item" di bagian tag<li>.
Sekarang kita akan mempelajari bagaimana cara Membuat List Dengan Bootstrap. Untuk membuat list dengan Bootstrap seperti biasa, saya kira cukup mudah kita tinggal memasukkan class Bootstrap saja. Tambahkan class "list-group" pada tag <ul> pembuka.
<ul class="list-group">
<li class="list-group-item">
Berikut contoh penggunaan List pada Bootstrap :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 9 : Membuat list dengan bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h1>Membuat List Dengan Bootstrap<br>
<a href="https://www.hasanonta.ga">HasanOnta</a></h1>
<ul class="list-group">
<li class="list-group-item"><a href="#">Baju</a></li>
<li class="list-group-item"><a href="#">Celana</a></li>
<li class="list-group-item"><a href="#">Jaket</a></li>
<li class="list-group-item"><a href="#">Sepatu</a></li>
<li class="list-group-item"><a href="#">Sendal</a></li>
</ul>
</div>
</div>
</body>
Output :
Anda juga bisa menambahkan penandaan dengan warna pada list Bootstrap diatas. Yaitu dengan menambahkan class berikut :
- list-group-item-success : Untuk membuat list berwarna hijau
- list-group-item-info : Untuk membuat list berwarna biru
- list-group-item-warning : Untuk membuat list berwarna kuning
- list-group-item-danger : Untuk membuat list berwarna merah
<!DOCTYPE html><html><head> <title>Bootstrap Part 9 : Membuat list dengan bootstrap</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script></head><body> <div class="container"> <h1>Membuat List Dengan Bootstrap<br>
<a href="https://hasanonta.ga">HasanOnta</a></h1> <ul class="list-group"> <li class="list-group-item list-group-item-success"><a href="#">Baju</a></li> <li class="list-group-item list-group-item-warning"><a href="#">Celana</a></li> <li class="list-group-item list-group-item-info"><a href="#">Jaket</a></li> <li class="list-group-item list-group-item-danger"><a href="#">Sepatu</a></li> <li class="list-group-item"><a href="#">Sendal</a></li> </ul> </div></div>
</body>
Output :
Membuat List Badge dengan Bootstrap
contoh :
<!DOCTYPE html><html><head> <title>Bootstrap Part 9 : Membuat list dengan bootstrap</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script></head><body> <div class="container"> <h1>Membuat List Dengan Bootstrap<br>
<a href="https://www.hasanonta.ga">HasanOnta</a></h1> <ul class="list-group"> <li class="list-group-item list-group-item-success"><a href="#"><span class="badge pull-right">12</span> Baju</a></li> <li class="list-group-item list-group-item-warning"><a href="#"><span class="badge pull-right">2</span> Celana</a></li> <li class="list-group-item list-group-item-info"><a href="#"><span class="badge pull-right">90</span> Jaket</a></li> <li class="list-group-item list-group-item-danger"> <span class="badge pull-right">78</span> <a href="#">Sepatu</a></li> <li class="list-group-item"><a href="#"><span class="badge pull-right">16</span> Sendal</a></li> </ul> </div></div>
</body>
Output :
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar