mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-10 22:24:19 +01:00
0e920ce3f4
With the current docs directory setup, I'm making too many mistakes and have to manually address path changes and directory moves on deploy. This makes for a frustrating experience developing locally and shipping releases. With this PR, we're basically back to the same setup from v3—duplicating the dist directory into our docs directory. Not the most ideal, but very straightforward for me as the release manager.
348 lines
16 KiB
HTML
348 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="../../../../favicon.ico">
|
|
|
|
<title>Navbar Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="navbar.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar navbar-dark bg-dark">
|
|
<a class="navbar-brand" href="#">Never expand</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExample01">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
|
<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>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline my-2 my-md-0">
|
|
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-expand navbar-dark bg-dark">
|
|
<a class="navbar-brand" href="#">Always expand</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExample02">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline my-2 my-md-0">
|
|
<input class="form-control" type="text" placeholder="Search">
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
|
|
<a class="navbar-brand" href="#">Expand at sm</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExample03">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown03">
|
|
<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>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline my-2 my-md-0">
|
|
<input class="form-control" type="text" placeholder="Search">
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
|
|
<a class="navbar-brand" href="#">Expand at md</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExample04">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown04">
|
|
<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>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline my-2 my-md-0">
|
|
<input class="form-control" type="text" placeholder="Search">
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<a class="navbar-brand" href="#">Expand at lg</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExample05">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown05" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown05">
|
|
<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>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline my-2 my-md-0">
|
|
<input class="form-control" type="text" placeholder="Search">
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
|
|
<a class="navbar-brand" href="#">Expand at xl</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExample06">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown06">
|
|
<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>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline my-2 my-md-0">
|
|
<input class="form-control" type="text" placeholder="Search">
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">Container</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExample07">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown07" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown07">
|
|
<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>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline my-2 my-md-0">
|
|
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown08">
|
|
<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>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExample09">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown09">
|
|
<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>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline my-2 my-md-0">
|
|
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown10">
|
|
<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>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<main role="main">
|
|
<div class="jumbotron">
|
|
<div class="col-sm-8 mx-auto">
|
|
<h1>Navbar examples</h1>
|
|
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-static/">top</a> and <a href="../navbar-fixed/">fixed top</a> examples.</p>
|
|
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
|
|
<p>
|
|
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
|
<script src="../../assets/js/vendor/popper.min.js"></script>
|
|
<script src="../../dist/js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html>
|