Assalamualaikum Wr.Wb
Masih dengan dengan bootsrap kali ini saya akan berbagi tutrial membuat list dengan bootstrap.List di sini maksudnya sama seperti list di html yang berbeda hanya secara tampilan lebih menarik dari list yang ada di html dan kita tidak perlu terlalu repot untuk membuat style atau yang lainnya jika ingin membuat tampilan list kita menjadi lebih menarik,baiklah mari kita mulai.
Masih dengan dengan bootsrap kali ini saya akan berbagi tutrial membuat list dengan bootstrap.List di sini maksudnya sama seperti list di html yang berbeda hanya secara tampilan lebih menarik dari list yang ada di html dan kita tidak perlu terlalu repot untuk membuat style atau yang lainnya jika ingin membuat tampilan list kita menjadi lebih menarik,baiklah mari kita mulai.
- Basic List Group(yaitu list dengan model biasa)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic List Group</h2>
<ul class="list-group">
<li class="list-group-item">Soto</li>
<li class="list-group-item">Bakso</li>
<li class="list-group-item">Sate</li>
</ul>
</div>
</body>
</html>
Dan inilah hasilnya
- List Group Whith Linked Item(list grup dengan link)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic List Group Whith Linked Item</h2>
<div class="list-group">
<a href="#" class="list-group-item">Soto</a>
<a href="#" class="list-group-item">Bakso</a>
<a href="#" class="list-group-item">Sate</a>
</div>
</div>
</body>
</html>
Dan inilah hasilnya
- Contextual Clases(yaitu list dengan beberapa warna)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Clases</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-warning">Bakso</li>
<li class="list-group-item list-group-item-danger">Soto</li>
<li class="list-group-item list-group-item-info">Sate</li>
</ul>
</div>
</body>
</html>
Dan inilah hasilnya
- Active state
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="list-group">
<a href="#" class="list-group-item active">Bakso</a>
<a href="#" class="list-group-item">Soto</a>
<a href="#" class="list-group-item">Sate</a>
</div>
</div>
</body>
</html>
Dan inilah hasilnya
Mudah bukan untuk membuat list dengan bootstrap? dan hasilnya saya rasa lebih menarik daripada html biasa,baiklah mungkin sekian dulu postingan kali ini semoga bermanfaat sampai jumpa di postingan berikutnya.
Referensi:http://w3schools.com/
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar