mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-28 10:24:19 +01:00
Add v5.0.2 docs
This commit is contained in:
XhmikosR
parent
258f7e37f3
commit
a43dd5a897
16
404.html
16
404.html
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
<meta name="robots" content="noindex,follow">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<main class="my-auto p-5" id="content">
|
||||
<div class="text-center py-5">
|
||||
<h1 class="display-1">404</h1>
|
||||
@ -158,7 +158,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -205,7 +205,7 @@
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
@ -213,7 +213,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||
<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:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -403,10 +403,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Have a need for Bootstrap’s brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well.</p>
|
||||
<h2 id="logo">Logo</h2>
|
||||
@ -456,7 +456,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -503,7 +503,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -511,7 +511,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,10 +393,10 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Bootstrap is released under the MIT license and is copyright 2021 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
|
||||
<h2 id="it-requires-you-to">It requires you to:</h2>
|
||||
@ -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>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
|
||||
</ul>
|
||||
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v5.0.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>
|
||||
</main>
|
||||
@ -441,7 +441,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -488,7 +488,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -496,7 +496,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,10 +393,10 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="team">Team</h2>
|
||||
<p>Bootstrap is maintained by a <a href="https://github.com/orgs/twbs/people">small team of developers</a> on GitHub. We’re actively looking to grow this team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.</p>
|
||||
@ -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’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’s codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.</p>
|
||||
<h2 id="get-involved">Get involved</h2>
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.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>
|
||||
</main>
|
||||
@ -425,7 +425,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -472,7 +472,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -480,7 +480,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,10 +393,10 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
|
||||
|
||||
@ -407,70 +407,70 @@
|
||||
<strong>Mark Otto</strong> @mdo
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
|
||||
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
<strong>Jacob Thornton</strong> @fat
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
|
||||
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
<strong>XhmikosR</strong> @xhmikosr
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/geosot">
|
||||
<img src="https://github.com/geosot.png" alt="@geosot" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
<strong>GeoSot</strong> @geosot
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/rohit2sharma95">
|
||||
<img src="https://github.com/rohit2sharma95.png" alt="@rohit2sharma95" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
<strong>Rohit Sharma</strong> @rohit2sharma95
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/alpadev">
|
||||
<img src="https://github.com/alpadev.png" alt="@alpadev" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
<strong>alpadev</strong> @alpadev
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ffoodd">
|
||||
<img src="https://github.com/ffoodd.png" alt="@ffoodd" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
<strong>Gaël Poupard</strong> @ffoodd
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
|
||||
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
<strong>Patrick H. Lauke</strong> @patrickhlauke
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
|
||||
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
<strong>Martijn Cuppens</strong> @martijncuppens
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
|
||||
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
<strong>Johann-S</strong> @johann-s
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
|
||||
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
@ -479,7 +479,7 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.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>
|
||||
</main>
|
||||
@ -497,7 +497,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -544,7 +544,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -552,7 +552,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Links to community-translated Bootstrap documentation sites.">
|
||||
<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:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,10 +393,10 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Community members have translated Bootstrap’s documentation into various languages. None are officially supported and they may not always be up to date.</p>
|
||||
|
||||
@ -409,6 +409,7 @@
|
||||
<li><a href="https://getbootstrap.su/" hreflang="ru">Bootstrap 5 на русском (Russian)</a></li>
|
||||
<li><a href="https://getbootstrap.kr/" hreflang="ko">Bootstrap 5 한국어 문서 (Korean)</a></li>
|
||||
<li><a href="https://bootstrap5.hexschool.com/" hreflang="zh-tw">Bootstrap 5 繁體中文手冊 (中文(繁體))</a></li>
|
||||
<li><a href="https://v5.bootcss.com/" hreflang="zh-CN">Bootstrap 5 中文文档 (Simplified Chinese)</a></li>
|
||||
</ul>
|
||||
|
||||
<p><strong>We don’t help organize or host translations, we just link to them.</strong></p>
|
||||
@ -430,7 +431,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -477,7 +478,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -485,7 +486,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -414,10 +414,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
<p>The accordion uses <a href="/docs/5.0/components/collapse/">collapse</a> internally to make it collapsible. To render an accordion that’s expanded, add the <code>.open</code> class on the <code>.accordion</code>.</p>
|
||||
@ -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-color</span><span class="o">:</span> <span class="nv">$accordion-color</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-button-bg</span><span class="o">:</span> <span class="nv">$accordion-bg</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-transition</span><span class="o">:</span> <span class="nv">$btn-transition</span><span class="o">,</span> <span class="no">border</span><span class="o">-</span><span class="n">radius</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-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-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-color</span><span class="o">:</span> <span class="nv">$accordion-color</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-icon-active-color</span><span class="o">:</span> <span class="nv">$accordion-button-active-color</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-icon-transition</span><span class="o">:</span> <span class="no">transform</span> <span class="mf">.2</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-icon-transform</span><span class="o">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="mi">-180</span><span class="kt">deg</span><span class="p">);</span>
|
||||
<span class="nv">$accordion-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="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("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$accordion-icon-color</span><span class="si">}</span><span class="sx">'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>")</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-button-active-icon</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$accordion-icon-active-color</span><span class="si">}</span><span class="sx">'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>")</span><span class="p">;</span>
|
||||
@ -703,7 +703,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<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">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>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -758,7 +758,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -423,10 +423,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
<p>Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code>.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts JavaScript plugin</a>.</p>
|
||||
@ -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-link-font-weight</span><span class="o">:</span> <span class="nv">$font-weight-bold</span><span class="p">;</span>
|
||||
<span class="nv">$alert-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$alert-bg-scale</span><span class="o">:</span> <span class="mi">-80</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$alert-border-scale</span><span class="o">:</span> <span class="mi">-70</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$alert-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="o">-</span><span class="mi">70</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$alert-color-scale</span><span class="o">:</span> <span class="mi">40</span><span class="kt">%</span><span class="p">;</span>
|
||||
<span class="nv">$alert-dismissible-padding-r</span><span class="o">:</span> <span class="nv">$alert-padding-x</span> <span class="o">*</span> <span class="mi">3</span><span class="p">;</span> <span class="c1">// 3x covers width of x plus default padding on either side
|
||||
</span></code></pre></div>
|
||||
<h3 id="variant-mixin">Variant mixin</h3>
|
||||
<p>Used in combination with <code>$theme-colors</code> to create contextual modifier classes for our alerts.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> alert-variant</span><span class="p">(</span><span class="nv">$background</span><span class="o">,</span> <span class="nv">$border</span><span class="o">,</span> <span class="nv">$color</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="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="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="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>
|
||||
</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>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Generate contextual modifier classes for colorizing the alert.
|
||||
</span><span class="c1"></span>
|
||||
<span class="k">@each</span> <span class="err">$</span><span class="nt">state</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
|
||||
<span class="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-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>
|
||||
@ -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>
|
||||
</td>
|
||||
</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>
|
||||
</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">'.alert'</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">
|
||||
<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">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -862,7 +871,7 @@ When an alert is dismissed, the element is completely removed from the page stru
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||
<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:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,12 +393,18 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#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="#pill-badges">Pill badges</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
@ -409,13 +415,14 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
<h3 id="headings">Headings</h3>
|
||||
<div class="bd-example">
|
||||
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
|
||||
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
|
||||
@ -429,6 +436,7 @@
|
||||
<span class="p"><</span><span class="nt">h4</span><span class="p">></span>Example heading <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>New<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>Example heading <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>New<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h6</span><span class="p">></span>Example heading <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>New<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">h6</span><span class="p">></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>
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary">
|
||||
@ -439,14 +447,36 @@
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></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>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” 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">
|
||||
<button type="button" class="btn btn-primary">
|
||||
Profile <span class="badge bg-secondary">9</span>
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Inbox
|
||||
<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>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>
|
||||
Profile <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>9<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>unread messages<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary position-relative"</span><span class="p">></span>
|
||||
Inbox
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"</span><span class="p">></span>
|
||||
99+
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>unread messages<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span></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"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary position-relative"</span><span class="p">></span>
|
||||
Profile
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>New alerts<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||
<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’s default <code>.bg-light</code>, you’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">
|
||||
<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">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -566,7 +596,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -574,7 +604,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -409,10 +409,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
<p>Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.</p>
|
||||
@ -503,7 +503,7 @@
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span><span class="p">></span>Library<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ol</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">nav</span><span class="p">></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>
|
||||
<p>Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as <code>aria-label="breadcrumb"</code> to describe the type of navigation provided in the <code><nav></code> element, as well as applying an <code>aria-current="page"</code> to the last item of the set to indicate that it represents the current page.</p>
|
||||
<p>For more information, see the <a href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb">WAI-ARIA Authoring Practices for the breadcrumb pattern</a>.</p>
|
||||
@ -538,7 +538,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -585,7 +585,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -593,7 +593,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Group a series of buttons together on a single line or stack them in a vertical column.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -409,10 +409,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="basic-example">Basic example</h2>
|
||||
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||
@ -742,7 +742,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -789,7 +789,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -797,7 +797,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -421,10 +421,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
|
||||
@ -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)
|
||||
</td>
|
||||
</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>
|
||||
</table>
|
||||
<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-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-box-shadow</span><span class="o">:</span> <span class="nv">$input-btn-focus-box-shadow</span><span class="p">;</span>
|
||||
<span class="nv">$btn-disabled-opacity</span><span class="o">:</span> <span class="mf">.65</span><span class="p">;</span>
|
||||
<span class="nv">$btn-active-box-shadow</span><span class="o">:</span> <span class="no">inset</span> <span class="mi">0</span> <span class="mi">3</span><span class="kt">px</span> <span class="mi">5</span><span class="kt">px</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.125</span><span class="p">);</span>
|
||||
<span class="nv">$btn-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-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-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-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-border</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$color</span> <span class="o">==</span> <span class="nv">$color-contrast-light</span><span class="o">,</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$border</span><span class="o">,</span> <span class="nv">$btn-hover-border-shade-amount</span><span class="p">)</span><span class="o">,</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$border</span><span class="o">,</span> <span class="nv">$btn-hover-border-tint-amount</span><span class="p">))</span><span class="o">,</span>
|
||||
<span class="nv">$hover-color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$hover-background</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="nv">$active-background</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$color</span> <span class="o">==</span> <span class="nv">$color-contrast-light</span><span class="o">,</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$background</span><span class="o">,</span><span class="nv">$btn-active-bg-shade-amount</span><span class="p">)</span><span class="o">,</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$background</span><span class="o">,</span> <span class="nv">$btn-active-bg-tint-amount</span><span class="p">))</span><span class="o">,</span>
|
||||
<span class="nv">$active-background</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$color</span> <span class="o">==</span> <span class="nv">$color-contrast-light</span><span class="o">,</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$background</span><span class="o">,</span> <span class="nv">$btn-active-bg-shade-amount</span><span class="p">)</span><span class="o">,</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$background</span><span class="o">,</span> <span class="nv">$btn-active-bg-tint-amount</span><span class="p">))</span><span class="o">,</span>
|
||||
<span class="nv">$active-border</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$color</span> <span class="o">==</span> <span class="nv">$color-contrast-light</span><span class="o">,</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$border</span><span class="o">,</span> <span class="nv">$btn-active-border-shade-amount</span><span class="p">)</span><span class="o">,</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$border</span><span class="o">,</span> <span class="nv">$btn-active-border-tint-amount</span><span class="p">))</span><span class="o">,</span>
|
||||
<span class="nv">$active-color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$active-background</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="nv">$disabled-background</span><span class="o">:</span> <span class="nv">$background</span><span class="o">,</span>
|
||||
<span class="nv">$disabled-border</span><span class="o">:</span> <span class="nv">$border</span><span class="o">,</span>
|
||||
<span class="nv">$disabled-color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$disabled-background</span><span class="p">)</span>
|
||||
<span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="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="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">&</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="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="nc">.btn-check</span><span class="nd">:focus</span> <span class="o">+</span> <span class="k">&</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nd">:focus</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">hover-color</span><span class="p">;</span>
|
||||
<span class="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="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">@include</span><span class="nd"> box-shadow</span><span class="p">(</span><span class="nv">$btn-box-shadow</span><span class="o">,</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mi">0</span> <span class="nv">$btn-focus-width</span> <span class="nf">rgba</span><span class="p">(</span><span class="nf">mix</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$border</span><span class="o">,</span> <span class="mi">15</span><span class="kt">%</span><span class="p">)</span><span class="o">,</span> <span class="mf">.5</span><span class="p">));</span>
|
||||
<span class="p">}</span> <span class="k">@else</span> <span class="p">{</span>
|
||||
<span class="c1">// Avoid using mixin so we can pass custom focus shadow properly
|
||||
</span><span class="c1"></span> <span class="nt">box-shadow</span><span class="nd">:</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">0</span> <span class="err">$</span><span class="nt">btn-focus-width</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">mix</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">border</span><span class="o">,</span> <span class="nt">15</span><span class="err">%</span><span class="o">),</span> <span class="nc">.5</span><span class="o">)</span><span class="p">;</span>
|
||||
</span><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>
|
||||
|
||||
@ -720,29 +737,29 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
|
||||
<span class="k">&</span><span class="nd">:active</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nc">.active</span><span class="o">,</span>
|
||||
<span class="nc">.show</span> <span class="o">></span> <span class="k">&</span><span class="nc">.dropdown-toggle</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-background</span><span class="p">;</span>
|
||||
<span class="na">color</span><span class="o">:</span> <span class="nv">$active-color</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're enabled
|
||||
</span><span class="c1"></span> <span class="nt">background-image</span><span class="nd">:</span> <span class="nt">if</span><span class="o">(</span><span class="err">$</span><span class="nt">enable-gradients</span><span class="o">,</span> <span class="nt">none</span><span class="o">,</span> <span class="nt">null</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-border</span><span class="p">;</span>
|
||||
</span><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="na">border-color</span><span class="o">:</span> <span class="nv">$active-border</span><span class="p">;</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">:focus</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-shadows</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> box-shadow</span><span class="p">(</span><span class="nv">$btn-active-box-shadow</span><span class="o">,</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mi">0</span> <span class="nv">$btn-focus-width</span> <span class="nf">rgba</span><span class="p">(</span><span class="nf">mix</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$border</span><span class="o">,</span> <span class="mi">15</span><span class="kt">%</span><span class="p">)</span><span class="o">,</span> <span class="mf">.5</span><span class="p">));</span>
|
||||
<span class="p">}</span> <span class="k">@else</span> <span class="p">{</span>
|
||||
<span class="c1">// Avoid using mixin so we can pass custom focus shadow properly
|
||||
</span><span class="c1"></span> <span class="nt">box-shadow</span><span class="nd">:</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">0</span> <span class="err">$</span><span class="nt">btn-focus-width</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">mix</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">border</span><span class="o">,</span> <span class="nt">15</span><span class="err">%</span><span class="o">),</span> <span class="nc">.5</span><span class="o">)</span><span class="p">;</span>
|
||||
</span><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="k">&</span><span class="nd">:disabled</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nc">.disabled</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">disabled-color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">disabled-background</span><span class="p">;</span>
|
||||
<span class="na">&</span><span class="o">:</span><span class="n">disabled</span><span class="o">,</span>
|
||||
<span class="o">&.</span><span class="n">disabled</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="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're enabled
|
||||
</span><span class="c1"></span> <span class="nt">background-image</span><span class="nd">:</span> <span class="nt">if</span><span class="o">(</span><span class="err">$</span><span class="nt">enable-gradients</span><span class="o">,</span> <span class="nt">none</span><span class="o">,</span> <span class="nt">null</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">disabled-border</span><span class="p">;</span>
|
||||
</span><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="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>
|
||||
</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-color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$active-background</span><span class="p">)</span>
|
||||
<span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="na">color</span><span class="o">:</span> <span class="nv">$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">&</span><span class="nd">:hover</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color-hover</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-background</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-border</span><span class="p">;</span>
|
||||
<span class="na">color</span><span class="o">:</span> <span class="nv">$color-hover</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="na">border-color</span><span class="o">:</span> <span class="nv">$active-border</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.btn-check</span><span class="nd">:focus</span> <span class="o">+</span> <span class="k">&</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nd">:focus</span> <span class="p">{</span>
|
||||
<span class="nt">box-shadow</span><span class="nd">:</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">0</span> <span class="err">$</span><span class="nt">btn-focus-width</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="nc">.5</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="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="nc">.btn-check</span><span class="nd">:checked</span> <span class="o">+</span> <span class="k">&</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">&</span><span class="nd">:active</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nc">.active</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nc">.dropdown-toggle.show</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-background</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">active-border</span><span class="p">;</span>
|
||||
<span class="na">color</span><span class="o">:</span> <span class="nv">$active-color</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="na">border-color</span><span class="o">:</span> <span class="nv">$active-border</span><span class="p">;</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">:focus</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-shadows</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> box-shadow</span><span class="p">(</span><span class="nv">$btn-active-box-shadow</span><span class="o">,</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mi">0</span> <span class="nv">$btn-focus-width</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="mf">.5</span><span class="p">));</span>
|
||||
<span class="p">}</span> <span class="k">@else</span> <span class="p">{</span>
|
||||
<span class="c1">// Avoid using mixin so we can pass custom focus shadow properly
|
||||
</span><span class="c1"></span> <span class="nt">box-shadow</span><span class="nd">:</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">0</span> <span class="err">$</span><span class="nt">btn-focus-width</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="nc">.5</span><span class="o">)</span><span class="p">;</span>
|
||||
</span><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="k">&</span><span class="nd">:disabled</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nc">.disabled</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="na">&</span><span class="o">:</span><span class="n">disabled</span><span class="o">,</span>
|
||||
<span class="o">&.</span><span class="n">disabled</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="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>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> button-size</span><span class="p">(</span><span class="nv">$padding-y</span><span class="o">,</span> <span class="nv">$padding-x</span><span class="o">,</span> <span class="nv">$font-size</span><span class="o">,</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">padding</span><span class="nd">:</span> <span class="err">$</span><span class="nt">padding-y</span> <span class="err">$</span><span class="nt">padding-x</span><span class="p">;</span>
|
||||
<span class="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="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>
|
||||
@ -802,13 +819,13 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
|
||||
</code></pre></div>
|
||||
<h3 id="loops">Loops</h3>
|
||||
<p>Button variants (for regular and outline buttons) use their respective mixins with our <code>$theme-colors</code> map to generate the modifier classes in <code>scss/_buttons.scss</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
|
||||
<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="k">@include</span><span class="nd"> button-variant</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@each</span> <span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
|
||||
<span class="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="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>
|
||||
@ -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">
|
||||
<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">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -886,7 +903,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -448,10 +448,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="about">About</h2>
|
||||
<p>A <strong>card</strong> is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.</p>
|
||||
@ -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="row g-0">
|
||||
<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 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"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 540px;"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row g-0"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-4"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-fluid rounded-start"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-8"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></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>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$card-spacer-y</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$card-spacer-x</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$card-title-spacer-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$card-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-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$card-border-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.125</span><span class="p">);</span>
|
||||
<span class="nv">$card-inner-border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$card-border-radius</span><span class="o">,</span> <span class="nv">$card-border-width</span><span class="p">);</span>
|
||||
<span class="nv">$card-cap-padding-y</span><span class="o">:</span> <span class="nv">$card-spacer-y</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$card-cap-padding-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-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>
|
||||
@ -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-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$card-img-overlay-padding</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$card-group-margin</span><span class="o">:</span> <span class="nv">$grid-gutter-width</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<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>
|
||||
|
||||
</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">
|
||||
<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">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -1846,7 +1846,7 @@ Note that content should not be larger than the height of the image. If content
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -429,10 +429,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
<p>The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.</p>
|
||||
@ -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-opacity</span><span class="o">:</span> <span class="mf">.5</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-control-hover-opacity</span><span class="o">:</span> <span class="mf">.9</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-control-transition</span><span class="o">:</span> <span class="no">opacity</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-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-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-active-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-indicator-active-opacity</span><span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-indicator-transition</span><span class="o">:</span> <span class="no">opacity</span> <span class="mf">.6</span><span class="kt">s</span> <span class="n">ease</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-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-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("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$carousel-control-color</span><span class="si">}</span><span class="sx">'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>")</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$carousel-transition-duration</span><span class="o">:</span> <span class="mf">.6</span><span class="kt">s</span><span class="p">;</span>
|
||||
<span class="nv">$carousel-transition</span><span class="o">:</span> <span class="no">transform</span> <span class="nv">$carousel-transition-duration</span> <span class="n">ease-in-out</span><span class="p">;</span> <span class="c1">// Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
||||
<span 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 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>
|
||||
@ -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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>getInstance</code></td>
|
||||
<td>Static method which allows you to get the carousel instance associated with a DOM element.</td>
|
||||
<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>
|
||||
</tbody>
|
||||
</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">
|
||||
<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">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -1146,7 +1159,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="A generic close button for dismissing content like modals and alerts.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -409,10 +409,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
<p>Provide an option to dismiss or close a component with <code>.btn-close</code>. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default <code>background-image</code>. <strong>Be sure to include text for screen readers</strong>, as we’ve done with <code>aria-label</code>.</p>
|
||||
@ -463,7 +463,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -510,7 +510,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -518,7 +518,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -420,10 +420,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code>height</code> from its current value to <code>0</code>. Given how CSS handles animations, you cannot use <code>padding</code> on a <code>.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
|
||||
@ -518,19 +518,19 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
<p>Note that Bootstrap’s current implementation does not cover the various <em>optional</em> keyboard interactions described in the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#accordion">WAI-ARIA Authoring Practices 1.1 accordion pattern</a> - you will need to include these yourself with custom JavaScript.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$transition-collapse</span><span class="o">:</span> <span class="no">height</span> <span class="mf">.35</span><span class="kt">s</span> <span class="n">ease</span><span class="p">;</span>
|
||||
<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>
|
||||
<h3 id="classes">Classes</h3>
|
||||
<p>Collapse transition classes can be found in <code>scss/_transitions.scss</code> as these are shared across multiple components (collapse and accordion).</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.collapse</span> <span class="p">{</span>
|
||||
<span class="k">&</span><span class="nd">:not</span><span class="o">(</span><span class="nc">.show</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
|
||||
<span class="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="nc">.collapsing</span> <span class="p">{</span>
|
||||
<span class="nt">height</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="nt">overflow</span><span class="nd">:</span> <span class="nt">hidden</span><span class="p">;</span>
|
||||
<span class="na">height</span><span class="o">:</span> <span class="mi">0</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="p">}</span>
|
||||
</code></pre></div>
|
||||
@ -616,8 +616,21 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
<td>Destroys an element's collapse. (Removes stored data on the DOM element)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>getInstance</code></td>
|
||||
<td>Static method which allows you to get the collapse instance associated with a DOM element.</td>
|
||||
<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>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -670,7 +683,7 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -717,7 +730,7 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
</div>
|
||||
</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>
|
||||
@ -725,7 +738,7 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -462,10 +462,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is <a href="https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision</a>.</p>
|
||||
@ -1034,7 +1034,7 @@
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><h2 id="menu-items">Menu items</h2>
|
||||
<p>Historically dropdown menu contents <em>had</em> to be links, but that’s no longer the case with v4. Now you can optionally use <code><button></code> elements in your dropdowns instead of just <code><a></code>s.</p>
|
||||
<p>You can use <code><a></code> or <code><button></code> elements as dropdown items.</p>
|
||||
<div class="bd-example">
|
||||
<div class="dropdown">
|
||||
<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-inner-border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$dropdown-border-radius</span><span class="o">,</span> <span class="nv">$dropdown-border-width</span><span class="p">);</span>
|
||||
<span class="nv">$dropdown-divider-bg</span><span class="o">:</span> <span class="nv">$dropdown-border-color</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-divider-margin-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$dropdown-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-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-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-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>
|
||||
<p>Mixins are used to generate the CSS-based carets and can be found in <code>scss/mixins/_caret.scss</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> caret-down</span> <span class="p">{</span>
|
||||
<span class="nt">border-top</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span><span class="p">;</span>
|
||||
<span class="nt">border-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="nt">border-bottom</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="nt">border-left</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="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="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="na">border-bottom</span><span class="o">:</span> <span class="mi">0</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="k">@mixin</span><span class="nf"> caret-up</span> <span class="p">{</span>
|
||||
<span class="nt">border-top</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="nt">border-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="nt">border-bottom</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span><span class="p">;</span>
|
||||
<span class="nt">border-left</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="na">border-top</span><span class="o">:</span> <span class="mi">0</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="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="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="k">@mixin</span><span class="nf"> caret-end</span> <span class="p">{</span>
|
||||
<span class="nt">border-top</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="nt">border-right</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="nt">border-bottom</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="nt">border-left</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span><span class="p">;</span>
|
||||
<span class="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="na">border-right</span><span class="o">:</span> <span class="mi">0</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="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="k">@mixin</span><span class="nf"> caret-start</span> <span class="p">{</span>
|
||||
<span class="nt">border-top</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="nt">border-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span><span class="p">;</span>
|
||||
<span class="nt">border-bottom</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-width</span> <span class="nt">solid</span> <span class="nt">transparent</span><span class="p">;</span>
|
||||
<span class="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="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="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="k">@mixin</span><span class="nf"> caret</span><span class="p">(</span><span class="nv">$direction</span><span class="o">:</span> <span class="n">down</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-caret</span> <span class="p">{</span>
|
||||
<span class="k">&</span><span class="nd">::after</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">inline-block</span><span class="p">;</span>
|
||||
<span class="nt">margin-left</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-spacing</span><span class="p">;</span>
|
||||
<span class="nt">vertical-align</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-vertical-align</span><span class="p">;</span>
|
||||
<span class="nt">content</span><span class="nd">:</span> <span class="s2">""</span><span class="p">;</span>
|
||||
<span class="na">display</span><span class="o">:</span> <span class="ni">inline-block</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="na">vertical-align</span><span class="o">:</span> <span class="nv">$caret-vertical-align</span><span class="p">;</span>
|
||||
<span class="na">content</span><span class="o">:</span> <span class="s2">""</span><span class="p">;</span>
|
||||
<span class="k">@if</span> <span class="nv">$direction</span> <span class="o">==</span> <span class="n">down</span> <span class="p">{</span>
|
||||
<span class="k">@include</span><span class="nd"> caret-down</span><span class="p">();</span>
|
||||
<span class="p">}</span> <span class="k">@else</span> <span class="nt">if</span> <span class="err">$</span><span class="nt">direction</span> <span class="o">==</span> <span class="nt">up</span> <span class="p">{</span>
|
||||
<span class="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="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="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">&</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="k">&</span><span class="nd">::before</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">inline-block</span><span class="p">;</span>
|
||||
<span class="nt">margin-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-spacing</span><span class="p">;</span>
|
||||
<span class="nt">vertical-align</span><span class="nd">:</span> <span class="err">$</span><span class="nt">caret-vertical-align</span><span class="p">;</span>
|
||||
<span class="nt">content</span><span class="nd">:</span> <span class="s2">""</span><span class="p">;</span>
|
||||
<span class="na">display</span><span class="o">:</span> <span class="ni">inline-block</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="na">vertical-align</span><span class="o">:</span> <span class="nv">$caret-vertical-align</span><span class="p">;</span>
|
||||
<span class="na">content</span><span class="o">:</span> <span class="s2">""</span><span class="p">;</span>
|
||||
<span class="k">@include</span><span class="nd"> caret-start</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">&</span><span class="nd">:empty::after</span> <span class="p">{</span>
|
||||
<span class="nt">margin-left</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="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>
|
||||
@ -1865,9 +1865,20 @@ On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> h
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>getInstance</code></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>
|
||||
</tr>
|
||||
</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">
|
||||
<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">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -1992,7 +2003,7 @@ On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> h
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -427,6 +427,7 @@
|
||||
<li><a href="#show">show</a></li>
|
||||
<li><a href="#dispose">dispose</a></li>
|
||||
<li><a href="#getinstance">getInstance</a></li>
|
||||
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
@ -435,10 +436,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="basic-example">Basic example</h2>
|
||||
<p>The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
|
||||
@ -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-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-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-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>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> list-group-item-variant</span><span class="p">(</span><span class="nv">$state</span><span class="o">,</span> <span class="nv">$background</span><span class="o">,</span> <span class="nv">$color</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nc">.list-group-item-</span><span class="si">#{</span><span class="nv">$state</span><span class="si">}</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">background</span><span class="p">;</span>
|
||||
<span class="na">color</span><span class="o">:</span> <span class="nv">$color</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">&</span><span class="nc">.list-group-item-action</span> <span class="p">{</span>
|
||||
<span class="k">&</span><span class="nd">:hover</span><span class="o">,</span>
|
||||
<span class="k">&</span><span class="nd">:focus</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="nt">shade-color</span><span class="o">(</span><span class="err">$</span><span class="nt">background</span><span class="o">,</span> <span class="nt">10</span><span class="err">%</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="na">&</span><span class="o">:</span><span class="n">hover</span><span class="o">,</span>
|
||||
<span class="o">&:</span><span class="ni">focus</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="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="k">&</span><span class="nc">.active</span> <span class="p">{</span>
|
||||
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">white</span><span class="p">;</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="nt">border-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="na">color</span><span class="o">:</span> <span class="nv">$white</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="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>
|
||||
@ -971,7 +972,7 @@
|
||||
</span><span class="c1">// Add modifier classes to change text and background color on individual items.
|
||||
</span><span class="c1">// Organizationally, this must come after the `:hover` states.
|
||||
</span><span class="c1"></span>
|
||||
<span class="k">@each</span> <span class="err">$</span><span class="nt">state</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
|
||||
<span class="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-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"><</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>
|
||||
<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">'#trigger'</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></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’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">'#trigger'</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>
|
||||
<p>When showing a new tab, the events fire in the following order:</p>
|
||||
<ol>
|
||||
@ -1143,11 +1148,13 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</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">'a[data-bs-toggle="list"]'</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">'shown.bs.tab'</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">event</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// newly activated tab
|
||||
</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>
|
||||
<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">'a[data-bs-toggle="list"]'</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">tabElm</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'shown.bs.tab'</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">event</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// newly activated tab
|
||||
</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>
|
||||
</div>
|
||||
</main>
|
||||
@ -1165,7 +1172,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -1212,7 +1219,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -1220,7 +1227,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -439,6 +439,7 @@
|
||||
<li><a href="#handleupdate">handleUpdate</a></li>
|
||||
<li><a href="#dispose">dispose</a></li>
|
||||
<li><a href="#getinstance">getInstance</a></li>
|
||||
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
@ -447,10 +448,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
<p>Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.</p>
|
||||
@ -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-xl</span><span class="o">:</span> <span class="mi">1140</span><span class="kt">px</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$modal-fade-transform</span><span class="o">:</span> <span class="nf">translate</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">-50</span><span class="kt">px</span><span class="p">);</span>
|
||||
<span class="nv">$modal-show-transform</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span>
|
||||
<span class="nv">$modal-transition</span><span class="o">:</span> <span class="no">transform</span> <span class="mf">.3</span><span class="kt">s</span> <span class="n">ease-out</span><span class="p">;</span>
|
||||
<span class="nv">$modal-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="ni">none</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>
|
||||
</code></pre></div>
|
||||
<h3 id="loop">Loop</h3>
|
||||
<p><a href="#fullscreen-modal">Responsive fullscreen modals</a> are generated via the <code>$breakpoints</code> map and a loop in <code>scss/_modal.scss</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="err">$</span><span class="nt">breakpoint</span> <span class="nt">in</span> <span class="nt">map-keys</span><span class="o">(</span><span class="err">$</span><span class="nt">grid-breakpoints</span><span class="o">)</span> <span class="p">{</span>
|
||||
<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">$postfix</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$infix</span> <span class="o">!=</span> <span class="s2">""</span><span class="o">,</span> <span class="nv">$infix</span> <span class="o">+</span> <span class="s2">"-down"</span><span class="o">,</span> <span class="s2">""</span><span class="p">);</span>
|
||||
|
||||
<span class="k">@include</span><span class="nd"> media-breakpoint-down</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nc">.modal-fullscreen</span><span class="si">#{</span><span class="nv">$postfix</span><span class="si">}</span> <span class="p">{</span>
|
||||
<span class="nt">width</span><span class="nd">:</span> <span class="nt">100vw</span><span class="p">;</span>
|
||||
<span class="nt">max-width</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
|
||||
<span class="nt">height</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="p">;</span>
|
||||
<span class="nt">margin</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="na">width</span><span class="o">:</span> <span class="mi">100</span><span class="kt">vw</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="na">height</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</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="nt">height</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="p">;</span>
|
||||
<span class="nt">border</span><span class="nd">:</span> <span class="nt">0</span><span class="p">;</span>
|
||||
<span class="na">height</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</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="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="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="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>
|
||||
</code></pre></div>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.modal-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
|
||||
<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>
|
||||
<p>Activate a modal without writing JavaScript. Set <code>data-bs-toggle="modal"</code> on a controller element, like a button, along with a <code>data-bs-target="#foo"</code> or <code>href="#foo"</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"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#myModal"</span><span class="p">></span>Launch modal<span class="p"></</span><span class="nt">button</span><span class="p">></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>
|
||||
<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">'myModal'</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></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’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">'#myModal'</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>
|
||||
<p>Bootstrap’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><div class="modal"></code>).</p>
|
||||
<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">
|
||||
<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">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -1471,7 +1476,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -432,10 +432,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
<p>Here’s what you need to know before getting started with the navbar:</p>
|
||||
@ -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’s structure. We also recommend making sure that the toggler has the <code>aria-controls</code> attribute, pointing to the <code>id</code> of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$navbar-padding-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<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-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><span class="c1"></span><span class="nv">$nav-link-height</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="nv">$line-height-base</span> <span class="o">+</span> <span class="nv">$nav-link-padding-y</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-brand-height</span><span class="o">:</span> <span class="nv">$navbar-brand-font-size</span> <span class="o">*</span> <span class="nv">$line-height-base</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-brand-padding-y</span><span class="o">:</span> <span class="p">(</span><span class="nv">$nav-link-height</span> <span class="o">-</span> <span class="nv">$navbar-brand-height</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-brand-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-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-border-radius</span><span class="o">:</span> <span class="nv">$btn-border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-toggler-focus-width</span><span class="o">:</span> <span class="nv">$btn-focus-width</span><span class="p">;</span>
|
||||
<span class="nv">$navbar-toggler-transition</span><span class="o">:</span> <span class="no">box-shadow</span> <span class="mf">.15</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">;</span>
|
||||
<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>
|
||||
<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>
|
||||
@ -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
|
||||
</span><span class="c1">// where your navbar collapses.
|
||||
</span><span class="c1"></span><span class="nc">.navbar-expand</span> <span class="p">{</span>
|
||||
<span class="k">@each</span> <span class="err">$</span><span class="nt">breakpoint</span> <span class="nt">in</span> <span class="nt">map-keys</span><span class="o">(</span><span class="err">$</span><span class="nt">grid-breakpoints</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="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">$infix</span><span class="o">:</span> <span class="nf">breakpoint-infix</span><span class="p">(</span><span class="nv">$next</span><span class="o">,</span> <span class="nv">$grid-breakpoints</span><span class="p">);</span>
|
||||
|
||||
<span class="c1">// stylelint-disable-next-line scss/selector-no-union-class-name
|
||||
</span><span class="c1"></span> <span class="k">&</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">infix</span><span class="p">}</span> <span class="p">{</span>
|
||||
</span><span class="c1"></span> <span class="k">&</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="nt">flex-wrap</span><span class="nd">:</span> <span class="nt">nowrap</span><span class="p">;</span>
|
||||
<span class="nt">justify-content</span><span class="nd">:</span> <span class="nt">flex-start</span><span class="p">;</span>
|
||||
<span class="na">flex-wrap</span><span class="o">:</span> <span class="ni">nowrap</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="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="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="nc">.nav-link</span> <span class="p">{</span>
|
||||
<span class="nt">padding-right</span><span class="nd">:</span> <span class="err">$</span><span class="nt">navbar-nav-link-padding-x</span><span class="p">;</span>
|
||||
<span class="nt">padding-left</span><span class="nd">:</span> <span class="err">$</span><span class="nt">navbar-nav-link-padding-x</span><span class="p">;</span>
|
||||
<span class="na">padding-right</span><span class="o">:</span> <span class="nv">$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="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="nc">.navbar-collapse</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">flex</span> <span class="o">!</span><span class="nt">important</span><span class="p">;</span> <span class="c1">// stylelint-disable-line declaration-no-important
|
||||
</span><span class="c1"></span> <span class="nt">flex-basis</span><span class="nd">:</span> <span class="nt">auto</span><span class="p">;</span>
|
||||
<span class="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="na">flex-basis</span><span class="o">:</span> <span class="ni">auto</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.navbar-toggler</span> <span class="p">{</span>
|
||||
<span class="nt">display</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
|
||||
<span class="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>
|
||||
@ -1438,7 +1438,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<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">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>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -1493,7 +1493,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for how to use Bootstrap’s included navigation components.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -432,6 +432,7 @@
|
||||
<li><a href="#show">show</a></li>
|
||||
<li><a href="#dispose">dispose</a></li>
|
||||
<li><a href="#getinstance">getInstance</a></li>
|
||||
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
@ -440,10 +441,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="base-nav">Base nav</h2>
|
||||
<p>Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
|
||||
@ -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-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-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-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>
|
||||
<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">'#trigger'</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></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’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">'#trigger'</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>
|
||||
<p>When showing a new tab, the events fire in the following order:</p>
|
||||
<ol>
|
||||
@ -1203,7 +1208,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -1250,7 +1255,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -1258,7 +1263,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -425,10 +425,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
<p>Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and <code>data</code> attributes are used to invoke our JavaScript.</p>
|
||||
@ -775,6 +775,10 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<td><code>getInstance</code></td>
|
||||
<td><em>Static</em> method which allows you to get the offcanvas instance associated with a DOM element</td>
|
||||
</tr>
|
||||
<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’t initialised</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</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">
|
||||
<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">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -883,7 +887,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -412,10 +412,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code><nav></code> element to identify it as a navigation section to screen readers and other assistive technologies.</p>
|
||||
@ -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-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-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>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> pagination-size</span><span class="p">(</span><span class="nv">$padding-y</span><span class="o">,</span> <span class="nv">$padding-x</span><span class="o">,</span> <span class="nv">$font-size</span><span class="o">,</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nc">.page-link</span> <span class="p">{</span>
|
||||
<span class="nt">padding</span><span class="nd">:</span> <span class="err">$</span><span class="nt">padding-y</span> <span class="err">$</span><span class="nt">padding-x</span><span class="p">;</span>
|
||||
<span class="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="p">}</span>
|
||||
|
||||
@ -722,7 +722,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -769,7 +769,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -777,7 +777,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -431,6 +431,7 @@
|
||||
<li><a href="#toggleenabled">toggleEnabled</a></li>
|
||||
<li><a href="#update">update</a></li>
|
||||
<li><a href="#getinstance">getInstance</a></li>
|
||||
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
@ -439,10 +440,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>Things to know when using the popover plugin:</p>
|
||||
@ -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>
|
||||
<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">'example'</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></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’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">'example'</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>
|
||||
<table class="table">
|
||||
<thead>
|
||||
@ -829,7 +834,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
<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">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>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -884,7 +889,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -414,10 +414,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
<p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">the HTML5 <code><progress></code> element</a>, ensuring you can stack progress bars, animate them, and place text labels over them.</p>
|
||||
@ -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-bar-color</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
<span class="nv">$progress-bar-bg</span><span class="o">:</span> <span class="nv">$primary</span><span class="p">;</span>
|
||||
<span class="nv">$progress-bar-animation-timing</span><span class="o">:</span> <span class="mi">1</span><span class="kt">s</span> <span class="n">linear</span> <span class="n">infinite</span><span class="p">;</span>
|
||||
<span class="nv">$progress-bar-transition</span><span class="o">:</span> <span class="no">width</span> <span class="mf">.6</span><span class="kt">s</span> <span class="n">ease</span><span class="p">;</span>
|
||||
<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="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>
|
||||
<h3 id="keyframes">Keyframes</h3>
|
||||
<p>Used for creating the CSS animations for <code>.progress-bar-animated</code>. Included in <code>scss/_progress-bar.scss</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@if</span> <span class="nv">$enable-transitions</span> <span class="p">{</span>
|
||||
<span class="k">@keyframes</span> <span class="nt">progress-bar-stripes</span> <span class="p">{</span>
|
||||
<span class="nt">0</span><span class="err">%</span> <span class="p">{</span> <span class="nt">background-position-x</span><span class="nd">:</span> <span class="err">$</span><span class="nt">progress-height</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="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>
|
||||
</code></pre></div>
|
||||
@ -614,7 +614,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -661,7 +661,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -669,7 +669,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -411,6 +411,7 @@
|
||||
<li><a href="#refresh">refresh</a></li>
|
||||
<li><a href="#dispose">dispose</a></li>
|
||||
<li><a href="#getinstance">getInstance</a></li>
|
||||
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#options">Options</a></li>
|
||||
@ -420,10 +421,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
<p>Scrollspy has a few requirements to function properly:</p>
|
||||
@ -667,6 +668,10 @@
|
||||
<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">'content'</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></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’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">'content'</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>
|
||||
<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=""</code>.</p>
|
||||
<table class="table">
|
||||
@ -735,7 +740,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -782,7 +787,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -790,7 +795,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -428,10 +428,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="about">About</h2>
|
||||
<p>Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.</p>
|
||||
@ -577,7 +577,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Loading...<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<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>
|
||||
<div class="bd-example">
|
||||
<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>
|
||||
<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-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-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>
|
||||
<p>Used for creating the CSS animations for our spinners. Included in <code>scss/_spinners.scss</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@keyframes</span> <span class="nt">spinner-border</span> <span class="p">{</span>
|
||||
<span class="nt">to</span> <span class="p">{</span> <span class="nt">transform</span><span class="nd">:</span> <span class="nt">rotate</span><span class="o">(</span><span class="nt">360deg</span><span class="o">)</span> <span class="nn">#</span><span class="p">{</span><span class="s2">"/* rtl:ignore */"</span><span class="p">};</span> <span class="p">}</span>
|
||||
<span class="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">"/* rtl:ignore */"</span><span class="si">}</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@keyframes</span> <span class="nt">spinner-grow</span> <span class="p">{</span>
|
||||
<span class="nt">0</span><span class="err">%</span> <span class="p">{</span>
|
||||
<span class="nt">transform</span><span class="nd">:</span> <span class="nt">scale</span><span class="o">(</span><span class="nt">0</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="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="nt">50</span><span class="err">%</span> <span class="p">{</span>
|
||||
<span class="nt">opacity</span><span class="nd">:</span> <span class="nt">1</span><span class="p">;</span>
|
||||
<span class="nt">transform</span><span class="nd">:</span> <span class="nt">none</span><span class="p">;</span>
|
||||
<span class="na">opacity</span><span class="o">:</span> <span class="mi">1</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>
|
||||
</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">
|
||||
<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">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -788,7 +788,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -424,6 +424,8 @@
|
||||
<li><a href="#show">show</a></li>
|
||||
<li><a href="#hide">hide</a></li>
|
||||
<li><a href="#dispose">dispose</a></li>
|
||||
<li><a href="#getinstance">getInstance</a></li>
|
||||
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
@ -432,10 +434,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.</p>
|
||||
<h2 id="overview">Overview</h2>
|
||||
@ -478,7 +480,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<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>
|
||||
<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 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>
|
||||
@ -497,7 +499,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">id</span><span class="o">=</span><span class="s">"liveToastBtn"</span><span class="p">></span>Show live toast<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-fixed bottom-0 end-0 p-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 5"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-fixed bottom-0 end-0 p-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 11"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"liveToast"</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast hide"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-live</span><span class="o">=</span><span class="s">"assertive"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toast-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded me-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
@ -930,7 +932,15 @@ You have to manually call this method, instead your toast won’t show.</p>
|
||||
</code></pre></div><h4 id="dispose">dispose</h4>
|
||||
<p>Hides an element’s toast. Your toast will remain on the DOM but won’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>
|
||||
</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">'myToastEl'</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’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">'myToastEl'</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">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -978,7 +988,7 @@ You have to manually call this method, instead your toast won’t show.</p>
|
||||
<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">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>
|
||||
</div>
|
||||
<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’t show.</p>
|
||||
</div>
|
||||
</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>
|
||||
@ -1033,7 +1043,7 @@ You have to manually call this method, instead your toast won’t show.</p>
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -426,6 +426,7 @@
|
||||
<li><a href="#toggleenabled">toggleEnabled</a></li>
|
||||
<li><a href="#update">update</a></li>
|
||||
<li><a href="#getinstance">getInstance</a></li>
|
||||
<li><a href="#getorcreateinstance">getOrCreateInstance</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
@ -434,10 +435,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>Things to know when using the tooltip plugin:</p>
|
||||
@ -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-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-opacity</span><span class="o">:</span> <span class="mf">.9</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-padding-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">4</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-padding-x</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$tooltip-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="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-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>
|
||||
<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>
|
||||
</td>
|
||||
</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>
|
||||
<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">'example'</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></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’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">'example'</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>
|
||||
<table class="table">
|
||||
<thead>
|
||||
@ -828,7 +833,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
<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">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>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
@ -883,7 +888,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -406,10 +406,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code><figure></code>.</p>
|
||||
<p>Use the included <code>.figure</code>, <code>.figure-img</code> and <code>.figure-caption</code> classes to provide some baseline styles for the HTML5 <code><figure></code> and <code><figcaption></code> elements. Images in figures have no explicit size, so be sure to add the <code>.img-fluid</code> class to your <code><img></code> to make it responsive.</p>
|
||||
@ -456,7 +456,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -503,7 +503,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -511,7 +511,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -410,10 +410,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="responsive-images">Responsive images</h2>
|
||||
<p>Images in Bootstrap are made responsive with <code>.img-fluid</code>. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales with the parent element.</p>
|
||||
@ -481,7 +481,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -528,7 +528,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -536,7 +536,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -426,10 +426,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="approach">Approach</h2>
|
||||
<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <code><table></code> styles for a simpler baseline and later provide <code>.table</code>, <code>.table-bordered</code>, and more.</p>
|
||||
@ -455,11 +455,9 @@
|
||||
<p>Bootstrap utilizes a “native font stack” or “system font stack” for optimum text rendering on every device and OS. These system fonts have been designed specifically with today’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>
|
||||
<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="o">-</span><span class="n">apple-system</span><span class="o">,</span>
|
||||
<span class="c1">// Chrome < 56 for macOS (San Francisco)</span>
|
||||
<span class="n">BlinkMacSystemFont</span><span class="o">,</span>
|
||||
<span class="c1">// Windows</span>
|
||||
<span class="s2">"Segoe UI"</span><span class="o">,</span>
|
||||
<span class="c1">// Android</span>
|
||||
@ -470,9 +468,9 @@
|
||||
<span class="s2">"Noto Sans"</span><span class="o">,</span>
|
||||
<span class="s2">"Liberation Sans"</span><span class="o">,</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="s2">"Apple Color Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Symbol"</span><span class="o">,</span> <span class="s2">"Noto Color Emoji"</span> <span class="nv">!default</span><span class="p">;</span>
|
||||
<span class="s2">"Apple Color Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Symbol"</span><span class="o">,</span> <span class="s2">"Noto Color Emoji"</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’s native emoji font, and they won’t be affected by any CSS <code>color</code> styles.</p>
|
||||
<p>This <code>font-family</code> is applied to the <code><body></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>
|
||||
@ -833,7 +831,7 @@ To edit settings, press <span class="p"><</span><span class="nt">kbd</span><s
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -880,7 +878,7 @@ To edit settings, press <span class="p"><</span><span class="nt">kbd</span><s
|
||||
</div>
|
||||
</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>
|
||||
@ -888,7 +886,7 @@ To edit settings, press <span class="p"><</span><span class="nt">kbd</span><s
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -441,10 +441,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>Due to the widespread use of <code><table></code> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are <strong>opt-in</strong>. Add the base class <code>.table</code> to any <code><table></code>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.</p>
|
||||
@ -526,7 +526,7 @@
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr class="table-primary">
|
||||
<th scope="row">Primary</th>
|
||||
<td>Cell</td>
|
||||
@ -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">$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="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="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="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="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="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="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-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="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="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="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="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="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="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="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">color</span><span class="o">:</span> <span class="nv">$color</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>
|
||||
</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-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-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>
|
||||
|
||||
@ -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-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-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>
|
||||
<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>
|
||||
@ -2059,7 +2060,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -2106,7 +2107,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -2114,7 +2115,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -432,10 +432,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="global-settings">Global settings</h2>
|
||||
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <a href="/docs/5.0/utilities/text/">textual utility classes</a>.</p>
|
||||
@ -544,12 +544,12 @@
|
||||
<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-6"</span><span class="p">></span>Display 6<span class="p"></</span><span class="nt">h1</span><span class="p">></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>
|
||||
<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="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="mi">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="mi">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">1</span><span class="o">:</span> <span class="mi">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="na">3</span><span class="o">:</span> <span class="mi">4</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="na">5</span><span class="o">:</span> <span class="mi">3</span><span class="kt">rem</span><span class="o">,</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="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>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<p>Headings have some dedicated variables for sizing and spacing.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$headings-margin-bottom</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<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-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>
|
||||
@ -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">$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-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">
|
||||
<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">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -882,7 +882,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -890,7 +890,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -412,47 +412,47 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="theme-colors">Theme colors</h2>
|
||||
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
|
||||
<div class="row">
|
||||
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-primary text-white">Primary</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-success text-white">Success</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-danger text-white">Danger</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-warning text-dark">Warning</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-info text-dark">Info</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-light text-dark">Light</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-dark text-white">Dark</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<p>All these colors are available as a Sass map, <code>$theme-colors</code>.</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>
|
||||
@ -471,265 +471,265 @@
|
||||
<p>All Bootstrap colors are available as Sass variables and a Sass map in <code>scss/_variables.scss</code> file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a <a href="#theme-colors">theme palette</a>.</p>
|
||||
<p>Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.</p>
|
||||
<div class="row font-monospace">
|
||||
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-blue">
|
||||
<strong class="d-block">$blue</strong>
|
||||
#0d6efd
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-blue-100">$blue-100</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-blue-200">$blue-200</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-blue-300">$blue-300</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-blue-400">$blue-400</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-blue-500">$blue-500</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-blue-600">$blue-600</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-blue-700">$blue-700</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-blue-800">$blue-800</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-blue-900">$blue-900</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-indigo">
|
||||
<strong class="d-block">$indigo</strong>
|
||||
#6610f2
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-indigo-100">$indigo-100</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-indigo-200">$indigo-200</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-indigo-300">$indigo-300</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-indigo-400">$indigo-400</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-indigo-500">$indigo-500</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-indigo-600">$indigo-600</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-indigo-700">$indigo-700</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-indigo-800">$indigo-800</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-indigo-900">$indigo-900</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-purple">
|
||||
<strong class="d-block">$purple</strong>
|
||||
#6f42c1
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-purple-100">$purple-100</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-purple-200">$purple-200</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-purple-300">$purple-300</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-purple-400">$purple-400</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-purple-500">$purple-500</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-purple-600">$purple-600</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-purple-700">$purple-700</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-purple-800">$purple-800</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-purple-900">$purple-900</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-pink">
|
||||
<strong class="d-block">$pink</strong>
|
||||
#d63384
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-pink-100">$pink-100</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-pink-200">$pink-200</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-pink-300">$pink-300</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-pink-400">$pink-400</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-pink-500">$pink-500</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-pink-600">$pink-600</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-pink-700">$pink-700</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-pink-800">$pink-800</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-pink-900">$pink-900</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-red">
|
||||
<strong class="d-block">$red</strong>
|
||||
#dc3545
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-red-100">$red-100</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-red-200">$red-200</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-red-300">$red-300</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-red-400">$red-400</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-red-500">$red-500</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-red-600">$red-600</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-red-700">$red-700</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-red-800">$red-800</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-red-900">$red-900</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-orange">
|
||||
<strong class="d-block">$orange</strong>
|
||||
#fd7e14
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-orange-100">$orange-100</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-orange-200">$orange-200</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-orange-300">$orange-300</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-orange-400">$orange-400</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-orange-500">$orange-500</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-orange-600">$orange-600</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-orange-700">$orange-700</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-orange-800">$orange-800</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-orange-900">$orange-900</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-yellow">
|
||||
<strong class="d-block">$yellow</strong>
|
||||
#ffc107
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-yellow-100">$yellow-100</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-yellow-200">$yellow-200</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-yellow-300">$yellow-300</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-yellow-400">$yellow-400</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-yellow-500">$yellow-500</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-yellow-600">$yellow-600</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-yellow-700">$yellow-700</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-yellow-800">$yellow-800</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-yellow-900">$yellow-900</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-green">
|
||||
<strong class="d-block">$green</strong>
|
||||
#198754
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-green-100">$green-100</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-green-200">$green-200</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-green-300">$green-300</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-green-400">$green-400</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-green-500">$green-500</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-green-600">$green-600</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-green-700">$green-700</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-green-800">$green-800</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-green-900">$green-900</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-teal">
|
||||
<strong class="d-block">$teal</strong>
|
||||
#20c997
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-teal-100">$teal-100</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-teal-200">$teal-200</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-teal-300">$teal-300</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-teal-400">$teal-400</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-teal-500">$teal-500</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-teal-600">$teal-600</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-teal-700">$teal-700</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-teal-800">$teal-800</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-teal-900">$teal-900</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-cyan">
|
||||
<strong class="d-block">$cyan</strong>
|
||||
#0dcaf0
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-cyan-100">$cyan-100</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-cyan-200">$cyan-200</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-cyan-300">$cyan-300</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-cyan-400">$cyan-400</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-cyan-500">$cyan-500</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-cyan-600">$cyan-600</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-cyan-700">$cyan-700</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-cyan-800">$cyan-800</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-cyan-900">$cyan-900</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-gray-500">
|
||||
@ -737,24 +737,24 @@
|
||||
#adb5bd
|
||||
</div>
|
||||
<div class="p-3 bd-gray-100">$gray-100</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-gray-200">$gray-200</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-gray-300">$gray-300</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-gray-400">$gray-400</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-gray-500">$gray-500</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-gray-600">$gray-600</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-gray-700">$gray-700</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-gray-800">$gray-800</div>
|
||||
|
||||
|
||||
<div class="p-3 bd-gray-900">$gray-900</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 bd-black text-white">
|
||||
<strong class="d-block">$black</strong>
|
||||
@ -797,10 +797,10 @@
|
||||
<p>Add, remove, or modify values within the map to update how they’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>
|
||||
<p>Here’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="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">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">color</span><span class="o">:</span> <span class="nv">$yellow-300</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>
|
||||
</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">
|
||||
<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">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -867,7 +867,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -875,7 +875,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn how and why we build nearly all our components responsively and with base and modifier classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -405,10 +405,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="base-classes">Base classes</h2>
|
||||
<p>Bootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like <code>.btn</code>, and then group individual styles for each variant into modifier classes, like <code>.btn-primary</code> or <code>.btn-success</code>.</p>
|
||||
@ -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>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Generate contextual modifier classes for colorizing the alert.
|
||||
</span><span class="c1"></span>
|
||||
<span class="k">@each</span> <span class="err">$</span><span class="nt">state</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
|
||||
<span class="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-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>
|
||||
@ -436,7 +436,7 @@
|
||||
</span><span class="c1">// Add modifier classes to change text and background color on individual items.
|
||||
</span><span class="c1">// Organizationally, this must come after the `:hover` states.
|
||||
</span><span class="c1"></span>
|
||||
<span class="k">@each</span> <span class="err">$</span><span class="nt">state</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
|
||||
<span class="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-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"><</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
|
||||
</span><span class="c1">// this custom property in JS to determine Popper's positioning
|
||||
</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="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="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">&</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">"/* rtl:ignore */"</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">"/* rtl:ignore */"</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="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="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">&</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">"/* rtl:ignore */"</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">"/* rtl:ignore */"</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="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>
|
||||
@ -477,12 +477,12 @@
|
||||
</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>
|
||||
<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="n">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="n">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="n">xxl</span><span class="o">:</span> <span class="mi">1400</span><span class="kt">px</span>
|
||||
<span class="na">xs</span><span class="o">:</span> <span class="mi">0</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="na">md</span><span class="o">:</span> <span class="mi">768</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="na">xl</span><span class="o">:</span> <span class="mi">1200</span><span class="kt">px</span><span class="o">,</span>
|
||||
<span class="na">xxl</span><span class="o">:</span> <span class="mi">1400</span><span class="kt">px</span>
|
||||
<span class="p">);</span>
|
||||
</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>
|
||||
@ -532,7 +532,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -579,7 +579,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -587,7 +587,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use Bootstrap’s CSS custom properties for fast and forward-looking design and development.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -404,10 +404,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Bootstrap includes around two dozen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS custom properties (variables)</a> in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s inspector, a code sandbox, or general prototyping.</p>
|
||||
<p><strong>All our custom properties are prefixed with <code>bs-</code></strong> to avoid conflicts with third party CSS.</p>
|
||||
@ -468,7 +468,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -515,7 +515,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -523,7 +523,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -408,10 +408,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="lean-sass-imports">Lean Sass imports</h2>
|
||||
<p>When using Sass in your asset pipeline, make sure you optimize Bootstrap by only <code>@import</code>ing the components you need. Your largest optimizations will likely come from the <code>Layout & Components</code> section of our <code>bootstrap.scss</code>.</p>
|
||||
@ -528,7 +528,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -575,7 +575,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -583,7 +583,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,10 +393,10 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new <code>$enable-*</code> Sass variables. Override a variable’s value and recompile with <code>npm run test</code> as needed.</p>
|
||||
<p>You can find and customize these variables for key global options in Bootstrap’s <code>scss/_variables.scss</code> file.</p>
|
||||
@ -499,7 +499,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -546,7 +546,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -554,7 +554,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,56 +393,56 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
<div class="row g-3">
|
||||
|
||||
|
||||
<div class="col-md-6">
|
||||
<a class="d-block text-decoration-none" href="../sass/">
|
||||
<strong class="d-block h5 mb-0">Sass</strong>
|
||||
<span class="text-secondary">Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6">
|
||||
<a class="d-block text-decoration-none" href="../options/">
|
||||
<strong class="d-block h5 mb-0">Options</strong>
|
||||
<span class="text-secondary">Customize Bootstrap with built-in variables to easily toggle global CSS preferences.</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6">
|
||||
<a class="d-block text-decoration-none" href="../color/">
|
||||
<strong class="d-block h5 mb-0">Color</strong>
|
||||
<span class="text-secondary">Learn about and customize the color systems that support the entire toolkit.</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6">
|
||||
<a class="d-block text-decoration-none" href="../components/">
|
||||
<strong class="d-block h5 mb-0">Components</strong>
|
||||
<span class="text-secondary">Learn how we build nearly all our components responsively and with base and modifier classes.</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6">
|
||||
<a class="d-block text-decoration-none" href="../css-variables/">
|
||||
<strong class="d-block h5 mb-0">CSS variables</strong>
|
||||
<span class="text-secondary">Use Bootstrap's CSS custom properties for fast and forward-looking design and development.</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6">
|
||||
<a class="d-block text-decoration-none" href="../optimize/">
|
||||
<strong class="d-block h5 mb-0">Optimize</strong>
|
||||
<span class="text-secondary">Keep your projects lean, responsive, and maintainable so you can deliver the best experience.</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you’re using, browser support, and more.</p>
|
||||
@ -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/navbar/#responsive-behaviors">Navbar toggle buttons</a></li>
|
||||
</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>
|
||||
</main>
|
||||
@ -484,7 +484,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -531,7 +531,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -539,7 +539,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+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">
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@ -425,10 +425,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p>
|
||||
<h2 id="file-structure">File structure</h2>
|
||||
@ -482,7 +482,7 @@
|
||||
<h2 id="variable-defaults">Variable defaults</h2>
|
||||
<p>Every Sass variable in Bootstrap includes the <code>!default</code> flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the <code>!default</code> flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.</p>
|
||||
<p>You will find the complete list of Bootstrap’s variables in <code>scss/_variables.scss</code>. Some variables are set to <code>null</code>, these variables don’t output the property unless they are overridden in your configuration.</p>
|
||||
<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’s an example that changes the <code>background-color</code> and <code>color</code> for the <code><body></code> when importing and compiling Bootstrap via npm:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Required
|
||||
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/functions"</span><span class="p">;</span>
|
||||
@ -495,8 +495,6 @@
|
||||
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/variables"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/mixins"</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// Bootstrap and its default variables
|
||||
</span><span class="c1"></span>
|
||||
<span class="c1">// Optional Bootstrap components here
|
||||
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/root"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/reboot"</span><span class="p">;</span>
|
||||
@ -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>
|
||||
<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>
|
||||
</code></pre></div><p>Later on, theses variables are set in Bootstrap’s <code>$theme-colors</code> map:</p>
|
||||
</code></pre></div><p>Later on, these variables are set in Bootstrap’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>
|
||||
<span class="s2">"primary"</span><span class="o">:</span> <span class="nv">$primary</span><span class="o">,</span>
|
||||
<span class="s2">"danger"</span><span class="o">:</span> <span class="nv">$danger</span>
|
||||
@ -549,49 +547,49 @@
|
||||
<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>
|
||||
<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="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">dark</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="na">background-color</span><span class="o">:</span> <span class="nv">$dark</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><p>You can lighten or darken colors with Bootstrap’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’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
|
||||
</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 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><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="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="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 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><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="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="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 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">></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><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="nf">if</span><span class="p">(</span><span class="nv">$weight</span> <span class="o">></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>
|
||||
</code></pre></div>
|
||||
<p>In practice, you’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>
|
||||
<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="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>
|
||||
</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>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’re generating multiple classes.</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="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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</code></pre></div><h3 id="escape-svg">Escape SVG</h3>
|
||||
<p>We use the <code>escape-svg</code> function to escape the <code><</code>, <code>></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="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="nc">.element</span> <span class="p">{</span>
|
||||
<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>
|
||||
</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>
|
||||
@ -616,12 +614,12 @@
|
||||
|
||||
<span class="nc">.element</span> <span class="p">{</span>
|
||||
<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="nc">.element</span> <span class="p">{</span>
|
||||
<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>
|
||||
</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>
|
||||
@ -634,7 +632,7 @@
|
||||
<span class="p">}</span>
|
||||
</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>
|
||||
<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><span class="c1"></span> <span class="p">}</span>
|
||||
|
||||
@ -659,7 +657,7 @@
|
||||
<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">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>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@ -706,7 +704,7 @@
|
||||
</div>
|
||||
</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>
|
||||
@ -714,7 +712,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
597
docs/5.0/dist/css/bootstrap-grid.css
vendored
597
docs/5.0/dist/css/bootstrap-grid.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Grid v5.0.1 (https://getbootstrap.com/)
|
||||
* Bootstrap Grid v5.0.2 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
@ -49,16 +49,16 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(var(--bs-gutter-y) * -1);
|
||||
margin-right: calc(var(--bs-gutter-x) / -2);
|
||||
margin-left: calc(var(--bs-gutter-x) / -2);
|
||||
margin-right: calc(var(--bs-gutter-x) * -.5);
|
||||
margin-left: calc(var(--bs-gutter-x) * -.5);
|
||||
}
|
||||
.row > * {
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-right: calc(var(--bs-gutter-x) / 2);
|
||||
padding-left: calc(var(--bs-gutter-x) / 2);
|
||||
padding-right: calc(var(--bs-gutter-x) * .5);
|
||||
padding-left: calc(var(--bs-gutter-x) * .5);
|
||||
margin-top: var(--bs-gutter-y);
|
||||
}
|
||||
|
||||
@ -101,6 +101,206 @@
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-sm {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-sm-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-sm-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-sm-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-sm-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-sm-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-sm-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-sm-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-md {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-md-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-md-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-md-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-md-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-md-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-md-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-md-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-lg {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-lg-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-lg-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-lg-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-lg-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-lg-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-lg-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-lg-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.col-xxl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xxl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
.col-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -108,12 +308,12 @@
|
||||
|
||||
.col-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
@ -123,12 +323,12 @@
|
||||
|
||||
.col-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
@ -138,12 +338,12 @@
|
||||
|
||||
.col-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
@ -153,12 +353,12 @@
|
||||
|
||||
.col-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
@ -167,11 +367,11 @@
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
@ -179,11 +379,11 @@
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
@ -191,11 +391,11 @@
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
@ -203,11 +403,11 @@
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-0,
|
||||
@ -271,45 +471,6 @@
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-sm {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-sm-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-sm-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-sm-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-sm-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-sm-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-sm-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-sm-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-sm-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -317,12 +478,12 @@
|
||||
|
||||
.col-sm-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-3 {
|
||||
@ -332,12 +493,12 @@
|
||||
|
||||
.col-sm-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-6 {
|
||||
@ -347,12 +508,12 @@
|
||||
|
||||
.col-sm-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-9 {
|
||||
@ -362,12 +523,12 @@
|
||||
|
||||
.col-sm-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-12 {
|
||||
@ -380,11 +541,11 @@
|
||||
}
|
||||
|
||||
.offset-sm-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-3 {
|
||||
@ -392,11 +553,11 @@
|
||||
}
|
||||
|
||||
.offset-sm-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-6 {
|
||||
@ -404,11 +565,11 @@
|
||||
}
|
||||
|
||||
.offset-sm-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-9 {
|
||||
@ -416,11 +577,11 @@
|
||||
}
|
||||
|
||||
.offset-sm-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-sm-0,
|
||||
@ -484,45 +645,6 @@
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-md {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-md-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-md-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-md-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-md-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-md-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-md-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-md-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-md-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -530,12 +652,12 @@
|
||||
|
||||
.col-md-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-md-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-md-3 {
|
||||
@ -545,12 +667,12 @@
|
||||
|
||||
.col-md-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-md-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-md-6 {
|
||||
@ -560,12 +682,12 @@
|
||||
|
||||
.col-md-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-md-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-md-9 {
|
||||
@ -575,12 +697,12 @@
|
||||
|
||||
.col-md-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-md-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-md-12 {
|
||||
@ -593,11 +715,11 @@
|
||||
}
|
||||
|
||||
.offset-md-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-3 {
|
||||
@ -605,11 +727,11 @@
|
||||
}
|
||||
|
||||
.offset-md-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-6 {
|
||||
@ -617,11 +739,11 @@
|
||||
}
|
||||
|
||||
.offset-md-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-9 {
|
||||
@ -629,11 +751,11 @@
|
||||
}
|
||||
|
||||
.offset-md-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-md-0,
|
||||
@ -697,45 +819,6 @@
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-lg {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-lg-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-lg-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-lg-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-lg-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-lg-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-lg-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-lg-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-lg-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -743,12 +826,12 @@
|
||||
|
||||
.col-lg-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-3 {
|
||||
@ -758,12 +841,12 @@
|
||||
|
||||
.col-lg-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-6 {
|
||||
@ -773,12 +856,12 @@
|
||||
|
||||
.col-lg-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-9 {
|
||||
@ -788,12 +871,12 @@
|
||||
|
||||
.col-lg-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-12 {
|
||||
@ -806,11 +889,11 @@
|
||||
}
|
||||
|
||||
.offset-lg-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-3 {
|
||||
@ -818,11 +901,11 @@
|
||||
}
|
||||
|
||||
.offset-lg-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-6 {
|
||||
@ -830,11 +913,11 @@
|
||||
}
|
||||
|
||||
.offset-lg-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-9 {
|
||||
@ -842,11 +925,11 @@
|
||||
}
|
||||
|
||||
.offset-lg-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-lg-0,
|
||||
@ -910,45 +993,6 @@
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-xl-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -956,12 +1000,12 @@
|
||||
|
||||
.col-xl-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-3 {
|
||||
@ -971,12 +1015,12 @@
|
||||
|
||||
.col-xl-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-6 {
|
||||
@ -986,12 +1030,12 @@
|
||||
|
||||
.col-xl-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-9 {
|
||||
@ -1001,12 +1045,12 @@
|
||||
|
||||
.col-xl-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-12 {
|
||||
@ -1019,11 +1063,11 @@
|
||||
}
|
||||
|
||||
.offset-xl-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-3 {
|
||||
@ -1031,11 +1075,11 @@
|
||||
}
|
||||
|
||||
.offset-xl-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-6 {
|
||||
@ -1043,11 +1087,11 @@
|
||||
}
|
||||
|
||||
.offset-xl-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-9 {
|
||||
@ -1055,11 +1099,11 @@
|
||||
}
|
||||
|
||||
.offset-xl-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-xl-0,
|
||||
@ -1123,45 +1167,6 @@
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.col-xxl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xxl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-xxl-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -1169,12 +1174,12 @@
|
||||
|
||||
.col-xxl-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-3 {
|
||||
@ -1184,12 +1189,12 @@
|
||||
|
||||
.col-xxl-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-6 {
|
||||
@ -1199,12 +1204,12 @@
|
||||
|
||||
.col-xxl-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-9 {
|
||||
@ -1214,12 +1219,12 @@
|
||||
|
||||
.col-xxl-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-12 {
|
||||
@ -1232,11 +1237,11 @@
|
||||
}
|
||||
|
||||
.offset-xxl-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-3 {
|
||||
@ -1244,11 +1249,11 @@
|
||||
}
|
||||
|
||||
.offset-xxl-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-6 {
|
||||
@ -1256,11 +1261,11 @@
|
||||
}
|
||||
|
||||
.offset-xxl-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-9 {
|
||||
@ -1268,11 +1273,11 @@
|
||||
}
|
||||
|
||||
.offset-xxl-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-xxl-0,
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-grid.css.map
vendored
2
docs/5.0/dist/css/bootstrap-grid.css.map
vendored
File diff suppressed because one or more lines are too long
4
docs/5.0/dist/css/bootstrap-grid.min.css
vendored
4
docs/5.0/dist/css/bootstrap-grid.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap-grid.min.css.map
vendored
2
docs/5.0/dist/css/bootstrap-grid.min.css.map
vendored
File diff suppressed because one or more lines are too long
597
docs/5.0/dist/css/bootstrap-grid.rtl.css
vendored
597
docs/5.0/dist/css/bootstrap-grid.rtl.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Grid v5.0.1 (https://getbootstrap.com/)
|
||||
* Bootstrap Grid v5.0.2 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
@ -49,16 +49,16 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(var(--bs-gutter-y) * -1);
|
||||
margin-left: calc(var(--bs-gutter-x) / -2);
|
||||
margin-right: calc(var(--bs-gutter-x) / -2);
|
||||
margin-left: calc(var(--bs-gutter-x) * -.5);
|
||||
margin-right: calc(var(--bs-gutter-x) * -.5);
|
||||
}
|
||||
.row > * {
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-left: calc(var(--bs-gutter-x) / 2);
|
||||
padding-right: calc(var(--bs-gutter-x) / 2);
|
||||
padding-left: calc(var(--bs-gutter-x) * .5);
|
||||
padding-right: calc(var(--bs-gutter-x) * .5);
|
||||
margin-top: var(--bs-gutter-y);
|
||||
}
|
||||
|
||||
@ -101,6 +101,206 @@
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-sm {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-sm-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-sm-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-sm-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-sm-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-sm-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-sm-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-sm-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-md {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-md-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-md-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-md-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-md-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-md-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-md-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-md-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-lg {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-lg-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-lg-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-lg-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-lg-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-lg-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-lg-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-lg-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.col-xxl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xxl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
.col-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -108,12 +308,12 @@
|
||||
|
||||
.col-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
@ -123,12 +323,12 @@
|
||||
|
||||
.col-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
@ -138,12 +338,12 @@
|
||||
|
||||
.col-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
@ -153,12 +353,12 @@
|
||||
|
||||
.col-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
@ -167,11 +367,11 @@
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
@ -179,11 +379,11 @@
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
@ -191,11 +391,11 @@
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
@ -203,11 +403,11 @@
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-0,
|
||||
@ -271,45 +471,6 @@
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-sm {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-sm-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-sm-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-sm-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-sm-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-sm-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-sm-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-sm-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-sm-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -317,12 +478,12 @@
|
||||
|
||||
.col-sm-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-3 {
|
||||
@ -332,12 +493,12 @@
|
||||
|
||||
.col-sm-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-6 {
|
||||
@ -347,12 +508,12 @@
|
||||
|
||||
.col-sm-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-9 {
|
||||
@ -362,12 +523,12 @@
|
||||
|
||||
.col-sm-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-12 {
|
||||
@ -380,11 +541,11 @@
|
||||
}
|
||||
|
||||
.offset-sm-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-3 {
|
||||
@ -392,11 +553,11 @@
|
||||
}
|
||||
|
||||
.offset-sm-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-6 {
|
||||
@ -404,11 +565,11 @@
|
||||
}
|
||||
|
||||
.offset-sm-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-9 {
|
||||
@ -416,11 +577,11 @@
|
||||
}
|
||||
|
||||
.offset-sm-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-sm-0,
|
||||
@ -484,45 +645,6 @@
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-md {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-md-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-md-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-md-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-md-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-md-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-md-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-md-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-md-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -530,12 +652,12 @@
|
||||
|
||||
.col-md-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-md-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-md-3 {
|
||||
@ -545,12 +667,12 @@
|
||||
|
||||
.col-md-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-md-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-md-6 {
|
||||
@ -560,12 +682,12 @@
|
||||
|
||||
.col-md-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-md-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-md-9 {
|
||||
@ -575,12 +697,12 @@
|
||||
|
||||
.col-md-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-md-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-md-12 {
|
||||
@ -593,11 +715,11 @@
|
||||
}
|
||||
|
||||
.offset-md-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-3 {
|
||||
@ -605,11 +727,11 @@
|
||||
}
|
||||
|
||||
.offset-md-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-6 {
|
||||
@ -617,11 +739,11 @@
|
||||
}
|
||||
|
||||
.offset-md-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-9 {
|
||||
@ -629,11 +751,11 @@
|
||||
}
|
||||
|
||||
.offset-md-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-md-0,
|
||||
@ -697,45 +819,6 @@
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-lg {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-lg-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-lg-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-lg-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-lg-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-lg-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-lg-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-lg-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-lg-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -743,12 +826,12 @@
|
||||
|
||||
.col-lg-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-3 {
|
||||
@ -758,12 +841,12 @@
|
||||
|
||||
.col-lg-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-6 {
|
||||
@ -773,12 +856,12 @@
|
||||
|
||||
.col-lg-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-9 {
|
||||
@ -788,12 +871,12 @@
|
||||
|
||||
.col-lg-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-12 {
|
||||
@ -806,11 +889,11 @@
|
||||
}
|
||||
|
||||
.offset-lg-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-3 {
|
||||
@ -818,11 +901,11 @@
|
||||
}
|
||||
|
||||
.offset-lg-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-6 {
|
||||
@ -830,11 +913,11 @@
|
||||
}
|
||||
|
||||
.offset-lg-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-9 {
|
||||
@ -842,11 +925,11 @@
|
||||
}
|
||||
|
||||
.offset-lg-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-lg-0,
|
||||
@ -910,45 +993,6 @@
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-xl-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -956,12 +1000,12 @@
|
||||
|
||||
.col-xl-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-3 {
|
||||
@ -971,12 +1015,12 @@
|
||||
|
||||
.col-xl-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-6 {
|
||||
@ -986,12 +1030,12 @@
|
||||
|
||||
.col-xl-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-9 {
|
||||
@ -1001,12 +1045,12 @@
|
||||
|
||||
.col-xl-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-12 {
|
||||
@ -1019,11 +1063,11 @@
|
||||
}
|
||||
|
||||
.offset-xl-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-3 {
|
||||
@ -1031,11 +1075,11 @@
|
||||
}
|
||||
|
||||
.offset-xl-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-6 {
|
||||
@ -1043,11 +1087,11 @@
|
||||
}
|
||||
|
||||
.offset-xl-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-9 {
|
||||
@ -1055,11 +1099,11 @@
|
||||
}
|
||||
|
||||
.offset-xl-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-xl-0,
|
||||
@ -1123,45 +1167,6 @@
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.col-xxl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xxl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-xxl-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -1169,12 +1174,12 @@
|
||||
|
||||
.col-xxl-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-3 {
|
||||
@ -1184,12 +1189,12 @@
|
||||
|
||||
.col-xxl-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-6 {
|
||||
@ -1199,12 +1204,12 @@
|
||||
|
||||
.col-xxl-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-9 {
|
||||
@ -1214,12 +1219,12 @@
|
||||
|
||||
.col-xxl-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-12 {
|
||||
@ -1232,11 +1237,11 @@
|
||||
}
|
||||
|
||||
.offset-xxl-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-3 {
|
||||
@ -1244,11 +1249,11 @@
|
||||
}
|
||||
|
||||
.offset-xxl-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-6 {
|
||||
@ -1256,11 +1261,11 @@
|
||||
}
|
||||
|
||||
.offset-xxl-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-9 {
|
||||
@ -1268,11 +1273,11 @@
|
||||
}
|
||||
|
||||
.offset-xxl-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-xxl-0,
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-grid.rtl.css.map
vendored
2
docs/5.0/dist/css/bootstrap-grid.rtl.css.map
vendored
File diff suppressed because one or more lines are too long
4
docs/5.0/dist/css/bootstrap-grid.rtl.min.css
vendored
4
docs/5.0/dist/css/bootstrap-grid.rtl.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap-reboot.css
vendored
2
docs/5.0/dist/css/bootstrap-reboot.css
vendored
@ -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 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-reboot.css.map
vendored
2
docs/5.0/dist/css/bootstrap-reboot.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap-reboot.min.css
vendored
2
docs/5.0/dist/css/bootstrap-reboot.min.css
vendored
@ -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 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap-reboot.rtl.css
vendored
2
docs/5.0/dist/css/bootstrap-reboot.rtl.css
vendored
@ -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 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap-utilities.css
vendored
2
docs/5.0/dist/css/bootstrap-utilities.css
vendored
@ -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 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
File diff suppressed because one or more lines are too long
673
docs/5.0/dist/css/bootstrap.css
vendored
673
docs/5.0/dist/css/bootstrap.css
vendored
@ -1,6 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Bootstrap v5.0.1 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.2 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
@ -634,15 +634,15 @@ progress {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(var(--bs-gutter-y) * -1);
|
||||
margin-right: calc(var(--bs-gutter-x) / -2);
|
||||
margin-left: calc(var(--bs-gutter-x) / -2);
|
||||
margin-right: calc(var(--bs-gutter-x) * -.5);
|
||||
margin-left: calc(var(--bs-gutter-x) * -.5);
|
||||
}
|
||||
.row > * {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-right: calc(var(--bs-gutter-x) / 2);
|
||||
padding-left: calc(var(--bs-gutter-x) / 2);
|
||||
padding-right: calc(var(--bs-gutter-x) * .5);
|
||||
padding-left: calc(var(--bs-gutter-x) * .5);
|
||||
margin-top: var(--bs-gutter-y);
|
||||
}
|
||||
|
||||
@ -685,6 +685,206 @@ progress {
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-sm {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-sm-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-sm-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-sm-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-sm-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-sm-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-sm-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-sm-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-md {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-md-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-md-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-md-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-md-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-md-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-md-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-md-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-lg {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-lg-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-lg-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-lg-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-lg-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-lg-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-lg-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-lg-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.col-xxl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xxl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
.col-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -692,12 +892,12 @@ progress {
|
||||
|
||||
.col-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
@ -707,12 +907,12 @@ progress {
|
||||
|
||||
.col-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
@ -722,12 +922,12 @@ progress {
|
||||
|
||||
.col-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
@ -737,12 +937,12 @@ progress {
|
||||
|
||||
.col-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
@ -751,11 +951,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
@ -763,11 +963,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
@ -775,11 +975,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
@ -787,11 +987,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-0,
|
||||
@ -855,45 +1055,6 @@ progress {
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-sm {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-sm-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-sm-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-sm-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-sm-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-sm-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-sm-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-sm-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-sm-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -901,12 +1062,12 @@ progress {
|
||||
|
||||
.col-sm-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-3 {
|
||||
@ -916,12 +1077,12 @@ progress {
|
||||
|
||||
.col-sm-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-6 {
|
||||
@ -931,12 +1092,12 @@ progress {
|
||||
|
||||
.col-sm-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-9 {
|
||||
@ -946,12 +1107,12 @@ progress {
|
||||
|
||||
.col-sm-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-12 {
|
||||
@ -964,11 +1125,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-sm-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-3 {
|
||||
@ -976,11 +1137,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-sm-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-6 {
|
||||
@ -988,11 +1149,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-sm-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-9 {
|
||||
@ -1000,11 +1161,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-sm-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-sm-0,
|
||||
@ -1068,45 +1229,6 @@ progress {
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-md {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-md-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-md-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-md-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-md-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-md-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-md-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-md-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-md-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -1114,12 +1236,12 @@ progress {
|
||||
|
||||
.col-md-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-md-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-md-3 {
|
||||
@ -1129,12 +1251,12 @@ progress {
|
||||
|
||||
.col-md-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-md-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-md-6 {
|
||||
@ -1144,12 +1266,12 @@ progress {
|
||||
|
||||
.col-md-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-md-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-md-9 {
|
||||
@ -1159,12 +1281,12 @@ progress {
|
||||
|
||||
.col-md-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-md-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-md-12 {
|
||||
@ -1177,11 +1299,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-md-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-3 {
|
||||
@ -1189,11 +1311,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-md-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-6 {
|
||||
@ -1201,11 +1323,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-md-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-9 {
|
||||
@ -1213,11 +1335,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-md-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-md-0,
|
||||
@ -1281,45 +1403,6 @@ progress {
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-lg {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-lg-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-lg-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-lg-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-lg-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-lg-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-lg-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-lg-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-lg-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -1327,12 +1410,12 @@ progress {
|
||||
|
||||
.col-lg-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-3 {
|
||||
@ -1342,12 +1425,12 @@ progress {
|
||||
|
||||
.col-lg-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-6 {
|
||||
@ -1357,12 +1440,12 @@ progress {
|
||||
|
||||
.col-lg-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-9 {
|
||||
@ -1372,12 +1455,12 @@ progress {
|
||||
|
||||
.col-lg-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-12 {
|
||||
@ -1390,11 +1473,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-lg-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-3 {
|
||||
@ -1402,11 +1485,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-lg-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-6 {
|
||||
@ -1414,11 +1497,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-lg-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-9 {
|
||||
@ -1426,11 +1509,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-lg-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-lg-0,
|
||||
@ -1494,45 +1577,6 @@ progress {
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-xl-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -1540,12 +1584,12 @@ progress {
|
||||
|
||||
.col-xl-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-3 {
|
||||
@ -1555,12 +1599,12 @@ progress {
|
||||
|
||||
.col-xl-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-6 {
|
||||
@ -1570,12 +1614,12 @@ progress {
|
||||
|
||||
.col-xl-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-9 {
|
||||
@ -1585,12 +1629,12 @@ progress {
|
||||
|
||||
.col-xl-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-12 {
|
||||
@ -1603,11 +1647,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xl-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-3 {
|
||||
@ -1615,11 +1659,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xl-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-6 {
|
||||
@ -1627,11 +1671,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xl-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-9 {
|
||||
@ -1639,11 +1683,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xl-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-xl-0,
|
||||
@ -1707,45 +1751,6 @@ progress {
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.col-xxl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xxl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-xxl-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -1753,12 +1758,12 @@ progress {
|
||||
|
||||
.col-xxl-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-3 {
|
||||
@ -1768,12 +1773,12 @@ progress {
|
||||
|
||||
.col-xxl-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-6 {
|
||||
@ -1783,12 +1788,12 @@ progress {
|
||||
|
||||
.col-xxl-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-9 {
|
||||
@ -1798,12 +1803,12 @@ progress {
|
||||
|
||||
.col-xxl-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-12 {
|
||||
@ -1816,11 +1821,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xxl-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-3 {
|
||||
@ -1828,11 +1833,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xxl-4 {
|
||||
margin-left: 33.3333333333%;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-5 {
|
||||
margin-left: 41.6666666667%;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-6 {
|
||||
@ -1840,11 +1845,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xxl-7 {
|
||||
margin-left: 58.3333333333%;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-8 {
|
||||
margin-left: 66.6666666667%;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-9 {
|
||||
@ -1852,11 +1857,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xxl-10 {
|
||||
margin-left: 83.3333333333%;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-11 {
|
||||
margin-left: 91.6666666667%;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-xxl-0,
|
||||
@ -2261,7 +2266,7 @@ progress {
|
||||
}
|
||||
|
||||
.form-control-sm {
|
||||
min-height: calc(1.5em + 0.5rem + 2px);
|
||||
min-height: calc(1.5em + (0.5rem + 2px));
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 0.2rem;
|
||||
@ -2280,7 +2285,7 @@ progress {
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
min-height: calc(1.5em + 1rem + 2px);
|
||||
min-height: calc(1.5em + (1rem + 2px));
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.25rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -2299,13 +2304,13 @@ progress {
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
min-height: calc(1.5em + 0.75rem + 2px);
|
||||
min-height: calc(1.5em + (0.75rem + 2px));
|
||||
}
|
||||
textarea.form-control-sm {
|
||||
min-height: calc(1.5em + 0.5rem + 2px);
|
||||
min-height: calc(1.5em + (0.5rem + 2px));
|
||||
}
|
||||
textarea.form-control-lg {
|
||||
min-height: calc(1.5em + 1rem + 2px);
|
||||
min-height: calc(1.5em + (1rem + 2px));
|
||||
}
|
||||
|
||||
.form-control-color {
|
||||
@ -2329,6 +2334,7 @@ textarea.form-control-lg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
|
||||
-moz-padding-start: calc(0.75rem - 3px);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
@ -2340,10 +2346,16 @@ textarea.form-control-lg {
|
||||
background-size: 16px 12px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.form-select {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.form-select:focus {
|
||||
border-color: #86b7fe;
|
||||
outline: 0;
|
||||
@ -2576,7 +2588,7 @@ textarea.form-control-lg {
|
||||
.form-floating > .form-control,
|
||||
.form-floating > .form-select {
|
||||
height: calc(3.5rem + 2px);
|
||||
padding: 1rem 0.75rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.form-floating > label {
|
||||
position: absolute;
|
||||
@ -2594,6 +2606,9 @@ textarea.form-control-lg {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.form-floating > .form-control {
|
||||
padding: 1rem 0.75rem;
|
||||
}
|
||||
.form-floating > .form-control::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
@ -3466,16 +3481,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-start[data-bs-popper] {
|
||||
right: auto /* rtl:ignore */;
|
||||
left: 0 /* rtl:ignore */;
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-end[data-bs-popper] {
|
||||
right: 0 /* rtl:ignore */;
|
||||
left: auto /* rtl:ignore */;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
@ -3483,16 +3498,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-sm-start[data-bs-popper] {
|
||||
right: auto /* rtl:ignore */;
|
||||
left: 0 /* rtl:ignore */;
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-sm-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-sm-end[data-bs-popper] {
|
||||
right: 0 /* rtl:ignore */;
|
||||
left: auto /* rtl:ignore */;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
@ -3500,16 +3515,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-md-start[data-bs-popper] {
|
||||
right: auto /* rtl:ignore */;
|
||||
left: 0 /* rtl:ignore */;
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-md-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-md-end[data-bs-popper] {
|
||||
right: 0 /* rtl:ignore */;
|
||||
left: auto /* rtl:ignore */;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
@ -3517,16 +3532,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-lg-start[data-bs-popper] {
|
||||
right: auto /* rtl:ignore */;
|
||||
left: 0 /* rtl:ignore */;
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-lg-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-lg-end[data-bs-popper] {
|
||||
right: 0 /* rtl:ignore */;
|
||||
left: auto /* rtl:ignore */;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
@ -3534,16 +3549,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-xl-start[data-bs-popper] {
|
||||
right: auto /* rtl:ignore */;
|
||||
left: 0 /* rtl:ignore */;
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-xl-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-xl-end[data-bs-popper] {
|
||||
right: 0 /* rtl:ignore */;
|
||||
left: auto /* rtl:ignore */;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
@ -3551,16 +3566,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-xxl-start[data-bs-popper] {
|
||||
right: auto /* rtl:ignore */;
|
||||
left: 0 /* rtl:ignore */;
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-xxl-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-xxl-end[data-bs-popper] {
|
||||
right: 0 /* rtl:ignore */;
|
||||
left: auto /* rtl:ignore */;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
.dropup .dropdown-menu[data-bs-popper] {
|
||||
@ -5700,7 +5715,7 @@ textarea.form-control-lg {
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-top-left-radius: calc(0.3rem - 1px);
|
||||
border-top-right-radius: calc(0.3rem - 1px);
|
||||
}
|
||||
@ -6019,7 +6034,9 @@ textarea.form-control-lg {
|
||||
}
|
||||
.offcanvas-header .btn-close {
|
||||
padding: 0.5rem 0.5rem;
|
||||
margin: -0.5rem -0.5rem -0.5rem auto;
|
||||
margin-top: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.offcanvas-title {
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap.css.map
vendored
2
docs/5.0/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
4
docs/5.0/dist/css/bootstrap.min.css
vendored
4
docs/5.0/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap.min.css.map
vendored
2
docs/5.0/dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
673
docs/5.0/dist/css/bootstrap.rtl.css
vendored
673
docs/5.0/dist/css/bootstrap.rtl.css
vendored
@ -1,6 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Bootstrap v5.0.1 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.2 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
@ -632,15 +632,15 @@ progress {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(var(--bs-gutter-y) * -1);
|
||||
margin-left: calc(var(--bs-gutter-x) / -2);
|
||||
margin-right: calc(var(--bs-gutter-x) / -2);
|
||||
margin-left: calc(var(--bs-gutter-x) * -.5);
|
||||
margin-right: calc(var(--bs-gutter-x) * -.5);
|
||||
}
|
||||
.row > * {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-left: calc(var(--bs-gutter-x) / 2);
|
||||
padding-right: calc(var(--bs-gutter-x) / 2);
|
||||
padding-left: calc(var(--bs-gutter-x) * .5);
|
||||
padding-right: calc(var(--bs-gutter-x) * .5);
|
||||
margin-top: var(--bs-gutter-y);
|
||||
}
|
||||
|
||||
@ -683,6 +683,206 @@ progress {
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-sm {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-sm-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-sm-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-sm-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-sm-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-sm-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-sm-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-sm-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-md {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-md-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-md-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-md-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-md-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-md-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-md-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-md-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-lg {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-lg-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-lg-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-lg-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-lg-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-lg-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-lg-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-lg-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.col-xxl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xxl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
}
|
||||
.col-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -690,12 +890,12 @@ progress {
|
||||
|
||||
.col-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
@ -705,12 +905,12 @@ progress {
|
||||
|
||||
.col-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
@ -720,12 +920,12 @@ progress {
|
||||
|
||||
.col-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
@ -735,12 +935,12 @@ progress {
|
||||
|
||||
.col-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
@ -749,11 +949,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
@ -761,11 +961,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
@ -773,11 +973,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
@ -785,11 +985,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-0,
|
||||
@ -853,45 +1053,6 @@ progress {
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-sm {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-sm-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-sm-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-sm-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-sm-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-sm-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-sm-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-sm-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-sm-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -899,12 +1060,12 @@ progress {
|
||||
|
||||
.col-sm-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-3 {
|
||||
@ -914,12 +1075,12 @@ progress {
|
||||
|
||||
.col-sm-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-6 {
|
||||
@ -929,12 +1090,12 @@ progress {
|
||||
|
||||
.col-sm-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-9 {
|
||||
@ -944,12 +1105,12 @@ progress {
|
||||
|
||||
.col-sm-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-12 {
|
||||
@ -962,11 +1123,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-sm-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-3 {
|
||||
@ -974,11 +1135,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-sm-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-6 {
|
||||
@ -986,11 +1147,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-sm-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-sm-9 {
|
||||
@ -998,11 +1159,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-sm-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-sm-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-sm-0,
|
||||
@ -1066,45 +1227,6 @@ progress {
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-md {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-md-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-md-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-md-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-md-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-md-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-md-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-md-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-md-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -1112,12 +1234,12 @@ progress {
|
||||
|
||||
.col-md-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-md-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-md-3 {
|
||||
@ -1127,12 +1249,12 @@ progress {
|
||||
|
||||
.col-md-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-md-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-md-6 {
|
||||
@ -1142,12 +1264,12 @@ progress {
|
||||
|
||||
.col-md-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-md-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-md-9 {
|
||||
@ -1157,12 +1279,12 @@ progress {
|
||||
|
||||
.col-md-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-md-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-md-12 {
|
||||
@ -1175,11 +1297,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-md-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-3 {
|
||||
@ -1187,11 +1309,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-md-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-6 {
|
||||
@ -1199,11 +1321,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-md-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-md-9 {
|
||||
@ -1211,11 +1333,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-md-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-md-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-md-0,
|
||||
@ -1279,45 +1401,6 @@ progress {
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-lg {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-lg-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-lg-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-lg-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-lg-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-lg-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-lg-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-lg-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-lg-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -1325,12 +1408,12 @@ progress {
|
||||
|
||||
.col-lg-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-3 {
|
||||
@ -1340,12 +1423,12 @@ progress {
|
||||
|
||||
.col-lg-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-6 {
|
||||
@ -1355,12 +1438,12 @@ progress {
|
||||
|
||||
.col-lg-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-9 {
|
||||
@ -1370,12 +1453,12 @@ progress {
|
||||
|
||||
.col-lg-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-12 {
|
||||
@ -1388,11 +1471,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-lg-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-3 {
|
||||
@ -1400,11 +1483,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-lg-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-6 {
|
||||
@ -1412,11 +1495,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-lg-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-lg-9 {
|
||||
@ -1424,11 +1507,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-lg-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-lg-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-lg-0,
|
||||
@ -1492,45 +1575,6 @@ progress {
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-xl-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -1538,12 +1582,12 @@ progress {
|
||||
|
||||
.col-xl-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-3 {
|
||||
@ -1553,12 +1597,12 @@ progress {
|
||||
|
||||
.col-xl-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-6 {
|
||||
@ -1568,12 +1612,12 @@ progress {
|
||||
|
||||
.col-xl-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-9 {
|
||||
@ -1583,12 +1627,12 @@ progress {
|
||||
|
||||
.col-xl-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-xl-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-xl-12 {
|
||||
@ -1601,11 +1645,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xl-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-3 {
|
||||
@ -1613,11 +1657,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xl-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-6 {
|
||||
@ -1625,11 +1669,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xl-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-xl-9 {
|
||||
@ -1637,11 +1681,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xl-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-xl-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-xl-0,
|
||||
@ -1705,45 +1749,6 @@ progress {
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.col-xxl {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-auto > * {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row-cols-xxl-1 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-2 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-3 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-4 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-5 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.row-cols-xxl-6 > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.col-xxl-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@ -1751,12 +1756,12 @@ progress {
|
||||
|
||||
.col-xxl-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.3333333333%;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-2 {
|
||||
flex: 0 0 auto;
|
||||
width: 16.6666666667%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-3 {
|
||||
@ -1766,12 +1771,12 @@ progress {
|
||||
|
||||
.col-xxl-4 {
|
||||
flex: 0 0 auto;
|
||||
width: 33.3333333333%;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-5 {
|
||||
flex: 0 0 auto;
|
||||
width: 41.6666666667%;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-6 {
|
||||
@ -1781,12 +1786,12 @@ progress {
|
||||
|
||||
.col-xxl-7 {
|
||||
flex: 0 0 auto;
|
||||
width: 58.3333333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-8 {
|
||||
flex: 0 0 auto;
|
||||
width: 66.6666666667%;
|
||||
width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-9 {
|
||||
@ -1796,12 +1801,12 @@ progress {
|
||||
|
||||
.col-xxl-10 {
|
||||
flex: 0 0 auto;
|
||||
width: 83.3333333333%;
|
||||
width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-xxl-11 {
|
||||
flex: 0 0 auto;
|
||||
width: 91.6666666667%;
|
||||
width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-xxl-12 {
|
||||
@ -1814,11 +1819,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xxl-1 {
|
||||
margin-right: 8.3333333333%;
|
||||
margin-right: 8.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-2 {
|
||||
margin-right: 16.6666666667%;
|
||||
margin-right: 16.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-3 {
|
||||
@ -1826,11 +1831,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xxl-4 {
|
||||
margin-right: 33.3333333333%;
|
||||
margin-right: 33.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-5 {
|
||||
margin-right: 41.6666666667%;
|
||||
margin-right: 41.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-6 {
|
||||
@ -1838,11 +1843,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xxl-7 {
|
||||
margin-right: 58.3333333333%;
|
||||
margin-right: 58.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-8 {
|
||||
margin-right: 66.6666666667%;
|
||||
margin-right: 66.66666667%;
|
||||
}
|
||||
|
||||
.offset-xxl-9 {
|
||||
@ -1850,11 +1855,11 @@ progress {
|
||||
}
|
||||
|
||||
.offset-xxl-10 {
|
||||
margin-right: 83.3333333333%;
|
||||
margin-right: 83.33333333%;
|
||||
}
|
||||
|
||||
.offset-xxl-11 {
|
||||
margin-right: 91.6666666667%;
|
||||
margin-right: 91.66666667%;
|
||||
}
|
||||
|
||||
.g-xxl-0,
|
||||
@ -2259,7 +2264,7 @@ progress {
|
||||
}
|
||||
|
||||
.form-control-sm {
|
||||
min-height: calc(1.5em + 0.5rem + 2px);
|
||||
min-height: calc(1.5em + (0.5rem + 2px));
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 0.2rem;
|
||||
@ -2278,7 +2283,7 @@ progress {
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
min-height: calc(1.5em + 1rem + 2px);
|
||||
min-height: calc(1.5em + (1rem + 2px));
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.25rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -2297,13 +2302,13 @@ progress {
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
min-height: calc(1.5em + 0.75rem + 2px);
|
||||
min-height: calc(1.5em + (0.75rem + 2px));
|
||||
}
|
||||
textarea.form-control-sm {
|
||||
min-height: calc(1.5em + 0.5rem + 2px);
|
||||
min-height: calc(1.5em + (0.5rem + 2px));
|
||||
}
|
||||
textarea.form-control-lg {
|
||||
min-height: calc(1.5em + 1rem + 2px);
|
||||
min-height: calc(1.5em + (1rem + 2px));
|
||||
}
|
||||
|
||||
.form-control-color {
|
||||
@ -2327,6 +2332,7 @@ textarea.form-control-lg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.375rem 0.75rem 0.375rem 2.25rem;
|
||||
-moz-padding-start: calc(0.75rem - 3px);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
@ -2338,10 +2344,16 @@ textarea.form-control-lg {
|
||||
background-size: 16px 12px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.form-select {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.form-select:focus {
|
||||
border-color: #86b7fe;
|
||||
outline: 0;
|
||||
@ -2574,7 +2586,7 @@ textarea.form-control-lg {
|
||||
.form-floating > .form-control,
|
||||
.form-floating > .form-select {
|
||||
height: calc(3.5rem + 2px);
|
||||
padding: 1rem 0.75rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.form-floating > label {
|
||||
position: absolute;
|
||||
@ -2592,6 +2604,9 @@ textarea.form-control-lg {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.form-floating > .form-control {
|
||||
padding: 1rem 0.75rem;
|
||||
}
|
||||
.form-floating > .form-control::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
@ -3464,16 +3479,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-start[data-bs-popper] {
|
||||
right: auto ;
|
||||
left: 0 ;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-end[data-bs-popper] {
|
||||
right: 0 ;
|
||||
left: auto ;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
@ -3481,16 +3496,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-sm-start[data-bs-popper] {
|
||||
right: auto ;
|
||||
left: 0 ;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-sm-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-sm-end[data-bs-popper] {
|
||||
right: 0 ;
|
||||
left: auto ;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
@ -3498,16 +3513,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-md-start[data-bs-popper] {
|
||||
right: auto ;
|
||||
left: 0 ;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-md-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-md-end[data-bs-popper] {
|
||||
right: 0 ;
|
||||
left: auto ;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
@ -3515,16 +3530,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-lg-start[data-bs-popper] {
|
||||
right: auto ;
|
||||
left: 0 ;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-lg-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-lg-end[data-bs-popper] {
|
||||
right: 0 ;
|
||||
left: auto ;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
@ -3532,16 +3547,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-xl-start[data-bs-popper] {
|
||||
right: auto ;
|
||||
left: 0 ;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-xl-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-xl-end[data-bs-popper] {
|
||||
right: 0 ;
|
||||
left: auto ;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
@ -3549,16 +3564,16 @@ textarea.form-control-lg {
|
||||
--bs-position: start;
|
||||
}
|
||||
.dropdown-menu-xxl-start[data-bs-popper] {
|
||||
right: auto ;
|
||||
left: 0 ;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-xxl-end {
|
||||
--bs-position: end;
|
||||
}
|
||||
.dropdown-menu-xxl-end[data-bs-popper] {
|
||||
right: 0 ;
|
||||
left: auto ;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
.dropup .dropdown-menu[data-bs-popper] {
|
||||
@ -5698,7 +5713,7 @@ textarea.form-control-lg {
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-top-right-radius: calc(0.3rem - 1px);
|
||||
border-top-left-radius: calc(0.3rem - 1px);
|
||||
}
|
||||
@ -6004,7 +6019,9 @@ textarea.form-control-lg {
|
||||
}
|
||||
.offcanvas-header .btn-close {
|
||||
padding: 0.5rem 0.5rem;
|
||||
margin: -0.5rem auto -0.5rem -0.5rem;
|
||||
margin-top: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.offcanvas-title {
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap.rtl.css.map
vendored
2
docs/5.0/dist/css/bootstrap.rtl.css.map
vendored
File diff suppressed because one or more lines are too long
4
docs/5.0/dist/css/bootstrap.rtl.min.css
vendored
4
docs/5.0/dist/css/bootstrap.rtl.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap.rtl.min.css.map
vendored
2
docs/5.0/dist/css/bootstrap.rtl.min.css.map
vendored
File diff suppressed because one or more lines are too long
705
docs/5.0/dist/js/bootstrap.bundle.js
vendored
705
docs/5.0/dist/js/bootstrap.bundle.js
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap v5.0.1 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.2 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/selector-engine.js
|
||||
* Bootstrap (v5.0.2): dom/selector-engine.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -82,7 +82,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/index.js
|
||||
* Bootstrap (v5.0.2): util/index.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -204,24 +204,6 @@
|
||||
return null;
|
||||
};
|
||||
|
||||
const emulateTransitionEnd = (element, duration) => {
|
||||
let called = false;
|
||||
const durationPadding = 5;
|
||||
const emulatedDuration = duration + durationPadding;
|
||||
|
||||
function listener() {
|
||||
called = true;
|
||||
element.removeEventListener(TRANSITION_END, listener);
|
||||
}
|
||||
|
||||
element.addEventListener(TRANSITION_END, listener);
|
||||
setTimeout(() => {
|
||||
if (!called) {
|
||||
triggerTransitionEnd(element);
|
||||
}
|
||||
}, emulatedDuration);
|
||||
};
|
||||
|
||||
const typeCheckConfig = (componentName, config, configTypes) => {
|
||||
Object.keys(configTypes).forEach(property => {
|
||||
const expectedTypes = configTypes[property];
|
||||
@ -235,17 +217,11 @@
|
||||
};
|
||||
|
||||
const isVisible = element => {
|
||||
if (!element) {
|
||||
if (!isElement$1(element) || element.getClientRects().length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (element.style && element.parentNode && element.parentNode.style) {
|
||||
const elementStyle = getComputedStyle(element);
|
||||
const parentNodeStyle = getComputedStyle(element.parentNode);
|
||||
return elementStyle.display !== 'none' && parentNodeStyle.display !== 'none' && elementStyle.visibility !== 'hidden';
|
||||
}
|
||||
|
||||
return false;
|
||||
return getComputedStyle(element).getPropertyValue('visibility') === 'visible';
|
||||
};
|
||||
|
||||
const isDisabled = element => {
|
||||
@ -303,9 +279,18 @@
|
||||
return null;
|
||||
};
|
||||
|
||||
const DOMContentLoadedCallbacks = [];
|
||||
|
||||
const onDOMContentLoaded = callback => {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', callback);
|
||||
// add listener on the first call when the document is in loading state
|
||||
if (!DOMContentLoadedCallbacks.length) {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
DOMContentLoadedCallbacks.forEach(callback => callback());
|
||||
});
|
||||
}
|
||||
|
||||
DOMContentLoadedCallbacks.push(callback);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -338,63 +323,66 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/data.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const elementMap = new Map();
|
||||
var Data = {
|
||||
set(element, key, instance) {
|
||||
if (!elementMap.has(element)) {
|
||||
elementMap.set(element, new Map());
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element); // make it clear we only want one instance per element
|
||||
// can be removed later when multiple key/instances are fine to be used
|
||||
|
||||
if (!instanceMap.has(key) && instanceMap.size !== 0) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
instanceMap.set(key, instance);
|
||||
},
|
||||
|
||||
get(element, key) {
|
||||
if (elementMap.has(element)) {
|
||||
return elementMap.get(element).get(key) || null;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
remove(element, key) {
|
||||
if (!elementMap.has(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element);
|
||||
instanceMap.delete(key); // free up element references if there are no instances left for an element
|
||||
|
||||
if (instanceMap.size === 0) {
|
||||
elementMap.delete(element);
|
||||
}
|
||||
const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
|
||||
if (!waitForTransition) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
const durationPadding = 5;
|
||||
const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding;
|
||||
let called = false;
|
||||
|
||||
const handler = ({
|
||||
target
|
||||
}) => {
|
||||
if (target !== transitionElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
called = true;
|
||||
transitionElement.removeEventListener(TRANSITION_END, handler);
|
||||
execute(callback);
|
||||
};
|
||||
|
||||
transitionElement.addEventListener(TRANSITION_END, handler);
|
||||
setTimeout(() => {
|
||||
if (!called) {
|
||||
triggerTransitionEnd(transitionElement);
|
||||
}
|
||||
}, emulatedDuration);
|
||||
};
|
||||
/**
|
||||
* Return the previous/next element of a list.
|
||||
*
|
||||
* @param {array} list The list of elements
|
||||
* @param activeElement The active element
|
||||
* @param shouldGetNext Choose to get next or previous element
|
||||
* @param isCycleAllowed
|
||||
* @return {Element|elem} The proper element
|
||||
*/
|
||||
|
||||
|
||||
const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed) => {
|
||||
let index = list.indexOf(activeElement); // if the element does not exist in the list return an element depending on the direction and if cycle is allowed
|
||||
|
||||
if (index === -1) {
|
||||
return list[!shouldGetNext && isCycleAllowed ? list.length - 1 : 0];
|
||||
}
|
||||
|
||||
const listLength = list.length;
|
||||
index += shouldGetNext ? 1 : -1;
|
||||
|
||||
if (isCycleAllowed) {
|
||||
index = (index + listLength) % listLength;
|
||||
}
|
||||
|
||||
return list[Math.max(0, Math.min(index, listLength - 1))];
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/event-handler.js
|
||||
* Bootstrap (v5.0.2): dom/event-handler.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -683,7 +671,61 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): base-component.js
|
||||
* Bootstrap (v5.0.2): dom/data.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const elementMap = new Map();
|
||||
var Data = {
|
||||
set(element, key, instance) {
|
||||
if (!elementMap.has(element)) {
|
||||
elementMap.set(element, new Map());
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element); // make it clear we only want one instance per element
|
||||
// can be removed later when multiple key/instances are fine to be used
|
||||
|
||||
if (!instanceMap.has(key) && instanceMap.size !== 0) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
instanceMap.set(key, instance);
|
||||
},
|
||||
|
||||
get(element, key) {
|
||||
if (elementMap.has(element)) {
|
||||
return elementMap.get(element).get(key) || null;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
remove(element, key) {
|
||||
if (!elementMap.has(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element);
|
||||
instanceMap.delete(key); // free up element references if there are no instances left for an element
|
||||
|
||||
if (instanceMap.size === 0) {
|
||||
elementMap.delete(element);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.2): base-component.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -693,7 +735,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const VERSION = '5.0.1';
|
||||
const VERSION = '5.0.2';
|
||||
|
||||
class BaseComponent {
|
||||
constructor(element) {
|
||||
@ -716,14 +758,7 @@
|
||||
}
|
||||
|
||||
_queueCallback(callback, element, isAnimated = true) {
|
||||
if (!isAnimated) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
const transitionDuration = getTransitionDurationFromElement(element);
|
||||
EventHandler.one(element, 'transitionend', () => execute(callback));
|
||||
emulateTransitionEnd(element, transitionDuration);
|
||||
executeAfterTransition(callback, element, isAnimated);
|
||||
}
|
||||
/** Static */
|
||||
|
||||
@ -732,6 +767,10 @@
|
||||
return Data.get(element, this.DATA_KEY);
|
||||
}
|
||||
|
||||
static getOrCreateInstance(element, config = {}) {
|
||||
return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null);
|
||||
}
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION;
|
||||
}
|
||||
@ -752,7 +791,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): alert.js
|
||||
* Bootstrap (v5.0.2): alert.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -815,21 +854,14 @@
|
||||
}
|
||||
|
||||
_destroyElement(element) {
|
||||
if (element.parentNode) {
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
|
||||
element.remove();
|
||||
EventHandler.trigger(element, EVENT_CLOSED);
|
||||
} // Static
|
||||
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$b);
|
||||
|
||||
if (!data) {
|
||||
data = new Alert(this);
|
||||
}
|
||||
const data = Alert.getOrCreateInstance(this);
|
||||
|
||||
if (config === 'close') {
|
||||
data[config](this);
|
||||
@ -867,7 +899,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): button.js
|
||||
* Bootstrap (v5.0.2): button.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -905,11 +937,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$a);
|
||||
|
||||
if (!data) {
|
||||
data = new Button(this);
|
||||
}
|
||||
const data = Button.getOrCreateInstance(this);
|
||||
|
||||
if (config === 'toggle') {
|
||||
data[config]();
|
||||
@ -928,12 +956,7 @@
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API$6, SELECTOR_DATA_TOGGLE$5, event => {
|
||||
event.preventDefault();
|
||||
const button = event.target.closest(SELECTOR_DATA_TOGGLE$5);
|
||||
let data = Data.get(button, DATA_KEY$a);
|
||||
|
||||
if (!data) {
|
||||
data = new Button(button);
|
||||
}
|
||||
|
||||
const data = Button.getOrCreateInstance(button);
|
||||
data.toggle();
|
||||
});
|
||||
/**
|
||||
@ -947,7 +970,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/manipulator.js
|
||||
* Bootstrap (v5.0.2): dom/manipulator.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1021,7 +1044,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): carousel.js
|
||||
* Bootstrap (v5.0.2): carousel.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1060,6 +1083,10 @@
|
||||
const ORDER_PREV = 'prev';
|
||||
const DIRECTION_LEFT = 'left';
|
||||
const DIRECTION_RIGHT = 'right';
|
||||
const KEY_TO_DIRECTION = {
|
||||
[ARROW_LEFT_KEY]: DIRECTION_RIGHT,
|
||||
[ARROW_RIGHT_KEY]: DIRECTION_LEFT
|
||||
};
|
||||
const EVENT_SLIDE = `slide${EVENT_KEY$9}`;
|
||||
const EVENT_SLID = `slid${EVENT_KEY$9}`;
|
||||
const EVENT_KEYDOWN = `keydown${EVENT_KEY$9}`;
|
||||
@ -1128,9 +1155,7 @@
|
||||
|
||||
|
||||
next() {
|
||||
if (!this._isSliding) {
|
||||
this._slide(ORDER_NEXT);
|
||||
}
|
||||
this._slide(ORDER_NEXT);
|
||||
}
|
||||
|
||||
nextWhenVisible() {
|
||||
@ -1142,9 +1167,7 @@
|
||||
}
|
||||
|
||||
prev() {
|
||||
if (!this._isSliding) {
|
||||
this._slide(ORDER_PREV);
|
||||
}
|
||||
this._slide(ORDER_PREV);
|
||||
}
|
||||
|
||||
pause(event) {
|
||||
@ -1206,7 +1229,8 @@
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$9,
|
||||
...config
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
typeCheckConfig(NAME$a, config, DefaultType$9);
|
||||
return config;
|
||||
@ -1304,14 +1328,12 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === ARROW_LEFT_KEY) {
|
||||
const direction = KEY_TO_DIRECTION[event.key];
|
||||
|
||||
if (direction) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_RIGHT);
|
||||
} else if (event.key === ARROW_RIGHT_KEY) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_LEFT);
|
||||
this._slide(direction);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1322,20 +1344,7 @@
|
||||
|
||||
_getItemByOrder(order, activeElement) {
|
||||
const isNext = order === ORDER_NEXT;
|
||||
const isPrev = order === ORDER_PREV;
|
||||
|
||||
const activeIndex = this._getItemIndex(activeElement);
|
||||
|
||||
const lastItemIndex = this._items.length - 1;
|
||||
const isGoingToWrap = isPrev && activeIndex === 0 || isNext && activeIndex === lastItemIndex;
|
||||
|
||||
if (isGoingToWrap && !this._config.wrap) {
|
||||
return activeElement;
|
||||
}
|
||||
|
||||
const delta = isPrev ? -1 : 1;
|
||||
const itemIndex = (activeIndex + delta) % this._items.length;
|
||||
return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex];
|
||||
return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap);
|
||||
}
|
||||
|
||||
_triggerSlideEvent(relatedTarget, eventDirectionName) {
|
||||
@ -1408,6 +1417,10 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._isSliding) {
|
||||
return;
|
||||
}
|
||||
|
||||
const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);
|
||||
|
||||
if (slideEvent.defaultPrevented) {
|
||||
@ -1491,10 +1504,10 @@
|
||||
|
||||
|
||||
static carouselInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$9);
|
||||
let _config = { ...Default$9,
|
||||
...Manipulator.getDataAttributes(element)
|
||||
};
|
||||
const data = Carousel.getOrCreateInstance(element, config);
|
||||
let {
|
||||
_config
|
||||
} = data;
|
||||
|
||||
if (typeof config === 'object') {
|
||||
_config = { ..._config,
|
||||
@ -1504,10 +1517,6 @@
|
||||
|
||||
const action = typeof config === 'string' ? config : _config.slide;
|
||||
|
||||
if (!data) {
|
||||
data = new Carousel(element, _config);
|
||||
}
|
||||
|
||||
if (typeof config === 'number') {
|
||||
data.to(config);
|
||||
} else if (typeof action === 'string') {
|
||||
@ -1547,7 +1556,7 @@
|
||||
Carousel.carouselInterface(target, config);
|
||||
|
||||
if (slideIndex) {
|
||||
Data.get(target, DATA_KEY$9).to(slideIndex);
|
||||
Carousel.getInstance(target).to(slideIndex);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
@ -1566,7 +1575,7 @@
|
||||
const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE);
|
||||
|
||||
for (let i = 0, len = carousels.length; i < len; i++) {
|
||||
Carousel.carouselInterface(carousels[i], Data.get(carousels[i], DATA_KEY$9));
|
||||
Carousel.carouselInterface(carousels[i], Carousel.getInstance(carousels[i]));
|
||||
}
|
||||
});
|
||||
/**
|
||||
@ -1580,7 +1589,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): collapse.js
|
||||
* Bootstrap (v5.0.2): collapse.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1696,7 +1705,7 @@
|
||||
|
||||
if (actives) {
|
||||
const tempActiveData = actives.find(elem => container !== elem);
|
||||
activesData = tempActiveData ? Data.get(tempActiveData, DATA_KEY$8) : null;
|
||||
activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null;
|
||||
|
||||
if (activesData && activesData._isTransitioning) {
|
||||
return;
|
||||
@ -1859,7 +1868,7 @@
|
||||
|
||||
|
||||
static collapseInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$8);
|
||||
let data = Collapse.getInstance(element);
|
||||
const _config = { ...Default$8,
|
||||
...Manipulator.getDataAttributes(element),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
@ -1906,7 +1915,7 @@
|
||||
const selector = getSelectorFromElement(this);
|
||||
const selectorElements = SelectorEngine.find(selector);
|
||||
selectorElements.forEach(element => {
|
||||
const data = Data.get(element, DATA_KEY$8);
|
||||
const data = Collapse.getInstance(element);
|
||||
let config;
|
||||
|
||||
if (data) {
|
||||
@ -3083,7 +3092,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
function hide$1(_ref) {
|
||||
function hide(_ref) {
|
||||
var state = _ref.state,
|
||||
name = _ref.name;
|
||||
var referenceRect = state.rects.reference;
|
||||
@ -3112,12 +3121,12 @@
|
||||
} // eslint-disable-next-line import/no-unused-modules
|
||||
|
||||
|
||||
var hide$2 = {
|
||||
var hide$1 = {
|
||||
name: 'hide',
|
||||
enabled: true,
|
||||
phase: 'main',
|
||||
requiresIfExists: ['preventOverflow'],
|
||||
fn: hide$1
|
||||
fn: hide
|
||||
};
|
||||
|
||||
function distanceAndSkiddingToXY(placement, rects, offset) {
|
||||
@ -3640,7 +3649,7 @@
|
||||
defaultModifiers: defaultModifiers$1
|
||||
}); // eslint-disable-next-line import/no-unused-modules
|
||||
|
||||
var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$2];
|
||||
var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
|
||||
var createPopper = /*#__PURE__*/popperGenerator({
|
||||
defaultModifiers: defaultModifiers
|
||||
}); // eslint-disable-next-line import/no-unused-modules
|
||||
@ -3681,7 +3690,7 @@
|
||||
computeStyles: computeStyles$1,
|
||||
eventListeners: eventListeners,
|
||||
flip: flip$1,
|
||||
hide: hide$2,
|
||||
hide: hide$1,
|
||||
offset: offset$1,
|
||||
popperOffsets: popperOffsets$1,
|
||||
preventOverflow: preventOverflow$1
|
||||
@ -3689,7 +3698,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dropdown.js
|
||||
* Bootstrap (v5.0.2): dropdown.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4009,38 +4018,24 @@
|
||||
};
|
||||
}
|
||||
|
||||
_selectMenuItem(event) {
|
||||
_selectMenuItem({
|
||||
key,
|
||||
target
|
||||
}) {
|
||||
const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(isVisible);
|
||||
|
||||
if (!items.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
let index = items.indexOf(event.target); // Up
|
||||
|
||||
if (event.key === ARROW_UP_KEY && index > 0) {
|
||||
index--;
|
||||
} // Down
|
||||
} // if target isn't included in items (e.g. when expanding the dropdown)
|
||||
// allow cycling to get the last item in case key equals ARROW_UP_KEY
|
||||
|
||||
|
||||
if (event.key === ARROW_DOWN_KEY && index < items.length - 1) {
|
||||
index++;
|
||||
} // index is -1 if the first keydown is an ArrowUp
|
||||
|
||||
|
||||
index = index === -1 ? 0 : index;
|
||||
items[index].focus();
|
||||
getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus();
|
||||
} // Static
|
||||
|
||||
|
||||
static dropdownInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$7);
|
||||
|
||||
const _config = typeof config === 'object' ? config : null;
|
||||
|
||||
if (!data) {
|
||||
data = new Dropdown(element, _config);
|
||||
}
|
||||
const data = Dropdown.getOrCreateInstance(element, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -4065,7 +4060,7 @@
|
||||
const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE$3);
|
||||
|
||||
for (let i = 0, len = toggles.length; i < len; i++) {
|
||||
const context = Data.get(toggles[i], DATA_KEY$7);
|
||||
const context = Dropdown.getInstance(toggles[i]);
|
||||
|
||||
if (!context || context._config.autoClose === false) {
|
||||
continue;
|
||||
@ -4138,17 +4133,19 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
|
||||
getToggleButton().click();
|
||||
if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) {
|
||||
if (!isActive) {
|
||||
getToggleButton().click();
|
||||
}
|
||||
|
||||
Dropdown.getInstance(getToggleButton())._selectMenuItem(event);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isActive || event.key === SPACE_KEY) {
|
||||
Dropdown.clearMenus();
|
||||
return;
|
||||
}
|
||||
|
||||
Dropdown.getInstance(getToggleButton())._selectMenuItem(event);
|
||||
}
|
||||
|
||||
}
|
||||
@ -4178,81 +4175,111 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/scrollBar.js
|
||||
* Bootstrap (v5.0.2): util/scrollBar.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top';
|
||||
const SELECTOR_STICKY_CONTENT = '.sticky-top';
|
||||
|
||||
const getWidth = () => {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
|
||||
const documentWidth = document.documentElement.clientWidth;
|
||||
return Math.abs(window.innerWidth - documentWidth);
|
||||
};
|
||||
|
||||
const hide = (width = getWidth()) => {
|
||||
_disableOverFlow(); // give padding to element to balances the hidden scrollbar width
|
||||
|
||||
|
||||
_setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements, to keep shown fullwidth
|
||||
|
||||
|
||||
_setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
|
||||
_setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
|
||||
};
|
||||
|
||||
const _disableOverFlow = () => {
|
||||
const actualValue = document.body.style.overflow;
|
||||
|
||||
if (actualValue) {
|
||||
Manipulator.setDataAttribute(document.body, 'overflow', actualValue);
|
||||
class ScrollBarHelper {
|
||||
constructor() {
|
||||
this._element = document.body;
|
||||
}
|
||||
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
getWidth() {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
|
||||
const documentWidth = document.documentElement.clientWidth;
|
||||
return Math.abs(window.innerWidth - documentWidth);
|
||||
}
|
||||
|
||||
const _setElementAttributes = (selector, styleProp, callback) => {
|
||||
const scrollbarWidth = getWidth();
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
hide() {
|
||||
const width = this.getWidth();
|
||||
|
||||
this._disableOverFlow(); // give padding to element to balance the hidden scrollbar width
|
||||
|
||||
|
||||
this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
|
||||
|
||||
|
||||
this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
|
||||
this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
|
||||
}
|
||||
|
||||
_disableOverFlow() {
|
||||
this._saveInitialAttribute(this._element, 'overflow');
|
||||
|
||||
this._element.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
_setElementAttributes(selector, styleProp, callback) {
|
||||
const scrollbarWidth = this.getWidth();
|
||||
|
||||
const manipulationCallBack = element => {
|
||||
if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._saveInitialAttribute(element, styleProp);
|
||||
|
||||
const calculatedValue = window.getComputedStyle(element)[styleProp];
|
||||
element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
|
||||
};
|
||||
|
||||
this._applyManipulationCallback(selector, manipulationCallBack);
|
||||
}
|
||||
|
||||
reset() {
|
||||
this._resetElementAttributes(this._element, 'overflow');
|
||||
|
||||
this._resetElementAttributes(this._element, 'paddingRight');
|
||||
|
||||
this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
||||
|
||||
this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
||||
}
|
||||
|
||||
_saveInitialAttribute(element, styleProp) {
|
||||
const actualValue = element.style[styleProp];
|
||||
const calculatedValue = window.getComputedStyle(element)[styleProp];
|
||||
Manipulator.setDataAttribute(element, styleProp, actualValue);
|
||||
element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
|
||||
});
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
_resetElementAttributes('body', 'overflow');
|
||||
|
||||
_resetElementAttributes('body', 'paddingRight');
|
||||
|
||||
_resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
||||
|
||||
_resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
||||
};
|
||||
|
||||
const _resetElementAttributes = (selector, styleProp) => {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined') {
|
||||
element.style.removeProperty(styleProp);
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
if (actualValue) {
|
||||
Manipulator.setDataAttribute(element, styleProp, actualValue);
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
_resetElementAttributes(selector, styleProp) {
|
||||
const manipulationCallBack = element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined') {
|
||||
element.style.removeProperty(styleProp);
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
}
|
||||
};
|
||||
|
||||
this._applyManipulationCallback(selector, manipulationCallBack);
|
||||
}
|
||||
|
||||
_applyManipulationCallback(selector, callBack) {
|
||||
if (isElement$1(selector)) {
|
||||
callBack(selector);
|
||||
} else {
|
||||
SelectorEngine.find(selector, this._element).forEach(callBack);
|
||||
}
|
||||
}
|
||||
|
||||
isOverflowing() {
|
||||
return this.getWidth() > 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/backdrop.js
|
||||
* Bootstrap (v5.0.2): util/backdrop.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4260,14 +4287,14 @@
|
||||
isVisible: true,
|
||||
// if false, we use the backdrop helper without adding any element to the dom
|
||||
isAnimated: false,
|
||||
rootElement: document.body,
|
||||
rootElement: 'body',
|
||||
// give the choice to place backdrop under different elements
|
||||
clickCallback: null
|
||||
};
|
||||
const DefaultType$6 = {
|
||||
isVisible: 'boolean',
|
||||
isAnimated: 'boolean',
|
||||
rootElement: 'element',
|
||||
rootElement: '(element|string)',
|
||||
clickCallback: '(function|null)'
|
||||
};
|
||||
const NAME$7 = 'backdrop';
|
||||
@ -4335,8 +4362,9 @@
|
||||
_getConfig(config) {
|
||||
config = { ...Default$6,
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
config.rootElement = config.rootElement || document.body;
|
||||
}; // use getElement() with the default "body" to get a fresh Element on each instantiation
|
||||
|
||||
config.rootElement = getElement(config.rootElement);
|
||||
typeCheckConfig(NAME$7, config, DefaultType$6);
|
||||
return config;
|
||||
}
|
||||
@ -4361,27 +4389,20 @@
|
||||
|
||||
EventHandler.off(this._element, EVENT_MOUSEDOWN);
|
||||
|
||||
this._getElement().parentNode.removeChild(this._element);
|
||||
this._element.remove();
|
||||
|
||||
this._isAppended = false;
|
||||
}
|
||||
|
||||
_emulateAnimation(callback) {
|
||||
if (!this._config.isAnimated) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
const backdropTransitionDuration = getTransitionDurationFromElement(this._getElement());
|
||||
EventHandler.one(this._getElement(), 'transitionend', () => execute(callback));
|
||||
emulateTransitionEnd(this._getElement(), backdropTransitionDuration);
|
||||
executeAfterTransition(callback, this._getElement(), this._config.isAnimated);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): modal.js
|
||||
* Bootstrap (v5.0.2): modal.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4441,6 +4462,7 @@
|
||||
this._isShown = false;
|
||||
this._ignoreBackdropClick = false;
|
||||
this._isTransitioning = false;
|
||||
this._scrollBar = new ScrollBarHelper();
|
||||
} // Getters
|
||||
|
||||
|
||||
@ -4462,20 +4484,22 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._isAnimated()) {
|
||||
this._isTransitioning = true;
|
||||
}
|
||||
|
||||
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW$3, {
|
||||
relatedTarget
|
||||
});
|
||||
|
||||
if (this._isShown || showEvent.defaultPrevented) {
|
||||
if (showEvent.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isShown = true;
|
||||
hide();
|
||||
|
||||
if (this._isAnimated()) {
|
||||
this._isTransitioning = true;
|
||||
}
|
||||
|
||||
this._scrollBar.hide();
|
||||
|
||||
document.body.classList.add(CLASS_NAME_OPEN);
|
||||
|
||||
this._adjustDialog();
|
||||
@ -4497,7 +4521,7 @@
|
||||
}
|
||||
|
||||
hide(event) {
|
||||
if (event) {
|
||||
if (event && ['A', 'AREA'].includes(event.target.tagName)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@ -4564,7 +4588,7 @@
|
||||
_getConfig(config) {
|
||||
config = { ...Default$5,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...config
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
typeCheckConfig(NAME$6, config, DefaultType$5);
|
||||
return config;
|
||||
@ -4667,7 +4691,8 @@
|
||||
|
||||
this._resetAdjustments();
|
||||
|
||||
reset();
|
||||
this._scrollBar.reset();
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$3);
|
||||
});
|
||||
}
|
||||
@ -4704,27 +4729,32 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
const {
|
||||
classList,
|
||||
scrollHeight,
|
||||
style
|
||||
} = this._element;
|
||||
const isModalOverflowing = scrollHeight > document.documentElement.clientHeight; // return if the following background transition hasn't yet completed
|
||||
|
||||
if (!isModalOverflowing) {
|
||||
this._element.style.overflowY = 'hidden';
|
||||
if (!isModalOverflowing && style.overflowY === 'hidden' || classList.contains(CLASS_NAME_STATIC)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_STATIC);
|
||||
if (!isModalOverflowing) {
|
||||
style.overflowY = 'hidden';
|
||||
}
|
||||
|
||||
const modalTransitionDuration = getTransitionDurationFromElement(this._dialog);
|
||||
EventHandler.off(this._element, 'transitionend');
|
||||
EventHandler.one(this._element, 'transitionend', () => {
|
||||
this._element.classList.remove(CLASS_NAME_STATIC);
|
||||
classList.add(CLASS_NAME_STATIC);
|
||||
|
||||
this._queueCallback(() => {
|
||||
classList.remove(CLASS_NAME_STATIC);
|
||||
|
||||
if (!isModalOverflowing) {
|
||||
EventHandler.one(this._element, 'transitionend', () => {
|
||||
this._element.style.overflowY = '';
|
||||
});
|
||||
emulateTransitionEnd(this._element, modalTransitionDuration);
|
||||
this._queueCallback(() => {
|
||||
style.overflowY = '';
|
||||
}, this._dialog);
|
||||
}
|
||||
});
|
||||
emulateTransitionEnd(this._element, modalTransitionDuration);
|
||||
}, this._dialog);
|
||||
|
||||
this._element.focus();
|
||||
} // ----------------------------------------------------------------------
|
||||
@ -4734,7 +4764,9 @@
|
||||
|
||||
_adjustDialog() {
|
||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
const scrollbarWidth = getWidth();
|
||||
|
||||
const scrollbarWidth = this._scrollBar.getWidth();
|
||||
|
||||
const isBodyOverflowing = scrollbarWidth > 0;
|
||||
|
||||
if (!isBodyOverflowing && isModalOverflowing && !isRTL() || isBodyOverflowing && !isModalOverflowing && isRTL()) {
|
||||
@ -4754,7 +4786,7 @@
|
||||
|
||||
static jQueryInterface(config, relatedTarget) {
|
||||
return this.each(function () {
|
||||
const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {});
|
||||
const data = Modal.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
@ -4795,7 +4827,7 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
const data = Modal.getInstance(target) || new Modal(target);
|
||||
const data = Modal.getOrCreateInstance(target);
|
||||
data.toggle(this);
|
||||
});
|
||||
/**
|
||||
@ -4809,7 +4841,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): offcanvas.js
|
||||
* Bootstrap (v5.0.2): offcanvas.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4896,7 +4928,7 @@
|
||||
this._backdrop.show();
|
||||
|
||||
if (!this._config.scroll) {
|
||||
hide();
|
||||
new ScrollBarHelper().hide();
|
||||
|
||||
this._enforceFocusOnElement(this._element);
|
||||
}
|
||||
@ -4949,7 +4981,7 @@
|
||||
this._element.style.visibility = 'hidden';
|
||||
|
||||
if (!this._config.scroll) {
|
||||
reset();
|
||||
new ScrollBarHelper().reset();
|
||||
}
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$2);
|
||||
@ -5007,7 +5039,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = Data.get(this, DATA_KEY$5) || new Offcanvas(this, typeof config === 'object' ? config : {});
|
||||
const data = Offcanvas.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
@ -5053,12 +5085,10 @@
|
||||
Offcanvas.getInstance(allReadyOpen).hide();
|
||||
}
|
||||
|
||||
const data = Data.get(target, DATA_KEY$5) || new Offcanvas(target);
|
||||
const data = Offcanvas.getOrCreateInstance(target);
|
||||
data.toggle(this);
|
||||
});
|
||||
EventHandler.on(window, EVENT_LOAD_DATA_API$1, () => {
|
||||
SelectorEngine.find(OPEN_SELECTOR).forEach(el => (Data.get(el, DATA_KEY$5) || new Offcanvas(el)).show());
|
||||
});
|
||||
EventHandler.on(window, EVENT_LOAD_DATA_API$1, () => SelectorEngine.find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show()));
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -5069,7 +5099,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/sanitizer.js
|
||||
* Bootstrap (v5.0.2): util/sanitizer.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -5164,7 +5194,7 @@
|
||||
const elName = el.nodeName.toLowerCase();
|
||||
|
||||
if (!allowlistKeys.includes(elName)) {
|
||||
el.parentNode.removeChild(el);
|
||||
el.remove();
|
||||
continue;
|
||||
}
|
||||
|
||||
@ -5182,7 +5212,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): tooltip.js
|
||||
* Bootstrap (v5.0.2): tooltip.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -5351,8 +5381,8 @@
|
||||
clearTimeout(this._timeout);
|
||||
EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler);
|
||||
|
||||
if (this.tip && this.tip.parentNode) {
|
||||
this.tip.parentNode.removeChild(this.tip);
|
||||
if (this.tip) {
|
||||
this.tip.remove();
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
@ -5457,8 +5487,8 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._hoverState !== HOVER_STATE_SHOW && tip.parentNode) {
|
||||
tip.parentNode.removeChild(tip);
|
||||
if (this._hoverState !== HOVER_STATE_SHOW) {
|
||||
tip.remove();
|
||||
}
|
||||
|
||||
this._cleanTipClass();
|
||||
@ -5845,17 +5875,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$4);
|
||||
|
||||
const _config = typeof config === 'object' && config;
|
||||
|
||||
if (!data && /dispose|hide/.test(config)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Tooltip(this, _config);
|
||||
}
|
||||
const data = Tooltip.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -5880,7 +5900,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): popover.js
|
||||
* Bootstrap (v5.0.2): popover.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -5950,6 +5970,24 @@
|
||||
return this.getTitle() || this._getContent();
|
||||
}
|
||||
|
||||
getTipElement() {
|
||||
if (this.tip) {
|
||||
return this.tip;
|
||||
}
|
||||
|
||||
this.tip = super.getTipElement();
|
||||
|
||||
if (!this.getTitle()) {
|
||||
SelectorEngine.findOne(SELECTOR_TITLE, this.tip).remove();
|
||||
}
|
||||
|
||||
if (!this._getContent()) {
|
||||
SelectorEngine.findOne(SELECTOR_CONTENT, this.tip).remove();
|
||||
}
|
||||
|
||||
return this.tip;
|
||||
}
|
||||
|
||||
setContent() {
|
||||
const tip = this.getTipElement(); // we use append for html objects to maintain js events
|
||||
|
||||
@ -5986,18 +6024,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$3);
|
||||
|
||||
const _config = typeof config === 'object' ? config : null;
|
||||
|
||||
if (!data && /dispose|hide/.test(config)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Popover(this, _config);
|
||||
Data.set(this, DATA_KEY$3, data);
|
||||
}
|
||||
const data = Popover.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -6022,7 +6049,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): scrollspy.js
|
||||
* Bootstrap (v5.0.2): scrollspy.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -6237,7 +6264,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = ScrollSpy.getInstance(this) || new ScrollSpy(this, typeof config === 'object' ? config : {});
|
||||
const data = ScrollSpy.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
@ -6273,7 +6300,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): tab.js
|
||||
* Bootstrap (v5.0.2): tab.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -6428,7 +6455,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = Data.get(this, DATA_KEY$1) || new Tab(this);
|
||||
const data = Tab.getOrCreateInstance(this);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -6457,7 +6484,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const data = Data.get(this, DATA_KEY$1) || new Tab(this);
|
||||
const data = Tab.getOrCreateInstance(this);
|
||||
data.show();
|
||||
});
|
||||
/**
|
||||
@ -6471,7 +6498,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): toast.js
|
||||
* Bootstrap (v5.0.2): toast.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -6671,13 +6698,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY);
|
||||
|
||||
const _config = typeof config === 'object' && config;
|
||||
|
||||
if (!data) {
|
||||
data = new Toast(this, _config);
|
||||
}
|
||||
const data = Toast.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -6702,7 +6723,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): index.umd.js
|
||||
* Bootstrap (v5.0.2): index.umd.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
2
docs/5.0/dist/js/bootstrap.bundle.js.map
vendored
2
docs/5.0/dist/js/bootstrap.bundle.js.map
vendored
File diff suppressed because one or more lines are too long
4
docs/5.0/dist/js/bootstrap.bundle.min.js
vendored
4
docs/5.0/dist/js/bootstrap.bundle.min.js
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/js/bootstrap.bundle.min.js.map
vendored
2
docs/5.0/dist/js/bootstrap.bundle.min.js.map
vendored
File diff suppressed because one or more lines are too long
693
docs/5.0/dist/js/bootstrap.esm.js
vendored
693
docs/5.0/dist/js/bootstrap.esm.js
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap v5.0.1 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.2 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
@ -7,7 +7,7 @@ import * as Popper from '@popperjs/core';
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/selector-engine.js
|
||||
* Bootstrap (v5.0.2): dom/selector-engine.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -78,7 +78,7 @@ const SelectorEngine = {
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/index.js
|
||||
* Bootstrap (v5.0.2): util/index.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -200,24 +200,6 @@ const getElement = obj => {
|
||||
return null;
|
||||
};
|
||||
|
||||
const emulateTransitionEnd = (element, duration) => {
|
||||
let called = false;
|
||||
const durationPadding = 5;
|
||||
const emulatedDuration = duration + durationPadding;
|
||||
|
||||
function listener() {
|
||||
called = true;
|
||||
element.removeEventListener(TRANSITION_END, listener);
|
||||
}
|
||||
|
||||
element.addEventListener(TRANSITION_END, listener);
|
||||
setTimeout(() => {
|
||||
if (!called) {
|
||||
triggerTransitionEnd(element);
|
||||
}
|
||||
}, emulatedDuration);
|
||||
};
|
||||
|
||||
const typeCheckConfig = (componentName, config, configTypes) => {
|
||||
Object.keys(configTypes).forEach(property => {
|
||||
const expectedTypes = configTypes[property];
|
||||
@ -231,17 +213,11 @@ const typeCheckConfig = (componentName, config, configTypes) => {
|
||||
};
|
||||
|
||||
const isVisible = element => {
|
||||
if (!element) {
|
||||
if (!isElement(element) || element.getClientRects().length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (element.style && element.parentNode && element.parentNode.style) {
|
||||
const elementStyle = getComputedStyle(element);
|
||||
const parentNodeStyle = getComputedStyle(element.parentNode);
|
||||
return elementStyle.display !== 'none' && parentNodeStyle.display !== 'none' && elementStyle.visibility !== 'hidden';
|
||||
}
|
||||
|
||||
return false;
|
||||
return getComputedStyle(element).getPropertyValue('visibility') === 'visible';
|
||||
};
|
||||
|
||||
const isDisabled = element => {
|
||||
@ -299,9 +275,18 @@ const getjQuery = () => {
|
||||
return null;
|
||||
};
|
||||
|
||||
const DOMContentLoadedCallbacks = [];
|
||||
|
||||
const onDOMContentLoaded = callback => {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', callback);
|
||||
// add listener on the first call when the document is in loading state
|
||||
if (!DOMContentLoadedCallbacks.length) {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
DOMContentLoadedCallbacks.forEach(callback => callback());
|
||||
});
|
||||
}
|
||||
|
||||
DOMContentLoadedCallbacks.push(callback);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -334,63 +319,66 @@ const execute = callback => {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/data.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const elementMap = new Map();
|
||||
var Data = {
|
||||
set(element, key, instance) {
|
||||
if (!elementMap.has(element)) {
|
||||
elementMap.set(element, new Map());
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element); // make it clear we only want one instance per element
|
||||
// can be removed later when multiple key/instances are fine to be used
|
||||
|
||||
if (!instanceMap.has(key) && instanceMap.size !== 0) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
instanceMap.set(key, instance);
|
||||
},
|
||||
|
||||
get(element, key) {
|
||||
if (elementMap.has(element)) {
|
||||
return elementMap.get(element).get(key) || null;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
remove(element, key) {
|
||||
if (!elementMap.has(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element);
|
||||
instanceMap.delete(key); // free up element references if there are no instances left for an element
|
||||
|
||||
if (instanceMap.size === 0) {
|
||||
elementMap.delete(element);
|
||||
}
|
||||
const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
|
||||
if (!waitForTransition) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
const durationPadding = 5;
|
||||
const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding;
|
||||
let called = false;
|
||||
|
||||
const handler = ({
|
||||
target
|
||||
}) => {
|
||||
if (target !== transitionElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
called = true;
|
||||
transitionElement.removeEventListener(TRANSITION_END, handler);
|
||||
execute(callback);
|
||||
};
|
||||
|
||||
transitionElement.addEventListener(TRANSITION_END, handler);
|
||||
setTimeout(() => {
|
||||
if (!called) {
|
||||
triggerTransitionEnd(transitionElement);
|
||||
}
|
||||
}, emulatedDuration);
|
||||
};
|
||||
/**
|
||||
* Return the previous/next element of a list.
|
||||
*
|
||||
* @param {array} list The list of elements
|
||||
* @param activeElement The active element
|
||||
* @param shouldGetNext Choose to get next or previous element
|
||||
* @param isCycleAllowed
|
||||
* @return {Element|elem} The proper element
|
||||
*/
|
||||
|
||||
|
||||
const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed) => {
|
||||
let index = list.indexOf(activeElement); // if the element does not exist in the list return an element depending on the direction and if cycle is allowed
|
||||
|
||||
if (index === -1) {
|
||||
return list[!shouldGetNext && isCycleAllowed ? list.length - 1 : 0];
|
||||
}
|
||||
|
||||
const listLength = list.length;
|
||||
index += shouldGetNext ? 1 : -1;
|
||||
|
||||
if (isCycleAllowed) {
|
||||
index = (index + listLength) % listLength;
|
||||
}
|
||||
|
||||
return list[Math.max(0, Math.min(index, listLength - 1))];
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/event-handler.js
|
||||
* Bootstrap (v5.0.2): dom/event-handler.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -679,7 +667,61 @@ const EventHandler = {
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): base-component.js
|
||||
* Bootstrap (v5.0.2): dom/data.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const elementMap = new Map();
|
||||
var Data = {
|
||||
set(element, key, instance) {
|
||||
if (!elementMap.has(element)) {
|
||||
elementMap.set(element, new Map());
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element); // make it clear we only want one instance per element
|
||||
// can be removed later when multiple key/instances are fine to be used
|
||||
|
||||
if (!instanceMap.has(key) && instanceMap.size !== 0) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
instanceMap.set(key, instance);
|
||||
},
|
||||
|
||||
get(element, key) {
|
||||
if (elementMap.has(element)) {
|
||||
return elementMap.get(element).get(key) || null;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
remove(element, key) {
|
||||
if (!elementMap.has(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element);
|
||||
instanceMap.delete(key); // free up element references if there are no instances left for an element
|
||||
|
||||
if (instanceMap.size === 0) {
|
||||
elementMap.delete(element);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.2): base-component.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -689,7 +731,7 @@ const EventHandler = {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const VERSION = '5.0.1';
|
||||
const VERSION = '5.0.2';
|
||||
|
||||
class BaseComponent {
|
||||
constructor(element) {
|
||||
@ -712,14 +754,7 @@ class BaseComponent {
|
||||
}
|
||||
|
||||
_queueCallback(callback, element, isAnimated = true) {
|
||||
if (!isAnimated) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
const transitionDuration = getTransitionDurationFromElement(element);
|
||||
EventHandler.one(element, 'transitionend', () => execute(callback));
|
||||
emulateTransitionEnd(element, transitionDuration);
|
||||
executeAfterTransition(callback, element, isAnimated);
|
||||
}
|
||||
/** Static */
|
||||
|
||||
@ -728,6 +763,10 @@ class BaseComponent {
|
||||
return Data.get(element, this.DATA_KEY);
|
||||
}
|
||||
|
||||
static getOrCreateInstance(element, config = {}) {
|
||||
return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null);
|
||||
}
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION;
|
||||
}
|
||||
@ -748,7 +787,7 @@ class BaseComponent {
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): alert.js
|
||||
* Bootstrap (v5.0.2): alert.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -811,21 +850,14 @@ class Alert extends BaseComponent {
|
||||
}
|
||||
|
||||
_destroyElement(element) {
|
||||
if (element.parentNode) {
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
|
||||
element.remove();
|
||||
EventHandler.trigger(element, EVENT_CLOSED);
|
||||
} // Static
|
||||
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$b);
|
||||
|
||||
if (!data) {
|
||||
data = new Alert(this);
|
||||
}
|
||||
const data = Alert.getOrCreateInstance(this);
|
||||
|
||||
if (config === 'close') {
|
||||
data[config](this);
|
||||
@ -863,7 +895,7 @@ defineJQueryPlugin(Alert);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): button.js
|
||||
* Bootstrap (v5.0.2): button.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -901,11 +933,7 @@ class Button extends BaseComponent {
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$a);
|
||||
|
||||
if (!data) {
|
||||
data = new Button(this);
|
||||
}
|
||||
const data = Button.getOrCreateInstance(this);
|
||||
|
||||
if (config === 'toggle') {
|
||||
data[config]();
|
||||
@ -924,12 +952,7 @@ class Button extends BaseComponent {
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API$6, SELECTOR_DATA_TOGGLE$5, event => {
|
||||
event.preventDefault();
|
||||
const button = event.target.closest(SELECTOR_DATA_TOGGLE$5);
|
||||
let data = Data.get(button, DATA_KEY$a);
|
||||
|
||||
if (!data) {
|
||||
data = new Button(button);
|
||||
}
|
||||
|
||||
const data = Button.getOrCreateInstance(button);
|
||||
data.toggle();
|
||||
});
|
||||
/**
|
||||
@ -943,7 +966,7 @@ defineJQueryPlugin(Button);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/manipulator.js
|
||||
* Bootstrap (v5.0.2): dom/manipulator.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1017,7 +1040,7 @@ const Manipulator = {
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): carousel.js
|
||||
* Bootstrap (v5.0.2): carousel.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1056,6 +1079,10 @@ const ORDER_NEXT = 'next';
|
||||
const ORDER_PREV = 'prev';
|
||||
const DIRECTION_LEFT = 'left';
|
||||
const DIRECTION_RIGHT = 'right';
|
||||
const KEY_TO_DIRECTION = {
|
||||
[ARROW_LEFT_KEY]: DIRECTION_RIGHT,
|
||||
[ARROW_RIGHT_KEY]: DIRECTION_LEFT
|
||||
};
|
||||
const EVENT_SLIDE = `slide${EVENT_KEY$9}`;
|
||||
const EVENT_SLID = `slid${EVENT_KEY$9}`;
|
||||
const EVENT_KEYDOWN = `keydown${EVENT_KEY$9}`;
|
||||
@ -1124,9 +1151,7 @@ class Carousel extends BaseComponent {
|
||||
|
||||
|
||||
next() {
|
||||
if (!this._isSliding) {
|
||||
this._slide(ORDER_NEXT);
|
||||
}
|
||||
this._slide(ORDER_NEXT);
|
||||
}
|
||||
|
||||
nextWhenVisible() {
|
||||
@ -1138,9 +1163,7 @@ class Carousel extends BaseComponent {
|
||||
}
|
||||
|
||||
prev() {
|
||||
if (!this._isSliding) {
|
||||
this._slide(ORDER_PREV);
|
||||
}
|
||||
this._slide(ORDER_PREV);
|
||||
}
|
||||
|
||||
pause(event) {
|
||||
@ -1202,7 +1225,8 @@ class Carousel extends BaseComponent {
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$9,
|
||||
...config
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
typeCheckConfig(NAME$a, config, DefaultType$9);
|
||||
return config;
|
||||
@ -1300,14 +1324,12 @@ class Carousel extends BaseComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === ARROW_LEFT_KEY) {
|
||||
const direction = KEY_TO_DIRECTION[event.key];
|
||||
|
||||
if (direction) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_RIGHT);
|
||||
} else if (event.key === ARROW_RIGHT_KEY) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_LEFT);
|
||||
this._slide(direction);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1318,20 +1340,7 @@ class Carousel extends BaseComponent {
|
||||
|
||||
_getItemByOrder(order, activeElement) {
|
||||
const isNext = order === ORDER_NEXT;
|
||||
const isPrev = order === ORDER_PREV;
|
||||
|
||||
const activeIndex = this._getItemIndex(activeElement);
|
||||
|
||||
const lastItemIndex = this._items.length - 1;
|
||||
const isGoingToWrap = isPrev && activeIndex === 0 || isNext && activeIndex === lastItemIndex;
|
||||
|
||||
if (isGoingToWrap && !this._config.wrap) {
|
||||
return activeElement;
|
||||
}
|
||||
|
||||
const delta = isPrev ? -1 : 1;
|
||||
const itemIndex = (activeIndex + delta) % this._items.length;
|
||||
return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex];
|
||||
return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap);
|
||||
}
|
||||
|
||||
_triggerSlideEvent(relatedTarget, eventDirectionName) {
|
||||
@ -1404,6 +1413,10 @@ class Carousel extends BaseComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._isSliding) {
|
||||
return;
|
||||
}
|
||||
|
||||
const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);
|
||||
|
||||
if (slideEvent.defaultPrevented) {
|
||||
@ -1487,10 +1500,10 @@ class Carousel extends BaseComponent {
|
||||
|
||||
|
||||
static carouselInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$9);
|
||||
let _config = { ...Default$9,
|
||||
...Manipulator.getDataAttributes(element)
|
||||
};
|
||||
const data = Carousel.getOrCreateInstance(element, config);
|
||||
let {
|
||||
_config
|
||||
} = data;
|
||||
|
||||
if (typeof config === 'object') {
|
||||
_config = { ..._config,
|
||||
@ -1500,10 +1513,6 @@ class Carousel extends BaseComponent {
|
||||
|
||||
const action = typeof config === 'string' ? config : _config.slide;
|
||||
|
||||
if (!data) {
|
||||
data = new Carousel(element, _config);
|
||||
}
|
||||
|
||||
if (typeof config === 'number') {
|
||||
data.to(config);
|
||||
} else if (typeof action === 'string') {
|
||||
@ -1543,7 +1552,7 @@ class Carousel extends BaseComponent {
|
||||
Carousel.carouselInterface(target, config);
|
||||
|
||||
if (slideIndex) {
|
||||
Data.get(target, DATA_KEY$9).to(slideIndex);
|
||||
Carousel.getInstance(target).to(slideIndex);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
@ -1562,7 +1571,7 @@ EventHandler.on(window, EVENT_LOAD_DATA_API$2, () => {
|
||||
const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE);
|
||||
|
||||
for (let i = 0, len = carousels.length; i < len; i++) {
|
||||
Carousel.carouselInterface(carousels[i], Data.get(carousels[i], DATA_KEY$9));
|
||||
Carousel.carouselInterface(carousels[i], Carousel.getInstance(carousels[i]));
|
||||
}
|
||||
});
|
||||
/**
|
||||
@ -1576,7 +1585,7 @@ defineJQueryPlugin(Carousel);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): collapse.js
|
||||
* Bootstrap (v5.0.2): collapse.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1692,7 +1701,7 @@ class Collapse extends BaseComponent {
|
||||
|
||||
if (actives) {
|
||||
const tempActiveData = actives.find(elem => container !== elem);
|
||||
activesData = tempActiveData ? Data.get(tempActiveData, DATA_KEY$8) : null;
|
||||
activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null;
|
||||
|
||||
if (activesData && activesData._isTransitioning) {
|
||||
return;
|
||||
@ -1855,7 +1864,7 @@ class Collapse extends BaseComponent {
|
||||
|
||||
|
||||
static collapseInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$8);
|
||||
let data = Collapse.getInstance(element);
|
||||
const _config = { ...Default$8,
|
||||
...Manipulator.getDataAttributes(element),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
@ -1902,7 +1911,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API$4, SELECTOR_DATA_TOGGLE$4, functi
|
||||
const selector = getSelectorFromElement(this);
|
||||
const selectorElements = SelectorEngine.find(selector);
|
||||
selectorElements.forEach(element => {
|
||||
const data = Data.get(element, DATA_KEY$8);
|
||||
const data = Collapse.getInstance(element);
|
||||
let config;
|
||||
|
||||
if (data) {
|
||||
@ -1931,7 +1940,7 @@ defineJQueryPlugin(Collapse);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dropdown.js
|
||||
* Bootstrap (v5.0.2): dropdown.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -2251,38 +2260,24 @@ class Dropdown extends BaseComponent {
|
||||
};
|
||||
}
|
||||
|
||||
_selectMenuItem(event) {
|
||||
_selectMenuItem({
|
||||
key,
|
||||
target
|
||||
}) {
|
||||
const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(isVisible);
|
||||
|
||||
if (!items.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
let index = items.indexOf(event.target); // Up
|
||||
|
||||
if (event.key === ARROW_UP_KEY && index > 0) {
|
||||
index--;
|
||||
} // Down
|
||||
} // if target isn't included in items (e.g. when expanding the dropdown)
|
||||
// allow cycling to get the last item in case key equals ARROW_UP_KEY
|
||||
|
||||
|
||||
if (event.key === ARROW_DOWN_KEY && index < items.length - 1) {
|
||||
index++;
|
||||
} // index is -1 if the first keydown is an ArrowUp
|
||||
|
||||
|
||||
index = index === -1 ? 0 : index;
|
||||
items[index].focus();
|
||||
getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus();
|
||||
} // Static
|
||||
|
||||
|
||||
static dropdownInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$7);
|
||||
|
||||
const _config = typeof config === 'object' ? config : null;
|
||||
|
||||
if (!data) {
|
||||
data = new Dropdown(element, _config);
|
||||
}
|
||||
const data = Dropdown.getOrCreateInstance(element, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -2307,7 +2302,7 @@ class Dropdown extends BaseComponent {
|
||||
const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE$3);
|
||||
|
||||
for (let i = 0, len = toggles.length; i < len; i++) {
|
||||
const context = Data.get(toggles[i], DATA_KEY$7);
|
||||
const context = Dropdown.getInstance(toggles[i]);
|
||||
|
||||
if (!context || context._config.autoClose === false) {
|
||||
continue;
|
||||
@ -2380,17 +2375,19 @@ class Dropdown extends BaseComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
|
||||
getToggleButton().click();
|
||||
if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) {
|
||||
if (!isActive) {
|
||||
getToggleButton().click();
|
||||
}
|
||||
|
||||
Dropdown.getInstance(getToggleButton())._selectMenuItem(event);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isActive || event.key === SPACE_KEY) {
|
||||
Dropdown.clearMenus();
|
||||
return;
|
||||
}
|
||||
|
||||
Dropdown.getInstance(getToggleButton())._selectMenuItem(event);
|
||||
}
|
||||
|
||||
}
|
||||
@ -2420,81 +2417,111 @@ defineJQueryPlugin(Dropdown);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/scrollBar.js
|
||||
* Bootstrap (v5.0.2): util/scrollBar.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top';
|
||||
const SELECTOR_STICKY_CONTENT = '.sticky-top';
|
||||
|
||||
const getWidth = () => {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
|
||||
const documentWidth = document.documentElement.clientWidth;
|
||||
return Math.abs(window.innerWidth - documentWidth);
|
||||
};
|
||||
|
||||
const hide = (width = getWidth()) => {
|
||||
_disableOverFlow(); // give padding to element to balances the hidden scrollbar width
|
||||
|
||||
|
||||
_setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements, to keep shown fullwidth
|
||||
|
||||
|
||||
_setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
|
||||
_setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
|
||||
};
|
||||
|
||||
const _disableOverFlow = () => {
|
||||
const actualValue = document.body.style.overflow;
|
||||
|
||||
if (actualValue) {
|
||||
Manipulator.setDataAttribute(document.body, 'overflow', actualValue);
|
||||
class ScrollBarHelper {
|
||||
constructor() {
|
||||
this._element = document.body;
|
||||
}
|
||||
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
getWidth() {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
|
||||
const documentWidth = document.documentElement.clientWidth;
|
||||
return Math.abs(window.innerWidth - documentWidth);
|
||||
}
|
||||
|
||||
const _setElementAttributes = (selector, styleProp, callback) => {
|
||||
const scrollbarWidth = getWidth();
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
hide() {
|
||||
const width = this.getWidth();
|
||||
|
||||
this._disableOverFlow(); // give padding to element to balance the hidden scrollbar width
|
||||
|
||||
|
||||
this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
|
||||
|
||||
|
||||
this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
|
||||
this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
|
||||
}
|
||||
|
||||
_disableOverFlow() {
|
||||
this._saveInitialAttribute(this._element, 'overflow');
|
||||
|
||||
this._element.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
_setElementAttributes(selector, styleProp, callback) {
|
||||
const scrollbarWidth = this.getWidth();
|
||||
|
||||
const manipulationCallBack = element => {
|
||||
if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._saveInitialAttribute(element, styleProp);
|
||||
|
||||
const calculatedValue = window.getComputedStyle(element)[styleProp];
|
||||
element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
|
||||
};
|
||||
|
||||
this._applyManipulationCallback(selector, manipulationCallBack);
|
||||
}
|
||||
|
||||
reset() {
|
||||
this._resetElementAttributes(this._element, 'overflow');
|
||||
|
||||
this._resetElementAttributes(this._element, 'paddingRight');
|
||||
|
||||
this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
||||
|
||||
this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
||||
}
|
||||
|
||||
_saveInitialAttribute(element, styleProp) {
|
||||
const actualValue = element.style[styleProp];
|
||||
const calculatedValue = window.getComputedStyle(element)[styleProp];
|
||||
Manipulator.setDataAttribute(element, styleProp, actualValue);
|
||||
element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
|
||||
});
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
_resetElementAttributes('body', 'overflow');
|
||||
|
||||
_resetElementAttributes('body', 'paddingRight');
|
||||
|
||||
_resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
||||
|
||||
_resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
||||
};
|
||||
|
||||
const _resetElementAttributes = (selector, styleProp) => {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined') {
|
||||
element.style.removeProperty(styleProp);
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
if (actualValue) {
|
||||
Manipulator.setDataAttribute(element, styleProp, actualValue);
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
_resetElementAttributes(selector, styleProp) {
|
||||
const manipulationCallBack = element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined') {
|
||||
element.style.removeProperty(styleProp);
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
}
|
||||
};
|
||||
|
||||
this._applyManipulationCallback(selector, manipulationCallBack);
|
||||
}
|
||||
|
||||
_applyManipulationCallback(selector, callBack) {
|
||||
if (isElement(selector)) {
|
||||
callBack(selector);
|
||||
} else {
|
||||
SelectorEngine.find(selector, this._element).forEach(callBack);
|
||||
}
|
||||
}
|
||||
|
||||
isOverflowing() {
|
||||
return this.getWidth() > 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/backdrop.js
|
||||
* Bootstrap (v5.0.2): util/backdrop.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -2502,14 +2529,14 @@ const Default$6 = {
|
||||
isVisible: true,
|
||||
// if false, we use the backdrop helper without adding any element to the dom
|
||||
isAnimated: false,
|
||||
rootElement: document.body,
|
||||
rootElement: 'body',
|
||||
// give the choice to place backdrop under different elements
|
||||
clickCallback: null
|
||||
};
|
||||
const DefaultType$6 = {
|
||||
isVisible: 'boolean',
|
||||
isAnimated: 'boolean',
|
||||
rootElement: 'element',
|
||||
rootElement: '(element|string)',
|
||||
clickCallback: '(function|null)'
|
||||
};
|
||||
const NAME$7 = 'backdrop';
|
||||
@ -2577,8 +2604,9 @@ class Backdrop {
|
||||
_getConfig(config) {
|
||||
config = { ...Default$6,
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
config.rootElement = config.rootElement || document.body;
|
||||
}; // use getElement() with the default "body" to get a fresh Element on each instantiation
|
||||
|
||||
config.rootElement = getElement(config.rootElement);
|
||||
typeCheckConfig(NAME$7, config, DefaultType$6);
|
||||
return config;
|
||||
}
|
||||
@ -2603,27 +2631,20 @@ class Backdrop {
|
||||
|
||||
EventHandler.off(this._element, EVENT_MOUSEDOWN);
|
||||
|
||||
this._getElement().parentNode.removeChild(this._element);
|
||||
this._element.remove();
|
||||
|
||||
this._isAppended = false;
|
||||
}
|
||||
|
||||
_emulateAnimation(callback) {
|
||||
if (!this._config.isAnimated) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
const backdropTransitionDuration = getTransitionDurationFromElement(this._getElement());
|
||||
EventHandler.one(this._getElement(), 'transitionend', () => execute(callback));
|
||||
emulateTransitionEnd(this._getElement(), backdropTransitionDuration);
|
||||
executeAfterTransition(callback, this._getElement(), this._config.isAnimated);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): modal.js
|
||||
* Bootstrap (v5.0.2): modal.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -2683,6 +2704,7 @@ class Modal extends BaseComponent {
|
||||
this._isShown = false;
|
||||
this._ignoreBackdropClick = false;
|
||||
this._isTransitioning = false;
|
||||
this._scrollBar = new ScrollBarHelper();
|
||||
} // Getters
|
||||
|
||||
|
||||
@ -2704,20 +2726,22 @@ class Modal extends BaseComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._isAnimated()) {
|
||||
this._isTransitioning = true;
|
||||
}
|
||||
|
||||
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW$3, {
|
||||
relatedTarget
|
||||
});
|
||||
|
||||
if (this._isShown || showEvent.defaultPrevented) {
|
||||
if (showEvent.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isShown = true;
|
||||
hide();
|
||||
|
||||
if (this._isAnimated()) {
|
||||
this._isTransitioning = true;
|
||||
}
|
||||
|
||||
this._scrollBar.hide();
|
||||
|
||||
document.body.classList.add(CLASS_NAME_OPEN);
|
||||
|
||||
this._adjustDialog();
|
||||
@ -2739,7 +2763,7 @@ class Modal extends BaseComponent {
|
||||
}
|
||||
|
||||
hide(event) {
|
||||
if (event) {
|
||||
if (event && ['A', 'AREA'].includes(event.target.tagName)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@ -2806,7 +2830,7 @@ class Modal extends BaseComponent {
|
||||
_getConfig(config) {
|
||||
config = { ...Default$5,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...config
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
typeCheckConfig(NAME$6, config, DefaultType$5);
|
||||
return config;
|
||||
@ -2909,7 +2933,8 @@ class Modal extends BaseComponent {
|
||||
|
||||
this._resetAdjustments();
|
||||
|
||||
reset();
|
||||
this._scrollBar.reset();
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$3);
|
||||
});
|
||||
}
|
||||
@ -2946,27 +2971,32 @@ class Modal extends BaseComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
const {
|
||||
classList,
|
||||
scrollHeight,
|
||||
style
|
||||
} = this._element;
|
||||
const isModalOverflowing = scrollHeight > document.documentElement.clientHeight; // return if the following background transition hasn't yet completed
|
||||
|
||||
if (!isModalOverflowing) {
|
||||
this._element.style.overflowY = 'hidden';
|
||||
if (!isModalOverflowing && style.overflowY === 'hidden' || classList.contains(CLASS_NAME_STATIC)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_STATIC);
|
||||
if (!isModalOverflowing) {
|
||||
style.overflowY = 'hidden';
|
||||
}
|
||||
|
||||
const modalTransitionDuration = getTransitionDurationFromElement(this._dialog);
|
||||
EventHandler.off(this._element, 'transitionend');
|
||||
EventHandler.one(this._element, 'transitionend', () => {
|
||||
this._element.classList.remove(CLASS_NAME_STATIC);
|
||||
classList.add(CLASS_NAME_STATIC);
|
||||
|
||||
this._queueCallback(() => {
|
||||
classList.remove(CLASS_NAME_STATIC);
|
||||
|
||||
if (!isModalOverflowing) {
|
||||
EventHandler.one(this._element, 'transitionend', () => {
|
||||
this._element.style.overflowY = '';
|
||||
});
|
||||
emulateTransitionEnd(this._element, modalTransitionDuration);
|
||||
this._queueCallback(() => {
|
||||
style.overflowY = '';
|
||||
}, this._dialog);
|
||||
}
|
||||
});
|
||||
emulateTransitionEnd(this._element, modalTransitionDuration);
|
||||
}, this._dialog);
|
||||
|
||||
this._element.focus();
|
||||
} // ----------------------------------------------------------------------
|
||||
@ -2976,7 +3006,9 @@ class Modal extends BaseComponent {
|
||||
|
||||
_adjustDialog() {
|
||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
const scrollbarWidth = getWidth();
|
||||
|
||||
const scrollbarWidth = this._scrollBar.getWidth();
|
||||
|
||||
const isBodyOverflowing = scrollbarWidth > 0;
|
||||
|
||||
if (!isBodyOverflowing && isModalOverflowing && !isRTL() || isBodyOverflowing && !isModalOverflowing && isRTL()) {
|
||||
@ -2996,7 +3028,7 @@ class Modal extends BaseComponent {
|
||||
|
||||
static jQueryInterface(config, relatedTarget) {
|
||||
return this.each(function () {
|
||||
const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {});
|
||||
const data = Modal.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
@ -3037,7 +3069,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API$2, SELECTOR_DATA_TOGGLE$2, functi
|
||||
}
|
||||
});
|
||||
});
|
||||
const data = Modal.getInstance(target) || new Modal(target);
|
||||
const data = Modal.getOrCreateInstance(target);
|
||||
data.toggle(this);
|
||||
});
|
||||
/**
|
||||
@ -3051,7 +3083,7 @@ defineJQueryPlugin(Modal);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): offcanvas.js
|
||||
* Bootstrap (v5.0.2): offcanvas.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3138,7 +3170,7 @@ class Offcanvas extends BaseComponent {
|
||||
this._backdrop.show();
|
||||
|
||||
if (!this._config.scroll) {
|
||||
hide();
|
||||
new ScrollBarHelper().hide();
|
||||
|
||||
this._enforceFocusOnElement(this._element);
|
||||
}
|
||||
@ -3191,7 +3223,7 @@ class Offcanvas extends BaseComponent {
|
||||
this._element.style.visibility = 'hidden';
|
||||
|
||||
if (!this._config.scroll) {
|
||||
reset();
|
||||
new ScrollBarHelper().reset();
|
||||
}
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$2);
|
||||
@ -3249,7 +3281,7 @@ class Offcanvas extends BaseComponent {
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = Data.get(this, DATA_KEY$5) || new Offcanvas(this, typeof config === 'object' ? config : {});
|
||||
const data = Offcanvas.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
@ -3295,12 +3327,10 @@ EventHandler.on(document, EVENT_CLICK_DATA_API$1, SELECTOR_DATA_TOGGLE$1, functi
|
||||
Offcanvas.getInstance(allReadyOpen).hide();
|
||||
}
|
||||
|
||||
const data = Data.get(target, DATA_KEY$5) || new Offcanvas(target);
|
||||
const data = Offcanvas.getOrCreateInstance(target);
|
||||
data.toggle(this);
|
||||
});
|
||||
EventHandler.on(window, EVENT_LOAD_DATA_API$1, () => {
|
||||
SelectorEngine.find(OPEN_SELECTOR).forEach(el => (Data.get(el, DATA_KEY$5) || new Offcanvas(el)).show());
|
||||
});
|
||||
EventHandler.on(window, EVENT_LOAD_DATA_API$1, () => SelectorEngine.find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show()));
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -3311,7 +3341,7 @@ defineJQueryPlugin(Offcanvas);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/sanitizer.js
|
||||
* Bootstrap (v5.0.2): util/sanitizer.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3406,7 +3436,7 @@ function sanitizeHtml(unsafeHtml, allowList, sanitizeFn) {
|
||||
const elName = el.nodeName.toLowerCase();
|
||||
|
||||
if (!allowlistKeys.includes(elName)) {
|
||||
el.parentNode.removeChild(el);
|
||||
el.remove();
|
||||
continue;
|
||||
}
|
||||
|
||||
@ -3424,7 +3454,7 @@ function sanitizeHtml(unsafeHtml, allowList, sanitizeFn) {
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): tooltip.js
|
||||
* Bootstrap (v5.0.2): tooltip.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3593,8 +3623,8 @@ class Tooltip extends BaseComponent {
|
||||
clearTimeout(this._timeout);
|
||||
EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler);
|
||||
|
||||
if (this.tip && this.tip.parentNode) {
|
||||
this.tip.parentNode.removeChild(this.tip);
|
||||
if (this.tip) {
|
||||
this.tip.remove();
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
@ -3699,8 +3729,8 @@ class Tooltip extends BaseComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._hoverState !== HOVER_STATE_SHOW && tip.parentNode) {
|
||||
tip.parentNode.removeChild(tip);
|
||||
if (this._hoverState !== HOVER_STATE_SHOW) {
|
||||
tip.remove();
|
||||
}
|
||||
|
||||
this._cleanTipClass();
|
||||
@ -4087,17 +4117,7 @@ class Tooltip extends BaseComponent {
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$4);
|
||||
|
||||
const _config = typeof config === 'object' && config;
|
||||
|
||||
if (!data && /dispose|hide/.test(config)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Tooltip(this, _config);
|
||||
}
|
||||
const data = Tooltip.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -4122,7 +4142,7 @@ defineJQueryPlugin(Tooltip);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): popover.js
|
||||
* Bootstrap (v5.0.2): popover.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4192,6 +4212,24 @@ class Popover extends Tooltip {
|
||||
return this.getTitle() || this._getContent();
|
||||
}
|
||||
|
||||
getTipElement() {
|
||||
if (this.tip) {
|
||||
return this.tip;
|
||||
}
|
||||
|
||||
this.tip = super.getTipElement();
|
||||
|
||||
if (!this.getTitle()) {
|
||||
SelectorEngine.findOne(SELECTOR_TITLE, this.tip).remove();
|
||||
}
|
||||
|
||||
if (!this._getContent()) {
|
||||
SelectorEngine.findOne(SELECTOR_CONTENT, this.tip).remove();
|
||||
}
|
||||
|
||||
return this.tip;
|
||||
}
|
||||
|
||||
setContent() {
|
||||
const tip = this.getTipElement(); // we use append for html objects to maintain js events
|
||||
|
||||
@ -4228,18 +4266,7 @@ class Popover extends Tooltip {
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$3);
|
||||
|
||||
const _config = typeof config === 'object' ? config : null;
|
||||
|
||||
if (!data && /dispose|hide/.test(config)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Popover(this, _config);
|
||||
Data.set(this, DATA_KEY$3, data);
|
||||
}
|
||||
const data = Popover.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -4264,7 +4291,7 @@ defineJQueryPlugin(Popover);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): scrollspy.js
|
||||
* Bootstrap (v5.0.2): scrollspy.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4479,7 +4506,7 @@ class ScrollSpy extends BaseComponent {
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = ScrollSpy.getInstance(this) || new ScrollSpy(this, typeof config === 'object' ? config : {});
|
||||
const data = ScrollSpy.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
@ -4515,7 +4542,7 @@ defineJQueryPlugin(ScrollSpy);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): tab.js
|
||||
* Bootstrap (v5.0.2): tab.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4670,7 +4697,7 @@ class Tab extends BaseComponent {
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = Data.get(this, DATA_KEY$1) || new Tab(this);
|
||||
const data = Tab.getOrCreateInstance(this);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -4699,7 +4726,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
|
||||
return;
|
||||
}
|
||||
|
||||
const data = Data.get(this, DATA_KEY$1) || new Tab(this);
|
||||
const data = Tab.getOrCreateInstance(this);
|
||||
data.show();
|
||||
});
|
||||
/**
|
||||
@ -4713,7 +4740,7 @@ defineJQueryPlugin(Tab);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): toast.js
|
||||
* Bootstrap (v5.0.2): toast.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4913,13 +4940,7 @@ class Toast extends BaseComponent {
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY);
|
||||
|
||||
const _config = typeof config === 'object' && config;
|
||||
|
||||
if (!data) {
|
||||
data = new Toast(this, _config);
|
||||
}
|
||||
const data = Toast.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
|
||||
2
docs/5.0/dist/js/bootstrap.esm.js.map
vendored
2
docs/5.0/dist/js/bootstrap.esm.js.map
vendored
File diff suppressed because one or more lines are too long
4
docs/5.0/dist/js/bootstrap.esm.min.js
vendored
4
docs/5.0/dist/js/bootstrap.esm.min.js
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/js/bootstrap.esm.min.js.map
vendored
2
docs/5.0/dist/js/bootstrap.esm.min.js.map
vendored
File diff suppressed because one or more lines are too long
695
docs/5.0/dist/js/bootstrap.js
vendored
695
docs/5.0/dist/js/bootstrap.js
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap v5.0.1 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.2 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/selector-engine.js
|
||||
* Bootstrap (v5.0.2): dom/selector-engine.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -104,7 +104,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/index.js
|
||||
* Bootstrap (v5.0.2): util/index.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -226,24 +226,6 @@
|
||||
return null;
|
||||
};
|
||||
|
||||
const emulateTransitionEnd = (element, duration) => {
|
||||
let called = false;
|
||||
const durationPadding = 5;
|
||||
const emulatedDuration = duration + durationPadding;
|
||||
|
||||
function listener() {
|
||||
called = true;
|
||||
element.removeEventListener(TRANSITION_END, listener);
|
||||
}
|
||||
|
||||
element.addEventListener(TRANSITION_END, listener);
|
||||
setTimeout(() => {
|
||||
if (!called) {
|
||||
triggerTransitionEnd(element);
|
||||
}
|
||||
}, emulatedDuration);
|
||||
};
|
||||
|
||||
const typeCheckConfig = (componentName, config, configTypes) => {
|
||||
Object.keys(configTypes).forEach(property => {
|
||||
const expectedTypes = configTypes[property];
|
||||
@ -257,17 +239,11 @@
|
||||
};
|
||||
|
||||
const isVisible = element => {
|
||||
if (!element) {
|
||||
if (!isElement(element) || element.getClientRects().length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (element.style && element.parentNode && element.parentNode.style) {
|
||||
const elementStyle = getComputedStyle(element);
|
||||
const parentNodeStyle = getComputedStyle(element.parentNode);
|
||||
return elementStyle.display !== 'none' && parentNodeStyle.display !== 'none' && elementStyle.visibility !== 'hidden';
|
||||
}
|
||||
|
||||
return false;
|
||||
return getComputedStyle(element).getPropertyValue('visibility') === 'visible';
|
||||
};
|
||||
|
||||
const isDisabled = element => {
|
||||
@ -325,9 +301,18 @@
|
||||
return null;
|
||||
};
|
||||
|
||||
const DOMContentLoadedCallbacks = [];
|
||||
|
||||
const onDOMContentLoaded = callback => {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', callback);
|
||||
// add listener on the first call when the document is in loading state
|
||||
if (!DOMContentLoadedCallbacks.length) {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
DOMContentLoadedCallbacks.forEach(callback => callback());
|
||||
});
|
||||
}
|
||||
|
||||
DOMContentLoadedCallbacks.push(callback);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@ -360,63 +345,66 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/data.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const elementMap = new Map();
|
||||
var Data = {
|
||||
set(element, key, instance) {
|
||||
if (!elementMap.has(element)) {
|
||||
elementMap.set(element, new Map());
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element); // make it clear we only want one instance per element
|
||||
// can be removed later when multiple key/instances are fine to be used
|
||||
|
||||
if (!instanceMap.has(key) && instanceMap.size !== 0) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
instanceMap.set(key, instance);
|
||||
},
|
||||
|
||||
get(element, key) {
|
||||
if (elementMap.has(element)) {
|
||||
return elementMap.get(element).get(key) || null;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
remove(element, key) {
|
||||
if (!elementMap.has(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element);
|
||||
instanceMap.delete(key); // free up element references if there are no instances left for an element
|
||||
|
||||
if (instanceMap.size === 0) {
|
||||
elementMap.delete(element);
|
||||
}
|
||||
const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
|
||||
if (!waitForTransition) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
const durationPadding = 5;
|
||||
const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding;
|
||||
let called = false;
|
||||
|
||||
const handler = ({
|
||||
target
|
||||
}) => {
|
||||
if (target !== transitionElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
called = true;
|
||||
transitionElement.removeEventListener(TRANSITION_END, handler);
|
||||
execute(callback);
|
||||
};
|
||||
|
||||
transitionElement.addEventListener(TRANSITION_END, handler);
|
||||
setTimeout(() => {
|
||||
if (!called) {
|
||||
triggerTransitionEnd(transitionElement);
|
||||
}
|
||||
}, emulatedDuration);
|
||||
};
|
||||
/**
|
||||
* Return the previous/next element of a list.
|
||||
*
|
||||
* @param {array} list The list of elements
|
||||
* @param activeElement The active element
|
||||
* @param shouldGetNext Choose to get next or previous element
|
||||
* @param isCycleAllowed
|
||||
* @return {Element|elem} The proper element
|
||||
*/
|
||||
|
||||
|
||||
const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed) => {
|
||||
let index = list.indexOf(activeElement); // if the element does not exist in the list return an element depending on the direction and if cycle is allowed
|
||||
|
||||
if (index === -1) {
|
||||
return list[!shouldGetNext && isCycleAllowed ? list.length - 1 : 0];
|
||||
}
|
||||
|
||||
const listLength = list.length;
|
||||
index += shouldGetNext ? 1 : -1;
|
||||
|
||||
if (isCycleAllowed) {
|
||||
index = (index + listLength) % listLength;
|
||||
}
|
||||
|
||||
return list[Math.max(0, Math.min(index, listLength - 1))];
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/event-handler.js
|
||||
* Bootstrap (v5.0.2): dom/event-handler.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -705,7 +693,61 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): base-component.js
|
||||
* Bootstrap (v5.0.2): dom/data.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const elementMap = new Map();
|
||||
var Data = {
|
||||
set(element, key, instance) {
|
||||
if (!elementMap.has(element)) {
|
||||
elementMap.set(element, new Map());
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element); // make it clear we only want one instance per element
|
||||
// can be removed later when multiple key/instances are fine to be used
|
||||
|
||||
if (!instanceMap.has(key) && instanceMap.size !== 0) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
instanceMap.set(key, instance);
|
||||
},
|
||||
|
||||
get(element, key) {
|
||||
if (elementMap.has(element)) {
|
||||
return elementMap.get(element).get(key) || null;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
remove(element, key) {
|
||||
if (!elementMap.has(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const instanceMap = elementMap.get(element);
|
||||
instanceMap.delete(key); // free up element references if there are no instances left for an element
|
||||
|
||||
if (instanceMap.size === 0) {
|
||||
elementMap.delete(element);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.2): base-component.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -715,7 +757,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const VERSION = '5.0.1';
|
||||
const VERSION = '5.0.2';
|
||||
|
||||
class BaseComponent {
|
||||
constructor(element) {
|
||||
@ -738,14 +780,7 @@
|
||||
}
|
||||
|
||||
_queueCallback(callback, element, isAnimated = true) {
|
||||
if (!isAnimated) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
const transitionDuration = getTransitionDurationFromElement(element);
|
||||
EventHandler.one(element, 'transitionend', () => execute(callback));
|
||||
emulateTransitionEnd(element, transitionDuration);
|
||||
executeAfterTransition(callback, element, isAnimated);
|
||||
}
|
||||
/** Static */
|
||||
|
||||
@ -754,6 +789,10 @@
|
||||
return Data.get(element, this.DATA_KEY);
|
||||
}
|
||||
|
||||
static getOrCreateInstance(element, config = {}) {
|
||||
return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null);
|
||||
}
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION;
|
||||
}
|
||||
@ -774,7 +813,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): alert.js
|
||||
* Bootstrap (v5.0.2): alert.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -837,21 +876,14 @@
|
||||
}
|
||||
|
||||
_destroyElement(element) {
|
||||
if (element.parentNode) {
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
|
||||
element.remove();
|
||||
EventHandler.trigger(element, EVENT_CLOSED);
|
||||
} // Static
|
||||
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$b);
|
||||
|
||||
if (!data) {
|
||||
data = new Alert(this);
|
||||
}
|
||||
const data = Alert.getOrCreateInstance(this);
|
||||
|
||||
if (config === 'close') {
|
||||
data[config](this);
|
||||
@ -889,7 +921,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): button.js
|
||||
* Bootstrap (v5.0.2): button.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -927,11 +959,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$a);
|
||||
|
||||
if (!data) {
|
||||
data = new Button(this);
|
||||
}
|
||||
const data = Button.getOrCreateInstance(this);
|
||||
|
||||
if (config === 'toggle') {
|
||||
data[config]();
|
||||
@ -950,12 +978,7 @@
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API$6, SELECTOR_DATA_TOGGLE$5, event => {
|
||||
event.preventDefault();
|
||||
const button = event.target.closest(SELECTOR_DATA_TOGGLE$5);
|
||||
let data = Data.get(button, DATA_KEY$a);
|
||||
|
||||
if (!data) {
|
||||
data = new Button(button);
|
||||
}
|
||||
|
||||
const data = Button.getOrCreateInstance(button);
|
||||
data.toggle();
|
||||
});
|
||||
/**
|
||||
@ -969,7 +992,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dom/manipulator.js
|
||||
* Bootstrap (v5.0.2): dom/manipulator.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1043,7 +1066,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): carousel.js
|
||||
* Bootstrap (v5.0.2): carousel.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1082,6 +1105,10 @@
|
||||
const ORDER_PREV = 'prev';
|
||||
const DIRECTION_LEFT = 'left';
|
||||
const DIRECTION_RIGHT = 'right';
|
||||
const KEY_TO_DIRECTION = {
|
||||
[ARROW_LEFT_KEY]: DIRECTION_RIGHT,
|
||||
[ARROW_RIGHT_KEY]: DIRECTION_LEFT
|
||||
};
|
||||
const EVENT_SLIDE = `slide${EVENT_KEY$9}`;
|
||||
const EVENT_SLID = `slid${EVENT_KEY$9}`;
|
||||
const EVENT_KEYDOWN = `keydown${EVENT_KEY$9}`;
|
||||
@ -1150,9 +1177,7 @@
|
||||
|
||||
|
||||
next() {
|
||||
if (!this._isSliding) {
|
||||
this._slide(ORDER_NEXT);
|
||||
}
|
||||
this._slide(ORDER_NEXT);
|
||||
}
|
||||
|
||||
nextWhenVisible() {
|
||||
@ -1164,9 +1189,7 @@
|
||||
}
|
||||
|
||||
prev() {
|
||||
if (!this._isSliding) {
|
||||
this._slide(ORDER_PREV);
|
||||
}
|
||||
this._slide(ORDER_PREV);
|
||||
}
|
||||
|
||||
pause(event) {
|
||||
@ -1228,7 +1251,8 @@
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$9,
|
||||
...config
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
typeCheckConfig(NAME$a, config, DefaultType$9);
|
||||
return config;
|
||||
@ -1326,14 +1350,12 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === ARROW_LEFT_KEY) {
|
||||
const direction = KEY_TO_DIRECTION[event.key];
|
||||
|
||||
if (direction) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_RIGHT);
|
||||
} else if (event.key === ARROW_RIGHT_KEY) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_LEFT);
|
||||
this._slide(direction);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1344,20 +1366,7 @@
|
||||
|
||||
_getItemByOrder(order, activeElement) {
|
||||
const isNext = order === ORDER_NEXT;
|
||||
const isPrev = order === ORDER_PREV;
|
||||
|
||||
const activeIndex = this._getItemIndex(activeElement);
|
||||
|
||||
const lastItemIndex = this._items.length - 1;
|
||||
const isGoingToWrap = isPrev && activeIndex === 0 || isNext && activeIndex === lastItemIndex;
|
||||
|
||||
if (isGoingToWrap && !this._config.wrap) {
|
||||
return activeElement;
|
||||
}
|
||||
|
||||
const delta = isPrev ? -1 : 1;
|
||||
const itemIndex = (activeIndex + delta) % this._items.length;
|
||||
return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex];
|
||||
return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap);
|
||||
}
|
||||
|
||||
_triggerSlideEvent(relatedTarget, eventDirectionName) {
|
||||
@ -1430,6 +1439,10 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._isSliding) {
|
||||
return;
|
||||
}
|
||||
|
||||
const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);
|
||||
|
||||
if (slideEvent.defaultPrevented) {
|
||||
@ -1513,10 +1526,10 @@
|
||||
|
||||
|
||||
static carouselInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$9);
|
||||
let _config = { ...Default$9,
|
||||
...Manipulator.getDataAttributes(element)
|
||||
};
|
||||
const data = Carousel.getOrCreateInstance(element, config);
|
||||
let {
|
||||
_config
|
||||
} = data;
|
||||
|
||||
if (typeof config === 'object') {
|
||||
_config = { ..._config,
|
||||
@ -1526,10 +1539,6 @@
|
||||
|
||||
const action = typeof config === 'string' ? config : _config.slide;
|
||||
|
||||
if (!data) {
|
||||
data = new Carousel(element, _config);
|
||||
}
|
||||
|
||||
if (typeof config === 'number') {
|
||||
data.to(config);
|
||||
} else if (typeof action === 'string') {
|
||||
@ -1569,7 +1578,7 @@
|
||||
Carousel.carouselInterface(target, config);
|
||||
|
||||
if (slideIndex) {
|
||||
Data.get(target, DATA_KEY$9).to(slideIndex);
|
||||
Carousel.getInstance(target).to(slideIndex);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
@ -1588,7 +1597,7 @@
|
||||
const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE);
|
||||
|
||||
for (let i = 0, len = carousels.length; i < len; i++) {
|
||||
Carousel.carouselInterface(carousels[i], Data.get(carousels[i], DATA_KEY$9));
|
||||
Carousel.carouselInterface(carousels[i], Carousel.getInstance(carousels[i]));
|
||||
}
|
||||
});
|
||||
/**
|
||||
@ -1602,7 +1611,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): collapse.js
|
||||
* Bootstrap (v5.0.2): collapse.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1718,7 +1727,7 @@
|
||||
|
||||
if (actives) {
|
||||
const tempActiveData = actives.find(elem => container !== elem);
|
||||
activesData = tempActiveData ? Data.get(tempActiveData, DATA_KEY$8) : null;
|
||||
activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null;
|
||||
|
||||
if (activesData && activesData._isTransitioning) {
|
||||
return;
|
||||
@ -1881,7 +1890,7 @@
|
||||
|
||||
|
||||
static collapseInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$8);
|
||||
let data = Collapse.getInstance(element);
|
||||
const _config = { ...Default$8,
|
||||
...Manipulator.getDataAttributes(element),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
@ -1928,7 +1937,7 @@
|
||||
const selector = getSelectorFromElement(this);
|
||||
const selectorElements = SelectorEngine.find(selector);
|
||||
selectorElements.forEach(element => {
|
||||
const data = Data.get(element, DATA_KEY$8);
|
||||
const data = Collapse.getInstance(element);
|
||||
let config;
|
||||
|
||||
if (data) {
|
||||
@ -1957,7 +1966,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): dropdown.js
|
||||
* Bootstrap (v5.0.2): dropdown.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -2277,38 +2286,24 @@
|
||||
};
|
||||
}
|
||||
|
||||
_selectMenuItem(event) {
|
||||
_selectMenuItem({
|
||||
key,
|
||||
target
|
||||
}) {
|
||||
const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(isVisible);
|
||||
|
||||
if (!items.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
let index = items.indexOf(event.target); // Up
|
||||
|
||||
if (event.key === ARROW_UP_KEY && index > 0) {
|
||||
index--;
|
||||
} // Down
|
||||
} // if target isn't included in items (e.g. when expanding the dropdown)
|
||||
// allow cycling to get the last item in case key equals ARROW_UP_KEY
|
||||
|
||||
|
||||
if (event.key === ARROW_DOWN_KEY && index < items.length - 1) {
|
||||
index++;
|
||||
} // index is -1 if the first keydown is an ArrowUp
|
||||
|
||||
|
||||
index = index === -1 ? 0 : index;
|
||||
items[index].focus();
|
||||
getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus();
|
||||
} // Static
|
||||
|
||||
|
||||
static dropdownInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$7);
|
||||
|
||||
const _config = typeof config === 'object' ? config : null;
|
||||
|
||||
if (!data) {
|
||||
data = new Dropdown(element, _config);
|
||||
}
|
||||
const data = Dropdown.getOrCreateInstance(element, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -2333,7 +2328,7 @@
|
||||
const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE$3);
|
||||
|
||||
for (let i = 0, len = toggles.length; i < len; i++) {
|
||||
const context = Data.get(toggles[i], DATA_KEY$7);
|
||||
const context = Dropdown.getInstance(toggles[i]);
|
||||
|
||||
if (!context || context._config.autoClose === false) {
|
||||
continue;
|
||||
@ -2406,17 +2401,19 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
|
||||
getToggleButton().click();
|
||||
if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) {
|
||||
if (!isActive) {
|
||||
getToggleButton().click();
|
||||
}
|
||||
|
||||
Dropdown.getInstance(getToggleButton())._selectMenuItem(event);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isActive || event.key === SPACE_KEY) {
|
||||
Dropdown.clearMenus();
|
||||
return;
|
||||
}
|
||||
|
||||
Dropdown.getInstance(getToggleButton())._selectMenuItem(event);
|
||||
}
|
||||
|
||||
}
|
||||
@ -2446,81 +2443,111 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/scrollBar.js
|
||||
* Bootstrap (v5.0.2): util/scrollBar.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top';
|
||||
const SELECTOR_STICKY_CONTENT = '.sticky-top';
|
||||
|
||||
const getWidth = () => {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
|
||||
const documentWidth = document.documentElement.clientWidth;
|
||||
return Math.abs(window.innerWidth - documentWidth);
|
||||
};
|
||||
|
||||
const hide = (width = getWidth()) => {
|
||||
_disableOverFlow(); // give padding to element to balances the hidden scrollbar width
|
||||
|
||||
|
||||
_setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements, to keep shown fullwidth
|
||||
|
||||
|
||||
_setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
|
||||
_setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
|
||||
};
|
||||
|
||||
const _disableOverFlow = () => {
|
||||
const actualValue = document.body.style.overflow;
|
||||
|
||||
if (actualValue) {
|
||||
Manipulator.setDataAttribute(document.body, 'overflow', actualValue);
|
||||
class ScrollBarHelper {
|
||||
constructor() {
|
||||
this._element = document.body;
|
||||
}
|
||||
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
getWidth() {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
|
||||
const documentWidth = document.documentElement.clientWidth;
|
||||
return Math.abs(window.innerWidth - documentWidth);
|
||||
}
|
||||
|
||||
const _setElementAttributes = (selector, styleProp, callback) => {
|
||||
const scrollbarWidth = getWidth();
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
hide() {
|
||||
const width = this.getWidth();
|
||||
|
||||
this._disableOverFlow(); // give padding to element to balance the hidden scrollbar width
|
||||
|
||||
|
||||
this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
|
||||
|
||||
|
||||
this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
|
||||
this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
|
||||
}
|
||||
|
||||
_disableOverFlow() {
|
||||
this._saveInitialAttribute(this._element, 'overflow');
|
||||
|
||||
this._element.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
_setElementAttributes(selector, styleProp, callback) {
|
||||
const scrollbarWidth = this.getWidth();
|
||||
|
||||
const manipulationCallBack = element => {
|
||||
if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._saveInitialAttribute(element, styleProp);
|
||||
|
||||
const calculatedValue = window.getComputedStyle(element)[styleProp];
|
||||
element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
|
||||
};
|
||||
|
||||
this._applyManipulationCallback(selector, manipulationCallBack);
|
||||
}
|
||||
|
||||
reset() {
|
||||
this._resetElementAttributes(this._element, 'overflow');
|
||||
|
||||
this._resetElementAttributes(this._element, 'paddingRight');
|
||||
|
||||
this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
||||
|
||||
this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
||||
}
|
||||
|
||||
_saveInitialAttribute(element, styleProp) {
|
||||
const actualValue = element.style[styleProp];
|
||||
const calculatedValue = window.getComputedStyle(element)[styleProp];
|
||||
Manipulator.setDataAttribute(element, styleProp, actualValue);
|
||||
element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
|
||||
});
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
_resetElementAttributes('body', 'overflow');
|
||||
|
||||
_resetElementAttributes('body', 'paddingRight');
|
||||
|
||||
_resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
||||
|
||||
_resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
||||
};
|
||||
|
||||
const _resetElementAttributes = (selector, styleProp) => {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined') {
|
||||
element.style.removeProperty(styleProp);
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
if (actualValue) {
|
||||
Manipulator.setDataAttribute(element, styleProp, actualValue);
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
_resetElementAttributes(selector, styleProp) {
|
||||
const manipulationCallBack = element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined') {
|
||||
element.style.removeProperty(styleProp);
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
}
|
||||
};
|
||||
|
||||
this._applyManipulationCallback(selector, manipulationCallBack);
|
||||
}
|
||||
|
||||
_applyManipulationCallback(selector, callBack) {
|
||||
if (isElement(selector)) {
|
||||
callBack(selector);
|
||||
} else {
|
||||
SelectorEngine.find(selector, this._element).forEach(callBack);
|
||||
}
|
||||
}
|
||||
|
||||
isOverflowing() {
|
||||
return this.getWidth() > 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/backdrop.js
|
||||
* Bootstrap (v5.0.2): util/backdrop.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -2528,14 +2555,14 @@
|
||||
isVisible: true,
|
||||
// if false, we use the backdrop helper without adding any element to the dom
|
||||
isAnimated: false,
|
||||
rootElement: document.body,
|
||||
rootElement: 'body',
|
||||
// give the choice to place backdrop under different elements
|
||||
clickCallback: null
|
||||
};
|
||||
const DefaultType$6 = {
|
||||
isVisible: 'boolean',
|
||||
isAnimated: 'boolean',
|
||||
rootElement: 'element',
|
||||
rootElement: '(element|string)',
|
||||
clickCallback: '(function|null)'
|
||||
};
|
||||
const NAME$7 = 'backdrop';
|
||||
@ -2603,8 +2630,9 @@
|
||||
_getConfig(config) {
|
||||
config = { ...Default$6,
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
config.rootElement = config.rootElement || document.body;
|
||||
}; // use getElement() with the default "body" to get a fresh Element on each instantiation
|
||||
|
||||
config.rootElement = getElement(config.rootElement);
|
||||
typeCheckConfig(NAME$7, config, DefaultType$6);
|
||||
return config;
|
||||
}
|
||||
@ -2629,27 +2657,20 @@
|
||||
|
||||
EventHandler.off(this._element, EVENT_MOUSEDOWN);
|
||||
|
||||
this._getElement().parentNode.removeChild(this._element);
|
||||
this._element.remove();
|
||||
|
||||
this._isAppended = false;
|
||||
}
|
||||
|
||||
_emulateAnimation(callback) {
|
||||
if (!this._config.isAnimated) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
const backdropTransitionDuration = getTransitionDurationFromElement(this._getElement());
|
||||
EventHandler.one(this._getElement(), 'transitionend', () => execute(callback));
|
||||
emulateTransitionEnd(this._getElement(), backdropTransitionDuration);
|
||||
executeAfterTransition(callback, this._getElement(), this._config.isAnimated);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): modal.js
|
||||
* Bootstrap (v5.0.2): modal.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -2709,6 +2730,7 @@
|
||||
this._isShown = false;
|
||||
this._ignoreBackdropClick = false;
|
||||
this._isTransitioning = false;
|
||||
this._scrollBar = new ScrollBarHelper();
|
||||
} // Getters
|
||||
|
||||
|
||||
@ -2730,20 +2752,22 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._isAnimated()) {
|
||||
this._isTransitioning = true;
|
||||
}
|
||||
|
||||
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW$3, {
|
||||
relatedTarget
|
||||
});
|
||||
|
||||
if (this._isShown || showEvent.defaultPrevented) {
|
||||
if (showEvent.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isShown = true;
|
||||
hide();
|
||||
|
||||
if (this._isAnimated()) {
|
||||
this._isTransitioning = true;
|
||||
}
|
||||
|
||||
this._scrollBar.hide();
|
||||
|
||||
document.body.classList.add(CLASS_NAME_OPEN);
|
||||
|
||||
this._adjustDialog();
|
||||
@ -2765,7 +2789,7 @@
|
||||
}
|
||||
|
||||
hide(event) {
|
||||
if (event) {
|
||||
if (event && ['A', 'AREA'].includes(event.target.tagName)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@ -2832,7 +2856,7 @@
|
||||
_getConfig(config) {
|
||||
config = { ...Default$5,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...config
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
typeCheckConfig(NAME$6, config, DefaultType$5);
|
||||
return config;
|
||||
@ -2935,7 +2959,8 @@
|
||||
|
||||
this._resetAdjustments();
|
||||
|
||||
reset();
|
||||
this._scrollBar.reset();
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$3);
|
||||
});
|
||||
}
|
||||
@ -2972,27 +2997,32 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
const {
|
||||
classList,
|
||||
scrollHeight,
|
||||
style
|
||||
} = this._element;
|
||||
const isModalOverflowing = scrollHeight > document.documentElement.clientHeight; // return if the following background transition hasn't yet completed
|
||||
|
||||
if (!isModalOverflowing) {
|
||||
this._element.style.overflowY = 'hidden';
|
||||
if (!isModalOverflowing && style.overflowY === 'hidden' || classList.contains(CLASS_NAME_STATIC)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_STATIC);
|
||||
if (!isModalOverflowing) {
|
||||
style.overflowY = 'hidden';
|
||||
}
|
||||
|
||||
const modalTransitionDuration = getTransitionDurationFromElement(this._dialog);
|
||||
EventHandler.off(this._element, 'transitionend');
|
||||
EventHandler.one(this._element, 'transitionend', () => {
|
||||
this._element.classList.remove(CLASS_NAME_STATIC);
|
||||
classList.add(CLASS_NAME_STATIC);
|
||||
|
||||
this._queueCallback(() => {
|
||||
classList.remove(CLASS_NAME_STATIC);
|
||||
|
||||
if (!isModalOverflowing) {
|
||||
EventHandler.one(this._element, 'transitionend', () => {
|
||||
this._element.style.overflowY = '';
|
||||
});
|
||||
emulateTransitionEnd(this._element, modalTransitionDuration);
|
||||
this._queueCallback(() => {
|
||||
style.overflowY = '';
|
||||
}, this._dialog);
|
||||
}
|
||||
});
|
||||
emulateTransitionEnd(this._element, modalTransitionDuration);
|
||||
}, this._dialog);
|
||||
|
||||
this._element.focus();
|
||||
} // ----------------------------------------------------------------------
|
||||
@ -3002,7 +3032,9 @@
|
||||
|
||||
_adjustDialog() {
|
||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
const scrollbarWidth = getWidth();
|
||||
|
||||
const scrollbarWidth = this._scrollBar.getWidth();
|
||||
|
||||
const isBodyOverflowing = scrollbarWidth > 0;
|
||||
|
||||
if (!isBodyOverflowing && isModalOverflowing && !isRTL() || isBodyOverflowing && !isModalOverflowing && isRTL()) {
|
||||
@ -3022,7 +3054,7 @@
|
||||
|
||||
static jQueryInterface(config, relatedTarget) {
|
||||
return this.each(function () {
|
||||
const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {});
|
||||
const data = Modal.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
@ -3063,7 +3095,7 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
const data = Modal.getInstance(target) || new Modal(target);
|
||||
const data = Modal.getOrCreateInstance(target);
|
||||
data.toggle(this);
|
||||
});
|
||||
/**
|
||||
@ -3077,7 +3109,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): offcanvas.js
|
||||
* Bootstrap (v5.0.2): offcanvas.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3164,7 +3196,7 @@
|
||||
this._backdrop.show();
|
||||
|
||||
if (!this._config.scroll) {
|
||||
hide();
|
||||
new ScrollBarHelper().hide();
|
||||
|
||||
this._enforceFocusOnElement(this._element);
|
||||
}
|
||||
@ -3217,7 +3249,7 @@
|
||||
this._element.style.visibility = 'hidden';
|
||||
|
||||
if (!this._config.scroll) {
|
||||
reset();
|
||||
new ScrollBarHelper().reset();
|
||||
}
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$2);
|
||||
@ -3275,7 +3307,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = Data.get(this, DATA_KEY$5) || new Offcanvas(this, typeof config === 'object' ? config : {});
|
||||
const data = Offcanvas.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
@ -3321,12 +3353,10 @@
|
||||
Offcanvas.getInstance(allReadyOpen).hide();
|
||||
}
|
||||
|
||||
const data = Data.get(target, DATA_KEY$5) || new Offcanvas(target);
|
||||
const data = Offcanvas.getOrCreateInstance(target);
|
||||
data.toggle(this);
|
||||
});
|
||||
EventHandler.on(window, EVENT_LOAD_DATA_API$1, () => {
|
||||
SelectorEngine.find(OPEN_SELECTOR).forEach(el => (Data.get(el, DATA_KEY$5) || new Offcanvas(el)).show());
|
||||
});
|
||||
EventHandler.on(window, EVENT_LOAD_DATA_API$1, () => SelectorEngine.find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show()));
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -3337,7 +3367,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): util/sanitizer.js
|
||||
* Bootstrap (v5.0.2): util/sanitizer.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3432,7 +3462,7 @@
|
||||
const elName = el.nodeName.toLowerCase();
|
||||
|
||||
if (!allowlistKeys.includes(elName)) {
|
||||
el.parentNode.removeChild(el);
|
||||
el.remove();
|
||||
continue;
|
||||
}
|
||||
|
||||
@ -3450,7 +3480,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): tooltip.js
|
||||
* Bootstrap (v5.0.2): tooltip.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3619,8 +3649,8 @@
|
||||
clearTimeout(this._timeout);
|
||||
EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler);
|
||||
|
||||
if (this.tip && this.tip.parentNode) {
|
||||
this.tip.parentNode.removeChild(this.tip);
|
||||
if (this.tip) {
|
||||
this.tip.remove();
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
@ -3725,8 +3755,8 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._hoverState !== HOVER_STATE_SHOW && tip.parentNode) {
|
||||
tip.parentNode.removeChild(tip);
|
||||
if (this._hoverState !== HOVER_STATE_SHOW) {
|
||||
tip.remove();
|
||||
}
|
||||
|
||||
this._cleanTipClass();
|
||||
@ -4113,17 +4143,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$4);
|
||||
|
||||
const _config = typeof config === 'object' && config;
|
||||
|
||||
if (!data && /dispose|hide/.test(config)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Tooltip(this, _config);
|
||||
}
|
||||
const data = Tooltip.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -4148,7 +4168,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): popover.js
|
||||
* Bootstrap (v5.0.2): popover.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4218,6 +4238,24 @@
|
||||
return this.getTitle() || this._getContent();
|
||||
}
|
||||
|
||||
getTipElement() {
|
||||
if (this.tip) {
|
||||
return this.tip;
|
||||
}
|
||||
|
||||
this.tip = super.getTipElement();
|
||||
|
||||
if (!this.getTitle()) {
|
||||
SelectorEngine.findOne(SELECTOR_TITLE, this.tip).remove();
|
||||
}
|
||||
|
||||
if (!this._getContent()) {
|
||||
SelectorEngine.findOne(SELECTOR_CONTENT, this.tip).remove();
|
||||
}
|
||||
|
||||
return this.tip;
|
||||
}
|
||||
|
||||
setContent() {
|
||||
const tip = this.getTipElement(); // we use append for html objects to maintain js events
|
||||
|
||||
@ -4254,18 +4292,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$3);
|
||||
|
||||
const _config = typeof config === 'object' ? config : null;
|
||||
|
||||
if (!data && /dispose|hide/.test(config)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Popover(this, _config);
|
||||
Data.set(this, DATA_KEY$3, data);
|
||||
}
|
||||
const data = Popover.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -4290,7 +4317,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): scrollspy.js
|
||||
* Bootstrap (v5.0.2): scrollspy.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4505,7 +4532,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = ScrollSpy.getInstance(this) || new ScrollSpy(this, typeof config === 'object' ? config : {});
|
||||
const data = ScrollSpy.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
@ -4541,7 +4568,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): tab.js
|
||||
* Bootstrap (v5.0.2): tab.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4696,7 +4723,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = Data.get(this, DATA_KEY$1) || new Tab(this);
|
||||
const data = Tab.getOrCreateInstance(this);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -4725,7 +4752,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const data = Data.get(this, DATA_KEY$1) || new Tab(this);
|
||||
const data = Tab.getOrCreateInstance(this);
|
||||
data.show();
|
||||
});
|
||||
/**
|
||||
@ -4739,7 +4766,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): toast.js
|
||||
* Bootstrap (v5.0.2): toast.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4939,13 +4966,7 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY);
|
||||
|
||||
const _config = typeof config === 'object' && config;
|
||||
|
||||
if (!data) {
|
||||
data = new Toast(this, _config);
|
||||
}
|
||||
const data = Toast.getOrCreateInstance(this, config);
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
@ -4970,7 +4991,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.1): index.umd.js
|
||||
* Bootstrap (v5.0.2): index.umd.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
2
docs/5.0/dist/js/bootstrap.js.map
vendored
2
docs/5.0/dist/js/bootstrap.js.map
vendored
File diff suppressed because one or more lines are too long
4
docs/5.0/dist/js/bootstrap.min.js
vendored
4
docs/5.0/dist/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/js/bootstrap.min.js.map
vendored
2
docs/5.0/dist/js/bootstrap.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album-rtl/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -259,7 +259,7 @@
|
||||
</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>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -259,7 +259,7 @@
|
||||
</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>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/blog-rtl/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/blog/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/carousel-rtl/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -217,7 +217,7 @@
|
||||
</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>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/carousel/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -217,7 +217,7 @@
|
||||
</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>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cheatsheet-rtl/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -1763,7 +1763,7 @@
|
||||
</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>
|
||||
</body>
|
||||
|
||||
@ -25,8 +25,8 @@
|
||||
toast.show()
|
||||
})
|
||||
|
||||
// Disable empty links
|
||||
document.querySelectorAll('[href="#"]')
|
||||
// Disable empty links and submit buttons
|
||||
document.querySelectorAll('[href="#"], [type="submit"]')
|
||||
.forEach(function (link) {
|
||||
link.addEventListener('click', function (event) {
|
||||
event.preventDefault()
|
||||
@ -41,6 +41,11 @@
|
||||
}
|
||||
|
||||
var link = document.querySelector('.bd-aside a[href="' + hash + '"]')
|
||||
|
||||
if (!link) {
|
||||
return
|
||||
}
|
||||
|
||||
var active = document.querySelector('.bd-aside .active')
|
||||
var parent = link.parentNode.parentNode.previousElementSibling
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cheatsheet/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -1748,7 +1748,7 @@
|
||||
</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>
|
||||
</body>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout-rtl/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -270,7 +270,7 @@
|
||||
</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>
|
||||
</body>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -271,7 +271,7 @@
|
||||
</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>
|
||||
</body>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<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>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cover/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
feather.replace()
|
||||
feather.replace({ 'aria-hidden': 'true' })
|
||||
|
||||
// Graphs
|
||||
var ctx = document.getElementById('myChart')
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user