Belajar Bootstrap (17. Dropdown)

Belajar Bootstrap (17. Dropdown)

Dropdown Bootstrap

Apa itu dropdown?
Dropdowm dalam bootstrap yaitu menu toggleable yang membuat pilihan list pada menu, misal di situs pesonainformatika ini, jika kursor diarahkan ke menu programming, maka akan muncuk list-list, misal belajar css, belajar php, dll. Itulah penggunaan dropdown.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width-=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<title>belajar bootstrap</title>

</head>
<body>
	<h2>Dasar pembuatan dropdown</h2>
	<div class="dropdown">
		<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
			menu
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">menu 1</a></li>
			<li><a href="#">menu 2</a></li>
			<li><a href="#">menu 3</a></li>
		</ul>
	</div>

	<h2>mari kita kreasikan dropdown dengan menambahkan yang lainya</h2>
	<div class="dropdown">
		<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
			menu
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" style="background-color: lightgreen;">
			<li class="dropdown-header"><a href="#">menu 1 sebagai header</a></li>
			<li><a href="#">menu 2</a></li>
			<li><a href="#">menu 3</a></li>
			<li><a href="#">menu 4</a></li>
			<li class="disabled"><a href="#">menu 5 disabled</a></li>
			<li class="divider"></li>
			<li><a href="#">menu 6</a></li>
			
		</ul>
	</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

Your email address will not be published.Required fields are marked *