rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Fix offcanvas example. (#29909)

Browse Source
This commit is contained in:
XhmikosR 2019-12-25 14:28:26 +02:00 committed by GitHub
parent eb183caec1
commit 94e20317d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 55 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
site/content/docs/4.3/examples/offcanvas/index.html
View File

@ -9,38 +9,40 @@ body_class: "bg-light"
--- ---
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark"> <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> <div class="container-fluid">
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas"> <a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a>
<span class="navbar-toggler-icon"></span> <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
</button> <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault"> <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Notifications</a> <a class="nav-link" href="#">Notifications</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Profile</a> <a class="nav-link" href="#">Profile</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Switch account</a> <a class="nav-link" href="#">Switch account</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Settings</a> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Settings</a>
<div class="dropdown-menu" aria-labelledby="dropdown01"> <div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-lg-0"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <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> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> </form>
</div>
</div> </div>
</nav> </nav>
@ -49,7 +51,7 @@ body_class: "bg-light"
<a class="nav-link active" href="#">Dashboard</a> <a class="nav-link active" href="#">Dashboard</a>
<a class="nav-link" href="#"> <a class="nav-link" href="#">
Friends Friends
<span class="badge bg-light rounded-pill align-text-bottom">27</span> <span class="badge bg-light text-dark rounded-pill align-text-bottom">27</span>
</a> </a>
<a class="nav-link" href="#">Explore</a> <a class="nav-link" href="#">Explore</a>
<a class="nav-link" href="#">Suggestions</a> <a class="nav-link" href="#">Suggestions</a>
@ -72,23 +74,23 @@ body_class: "bg-light"
<div class="my-3 p-3 bg-white rounded shadow-sm"> <div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6> <h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
<div class="media text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<p class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray"> <p class="pb-3 mb-0 small lh-sm border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong> <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. 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> </p>
</div> </div>
<div class="media text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 mr-2 rounded" >}}
<p class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray"> <p class="pb-3 mb-0 small lh-sm border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong> <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. 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> </p>
</div> </div>
<div class="media text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 mr-2 rounded" >}}
<p class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray"> <p class="pb-3 mb-0 small lh-sm border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong> <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. 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> </p>
@ -100,30 +102,30 @@ body_class: "bg-light"
<div class="my-3 p-3 bg-white rounded shadow-sm"> <div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6> <h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6>
<div class="media text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<div class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray"> <div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100">
<div class="d-flex justify-content-between align-items-center w-100"> <div class="d-flex justify-content-between">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>
</div> </div>
<span class="d-block">@username</span> <span class="d-block">@username</span>
</div> </div>
</div> </div>
<div class="media text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<div class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray"> <div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100">
<div class="d-flex justify-content-between align-items-center w-100"> <div class="d-flex justify-content-between">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>
</div> </div>
<span class="d-block">@username</span> <span class="d-block">@username</span>
</div> </div>
</div> </div>
<div class="media text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<div class="media-body pb-3 mb-0 small lh-sm border-bottom border-gray"> <div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100">
<div class="d-flex justify-content-between align-items-center w-100"> <div class="d-flex justify-content-between">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>
</div> </div>