mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-16 21:18:25 +01:00
Code Issues Releases Wiki Activity

Add v5.0.2 docs

Browse Source
This commit is contained in:
XhmikosR 2021-06-22 21:28:23 +03:00
parent 258f7e37f3
commit a43dd5a897
181 changed files with 4591 additions and 4253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
404.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<meta name="robots" content="noindex,follow"> <meta name="robots" content="noindex,follow">
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -158,7 +158,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -205,7 +205,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

8
docs/5.0/about/brand/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Documentation and examples for Bootstrap&rsquo;s logo and brand usage guidelines."> <meta name="description" content="Documentation and examples for Bootstrap&rsquo;s logo and brand usage guidelines.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -456,7 +456,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -503,7 +503,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

10
docs/5.0/about/license/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Commonly asked questions about Bootstrap&rsquo;s open source license."> <meta name="description" content="Commonly asked questions about Bootstrap&rsquo;s open source license.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -423,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>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> <li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
</ul> </ul>
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v5.0.1/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.2/LICENSE">in the project repository</a> for more information.</p>
</div> </div>
</main> </main>
@ -441,7 +441,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -488,7 +488,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

10
docs/5.0/about/overview/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -407,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&rsquo;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>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&rsquo;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, focuses on improving v4&rsquo;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> <p>Our latest release, Bootstrap 5, focuses on improving v4&rsquo;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> <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.1/.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.2/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
</div> </div>
</main> </main>
@ -425,7 +425,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -472,7 +472,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

10
docs/5.0/about/team/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -479,7 +479,7 @@
</a> </a>
</div> </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.1/.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.2/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
</div> </div>
</main> </main>
@ -497,7 +497,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -544,7 +544,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

9
docs/5.0/about/translations/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Links to community-translated Bootstrap documentation sites."> <meta name="description" content="Links to community-translated Bootstrap documentation sites.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -409,6 +409,7 @@
<li><a href="https://getbootstrap.su/" hreflang="ru">Bootstrap 5 на русском (Russian)</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://getbootstrap.kr/" hreflang="ko">Bootstrap 5 한국어 문서 (Korean)</a></li>
<li><a href="https://bootstrap5.hexschool.com/" hreflang="zh-tw">Bootstrap 5 繁體中文手冊 (中文(繁體))</a></li> <li><a href="https://bootstrap5.hexschool.com/" hreflang="zh-tw">Bootstrap 5 繁體中文手冊 (中文(繁體))</a></li>
<li><a href="https://v5.bootcss.com/" hreflang="zh-CN">Bootstrap 5 中文文档 (Simplified Chinese)</a></li>
</ul> </ul>
<p><strong>We don&rsquo;t help organize or host translations, we just link to them.</strong></p> <p><strong>We don&rsquo;t help organize or host translations, we just link to them.</strong></p>
@ -430,7 +431,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -477,7 +478,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

2
docs/5.0/assets/css/docs.css
View File

File diff suppressed because one or more lines are too long

