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

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

@ -9,6 +9,7 @@ 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">
<div class="container-fluid">
<a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a> <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"> <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -42,6 +43,7 @@ body_class: "bg-light"
<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>
<div class="nav-scroller bg-white shadow-sm"> <div class="nav-scroller bg-white shadow-sm">
@ -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>