Bootstrap

MENGGUNAKAN BOOTSTRAP BAGIAN 2
1. DROP DOWN MENU
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>Class .dropdown digunakan untuk mengindikasi sebuah menu dropdown.</p>
<p>Gunakan .dropdown-menu class untuk build menu dropdown.</p>
<p>Untuk membuka dropdown menu, gunakan button atau link dari class .dropdown-toggle and
data-toggle="dropdown".</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
Hasil :
2. Split button drop down menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
</head>
<body>
<h2>Dropdown Split Buttons</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-
toggle="dropdown">
</button>
</div>
</div>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-
toggle="dropdown">
</button>
</div>
</div>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-
toggle="dropdown">
</button>
</div>
</div>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-
toggle="dropdown">
</button>
</div>
</div>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-
toggle="dropdown">
</button>
</div>
</div>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-
toggle="dropdown">
</button>
</div>
</div>
</div>
</body>
</html>
Hasil:
3. Hide Content Button
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Klik
saya</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
Hasil:

Bootstrap

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap

Uploaded by

Copyright:

Available Formats

MENGGUNAKAN BOOTSTRAP BAGIAN 2

1. DROP DOWN MENU

You might also like