Bootstrap Part 9 : Membuat List Dengan Bootstrap
Membuat List Dengan Bootstrap
Untuk membuat list dengan bootstrap caranya sangat mudah. tambahkan class “list-group” pada element pembuka list. contohnya pada tag <ul> pembuka.
|
1 |
<ul class="list-group"> |
kemudian tambahkan class “list-group-item” pada tiap-tiap tag <li> pembuka untuk menandakan bahwa list tersebut merupakan anak dari list.
|
1 |
<li class="list-group-item"> |
berikut ini cara membuat list dengan bootstrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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 | www.malasngoding.com</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> </html> |
membuat list dengan bootstrap
anda juga bisa membuat penandaan dengan warna pada list bootstrap di atas. caranya anda bisa menambahkan class berikut
- .list-group-item-success
untuk memberi warna hijau pada list - .list-group-item-info
untuk memberi warna biru pada list - .list-group-item-warning
untuk memberi warna kuning pada list - .list-group-item-danger
untuk memberi warna merah pada list
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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 | www.malasngoding.com</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> </html> |
cara membuat list berwarna bootstrap
Membuat list dengan badge bootstrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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 | www.malasngoding.com</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> </html> |
membuat list badge bootstrap
See the Pen LGyReB by Malas Ngoding (@malasngoding) on CodePen.0
Sekian tutorial bootstrap part 9 : membuat list dengan bootstrap.
Tutorial Bootstrap Dasar Lainnya
Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap
Tutorial Menarik Lainnya
Membuat Template Blog Sederhana Dengan Bootstrap
Bootstrap Part 16 : Mengenal Grid System Bootstrap
Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel Dengan Bootstrap
