bootstrap.native
Version:
Bootstrap components build with Typescript
72 lines (71 loc) • 3.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BSN Testing Page</title>
<link id="bsCSS" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.form-vertical {width: 250px}
</style>
</head>
<body class="container" style="padding: 3rem">
<h3>Dropdown Examples</h3>
<div class="btn-toolbar mb-3">
<div class="btn-group dropdown me-2">
<a class="btn btn-secondary dropdown-toggle" href="#" id="dropdownButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Form
</a>
<form class="px-3 dropdown-menu form-vertical" aria-expanded="false" aria-labelledby="dropdownButton4">
<div class="mb-3">
<label for="inputEmail3" class="control-label">Email</label>
<div class=""><input type="email" class="form-control" id="inputEmail3" placeholder="Email" autocomplete="email"></div>
</div>
<div class="mb-3">
<label for="inputPassword3" class="control-label">Password</label>
<div class=""><input type="password" class="form-control" id="inputPassword3" placeholder="Password" autocomplete="current-password"></div>
</div>
<div class="mb-3">
<div class="">
<div class="checkbox"><label><input type="checkbox"> Remember me</label></div>
</div>
</div>
<div class="mb-3">
<div class="btn-group"><button type="submit" class="btn btn-secondary">Sign in</button></div>
</div>
</form>
</div>
<div class="btn-group dropup me-2">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">First Action</a>
<a class="dropdown-item" href="#">Second Action</a>
<a class="dropdown-item" href="#">Third Action</a>
<a class="dropdown-item" href="#">Another Action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group dropstart me-2">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu Start
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu End
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</body>
</html>