mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 22:41:20 +02:00
Code Issues Releases Wiki Activity

Add example of dark navbar and offcanvas to docs (#36510)

Browse Source
This commit is contained in:
Mark Otto
2022-06-15 07:41:39 -07:00
committed by GitHub
parent ac0b87b207
commit 24d79fe74c
3 changed files with 69 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
site/content/docs/5.2/components/offcanvas.md
View File

@@ -79,6 +79,22 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
</div>
{{< /example >}}
### Dark offcanvas
Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Place offcanvas content here.</p>
</div>
</div>
{{< /example >}}
### Body scrolling
Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to enable `<body>` scrolling.