14
docs/5.0/components/accordion/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -670,7 +670,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<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-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-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-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-transition</span><span class="o">:</span> <span class="nv">$btn-transition</span><span class="o">,</span> <span class="n">border-radius</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">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-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-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>
@ -680,8 +680,8 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<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-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-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-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-transition</span><span class="o">:</span> <span class="ni">transform</span> <span class="mf">.2</span><span class="kt">s</span> <span class="ni">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-icon-transform</span><span class="o">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="o">-</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(&#34;data:image/svg+xml,&lt;svg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 16 16&#39; fill=&#39;</span><span class="si">#{</span><span class="nv">$accordion-icon-color</span><span class="si">}</span><span class="sx">&#39;&gt;&lt;path fill-rule=&#39;evenodd&#39; d=&#39;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&#39;/&gt;&lt;/svg&gt;&#34;)</span><span class="p">;</span> <span class="nv">$accordion-button-icon</span><span class="o">:</span> <span class="sx">url(&#34;data:image/svg+xml,&lt;svg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 16 16&#39; fill=&#39;</span><span class="si">#{</span><span class="nv">$accordion-icon-color</span><span class="si">}</span><span class="sx">&#39;&gt;&lt;path fill-rule=&#39;evenodd&#39; d=&#39;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&#39;/&gt;&lt;/svg&gt;&#34;)</span><span class="p">;</span>
<span class="nv">$accordion-button-active-icon</span><span class="o">:</span> <span class="sx">url(&#34;data:image/svg+xml,&lt;svg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 16 16&#39; fill=&#39;</span><span class="si">#{</span><span class="nv">$accordion-icon-active-color</span><span class="si">}</span><span class="sx">&#39;&gt;&lt;path fill-rule=&#39;evenodd&#39; d=&#39;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&#39;/&gt;&lt;/svg&gt;&#34;)</span><span class="p">;</span> <span class="nv">$accordion-button-active-icon</span><span class="o">:</span> <span class="sx">url(&#34;data:image/svg+xml,&lt;svg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 16 16&#39; fill=&#39;</span><span class="si">#{</span><span class="nv">$accordion-icon-active-color</span><span class="si">}</span><span class="sx">&#39;&gt;&lt;path fill-rule=&#39;evenodd&#39; d=&#39;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&#39;/&gt;&lt;/svg&gt;&#34;)</span><span class="p">;</span>
@ -703,7 +703,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -750,7 +750,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

29
docs/5.0/components/alerts/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -675,20 +675,20 @@ When an alert is dismissed, the element is completely removed from the page stru
<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-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-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-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-bg-scale</span><span class="o">:</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-border-scale</span><span class="o">:</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-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 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> </span></code></pre></div>
<h3 id="variant-mixin">Variant mixin</h3> <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> <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> <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="na">color</span><span class="o">:</span> <span class="nv">$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="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="na">border-color</span><span class="o">:</span> <span class="nv">$border</span><span class="p">;</span>
<span class="nc">.alert-link</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="na">color</span><span class="o">:</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="mi">20</span><span class="kt">%</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div> </code></pre></div>
@ -696,7 +696,7 @@ When an alert is dismissed, the element is completely removed from the page stru
<p>Loop that generates the modifier classes with the <code>alert-variant()</code> mixin.</p> <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. <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><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="k">@each</span> <span class="nv">$state</span><span class="o">,</span> <span class="nv">$value</span> <span class="ow">in</span> <span class="nv">$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-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-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="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>
@ -755,6 +755,15 @@ When an alert is dismissed, the element is completely removed from the page stru
Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: <code>bootstrap.Alert.getInstance(alert)</code> Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: <code>bootstrap.Alert.getInstance(alert)</code>
</td> </td>
</tr> </tr>
<tr>
<td>
<code>getOrCreateInstance</code>
</td>
<td>
Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialised.
You can use it like this: <code>bootstrap.Alert.getOrCreateInstance(element)</code>
</td>
</tr>
</tbody> </tbody>
</table> </table>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">alertNode</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;.alert&#39;</span><span class="p">)</span> <div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">alertNode</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;.alert&#39;</span><span class="p">)</span>
@ -807,7 +816,7 @@ When an alert is dismissed, the element is completely removed from the page stru
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -854,7 +863,7 @@ When an alert is dismissed, the element is completely removed from the page stru
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

54
docs/5.0/components/badge/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -398,7 +398,13 @@
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong> <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents"> <nav id="TableOfContents">
<ul> <ul>
<li><a href="#example">Example</a></li> <li><a href="#examples">Examples</a>
<ul>
<li><a href="#headings">Headings</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#positioned">Positioned</a></li>
</ul>
</li>
<li><a href="#background-colors">Background colors</a></li> <li><a href="#background-colors">Background colors</a></li>
<li><a href="#pill-badges">Pill badges</a></li> <li><a href="#pill-badges">Pill badges</a></li>
<li><a href="#sass">Sass</a> <li><a href="#sass">Sass</a>
@ -414,8 +420,9 @@
<div class="bd-content ps-lg-4"> <div class="bd-content ps-lg-4">
<h2 id="example">Example</h2> <h2 id="examples">Examples</h2>
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units. As of v5, badges no longer have focus or hover styles for links.</p> <p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units. As of v5, badges no longer have focus or hover styles for links.</p>
<h3 id="headings">Headings</h3>
<div class="bd-example"> <div class="bd-example">
<h1>Example heading <span class="badge bg-secondary">New</span></h1> <h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2> <h2>Example heading <span class="badge bg-secondary">New</span></h2>
@ -429,6 +436,7 @@
<span class="p">&lt;</span><span class="nt">h4</span><span class="p">&gt;</span>Example heading <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;badge bg-secondary&#34;</span><span class="p">&gt;</span>New<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h4</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">h4</span><span class="p">&gt;</span>Example heading <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;badge bg-secondary&#34;</span><span class="p">&gt;</span>New<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h4</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h5</span><span class="p">&gt;</span>Example heading <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;badge bg-secondary&#34;</span><span class="p">&gt;</span>New<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">h5</span><span class="p">&gt;</span>Example heading <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;badge bg-secondary&#34;</span><span class="p">&gt;</span>New<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h6</span><span class="p">&gt;</span>Example heading <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;badge bg-secondary&#34;</span><span class="p">&gt;</span>New<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h6</span><span class="p">&gt;</span></code></pre></div> <span class="p">&lt;</span><span class="nt">h6</span><span class="p">&gt;</span>Example heading <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;badge bg-secondary&#34;</span><span class="p">&gt;</span>New<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h6</span><span class="p">&gt;</span></code></pre></div>
<h3 id="buttons">Buttons</h3>
<p>Badges can be used as part of links or buttons to provide a counter.</p> <p>Badges can be used as part of links or buttons to provide a counter.</p>
<div class="bd-example"> <div class="bd-example">
<button type="button" class="btn btn-primary"> <button type="button" class="btn btn-primary">
@ -439,14 +447,36 @@
<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span></code></pre></div> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span></code></pre></div>
<p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p> <p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
<p>Unless the context is clear (as with the &ldquo;Notifications&rdquo; example, where it is understood that the &ldquo;4&rdquo; is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p> <p>Unless the context is clear (as with the &ldquo;Notifications&rdquo; example, where it is understood that the &ldquo;4&rdquo; is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
<h3 id="positioned">Positioned</h3>
<p>Use utilities to modify a <code>.badge</code> and position it in the corner of a link or button.</p>
<div class="bd-example"> <div class="bd-example">
<button type="button" class="btn btn-primary"> <button type="button" class="btn btn-primary position-relative">
Profile <span class="badge bg-secondary">9</span> Inbox
<span class="visually-hidden">unread messages</span> <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button> </button>
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary&#34;</span><span class="p">&gt;</span> </div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary position-relative&#34;</span><span class="p">&gt;</span>
Profile <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;badge bg-secondary&#34;</span><span class="p">&gt;</span>9<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> Inbox
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;visually-hidden&#34;</span><span class="p">&gt;</span>unread messages<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger&#34;</span><span class="p">&gt;</span>
99+
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;visually-hidden&#34;</span><span class="p">&gt;</span>unread messages<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span></code></pre></div>
<p>You can also replace the <code>.badge</code> class with a few more utilities without a count for a more generic indicator.</p>
<div class="bd-example">
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary position-relative&#34;</span><span class="p">&gt;</span>
Profile
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;visually-hidden&#34;</span><span class="p">&gt;</span>New alerts<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span></code></pre></div> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span></code></pre></div>
<h2 id="background-colors">Background colors</h2> <h2 id="background-colors">Background colors</h2>
<p>Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap&rsquo;s default <code>.bg-light</code>, you&rsquo;ll likely need a text color utility like <code>.text-dark</code> for proper styling. This is because background utilities do not set anything but <code>background-color</code>.</p> <p>Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap&rsquo;s default <code>.bg-light</code>, you&rsquo;ll likely need a text color utility like <code>.text-dark</code> for proper styling. This is because background utilities do not set anything but <code>background-color</code>.</p>
@ -519,7 +549,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -566,7 +596,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

10
docs/5.0/components/breadcrumb/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Indicate the current page&rsquo;s location within a navigational hierarchy that automatically adds separators via CSS."> <meta name="description" content="Indicate the current page&rsquo;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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -503,7 +503,7 @@
<span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;breadcrumb-item active&#34;</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">&#34;page&#34;</span><span class="p">&gt;</span>Library<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;breadcrumb-item active&#34;</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">&#34;page&#34;</span><span class="p">&gt;</span>Library<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span></code></pre></div> <span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span></code></pre></div>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$breadcrumb-divider</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$breadcrumb-divider</span><span class="o">:</span> <span class="ni">none</span><span class="p">;</span>
</code></pre></div><h2 id="accessibility">Accessibility</h2> </code></pre></div><h2 id="accessibility">Accessibility</h2>
<p>Since breadcrumbs provide a navigation, it&rsquo;s a good idea to add a meaningful label such as <code>aria-label=&quot;breadcrumb&quot;</code> to describe the type of navigation provided in the <code>&lt;nav&gt;</code> element, as well as applying an <code>aria-current=&quot;page&quot;</code> to the last item of the set to indicate that it represents the current page.</p> <p>Since breadcrumbs provide a navigation, it&rsquo;s a good idea to add a meaningful label such as <code>aria-label=&quot;breadcrumb&quot;</code> to describe the type of navigation provided in the <code>&lt;nav&gt;</code> element, as well as applying an <code>aria-current=&quot;page&quot;</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> <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>
@ -538,7 +538,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -585,7 +585,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

8
docs/5.0/components/button-group/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -742,7 +742,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -789,7 +789,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

103
docs/5.0/components/buttons/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Use Bootstrap&rsquo;s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more."> <meta name="description" content="Use Bootstrap&rsquo;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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -621,6 +621,23 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
Destroys an element's button. (Removes stored data on the DOM element) Destroys an element's button. (Removes stored data on the DOM element)
</td> </td>
</tr> </tr>
<tr>
<td>
<code>getInstance</code>
</td>
<td>
Static method which allows you to get the button instance associated to a DOM element, you can use it like this: <code>bootstrap.Button.getInstance(element)</code>
</td>
</tr>
<tr>
<td>
<code>getOrCreateInstance</code>
</td>
<td>
Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialised.
You can use it like this: <code>bootstrap.Button.getOrCreateInstance(element)</code>
</td>
</tr>
</tbody> </tbody>
</table> </table>
<p>For example, to toggle all buttons</p> <p>For example, to toggle all buttons</p>
@ -649,11 +666,11 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
<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-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-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-box-shadow</span><span class="o">:</span> <span class="ni">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-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-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-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-active-box-shadow</span><span class="o">:</span> <span class="ni">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-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-hover-color</span><span class="o">:</span> <span class="nv">$link-hover-color</span><span class="p">;</span>
@ -664,7 +681,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
<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-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-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-transition</span><span class="o">:</span> <span class="ni">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="n">background-color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="n">border-color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="n">box-shadow</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">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-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-bg-tint-amount</span><span class="o">:</span> <span class="mi">15</span><span class="kt">%</span><span class="p">;</span>
@ -684,34 +701,34 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
<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-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-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">$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-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-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">$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-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-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="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="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="na">color</span><span class="o">:</span> <span class="nv">$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="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="na">border-color</span><span class="o">:</span> <span class="nv">$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">@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">&amp;</span><span class="nd">:hover</span> <span class="p">{</span> <span class="k">&amp;</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="na">color</span><span class="o">:</span> <span class="nv">$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="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="na">border-color</span><span class="o">:</span> <span class="nv">$hover-border</span><span class="p">;</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">&amp;</span><span class="o">,</span> <span class="nc">.btn-check</span><span class="nd">:focus</span> <span class="o">+</span> <span class="k">&amp;</span><span class="o">,</span>
<span class="k">&amp;</span><span class="nd">:focus</span> <span class="p">{</span> <span class="k">&amp;</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="na">color</span><span class="o">:</span> <span class="nv">$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="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="na">border-color</span><span class="o">:</span> <span class="nv">$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">@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="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="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 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><span class="c1"></span> <span class="na">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="p">}</span>
<span class="p">}</span> <span class="p">}</span>
@ -720,29 +737,29 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
<span class="k">&amp;</span><span class="nd">:active</span><span class="o">,</span> <span class="k">&amp;</span><span class="nd">:active</span><span class="o">,</span>
<span class="k">&amp;</span><span class="nc">.active</span><span class="o">,</span> <span class="k">&amp;</span><span class="nc">.active</span><span class="o">,</span>
<span class="nc">.show</span> <span class="o">&gt;</span> <span class="k">&amp;</span><span class="nc">.dropdown-toggle</span> <span class="p">{</span> <span class="nc">.show</span> <span class="o">&gt;</span> <span class="k">&amp;</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="na">color</span><span class="o">:</span> <span class="nv">$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="na">background-color</span><span class="o">:</span> <span class="nv">$active-background</span><span class="p">;</span>
<span class="c1">// Remove CSS gradients if they&#39;re enabled <span class="c1">// Remove CSS gradients if they&#39;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><span class="c1"></span> <span class="na">background-image</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$enable-gradients</span><span class="o">,</span> <span class="ni">none</span><span class="o">,</span> <span class="n">null</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="na">border-color</span><span class="o">:</span> <span class="nv">$active-border</span><span class="p">;</span>
<span class="k">&amp;</span><span class="nd">:focus</span> <span class="p">{</span> <span class="k">&amp;</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">@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="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="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 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><span class="c1"></span> <span class="na">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="p">}</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
<span class="k">&amp;</span><span class="nd">:disabled</span><span class="o">,</span> <span class="na">&amp;</span><span class="o">:</span><span class="n">disabled</span><span class="o">,</span>
<span class="k">&amp;</span><span class="nc">.disabled</span> <span class="p">{</span> <span class="o">&amp;.</span><span class="n">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="na">color</span><span class="o">:</span> <span class="nv">$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="na">background-color</span><span class="o">:</span> <span class="nv">$disabled-background</span><span class="p">;</span>
<span class="c1">// Remove CSS gradients if they&#39;re enabled <span class="c1">// Remove CSS gradients if they&#39;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><span class="c1"></span> <span class="na">background-image</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$enable-gradients</span><span class="o">,</span> <span class="ni">none</span><span class="o">,</span> <span class="n">null</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="na">border-color</span><span class="o">:</span> <span class="nv">$disabled-border</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div> </code></pre></div>
@ -753,18 +770,18 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
<span class="nv">$active-border</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="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="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="na">color</span><span class="o">:</span> <span class="nv">$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="na">border-color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
<span class="k">&amp;</span><span class="nd">:hover</span> <span class="p">{</span> <span class="k">&amp;</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="na">color</span><span class="o">:</span> <span class="nv">$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="na">background-color</span><span class="o">:</span> <span class="nv">$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="na">border-color</span><span class="o">:</span> <span class="nv">$active-border</span><span class="p">;</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">&amp;</span><span class="o">,</span> <span class="nc">.btn-check</span><span class="nd">:focus</span> <span class="o">+</span> <span class="k">&amp;</span><span class="o">,</span>
<span class="k">&amp;</span><span class="nd">:focus</span> <span class="p">{</span> <span class="k">&amp;</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="na">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="p">}</span>
<span class="nc">.btn-check</span><span class="nd">:checked</span> <span class="o">+</span> <span class="k">&amp;</span><span class="o">,</span> <span class="nc">.btn-check</span><span class="nd">:checked</span> <span class="o">+</span> <span class="k">&amp;</span><span class="o">,</span>
@ -772,29 +789,29 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
<span class="k">&amp;</span><span class="nd">:active</span><span class="o">,</span> <span class="k">&amp;</span><span class="nd">:active</span><span class="o">,</span>
<span class="k">&amp;</span><span class="nc">.active</span><span class="o">,</span> <span class="k">&amp;</span><span class="nc">.active</span><span class="o">,</span>
<span class="k">&amp;</span><span class="nc">.dropdown-toggle.show</span> <span class="p">{</span> <span class="k">&amp;</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="na">color</span><span class="o">:</span> <span class="nv">$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="na">background-color</span><span class="o">:</span> <span class="nv">$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="na">border-color</span><span class="o">:</span> <span class="nv">$active-border</span><span class="p">;</span>
<span class="k">&amp;</span><span class="nd">:focus</span> <span class="p">{</span> <span class="k">&amp;</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">@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="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="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 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><span class="c1"></span> <span class="na">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="p">}</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
<span class="k">&amp;</span><span class="nd">:disabled</span><span class="o">,</span> <span class="na">&amp;</span><span class="o">:</span><span class="n">disabled</span><span class="o">,</span>
<span class="k">&amp;</span><span class="nc">.disabled</span> <span class="p">{</span> <span class="o">&amp;.</span><span class="n">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="na">color</span><span class="o">:</span> <span class="nv">$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="na">background-color</span><span class="o">:</span> <span class="ni">transparent</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div> </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> <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="na">padding</span><span class="o">:</span> <span class="nv">$padding-y</span> <span class="nv">$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="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 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><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>
@ -802,13 +819,13 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
</code></pre></div> </code></pre></div>
<h3 id="loops">Loops</h3> <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> <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> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="ow">in</span> <span class="nv">$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="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="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="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="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="ow">in</span> <span class="nv">$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="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="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>
@ -831,7 +848,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -878,7 +895,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

18
docs/5.0/components/card/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap&rsquo;s cards provide a flexible and extensible content container with multiple variants and options."> <meta name="description" content="Bootstrap&rsquo;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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -1012,7 +1012,7 @@ Note that content should not be larger than the height of the image. If content
<div class="card mb-3" style="max-width: 540px;"> <div class="card mb-3" style="max-width: 540px;">
<div class="row g-0"> <div class="row g-0">
<div class="col-md-4"> <div class="col-md-4">
<svg class="bd-placeholder-img" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></svg> <svg class="bd-placeholder-img img-fluid rounded-start" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></svg>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
@ -1027,7 +1027,7 @@ Note that content should not be larger than the height of the image. If content
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card mb-3&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;max-width: 540px;&#34;</span><span class="p">&gt;</span> </div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card mb-3&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;max-width: 540px;&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;row g-0&#34;</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;row g-0&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;col-md-4&#34;</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;col-md-4&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;img-fluid rounded-start&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;col-md-8&#34;</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;col-md-8&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-body&#34;</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-body&#34;</span><span class="p">&gt;</span>
@ -1759,12 +1759,12 @@ Note that content should not be larger than the height of the image. If content
<h3 id="variables">Variables</h3> <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> <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-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-title-spacer-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</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-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-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-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-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-y</span><span class="o">:</span> <span class="nv">$card-spacer-y</span> <span class="o">*</span> <span class="mf">.5</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-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-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-cap-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
@ -1772,7 +1772,7 @@ Note that content should not be larger than the height of the image. If content
<span class="nv">$card-color</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-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-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> <span class="nv">$card-group-margin</span><span class="o">:</span> <span class="nv">$grid-gutter-width</span> <span class="o">*</span> <span class="mf">.5</span><span class="p">;</span>
</code></pre></div> </code></pre></div>
</div> </div>
@ -1791,7 +1791,7 @@ Note that content should not be larger than the height of the image. If content
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -1838,7 +1838,7 @@ Note that content should not be larger than the height of the image. If content
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

31
docs/5.0/components/carousel/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -899,7 +899,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<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-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-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-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-control-transition</span><span class="o">:</span> <span class="ni">opacity</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">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-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-height</span><span class="o">:</span> <span class="mi">3</span><span class="kt">px</span><span class="p">;</span>
@ -908,7 +908,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<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-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-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-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-indicator-transition</span><span class="o">:</span> <span class="ni">opacity</span> <span class="mf">.6</span><span class="kt">s</span> <span class="ni">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-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-color</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
@ -921,7 +921,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<span class="nv">$carousel-control-next-icon-bg</span><span class="o">:</span> <span class="sx">url(&#34;data:image/svg+xml,&lt;svg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 16 16&#39; fill=&#39;</span><span class="si">#{</span><span class="nv">$carousel-control-color</span><span class="si">}</span><span class="sx">&#39;&gt;&lt;path d=&#39;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&#39;/&gt;&lt;/svg&gt;&#34;)</span><span class="p">;</span> <span class="nv">$carousel-control-next-icon-bg</span><span class="o">:</span> <span class="sx">url(&#34;data:image/svg+xml,&lt;svg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 16 16&#39; fill=&#39;</span><span class="si">#{</span><span class="nv">$carousel-control-color</span><span class="si">}</span><span class="sx">&#39;&gt;&lt;path d=&#39;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&#39;/&gt;&lt;/svg&gt;&#34;)</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-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 class="nv">$carousel-transition</span><span class="o">:</span> <span class="ni">transform</span> <span class="nv">$carousel-transition-duration</span> <span class="ni">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><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-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-caption-color</span><span class="o">:</span> <span class="nv">$black</span><span class="p">;</span>
@ -1037,8 +1037,21 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<td>Destroys an element's carousel. (Removes stored data on the DOM element)</td> <td>Destroys an element's carousel. (Removes stored data on the DOM element)</td>
</tr> </tr>
<tr> <tr>
<td><code>getInstance</code></td> <td>
<td>Static method which allows you to get the carousel instance associated with a DOM element.</td> <code>getInstance</code>
</td>
<td>
Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: <code>bootstrap.Carousel.getInstance(element)</code>
</td>
</tr>
<tr>
<td>
<code>getOrCreateInstance</code>
</td>
<td>
Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialised.
You can use it like this: <code>bootstrap.Carousel.getOrCreateInstance(element)</code>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -1091,7 +1104,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -1138,7 +1151,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

8
docs/5.0/components/close-button/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -463,7 +463,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -510,7 +510,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

33
docs/5.0/components/collapse/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -518,19 +518,19 @@ Multiple <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> can show and hide
<p>Note that Bootstrap&rsquo;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> <p>Note that Bootstrap&rsquo;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> <h2 id="sass">Sass</h2>
<h3 id="variables">Variables</h3> <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> <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="n">height</span> <span class="mf">.35</span><span class="kt">s</span> <span class="ni">ease</span><span class="p">;</span>
</code></pre></div> </code></pre></div>
<h3 id="classes">Classes</h3> <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> <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> <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">&amp;</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="k">&amp;</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="na">display</span><span class="o">:</span> <span class="ni">none</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
<span class="nc">.collapsing</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="na">height</span><span class="o">:</span> <span class="mi">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="na">overflow</span><span class="o">:</span> <span class="ni">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="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> <span class="p">}</span>
</code></pre></div> </code></pre></div>
@ -616,8 +616,21 @@ Multiple <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> can show and hide
<td>Destroys an element's collapse. (Removes stored data on the DOM element)</td> <td>Destroys an element's collapse. (Removes stored data on the DOM element)</td>
</tr> </tr>
<tr> <tr>
<td><code>getInstance</code></td> <td>
<td>Static method which allows you to get the collapse instance associated with a DOM element.</td> <code>getInstance</code>
</td>
<td>
Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: <code>bootstrap.Collapse.getInstance(element)</code>
</td>
</tr>
<tr>
<td>
<code>getOrCreateInstance</code>
</td>
<td>
Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialised.
You can use it like this: <code>bootstrap.Collapse.getOrCreateInstance(element)</code>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -670,7 +683,7 @@ Multiple <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> can show and hide
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -717,7 +730,7 @@ Multiple <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> can show and hide
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

85
docs/5.0/components/dropdowns/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -1034,7 +1034,7 @@
<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div><h2 id="menu-items">Menu items</h2> </code></pre></div><h2 id="menu-items">Menu items</h2>
<p>Historically dropdown menu contents <em>had</em> to be links, but that&rsquo;s no longer the case with v4. Now you can optionally use <code>&lt;button&gt;</code> elements in your dropdowns instead of just <code>&lt;a&gt;</code>s.</p> <p>You can use <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements as dropdown items.</p>
<div class="bd-example"> <div class="bd-example">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
@ -1623,7 +1623,7 @@
<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-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-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-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-divider-margin-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</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-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-color</span><span class="o">:</span> <span class="nv">$gray-900</span><span class="p">;</span>
@ -1635,7 +1635,7 @@
<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-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-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.25</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-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-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
@ -1663,64 +1663,64 @@
<h3 id="mixins">Mixins</h3> <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> <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> <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="na">border-top</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">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="na">border-right</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">solid</span> <span class="ni">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="na">border-bottom</span><span class="o">:</span> <span class="mi">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="na">border-left</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">solid</span> <span class="ni">transparent</span><span class="p">;</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="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="na">border-top</span><span class="o">:</span> <span class="mi">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="na">border-right</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">solid</span> <span class="ni">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="na">border-bottom</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">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="na">border-left</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">solid</span> <span class="ni">transparent</span><span class="p">;</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="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="na">border-top</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">solid</span> <span class="ni">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="na">border-right</span><span class="o">:</span> <span class="mi">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="na">border-bottom</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">solid</span> <span class="ni">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="na">border-left</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">solid</span><span class="p">;</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="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="na">border-top</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">solid</span> <span class="ni">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="na">border-right</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">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="na">border-bottom</span><span class="o">:</span> <span class="nv">$caret-width</span> <span class="ni">solid</span> <span class="ni">transparent</span><span class="p">;</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">@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">@if</span> <span class="nv">$enable-caret</span> <span class="p">{</span>
<span class="k">&amp;</span><span class="nd">::after</span> <span class="p">{</span> <span class="k">&amp;</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="na">display</span><span class="o">:</span> <span class="ni">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="na">margin-left</span><span class="o">:</span> <span class="nv">$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="na">vertical-align</span><span class="o">:</span> <span class="nv">$caret-vertical-align</span><span class="p">;</span>
<span class="nt">content</span><span class="nd">:</span> <span class="s2">&#34;&#34;</span><span class="p">;</span> <span class="na">content</span><span class="o">:</span> <span class="s2">&#34;&#34;</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">@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="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="p">}</span> <span class="k">@else if</span> <span class="nv">$direction</span> <span class="o">==</span> <span class="n">up</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> caret-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="p">}</span> <span class="k">@else if</span> <span class="nv">$direction</span> <span class="o">==</span> <span class="ni">end</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> caret-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="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">@if</span> <span class="nv">$direction</span> <span class="o">==</span> <span class="ni">start</span> <span class="p">{</span>
<span class="k">&amp;</span><span class="nd">::after</span> <span class="p">{</span> <span class="k">&amp;</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="na">display</span><span class="o">:</span> <span class="ni">none</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="k">&amp;</span><span class="nd">::before</span> <span class="p">{</span> <span class="k">&amp;</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="na">display</span><span class="o">:</span> <span class="ni">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="na">margin-right</span><span class="o">:</span> <span class="nv">$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="na">vertical-align</span><span class="o">:</span> <span class="nv">$caret-vertical-align</span><span class="p">;</span>
<span class="nt">content</span><span class="nd">:</span> <span class="s2">&#34;&#34;</span><span class="p">;</span> <span class="na">content</span><span class="o">:</span> <span class="s2">&#34;&#34;</span><span class="p">;</span>
<span class="k">@include</span><span class="nd"> caret-start</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="p">}</span> <span class="p">}</span>
<span class="k">&amp;</span><span class="nd">:empty::after</span> <span class="p">{</span> <span class="k">&amp;</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="na">margin-left</span><span class="o">:</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>
<span class="p">}</span> <span class="p">}</span>
@ -1865,9 +1865,20 @@ On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> h
</td> </td>
</tr> </tr>
<tr> <tr>
<td><code>getInstance</code></td>
<td> <td>
Static method which allows you to get the dropdown instance associated with a DOM element. <code>getInstance</code>
</td>
<td>
Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: <code>bootstrap.Dropdown.getInstance(element)</code>
</td>
</tr>
<tr>
<td>
<code>getOrCreateInstance</code>
</td>
<td>
Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialised.
You can use it like this: <code>bootstrap.Dropdown.getOrCreateInstance(element)</code>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -1937,7 +1948,7 @@ On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> h
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -1984,7 +1995,7 @@ On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> h
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

49
docs/5.0/components/list-group/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -427,6 +427,7 @@
<li><a href="#show">show</a></li> <li><a href="#show">show</a></li>
<li><a href="#dispose">dispose</a></li> <li><a href="#dispose">dispose</a></li>
<li><a href="#getinstance">getInstance</a></li> <li><a href="#getinstance">getInstance</a></li>
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
</ul> </ul>
</li> </li>
<li><a href="#events">Events</a></li> <li><a href="#events">Events</a></li>
@ -922,9 +923,9 @@
<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-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-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-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</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-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-bg-scale</span><span class="o">:</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-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-hover-bg</span><span class="o">:</span> <span class="nv">$gray-100</span><span class="p">;</span>
@ -945,20 +946,20 @@
<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> <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> <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="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="na">color</span><span class="o">:</span> <span class="nv">$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="na">background-color</span><span class="o">:</span> <span class="nv">$background</span><span class="p">;</span>
<span class="k">&amp;</span><span class="nc">.list-group-item-action</span> <span class="p">{</span> <span class="k">&amp;</span><span class="nc">.list-group-item-action</span> <span class="p">{</span>
<span class="k">&amp;</span><span class="nd">:hover</span><span class="o">,</span> <span class="na">&amp;</span><span class="o">:</span><span class="n">hover</span><span class="o">,</span>
<span class="k">&amp;</span><span class="nd">:focus</span> <span class="p">{</span> <span class="o">&amp;:</span><span class="ni">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="na">color</span><span class="o">:</span> <span class="nv">$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="na">background-color</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="mi">10</span><span class="kt">%</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="k">&amp;</span><span class="nc">.active</span> <span class="p">{</span> <span class="k">&amp;</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="na">color</span><span class="o">:</span> <span class="nv">$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="na">background-color</span><span class="o">:</span> <span class="nv">$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="na">border-color</span><span class="o">:</span> <span class="nv">$color</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> <span class="p">}</span>
@ -971,7 +972,7 @@
</span><span class="c1">// Add modifier classes to change text and background color on individual items. </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">// Organizationally, this must come after the `:hover` states.
</span><span class="c1"></span> </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="k">@each</span> <span class="nv">$state</span><span class="o">,</span> <span class="nv">$value</span> <span class="ow">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
<span class="nv">$list-group-variant-bg</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-variant-bg</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-variant-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="nv">$list-group-variant-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-variant-bg</span><span class="o">,</span> <span class="nv">$list-group-variant-color</span><span class="p">)</span> <span class="o">&lt;</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</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-variant-bg</span><span class="o">,</span> <span class="nv">$list-group-variant-color</span><span class="p">)</span> <span class="o">&lt;</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</span> <span class="p">{</span>
@ -1108,6 +1109,10 @@
<p><em>Static</em> method which allows you to get the tab instance associated with a DOM element</p> <p><em>Static</em> method which allows you to get the tab instance associated with a DOM element</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#trigger&#39;</span><span class="p">)</span> <div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#trigger&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance <span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance
</span></code></pre></div><h4 id="getorcreateinstance">getOrCreateInstance</h4>
<p><em>Static</em> method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn&rsquo;t initialised</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#trigger&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getOrCreateInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance
</span></code></pre></div><h3 id="events">Events</h3> </span></code></pre></div><h3 id="events">Events</h3>
<p>When showing a new tab, the events fire in the following order:</p> <p>When showing a new tab, the events fire in the following order:</p>
<ol> <ol>
@ -1143,11 +1148,13 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">tabEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;a[data-bs-toggle=&#34;list&#34;]&#39;</span><span class="p">)</span> <div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">tabElms</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;a[data-bs-toggle=&#34;list&#34;]&#39;</span><span class="p">)</span>
<span class="nx">tabEl</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;shown.bs.tab&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> <span class="nx">tabElms</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">tabElm</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// newly activated tab <span class="nx">tabElm</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;shown.bs.tab&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
</span><span class="c1"></span> <span class="nx">event</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab <span class="nx">event</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// newly activated tab
</span><span class="c1"></span><span class="p">})</span> </span><span class="c1"></span> <span class="nx">event</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab
</span><span class="c1"></span> <span class="p">})</span>
<span class="p">}</span>
</code></pre></div> </code></pre></div>
</div> </div>
</main> </main>
@ -1165,7 +1172,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -1212,7 +1219,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

37
docs/5.0/components/modal/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Use Bootstrap&rsquo;s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content."> <meta name="description" content="Use Bootstrap&rsquo;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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -439,6 +439,7 @@
<li><a href="#handleupdate">handleUpdate</a></li> <li><a href="#handleupdate">handleUpdate</a></li>
<li><a href="#dispose">dispose</a></li> <li><a href="#dispose">dispose</a></li>
<li><a href="#getinstance">getInstance</a></li> <li><a href="#getinstance">getInstance</a></li>
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
</ul> </ul>
</li> </li>
<li><a href="#events">Events</a></li> <li><a href="#events">Events</a></li>
@ -1249,27 +1250,27 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<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-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-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-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="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-show-transform</span><span class="o">:</span> <span class="ni">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-transition</span><span class="o">:</span> <span class="ni">transform</span> <span class="mf">.3</span><span class="kt">s</span> <span class="ni">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> <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> </code></pre></div>
<h3 id="loop">Loop</h3> <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> <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> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$breakpoint</span> <span class="ow">in</span> <span class="nf">map-keys</span><span class="p">(</span><span class="nv">$grid-breakpoints</span><span class="p">)</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">$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">&#34;&#34;</span><span class="o">,</span> <span class="nv">$infix</span> <span class="o">+</span> <span class="s2">&#34;-down&#34;</span><span class="o">,</span> <span class="s2">&#34;&#34;</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">&#34;&#34;</span><span class="o">,</span> <span class="nv">$infix</span> <span class="o">+</span> <span class="s2">&#34;-down&#34;</span><span class="o">,</span> <span class="s2">&#34;&#34;</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="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="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="na">width</span><span class="o">:</span> <span class="mi">100</span><span class="kt">vw</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="na">max-width</span><span class="o">:</span> <span class="ni">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="na">height</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</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="na">margin</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="nc">.modal-content</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="na">height</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</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="na">border</span><span class="o">:</span> <span class="mi">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="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>
@ -1278,7 +1279,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<span class="p">}</span> <span class="p">}</span>
<span class="nc">.modal-body</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="na">overflow-y</span><span class="o">:</span> <span class="ni">auto</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="nc">.modal-footer</span> <span class="p">{</span> <span class="nc">.modal-footer</span> <span class="p">{</span>
@ -1289,7 +1290,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<span class="p">}</span> <span class="p">}</span>
</code></pre></div> </code></pre></div>
<h2 id="usage">Usage</h2> <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>&lt;body&gt;</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> <p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides 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> <h3 id="via-data-attributes">Via data attributes</h3>
<p>Activate a modal without writing JavaScript. Set <code>data-bs-toggle=&quot;modal&quot;</code> on a controller element, like a button, along with a <code>data-bs-target=&quot;#foo&quot;</code> or <code>href=&quot;#foo&quot;</code> to target a specific modal to toggle.</p> <p>Activate a modal without writing JavaScript. Set <code>data-bs-toggle=&quot;modal&quot;</code> on a controller element, like a button, along with a <code>data-bs-target=&quot;#foo&quot;</code> or <code>href=&quot;#foo&quot;</code> to target a specific modal to toggle.</p>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">&#34;modal&#34;</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">&#34;#myModal&#34;</span><span class="p">&gt;</span>Launch modal<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> <div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">&#34;modal&#34;</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">&#34;#myModal&#34;</span><span class="p">&gt;</span>Launch modal<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
@ -1363,6 +1364,10 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<p><em>Static</em> method which allows you to get the modal instance associated with a DOM element</p> <p><em>Static</em> method which allows you to get the modal instance associated with a DOM element</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myModalEl</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">&#39;myModal&#39;</span><span class="p">)</span> <div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myModalEl</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">&#39;myModal&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">modal</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Modal</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">myModalEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap modal instance <span class="kd">var</span> <span class="nx">modal</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Modal</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">myModalEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap modal instance
</span></code></pre></div><h4 id="getorcreateinstance">getOrCreateInstance</h4>
<p><em>Static</em> method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn&rsquo;t initialised</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myModalEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#myModal&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">modal</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Modal</span><span class="p">.</span><span class="nx">getOrCreateInstance</span><span class="p">(</span><span class="nx">myModalEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap modal instance
</span></code></pre></div><h3 id="events">Events</h3> </span></code></pre></div><h3 id="events">Events</h3>
<p>Bootstrap&rsquo;s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <code>&lt;div class=&quot;modal&quot;&gt;</code>).</p> <p>Bootstrap&rsquo;s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <code>&lt;div class=&quot;modal&quot;&gt;</code>).</p>
<table class="table"> <table class="table">
@ -1416,7 +1421,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -1463,7 +1468,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

38
docs/5.0/components/navbar/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Documentation and examples for Bootstrap&rsquo;s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin."> <meta name="description" content="Documentation and examples for Bootstrap&rsquo;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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -1338,7 +1338,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<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&rsquo;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> <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&rsquo;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> <h2 id="sass">Sass</h2>
<h3 id="variables">Variables</h3> <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> <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="mf">.5</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-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-nav-link-padding-x</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
@ -1347,7 +1347,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<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 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><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-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-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="mf">.5</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-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-y</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
@ -1355,7 +1355,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<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-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-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-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> <span class="nv">$navbar-toggler-transition</span><span class="o">:</span> <span class="n">box-shadow</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="p">;</span>
</code></pre></div> </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> <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-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>
@ -1381,40 +1381,40 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<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 <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">// where your navbar collapses.
</span><span class="c1"></span><span class="nc">.navbar-expand</span> <span class="p">{</span> </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="k">@each</span> <span class="nv">$breakpoint</span> <span class="ow">in</span> <span class="nf">map-keys</span><span class="p">(</span><span class="nv">$grid-breakpoints</span><span class="p">)</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">$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="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 class="c1">// stylelint-disable-next-line scss/selector-no-union-class-name
</span><span class="c1"></span> <span class="k">&amp;</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><span class="c1"></span> <span class="k">&amp;</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</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="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="na">flex-wrap</span><span class="o">:</span> <span class="ni">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="na">justify-content</span><span class="o">:</span> <span class="ni">flex-start</span><span class="p">;</span>
<span class="nc">.navbar-nav</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="na">flex-direction</span><span class="o">:</span> <span class="ni">row</span><span class="p">;</span>
<span class="nc">.dropdown-menu</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="na">position</span><span class="o">:</span> <span class="ni">absolute</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="nc">.nav-link</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="na">padding-right</span><span class="o">:</span> <span class="nv">$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="na">padding-left</span><span class="o">:</span> <span class="nv">$navbar-nav-link-padding-x</span><span class="p">;</span>
<span class="p">}</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="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="na">overflow</span><span class="o">:</span> <span class="ni">visible</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="nc">.navbar-collapse</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 class="na">display</span><span class="o">:</span> <span class="ni">flex</span> <span class="k">!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><span class="c1"></span> <span class="na">flex-basis</span><span class="o">:</span> <span class="ni">auto</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="nc">.navbar-toggler</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="na">display</span><span class="o">:</span> <span class="ni">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> <span class="p">}</span>
@ -1438,7 +1438,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -1485,7 +1485,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

15
docs/5.0/components/navs-tabs/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Documentation and examples for how to use Bootstrap&rsquo;s included navigation components."> <meta name="description" content="Documentation and examples for how to use Bootstrap&rsquo;s included navigation components.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -432,6 +432,7 @@
<li><a href="#show">show</a></li> <li><a href="#show">show</a></li>
<li><a href="#dispose">dispose</a></li> <li><a href="#dispose">dispose</a></li>
<li><a href="#getinstance">getInstance</a></li> <li><a href="#getinstance">getInstance</a></li>
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
</ul> </ul>
</li> </li>
<li><a href="#events">Events</a></li> <li><a href="#events">Events</a></li>
@ -874,7 +875,7 @@
<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-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="nv">$link-color</span><span class="p">;</span> <span class="nv">$nav-link-color</span><span class="o">:</span> <span class="nv">$link-color</span><span class="p">;</span>
<span class="nv">$nav-link-hover-color</span><span class="o">:</span> <span class="nv">$link-hover-color</span><span class="p">;</span> <span class="nv">$nav-link-hover-color</span><span class="o">:</span> <span class="nv">$link-hover-color</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-transition</span><span class="o">:</span> <span class="ni">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="n">background-color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="n">border-color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">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-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-color</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="p">;</span>
@ -1146,6 +1147,10 @@
<p><em>Static</em> method which allows you to get the tab instance associated with a DOM element</p> <p><em>Static</em> method which allows you to get the tab instance associated with a DOM element</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#trigger&#39;</span><span class="p">)</span> <div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#trigger&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance <span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance
</span></code></pre></div><h4 id="getorcreateinstance">getOrCreateInstance</h4>
<p><em>Static</em> method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn&rsquo;t initialised</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#trigger&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getOrCreateInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance
</span></code></pre></div><h3 id="events">Events</h3> </span></code></pre></div><h3 id="events">Events</h3>
<p>When showing a new tab, the events fire in the following order:</p> <p>When showing a new tab, the events fire in the following order:</p>
<ol> <ol>
@ -1203,7 +1208,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -1250,7 +1255,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

12
docs/5.0/components/offcanvas/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -775,6 +775,10 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<td><code>getInstance</code></td> <td><code>getInstance</code></td>
<td><em>Static</em> method which allows you to get the offcanvas instance associated with a DOM element</td> <td><em>Static</em> method which allows you to get the offcanvas instance associated with a DOM element</td>
</tr> </tr>
<tr>
<td><code>getOrCreateInstance</code></td>
<td><em>Static</em> method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn&rsquo;t initialised</td>
</tr>
</tbody> </tbody>
</table> </table>
@ -828,7 +832,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -875,7 +879,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

12
docs/5.0/components/pagination/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -671,7 +671,7 @@
<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-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-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-transition</span><span class="o">:</span> <span class="ni">color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="n">background-color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="n">border-color</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">ease-in-out</span><span class="o">,</span> <span class="n">box-shadow</span> <span class="mf">.15</span><span class="kt">s</span> <span class="ni">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-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> <span class="nv">$pagination-border-radius-lg</span><span class="o">:</span> <span class="nv">$border-radius-lg</span><span class="p">;</span>
@ -679,7 +679,7 @@
<h3 id="mixins">Mixins</h3> <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> <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="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="na">padding</span><span class="o">:</span> <span class="nv">$padding-y</span> <span class="nv">$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="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="p">}</span>
@ -722,7 +722,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -769,7 +769,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

13
docs/5.0/components/popovers/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -431,6 +431,7 @@
<li><a href="#toggleenabled">toggleEnabled</a></li> <li><a href="#toggleenabled">toggleEnabled</a></li>
<li><a href="#update">update</a></li> <li><a href="#update">update</a></li>
<li><a href="#getinstance">getInstance</a></li> <li><a href="#getinstance">getInstance</a></li>
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
</ul> </ul>
</li> </li>
<li><a href="#events">Events</a></li> <li><a href="#events">Events</a></li>
@ -777,6 +778,10 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
<p><em>Static</em> method which allows you to get the popover instance associated with a DOM element</p> <p><em>Static</em> method which allows you to get the popover instance associated with a DOM element</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">exampleTriggerEl</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">&#39;example&#39;</span><span class="p">)</span> <div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">exampleTriggerEl</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">&#39;example&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">popover</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Popover</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">exampleTriggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap popover instance <span class="kd">var</span> <span class="nx">popover</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Popover</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">exampleTriggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap popover instance
</span></code></pre></div><h4 id="getorcreateinstance">getOrCreateInstance</h4>
<p><em>Static</em> method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn&rsquo;t initialised</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">exampleTriggerEl</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">&#39;example&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">popover</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Popover</span><span class="p">.</span><span class="nx">getOrCreateInstance</span><span class="p">(</span><span class="nx">exampleTriggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap popover instance
</span></code></pre></div><h3 id="events">Events</h3> </span></code></pre></div><h3 id="events">Events</h3>
<table class="table"> <table class="table">
<thead> <thead>
@ -829,7 +834,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -876,7 +881,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

14
docs/5.0/components/progress/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -586,14 +586,14 @@
<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-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-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-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-animation-timing</span><span class="o">:</span> <span class="mi">1</span><span class="kt">s</span> <span class="ni">linear</span> <span class="ni">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> <span class="nv">$progress-bar-transition</span><span class="o">:</span> <span class="ni">width</span> <span class="mf">.6</span><span class="kt">s</span> <span class="ni">ease</span><span class="p">;</span>
</code></pre></div> </code></pre></div>
<h3 id="keyframes">Keyframes</h3> <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> <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> <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="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="nt">0</span><span class="err">%</span> <span class="p">{</span> <span class="na">background-position-x</span><span class="o">:</span> <span class="nv">$progress-height</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> </code></pre></div>
@ -614,7 +614,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -661,7 +661,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

13
docs/5.0/components/scrollspy/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -411,6 +411,7 @@
<li><a href="#refresh">refresh</a></li> <li><a href="#refresh">refresh</a></li>
<li><a href="#dispose">dispose</a></li> <li><a href="#dispose">dispose</a></li>
<li><a href="#getinstance">getInstance</a></li> <li><a href="#getinstance">getInstance</a></li>
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
</ul> </ul>
</li> </li>
<li><a href="#options">Options</a></li> <li><a href="#options">Options</a></li>
@ -667,6 +668,10 @@
<p><em>Static</em> method which allows you to get the scrollspy instance associated with a DOM element</p> <p><em>Static</em> method which allows you to get the scrollspy instance associated with a DOM element</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">scrollSpyContentEl</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">&#39;content&#39;</span><span class="p">)</span> <div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">scrollSpyContentEl</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">&#39;content&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">scrollSpy</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">ScrollSpy</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">scrollSpyContentEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap scrollspy instance <span class="kd">var</span> <span class="nx">scrollSpy</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">ScrollSpy</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">scrollSpyContentEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap scrollspy instance
</span></code></pre></div><h4 id="getorcreateinstance">getOrCreateInstance</h4>
<p><em>Static</em> method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn&rsquo;t initialised</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">scrollSpyContentEl</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">&#39;content&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">scrollSpy</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">ScrollSpy</span><span class="p">.</span><span class="nx">getOrCreateInstance</span><span class="p">(</span><span class="nx">scrollSpyContentEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap scrollspy instance
</span></code></pre></div><h3 id="options">Options</h3> </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-offset=&quot;&quot;</code>.</p> <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-offset=&quot;&quot;</code>.</p>
<table class="table"> <table class="table">
@ -735,7 +740,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -782,7 +787,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

20
docs/5.0/components/spinners/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -577,7 +577,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;visually-hidden&#34;</span><span class="p">&gt;</span>Loading...<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;visually-hidden&#34;</span><span class="p">&gt;</span>Loading...<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></code></pre></div> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></code></pre></div>
<h3 id="placement">Placement</h3> <h3 id="placement">Placement</h3>
<p>Use <a href="/docs/5.0/utilities/flex/">flexbox utilities</a>, <a href="/docs/5.0/utilities/float/">float utilities</a>, or <a href="/docs/5.0/content/typography/">text alignment</a> utilities to place spinners exactly where you need them in any situation.</p> <p>Use <a href="/docs/5.0/utilities/flex/">flexbox utilities</a>, <a href="/docs/5.0/utilities/float/">float utilities</a>, or <a href="/docs/5.0/utilities/text/">text alignment</a> utilities to place spinners exactly where you need them in any situation.</p>
<h4 id="flex">Flex</h4> <h4 id="flex">Flex</h4>
<div class="bd-example"> <div class="bd-example">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
@ -692,7 +692,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<h3 id="variables">Variables</h3> <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> <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-height</span><span class="o">:</span> <span class="nv">$spinner-width</span><span class="p">;</span>
<span class="nv">$spinner-vertical-align</span><span class="o">:</span> <span class="mf">-.125</span><span class="kt">em</span><span class="p">;</span> <span class="nv">$spinner-vertical-align</span><span class="o">:</span> <span class="o">-</span><span class="mf">.125</span><span class="kt">em</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-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-animation-speed</span><span class="o">:</span> <span class="mf">.75</span><span class="kt">s</span><span class="p">;</span>
@ -703,16 +703,16 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<h3 id="keyframes">Keyframes</h3> <h3 id="keyframes">Keyframes</h3>
<p>Used for creating the CSS animations for our spinners. Included in <code>scss/_spinners.scss</code>.</p> <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> <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">&#34;/* rtl:ignore */&#34;</span><span class="p">};</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="na">transform</span><span class="o">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="mi">360</span><span class="kt">deg</span><span class="p">)</span> <span class="si">#{</span><span class="s2">&#34;/* rtl:ignore */&#34;</span><span class="si">}</span><span class="p">;</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div> </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> <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">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="na">transform</span><span class="o">:</span> <span class="nf">scale</span><span class="p">(</span><span class="mi">0</span><span class="p">);</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">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="na">opacity</span><span class="o">:</span> <span class="mi">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="na">transform</span><span class="o">:</span> <span class="ni">none</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div> </code></pre></div>
@ -733,7 +733,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -780,7 +780,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

24
docs/5.0/components/toasts/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -424,6 +424,8 @@
<li><a href="#show">show</a></li> <li><a href="#show">show</a></li>
<li><a href="#hide">hide</a></li> <li><a href="#hide">hide</a></li>
<li><a href="#dispose">dispose</a></li> <li><a href="#dispose">dispose</a></li>
<li><a href="#getinstance">getInstance</a></li>
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
</ul> </ul>
</li> </li>
<li><a href="#events">Events</a></li> <li><a href="#events">Events</a></li>
@ -478,7 +480,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></code></pre></div> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></code></pre></div>
<h3 id="live">Live</h3> <h3 id="live">Live</h3>
<p>Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with <code>.hide</code>.</p> <p>Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with <code>.hide</code>.</p>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5"> <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true"> <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header"> <div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"/></svg> <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"/></svg>
@ -497,7 +499,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
</div> </div>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;liveToastBtn&#34;</span><span class="p">&gt;</span>Show live toast<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> <div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;liveToastBtn&#34;</span><span class="p">&gt;</span>Show live toast<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;position-fixed bottom-0 end-0 p-3&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;z-index: 5&#34;</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;position-fixed bottom-0 end-0 p-3&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;z-index: 11&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;liveToast&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;toast hide&#34;</span> <span class="na">role</span><span class="o">=</span><span class="s">&#34;alert&#34;</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">&#34;assertive&#34;</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">&#34;true&#34;</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;liveToast&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;toast hide&#34;</span> <span class="na">role</span><span class="o">=</span><span class="s">&#34;alert&#34;</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">&#34;assertive&#34;</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">&#34;true&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;toast-header&#34;</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;toast-header&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;rounded me-2&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;rounded me-2&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span>
@ -930,7 +932,15 @@ You have to manually call this method, instead your toast won&rsquo;t show.</p>
</code></pre></div><h4 id="dispose">dispose</h4> </code></pre></div><h4 id="dispose">dispose</h4>
<p>Hides an element&rsquo;s toast. Your toast will remain on the DOM but won&rsquo;t show anymore.</p> <p>Hides an element&rsquo;s toast. Your toast will remain on the DOM but won&rsquo;t show anymore.</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">toast</span><span class="p">.</span><span class="nx">dispose</span><span class="p">()</span> <div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="nx">toast</span><span class="p">.</span><span class="nx">dispose</span><span class="p">()</span>
</code></pre></div><h3 id="events">Events</h3> </code></pre></div><h4 id="getinstance">getInstance</h4>
<p><em>Static</em> method which allows you to get the scrollspy instance associated with a DOM element</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myToastEl</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">&#39;myToastEl&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">myToast</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Toast</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">myToastEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap toast instance
</span></code></pre></div><h4 id="getorcreateinstance">getOrCreateInstance</h4>
<p><em>Static</em> method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn&rsquo;t initialised</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myToastEl</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">&#39;myToastEl&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">myToast</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Toast</span><span class="p">.</span><span class="nx">getOrCreateInstance</span><span class="p">(</span><span class="nx">myToastEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap toast instance
</span></code></pre></div><h3 id="events">Events</h3>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -978,7 +988,7 @@ You have to manually call this method, instead your toast won&rsquo;t show.</p>
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -1025,7 +1035,7 @@ You have to manually call this method, instead your toast won&rsquo;t show.</p>
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

19
docs/5.0/components/tooltips/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -426,6 +426,7 @@
<li><a href="#toggleenabled">toggleEnabled</a></li> <li><a href="#toggleenabled">toggleEnabled</a></li>
<li><a href="#update">update</a></li> <li><a href="#update">update</a></li>
<li><a href="#getinstance">getInstance</a></li> <li><a href="#getinstance">getInstance</a></li>
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
</ul> </ul>
</li> </li>
<li><a href="#events">Events</a></li> <li><a href="#events">Events</a></li>
@ -516,8 +517,8 @@ The animation effect of this component is dependent on the <code>prefers-reduced
<span class="nv">$tooltip-bg</span><span class="o">:</span> <span class="nv">$black</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-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-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-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.25</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-padding-x</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</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-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-width</span><span class="o">:</span> <span class="mf">.8</span><span class="kt">rem</span><span class="p">;</span>
@ -658,7 +659,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
<td><code>'hover focus'</code></td> <td><code>'hover focus'</code></td>
<td> <td>
<p>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</p> <p>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</p>
<p><code>'manual'</code> indicates that the tooltip will be triggered programmatically via the <code>.tooltip('show')</code>, <code>.tooltip('hide')</code> and <code>.tooltip('toggle')</code> methods; this value cannot be combined with any other trigger.</p> <p><code>'manual'</code> indicates that the tooltip will be triggered programmatically via the <code>.show()</code>, <code>.hide()</code> and <code>.toggle()</code> methods; this value cannot be combined with any other trigger.</p>
<p><code>'hover'</code> on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.</p> <p><code>'hover'</code> on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.</p>
</td> </td>
</tr> </tr>
@ -772,6 +773,10 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
<p><em>Static</em> method which allows you to get the tooltip instance associated with a DOM element</p> <p><em>Static</em> method which allows you to get the tooltip instance associated with a DOM element</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">exampleTriggerEl</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">&#39;example&#39;</span><span class="p">)</span> <div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">exampleTriggerEl</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">&#39;example&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">tooltip</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tooltip</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">exampleTriggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tooltip instance <span class="kd">var</span> <span class="nx">tooltip</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tooltip</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">exampleTriggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tooltip instance
</span></code></pre></div><h4 id="getorcreateinstance">getOrCreateInstance</h4>
<p><em>Static</em> method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn&rsquo;t initialised</p>
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">exampleTriggerEl</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">&#39;example&#39;</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">tooltip</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tooltip</span><span class="p">.</span><span class="nx">getOrCreateInstance</span><span class="p">(</span><span class="nx">exampleTriggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tooltip instance
</span></code></pre></div><h3 id="events">Events</h3> </span></code></pre></div><h3 id="events">Events</h3>
<table class="table"> <table class="table">
<thead> <thead>
@ -828,7 +833,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -875,7 +880,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

8
docs/5.0/content/figures/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -456,7 +456,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -503,7 +503,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

8
docs/5.0/content/images/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -481,7 +481,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -528,7 +528,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

16
docs/5.0/content/reboot/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -455,11 +455,9 @@
<p>Bootstrap utilizes a &ldquo;native font stack&rdquo; or &ldquo;system font stack&rdquo; for optimum text rendering on every device and OS. These system fonts have been designed specifically with today&rsquo;s devices in mind, with improved rendering on screens, variable font support, and more. Read more about <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stacks in this <em>Smashing Magazine</em> article</a>.</p> <p>Bootstrap utilizes a &ldquo;native font stack&rdquo; or &ldquo;system font stack&rdquo; for optimum text rendering on every device and OS. These system fonts have been designed specifically with today&rsquo;s devices in mind, with improved rendering on screens, variable font support, and more. Read more about <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stacks in this <em>Smashing Magazine</em> article</a>.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$font-family-sans-serif</span><span class="o">:</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$font-family-sans-serif</span><span class="o">:</span>
<span class="c1">// Cross-platform generic font family (default user interface font)</span> <span class="c1">// Cross-platform generic font family (default user interface font)</span>
<span class="n">system-ui</span><span class="o">,</span> <span class="ni">system-ui</span><span class="o">,</span>
<span class="c1">// Safari for macOS and iOS (San Francisco)</span> <span class="c1">// Safari for macOS and iOS (San Francisco)</span>
<span class="o">-</span><span class="n">apple-system</span><span class="o">,</span> <span class="o">-</span><span class="n">apple-system</span><span class="o">,</span>
<span class="c1">// Chrome &lt; 56 for macOS (San Francisco)</span>
<span class="n">BlinkMacSystemFont</span><span class="o">,</span>
<span class="c1">// Windows</span> <span class="c1">// Windows</span>
<span class="s2">&#34;Segoe UI&#34;</span><span class="o">,</span> <span class="s2">&#34;Segoe UI&#34;</span><span class="o">,</span>
<span class="c1">// Android</span> <span class="c1">// Android</span>
@ -470,9 +468,9 @@
<span class="s2">&#34;Noto Sans&#34;</span><span class="o">,</span> <span class="s2">&#34;Noto Sans&#34;</span><span class="o">,</span>
<span class="s2">&#34;Liberation Sans&#34;</span><span class="o">,</span> <span class="s2">&#34;Liberation Sans&#34;</span><span class="o">,</span>
<span class="c1">// Sans serif fallback</span> <span class="c1">// Sans serif fallback</span>
<span class="no">sans-serif</span><span class="o">,</span> <span class="ni">sans-serif</span><span class="o">,</span>
<span class="c1">// Emoji fonts</span> <span class="c1">// Emoji fonts</span>
<span class="s2">&#34;Apple Color Emoji&#34;</span><span class="o">,</span> <span class="s2">&#34;Segoe UI Emoji&#34;</span><span class="o">,</span> <span class="s2">&#34;Segoe UI Symbol&#34;</span><span class="o">,</span> <span class="s2">&#34;Noto Color Emoji&#34;</span> <span class="nv">!default</span><span class="p">;</span> <span class="s2">&#34;Apple Color Emoji&#34;</span><span class="o">,</span> <span class="s2">&#34;Segoe UI Emoji&#34;</span><span class="o">,</span> <span class="s2">&#34;Segoe UI Symbol&#34;</span><span class="o">,</span> <span class="s2">&#34;Noto Color Emoji&#34;</span> <span class="k">!default</span><span class="p">;</span>
</code></pre></div><p>Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform&rsquo;s native emoji font, and they won&rsquo;t be affected by any CSS <code>color</code> styles.</p> </code></pre></div><p>Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform&rsquo;s native emoji font, and they won&rsquo;t be affected by any CSS <code>color</code> styles.</p>
<p>This <code>font-family</code> is applied to the <code>&lt;body&gt;</code> and automatically inherited globally throughout Bootstrap. To switch the global <code>font-family</code>, update <code>$font-family-base</code> and recompile Bootstrap.</p> <p>This <code>font-family</code> is applied to the <code>&lt;body&gt;</code> and automatically inherited globally throughout Bootstrap. To switch the global <code>font-family</code>, update <code>$font-family-base</code> and recompile Bootstrap.</p>
<h2 id="headings-and-paragraphs">Headings and paragraphs</h2> <h2 id="headings-and-paragraphs">Headings and paragraphs</h2>
@ -833,7 +831,7 @@ To edit settings, press <span class="p">&lt;</span><span class="nt">kbd</span><s
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -880,7 +878,7 @@ To edit settings, press <span class="p">&lt;</span><span class="nt">kbd</span><s
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

35
docs/5.0/content/tables/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -934,16 +934,16 @@
<span class="nv">$striped-bg</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$background</span><span class="o">,</span> <span class="nf">percentage</span><span class="p">(</span><span class="nv">$table-striped-bg-factor</span><span class="p">));</span> <span class="nv">$striped-bg</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$background</span><span class="o">,</span> <span class="nf">percentage</span><span class="p">(</span><span class="nv">$table-striped-bg-factor</span><span class="p">));</span>
<span class="nv">$active-bg</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$background</span><span class="o">,</span> <span class="nf">percentage</span><span class="p">(</span><span class="nv">$table-active-bg-factor</span><span class="p">));</span> <span class="nv">$active-bg</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$background</span><span class="o">,</span> <span class="nf">percentage</span><span class="p">(</span><span class="nv">$table-active-bg-factor</span><span class="p">));</span>
<span class="nt">--</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">variable-prefix</span><span class="p">}</span><span class="nt">table-bg</span><span class="nd">:</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">background</span><span class="p">};</span> <span class="na">--#{$variable-prefix}table-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$background</span><span class="si">}</span><span class="p">;</span>
<span class="nt">--</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">variable-prefix</span><span class="p">}</span><span class="nt">table-striped-bg</span><span class="nd">:</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">striped-bg</span><span class="p">};</span> <span class="na">--#{$variable-prefix}table-striped-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$striped-bg</span><span class="si">}</span><span class="p">;</span>
<span class="nt">--</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">variable-prefix</span><span class="p">}</span><span class="nt">table-striped-color</span><span class="nd">:</span> <span class="nn">#</span><span class="p">{</span><span class="nt">color-contrast</span><span class="o">(</span><span class="err">$</span><span class="nt">striped-bg</span><span class="o">)</span><span class="p">};</span> <span class="na">--#{$variable-prefix}table-striped-color</span><span class="o">:</span> <span class="si">#{</span><span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$striped-bg</span><span class="p">)</span><span class="si">}</span><span class="p">;</span>
<span class="nt">--</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">variable-prefix</span><span class="p">}</span><span class="nt">table-active-bg</span><span class="nd">:</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">active-bg</span><span class="p">};</span> <span class="na">--#{$variable-prefix}table-active-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$active-bg</span><span class="si">}</span><span class="p">;</span>
<span class="nt">--</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">variable-prefix</span><span class="p">}</span><span class="nt">table-active-color</span><span class="nd">:</span> <span class="nn">#</span><span class="p">{</span><span class="nt">color-contrast</span><span class="o">(</span><span class="err">$</span><span class="nt">active-bg</span><span class="o">)</span><span class="p">};</span> <span class="na">--#{$variable-prefix}table-active-color</span><span class="o">:</span> <span class="si">#{</span><span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$active-bg</span><span class="p">)</span><span class="si">}</span><span class="p">;</span>
<span class="nt">--</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">variable-prefix</span><span class="p">}</span><span class="nt">table-hover-bg</span><span class="nd">:</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">hover-bg</span><span class="p">};</span> <span class="na">--#{$variable-prefix}table-hover-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$hover-bg</span><span class="si">}</span><span class="p">;</span>
<span class="nt">--</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">variable-prefix</span><span class="p">}</span><span class="nt">table-hover-color</span><span class="nd">:</span> <span class="nn">#</span><span class="p">{</span><span class="nt">color-contrast</span><span class="o">(</span><span class="err">$</span><span class="nt">hover-bg</span><span class="o">)</span><span class="p">};</span> <span class="na">--#{$variable-prefix}table-hover-color</span><span class="o">:</span> <span class="si">#{</span><span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$hover-bg</span><span class="p">)</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="na">color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
<span class="nt">border-color</span><span class="nd">:</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">background</span><span class="o">,</span> <span class="nt">percentage</span><span class="o">(</span><span class="err">$</span><span class="nt">table-border-factor</span><span class="o">))</span><span class="p">;</span> <span class="na">border-color</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$background</span><span class="o">,</span> <span class="nf">percentage</span><span class="p">(</span><span class="nv">$table-border-factor</span><span class="p">));</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div> </code></pre></div>
@ -1994,10 +1994,11 @@
<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> <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>
<span class="nv">$table-cell-padding-x-sm</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span> <span class="nv">$table-cell-padding-x-sm</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
<span class="nv">$table-cell-vertical-align</span><span class="o">:</span> <span class="no">top</span><span class="p">;</span> <span class="nv">$table-cell-vertical-align</span><span class="o">:</span> <span class="ni">top</span><span class="p">;</span>
<span class="nv">$table-color</span><span class="o">:</span> <span class="nv">$body-color</span><span class="p">;</span> <span class="nv">$table-color</span><span class="o">:</span> <span class="nv">$body-color</span><span class="p">;</span>
<span class="nv">$table-bg</span><span class="o">:</span> <span class="no">transparent</span><span class="p">;</span> <span class="nv">$table-bg</span><span class="o">:</span> <span class="ni">transparent</span><span class="p">;</span>
<span class="nv">$table-accent-bg</span><span class="o">:</span> <span class="ni">transparent</span><span class="p">;</span>
<span class="nv">$table-th-font-weight</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span> <span class="nv">$table-th-font-weight</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
@ -2019,11 +2020,11 @@
<span class="nv">$table-striped-order</span><span class="o">:</span> <span class="n">odd</span><span class="p">;</span> <span class="nv">$table-striped-order</span><span class="o">:</span> <span class="n">odd</span><span class="p">;</span>
<span class="nv">$table-group-separator-color</span><span class="o">:</span> <span class="n">currentColor</span><span class="p">;</span> <span class="nv">$table-group-separator-color</span><span class="o">:</span> <span class="ni">currentColor</span><span class="p">;</span>
<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-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-bg-scale</span><span class="o">:</span> <span class="o">-</span><span class="mi">80</span><span class="kt">%</span><span class="p">;</span>
</code></pre></div> </code></pre></div>
<h3 id="loop">Loop</h3> <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> <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>
@ -2059,7 +2060,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -2106,7 +2107,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

