mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-16 21:18:25 +01:00
Add v5.0.0-beta3 docs (#33440)
This commit is contained in:
XhmikosR
GitHub
parent
8484574c52
commit
e2460ba2f8
8
404.html
8
404.html
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
<meta name="robots" content="noindex,follow">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -156,11 +156,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -452,11 +454,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -421,7 +423,7 @@
|
||||
<li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li>
|
||||
<li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
|
||||
</ul>
|
||||
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta2/LICENSE">in the project repository</a> for more information.</p>
|
||||
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta3/LICENSE">in the project repository</a> for more information.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -437,11 +439,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -405,7 +407,7 @@
|
||||
<p>With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.</p>
|
||||
<p>Our latest release, Bootstrap 5 (currently in development), focuses on improving v4’s codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.</p>
|
||||
<h2 id="get-involved">Get involved</h2>
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta2/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta3/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -421,11 +423,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -463,7 +465,7 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta2/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta3/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -479,11 +481,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Links to community-translated Bootstrap documentation sites.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -405,6 +407,7 @@
|
||||
<li><a href="https://getbootstrap.jp/" hreflang="ja">Bootstrap 4 日本語リファレンス (Japanese)</a></li>
|
||||
<li><a href="https://getbootstrap.su/" hreflang="ru">Bootstrap 5 на русском (Russian)</a></li>
|
||||
<li><a href="https://getbootstrap.kr/" hreflang="ko">Bootstrap 5 한국어 문서 (Korean)</a></li>
|
||||
<li><a href="https://bootstrap5.hexschool.com/" hreflang="zh-tw">Bootstrap 5 繁體中文手冊 (中文(繁體))</a></li>
|
||||
</ul>
|
||||
|
||||
<p><strong>We don’t help organize or host translations, we just link to them.</strong></p>
|
||||
@ -424,11 +427,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 12 KiB |
BIN
docs/5.0/assets/img/examples/features.png
Normal file
BIN
docs/5.0/assets/img/examples/features.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
docs/5.0/assets/img/examples/features@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/features@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 14 KiB |
BIN
docs/5.0/assets/img/examples/headers.png
Normal file
BIN
docs/5.0/assets/img/examples/headers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
docs/5.0/assets/img/examples/headers@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/headers@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/5.0/assets/img/examples/heroes.png
Normal file
BIN
docs/5.0/assets/img/examples/heroes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
docs/5.0/assets/img/examples/heroes@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/heroes@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 23 KiB |
BIN
docs/5.0/assets/img/examples/offcanvas-navbar.png
Normal file
BIN
docs/5.0/assets/img/examples/offcanvas-navbar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 13 KiB |
BIN
docs/5.0/assets/img/examples/sidebars.png
Normal file
BIN
docs/5.0/assets/img/examples/sidebars.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/5.0/assets/img/examples/sidebars@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/sidebars@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 4.2 KiB |
65
docs/5.0/assets/js/docs.min.js
vendored
65
docs/5.0/assets/js/docs.min.js
vendored
File diff suppressed because one or more lines are too long
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -403,6 +405,11 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#accessibility">Accessibility</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -565,6 +572,40 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
<p>Please read the <a href="/docs/5.0/components/collapse/#accessibility">collapse accessibility section</a> for more information.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$accordion-padding-y</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-padding-x</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-color</span><span class="o">:</span> <span class="nv">$body-color</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-bg</span><span class="o">:</span> <span class="nv">$body-bg</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.125</span><span class="p">);</span>
|
||||
<span class="nv">$accordion-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-inner-border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$accordion-border-radius</span><span class="o">,</span> <span class="nv">$accordion-border-width</span><span class="p">);</span>
|
||||
|
||||
<span class="nv">$accordion-body-padding-y</span><span class="o">:</span> <span class="nv">$accordion-padding-y</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-body-padding-x</span><span class="o">:</span> <span class="nv">$accordion-padding-x</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$accordion-button-padding-y</span><span class="o">:</span> <span class="nv">$accordion-padding-y</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-button-padding-x</span><span class="o">:</span> <span class="nv">$accordion-padding-x</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-button-color</span><span class="o">:</span> <span class="nv">$accordion-color</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-button-bg</span><span class="o">:</span> <span class="nv">$accordion-bg</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-transition</span><span class="o">:</span> <span class="nv">$btn-transition</span><span class="o">,</span> <span class="no">border</span><span class="o">-</span><span class="n">radius</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-button-active-bg</span><span class="o">:</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$component-active-bg</span><span class="o">,</span> <span class="mi">90</span><span class="kt">%</span><span class="p">);</span>
|
||||
<span class="nv">$accordion-button-active-color</span><span class="o">:</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$primary</span><span class="o">,</span> <span class="mi">10</span><span class="kt">%</span><span class="p">);</span>
|
||||
|
||||
<span class="nv">$accordion-button-focus-border-color</span><span class="o">:</span> <span class="nv">$input-focus-border-color</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-button-focus-box-shadow</span><span class="o">:</span> <span class="nv">$btn-focus-box-shadow</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$accordion-icon-width</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-icon-color</span><span class="o">:</span> <span class="nv">$accordion-color</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-icon-active-color</span><span class="o">:</span> <span class="nv">$accordion-button-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-icon-transition</span><span class="o">:</span> <span class="no">transform</span> <span class="mf">.2</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-icon-transform</span><span class="o">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="mi">180</span><span class="kt">deg</span><span class="p">);</span>
|
||||
|
||||
<span class="nv">$accordion-button-icon</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$accordion-icon-color</span><span class="si">}</span><span class="sx">'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>")</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-button-active-icon</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$accordion-icon-active-color</span><span class="si">}</span><span class="sx">'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>")</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -580,11 +621,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -403,6 +405,13 @@
|
||||
<li><a href="#dismissing">Dismissing</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#variant-mixin">Variant mixin</a></li>
|
||||
<li><a href="#loop">Loop</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#javascript-behavior">JavaScript behavior</a>
|
||||
<ul>
|
||||
<li><a href="#triggers">Triggers</a></li>
|
||||
@ -564,6 +573,47 @@
|
||||
When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the <code>closed.bs.alert</code> event and programmatically sets <code>focus()</code> to the most appropriate location in the page. If you’re planning to move focus to a non-interactive element that normally does not receive focus, make sure to add <code>tabindex="-1"</code> to the element.
|
||||
</div>
|
||||
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$alert-padding-y</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$alert-padding-x</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$alert-margin-bottom</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$alert-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$alert-link-font-weight</span><span class="o">:</span> <span class="nv">$font-weight-bold</span><span class="p">;</span>
|
||||
<span class="nv">$alert-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$alert-bg-scale</span><span class="o">:</span> <span class="mi">-80</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$alert-border-scale</span><span class="o">:</span> <span class="mi">-70</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$alert-color-scale</span><span class="o">:</span> <span class="mi">40</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$alert-dismissible-padding-r</span><span class="o">:</span> <span class="nv">$alert-padding-x</span> <span class="o">*</span> <span class="mi">3</span><span class="p">;</span> <span class="c1">// 3x covers width of x plus default padding on either side
|
||||
</span></code></pre></div>
|
||||
<h3 id="variant-mixin">Variant mixin</h3>
|
||||
<p>Used in combination with <code>$theme-colors</code> to create contextual modifier classes for our alerts.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> alert-variant</span><span class="p">(</span><span class="nv">$background</span><span class="o">,</span> <span class="nv">$border</span><span class="o">,</span> <span class="nv">$color</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> gradient-bg</span><span class="p">(</span><span class="nv">$background</span><span class="p">);</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border</span><span class="p">;</span>
|
||||
|
||||
<span class="nc">.alert-link</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="nt">shade-color</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="nt">20</span><span class="err">%</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="loop">Loop</h3>
|
||||
<p>Loop that generates the modifier classes with the <code>alert-variant()</code> mixin.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Generate contextual modifier classes for colorizing the alert.
|
||||
</span><span class="c1"></span>
|
||||
<span class="k">@each</span> <span class="err">$</span><span class="nt">state</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
|
||||
<span class="nv">$alert-background</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$alert-bg-scale</span><span class="p">);</span>
|
||||
<span class="nv">$alert-border</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$alert-border-scale</span><span class="p">);</span>
|
||||
<span class="nv">$alert-color</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$alert-color-scale</span><span class="p">);</span>
|
||||
<span class="k">@if</span> <span class="p">(</span><span class="nf">contrast-ratio</span><span class="p">(</span><span class="nv">$alert-background</span><span class="o">,</span> <span class="nv">$alert-color</span><span class="p">)</span> <span class="o"><</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nv">$alert-color</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$alert-background</span><span class="p">)</span><span class="o">,</span> <span class="nf">abs</span><span class="p">(</span><span class="nv">$alert-color-scale</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nc">.alert-</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> alert-variant</span><span class="p">(</span><span class="nv">$alert-background</span><span class="o">,</span> <span class="nv">$alert-border</span><span class="o">,</span> <span class="nv">$alert-color</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||
<h3 id="triggers">Triggers</h3>
|
||||
<p>Enable dismissal of an alert via JavaScript:</p>
|
||||
@ -661,11 +711,11 @@ When an alert is dismissed, the element is completely removed from the page stru
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -399,6 +401,11 @@
|
||||
<li><a href="#example">Example</a></li>
|
||||
<li><a href="#background-colors">Background colors</a></li>
|
||||
<li><a href="#pill-badges">Pill badges</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -486,6 +493,15 @@
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge rounded-pill bg-info text-dark"</span><span class="p">></span>Info<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge rounded-pill bg-light text-dark"</span><span class="p">></span>Light<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge rounded-pill bg-dark"</span><span class="p">></span>Dark<span class="p"></</span><span class="nt">span</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$badge-font-size</span><span class="o">:</span> <span class="mf">.75</span><span class="kt">em</span><span class="p">;</span>
|
||||
<span class="nv">$badge-font-weight</span><span class="o">:</span> <span class="nv">$font-weight-bold</span><span class="p">;</span>
|
||||
<span class="nv">$badge-color</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$badge-padding-y</span><span class="o">:</span> <span class="mf">.35</span><span class="kt">em</span><span class="p">;</span>
|
||||
<span class="nv">$badge-padding-x</span><span class="o">:</span> <span class="mf">.65</span><span class="kt">em</span><span class="p">;</span>
|
||||
<span class="nv">$badge-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -501,11 +517,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -399,6 +401,11 @@
|
||||
<li><a href="#example">Example</a></li>
|
||||
<li><a href="#dividers">Dividers</a></li>
|
||||
<li><a href="#accessibility">Accessibility</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -500,6 +507,20 @@
|
||||
</code></pre></div><h2 id="accessibility">Accessibility</h2>
|
||||
<p>Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as <code>aria-label="breadcrumb"</code> to describe the type of navigation provided in the <code><nav></code> element, as well as applying an <code>aria-current="page"</code> to the last item of the set to indicate that it represents the current page.</p>
|
||||
<p>For more information, see the <a href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb">WAI-ARIA Authoring Practices for the breadcrumb pattern</a>.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$breadcrumb-font-size</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$breadcrumb-padding-y</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="nv">$breadcrumb-padding-x</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="nv">$breadcrumb-item-padding-x</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$breadcrumb-margin-bottom</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$breadcrumb-bg</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$breadcrumb-divider-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
<span class="nv">$breadcrumb-active-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
<span class="nv">$breadcrumb-divider</span><span class="o">:</span> <span class="nf">quote</span><span class="p">(</span><span class="s2">"/"</span><span class="p">);</span>
|
||||
<span class="nv">$breadcrumb-divider-flipped</span><span class="o">:</span> <span class="nv">$breadcrumb-divider</span><span class="p">;</span>
|
||||
<span class="nv">$breadcrumb-border-radius</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -515,11 +536,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Group a series of buttons together on a single line or stack them in a vertical column.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -738,11 +740,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -409,6 +411,13 @@
|
||||
<li><a href="#methods">Methods</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#mixins">Mixins</a></li>
|
||||
<li><a href="#loops">Loops</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -620,7 +629,192 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
|
||||
<span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Button</span><span class="p">(</span><span class="nx">button</span><span class="p">)</span>
|
||||
<span class="nx">button</span><span class="p">.</span><span class="nx">toggle</span><span class="p">()</span>
|
||||
<span class="p">})</span>
|
||||
</code></pre></div><h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$btn-padding-y</span><span class="o">:</span> <span class="nv">$input-btn-padding-y</span><span class="p">;</span>
|
||||
<span class="nv">$btn-padding-x</span><span class="o">:</span> <span class="nv">$input-btn-padding-x</span><span class="p">;</span>
|
||||
<span class="nv">$btn-font-family</span><span class="o">:</span> <span class="nv">$input-btn-font-family</span><span class="p">;</span>
|
||||
<span class="nv">$btn-font-size</span><span class="o">:</span> <span class="nv">$input-btn-font-size</span><span class="p">;</span>
|
||||
<span class="nv">$btn-line-height</span><span class="o">:</span> <span class="nv">$input-btn-line-height</span><span class="p">;</span>
|
||||
<span class="nv">$btn-white-space</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span> <span class="c1">// Set to `nowrap` to prevent text wrapping
|
||||
</span><span class="c1"></span>
|
||||
<span class="nv">$btn-padding-y-sm</span><span class="o">:</span> <span class="nv">$input-btn-padding-y-sm</span><span class="p">;</span>
|
||||
<span class="nv">$btn-padding-x-sm</span><span class="o">:</span> <span class="nv">$input-btn-padding-x-sm</span><span class="p">;</span>
|
||||
<span class="nv">$btn-font-size-sm</span><span class="o">:</span> <span class="nv">$input-btn-font-size-sm</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$btn-padding-y-lg</span><span class="o">:</span> <span class="nv">$input-btn-padding-y-lg</span><span class="p">;</span>
|
||||
<span class="nv">$btn-padding-x-lg</span><span class="o">:</span> <span class="nv">$input-btn-padding-x-lg</span><span class="p">;</span>
|
||||
<span class="nv">$btn-font-size-lg</span><span class="o">:</span> <span class="nv">$input-btn-font-size-lg</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$btn-border-width</span><span class="o">:</span> <span class="nv">$input-btn-border-width</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$btn-font-weight</span><span class="o">:</span> <span class="nv">$font-weight-normal</span><span class="p">;</span>
|
||||
<span class="nv">$btn-box-shadow</span><span class="o">:</span> <span class="no">inset</span> <span class="mi">0</span> <span class="mi">1</span><span class="kt">px</span> <span class="mi">0</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.15</span><span class="p">)</span><span class="o">,</span> <span class="mi">0</span> <span class="mi">1</span><span class="kt">px</span> <span class="mi">1</span><span class="kt">px</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.075</span><span class="p">);</span>
|
||||
<span class="nv">$btn-focus-width</span><span class="o">:</span> <span class="nv">$input-btn-focus-width</span><span class="p">;</span>
|
||||
<span class="nv">$btn-focus-box-shadow</span><span class="o">:</span> <span class="nv">$input-btn-focus-box-shadow</span><span class="p">;</span>
|
||||
<span class="nv">$btn-disabled-opacity</span><span class="o">:</span> <span class="mf">.65</span><span class="p">;</span>
|
||||
<span class="nv">$btn-active-box-shadow</span><span class="o">:</span> <span class="no">inset</span> <span class="mi">0</span> <span class="mi">3</span><span class="kt">px</span> <span class="mi">5</span><span class="kt">px</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.125</span><span class="p">);</span>
|
||||
|
||||
<span class="nv">$btn-link-color</span><span class="o">:</span> <span class="nv">$link-color</span><span class="p">;</span>
|
||||
<span class="nv">$btn-link-hover-color</span><span class="o">:</span> <span class="nv">$link-hover-color</span><span class="p">;</span>
|
||||
<span class="nv">$btn-link-disabled-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// Allows for customizing button radius independently from global border radius
|
||||
</span><span class="c1"></span><span class="nv">$btn-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$btn-border-radius-sm</span><span class="o">:</span> <span class="nv">$border-radius-sm</span><span class="p">;</span>
|
||||
<span class="nv">$btn-border-radius-lg</span><span class="o">:</span> <span class="nv">$border-radius-lg</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$btn-transition</span><span class="o">:</span> <span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">background</span><span class="o">-</span><span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">border</span><span class="o">-</span><span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">box-shadow</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$btn-hover-bg-shade-amount</span><span class="o">:</span> <span class="mi">15</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$btn-hover-bg-tint-amount</span><span class="o">:</span> <span class="mi">15</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$btn-hover-border-shade-amount</span><span class="o">:</span> <span class="mi">20</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$btn-hover-border-tint-amount</span><span class="o">:</span> <span class="mi">10</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$btn-active-bg-shade-amount</span><span class="o">:</span> <span class="mi">20</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$btn-active-bg-tint-amount</span><span class="o">:</span> <span class="mi">20</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$btn-active-border-shade-amount</span><span class="o">:</span> <span class="mi">25</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$btn-active-border-tint-amount</span><span class="o">:</span> <span class="mi">10</span><span class="kt">%</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="mixins">Mixins</h3>
|
||||
<p>There are three mixins for buttons: button and button outline variant mixins (both based on <code>$theme-colors</code>), plus a button size mixin.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> button-variant</span><span class="p">(</span>
|
||||
<span class="nv">$background</span><span class="o">,</span>
|
||||
<span class="nv">$border</span><span class="o">,</span>
|
||||
<span class="nv">$color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$background</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="nv">$hover-background</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$color</span> <span class="o">==</span> <span class="nv">$color-contrast-light</span><span class="o">,</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$background</span><span class="o">,</span> <span class="nv">$btn-hover-bg-shade-amount</span><span class="p">)</span><span class="o">,</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$background</span><span class="o">,</span> <span class="nv">$btn-hover-bg-tint-amount</span><span class="p">))</span><span class="o">,</span>
|
||||
<span class="nv">$hover-border</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$color</span> <span class="o">==</span> <span class="nv">$color-contrast-light</span><span class="o">,</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$border</span><span class="o">,</span> <span class="nv">$btn-hover-border-shade-amount</span><span class="p">)</span><span class="o">,</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$border</span><span class="o">,</span> <span class="nv">$btn-hover-border-tint-amount</span><span class="p">))</span><span class="o">,</span>
|
||||
<span class="nv">$hover-color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$hover-background</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="nv">$active-background</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$color</span> <span class="o">==</span> <span class="nv">$color-contrast-light</span><span class="o">,</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$background</span><span class="o">,</span><span class="nv">$btn-active-bg-shade-amount</span><span class="p">)</span><span class="o">,</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$background</span><span class="o">,</span> <span class="nv">$btn-active-bg-tint-amount</span><span class="p">))</span><span class="o">,</span>
|
||||
<span class="nv">$active-border</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$color</span> <span class="o">==</span> <span class="nv">$color-contrast-light</span><span class="o">,</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$border</span><span class="o">,</span> <span class="nv">$btn-active-border-shade-amount</span><span class="p">)</span><span class="o">,</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$border</span><span class="o">,</span> <span class="nv">$btn-active-border-tint-amount</span><span class="p">))</span><span class="o">,</span>
|
||||
<span class="nv">$active-color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$active-background</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="nv">$disabled-background</span><span class="o">:</span> <span class="nv">$background</span><span class="o">,</span>
|
||||
<span class="nv">$disabled-border</span><span class="o">:</span> <span class="nv">$border</span><span class="o">,</span>
|
||||
<span class="nv">$disabled-color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$disabled-background</span><span class="p">)</span>
|
||||
<span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> gradient-bg</span><span class="p">(</span><span class="nv">$background</span><span class="p">);</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> box-shadow</span><span class="p">(</span><span class="nv">$btn-box-shadow</span><span class="p">);</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">hover-color</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> gradient-bg</span><span class="p">(</span><span class="nv">$hover-background</span><span class="p">);</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">hover-border</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.btn-check</span><span class="nd">:focus</span> <span class="o">+</span> <span class="k">&</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nd">:focus</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">hover-color</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> gradient-bg</span><span class="p">(</span><span class="nv">$hover-background</span><span class="p">);</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">hover-border</span><span class="p">;</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-shadows</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> box-shadow</span><span class="p">(</span><span class="nv">$btn-box-shadow</span><span class="o">,</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mi">0</span> <span class="nv">$btn-focus-width</span> <span class="nf">rgba</span><span class="p">(</span><span class="nf">mix</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$border</span><span class="o">,</span> <span class="mi">15</span><span class="kt">%</span><span class="p">)</span><span class="o">,</span> <span class="mf">.5</span><span class="p">));</span>
|
||||
<span class="p">}</span> <span class="k">@else</span> <span class="p">{</span>
|
||||
<span class="c1">// Avoid using mixin so we can pass custom focus shadow properly
|
||||
</span><span class="c1"></span> <span class="nt">box-shadow</span><span class="nd">:</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">0</span> <span class="err">$</span><span class="nt">btn-focus-width</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">mix</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">border</span><span class="o">,</span> <span class="nt">15</span><span class="err">%</span><span class="o">),</span> <span class="nc">.5</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.btn-check</span><span class="nd">:checked</span> <span class="o">+</span> <span class="k">&</span><span class="o">,</span>
|
||||
<span class="nc">.btn-check</span><span class="nd">:active</span> <span class="o">+</span> <span class="k">&</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nd">:active</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nc">.active</span><span class="o">,</span>
|
||||
<span class="nc">.show</span> <span class="o">></span> <span class="k">&</span><span class="nc">.dropdown-toggle</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-background</span><span class="p">;</span>
|
||||
<span class="c1">// Remove CSS gradients if they're enabled
|
||||
</span><span class="c1"></span> <span class="nt">background-image</span><span class="nd">:</span> <span class="nt">if</span><span class="o">(</span><span class="err">$</span><span class="nt">enable-gradients</span><span class="o">,</span> <span class="nt">none</span><span class="o">,</span> <span class="nt">null</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-border</span><span class="p">;</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">:focus</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-shadows</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> box-shadow</span><span class="p">(</span><span class="nv">$btn-active-box-shadow</span><span class="o">,</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mi">0</span> <span class="nv">$btn-focus-width</span> <span class="nf">rgba</span><span class="p">(</span><span class="nf">mix</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$border</span><span class="o">,</span> <span class="mi">15</span><span class="kt">%</span><span class="p">)</span><span class="o">,</span> <span class="mf">.5</span><span class="p">));</span>
|
||||
<span class="p">}</span> <span class="k">@else</span> <span class="p">{</span>
|
||||
<span class="c1">// Avoid using mixin so we can pass custom focus shadow properly
|
||||
</span><span class="c1"></span> <span class="nt">box-shadow</span><span class="nd">:</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">0</span> <span class="err">$</span><span class="nt">btn-focus-width</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">mix</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">border</span><span class="o">,</span> <span class="nt">15</span><span class="err">%</span><span class="o">),</span> <span class="nc">.5</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">:disabled</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nc">.disabled</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">disabled-color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">disabled-background</span><span class="p">;</span>
|
||||
<span class="c1">// Remove CSS gradients if they're enabled
|
||||
</span><span class="c1"></span> <span class="nt">background-image</span><span class="nd">:</span> <span class="nt">if</span><span class="o">(</span><span class="err">$</span><span class="nt">enable-gradients</span><span class="o">,</span> <span class="nt">none</span><span class="o">,</span> <span class="nt">null</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">disabled-border</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> button-outline-variant</span><span class="p">(</span>
|
||||
<span class="nv">$color</span><span class="o">,</span>
|
||||
<span class="nv">$color-hover</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$color</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="nv">$active-background</span><span class="o">:</span> <span class="nv">$color</span><span class="o">,</span>
|
||||
<span class="nv">$active-border</span><span class="o">:</span> <span class="nv">$color</span><span class="o">,</span>
|
||||
<span class="nv">$active-color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$active-background</span><span class="p">)</span>
|
||||
<span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color-hover</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-background</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-border</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.btn-check</span><span class="nd">:focus</span> <span class="o">+</span> <span class="k">&</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nd">:focus</span> <span class="p">{</span>
|
||||
<span class="nt">box-shadow</span><span class="nd">:</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">0</span> <span class="err">$</span><span class="nt">btn-focus-width</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="nc">.5</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.btn-check</span><span class="nd">:checked</span> <span class="o">+</span> <span class="k">&</span><span class="o">,</span>
|
||||
<span class="nc">.btn-check</span><span class="nd">:active</span> <span class="o">+</span> <span class="k">&</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nd">:active</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nc">.active</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nc">.dropdown-toggle.show</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-background</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-border</span><span class="p">;</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">:focus</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-shadows</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> box-shadow</span><span class="p">(</span><span class="nv">$btn-active-box-shadow</span><span class="o">,</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mi">0</span> <span class="nv">$btn-focus-width</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="mf">.5</span><span class="p">));</span>
|
||||
<span class="p">}</span> <span class="k">@else</span> <span class="p">{</span>
|
||||
<span class="c1">// Avoid using mixin so we can pass custom focus shadow properly
|
||||
</span><span class="c1"></span> <span class="nt">box-shadow</span><span class="nd">:</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">0</span> <span class="err">$</span><span class="nt">btn-focus-width</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="nc">.5</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">:disabled</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nc">.disabled</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> button-size</span><span class="p">(</span><span class="nv">$padding-y</span><span class="o">,</span> <span class="nv">$padding-x</span><span class="o">,</span> <span class="nv">$font-size</span><span class="o">,</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">padding</span><span class="nd">:</span> <span class="err">$</span><span class="nt">padding-y</span> <span class="err">$</span><span class="nt">padding-x</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> font-size</span><span class="p">(</span><span class="nv">$font-size</span><span class="p">);</span>
|
||||
<span class="c1">// Manually declare to provide an override to the browser default
|
||||
</span><span class="c1"></span> <span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="nv">$border-radius</span><span class="o">,</span> <span class="mi">0</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="loops">Loops</h3>
|
||||
<p>Button variants (for regular and outline buttons) use their respective mixins with our <code>$theme-colors</code> map to generate the modifier classes in <code>scss/_buttons.scss</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
|
||||
<span class="nc">.btn-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> button-variant</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@each</span> <span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
|
||||
<span class="nc">.btn-outline-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> button-outline-variant</span><span class="p">(</span><span class="nv">$value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@ -635,11 +829,11 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -438,6 +440,11 @@
|
||||
<li><a href="#masonry">Masonry</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -1748,6 +1755,25 @@ Note that content should not be larger than the height of the image. If content
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="masonry">Masonry</h3>
|
||||
<p>In <code>v4</code> we used a CSS-only technique to mimic the behavior of <a href="https://masonry.desandro.com/">Masonry</a>-like columns, but this technique came with lots of unpleasant <a href="https://github.com/twbs/bootstrap/pull/28922">side effects</a>. If you want to have this type of layout in <code>v5</code>, you can just make use of Masonry plugin. <strong>Masonry is not included in Bootstrap</strong>, but we’ve made a <a href="/docs/5.0/examples/masonry/">demo example</a> to help you get started.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$card-spacer-y</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$card-spacer-x</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$card-title-spacer-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$card-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$card-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$card-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.125</span><span class="p">);</span>
|
||||
<span class="nv">$card-inner-border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$card-border-radius</span><span class="o">,</span> <span class="nv">$card-border-width</span><span class="p">);</span>
|
||||
<span class="nv">$card-cap-padding-y</span><span class="o">:</span> <span class="nv">$card-spacer-y</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$card-cap-padding-x</span><span class="o">:</span> <span class="nv">$card-spacer-x</span><span class="p">;</span>
|
||||
<span class="nv">$card-cap-bg</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.03</span><span class="p">);</span>
|
||||
<span class="nv">$card-cap-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$card-height</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$card-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$card-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$card-img-overlay-padding</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$card-group-margin</span><span class="o">:</span> <span class="nv">$grid-gutter-width</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -1763,11 +1789,11 @@ Note that content should not be larger than the height of the image. If content
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -409,6 +411,12 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#dark-variant">Dark variant</a></li>
|
||||
<li><a href="#custom-transition">Custom transition</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li><a href="#via-data-attributes">Via data attributes</a></li>
|
||||
@ -416,7 +424,6 @@
|
||||
<li><a href="#options">Options</a></li>
|
||||
<li><a href="#methods">Methods</a></li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
<li><a href="#change-transition-duration">Change transition duration</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -488,11 +495,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
@ -509,11 +516,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleControls"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleControls"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleControls"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleControls"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
@ -541,11 +548,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
@ -567,11 +574,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
@ -611,11 +618,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
@ -649,11 +656,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
@ -676,11 +683,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
@ -697,11 +704,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleFade"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleFade"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleFade"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleFade"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
@ -724,11 +731,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
@ -745,11 +752,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleInterval"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleInterval"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleInterval"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleInterval"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
@ -837,11 +844,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
@ -875,15 +882,51 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleDark"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleDark"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleDark"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleDark"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="custom-transition">Custom transition</h2>
|
||||
<p>The transition duration of <code>.carousel-item</code> can be changed with the <code>$carousel-transition-duration</code> Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. <code>transition: transform 2s ease, opacity .5s ease-out</code>).</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$carousel-control-color</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-control-width</span><span class="o">:</span> <span class="mi">15</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-control-opacity</span><span class="o">:</span> <span class="mf">.5</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-control-hover-opacity</span><span class="o">:</span> <span class="mf">.9</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-control-transition</span><span class="o">:</span> <span class="no">opacity</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$carousel-indicator-width</span><span class="o">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-indicator-height</span><span class="o">:</span> <span class="mi">3</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-indicator-hit-area-height</span><span class="o">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-indicator-spacer</span><span class="o">:</span> <span class="mi">3</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-indicator-opacity</span><span class="o">:</span> <span class="mf">.5</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-indicator-active-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-indicator-active-opacity</span><span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-indicator-transition</span><span class="o">:</span> <span class="no">opacity</span> <span class="mf">.6</span><span class="kt">s</span> <span class="n">ease</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$carousel-caption-width</span><span class="o">:</span> <span class="mi">70</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-caption-color</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-caption-padding-y</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-caption-spacer</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$carousel-control-icon-width</span><span class="o">:</span> <span class="mi">2</span><span class="kt">rem</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$carousel-control-prev-icon-bg</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$carousel-control-color</span><span class="si">}</span><span class="sx">'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>")</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-control-next-icon-bg</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$carousel-control-color</span><span class="si">}</span><span class="sx">'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>")</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$carousel-transition-duration</span><span class="o">:</span> <span class="mf">.6</span><span class="kt">s</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-transition</span><span class="o">:</span> <span class="no">transform</span> <span class="nv">$carousel-transition-duration</span> <span class="n">ease-in-out</span><span class="p">;</span> <span class="c1">// Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
||||
</span><span class="c1"></span>
|
||||
<span class="nv">$carousel-dark-indicator-active-bg</span><span class="o">:</span> <span class="nv">$black</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-dark-caption-color</span><span class="o">:</span> <span class="nv">$black</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-dark-control-icon-filter</span><span class="o">:</span> <span class="nf">invert</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="nf">grayscale</span><span class="p">(</span><span class="mi">100</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
<p>Use data attributes to easily control the position of the carousel. <code>data-bs-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-bs-slide-to</code> to pass a raw slide index to the carousel <code>data-bs-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p>
|
||||
@ -1031,9 +1074,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="nx">myCarousel</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'slide.bs.carousel'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// do something...
|
||||
</span><span class="c1"></span><span class="p">})</span>
|
||||
</code></pre></div><h3 id="change-transition-duration">Change transition duration</h3>
|
||||
<p>The transition duration of <code>.carousel-item</code> can be changed with the <code>$carousel-transition-duration</code> Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. <code>transition: transform 2s ease, opacity .5s ease-out</code>).</p>
|
||||
|
||||
</code></pre></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@ -1048,11 +1089,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="A generic close button for dismissing content like modals and alerts.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -399,6 +401,11 @@
|
||||
<li><a href="#example">Example</a></li>
|
||||
<li><a href="#disabled-state">Disabled state</a></li>
|
||||
<li><a href="#white-variant">White variant</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -424,6 +431,21 @@
|
||||
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close btn-close-white"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close btn-close-white"</span> <span class="na">disabled</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$btn-close-width</span><span class="o">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
|
||||
<span class="nv">$btn-close-height</span><span class="o">:</span> <span class="nv">$btn-close-width</span><span class="p">;</span>
|
||||
<span class="nv">$btn-close-padding-x</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">em</span><span class="p">;</span>
|
||||
<span class="nv">$btn-close-padding-y</span><span class="o">:</span> <span class="nv">$btn-close-padding-x</span><span class="p">;</span>
|
||||
<span class="nv">$btn-close-color</span><span class="o">:</span> <span class="nv">$black</span><span class="p">;</span>
|
||||
<span class="nv">$btn-close-bg</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$btn-close-color</span><span class="si">}</span><span class="sx">'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>")</span><span class="p">;</span>
|
||||
<span class="nv">$btn-close-focus-shadow</span><span class="o">:</span> <span class="nv">$input-btn-focus-box-shadow</span><span class="p">;</span>
|
||||
<span class="nv">$btn-close-opacity</span><span class="o">:</span> <span class="mf">.5</span><span class="p">;</span>
|
||||
<span class="nv">$btn-close-hover-opacity</span><span class="o">:</span> <span class="mf">.75</span><span class="p">;</span>
|
||||
<span class="nv">$btn-close-focus-opacity</span><span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
|
||||
<span class="nv">$btn-close-disabled-opacity</span><span class="o">:</span> <span class="mf">.25</span><span class="p">;</span>
|
||||
<span class="nv">$btn-close-white-filter</span><span class="o">:</span> <span class="nf">invert</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="nf">grayscale</span><span class="p">(</span><span class="mi">100</span><span class="kt">%</span><span class="p">)</span> <span class="nf">brightness</span><span class="p">(</span><span class="mi">200</span><span class="kt">%</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -439,11 +461,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -400,6 +402,12 @@
|
||||
<li><a href="#example">Example</a></li>
|
||||
<li><a href="#multiple-targets">Multiple targets</a></li>
|
||||
<li><a href="#accessibility">Accessibility</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#classes">Classes</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li><a href="#via-data-attributes">Via data attributes</a></li>
|
||||
@ -508,6 +516,24 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
<p>Be sure to add <code>aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code>aria-expanded="false"</code>. If you’ve set the collapsible element to be open by default using the <code>show</code> class, set <code>aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an <code><a></code> or <code><div></code>), the attribute <code>role="button"</code> should be added to the element.</p>
|
||||
<p>If your control element is targeting a single collapsible element – i.e. the <code>data-bs-target</code> attribute is pointing to an <code>id</code> selector – you should add the <code>aria-controls</code> attribute to the control element, containing the <code>id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
|
||||
<p>Note that Bootstrap’s current implementation does not cover the various <em>optional</em> keyboard interactions described in the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#accordion">WAI-ARIA Authoring Practices 1.1 accordion pattern</a> - you will need to include these yourself with custom JavaScript.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$transition-collapse</span><span class="o">:</span> <span class="no">height</span> <span class="mf">.35</span><span class="kt">s</span> <span class="n">ease</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="classes">Classes</h3>
|
||||
<p>Collapse transition classes can be found in <code>scss/_transitions.scss</code> as these are shared across multiple components (collapse and accordion).</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.collapse</span> <span class="p">{</span>
|
||||
<span class="k">&</span><span class="nd">:not</span><span class="o">(</span><span class="nc">.show</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.collapsing</span> <span class="p">{</span>
|
||||
<span class="nt">height</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="nt">overflow</span><span class="nd">:</span> <span class="nt">hidden</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> transition</span><span class="p">(</span><span class="nv">$transition-collapse</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>The collapse plugin utilizes a few classes to handle the heavy lifting:</p>
|
||||
<ul>
|
||||
@ -642,11 +668,11 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -434,6 +436,12 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#dropdown-options">Dropdown options</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#mixins">Mixins</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li><a href="#via-data-attributes">Via data attributes</a></li>
|
||||
@ -457,7 +465,7 @@
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is <a href="https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision</a>.</p>
|
||||
<p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
|
||||
<p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
<p>The <a href="https://www.w3.org/TR/wai-aria/"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> standard defines an actual <a href="https://www.w3.org/WAI/PF/aria/roles#menu"><code>role="menu"</code> widget</a>, but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.</p>
|
||||
<p>Bootstrap’s dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the <code>role</code> and <code>aria-</code> attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.</p>
|
||||
@ -1507,6 +1515,123 @@
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<p>Variables for all dropdowns:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$dropdown-min-width</span><span class="o">:</span> <span class="mi">10</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-padding-x</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-padding-y</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-spacer</span><span class="o">:</span> <span class="mf">.125</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-color</span><span class="o">:</span> <span class="nv">$body-color</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.15</span><span class="p">);</span>
|
||||
<span class="nv">$dropdown-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-inner-border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$dropdown-border-radius</span><span class="o">,</span> <span class="nv">$dropdown-border-width</span><span class="p">);</span>
|
||||
<span class="nv">$dropdown-divider-bg</span><span class="o">:</span> <span class="nv">$dropdown-border-color</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-divider-margin-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-box-shadow</span><span class="o">:</span> <span class="nv">$box-shadow</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$dropdown-link-color</span><span class="o">:</span> <span class="nv">$gray-900</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-link-hover-color</span><span class="o">:</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$gray-900</span><span class="o">,</span> <span class="mi">10</span><span class="kt">%</span><span class="p">);</span>
|
||||
<span class="nv">$dropdown-link-hover-bg</span><span class="o">:</span> <span class="nv">$gray-200</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$dropdown-link-active-color</span><span class="o">:</span> <span class="nv">$component-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-link-active-bg</span><span class="o">:</span> <span class="nv">$component-active-bg</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$dropdown-link-disabled-color</span><span class="o">:</span> <span class="nv">$gray-500</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$dropdown-item-padding-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">4</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-item-padding-x</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$dropdown-header-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-header-padding</span><span class="o">:</span> <span class="nv">$dropdown-padding-y</span> <span class="nv">$dropdown-item-padding-x</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>Variables for the <a href="#dark-dropdowns">dark dropdown</a>:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$dropdown-dark-color</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-dark-bg</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-dark-border-color</span><span class="o">:</span> <span class="nv">$dropdown-border-color</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-dark-divider-bg</span><span class="o">:</span> <span class="nv">$dropdown-divider-bg</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-dark-box-shadow</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-dark-link-color</span><span class="o">:</span> <span class="nv">$dropdown-dark-color</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-dark-link-hover-color</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-dark-link-hover-bg</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.15</span><span class="p">);</span>
|
||||
<span class="nv">$dropdown-dark-link-active-color</span><span class="o">:</span> <span class="nv">$dropdown-link-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-dark-link-active-bg</span><span class="o">:</span> <span class="nv">$dropdown-link-active-bg</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-dark-link-disabled-color</span><span class="o">:</span> <span class="nv">$gray-500</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-dark-header-color</span><span class="o">:</span> <span class="nv">$gray-500</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>Variables for the CSS-based carets that indicate a dropdown’s interactivity:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$caret-width</span><span class="o">:</span> <span class="mf">.3</span><span class="kt">em</span><span class="p">;</span>
|
||||
<span class="nv">$caret-vertical-align</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="o">*</span> <span class="mf">.85</span><span class="p">;</span>
|
||||
<span class="nv">$caret-spacing</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="o">*</span> <span class="mf">.85</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="mixins">Mixins</h3>
|
||||
<p>Mixins are used to generate the CSS-based carets and can be found in <code>scss/mixins/_caret.scss</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> caret-down</span> <span class="p">{</span>
|
||||
<span class="nt">border-top</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span><span class="p">;</span>
|
||||
<span class="nt">border-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="nt">border-bottom</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="nt">border-left</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> caret-up</span> <span class="p">{</span>
|
||||
<span class="nt">border-top</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="nt">border-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="nt">border-bottom</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span><span class="p">;</span>
|
||||
<span class="nt">border-left</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> caret-end</span> <span class="p">{</span>
|
||||
<span class="nt">border-top</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="nt">border-right</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="nt">border-bottom</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="nt">border-left</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> caret-start</span> <span class="p">{</span>
|
||||
<span class="nt">border-top</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="nt">border-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span><span class="p">;</span>
|
||||
<span class="nt">border-bottom</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> caret</span><span class="p">(</span><span class="nv">$direction</span><span class="o">:</span> <span class="n">down</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-caret</span> <span class="p">{</span>
|
||||
<span class="k">&</span><span class="nd">::after</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">inline-block</span><span class="p">;</span>
|
||||
<span class="nt">margin-left</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-spacing</span><span class="p">;</span>
|
||||
<span class="nt">vertical-align</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-vertical-align</span><span class="p">;</span>
|
||||
<span class="nt">content</span><span class="nd">:</span> <span class="s2">""</span><span class="p">;</span>
|
||||
<span class="k">@if</span> <span class="nv">$direction</span> <span class="o">==</span> <span class="n">down</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> caret-down</span><span class="p">();</span>
|
||||
<span class="p">}</span> <span class="k">@else</span> <span class="nt">if</span> <span class="err">$</span><span class="nt">direction</span> <span class="o">==</span> <span class="nt">up</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> caret-up</span><span class="p">();</span>
|
||||
<span class="p">}</span> <span class="k">@else</span> <span class="nt">if</span> <span class="err">$</span><span class="nt">direction</span> <span class="o">==</span> <span class="nt">end</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> caret-end</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@if</span> <span class="nv">$direction</span> <span class="o">==</span> <span class="n">start</span> <span class="p">{</span>
|
||||
<span class="k">&</span><span class="nd">::after</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">::before</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">inline-block</span><span class="p">;</span>
|
||||
<span class="nt">margin-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-spacing</span><span class="p">;</span>
|
||||
<span class="nt">vertical-align</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-vertical-align</span><span class="p">;</span>
|
||||
<span class="nt">content</span><span class="nd">:</span> <span class="s2">""</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> caret-start</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">:empty::after</span> <span class="p">{</span>
|
||||
<span class="nt">margin-left</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.show</code> class on the parent <code>.dropdown-menu</code>. The <code>data-bs-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.</p>
|
||||
<div class="bd-callout bd-callout-info">
|
||||
@ -1546,12 +1671,6 @@ On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> h
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>flip</code></td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/">flip docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>boundary</code></td>
|
||||
<td>string | element</td>
|
||||
@ -1709,11 +1828,11 @@ On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> h
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -401,11 +403,19 @@
|
||||
<li><a href="#disabled-items">Disabled items</a></li>
|
||||
<li><a href="#links-and-buttons">Links and buttons</a></li>
|
||||
<li><a href="#flush">Flush</a></li>
|
||||
<li><a href="#numbered">Numbered</a></li>
|
||||
<li><a href="#horizontal">Horizontal</a></li>
|
||||
<li><a href="#contextual-classes">Contextual classes</a></li>
|
||||
<li><a href="#with-badges">With badges</a></li>
|
||||
<li><a href="#custom-content">Custom content</a></li>
|
||||
<li><a href="#checkboxes-and-radios">Checkboxes and radios</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#mixins">Mixins</a></li>
|
||||
<li><a href="#loop">Loop</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#javascript-behavior">JavaScript behavior</a>
|
||||
<ul>
|
||||
<li><a href="#using-data-attributes">Using data attributes</a></li>
|
||||
@ -540,6 +550,68 @@
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>A fourth item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>And a fifth one<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="numbered">Numbered</h2>
|
||||
<p>Add the <code>.list-group-numbered</code> modifier class (and optionally use an <code><ol></code> element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <code><ol></code>s default browser styling) for better placement inside list group items and to allow for better customization.</p>
|
||||
<p>Numbers are generated by <code>counter-reset</code> on the <code><ol></code>, and then styled and placed with a <code>::before</code> psuedo-element on the <code><li></code> with <code>counter-increment</code> and <code>content</code>.</p>
|
||||
<div class="bd-example">
|
||||
<ol class="list-group list-group-numbered">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
</ol>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group list-group-numbered"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ol</span><span class="p">></span></code></pre></div>
|
||||
<p>These work great with custom content as well.</p>
|
||||
<div class="bd-example">
|
||||
<ol class="list-group list-group-numbered">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Cras justo odio
|
||||
</div>
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Cras justo odio
|
||||
</div>
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Cras justo odio
|
||||
</div>
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group list-group-numbered"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item d-flex justify-content-between align-items-start"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"ms-2 me-auto"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"fw-bold"</span><span class="p">></span>Subheading<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
Cras justo odio
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-primary rounded-pill"</span><span class="p">></span>14<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item d-flex justify-content-between align-items-start"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"ms-2 me-auto"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"fw-bold"</span><span class="p">></span>Subheading<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
Cras justo odio
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-primary rounded-pill"</span><span class="p">></span>14<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item d-flex justify-content-between align-items-start"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"ms-2 me-auto"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"fw-bold"</span><span class="p">></span>Subheading<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
Cras justo odio
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-primary rounded-pill"</span><span class="p">></span>14<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ol</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="horizontal">Horizontal</h2>
|
||||
<p>Add <code>.list-group-horizontal</code> to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant <code>.list-group-horizontal-{sm|md|lg|xl|xxl}</code> to make a list group horizontal starting at that breakpoint’s <code>min-width</code>. Currently <strong>horizontal list groups cannot be combined with flush list groups.</strong></p>
|
||||
<p><strong>ProTip:</strong> Want equal-width list group items when horizontal? Add <code>.flex-fill</code> to each list group item.</p>
|
||||
@ -842,6 +914,73 @@
|
||||
Fifth checkbox
|
||||
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$list-group-color</span><span class="o">:</span> <span class="nv">$gray-900</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.125</span><span class="p">);</span>
|
||||
<span class="nv">$list-group-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$list-group-item-padding-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-item-padding-x</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-item-bg-scale</span><span class="o">:</span> <span class="mi">-80</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-item-color-scale</span><span class="o">:</span> <span class="mi">40</span><span class="kt">%</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$list-group-hover-bg</span><span class="o">:</span> <span class="nv">$gray-100</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-active-color</span><span class="o">:</span> <span class="nv">$component-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-active-bg</span><span class="o">:</span> <span class="nv">$component-active-bg</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-active-border-color</span><span class="o">:</span> <span class="nv">$list-group-active-bg</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$list-group-disabled-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-disabled-bg</span><span class="o">:</span> <span class="nv">$list-group-bg</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$list-group-action-color</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-action-hover-color</span><span class="o">:</span> <span class="nv">$list-group-action-color</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$list-group-action-active-color</span><span class="o">:</span> <span class="nv">$body-color</span><span class="p">;</span>
|
||||
<span class="nv">$list-group-action-active-bg</span><span class="o">:</span> <span class="nv">$gray-200</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="mixins">Mixins</h3>
|
||||
<p>Used in combination with <code>$theme-colors</code> to generate the <a href="#contextual-classes">contextual variant classes</a> for <code>.list-group-item</code>s.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> list-group-item-variant</span><span class="p">(</span><span class="nv">$state</span><span class="o">,</span> <span class="nv">$background</span><span class="o">,</span> <span class="nv">$color</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nc">.list-group-item-</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">background</span><span class="p">;</span>
|
||||
|
||||
<span class="k">&</span><span class="nc">.list-group-item-action</span> <span class="p">{</span>
|
||||
<span class="k">&</span><span class="nd">:hover</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nd">:focus</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="nt">shade-color</span><span class="o">(</span><span class="err">$</span><span class="nt">background</span><span class="o">,</span> <span class="nt">10</span><span class="err">%</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">&</span><span class="nc">.active</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">white</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="loop">Loop</h3>
|
||||
<p>Loop that generates the modifier classes with the <code>list-group-item-variant()</code> mixin.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// List group contextual variants
|
||||
</span><span class="c1">//
|
||||
</span><span class="c1">// Add modifier classes to change text and background color on individual items.
|
||||
</span><span class="c1">// Organizationally, this must come after the `:hover` states.
|
||||
</span><span class="c1"></span>
|
||||
<span class="k">@each</span> <span class="err">$</span><span class="nt">state</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
|
||||
<span class="nv">$list-group-background</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-bg-scale</span><span class="p">);</span>
|
||||
<span class="nv">$list-group-color</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-color-scale</span><span class="p">);</span>
|
||||
<span class="k">@if</span> <span class="p">(</span><span class="nf">contrast-ratio</span><span class="p">(</span><span class="nv">$list-group-background</span><span class="o">,</span> <span class="nv">$list-group-color</span><span class="p">)</span> <span class="o"><</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nv">$list-group-color</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$list-group-background</span><span class="p">)</span><span class="o">,</span> <span class="nf">abs</span><span class="p">(</span><span class="nv">$alert-color-scale</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@include</span><span class="nd"> list-group-item-variant</span><span class="p">(</span><span class="nv">$state</span><span class="o">,</span> <span class="nv">$list-group-background</span><span class="o">,</span> <span class="nv">$list-group-color</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||
<p>Use the tab JavaScript plugin—include it individually or through the compiled <code>bootstrap.js</code> file—to extend our list group to create tabbable panes of local content.</p>
|
||||
<div class="bd-example" role="tabpanel">
|
||||
@ -1024,11 +1163,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded active" aria-current="page">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -407,6 +409,7 @@
|
||||
<li><a href="#tooltips-and-popovers">Tooltips and popovers</a></li>
|
||||
<li><a href="#using-the-grid">Using the grid</a></li>
|
||||
<li><a href="#varying-modal-content">Varying modal content</a></li>
|
||||
<li><a href="#toggle-between-modals">Toggle between modals</a></li>
|
||||
<li><a href="#change-animation">Change animation</a></li>
|
||||
<li><a href="#remove-animation">Remove animation</a></li>
|
||||
<li><a href="#dynamic-heights">Dynamic heights</a></li>
|
||||
@ -416,6 +419,12 @@
|
||||
</li>
|
||||
<li><a href="#optional-sizes">Optional sizes</a></li>
|
||||
<li><a href="#fullscreen-modal">Fullscreen Modal</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#loop">Loop</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li><a href="#via-data-attributes">Via data attributes</a></li>
|
||||
@ -910,6 +919,69 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="nx">modalTitle</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="s1">'New message to '</span> <span class="o">+</span> <span class="nx">recipient</span>
|
||||
<span class="nx">modalBodyInput</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">recipient</span>
|
||||
<span class="p">})</span>
|
||||
</code></pre></div><h3 id="toggle-between-modals">Toggle between modals</h3>
|
||||
<p>Toggle between multiple modals with some clever placement of the <code>data-bs-target</code> and <code>data-bs-toggle</code> attributes. For example, you could toggle a password reset modal from within an already open sign in modal. <strong>Please note multiple modals cannot be open at the same time</strong>—this method simply toggles between two separate modals.</p>
|
||||
<div class="bd-example">
|
||||
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Show a second modal and hide this one with the button below.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Hide this modal and show the first with the button below.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
|
||||
</div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- First modal dialog --></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"..."</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-centered"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span>
|
||||
<span class="c"><!-- Toogle to second dialog --></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#modal2"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Open #modal2<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="c"><!-- Second modal dialog --></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"modal2"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"..."</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-centered"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span>
|
||||
<span class="c"><!-- Toogle to first dialog, `data-bs-dismiss` attribute can be omitted - clicking on link will close dialog anyway --></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#modal"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Open #modal<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="c"><!-- Open first dialog --></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#modal"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Open #modal<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
</code></pre></div><h3 id="change-animation">Change animation</h3>
|
||||
<p>The <code>$modal-fade-transform</code> variable determines the transform state of <code>.modal-dialog</code> before the modal fade-in animation, the <code>$modal-show-transform</code> variable determines the transform of <code>.modal-dialog</code> at the end of the modal fade-in animation.</p>
|
||||
<p>If you want for example a zoom-in animation, you can set <code>$modal-fade-transform: scale(.8)</code>.</p>
|
||||
@ -1156,6 +1228,80 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$modal-inner-padding</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$modal-footer-margin-between</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$modal-dialog-margin</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$modal-dialog-margin-y-sm-up</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.75</span><span class="kt">rem</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$modal-title-line-height</span><span class="o">:</span> <span class="nv">$line-height-base</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$modal-content-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$modal-content-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$modal-content-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.2</span><span class="p">);</span>
|
||||
<span class="nv">$modal-content-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$modal-content-border-radius</span><span class="o">:</span> <span class="nv">$border-radius-lg</span><span class="p">;</span>
|
||||
<span class="nv">$modal-content-inner-border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$modal-content-border-radius</span><span class="o">,</span> <span class="nv">$modal-content-border-width</span><span class="p">);</span>
|
||||
<span class="nv">$modal-content-box-shadow-xs</span><span class="o">:</span> <span class="nv">$box-shadow-sm</span><span class="p">;</span>
|
||||
<span class="nv">$modal-content-box-shadow-sm-up</span><span class="o">:</span> <span class="nv">$box-shadow</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$modal-backdrop-bg</span><span class="o">:</span> <span class="nv">$black</span><span class="p">;</span>
|
||||
<span class="nv">$modal-backdrop-opacity</span><span class="o">:</span> <span class="mf">.5</span><span class="p">;</span>
|
||||
<span class="nv">$modal-header-border-color</span><span class="o">:</span> <span class="nv">$border-color</span><span class="p">;</span>
|
||||
<span class="nv">$modal-footer-border-color</span><span class="o">:</span> <span class="nv">$modal-header-border-color</span><span class="p">;</span>
|
||||
<span class="nv">$modal-header-border-width</span><span class="o">:</span> <span class="nv">$modal-content-border-width</span><span class="p">;</span>
|
||||
<span class="nv">$modal-footer-border-width</span><span class="o">:</span> <span class="nv">$modal-header-border-width</span><span class="p">;</span>
|
||||
<span class="nv">$modal-header-padding-y</span><span class="o">:</span> <span class="nv">$modal-inner-padding</span><span class="p">;</span>
|
||||
<span class="nv">$modal-header-padding-x</span><span class="o">:</span> <span class="nv">$modal-inner-padding</span><span class="p">;</span>
|
||||
<span class="nv">$modal-header-padding</span><span class="o">:</span> <span class="nv">$modal-header-padding-y</span> <span class="nv">$modal-header-padding-x</span><span class="p">;</span> <span class="c1">// Keep this for backwards compatibility
|
||||
</span><span class="c1"></span>
|
||||
<span class="nv">$modal-sm</span><span class="o">:</span> <span class="mi">300</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$modal-md</span><span class="o">:</span> <span class="mi">500</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$modal-lg</span><span class="o">:</span> <span class="mi">800</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$modal-xl</span><span class="o">:</span> <span class="mi">1140</span><span class="kt">px</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$modal-fade-transform</span><span class="o">:</span> <span class="nf">translate</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">-50</span><span class="kt">px</span><span class="p">);</span>
|
||||
<span class="nv">$modal-show-transform</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span>
|
||||
<span class="nv">$modal-transition</span><span class="o">:</span> <span class="no">transform</span> <span class="mf">.3</span><span class="kt">s</span> <span class="n">ease-out</span><span class="p">;</span>
|
||||
<span class="nv">$modal-scale-transform</span><span class="o">:</span> <span class="nf">scale</span><span class="p">(</span><span class="mi">1</span><span class="mf">.02</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h3 id="loop">Loop</h3>
|
||||
<p><a href="#fullscreen-modal">Responsive fullscreen modals</a> are generated via the <code>$breakpoints</code> map and a loop in <code>scss/_modal.scss</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="err">$</span><span class="nt">breakpoint</span> <span class="nt">in</span> <span class="nt">map-keys</span><span class="o">(</span><span class="err">$</span><span class="nt">grid-breakpoints</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="nv">$infix</span><span class="o">:</span> <span class="nf">breakpoint-infix</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="o">,</span> <span class="nv">$grid-breakpoints</span><span class="p">);</span>
|
||||
<span class="nv">$postfix</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$infix</span> <span class="o">!=</span> <span class="s2">""</span><span class="o">,</span> <span class="nv">$infix</span> <span class="o">+</span> <span class="s2">"-down"</span><span class="o">,</span> <span class="s2">""</span><span class="p">);</span>
|
||||
|
||||
<span class="k">@include</span><span class="nd"> media-breakpoint-down</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nc">.modal-fullscreen</span><span class="si">#{</span><span class="nv">$postfix</span><span class="si">}</span> <span class="p">{</span>
|
||||
<span class="nt">width</span><span class="nd">:</span> <span class="nt">100vw</span><span class="p">;</span>
|
||||
<span class="nt">max-width</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
|
||||
<span class="nt">height</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="p">;</span>
|
||||
<span class="nt">margin</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
|
||||
<span class="nc">.modal-content</span> <span class="p">{</span>
|
||||
<span class="nt">height</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="p">;</span>
|
||||
<span class="nt">border</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.modal-header</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.modal-body</span> <span class="p">{</span>
|
||||
<span class="nt">overflow-y</span><span class="nd">:</span> <span class="nt">auto</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.modal-footer</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.modal-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
@ -1215,6 +1361,9 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</code></pre></div><h4 id="show">show</h4>
|
||||
<p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">myModal</span><span class="p">.</span><span class="nx">show</span><span class="p">()</span>
|
||||
</code></pre></div><p>Also, you can pass a DOM element as an argument that can be received in the modal events (as the <code>relatedTarget</code> property).</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">modalToggle</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'toggleMyModal'</span><span class="p">)</span> <span class="c1">// relatedTarget
|
||||
</span><span class="c1"></span><span class="nx">myModal</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="nx">modalToggle</span><span class="p">)</span>
|
||||
</code></pre></div><h4 id="hide">hide</h4>
|
||||
<p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">myModal</span><span class="p">.</span><span class="nx">hide</span><span class="p">()</span>
|
||||
@ -1279,11 +1428,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded active" aria-current="page">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -399,10 +401,16 @@
|
||||
<li><a href="#how-it-works">How it works</a></li>
|
||||
<li><a href="#supported-content">Supported content</a>
|
||||
<ul>
|
||||
<li><a href="#brand">Brand</a></li>
|
||||
<li><a href="#brand">Brand</a>
|
||||
<ul>
|
||||
<li><a href="#text">Text</a></li>
|
||||
<li><a href="#image">Image</a></li>
|
||||
<li><a href="#image-and-text">Image and text</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#nav">Nav</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#text">Text</a></li>
|
||||
<li><a href="#text-1">Text</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#color-schemes">Color schemes</a></li>
|
||||
@ -415,6 +423,12 @@
|
||||
<li><a href="#external-content">External content</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#loop">Loop</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -525,6 +539,8 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<p>This example uses <a href="/docs/5.0/utilities/background/">background</a> (<code>bg-light</code>) and <a href="/docs/5.0/utilities/spacing/">spacing</a> (<code>my-2</code>, <code>my-lg-0</code>, <code>me-sm-0</code>, <code>my-sm-0</code>) utility classes.</p>
|
||||
<h3 id="brand">Brand</h3>
|
||||
<p>The <code>.navbar-brand</code> can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.</p>
|
||||
<h4 id="text">Text</h4>
|
||||
<p>Add your text within an element with the <code>.navbar-brand</code> class.</p>
|
||||
<div class="bd-example">
|
||||
<!-- As a link -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
@ -552,9 +568,9 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-brand mb-0 h1"</span><span class="p">></span>Navbar<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div>
|
||||
<p>Adding images to the <code>.navbar-brand</code> will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.</p>
|
||||
<h4 id="image">Image</h4>
|
||||
<p>You can replace the text within the <code>.navbar-brand</code> with an <code><img></code>.</p>
|
||||
<div class="bd-example">
|
||||
<!-- Just an image -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">
|
||||
@ -562,29 +578,28 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Just an image --></span>
|
||||
<span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light"</span><span class="p">></span>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"container"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-brand"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/docs/5.0/assets/brand/bootstrap-logo.svg"</span> <span class="na">alt</span><span class="o">=</span><span class="s">""</span> <span class="na">width</span><span class="o">=</span><span class="s">"30"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div>
|
||||
<h4 id="image-and-text">Image and text</h4>
|
||||
<p>You can also make use of some additional utilities to add an image and text at the same time. Note the addition of <code>.d-inline-block</code> and <code>.align-text-top</code> on the <code><img></code>.</p>
|
||||
<div class="bd-example">
|
||||
<!-- Image and text -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-top">
|
||||
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
|
||||
Bootstrap
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Image and text --></span>
|
||||
<span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light"</span><span class="p">></span>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"container-fluid"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-brand"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/docs/5.0/assets/brand/bootstrap-logo.svg"</span> <span class="na">alt</span><span class="o">=</span><span class="s">""</span> <span class="na">width</span><span class="o">=</span><span class="s">"30"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-inline-block align-top"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/docs/5.0/assets/brand/bootstrap-logo.svg"</span> <span class="na">alt</span><span class="o">=</span><span class="s">""</span> <span class="na">width</span><span class="o">=</span><span class="s">"30"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-inline-block align-text-top"</span><span class="p">></span>
|
||||
Bootstrap
|
||||
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
@ -811,7 +826,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-sm btn-outline-secondary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Smaller button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">form</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="text">Text</h3>
|
||||
<h3 id="text-1">Text</h3>
|
||||
<p>Navbars may contain bits of text with the help of <code>.navbar-text</code>. This class adjusts vertical alignment and horizontal spacing for strings of text.</p>
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
@ -1321,6 +1336,91 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div>
|
||||
<p>When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes <em>before</em> the toggler in the document’s structure. We also recommend making sure that the toggler has the <code>aria-controls</code> attribute, pointing to the <code>id</code> of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$navbar-padding-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-padding-x</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$navbar-nav-link-padding-x</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$navbar-brand-font-size</span><span class="o">:</span> <span class="nv">$font-size-lg</span><span class="p">;</span>
|
||||
<span class="c1">// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
|
||||
</span><span class="c1"></span><span class="nv">$nav-link-height</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="nv">$line-height-base</span> <span class="o">+</span> <span class="nv">$nav-link-padding-y</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-brand-height</span><span class="o">:</span> <span class="nv">$navbar-brand-font-size</span> <span class="o">*</span> <span class="nv">$line-height-base</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-brand-padding-y</span><span class="o">:</span> <span class="p">(</span><span class="nv">$nav-link-height</span> <span class="o">-</span> <span class="nv">$navbar-brand-height</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-brand-margin-end</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$navbar-toggler-padding-y</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-toggler-padding-x</span><span class="o">:</span> <span class="mf">.75</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-toggler-font-size</span><span class="o">:</span> <span class="nv">$font-size-lg</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-toggler-border-radius</span><span class="o">:</span> <span class="nv">$btn-border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-toggler-focus-width</span><span class="o">:</span> <span class="nv">$btn-focus-width</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-toggler-transition</span><span class="o">:</span> <span class="no">box-shadow</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$navbar-dark-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.55</span><span class="p">);</span>
|
||||
<span class="nv">$navbar-dark-hover-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.75</span><span class="p">);</span>
|
||||
<span class="nv">$navbar-dark-active-color</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-dark-disabled-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.25</span><span class="p">);</span>
|
||||
<span class="nv">$navbar-dark-toggler-icon-bg</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='</span><span class="si">#{</span><span class="nv">$navbar-dark-color</span><span class="si">}</span><span class="sx">' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>")</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-dark-toggler-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.1</span><span class="p">);</span>
|
||||
|
||||
<span class="nv">$navbar-light-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.55</span><span class="p">);</span>
|
||||
<span class="nv">$navbar-light-hover-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.7</span><span class="p">);</span>
|
||||
<span class="nv">$navbar-light-active-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.9</span><span class="p">);</span>
|
||||
<span class="nv">$navbar-light-disabled-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.3</span><span class="p">);</span>
|
||||
<span class="nv">$navbar-light-toggler-icon-bg</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='</span><span class="si">#{</span><span class="nv">$navbar-light-color</span><span class="si">}</span><span class="sx">' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>")</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-light-toggler-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.1</span><span class="p">);</span>
|
||||
|
||||
<span class="nv">$navbar-light-brand-color</span><span class="o">:</span> <span class="nv">$navbar-light-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-light-brand-hover-color</span><span class="o">:</span> <span class="nv">$navbar-light-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-dark-brand-color</span><span class="o">:</span> <span class="nv">$navbar-dark-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-dark-brand-hover-color</span><span class="o">:</span> <span class="nv">$navbar-dark-active-color</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="loop">Loop</h3>
|
||||
<p><a href="#responsive-behaviors">Responsive navbar expand/collapse classes</a> (e.g., <code>.navbar-expand-lg</code>) are combined with the <code>$breakpoints</code> map and generated through a loop in <code>scss/_navbar.scss</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||
</span><span class="c1">// where your navbar collapses.
|
||||
</span><span class="c1"></span><span class="nc">.navbar-expand</span> <span class="p">{</span>
|
||||
<span class="k">@each</span> <span class="err">$</span><span class="nt">breakpoint</span> <span class="nt">in</span> <span class="nt">map-keys</span><span class="o">(</span><span class="err">$</span><span class="nt">grid-breakpoints</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="nv">$next</span><span class="o">:</span> <span class="nf">breakpoint-next</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="o">,</span> <span class="nv">$grid-breakpoints</span><span class="p">);</span>
|
||||
<span class="nv">$infix</span><span class="o">:</span> <span class="nf">breakpoint-infix</span><span class="p">(</span><span class="nv">$next</span><span class="o">,</span> <span class="nv">$grid-breakpoints</span><span class="p">);</span>
|
||||
|
||||
<span class="c1">// stylelint-disable-next-line scss/selector-no-union-class-name
|
||||
</span><span class="c1"></span> <span class="k">&</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">infix</span><span class="p">}</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> media-breakpoint-up</span><span class="p">(</span><span class="nv">$next</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">flex-wrap</span><span class="nd">:</span> <span class="nt">nowrap</span><span class="p">;</span>
|
||||
<span class="nt">justify-content</span><span class="nd">:</span> <span class="nt">flex-start</span><span class="p">;</span>
|
||||
|
||||
<span class="nc">.navbar-nav</span> <span class="p">{</span>
|
||||
<span class="nt">flex-direction</span><span class="nd">:</span> <span class="nt">row</span><span class="p">;</span>
|
||||
|
||||
<span class="nc">.dropdown-menu</span> <span class="p">{</span>
|
||||
<span class="nt">position</span><span class="nd">:</span> <span class="nt">absolute</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.nav-link</span> <span class="p">{</span>
|
||||
<span class="nt">padding-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">navbar-nav-link-padding-x</span><span class="p">;</span>
|
||||
<span class="nt">padding-left</span><span class="nd">:</span> <span class="err">$</span><span class="nt">navbar-nav-link-padding-x</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.navbar-nav-scroll</span> <span class="p">{</span>
|
||||
<span class="nt">overflow</span><span class="nd">:</span> <span class="nt">visible</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.navbar-collapse</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">flex</span> <span class="o">!</span><span class="nt">important</span><span class="p">;</span> <span class="c1">// stylelint-disable-line declaration-no-important
|
||||
</span><span class="c1"></span> <span class="nt">flex-basis</span><span class="nd">:</span> <span class="nt">auto</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.navbar-toggler</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -1336,11 +1436,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for how to use Bootstrap’s included navigation components.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded active" aria-current="page">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -414,6 +416,11 @@
|
||||
<li><a href="#pills-with-dropdowns">Pills with dropdowns</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#javascript-behavior">JavaScript behavior</a>
|
||||
<ul>
|
||||
<li><a href="#using-data-attributes">Using data attributes</a></li>
|
||||
@ -859,6 +866,29 @@
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$nav-link-padding-y</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-padding-x</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-font-size</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-font-weight</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-hover-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-transition</span><span class="o">:</span> <span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">background</span><span class="o">-</span><span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">border</span><span class="o">-</span><span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-disabled-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$nav-tabs-border-color</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="p">;</span>
|
||||
<span class="nv">$nav-tabs-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$nav-tabs-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$nav-tabs-link-hover-border-color</span><span class="o">:</span> <span class="nv">$gray-200</span> <span class="nv">$gray-200</span> <span class="nv">$nav-tabs-border-color</span><span class="p">;</span>
|
||||
<span class="nv">$nav-tabs-link-active-color</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="p">;</span>
|
||||
<span class="nv">$nav-tabs-link-active-bg</span><span class="o">:</span> <span class="nv">$body-bg</span><span class="p">;</span>
|
||||
<span class="nv">$nav-tabs-link-active-border-color</span><span class="o">:</span> <span class="nv">$gray-300</span> <span class="nv">$gray-300</span> <span class="nv">$nav-tabs-link-active-bg</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$nav-pills-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$nav-pills-link-active-color</span><span class="o">:</span> <span class="nv">$component-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$nav-pills-link-active-bg</span><span class="o">:</span> <span class="nv">$component-active-bg</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||
<p>Use the tab JavaScript plugin—include it individually or through the compiled <code>bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content.</p>
|
||||
<p>Dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>, require <code>role="tablist"</code>, <code>role="tab"</code>, <code>role="tabpanel"</code>, and additional <code>aria-</code> attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using <code><button></code> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.</p>
|
||||
@ -1005,7 +1035,7 @@
|
||||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-start"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav flex-column nav-pills me-3"</span> <span class="na">id</span><span class="o">=</span><span class="s">"v-pills-tab"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tablist"</span> <span class="na">aria-orientation</span><span class="o">=</span><span class="s">"vertical"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link active"</span> <span class="na">id</span><span class="o">=</span><span class="s">"v-pills-home-tab"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"pill"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#v-pills-home"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"v-pills-home"</span> <span class="na">aria-selected</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">id</span><span class="o">=</span><span class="s">"v-pills-profile-tab"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"pill"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#v-pills-profile"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"v-pills-profile"</span> <span class="na">aria-selected</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>Profile<span class="p"></</span><span class="nt">buttona</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">id</span><span class="o">=</span><span class="s">"v-pills-profile-tab"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"pill"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#v-pills-profile"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"v-pills-profile"</span> <span class="na">aria-selected</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>Profile<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">id</span><span class="o">=</span><span class="s">"v-pills-messages-tab"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"pill"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#v-pills-messages"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"v-pills-messages"</span> <span class="na">aria-selected</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>Messages<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">id</span><span class="o">=</span><span class="s">"v-pills-settings-tab"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"pill"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#v-pills-settings"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"v-pills-settings"</span> <span class="na">aria-selected</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>Settings<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
@ -1030,7 +1060,7 @@
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">id</span><span class="o">=</span><span class="s">"messages-tab"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#messages"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"messages"</span> <span class="na">aria-selected</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>Messages<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span> <span class="na">role</span><span class="o">=</span><span class="s">"presentation"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">id</span><span class="o">=</span><span class="s">"settings-tab"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">hdata-bs-targetref</span><span class="o">=</span><span class="s">"#settings"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"settings"</span> <span class="na">aria-selected</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>Settings<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">id</span><span class="o">=</span><span class="s">"settings-tab"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#settings"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"settings"</span> <span class="na">aria-selected</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>Settings<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
|
||||
@ -1171,11 +1201,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
821
docs/5.0/components/offcanvas/index.html
Normal file
821
docs/5.0/components/offcanvas/index.html
Normal file
@ -0,0 +1,821 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
|
||||
<title>Offcanvas · Bootstrap v5.0</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/offcanvas/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#7952b3">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Offcanvas">
|
||||
<meta name="twitter:description" content="Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/offcanvas/">
|
||||
<meta property="og:title" content="Offcanvas">
|
||||
<meta property="og:description" content="Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||
<a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-md-none text-white-50">
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-md-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-md-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-md-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-md-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||
</form>
|
||||
|
||||
<div class="dropdown ms-3">
|
||||
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Expand</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||
</svg>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Collapse</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="container-xxl my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||
Getting started
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="getting-started-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="customize-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||
Layout
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="layout-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||
Content
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="content-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||
Forms
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="forms-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||
Components
|
||||
</button>
|
||||
|
||||
<div class="collapse show" id="components-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded active" aria-current="page">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||
Helpers
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="helpers-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||
Utilities
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="utilities-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||
<li><a href="/docs/5.0/utilities/background/" class="d-inline-flex align-items-center rounded">Background</a></li>
|
||||
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||
Extend
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="extend-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||
About
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="about-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="my-3 mx-4 border-top"></li>
|
||||
<li>
|
||||
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro ps-lg-4">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/offcanvas.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Offcanvas</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#how-it-works">How it works</a></li>
|
||||
<li><a href="#examples">Examples</a>
|
||||
<ul>
|
||||
<li><a href="#offcanvas-components">Offcanvas components</a></li>
|
||||
<li><a href="#live-demo">Live demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#placement">Placement</a></li>
|
||||
<li><a href="#backdrop">Backdrop</a></li>
|
||||
<li><a href="#accessibility">Accessibility</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li><a href="#via-data-attributes">Via data attributes</a></li>
|
||||
<li><a href="#via-javascript">Via JavaScript</a></li>
|
||||
<li><a href="#options">Options</a></li>
|
||||
<li><a href="#methods">Methods</a></li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
<p>Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and <code>data</code> attributes are used to invoke our JavaScript.</p>
|
||||
<ul>
|
||||
<li>Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.</li>
|
||||
<li>Similarly, some <a href="#sass">source Sass</a> variables for offcanvas’s styles and dimensions are inherited from the modal’s variables.</li>
|
||||
<li>When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.</li>
|
||||
<li>Similar to modals, only one offcanvas can be shown at a time.</li>
|
||||
</ul>
|
||||
<p><strong>Heads up!</strong> Given how CSS handles animations, you cannot use <code>margin</code> or <code>translate</code> on an <code>.offcanvas</code> element. Instead, use the class as an independent wrapping element.</p>
|
||||
<div class="bd-callout bd-callout-info">
|
||||
The animation effect of this component is dependent on the <code>prefers-reduced-motion</code> media query. See the <a href="/docs/5.0/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.
|
||||
</div>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
<h3 id="offcanvas-components">Offcanvas components</h3>
|
||||
<p>Below is an offcanvas example that is shown by default (via <code>.show</code> on <code>.offcanvas</code>). Offcanvas includes support for a header with a close button and an optional body class for some initial <code>padding</code>. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.</p>
|
||||
<div class="bd-example bd-example-offcanvas p-0 bg-light overflow-hidden">
|
||||
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" data-bs-backdrop="false" data-bs-scroll="true">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas offcanvas-start show"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"offcanvasLabel"</span> <span class="na">data-bs-backdrop</span><span class="o">=</span><span class="s">"false"</span> <span class="na">data-bs-scroll</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasLabel"</span><span class="p">></span>Offcanvas<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close text-reset"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-body"</span><span class="p">></span>
|
||||
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="live-demo">Live demo</h3>
|
||||
<p>Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the <code>.show</code> class on an element with the <code>.offcanvas</code> class.</p>
|
||||
<ul>
|
||||
<li><code>.offcanvas</code> hides content (default)</li>
|
||||
<li><code>.offcanvas.show</code> shows content</li>
|
||||
</ul>
|
||||
<p>You can use a link with the <code>href</code> attribute, or a button with the <code>data-bs-target</code> attribute. In both cases, the <code>data-bs-toggle="offcanvas"</code> is required.</p>
|
||||
<div class="bd-example">
|
||||
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
|
||||
Button with data-bs-target
|
||||
</button>
|
||||
|
||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<div class="">
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
|
||||
</div>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#offcanvasExample"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"offcanvasExample"</span><span class="p">></span>
|
||||
Link with href
|
||||
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#offcanvasExample"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"offcanvasExample"</span><span class="p">></span>
|
||||
Button with data-bs-target
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas offcanvas-start"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasExample"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"offcanvasExampleLabel"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasExampleLabel"</span><span class="p">></span>Offcanvas<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close text-reset"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-body"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown mt-3"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span>
|
||||
Dropdown button
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="placement">Placement</h2>
|
||||
<p>There’s no default placement for offcanvas components, so you must add one of the modifier classes below;</p>
|
||||
<ul>
|
||||
<li><code>.offcanvas-start</code> places offcanvas on the left of the viewport (shown above)</li>
|
||||
<li><code>.offcanvas-end</code> places offcanvas on the right of the viewport</li>
|
||||
<li><code>.offcanvas-bottom</code> places offcanvas on the bottom of the viewport</li>
|
||||
</ul>
|
||||
<p>Try the right and bottom examples out below.</p>
|
||||
<div class="bd-example">
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
|
||||
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#offcanvasRight"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"offcanvasRight"</span><span class="p">></span>Toggle right offcanvas<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas offcanvas-end"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasRight"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"offcanvasRightLabel"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasRightLabel"</span><span class="p">></span>Offcanvas right<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close text-reset"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-body"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<div class="bd-example">
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
|
||||
|
||||
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body small">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#offcanvasBottom"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"offcanvasBottom"</span><span class="p">></span>Toggle bottom offcanvas<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas offcanvas-bottom"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasBottom"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"offcanvasBottomLabel"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasBottomLabel"</span><span class="p">></span>Offcanvas bottom<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close text-reset"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-body small"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="backdrop">Backdrop</h2>
|
||||
<p>Scrolling the <code><body></code> element is disabled when an offcanvas and its backdrop are visible. Use the <code>data-bs-scroll</code> attribute to toggle <code><body></code> scrolling and <code>data-bs-backdrop</code> to toggle the backdrop.</p>
|
||||
<div class="bd-example">
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
|
||||
|
||||
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>Try scrolling the rest of the page to see this option in action.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>.....</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>Try scrolling the rest of the page to see this option in action.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#offcanvasScrolling"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"offcanvasScrolling"</span><span class="p">></span>Enable body scrolling<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#offcanvasWithBackdrop"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"offcanvasWithBackdrop"</span><span class="p">></span>Enable backdrop (default)<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#offcanvasWithBothOptions"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"offcanvasWithBothOptions"</span><span class="p">></span>Enable both scrolling <span class="err">&</span> backdrop<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas offcanvas-start"</span> <span class="na">data-bs-scroll</span><span class="o">=</span><span class="s">"true"</span> <span class="na">data-bs-backdrop</span><span class="o">=</span><span class="s">"false"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasScrolling"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"offcanvasScrollingLabel"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasScrollingLabel"</span><span class="p">></span>Colored with scrolling<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close text-reset"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-body"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Try scrolling the rest of the page to see this option in action.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas offcanvas-start"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasWithBackdrop"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"offcanvasWithBackdropLabel"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasWithBackdropLabel"</span><span class="p">></span>Offcanvas with backdrop<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close text-reset"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-body"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>.....<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas offcanvas-start"</span> <span class="na">data-bs-scroll</span><span class="o">=</span><span class="s">"true"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasWithBothOptions"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"offcanvasWithBothOptionsLabel"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasWithBothOptionsLabel"</span><span class="p">></span>Backdroped with scrolling<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close text-reset"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-body"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Try scrolling the rest of the page to see this option in action.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
<p>Since the offcanvas panel is conceptually a modal dialog, be sure to add <code>aria-labelledby="..."</code>—referencing the offcanvas title—to <code>.offcanvas</code>. Note that you don’t need to add <code>role="dialog"</code> since we already add it via JavaScript.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$offcanvas-padding-y</span><span class="o">:</span> <span class="nv">$modal-inner-padding</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-padding-x</span><span class="o">:</span> <span class="nv">$modal-inner-padding</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-horizontal-width</span><span class="o">:</span> <span class="mi">400</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-vertical-height</span><span class="o">:</span> <span class="mi">30</span><span class="kt">vh</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-transition-duration</span><span class="o">:</span> <span class="mf">.3</span><span class="kt">s</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-border-color</span><span class="o">:</span> <span class="nv">$modal-content-border-color</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-border-width</span><span class="o">:</span> <span class="nv">$modal-content-border-width</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-title-line-height</span><span class="o">:</span> <span class="nv">$modal-title-line-height</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-bg-color</span><span class="o">:</span> <span class="nv">$modal-content-bg</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-color</span><span class="o">:</span> <span class="nv">$modal-content-color</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-body-backdrop-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$modal-backdrop-bg</span><span class="o">,</span> <span class="nv">$modal-backdrop-opacity</span><span class="p">);</span>
|
||||
<span class="nv">$offcanvas-box-shadow</span><span class="o">:</span> <span class="nv">$modal-content-box-shadow-xs</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:</p>
|
||||
<ul>
|
||||
<li><code>.offcanvas</code> hides the content</li>
|
||||
<li><code>.offcanvas.show</code> shows the content</li>
|
||||
<li><code>.offcanvas-start</code> hides the offcanvas on the left</li>
|
||||
<li><code>.offcanvas-end</code> hides the offcanvas on the right</li>
|
||||
<li><code>.offcanvas-bottom</code> hides the offcanvas on the bottom</li>
|
||||
</ul>
|
||||
<p>Add a dismiss button with the <code>data-bs-dismiss="offcanvas"</code> attribute, which triggers the JavaScript functionality. Be sure to use the <code><button></code> element with it for proper behavior across all devices.</p>
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
<p>Add <code>data-bs-toggle="offcanvas"</code> and a <code>data-bs-target</code> or <code>href</code> to the element to automatically assign control of one offcanvas element. The <code>data-bs-target</code> attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class <code>offcanvas</code> to the offcanvas element. If you’d like it to default open, add the additional class <code>show</code>.</p>
|
||||
<h3 id="via-javascript">Via JavaScript</h3>
|
||||
<p>Enable manually with:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">offcanvasElementList</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.offcanvas'</span><span class="p">))</span>
|
||||
<span class="kd">var</span> <span class="nx">offcanvasList</span> <span class="o">=</span> <span class="nx">offcanvasElementList</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">offcanvasEl</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Offcanvas</span><span class="p">(</span><span class="nx">offcanvasEl</span><span class="p">)</span>
|
||||
<span class="p">})</span>
|
||||
</code></pre></div><h3 id="options">Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-bs-</code>, as in <code>data-bs-backdrop=""</code>.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>backdrop</code></td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Apply a backdrop on body while offcanvas is open</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>keyboard</code></td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Closes the offcanvas when escape key is pressed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>scroll</code></td>
|
||||
<td>boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Allow body scrolling while offcanvas is open</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4 id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4>
|
||||
<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>
|
||||
<p><a href="/docs/5.0/getting-started/javascript/#asynchronous-functions-and-transitions">See our JavaScript documentation for more information</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<p>Activates your content as an offcanvas element. Accepts an optional options <code>object</code>.</p>
|
||||
<p>You can create an offcanvas instance with the constructor, for example:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myOffcanvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myOffcanvas'</span><span class="p">)</span>
|
||||
<span class="kd">var</span> <span class="nx">bsOffcanvas</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Offcanvas</span><span class="p">(</span><span class="nx">myOffcanvas</span><span class="p">)</span>
|
||||
</code></pre></div><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>toggle</code></td>
|
||||
<td>Toggles an offcanvas element to shown or hidden. <strong>Returns to the caller before the offcanvas element has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.offcanvas</code> or <code>hidden.bs.offcanvas</code> event occurs).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>show</code></td>
|
||||
<td>Shows an offcanvas element. <strong>Returns to the caller before the offcanvas element has actually been shown</strong> (i.e. before the <code>shown.bs.offcanvas</code> event occurs).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>hide</code></td>
|
||||
<td>Hides an offcanvas element. <strong>Returns to the caller before the offcanvas element has actually been hidden</strong> (i.e. before the <code>hidden.bs.offcanvas</code> event occurs).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>_getInstance</code></td>
|
||||
<td><em>Static</em> method which allows you to get the offcanvas instance associated with a DOM element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
<p>Bootstrap’s offcanvas class exposes a few events for hooking into offcanvas functionality.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>show.bs.offcanvas</code></td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>shown.bs.offcanvas</code></td>
|
||||
<td>This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>hide.bs.offcanvas</code></td>
|
||||
<td>This event is fired immediately when the <code>hide</code> method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>hidden.bs.offcanvas</code></td>
|
||||
<td>This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myOffcanvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myOffcanvas'</span><span class="p">)</span>
|
||||
<span class="nx">myOffcanvas</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'hidden.bs.offcanvas'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// do something...
|
||||
</span><span class="c1"></span><span class="p">})</span>
|
||||
</code></pre></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded active" aria-current="page">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -401,6 +403,12 @@
|
||||
<li><a href="#disabled-and-active-states">Disabled and active states</a></li>
|
||||
<li><a href="#sizing">Sizing</a></li>
|
||||
<li><a href="#alignment">Alignment</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#mixins">Mixins</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -630,6 +638,73 @@
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$pagination-padding-y</span><span class="o">:</span> <span class="mf">.375</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-padding-x</span><span class="o">:</span> <span class="mf">.75</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-padding-y-sm</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-padding-x-sm</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-padding-y-lg</span><span class="o">:</span> <span class="mf">.75</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-padding-x-lg</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$pagination-color</span><span class="o">:</span> <span class="nv">$link-color</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-margin-start</span><span class="o">:</span> <span class="o">-</span><span class="nv">$pagination-border-width</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-border-color</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$pagination-focus-color</span><span class="o">:</span> <span class="nv">$link-hover-color</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-focus-bg</span><span class="o">:</span> <span class="nv">$gray-200</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-focus-box-shadow</span><span class="o">:</span> <span class="nv">$input-btn-focus-box-shadow</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-focus-outline</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$pagination-hover-color</span><span class="o">:</span> <span class="nv">$link-hover-color</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-hover-bg</span><span class="o">:</span> <span class="nv">$gray-200</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-hover-border-color</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$pagination-active-color</span><span class="o">:</span> <span class="nv">$component-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-active-bg</span><span class="o">:</span> <span class="nv">$component-active-bg</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-active-border-color</span><span class="o">:</span> <span class="nv">$pagination-active-bg</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$pagination-disabled-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-disabled-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-disabled-border-color</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$pagination-transition</span><span class="o">:</span> <span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">background</span><span class="o">-</span><span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">border</span><span class="o">-</span><span class="no">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="o">,</span> <span class="no">box-shadow</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$pagination-border-radius-sm</span><span class="o">:</span> <span class="nv">$border-radius-sm</span><span class="p">;</span>
|
||||
<span class="nv">$pagination-border-radius-lg</span><span class="o">:</span> <span class="nv">$border-radius-lg</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="mixins">Mixins</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> pagination-size</span><span class="p">(</span><span class="nv">$padding-y</span><span class="o">,</span> <span class="nv">$padding-x</span><span class="o">,</span> <span class="nv">$font-size</span><span class="o">,</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nc">.page-link</span> <span class="p">{</span>
|
||||
<span class="nt">padding</span><span class="nd">:</span> <span class="err">$</span><span class="nt">padding-y</span> <span class="err">$</span><span class="nt">padding-x</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> font-size</span><span class="p">(</span><span class="nv">$font-size</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.page-item</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$pagination-margin-start</span> <span class="o">==</span> <span class="p">(</span><span class="o">-</span><span class="nv">$pagination-border-width</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">&</span><span class="nd">:first-child</span> <span class="p">{</span>
|
||||
<span class="nc">.page-link</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> border-start-radius</span><span class="p">(</span><span class="nv">$border-radius</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">:last-child</span> <span class="p">{</span>
|
||||
<span class="nc">.page-link</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> border-end-radius</span><span class="p">(</span><span class="nv">$border-radius</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span> <span class="k">@else</span> <span class="p">{</span>
|
||||
<span class="c1">//Add border-radius to all pageLinks in case they have left margin
|
||||
</span><span class="c1"></span> <span class="nc">.page-link</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="nv">$border-radius</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -645,11 +720,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded active" aria-current="page">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -406,6 +408,11 @@
|
||||
<li><a href="#disabled-elements">Disabled elements</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li><a href="#options">Options</a>
|
||||
@ -440,7 +447,7 @@
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>Things to know when using the popover plugin:</p>
|
||||
<ul>
|
||||
<li>Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper in order for popovers to work!</li>
|
||||
<li>Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper in order for popovers to work!</li>
|
||||
<li>Popovers require the <a href="/docs/5.0/components/tooltips/">tooltip plugin</a> as a dependency.</li>
|
||||
<li>Popovers are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
|
||||
<li>Zero-length <code>title</code> and <code>content</code> values will never show a popover.</li>
|
||||
@ -525,6 +532,32 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-inline-block"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"popover"</span> <span class="na">data-bs-trigger</span><span class="o">=</span><span class="s">"hover focus"</span> <span class="na">data-bs-content</span><span class="o">=</span><span class="s">"Disabled popover"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">disabled</span><span class="p">></span>Disabled button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">span</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$popover-font-size</span><span class="o">:</span> <span class="nv">$font-size-sm</span><span class="p">;</span>
|
||||
<span class="nv">$popover-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$popover-max-width</span><span class="o">:</span> <span class="mi">276</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$popover-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$popover-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.2</span><span class="p">);</span>
|
||||
<span class="nv">$popover-border-radius</span><span class="o">:</span> <span class="nv">$border-radius-lg</span><span class="p">;</span>
|
||||
<span class="nv">$popover-inner-border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$popover-border-radius</span><span class="o">,</span> <span class="nv">$popover-border-width</span><span class="p">);</span>
|
||||
<span class="nv">$popover-box-shadow</span><span class="o">:</span> <span class="nv">$box-shadow</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$popover-header-bg</span><span class="o">:</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$popover-bg</span><span class="o">,</span> <span class="mi">6</span><span class="kt">%</span><span class="p">);</span>
|
||||
<span class="nv">$popover-header-color</span><span class="o">:</span> <span class="nv">$headings-color</span><span class="p">;</span>
|
||||
<span class="nv">$popover-header-padding-y</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$popover-header-padding-x</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$popover-body-color</span><span class="o">:</span> <span class="nv">$body-color</span><span class="p">;</span>
|
||||
<span class="nv">$popover-body-padding-y</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$popover-body-padding-x</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$popover-arrow-width</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$popover-arrow-height</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$popover-arrow-color</span><span class="o">:</span> <span class="nv">$popover-bg</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$popover-arrow-outer-color</span><span class="o">:</span> <span class="nf">fade-in</span><span class="p">(</span><span class="nv">$popover-border-color</span><span class="o">,</span> <span class="mf">.05</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>Enable popovers via JavaScript:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">exampleEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
@ -794,11 +827,11 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded active" aria-current="page">Progress</a></li>
|
||||
@ -403,6 +405,12 @@
|
||||
<li><a href="#multiple-bars">Multiple bars</a></li>
|
||||
<li><a href="#striped">Striped</a></li>
|
||||
<li><a href="#animated-stripes">Animated stripes</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#keyframes">Keyframes</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -569,7 +577,27 @@
|
||||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"progress"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"progress-bar progress-bar-striped progress-bar-animated"</span> <span class="na">role</span><span class="o">=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow</span><span class="o">=</span><span class="s">"75"</span> <span class="na">aria-valuemin</span><span class="o">=</span><span class="s">"0"</span> <span class="na">aria-valuemax</span><span class="o">=</span><span class="s">"100"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 75%"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$progress-height</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$progress-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mf">.75</span><span class="p">;</span>
|
||||
<span class="nv">$progress-bg</span><span class="o">:</span> <span class="nv">$gray-200</span><span class="p">;</span>
|
||||
<span class="nv">$progress-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$progress-box-shadow</span><span class="o">:</span> <span class="nv">$box-shadow-inset</span><span class="p">;</span>
|
||||
<span class="nv">$progress-bar-color</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$progress-bar-bg</span><span class="o">:</span> <span class="nv">$primary</span><span class="p">;</span>
|
||||
<span class="nv">$progress-bar-animation-timing</span><span class="o">:</span> <span class="mi">1</span><span class="kt">s</span> <span class="n">linear</span> <span class="n">infinite</span><span class="p">;</span>
|
||||
<span class="nv">$progress-bar-transition</span><span class="o">:</span> <span class="no">width</span> <span class="mf">.6</span><span class="kt">s</span> <span class="n">ease</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="keyframes">Keyframes</h3>
|
||||
<p>Used for creating the CSS animations for <code>.progress-bar-animated</code>. Included in <code>scss/_progress-bar.scss</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@if</span> <span class="nv">$enable-transitions</span> <span class="p">{</span>
|
||||
<span class="k">@keyframes</span> <span class="nt">progress-bar-stripes</span> <span class="p">{</span>
|
||||
<span class="nt">0</span><span class="err">%</span> <span class="p">{</span> <span class="nt">background-position-x</span><span class="nd">:</span> <span class="err">$</span><span class="nt">progress-height</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@ -584,11 +612,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -732,11 +734,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -417,6 +419,12 @@
|
||||
</li>
|
||||
<li><a href="#size">Size</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#keyframes">Keyframes</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -680,6 +688,33 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"spinner-grow spinner-grow-sm"</span> <span class="na">role</span><span class="o">=</span><span class="s">"status"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
Loading...
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$spinner-width</span><span class="o">:</span> <span class="mi">2</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$spinner-height</span><span class="o">:</span> <span class="nv">$spinner-width</span><span class="p">;</span>
|
||||
<span class="nv">$spinner-border-width</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">em</span><span class="p">;</span>
|
||||
<span class="nv">$spinner-animation-speed</span><span class="o">:</span> <span class="mf">.75</span><span class="kt">s</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$spinner-width-sm</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$spinner-height-sm</span><span class="o">:</span> <span class="nv">$spinner-width-sm</span><span class="p">;</span>
|
||||
<span class="nv">$spinner-border-width-sm</span><span class="o">:</span> <span class="mf">.2</span><span class="kt">em</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="keyframes">Keyframes</h3>
|
||||
<p>Used for creating the CSS animations for our spinners. Included in <code>scss/_spinners.scss</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@keyframes</span> <span class="nt">spinner-border</span> <span class="p">{</span>
|
||||
<span class="nt">to</span> <span class="p">{</span> <span class="nt">transform</span><span class="nd">:</span> <span class="nt">rotate</span><span class="o">(</span><span class="nt">360deg</span><span class="o">)</span> <span class="nn">#</span><span class="p">{</span><span class="s2">"/* rtl:ignore */"</span><span class="p">};</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@keyframes</span> <span class="nt">spinner-grow</span> <span class="p">{</span>
|
||||
<span class="nt">0</span><span class="err">%</span> <span class="p">{</span>
|
||||
<span class="nt">transform</span><span class="nd">:</span> <span class="nt">scale</span><span class="o">(</span><span class="nt">0</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nt">50</span><span class="err">%</span> <span class="p">{</span>
|
||||
<span class="nt">opacity</span><span class="nd">:</span> <span class="nt">1</span><span class="p">;</span>
|
||||
<span class="nt">transform</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -695,11 +730,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -409,9 +411,13 @@
|
||||
</li>
|
||||
<li><a href="#placement">Placement</a></li>
|
||||
<li><a href="#accessibility">Accessibility</a></li>
|
||||
<li><a href="#javascript-behavior">JavaScript behavior</a>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li><a href="#usage">Usage</a></li>
|
||||
<li><a href="#options">Options</a></li>
|
||||
<li><a href="#methods">Methods</a>
|
||||
<ul>
|
||||
@ -625,7 +631,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="color-schemes">Color schemes</h3>
|
||||
<p>Building on the above example, you can create different toast color schemes with our <a href="/docs/5.0/utilities/colors/">color</a> and <a href="/docs/5.0/utilities/background/">background</a>. Here we’ve added <code>.bg-primary</code> and <code>.text-white</code> to the <code>.toast</code>, and then added <code>.btn-close-white</code> to our close button. For a crisp edge, we remove the default border with <code>.border-0</code>.</p>
|
||||
<p>Building on the above example, you can create different toast color schemes with our <a href="/docs/5.0/utilities/colors/">color</a> and <a href="/docs/5.0/utilities/background/">background</a> utilities. Here we’ve added <code>.bg-primary</code> and <code>.text-white</code> to the <code>.toast</code>, and then added <code>.btn-close-white</code> to our close button. For a crisp edge, we remove the default border with <code>.border-0</code>.</p>
|
||||
<div class="bd-example bg-light">
|
||||
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
@ -847,8 +853,25 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
Hello, world! This is a toast message.
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$toast-max-width</span><span class="o">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$toast-padding-x</span><span class="o">:</span> <span class="mf">.75</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$toast-padding-y</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$toast-font-size</span><span class="o">:</span> <span class="mf">.875</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$toast-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$toast-background-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.85</span><span class="p">);</span>
|
||||
<span class="nv">$toast-border-width</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$toast-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">0</span><span class="o">,</span> <span class="mi">0</span><span class="o">,</span> <span class="mf">.1</span><span class="p">);</span>
|
||||
<span class="nv">$toast-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$toast-box-shadow</span><span class="o">:</span> <span class="nv">$box-shadow</span><span class="p">;</span>
|
||||
<span class="nv">$toast-spacing</span><span class="o">:</span> <span class="nv">$container-padding-x</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$toast-header-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
<span class="nv">$toast-header-background-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.85</span><span class="p">);</span>
|
||||
<span class="nv">$toast-header-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">0</span><span class="o">,</span> <span class="mi">0</span><span class="o">,</span> <span class="mf">.05</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>Initialize toasts via JavaScript:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">toastElList</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.toast'</span><span class="p">))</span>
|
||||
<span class="kd">var</span> <span class="nx">toastList</span> <span class="o">=</span> <span class="nx">toastElList</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">toastEl</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -952,11 +975,11 @@ You have to manually call this method, instead your toast won’t show.</p>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -399,6 +401,11 @@
|
||||
<li><a href="#overview">Overview</a></li>
|
||||
<li><a href="#example-enable-tooltips-everywhere">Example: Enable tooltips everywhere</a></li>
|
||||
<li><a href="#examples">Examples</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li><a href="#markup">Markup</a></li>
|
||||
@ -435,7 +442,7 @@
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>Things to know when using the tooltip plugin:</p>
|
||||
<ul>
|
||||
<li>Tooltips rely on the 3rd party library <a href="https://popper.js.org/">Popper</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper in order for tooltips to work!</li>
|
||||
<li>Tooltips rely on the 3rd party library <a href="https://popper.js.org/">Popper</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper in order for tooltips to work!</li>
|
||||
<li>Tooltips are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
|
||||
<li>Tooltips with zero-length titles are never displayed.</li>
|
||||
<li>Specify <code>container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
|
||||
@ -501,6 +508,22 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$tooltip-font-size</span><span class="o">:</span> <span class="nv">$font-size-sm</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-max-width</span><span class="o">:</span> <span class="mi">200</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-color</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-bg</span><span class="o">:</span> <span class="nv">$black</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-opacity</span><span class="o">:</span> <span class="mf">.9</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-padding-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">4</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-padding-x</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-margin</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$tooltip-arrow-width</span><span class="o">:</span> <span class="mf">.8</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-arrow-height</span><span class="o">:</span> <span class="mf">.4</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-arrow-color</span><span class="o">:</span> <span class="nv">$tooltip-bg</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.</p>
|
||||
<p>Trigger the tooltip via JavaScript:</p>
|
||||
@ -803,11 +826,11 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -392,6 +394,19 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
@ -419,6 +434,11 @@
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-img img-fluid rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-caption text-end"</span><span class="p">></span>A caption for the above image.<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">figure</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$figure-caption-font-size</span><span class="o">:</span> <span class="nv">$small-font-size</span><span class="p">;</span>
|
||||
<span class="nv">$figure-caption-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -434,11 +454,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -400,6 +402,11 @@
|
||||
<li><a href="#image-thumbnails">Image thumbnails</a></li>
|
||||
<li><a href="#aligning-images">Aligning images</a></li>
|
||||
<li><a href="#picture">Picture</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -447,7 +454,17 @@
|
||||
<span class="p"><</span><span class="nt">source</span> <span class="na">srcset</span><span class="o">=</span><span class="s">"..."</span> <span class="na">type</span><span class="o">=</span><span class="s">"image/svg+xml"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">picture</span><span class="p">></span>
|
||||
</code></pre></div><h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<p>Variables are available for image thumbnails.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$thumbnail-padding</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$thumbnail-bg</span><span class="o">:</span> <span class="nv">$body-bg</span><span class="p">;</span>
|
||||
<span class="nv">$thumbnail-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$thumbnail-border-color</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="p">;</span>
|
||||
<span class="nv">$thumbnail-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$thumbnail-box-shadow</span><span class="o">:</span> <span class="nv">$box-shadow-sm</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@ -462,11 +479,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -829,11 +831,11 @@ To edit settings, press <span class="p"><</span><span class="nt">kbd</span><s
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -429,7 +431,13 @@
|
||||
<li><a href="#breakpoint-specific">Breakpoint specific</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#customizing-in-sass">Customizing in Sass</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#loop">Loop</a></li>
|
||||
<li><a href="#customizing">Customizing</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -1981,11 +1989,8 @@
|
||||
...
|
||||
<span class="p"></</span><span class="nt">table</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="customizing-in-sass">Customizing in Sass</h2>
|
||||
<ul>
|
||||
<li>The factor variables (<code>$table-striped-bg-factor</code>, <code>$table-active-bg-factor</code> & <code>$table-hover-bg-factor</code>) are used to determine the contrast in table variants.</li>
|
||||
<li>Apart from the light & dark table variants, theme colors are lightened by the <code>$table-bg-level</code> variable.</li>
|
||||
</ul>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$table-cell-padding-y</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$table-cell-padding-x</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$table-cell-padding-y-sm</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
@ -2021,8 +2026,9 @@
|
||||
<span class="nv">$table-caption-color</span><span class="o">:</span> <span class="nv">$text-muted</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$table-bg-scale</span><span class="o">:</span> <span class="mi">-80</span><span class="kt">%</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$table-variants</span><span class="o">:</span> <span class="p">(</span>
|
||||
</code></pre></div>
|
||||
<h3 id="loop">Loop</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$table-variants</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"primary"</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$primary</span><span class="o">,</span> <span class="nv">$table-bg-scale</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="s2">"secondary"</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$secondary</span><span class="o">,</span> <span class="nv">$table-bg-scale</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="s2">"success"</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$success</span><span class="o">,</span> <span class="nv">$table-bg-scale</span><span class="p">)</span><span class="o">,</span>
|
||||
@ -2033,6 +2039,11 @@
|
||||
<span class="s2">"dark"</span><span class="o">:</span> <span class="nv">$dark</span><span class="o">,</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h3 id="customizing">Customizing</h3>
|
||||
<ul>
|
||||
<li>The factor variables (<code>$table-striped-bg-factor</code>, <code>$table-active-bg-factor</code> & <code>$table-hover-bg-factor</code>) are used to determine the contrast in table variants.</li>
|
||||
<li>Apart from the light & dark table variants, theme colors are lightened by the <code>$table-bg-level</code> variable.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -2048,11 +2059,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -421,6 +423,12 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#responsive-font-sizes">Responsive font sizes</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#mixins">Mixins</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -762,6 +770,54 @@
|
||||
<span class="p"></</span><span class="nt">dl</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="responsive-font-sizes">Responsive font sizes</h2>
|
||||
<p>In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the <a href="/docs/5.0/getting-started/rfs/">RFS page</a> to find out how this works.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<p>Headings have some dedicated variables for sizing and spacing.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$headings-margin-bottom</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$headings-font-family</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$headings-font-style</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$headings-font-weight</span><span class="o">:</span> <span class="mi">500</span><span class="p">;</span>
|
||||
<span class="nv">$headings-line-height</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.2</span><span class="p">;</span>
|
||||
<span class="nv">$headings-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>Miscellaneous typography elements covered here and in <a href="/docs/5.0/content/reboot/">Reboot</a> also have dedicated variables.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$lead-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mi">1</span><span class="mf">.25</span><span class="p">;</span>
|
||||
<span class="nv">$lead-font-weight</span><span class="o">:</span> <span class="mi">300</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$small-font-size</span><span class="o">:</span> <span class="mf">.875</span><span class="kt">em</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$sub-sup-font-size</span><span class="o">:</span> <span class="mf">.75</span><span class="kt">em</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$text-muted</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$initialism-font-size</span><span class="o">:</span> <span class="nv">$small-font-size</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$blockquote-margin-y</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$blockquote-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mi">1</span><span class="mf">.25</span><span class="p">;</span>
|
||||
<span class="nv">$blockquote-footer-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
<span class="nv">$blockquote-footer-font-size</span><span class="o">:</span> <span class="nv">$small-font-size</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$hr-margin-y</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$hr-color</span><span class="o">:</span> <span class="no">inherit</span><span class="p">;</span>
|
||||
<span class="nv">$hr-height</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$hr-opacity</span><span class="o">:</span> <span class="mf">.25</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$legend-margin-bottom</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$legend-font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$legend-font-weight</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$mark-padding</span><span class="o">:</span> <span class="mf">.2</span><span class="kt">em</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$dt-font-weight</span><span class="o">:</span> <span class="nv">$font-weight-bold</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$nested-kbd-font-weight</span><span class="o">:</span> <span class="nv">$font-weight-bold</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$list-inline-padding</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$mark-bg</span><span class="o">:</span> <span class="mh">#fcf8e3</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="mixins">Mixins</h3>
|
||||
<p>There are no dedicated mixins for typography, but Bootstrap does use <a href="/docs/5.0/getting-started/rfs/">Responsive Font Sizing (RFS)</a>.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@ -777,11 +833,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -816,11 +818,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn how and why we build nearly all our components responsively and with base and modifier classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -528,11 +530,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use Bootstrap’s CSS custom properties for fast and forward-looking design and development.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -464,11 +466,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -449,6 +451,7 @@
|
||||
<span class="k">@import</span> <span class="s2">"popover"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"carousel"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"spinners"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"offcanvas"</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// Helpers
|
||||
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">"helpers"</span><span class="p">;</span>
|
||||
@ -496,7 +499,15 @@
|
||||
<h2 id="minify-and-gzip">Minify and gzip</h2>
|
||||
<p>Whenever possible, be sure to compress all the code you serve to your visitors. If you’re using Bootstrap dist files, try to stick to the minified versions (indicated by the <code>.min.css</code> and <code>.min.js</code> extensions). If you’re building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS.</p>
|
||||
<h2 id="nonblocking-files">Nonblocking files</h2>
|
||||
<p><em>Help wanted with this section, please consider opening a PR. Thanks!</em></p>
|
||||
<p>While minifying and using compression might seem like enough, making your files nonblocking ones is also a big step in making your site well-optimized and fast enough.</p>
|
||||
<p>If you are using a <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> plugin in Google Chrome, you may have stumbled over FCP. <a href="https://web.dev/fcp/">The First Contentful Paint</a> metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.</p>
|
||||
<p>You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don’t need to be present on the first paint of your page should be marked with <code>async</code> or <code>defer</code> attributes.</p>
|
||||
<p>This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.</p>
|
||||
<p>If you want to learn more about this, there are already a lot of great articles about it:</p>
|
||||
<ul>
|
||||
<li><a href="https://web.dev/render-blocking-resources/">https://web.dev/render-blocking-resources/</a></li>
|
||||
<li><a href="https://web.dev/defer-non-critical-css/">https://web.dev/defer-non-critical-css/</a></li>
|
||||
</ul>
|
||||
<h2 id="always-use-https">Always use HTTPS</h2>
|
||||
<p>Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and <a href="https://https.cio.gov/everything/">there is no such thing as non-sensitive web traffic</a>. The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs.</p>
|
||||
<p>Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content">mixed active content</a>, leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you’re getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections.</p>
|
||||
@ -515,11 +526,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -495,11 +497,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -480,11 +482,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@ -445,27 +447,33 @@
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss
|
||||
</span><span class="c1">// Option A: Include all of Bootstrap
|
||||
</span><span class="c1"></span>
|
||||
<span class="c1">// Include any default variable overrides here (though functions won't be available)
|
||||
</span><span class="c1"></span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// Add custom code after this
|
||||
<span class="c1">// Then add additional custom code here
|
||||
</span></code></pre></div><div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss
|
||||
</span><span class="c1">// Option B: Include parts of Bootstrap
|
||||
</span><span class="c1"></span>
|
||||
<span class="c1">// Required
|
||||
<span class="c1">// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
|
||||
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/functions"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/variables"</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// 2. Include any default variable overrides here
|
||||
</span><span class="c1"></span>
|
||||
<span class="c1">// 3. Include remainder of required Bootstrap stylesheets
|
||||
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/variables"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/mixins"</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// Include custom variable default overrides here
|
||||
</span><span class="c1"></span>
|
||||
<span class="c1">// Optional
|
||||
<span class="c1">// 4. Include any optional Bootstrap components as you like
|
||||
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/root"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/reboot"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/type"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/images"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/containers"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/grid"</span><span class="p">;</span>
|
||||
</code></pre></div><p>With that setup in place, you can begin to modify any of the Sass variables and maps in your <code>custom.scss</code>. You can also start to add parts of Bootstrap under the <code>// Optional</code> section as needed. We suggest using the full import stack from our <code>bootstrap.scss</code> file as your starting point.</p>
|
||||
|
||||
<span class="c1">// 5. Add additional custom code here
|
||||
</span></code></pre></div><p>With that setup in place, you can begin to modify any of the Sass variables and maps in your <code>custom.scss</code>. You can also start to add parts of Bootstrap under the <code>// Optional</code> section as needed. We suggest using the full import stack from our <code>bootstrap.scss</code> file as your starting point.</p>
|
||||
<h2 id="variable-defaults">Variable defaults</h2>
|
||||
<p>Every Sass variable in Bootstrap includes the <code>!default</code> flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the <code>!default</code> flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.</p>
|
||||
<p>You will find the complete list of Bootstrap’s variables in <code>scss/_variables.scss</code>. Some variables are set to <code>null</code>, these variables don’t output the property unless they are overridden in your configuration.</p>
|
||||
@ -473,16 +481,18 @@
|
||||
<p>Here’s an example that changes the <code>background-color</code> and <code>color</code> for the <code><body></code> when importing and compiling Bootstrap via npm:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Required
|
||||
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/functions"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/variables"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/mixins"</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// Your variable overrides
|
||||
<span class="c1">// Default variable overrides
|
||||
</span><span class="c1"></span><span class="nv">$body-bg</span><span class="o">:</span> <span class="mh">#000</span><span class="p">;</span>
|
||||
<span class="nv">$body-color</span><span class="o">:</span> <span class="mh">#111</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// Required
|
||||
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/variables"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/mixins"</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// Bootstrap and its default variables
|
||||
</span><span class="c1"></span>
|
||||
<span class="c1">// Optional
|
||||
<span class="c1">// Optional Bootstrap components here
|
||||
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/root"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/reboot"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/type"</span><span class="p">;</span>
|
||||
@ -623,11 +633,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-grid.css
vendored
2
docs/5.0/dist/css/bootstrap-grid.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Grid v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-grid.css.map
vendored
2
docs/5.0/dist/css/bootstrap-grid.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap-grid.min.css
vendored
2
docs/5.0/dist/css/bootstrap-grid.min.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Grid v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-grid.min.css.map
vendored
2
docs/5.0/dist/css/bootstrap-grid.min.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap-grid.rtl.css
vendored
2
docs/5.0/dist/css/bootstrap-grid.rtl.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Grid v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-grid.rtl.css.map
vendored
2
docs/5.0/dist/css/bootstrap-grid.rtl.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap-grid.rtl.min.css
vendored
2
docs/5.0/dist/css/bootstrap-grid.rtl.min.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Grid v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
File diff suppressed because one or more lines are too long
10
docs/5.0/dist/css/bootstrap-reboot.css
vendored
10
docs/5.0/dist/css/bootstrap-reboot.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
@ -29,10 +29,6 @@ body {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus:not(:focus-visible) {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
@ -103,7 +99,6 @@ p {
|
||||
|
||||
abbr[title],
|
||||
abbr[data-bs-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
@ -309,6 +304,9 @@ select {
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-reboot.css.map
vendored
2
docs/5.0/dist/css/bootstrap-reboot.css.map
vendored
File diff suppressed because one or more lines are too long
4
docs/5.0/dist/css/bootstrap-reboot.min.css
vendored
4
docs/5.0/dist/css/bootstrap-reboot.min.css
vendored
@ -1,8 +1,8 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-bs-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}
|
||||
*/*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-bs-original-title],abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}
|
||||
/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||
File diff suppressed because one or more lines are too long
10
docs/5.0/dist/css/bootstrap-reboot.rtl.css
vendored
10
docs/5.0/dist/css/bootstrap-reboot.rtl.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
@ -29,10 +29,6 @@ body {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus:not(:focus-visible) {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
@ -103,7 +99,6 @@ p {
|
||||
|
||||
abbr[title],
|
||||
abbr[data-bs-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
@ -309,6 +304,9 @@ select {
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,8 +1,8 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-bs-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-right:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-right:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:right}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:right;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:right}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}[type=email],[type=number],[type=tel],[type=url]{direction:ltr}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}
|
||||
*/*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-bs-original-title],abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-right:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-right:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:right}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:right;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:right}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}[type=email],[type=number],[type=tel],[type=url]{direction:ltr}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}
|
||||
/*# sourceMappingURL=bootstrap-reboot.rtl.min.css.map */
|
||||
File diff suppressed because one or more lines are too long
112
docs/5.0/dist/css/bootstrap-utilities.css
vendored
112
docs/5.0/dist/css/bootstrap-utilities.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Utilities v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap Utilities v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
@ -456,10 +456,6 @@
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
.border-1 {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
@ -1130,6 +1126,10 @@
|
||||
padding-left: 3rem !important;
|
||||
}
|
||||
|
||||
.font-monospace {
|
||||
font-family: var(--bs-font-monospace) !important;
|
||||
}
|
||||
|
||||
.fs-1 {
|
||||
font-size: calc(1.375rem + 1.5vw) !important;
|
||||
}
|
||||
@ -1182,16 +1182,20 @@
|
||||
font-weight: bolder !important;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase !important;
|
||||
.lh-1 {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
.lh-sm {
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
.lh-base {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
.lh-lg {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
.text-start {
|
||||
@ -1206,6 +1210,45 @@
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text-decoration-none {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.text-decoration-underline {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* rtl:begin:remove */
|
||||
.text-break {
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-word !important;
|
||||
}
|
||||
|
||||
/* rtl:end:remove */
|
||||
.text-primary {
|
||||
color: #0d6efd !important;
|
||||
}
|
||||
@ -1262,22 +1305,6 @@
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.lh-1 {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.lh-sm {
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.lh-base {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
.lh-lg {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: #0d6efd !important;
|
||||
}
|
||||
@ -1326,37 +1353,6 @@
|
||||
background-image: var(--bs-gradient) !important;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.text-decoration-none {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.text-decoration-underline {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
/* rtl:begin:remove */
|
||||
.text-break {
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-word !important;
|
||||
}
|
||||
|
||||
/* rtl:end:remove */
|
||||
.font-monospace {
|
||||
font-family: var(--bs-font-monospace) !important;
|
||||
}
|
||||
|
||||
.user-select-all {
|
||||
-webkit-user-select: all !important;
|
||||
-moz-user-select: all !important;
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
96
docs/5.0/dist/css/bootstrap-utilities.rtl.css
vendored
96
docs/5.0/dist/css/bootstrap-utilities.rtl.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Utilities v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap Utilities v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
@ -456,10 +456,6 @@
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
.border-1 {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
@ -1130,6 +1126,10 @@
|
||||
padding-right: 3rem !important;
|
||||
}
|
||||
|
||||
.font-monospace {
|
||||
font-family: var(--bs-font-monospace) !important;
|
||||
}
|
||||
|
||||
.fs-1 {
|
||||
font-size: calc(1.375rem + 1.5vw) !important;
|
||||
}
|
||||
@ -1182,16 +1182,20 @@
|
||||
font-weight: bolder !important;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase !important;
|
||||
.lh-1 {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
.lh-sm {
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
.lh-base {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
.lh-lg {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
.text-start {
|
||||
@ -1206,6 +1210,37 @@
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text-decoration-none {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.text-decoration-underline {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
.text-primary {
|
||||
color: #0d6efd !important;
|
||||
}
|
||||
@ -1262,22 +1297,6 @@
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.lh-1 {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.lh-sm {
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.lh-base {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
.lh-lg {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: #0d6efd !important;
|
||||
}
|
||||
@ -1326,29 +1345,6 @@
|
||||
background-image: var(--bs-gradient) !important;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.text-decoration-none {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.text-decoration-underline {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
.font-monospace {
|
||||
font-family: var(--bs-font-monospace) !important;
|
||||
}
|
||||
|
||||
.user-select-all {
|
||||
-webkit-user-select: all !important;
|
||||
-moz-user-select: all !important;
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
303
docs/5.0/dist/css/bootstrap.css
vendored
303
docs/5.0/dist/css/bootstrap.css
vendored
@ -1,6 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Bootstrap v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
@ -56,10 +56,6 @@ body {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus:not(:focus-visible) {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
@ -130,7 +126,6 @@ p {
|
||||
|
||||
abbr[title],
|
||||
abbr[data-bs-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
@ -336,6 +331,9 @@ select {
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
@ -2184,10 +2182,6 @@ progress {
|
||||
.form-control::-webkit-date-and-time-value {
|
||||
height: 1.5em;
|
||||
}
|
||||
.form-control::-webkit-input-placeholder {
|
||||
color: #6c757d;
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control::-moz-placeholder {
|
||||
color: #6c757d;
|
||||
opacity: 1;
|
||||
@ -2359,7 +2353,6 @@ textarea.form-control-lg {
|
||||
background-image: none;
|
||||
}
|
||||
.form-select:disabled {
|
||||
color: #6c757d;
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
.form-select:-moz-focusring {
|
||||
@ -2600,9 +2593,6 @@ textarea.form-control-lg {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.form-floating > .form-control::-webkit-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
.form-floating > .form-control::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
@ -2796,6 +2786,12 @@ textarea.form-control-lg {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid,
|
||||
.was-validated .input-group .form-select:valid,
|
||||
.input-group .form-select.is-valid {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
display: none;
|
||||
width: 100%;
|
||||
@ -2872,6 +2868,12 @@ textarea.form-control-lg {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid,
|
||||
.was-validated .input-group .form-select:invalid,
|
||||
.input-group .form-select.is-invalid {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
@ -3546,11 +3548,9 @@ textarea.form-control-lg {
|
||||
left: auto /* rtl:ignore */;
|
||||
}
|
||||
}
|
||||
.dropup .dropdown-menu {
|
||||
.dropup .dropdown-menu[data-bs-popper] {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
}
|
||||
.dropup .dropdown-menu[data-bs-popper] {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
@ -3887,6 +3887,11 @@ textarea.form-control-lg {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-fill .nav-item .nav-link,
|
||||
.nav-justified .nav-item .nav-link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-content > .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
@ -4268,7 +4273,7 @@ textarea.form-control-lg {
|
||||
text-decoration: none;
|
||||
}
|
||||
.card-link + .card-link {
|
||||
margin-left: 1rem /* rtl:ignore */;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@ -4381,8 +4386,8 @@ textarea.form-control-lg {
|
||||
font-size: 1rem;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
overflow-anchor: none;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
|
||||
@ -4392,12 +4397,10 @@ textarea.form-control-lg {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.accordion-button.collapsed {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
.accordion-button:not(.collapsed) {
|
||||
color: #0c63e4;
|
||||
background-color: #e7f1ff;
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
.accordion-button:not(.collapsed)::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
|
||||
@ -4433,47 +4436,53 @@ textarea.form-control-lg {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion-item:first-of-type .accordion-button {
|
||||
.accordion-item {
|
||||
margin-bottom: -1px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
.accordion-item:first-of-type {
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
.accordion-item:last-of-type .accordion-button.collapsed {
|
||||
border-bottom-width: 1px;
|
||||
.accordion-item:first-of-type .accordion-button {
|
||||
border-top-left-radius: calc(0.25rem - 1px);
|
||||
border-top-right-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
.accordion-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
.accordion-item:last-of-type .accordion-button.collapsed {
|
||||
border-bottom-right-radius: calc(0.25rem - 1px);
|
||||
border-bottom-left-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
.accordion-item:last-of-type .accordion-collapse {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.accordion-collapse {
|
||||
border: solid rgba(0, 0, 0, 0.125);
|
||||
border-width: 0 1px;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.accordion-flush .accordion-button {
|
||||
.accordion-flush .accordion-collapse {
|
||||
border-width: 0;
|
||||
}
|
||||
.accordion-flush .accordion-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion-flush .accordion-collapse {
|
||||
border-width: 0;
|
||||
.accordion-flush .accordion-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.accordion-flush .accordion-item:first-of-type .accordion-button {
|
||||
border-top-width: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
.accordion-flush .accordion-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.accordion-flush .accordion-item:last-of-type .accordion-button.collapsed {
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
.accordion-flush .accordion-item .accordion-button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
@ -4767,6 +4776,15 @@ textarea.form-control-lg {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.list-group-numbered {
|
||||
list-style-type: none;
|
||||
counter-reset: section;
|
||||
}
|
||||
.list-group-numbered > li::before {
|
||||
content: counters(section, ".") ". ";
|
||||
counter-increment: section;
|
||||
}
|
||||
|
||||
.list-group-item-action {
|
||||
width: 100%;
|
||||
color: #495057;
|
||||
@ -4787,6 +4805,7 @@ textarea.form-control-lg {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
@ -5178,7 +5197,7 @@ textarea.form-control-lg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1050;
|
||||
z-index: 1060;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -5242,7 +5261,7 @@ textarea.form-control-lg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1040;
|
||||
z-index: 1050;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
@ -5465,7 +5484,7 @@ textarea.form-control-lg {
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
z-index: 1080;
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-family: var(--bs-font-sans-serif);
|
||||
@ -5567,7 +5586,7 @@ textarea.form-control-lg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0 /* rtl:ignore */;
|
||||
z-index: 1060;
|
||||
z-index: 1070;
|
||||
display: block;
|
||||
max-width: 276px;
|
||||
font-family: var(--bs-font-sans-serif);
|
||||
@ -5972,6 +5991,86 @@ textarea.form-control-lg {
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
}
|
||||
.offcanvas {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1040;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
visibility: hidden;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
outline: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.offcanvas {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
.offcanvas-header .btn-close {
|
||||
padding: 0.5rem 0.5rem;
|
||||
margin: -0.5rem -0.5rem -0.5rem auto;
|
||||
}
|
||||
|
||||
.offcanvas-title {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.offcanvas-body {
|
||||
flex-grow: 1;
|
||||
padding: 1rem 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.offcanvas-start {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30vh;
|
||||
max-height: 100%;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.offcanvas.show {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.offcanvas-backdrop::before {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1039;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
@ -6424,10 +6523,6 @@ textarea.form-control-lg {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
.border-1 {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
@ -7098,6 +7193,10 @@ textarea.form-control-lg {
|
||||
padding-left: 3rem !important;
|
||||
}
|
||||
|
||||
.font-monospace {
|
||||
font-family: var(--bs-font-monospace) !important;
|
||||
}
|
||||
|
||||
.fs-1 {
|
||||
font-size: calc(1.375rem + 1.5vw) !important;
|
||||
}
|
||||
@ -7150,16 +7249,20 @@ textarea.form-control-lg {
|
||||
font-weight: bolder !important;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase !important;
|
||||
.lh-1 {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
.lh-sm {
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
.lh-base {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
.lh-lg {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
.text-start {
|
||||
@ -7174,6 +7277,45 @@ textarea.form-control-lg {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text-decoration-none {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.text-decoration-underline {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* rtl:begin:remove */
|
||||
.text-break {
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-word !important;
|
||||
}
|
||||
|
||||
/* rtl:end:remove */
|
||||
.text-primary {
|
||||
color: #0d6efd !important;
|
||||
}
|
||||
@ -7230,22 +7372,6 @@ textarea.form-control-lg {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.lh-1 {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.lh-sm {
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.lh-base {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
.lh-lg {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: #0d6efd !important;
|
||||
}
|
||||
@ -7294,37 +7420,6 @@ textarea.form-control-lg {
|
||||
background-image: var(--bs-gradient) !important;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.text-decoration-none {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.text-decoration-underline {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
/* rtl:begin:remove */
|
||||
.text-break {
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-word !important;
|
||||
}
|
||||
|
||||
/* rtl:end:remove */
|
||||
.font-monospace {
|
||||
font-family: var(--bs-font-monospace) !important;
|
||||
}
|
||||
|
||||
.user-select-all {
|
||||
-webkit-user-select: all !important;
|
||||
-moz-user-select: all !important;
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap.css.map
vendored
2
docs/5.0/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
4
docs/5.0/dist/css/bootstrap.min.css
vendored
4
docs/5.0/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap.min.css.map
vendored
2
docs/5.0/dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
287
docs/5.0/dist/css/bootstrap.rtl.css
vendored
287
docs/5.0/dist/css/bootstrap.rtl.css
vendored
@ -1,6 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Bootstrap v5.0.0-beta2 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
@ -56,10 +56,6 @@ body {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus:not(:focus-visible) {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
@ -130,7 +126,6 @@ p {
|
||||
|
||||
abbr[title],
|
||||
abbr[data-bs-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
@ -336,6 +331,9 @@ select {
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
@ -2182,10 +2180,6 @@ progress {
|
||||
.form-control::-webkit-date-and-time-value {
|
||||
height: 1.5em;
|
||||
}
|
||||
.form-control::-webkit-input-placeholder {
|
||||
color: #6c757d;
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control::-moz-placeholder {
|
||||
color: #6c757d;
|
||||
opacity: 1;
|
||||
@ -2357,7 +2351,6 @@ textarea.form-control-lg {
|
||||
background-image: none;
|
||||
}
|
||||
.form-select:disabled {
|
||||
color: #6c757d;
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
.form-select:-moz-focusring {
|
||||
@ -2598,9 +2591,6 @@ textarea.form-control-lg {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.form-floating > .form-control::-webkit-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
.form-floating > .form-control::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
@ -2794,6 +2784,12 @@ textarea.form-control-lg {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid,
|
||||
.was-validated .input-group .form-select:valid,
|
||||
.input-group .form-select.is-valid {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
display: none;
|
||||
width: 100%;
|
||||
@ -2870,6 +2866,12 @@ textarea.form-control-lg {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid,
|
||||
.was-validated .input-group .form-select:invalid,
|
||||
.input-group .form-select.is-invalid {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
@ -3544,11 +3546,9 @@ textarea.form-control-lg {
|
||||
left: auto ;
|
||||
}
|
||||
}
|
||||
.dropup .dropdown-menu {
|
||||
.dropup .dropdown-menu[data-bs-popper] {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
}
|
||||
.dropup .dropdown-menu[data-bs-popper] {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
@ -3885,6 +3885,11 @@ textarea.form-control-lg {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-fill .nav-item .nav-link,
|
||||
.nav-justified .nav-item .nav-link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-content > .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
@ -4266,7 +4271,7 @@ textarea.form-control-lg {
|
||||
text-decoration: none;
|
||||
}
|
||||
.card-link + .card-link {
|
||||
margin-left: 1rem ;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@ -4379,8 +4384,8 @@ textarea.form-control-lg {
|
||||
font-size: 1rem;
|
||||
color: #212529;
|
||||
text-align: right;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
overflow-anchor: none;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
|
||||
@ -4390,12 +4395,10 @@ textarea.form-control-lg {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.accordion-button.collapsed {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
.accordion-button:not(.collapsed) {
|
||||
color: #0c63e4;
|
||||
background-color: #e7f1ff;
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
.accordion-button:not(.collapsed)::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
|
||||
@ -4431,47 +4434,53 @@ textarea.form-control-lg {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion-item:first-of-type .accordion-button {
|
||||
.accordion-item {
|
||||
margin-bottom: -1px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
.accordion-item:first-of-type {
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-top-left-radius: 0.25rem;
|
||||
}
|
||||
.accordion-item:last-of-type .accordion-button.collapsed {
|
||||
border-bottom-width: 1px;
|
||||
.accordion-item:first-of-type .accordion-button {
|
||||
border-top-right-radius: calc(0.25rem - 1px);
|
||||
border-top-left-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
.accordion-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
.accordion-item:last-of-type .accordion-button.collapsed {
|
||||
border-bottom-left-radius: calc(0.25rem - 1px);
|
||||
border-bottom-right-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
.accordion-item:last-of-type .accordion-collapse {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.accordion-collapse {
|
||||
border: solid rgba(0, 0, 0, 0.125);
|
||||
border-width: 0 1px;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.accordion-flush .accordion-button {
|
||||
.accordion-flush .accordion-collapse {
|
||||
border-width: 0;
|
||||
}
|
||||
.accordion-flush .accordion-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion-flush .accordion-collapse {
|
||||
border-width: 0;
|
||||
.accordion-flush .accordion-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.accordion-flush .accordion-item:first-of-type .accordion-button {
|
||||
border-top-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
.accordion-flush .accordion-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.accordion-flush .accordion-item:last-of-type .accordion-button.collapsed {
|
||||
border-bottom-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
.accordion-flush .accordion-item .accordion-button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
@ -4765,6 +4774,15 @@ textarea.form-control-lg {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.list-group-numbered {
|
||||
list-style-type: none;
|
||||
counter-reset: section;
|
||||
}
|
||||
.list-group-numbered > li::before {
|
||||
content: counters(section, ".") ". ";
|
||||
counter-increment: section;
|
||||
}
|
||||
|
||||
.list-group-item-action {
|
||||
width: 100%;
|
||||
color: #495057;
|
||||
@ -4785,6 +4803,7 @@ textarea.form-control-lg {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
@ -5176,7 +5195,7 @@ textarea.form-control-lg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1050;
|
||||
z-index: 1060;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -5240,7 +5259,7 @@ textarea.form-control-lg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1040;
|
||||
z-index: 1050;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
@ -5463,7 +5482,7 @@ textarea.form-control-lg {
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
z-index: 1080;
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-family: var(--bs-font-sans-serif);
|
||||
@ -5565,7 +5584,7 @@ textarea.form-control-lg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0 ;
|
||||
z-index: 1060;
|
||||
z-index: 1070;
|
||||
display: block;
|
||||
max-width: 276px;
|
||||
font-family: var(--bs-font-sans-serif);
|
||||
@ -5957,6 +5976,86 @@ textarea.form-control-lg {
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
}
|
||||
.offcanvas {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1040;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
visibility: hidden;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
outline: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.offcanvas {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
.offcanvas-header .btn-close {
|
||||
padding: 0.5rem 0.5rem;
|
||||
margin: -0.5rem auto -0.5rem -0.5rem;
|
||||
}
|
||||
|
||||
.offcanvas-title {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.offcanvas-body {
|
||||
flex-grow: 1;
|
||||
padding: 1rem 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.offcanvas-start {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.offcanvas-end {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.offcanvas-bottom {
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30vh;
|
||||
max-height: 100%;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.offcanvas.show {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.offcanvas-backdrop::before {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1039;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
@ -6409,10 +6508,6 @@ textarea.form-control-lg {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
.border-1 {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
@ -7083,6 +7178,10 @@ textarea.form-control-lg {
|
||||
padding-right: 3rem !important;
|
||||
}
|
||||
|
||||
.font-monospace {
|
||||
font-family: var(--bs-font-monospace) !important;
|
||||
}
|
||||
|
||||
.fs-1 {
|
||||
font-size: calc(1.375rem + 1.5vw) !important;
|
||||
}
|
||||
@ -7135,16 +7234,20 @@ textarea.form-control-lg {
|
||||
font-weight: bolder !important;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase !important;
|
||||
.lh-1 {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
.lh-sm {
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
.lh-base {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
.lh-lg {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
.text-start {
|
||||
@ -7159,6 +7262,37 @@ textarea.form-control-lg {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text-decoration-none {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.text-decoration-underline {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
.text-primary {
|
||||
color: #0d6efd !important;
|
||||
}
|
||||
@ -7215,22 +7349,6 @@ textarea.form-control-lg {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.lh-1 {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.lh-sm {
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.lh-base {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
.lh-lg {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: #0d6efd !important;
|
||||
}
|
||||
@ -7279,29 +7397,6 @@ textarea.form-control-lg {
|
||||
background-image: var(--bs-gradient) !important;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.text-decoration-none {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.text-decoration-underline {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
.font-monospace {
|
||||
font-family: var(--bs-font-monospace) !important;
|
||||
}
|
||||
|
||||
.user-select-all {
|
||||
-webkit-user-select: all !important;
|
||||
-moz-user-select: all !important;
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap.rtl.css.map
vendored
2
docs/5.0/dist/css/bootstrap.rtl.css.map
vendored
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user