bootstrap.native
Version:
Bootstrap components build with Typescript
46 lines (43 loc) • 2.33 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>
.offcanvas { transition-duration: 0.05s }
.offcanvas-backdrop { transition-duration: 0.05s }
</style>
</head>
<body class="container" style="padding: 3rem 3rem 100vh 3rem">
<h3>Offcanvas Examples</h3>
<div class="btn-toolbar">
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary ms-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNoBackdrop" aria-controls="offcanvasNoBackdrop">
Button with data
</button>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel" aria-hidden="true" aria-modal="true" role="dialog" data-cy="offcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>This <b>Offcanvas</b> instance is a demo.</p>
<p>Opening another <b>Offcanvas</b> instance will close this <b>Offcanvas</b> instance.</p>
<p><button class="btn btn-success btn-lg" data-bs-title="Tooltip Inside Offcanvas" data-bs-toggle="tooltip">Tooltip Inside Offcanvas</button></p>
</div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNoBackdrop" aria-labelledby="offcanvasNoBackdropLabel" data-bs-backdrop="false" aria-hidden="true" aria-modal="true" role="dialog" data-cy="offcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNoBackdropLabel">Offcanvas End</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>This <b>Offcanvas</b> uses <code>data-bs-backdrop="false"</code> intentionally to test the option independently for each instance.</p>
</div>
</div>
</body>
</html>