24
docs/5.0/content/typography/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -544,12 +544,12 @@
<span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;display-6&#34;</span><span class="p">&gt;</span>Display 6<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;display-6&#34;</span><span class="p">&gt;</span>Display 6<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</code></pre></div><p>Display headings are configured via the <code>$display-font-sizes</code> Sass map and two variables, <code>$display-font-weight</code> and <code>$display-line-height</code>.</p> </code></pre></div><p>Display headings are configured via the <code>$display-font-sizes</code> Sass map and two variables, <code>$display-font-weight</code> and <code>$display-line-height</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$display-font-sizes</span><span class="o">:</span> <span class="p">(</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$display-font-sizes</span><span class="o">:</span> <span class="p">(</span>
<span class="mi">1</span><span class="o">:</span> <span class="mi">5</span><span class="kt">rem</span><span class="o">,</span> <span class="na">1</span><span class="o">:</span> <span class="mi">5</span><span class="kt">rem</span><span class="o">,</span>
<span class="mi">2</span><span class="o">:</span> <span class="mi">4</span><span class="mf">.5</span><span class="kt">rem</span><span class="o">,</span> <span class="na">2</span><span class="o">:</span> <span class="mi">4</span><span class="mf">.5</span><span class="kt">rem</span><span class="o">,</span>
<span class="mi">3</span><span class="o">:</span> <span class="mi">4</span><span class="kt">rem</span><span class="o">,</span> <span class="na">3</span><span class="o">:</span> <span class="mi">4</span><span class="kt">rem</span><span class="o">,</span>
<span class="mi">4</span><span class="o">:</span> <span class="mi">3</span><span class="mf">.5</span><span class="kt">rem</span><span class="o">,</span> <span class="na">4</span><span class="o">:</span> <span class="mi">3</span><span class="mf">.5</span><span class="kt">rem</span><span class="o">,</span>
<span class="mi">5</span><span class="o">:</span> <span class="mi">3</span><span class="kt">rem</span><span class="o">,</span> <span class="na">5</span><span class="o">:</span> <span class="mi">3</span><span class="kt">rem</span><span class="o">,</span>
<span class="mi">6</span><span class="o">:</span> <span class="mi">2</span><span class="mf">.5</span><span class="kt">rem</span> <span class="na">6</span><span class="o">:</span> <span class="mi">2</span><span class="mf">.5</span><span class="kt">rem</span>
<span class="p">);</span> <span class="p">);</span>
<span class="nv">$display-font-weight</span><span class="o">:</span> <span class="mi">300</span><span class="p">;</span> <span class="nv">$display-font-weight</span><span class="o">:</span> <span class="mi">300</span><span class="p">;</span>
@ -773,7 +773,7 @@
<h2 id="sass">Sass</h2> <h2 id="sass">Sass</h2>
<h3 id="variables">Variables</h3> <h3 id="variables">Variables</h3>
<p>Headings have some dedicated variables for sizing and spacing.</p> <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> <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="mf">.5</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-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-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-font-weight</span><span class="o">:</span> <span class="mi">500</span><span class="p">;</span>
@ -798,7 +798,7 @@
<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">$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-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-color</span><span class="o">:</span> <span class="ni">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-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">$hr-opacity</span><span class="o">:</span> <span class="mf">.25</span><span class="p">;</span>
@ -835,7 +835,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -882,7 +882,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

