index.html
· 2.2 KiB · HTML
Raw
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar cool.md</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="dropdown01"
data-bs-toggle="dropdown"
aria-expanded="false"
>Dropdown</a
>
<ul class="dropdown-menu" aria-labelledby="dropdown01">
<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>
</li>
</ul>
<form class="d-flex">
<input
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<main class="container">
<div class="starter-template text-center py-5 px-3">
<h1>Bootstrap starter template</h1>
<p class="lead">
Use this document as a way to quickly start any new project.<br />
All you get is this text and a mostly barebones HTML document.
</p>
</div>
</main>
| 1 | <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> |
| 2 | <div class="container-fluid"> |
| 3 | <a class="navbar-brand" href="#">Navbar cool.md</a> |
| 4 | <button |
| 5 | class="navbar-toggler" |
| 6 | type="button" |
| 7 | data-bs-toggle="collapse" |
| 8 | data-bs-target="#navbarsExampleDefault" |
| 9 | aria-controls="navbarsExampleDefault" |
| 10 | aria-expanded="false" |
| 11 | aria-label="Toggle navigation" |
| 12 | > |
| 13 | <span class="navbar-toggler-icon"></span> |
| 14 | </button> |
| 15 | |
| 16 | <div class="collapse navbar-collapse" id="navbarsExampleDefault"> |
| 17 | <ul class="navbar-nav me-auto mb-2 mb-md-0"> |
| 18 | <li class="nav-item active"> |
| 19 | <a class="nav-link" aria-current="page" href="#">Home</a> |
| 20 | </li> |
| 21 | <li class="nav-item"> |
| 22 | <a class="nav-link" href="#">Link</a> |
| 23 | </li> |
| 24 | <li class="nav-item"> |
| 25 | <a |
| 26 | class="nav-link disabled" |
| 27 | href="#" |
| 28 | tabindex="-1" |
| 29 | aria-disabled="true" |
| 30 | >Disabled</a |
| 31 | > |
| 32 | </li> |
| 33 | <li class="nav-item dropdown"> |
| 34 | <a |
| 35 | class="nav-link dropdown-toggle" |
| 36 | href="#" |
| 37 | id="dropdown01" |
| 38 | data-bs-toggle="dropdown" |
| 39 | aria-expanded="false" |
| 40 | >Dropdown</a |
| 41 | > |
| 42 | <ul class="dropdown-menu" aria-labelledby="dropdown01"> |
| 43 | <li><a class="dropdown-item" href="#">Action</a></li> |
| 44 | <li><a class="dropdown-item" href="#">Another action</a></li> |
| 45 | <li><a class="dropdown-item" href="#">Something else here</a></li> |
| 46 | </ul> |
| 47 | </li> |
| 48 | </ul> |
| 49 | <form class="d-flex"> |
| 50 | <input |
| 51 | class="form-control me-2" |
| 52 | type="search" |
| 53 | placeholder="Search" |
| 54 | aria-label="Search" |
| 55 | /> |
| 56 | <button class="btn btn-outline-success" type="submit">Search</button> |
| 57 | </form> |
| 58 | </div> |
| 59 | </div> |
| 60 | </nav> |
| 61 | |
| 62 | <main class="container"> |
| 63 | <div class="starter-template text-center py-5 px-3"> |
| 64 | <h1>Bootstrap starter template</h1> |
| 65 | <p class="lead"> |
| 66 | Use this document as a way to quickly start any new project.<br /> |
| 67 | All you get is this text and a mostly barebones HTML document. |
| 68 | </p> |
| 69 | </div> |
| 70 | </main> |
| 1 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> |
| 2 |
| 1 | body { |
| 2 | padding-top: 5rem; |
| 3 | } |
| 4 | |
| 5 | .bd-placeholder-img { |
| 6 | font-size: 1.125rem; |
| 7 | text-anchor: middle; |
| 8 | -webkit-user-select: none; |
| 9 | -moz-user-select: none; |
| 10 | user-select: none; |
| 11 | } |
| 12 | |
| 13 | @media (min-width: 768px) { |
| 14 | .bd-placeholder-img-lg { |
| 15 | font-size: 3.5rem; |
| 16 | } |
| 17 | } |