Belajar Bootstrap Part 9 : Membuat List Dengan Bootstrap
MEMBUAT LIST DENGAN BOOTSTRAP
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">
Kemudian tambahkan class "list-group-item" pada setiap tag <li> pembuka yang menandakan bahwa list tersebut merupakan pembuka dari list
<li class="list-group-item">
<!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.script-kiddies.org">Script Kiddies</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>
Sobat 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://www.script-kiddies.org">Script Kiddies</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>
</html>
Membuat List Badge dengan 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.script-kiddies.org">Script Kiddies</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>
</html>
KESIMPULAN
Bagaimana? Mudah bukan? Untuk membuat list responsive dan modern kita dapat menggunakan class Bootstrap seperti yang sudah saya jelaskan diatas kita hanya tinggal mengkreasikan sesuai pemikiran kita. Jika ada yang ditanyakan silahkan berikan komentar, Sekian Terima Kasih
REFERENSI : Malas Ngoding
TUTORIAL BOOTSTRAP DASAR LAINYA :
- Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
- Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
- Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
- Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
- Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
- Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
- Bootstrap Part 7 : Membuat Icon Bootstrap
- Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
- Bootstrap Part 9 : Membuat List Dengan Bootstrap
- Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
- Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
- Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
- Bootstrap Part 13 : Membuat Form Dengan Bootstrap
- Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
- Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
- Bootstrap Part 16 : Mengenal Grid System Bootstrap
Tidak ada komentar :
Posting Komentar