mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-02 14: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.
160 lines
7.5 KiB
HTML
160 lines
7.5 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>Offcanvas template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="offcanvas.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="bg-light">
|
|
|
|
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
|
|
<a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a>
|
|
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Notifications</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Profile</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Switch account</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">Settings</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-lg-0">
|
|
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
|
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="nav-scroller bg-white box-shadow">
|
|
<nav class="nav nav-underline">
|
|
<a class="nav-link active" href="#">Dashboard</a>
|
|
<a class="nav-link" href="#">
|
|
Friends
|
|
<span class="badge badge-pill bg-light align-text-bottom">27</span>
|
|
</a>
|
|
<a class="nav-link" href="#">Explore</a>
|
|
<a class="nav-link" href="#">Suggestions</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<main role="main" class="container">
|
|
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
|
|
<img class="mr-3" src="../../assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
|
|
<div class="lh-100">
|
|
<h6 class="mb-0 text-white lh-100">Bootstrap</h6>
|
|
<small>Since 2011</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-3 p-3 bg-white rounded box-shadow">
|
|
<h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
|
|
<div class="media text-muted pt-3">
|
|
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
|
|
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
|
<strong class="d-block text-gray-dark">@username</strong>
|
|
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
|
</p>
|
|
</div>
|
|
<div class="media text-muted pt-3">
|
|
<img data-src="holder.js/32x32?theme=thumb&bg=e83e8c&fg=e83e8c&size=1" alt="" class="mr-2 rounded">
|
|
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
|
<strong class="d-block text-gray-dark">@username</strong>
|
|
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
|
</p>
|
|
</div>
|
|
<div class="media text-muted pt-3">
|
|
<img data-src="holder.js/32x32?theme=thumb&bg=6f42c1&fg=6f42c1&size=1" alt="" class="mr-2 rounded">
|
|
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
|
<strong class="d-block text-gray-dark">@username</strong>
|
|
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
|
</p>
|
|
</div>
|
|
<small class="d-block text-right mt-3">
|
|
<a href="#">All updates</a>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="my-3 p-3 bg-white rounded box-shadow">
|
|
<h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6>
|
|
<div class="media text-muted pt-3">
|
|
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
|
|
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
|
<div class="d-flex justify-content-between align-items-center w-100">
|
|
<strong class="text-gray-dark">Full Name</strong>
|
|
<a href="#">Follow</a>
|
|
</div>
|
|
<span class="d-block">@username</span>
|
|
</div>
|
|
</div>
|
|
<div class="media text-muted pt-3">
|
|
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
|
|
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
|
<div class="d-flex justify-content-between align-items-center w-100">
|
|
<strong class="text-gray-dark">Full Name</strong>
|
|
<a href="#">Follow</a>
|
|
</div>
|
|
<span class="d-block">@username</span>
|
|
</div>
|
|
</div>
|
|
<div class="media text-muted pt-3">
|
|
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
|
|
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
|
<div class="d-flex justify-content-between align-items-center w-100">
|
|
<strong class="text-gray-dark">Full Name</strong>
|
|
<a href="#">Follow</a>
|
|
</div>
|
|
<span class="d-block">@username</span>
|
|
</div>
|
|
</div>
|
|
<small class="d-block text-right mt-3">
|
|
<a href="#">All suggestions</a>
|
|
</small>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 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>
|
|
<script src="../../assets/js/vendor/holder.min.js"></script>
|
|
<script src="offcanvas.js"></script>
|
|
</body>
|
|
</html>
|