Cara Membuat Menu Dropdown dengan Mudah menggunakan Bootstrap
Pernahkah teman-teman merancang fitur dropdown sendiri menggunakan HTML dan CSS, sekiranya telah bagaimana ribetnya ya, sekiranya teman-teman baru membuatnya, apalagi teman-teman lagi di kejar dateline mesti cepat-cepat selesai, kini dengan bootstrap kita di permudahkan dengan mengambil ambil saja di pada library atau laman bootstrap, lagi-lagi menggunakan bootstrap ya itu dia gunannya boostrap, oke jangan kemana-kemana kita akan bahas sesaat lagi belajar cara merancang fitur dropdown dengan gampang menggunakan Bootstrap.
ketika kita menggunakan fitur dropdown, tak sedikit pertanyaan seketika merancang dropdown, kenapa dapat ini kenapa dapat itu, kenapa mesti ada display none, lalu kenapa mesti ada memanggilnya lagi dengan menggunakan display block, oke tenang saja dengan bootstrap kita lebih di permudahkan kok, oke seketika saja cara merancang fitur dropdown dengan gampang menggunakan Bootstrap. saya harap teman-teman telah dapat menggunakan bootstrap bagaiamana cara menginstal dan bagaimana cara menggunakannya, teman-teman perhatikan struktur berikut ini ya.
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content=IE=edge>
<meta name=viewport content=width=device-width, initial-scale=1>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>cara merancang fitur dropdown dengan gampang menggunakan Bootstrap</title>
<!-- Bootstrap -->
<link href=css/bootstrap.min.css rel=stylesheet>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<-e-script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js><-e-/script>
<-e-script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js><-e-/script>
<![endif]-->
</head>
<body>
<div class=container>
<div class=row>
<div class=col-md-12>
<h1>cara merancang fitur dropdown dengan gampang menggunakan Bootstrap</h1>
<span style=color: #ff0000><div class=dropdown>
<button class=btn btn-primary dropdown-toggle type=button id=dropdownMenu1 data-toggle=dropdown aria-haspopup=true aria-expanded=true>
Dropdown
<span class=caret></span>
</button>
<ul class=dropdown-menu aria-labelledby=dropdownMenu1>
<li><a href=#>Action</a></li>
<li><a href=#>Another action</a></li>
<li><a href=#>Something else here</a></li>
<li role=separator class=divider></li>
<li><a href=#>Separated link</a></li>
</ul>
</div></span>
<span class=glyphicon glyphicon-knight aria-hidden=true></span><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sistem aplikasi like Aldus PageMaker including versions of Lorem Ipsum. </p>
<a href=https://play.google.com/store/apps/details?id=com.mobile.legends>link unduh</a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<-e-script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js><-e-/script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<-e-script src=js/bootstrap.min.js><-e-/script>
</body>
</html>
Seperti lazim teman-teman hilangkan tanda “-e-“, dan perhatikan tanda stuktur html yang saya block merah, oke bagaimana hasilnya:
Telah jadi ya teman-teman, bagaimana amat gampang kan, saya rasa lumayan hingga disini belajar kita mengenai cara merancang fitur dropdown dengan gampang menggunakan Bootstrap, semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.
Sumber https://kursuswebsite.org