14
docs/5.0/customize/color/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -797,10 +797,10 @@
<p>Add, remove, or modify values within the map to update how they&rsquo;re used in many other components. Unfortunately at this time, not <em>every</em> component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the <code>${color}</code> variables and this Sass map.</p> <p>Add, remove, or modify values within the map to update how they&rsquo;re used in many other components. Unfortunately at this time, not <em>every</em> component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the <code>${color}</code> variables and this Sass map.</p>
<h3 id="example">Example</h3> <h3 id="example">Example</h3>
<p>Here&rsquo;s how you can use these in your Sass:</p> <p>Here&rsquo;s how you can use these in your Sass:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.alpha</span> <span class="p">{</span> <span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">purple</span><span class="p">;</span> <span class="p">}</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.alpha</span> <span class="p">{</span> <span class="na">color</span><span class="o">:</span> <span class="nv">$purple</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.beta</span> <span class="p">{</span> <span class="nc">.beta</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">yellow-300</span><span class="p">;</span> <span class="na">color</span><span class="o">:</span> <span class="nv">$yellow-300</span><span class="p">;</span>
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">indigo-900</span><span class="p">;</span> <span class="na">background-color</span><span class="o">:</span> <span class="nv">$indigo-900</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div><p><a href="/docs/5.0/utilities/colors/">Color</a> and <a href="/docs/5.0/utilities/background/">background</a> utility classes are also available for setting <code>color</code> and <code>background-color</code> using the <code>500</code> color values.</p> </code></pre></div><p><a href="/docs/5.0/utilities/colors/">Color</a> and <a href="/docs/5.0/utilities/background/">background</a> utility classes are also available for setting <code>color</code> and <code>background-color</code> using the <code>500</code> color values.</p>
@ -820,7 +820,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -867,7 +867,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

38
docs/5.0/customize/components/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -419,7 +419,7 @@
<p>Here are two examples of how we loop over the <code>$theme-colors</code> map to generate modifiers to the <code>.alert</code> and <code>.list-group</code> components.</p> <p>Here are two examples of how we loop over the <code>$theme-colors</code> map to generate modifiers to the <code>.alert</code> and <code>.list-group</code> components.</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. <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><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="k">@each</span> <span class="nv">$state</span><span class="o">,</span> <span class="nv">$value</span> <span class="ow">in</span> <span class="nv">$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-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-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="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>
@ -436,7 +436,7 @@
</span><span class="c1">// Add modifier classes to change text and background color on individual items. </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">// Organizationally, this must come after the `:hover` states.
</span><span class="c1"></span> </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="k">@each</span> <span class="nv">$state</span><span class="o">,</span> <span class="nv">$value</span> <span class="ow">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
<span class="nv">$list-group-variant-bg</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-variant-bg</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-variant-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="nv">$list-group-variant-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-variant-bg</span><span class="o">,</span> <span class="nv">$list-group-variant-color</span><span class="p">)</span> <span class="o">&lt;</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</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-variant-bg</span><span class="o">,</span> <span class="nv">$list-group-variant-color</span><span class="p">)</span> <span class="o">&lt;</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</span> <span class="p">{</span>
@ -451,25 +451,25 @@
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// We deliberately hardcode the `bs-` prefix because we check <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// We deliberately hardcode the `bs-` prefix because we check
</span><span class="c1">// this custom property in JS to determine Popper&#39;s positioning </span><span class="c1">// this custom property in JS to determine Popper&#39;s positioning
</span><span class="c1"></span> </span><span class="c1"></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="k">@each</span> <span class="nv">$breakpoint</span> <span class="ow">in</span> <span class="nf">map-keys</span><span class="p">(</span><span class="nv">$grid-breakpoints</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">$breakpoint</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">$breakpoint</span><span class="p">)</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">$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="nc">.dropdown-menu</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-start</span> <span class="p">{</span> <span class="nc">.dropdown-menu</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-start</span> <span class="p">{</span>
<span class="nt">--bs-position</span><span class="nd">:</span> <span class="nt">start</span><span class="p">;</span> <span class="na">--bs-position</span><span class="o">:</span> <span class="ni">start</span><span class="p">;</span>
<span class="k">&amp;</span><span class="o">[</span><span class="nt">data-bs-popper</span><span class="o">]</span> <span class="p">{</span> <span class="k">&amp;</span><span class="o">[</span><span class="nt">data-bs-popper</span><span class="o">]</span> <span class="p">{</span>
<span class="nt">right</span><span class="nd">:</span> <span class="nt">auto</span> <span class="nn">#</span><span class="p">{</span><span class="s2">&#34;/* rtl:ignore */&#34;</span><span class="p">};</span> <span class="na">right</span><span class="o">:</span> <span class="ni">auto</span><span class="p">;</span>
<span class="nt">left</span><span class="nd">:</span> <span class="nt">0</span> <span class="nn">#</span><span class="p">{</span><span class="s2">&#34;/* rtl:ignore */&#34;</span><span class="p">};</span> <span class="na">left</span><span class="o">:</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>
<span class="nc">.dropdown-menu</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-end</span> <span class="p">{</span> <span class="nc">.dropdown-menu</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-end</span> <span class="p">{</span>
<span class="nt">--bs-position</span><span class="nd">:</span> <span class="nt">end</span><span class="p">;</span> <span class="na">--bs-position</span><span class="o">:</span> <span class="ni">end</span><span class="p">;</span>
<span class="k">&amp;</span><span class="o">[</span><span class="nt">data-bs-popper</span><span class="o">]</span> <span class="p">{</span> <span class="k">&amp;</span><span class="o">[</span><span class="nt">data-bs-popper</span><span class="o">]</span> <span class="p">{</span>
<span class="nt">right</span><span class="nd">:</span> <span class="nt">0</span> <span class="nn">#</span><span class="p">{</span><span class="s2">&#34;/* rtl:ignore */&#34;</span><span class="p">};</span> <span class="na">right</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="nt">left</span><span class="nd">:</span> <span class="nt">auto</span> <span class="nn">#</span><span class="p">{</span><span class="s2">&#34;/* rtl:ignore */&#34;</span><span class="p">};</span> <span class="na">left</span><span class="o">:</span> <span class="ni">auto</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> <span class="p">}</span>
@ -477,12 +477,12 @@
</code></pre></div> </code></pre></div>
<p>Should you modify your <code>$grid-breakpoints</code>, your changes will apply to all the loops iterating over that map.</p> <p>Should you modify your <code>$grid-breakpoints</code>, your changes will apply to all the loops iterating over that map.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$grid-breakpoints</span><span class="o">:</span> <span class="p">(</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$grid-breakpoints</span><span class="o">:</span> <span class="p">(</span>
<span class="n">xs</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> <span class="na">xs</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
<span class="n">sm</span><span class="o">:</span> <span class="mi">576</span><span class="kt">px</span><span class="o">,</span> <span class="na">sm</span><span class="o">:</span> <span class="mi">576</span><span class="kt">px</span><span class="o">,</span>
<span class="n">md</span><span class="o">:</span> <span class="mi">768</span><span class="kt">px</span><span class="o">,</span> <span class="na">md</span><span class="o">:</span> <span class="mi">768</span><span class="kt">px</span><span class="o">,</span>
<span class="n">lg</span><span class="o">:</span> <span class="mi">992</span><span class="kt">px</span><span class="o">,</span> <span class="na">lg</span><span class="o">:</span> <span class="mi">992</span><span class="kt">px</span><span class="o">,</span>
<span class="n">xl</span><span class="o">:</span> <span class="mi">1200</span><span class="kt">px</span><span class="o">,</span> <span class="na">xl</span><span class="o">:</span> <span class="mi">1200</span><span class="kt">px</span><span class="o">,</span>
<span class="n">xxl</span><span class="o">:</span> <span class="mi">1400</span><span class="kt">px</span> <span class="na">xxl</span><span class="o">:</span> <span class="mi">1400</span><span class="kt">px</span>
<span class="p">);</span> <span class="p">);</span>
</code></pre></div> </code></pre></div>
<p>For more information and examples on how to modify our Sass maps and variables, please refer to <a href="/docs/5.0/layout/grid/#sass">the Sass section of the Grid documentation</a>.</p> <p>For more information and examples on how to modify our Sass maps and variables, please refer to <a href="/docs/5.0/layout/grid/#sass">the Sass section of the Grid documentation</a>.</p>
@ -532,7 +532,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -579,7 +579,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

8
docs/5.0/customize/css-variables/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Use Bootstrap&rsquo;s CSS custom properties for fast and forward-looking design and development."> <meta name="description" content="Use Bootstrap&rsquo;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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -468,7 +468,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -515,7 +515,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

8
docs/5.0/customize/optimize/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -528,7 +528,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -575,7 +575,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

8
docs/5.0/customize/options/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -499,7 +499,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -546,7 +546,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

10
docs/5.0/customize/overview/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -466,7 +466,7 @@
<li><a href="/docs/5.0/components/carousel/#with-controls">Carousel controls</a></li> <li><a href="/docs/5.0/components/carousel/#with-controls">Carousel controls</a></li>
<li><a href="/docs/5.0/components/navbar/#responsive-behaviors">Navbar toggle buttons</a></li> <li><a href="/docs/5.0/components/navbar/#responsive-behaviors">Navbar toggle buttons</a></li>
</ul> </ul>
<p>Based on <a href="https://github.com/twbs/bootstrap/issues/25394">community conversation</a>, some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on a best path forward, if necessary.</p> <p>Based on <a href="https://github.com/twbs/bootstrap/issues/25394">community conversation</a>, some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.</p>
</div> </div>
</main> </main>
@ -484,7 +484,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -531,7 +531,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

52
docs/5.0/customize/sass/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en"> <meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0"> <meta name="docsearch:version" content="5.0">
@ -17,7 +17,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet"> <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@ -482,7 +482,7 @@
<h2 id="variable-defaults">Variable defaults</h2> <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&rsquo;s default value in your own Sass without modifying Bootstrap&rsquo;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&rsquo;t be re-assigned by the default values in Bootstrap.</p> <p>Every Sass variable in Bootstrap includes the <code>!default</code> flag allowing you to override the variable&rsquo;s default value in your own Sass without modifying Bootstrap&rsquo;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&rsquo;t be re-assigned by the default values in Bootstrap.</p>
<p>You will find the complete list of Bootstrap&rsquo;s variables in <code>scss/_variables.scss</code>. Some variables are set to <code>null</code>, these variables don&rsquo;t output the property unless they are overridden in your configuration.</p> <p>You will find the complete list of Bootstrap&rsquo;s variables in <code>scss/_variables.scss</code>. Some variables are set to <code>null</code>, these variables don&rsquo;t output the property unless they are overridden in your configuration.</p>
<p>Variable overrides must come after our functions, variables, and mixins are imported, but before the rest of the imports.</p> <p>Variable overrides must come after our functions are imported, but before the rest of the imports.</p>
<p>Here&rsquo;s an example that changes the <code>background-color</code> and <code>color</code> for the <code>&lt;body&gt;</code> when importing and compiling Bootstrap via npm:</p> <p>Here&rsquo;s an example that changes the <code>background-color</code> and <code>color</code> for the <code>&lt;body&gt;</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 <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">&#34;../node_modules/bootstrap/scss/functions&#34;</span><span class="p">;</span> </span><span class="c1"></span><span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/functions&#34;</span><span class="p">;</span>
@ -495,8 +495,6 @@
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/variables&#34;</span><span class="p">;</span> </span><span class="c1"></span><span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/variables&#34;</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/mixins&#34;</span><span class="p">;</span> <span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/mixins&#34;</span><span class="p">;</span>
<span class="c1">// Bootstrap and its default variables
</span><span class="c1"></span>
<span class="c1">// Optional Bootstrap components here <span class="c1">// Optional Bootstrap components here
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/root&#34;</span><span class="p">;</span> </span><span class="c1"></span><span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/root&#34;</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/reboot&#34;</span><span class="p">;</span> <span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/reboot&#34;</span><span class="p">;</span>
@ -514,7 +512,7 @@
<p>All variables in the <code>$theme-colors</code> map are defined as standalone variables. To modify an existing color in our <code>$theme-colors</code> map, add the following to your custom Sass file:</p> <p>All variables in the <code>$theme-colors</code> map are defined as standalone variables. To modify an existing color in our <code>$theme-colors</code> map, add the following to your custom Sass file:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$primary</span><span class="o">:</span> <span class="mh">#0074d9</span><span class="p">;</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$primary</span><span class="o">:</span> <span class="mh">#0074d9</span><span class="p">;</span>
<span class="nv">$danger</span><span class="o">:</span> <span class="mh">#ff4136</span><span class="p">;</span> <span class="nv">$danger</span><span class="o">:</span> <span class="mh">#ff4136</span><span class="p">;</span>
</code></pre></div><p>Later on, theses variables are set in Bootstrap&rsquo;s <code>$theme-colors</code> map:</p> </code></pre></div><p>Later on, these variables are set in Bootstrap&rsquo;s <code>$theme-colors</code> map:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span>
<span class="s2">&#34;primary&#34;</span><span class="o">:</span> <span class="nv">$primary</span><span class="o">,</span> <span class="s2">&#34;primary&#34;</span><span class="o">:</span> <span class="nv">$primary</span><span class="o">,</span>
<span class="s2">&#34;danger&#34;</span><span class="o">:</span> <span class="nv">$danger</span> <span class="s2">&#34;danger&#34;</span><span class="o">:</span> <span class="nv">$danger</span>
@ -549,49 +547,49 @@
<h3 id="colors">Colors</h3> <h3 id="colors">Colors</h3>
<p>Next to the <a href="/docs/5.0/customize/color/#color-sass-maps">Sass maps</a> we have, theme colors can also be used as standalone variables, like <code>$primary</code>.</p> <p>Next to the <a href="/docs/5.0/customize/color/#color-sass-maps">Sass maps</a> we have, theme colors can also be used as standalone variables, like <code>$primary</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">gray-100</span><span class="p">;</span> <span class="na">color</span><span class="o">:</span> <span class="nv">$gray-100</span><span class="p">;</span>
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">dark</span><span class="p">;</span> <span class="na">background-color</span><span class="o">:</span> <span class="nv">$dark</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div><p>You can lighten or darken colors with Bootstrap&rsquo;s <code>tint-color()</code> and <code>shade-color()</code> functions. These functions will mix colors with black or white, unlike Sass' native <code>lighten()</code> and <code>darken()</code> functions which will change the lightness by a fixed amount, which often doesn&rsquo;t lead to the desired effect.</p> </code></pre></div><p>You can lighten or darken colors with Bootstrap&rsquo;s <code>tint-color()</code> and <code>shade-color()</code> functions. These functions will mix colors with black or white, unlike Sass' native <code>lighten()</code> and <code>darken()</code> functions which will change the lightness by a fixed amount, which often doesn&rsquo;t lead to the desired effect.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Tint a color: mix a color with white <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Tint a color: mix a color with white
</span><span class="c1"></span><span class="k">@function</span> <span class="nt">tint-color</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">weight</span><span class="o">)</span> <span class="p">{</span> </span><span class="c1"></span><span class="k">@function</span><span class="nf"> tint-color</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">)</span> <span class="p">{</span>
<span class="k">@return</span> <span class="nt">mix</span><span class="o">(</span><span class="nt">white</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">weight</span><span class="o">)</span><span class="p">;</span> <span class="k">@return</span> <span class="nf">mix</span><span class="p">(</span><span class="ni">white</span><span class="o">,</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="c1">// Shade a color: mix a color with black <span class="c1">// Shade a color: mix a color with black
</span><span class="c1"></span><span class="k">@function</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="err">$</span><span class="nt">weight</span><span class="o">)</span> <span class="p">{</span> </span><span class="c1"></span><span class="k">@function</span><span class="nf"> shade-color</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">)</span> <span class="p">{</span>
<span class="k">@return</span> <span class="nt">mix</span><span class="o">(</span><span class="nt">black</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">weight</span><span class="o">)</span><span class="p">;</span> <span class="k">@return</span> <span class="nf">mix</span><span class="p">(</span><span class="no">black</span><span class="o">,</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="c1">// Shade the color if the weight is positive, else tint it <span class="c1">// Shade the color if the weight is positive, else tint it
</span><span class="c1"></span><span class="k">@function</span> <span class="nt">shift-color</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">weight</span><span class="o">)</span> <span class="p">{</span> </span><span class="c1"></span><span class="k">@function</span><span class="nf"> shift-color</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">)</span> <span class="p">{</span>
<span class="k">@return</span> <span class="nt">if</span><span class="o">(</span><span class="err">$</span><span class="nt">weight</span> <span class="o">&gt;</span> <span class="nt">0</span><span class="o">,</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="err">$</span><span class="nt">weight</span><span class="o">),</span> <span class="nt">tint-color</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="nt">-</span><span class="err">$</span><span class="nt">weight</span><span class="o">))</span><span class="p">;</span> <span class="k">@return</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$weight</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="o">,</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">)</span><span class="o">,</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="o">-</span><span class="nv">$weight</span><span class="p">));</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div> </code></pre></div>
<p>In practice, you&rsquo;d call the function and pass in the color and weight parameters.</p> <p>In practice, you&rsquo;d call the function and pass in the color and weight parameters.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="nt">tint-color</span><span class="o">(</span><span class="err">$</span><span class="nt">primary</span><span class="o">,</span> <span class="nt">10</span><span class="err">%</span><span class="o">)</span><span class="p">;</span> <span class="na">color</span><span class="o">:</span> <span class="nf">tint-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="p">}</span> <span class="p">}</span>
<span class="nc">.custom-element-2</span> <span class="p">{</span> <span class="nc">.custom-element-2</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">danger</span><span class="o">,</span> <span class="nt">30</span><span class="err">%</span><span class="o">)</span><span class="p">;</span> <span class="na">color</span><span class="o">:</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$danger</span><span class="o">,</span> <span class="mi">30</span><span class="kt">%</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div><h3 id="color-contrast">Color contrast</h3> </code></pre></div><h3 id="color-contrast">Color contrast</h3>
<p>In order to meet <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">WCAG 2.0 accessibility standards for color contrast</a>, authors <strong>must</strong> provide <a href="https://www.w3.org/WAI/WCAG20/quickref/20160105/Overview.php#visual-audio-contrast-contrast">a contrast ratio of at least 4.5:1</a>, with very few exceptions.</p> <p>In order to meet <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">WCAG 2.0 accessibility standards for color contrast</a>, authors <strong>must</strong> provide <a href="https://www.w3.org/WAI/WCAG20/quickref/20160105/Overview.php#visual-audio-contrast-contrast">a contrast ratio of at least 4.5:1</a>, with very few exceptions.</p>
<p>An additional function we include in Bootstrap is the color contrast function, <code>color-contrast</code>. It utilizes the <a href="https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests">WCAG 2.0 algorithm</a> for calculating contrast thresholds based on <a href="https://www.w3.org/WAI/GL/wiki/Relative_luminance">relative luminance</a> in a <code>sRGB</code> colorspace to automatically return a light (<code>#fff</code>), dark (<code>#212529</code>) or black (<code>#000</code>) contrast color based on the specified base color. This function is especially useful for mixins or loops where you&rsquo;re generating multiple classes.</p> <p>An additional function we include in Bootstrap is the color contrast function, <code>color-contrast</code>. It utilizes the <a href="https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests">WCAG 2.0 algorithm</a> for calculating contrast thresholds based on <a href="https://www.w3.org/WAI/GL/wiki/Relative_luminance">relative luminance</a> in a <code>sRGB</code> colorspace to automatically return a light (<code>#fff</code>), dark (<code>#212529</code>) or black (<code>#000</code>) contrast color based on the specified base color. This function is especially useful for mixins or loops where you&rsquo;re generating multiple classes.</p>
<p>For example, to generate color swatches from our <code>$theme-colors</code> map:</p> <p>For example, to generate color swatches from our <code>$theme-colors</code> map:</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> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="ow">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
<span class="nc">.swatch-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span> <span class="nc">.swatch-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="nt">color-contrast</span><span class="o">(</span><span class="err">$</span><span class="nt">value</span><span class="o">)</span><span class="p">;</span> <span class="na">color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$value</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div><p>It can also be used for one-off contrast needs:</p> </code></pre></div><p>It can also be used for one-off contrast needs:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="nt">color-contrast</span><span class="o">(</span><span class="nn">#000</span><span class="o">)</span><span class="p">;</span> <span class="c1">// returns `color: #fff` <span class="na">color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="mh">#000</span><span class="p">);</span> <span class="c1">// returns `color: #fff`
</span><span class="c1"></span><span class="p">}</span> </span><span class="c1"></span><span class="p">}</span>
</code></pre></div><p>You can also specify a base color with our color map functions:</p> </code></pre></div><p>You can also specify a base color with our color map functions:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="nt">color-contrast</span><span class="o">(</span><span class="err">$</span><span class="nt">dark</span><span class="o">)</span><span class="p">;</span> <span class="c1">// returns `color: #fff` <span class="na">color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$dark</span><span class="p">);</span> <span class="c1">// returns `color: #fff`
</span><span class="c1"></span><span class="p">}</span> </span><span class="c1"></span><span class="p">}</span>
</code></pre></div><h3 id="escape-svg">Escape SVG</h3> </code></pre></div><h3 id="escape-svg">Escape SVG</h3>
<p>We use the <code>escape-svg</code> function to escape the <code>&lt;</code>, <code>&gt;</code> and <code>#</code> characters for SVG background images. When using the <code>escape-svg</code> function, data URIs must be quoted.</p> <p>We use the <code>escape-svg</code> function to escape the <code>&lt;</code>, <code>&gt;</code> and <code>#</code> characters for SVG background images. When using the <code>escape-svg</code> function, data URIs must be quoted.</p>
@ -603,12 +601,12 @@
<span class="nc">.element</span> <span class="p">{</span> <span class="nc">.element</span> <span class="p">{</span>
<span class="c1">// Output calc(.25rem - 1px) is valid <span class="c1">// Output calc(.25rem - 1px) is valid
</span><span class="c1"></span> <span class="nt">border-radius</span><span class="nd">:</span> <span class="nt">calc</span><span class="o">(</span><span class="err">$</span><span class="nt">border-radius</span> <span class="nt">-</span> <span class="err">$</span><span class="nt">border-width</span><span class="o">)</span><span class="p">;</span> </span><span class="c1"></span> <span class="na">border-radius</span><span class="o">:</span> <span class="nf">calc</span><span class="p">(</span><span class="nv">$border-radius</span> <span class="o">-</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="nc">.element</span> <span class="p">{</span> <span class="nc">.element</span> <span class="p">{</span>
<span class="c1">// Output the same calc(.25rem - 1px) as above <span class="c1">// Output the same calc(.25rem - 1px) as above
</span><span class="c1"></span> <span class="nt">border-radius</span><span class="nd">:</span> <span class="nt">subtract</span><span class="o">(</span><span class="err">$</span><span class="nt">border-radius</span><span class="o">,</span> <span class="err">$</span><span class="nt">border-width</span><span class="o">)</span><span class="p">;</span> </span><span class="c1"></span> <span class="na">border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$border-radius</span><span class="o">,</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div><p>Example where the calc is invalid:</p> </code></pre></div><p>Example where the calc is invalid:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$border-radius</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$border-radius</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
@ -616,12 +614,12 @@
<span class="nc">.element</span> <span class="p">{</span> <span class="nc">.element</span> <span class="p">{</span>
<span class="c1">// Output calc(.25rem - 0) is invalid <span class="c1">// Output calc(.25rem - 0) is invalid
</span><span class="c1"></span> <span class="nt">border-radius</span><span class="nd">:</span> <span class="nt">calc</span><span class="o">(</span><span class="err">$</span><span class="nt">border-radius</span> <span class="nt">-</span> <span class="err">$</span><span class="nt">border-width</span><span class="o">)</span><span class="p">;</span> </span><span class="c1"></span> <span class="na">border-radius</span><span class="o">:</span> <span class="nf">calc</span><span class="p">(</span><span class="nv">$border-radius</span> <span class="o">-</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
<span class="nc">.element</span> <span class="p">{</span> <span class="nc">.element</span> <span class="p">{</span>
<span class="c1">// Output .25rem <span class="c1">// Output .25rem
</span><span class="c1"></span> <span class="nt">border-radius</span><span class="nd">:</span> <span class="nt">subtract</span><span class="o">(</span><span class="err">$</span><span class="nt">border-radius</span><span class="o">,</span> <span class="err">$</span><span class="nt">border-width</span><span class="o">)</span><span class="p">;</span> </span><span class="c1"></span> <span class="na">border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$border-radius</span><span class="o">,</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span> <span class="p">}</span>
</code></pre></div><h2 id="mixins">Mixins</h2> </code></pre></div><h2 id="mixins">Mixins</h2>
<p>Our <code>scss/mixins/</code> directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.</p> <p>Our <code>scss/mixins/</code> directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.</p>
@ -634,7 +632,7 @@
<span class="p">}</span> <span class="p">}</span>
</code></pre></div> </code></pre></div>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span> <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> color-scheme</span><span class="p">(</span><span class="n">dark</span><span class="p">)</span> <span class="p">{</span> <span class="k">@include</span><span class="nd"> color-scheme</span><span class="p">(</span><span class="ni">dark</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Insert dark mode styles here <span class="c1">// Insert dark mode styles here
</span><span class="c1"></span> <span class="p">}</span> </span><span class="c1"></span> <span class="p">}</span>
@ -659,7 +657,7 @@
<ul class="list-unstyled small text-muted"> <ul class="list-unstyled small text-muted">
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">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>.</li> <li class="mb-2">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>.</li>
<li class="mb-2">Currently v5.0.1.</li> <li class="mb-2">Currently v5.0.2.</li>
</ul> </ul>
</div> </div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3"> <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@ -706,7 +704,7 @@
</div> </div>
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>

597
docs/5.0/dist/css/bootstrap-grid.css vendored
View File

File diff suppressed because it is too large Load Diff

2
docs/5.0/dist/css/bootstrap-grid.css.map vendored
View File

File diff suppressed because one or more lines are too long

4
docs/5.0/dist/css/bootstrap-grid.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap-grid.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

597
docs/5.0/dist/css/bootstrap-grid.rtl.css vendored
View File

File diff suppressed because it is too large Load Diff

2
docs/5.0/dist/css/bootstrap-grid.rtl.css.map vendored
View File

File diff suppressed because one or more lines are too long

4
docs/5.0/dist/css/bootstrap-grid.rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap-grid.rtl.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap-reboot.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Reboot v5.0.1 (https://getbootstrap.com/) * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

2
docs/5.0/dist/css/bootstrap-reboot.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap-reboot.min.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Reboot v5.0.1 (https://getbootstrap.com/) * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

2
docs/5.0/dist/css/bootstrap-reboot.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap-reboot.rtl.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Reboot v5.0.1 (https://getbootstrap.com/) * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

2
docs/5.0/dist/css/bootstrap-reboot.rtl.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap-reboot.rtl.min.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Reboot v5.0.1 (https://getbootstrap.com/) * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

2
docs/5.0/dist/css/bootstrap-reboot.rtl.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap-utilities.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Utilities v5.0.1 (https://getbootstrap.com/) * Bootstrap Utilities v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

2
docs/5.0/dist/css/bootstrap-utilities.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap-utilities.min.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Utilities v5.0.1 (https://getbootstrap.com/) * Bootstrap Utilities v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

2
docs/5.0/dist/css/bootstrap-utilities.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap-utilities.rtl.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Utilities v5.0.1 (https://getbootstrap.com/) * Bootstrap Utilities v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

2
docs/5.0/dist/css/bootstrap-utilities.rtl.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap-utilities.rtl.min.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Utilities v5.0.1 (https://getbootstrap.com/) * Bootstrap Utilities v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

2
docs/5.0/dist/css/bootstrap-utilities.rtl.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

673
docs/5.0/dist/css/bootstrap.css vendored
View File

File diff suppressed because it is too large Load Diff

2
docs/5.0/dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

4
docs/5.0/dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

673
docs/5.0/dist/css/bootstrap.rtl.css vendored
View File

File diff suppressed because it is too large Load Diff

2
docs/5.0/dist/css/bootstrap.rtl.css.map vendored
View File

File diff suppressed because one or more lines are too long

4
docs/5.0/dist/css/bootstrap.rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/css/bootstrap.rtl.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

705
docs/5.0/dist/js/bootstrap.bundle.js vendored
View File

File diff suppressed because it is too large Load Diff

2
docs/5.0/dist/js/bootstrap.bundle.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
docs/5.0/dist/js/bootstrap.bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/js/bootstrap.bundle.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

693
docs/5.0/dist/js/bootstrap.esm.js vendored
View File

File diff suppressed because it is too large Load Diff

2
docs/5.0/dist/js/bootstrap.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
docs/5.0/dist/js/bootstrap.esm.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/js/bootstrap.esm.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

695
docs/5.0/dist/js/bootstrap.js vendored
View File

File diff suppressed because it is too large Load Diff

2
docs/5.0/dist/js/bootstrap.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
docs/5.0/dist/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/5.0/dist/js/bootstrap.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

6
docs/5.0/examples/album-rtl/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>مثال الألبوم · Bootstrap v5.0</title> <title>مثال الألبوم · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album-rtl/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album-rtl/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-LPvXVVAlyPoBSGkX8UddpctDks+1P4HG8MhT7/YwqHtJ40bstjzCqjj+VVVDhsCo" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
@ -259,7 +259,7 @@
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body> </body>

6
docs/5.0/examples/album/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>Album example · Bootstrap v5.0</title> <title>Album example · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
@ -259,7 +259,7 @@
</footer> </footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body> </body>

4
docs/5.0/examples/blog-rtl/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>قالب المدونة · Bootstrap v5.0</title> <title>قالب المدونة · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/blog-rtl/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/blog-rtl/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-LPvXVVAlyPoBSGkX8UddpctDks+1P4HG8MhT7/YwqHtJ40bstjzCqjj+VVVDhsCo" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">

4
docs/5.0/examples/blog/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>Blog Template · Bootstrap v5.0</title> <title>Blog Template · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/blog/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/blog/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">

6
docs/5.0/examples/carousel-rtl/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>قالب شرائح العرض · Bootstrap v5.0</title> <title>قالب شرائح العرض · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/carousel-rtl/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/carousel-rtl/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-LPvXVVAlyPoBSGkX8UddpctDks+1P4HG8MhT7/YwqHtJ40bstjzCqjj+VVVDhsCo" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
@ -217,7 +217,7 @@
</main> </main>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body> </body>

6
docs/5.0/examples/carousel/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>Carousel Template · Bootstrap v5.0</title> <title>Carousel Template · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/carousel/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/carousel/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
@ -217,7 +217,7 @@
</main> </main>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body> </body>

6
docs/5.0/examples/cheatsheet-rtl/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>ورقة الغش · Bootstrap v5.0</title> <title>ورقة الغش · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cheatsheet-rtl/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cheatsheet-rtl/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-LPvXVVAlyPoBSGkX8UddpctDks+1P4HG8MhT7/YwqHtJ40bstjzCqjj+VVVDhsCo" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
@ -1763,7 +1763,7 @@
</div> </div>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="../cheatsheet/cheatsheet.js"></script> <script src="../cheatsheet/cheatsheet.js"></script>
</body> </body>

9
docs/5.0/examples/cheatsheet/cheatsheet.js
View File

@ -25,8 +25,8 @@
toast.show() toast.show()
}) })
// Disable empty links // Disable empty links and submit buttons
document.querySelectorAll('[href="#"]') document.querySelectorAll('[href="#"], [type="submit"]')
.forEach(function (link) { .forEach(function (link) {
link.addEventListener('click', function (event) { link.addEventListener('click', function (event) {
event.preventDefault() event.preventDefault()
@ -41,6 +41,11 @@
} }
var link = document.querySelector('.bd-aside a[href="' + hash + '"]') var link = document.querySelector('.bd-aside a[href="' + hash + '"]')
if (!link) {
return
}
var active = document.querySelector('.bd-aside .active') var active = document.querySelector('.bd-aside .active')
var parent = link.parentNode.parentNode.previousElementSibling var parent = link.parentNode.parentNode.previousElementSibling

6
docs/5.0/examples/cheatsheet/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>Cheatsheet · Bootstrap v5.0</title> <title>Cheatsheet · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cheatsheet/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cheatsheet/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
@ -1748,7 +1748,7 @@
</div> </div>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="cheatsheet.js"></script> <script src="cheatsheet.js"></script>
</body> </body>

6
docs/5.0/examples/checkout-rtl/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>مثال إتمام الشراء · Bootstrap v5.0</title> <title>مثال إتمام الشراء · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout-rtl/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout-rtl/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-LPvXVVAlyPoBSGkX8UddpctDks+1P4HG8MhT7/YwqHtJ40bstjzCqjj+VVVDhsCo" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
@ -270,7 +270,7 @@
</div> </div>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="../checkout/form-validation.js"></script> <script src="../checkout/form-validation.js"></script>
</body> </body>

6
docs/5.0/examples/checkout/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>Checkout example · Bootstrap v5.0</title> <title>Checkout example · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
@ -271,7 +271,7 @@
</div> </div>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="form-validation.js"></script> <script src="form-validation.js"></script>
</body> </body>

4
docs/5.0/examples/cover/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>Cover Template · Bootstrap v5.0</title> <title>Cover Template · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cover/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cover/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">

2
docs/5.0/examples/dashboard-rtl/dashboard.js
View File

@ -3,7 +3,7 @@
(function () { (function () {
'use strict' 'use strict'
feather.replace() feather.replace({ 'aria-hidden': 'true' })
// Graphs // Graphs
var ctx = document.getElementById('myChart') var ctx = document.getElementById('myChart')

26
docs/5.0/examples/dashboard-rtl/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1"> <meta name="generator" content="Hugo 0.84.0">
<title>قالب لوحة القيادة · Bootstrap v5.0</title> <title>قالب لوحة القيادة · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/dashboard-rtl/"> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/dashboard-rtl/">
@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-LPvXVVAlyPoBSGkX8UddpctDks+1P4HG8MhT7/YwqHtJ40bstjzCqjj+VVVDhsCo" crossorigin="anonymous"> <link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
@ -53,11 +53,11 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث"> <input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث">
<ul class="navbar-nav px-3"> <div class="navbar-nav">
<li class="nav-item text-nowrap"> <div class="nav-item text-nowrap">
<a class="nav-link" href="#">تسجيل الخروج</a> <a class="nav-link px-3" href="#">تسجيل الخروج</a>
</li> </div>
</ul> </div>
</header> </header>
<div class="container-fluid"> <div class="container-fluid">
@ -160,11 +160,11 @@
<table class="table table-striped table-sm"> <table class="table table-striped table-sm">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>عنوان</th> <th scope="col">عنوان</th>
<th>عنوان</th> <th scope="col">عنوان</th>
<th>عنوان</th> <th scope="col">عنوان</th>
<th>عنوان</th> <th scope="col">عنوان</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -288,7 +288,7 @@
</div> </div>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js" integrity="sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI" crossorigin="anonymous"></script><script src="dashboard.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js" integrity="sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI" crossorigin="anonymous"></script><script src="dashboard.js"></script>
</body> </body>

Some files were not shown because too many files have changed in this diff Show More