bootstrap.native
Version:
Bootstrap components build with Typescript
72 lines (69 loc) • 4.01 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>
.collapsing {transition-duration: 0.15s;}
</style>
</head>
<body class="container" style="padding: 3rem">
<div class="row">
<div class="col">
<h3>Tab Examples</h3>
<ul id="myTab" class="nav nav-tabs mb-2" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home" id="home-tab" role="tab" data-height="true" data-bs-toggle="tab" aria-controls="home" aria-expanded="true" aria-selected="true">
Home
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="myTabDrop1" data-bs-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false">Dropdown <span class="caret"></span>
</a>
<div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
<a class="dropdown-item" href="#dropdown1" role="tab" id="dropdown1-tab" data-bs-toggle="tab" aria-controls="dropdown1" aria-expanded="false" aria-selected="false">Some tab</a>
<a class="dropdown-item" id="tabEventsExample" href="#dropdown2" role="tab" data-bs-toggle="tab" aria-controls="dropdown2" aria-expanded="false">Events</a>
</div>
</li>
</ul>
<div id="myTabContent" class="tab-content mb-2">
<div role="tabpanel" class="tab-pane fade active show" id="home" aria-labelledby="home-tab">
<p><b class="text-info">These tabs have no active tab on initialization.</b> Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Messenger bag gentrify pitchfork tattooed
craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings
gentrify squid 8-bit cred pitchfork.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny
pack lo-fi farm-to-table. </p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="tabEventsExample">
<p>Wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial
keffiyeh echo park vegan.</p>
</div>
</div>
<ul id="myTab1" class="nav nav-pills mb-2" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#home1" id="home1-tab" role="tab" data-bs-toggle="tab" aria-controls="home1" aria-expanded="true" aria-selected="true">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex flex-row align-items-center" href="#profile" role="tab" id="profile-tab" data-bs-toggle="tab" aria-controls="profile1" aria-selected="false">Profile</a>
</li>
</ul>
<div id="myTabContent1" class="tab-content">
<div role="tabpanel" class="tab-pane" id="home1" aria-labelledby="home1-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile" aria-labelledby="profile-tab">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1
labore velit, blog sartorial PBR leggings next level wes anderson artisan four.</p>
</div>
</div>
</div>
</div>
</body>
</html>