mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-13 13:29:25 +01:00
Add v5.0.0 docs (#33648)
This commit is contained in:
XhmikosR
GitHub
parent
6c2ff8d371
commit
d1334cc7ac
71
404.html
71
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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -147,20 +147,65 @@
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -445,20 +445,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -423,27 +423,72 @@
|
||||
<li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li>
|
||||
<li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
|
||||
</ul>
|
||||
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta3/LICENSE">in the project repository</a> for more information.</p>
|
||||
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v5.0.0/LICENSE">in the project repository</a> for more information.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -407,27 +407,72 @@
|
||||
<p>With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.</p>
|
||||
<p>Our latest release, Bootstrap 5 (currently in development), focuses on improving v4’s codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.</p>
|
||||
<h2 id="get-involved">Get involved</h2>
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta3/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.0/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -422,6 +422,34 @@
|
||||
</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>
|
||||
@ -429,20 +457,6 @@
|
||||
</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>
|
||||
<strong>Gleb Mazovetskiy</strong> @glebm
|
||||
</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/martijncuppens">
|
||||
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
@ -450,42 +464,87 @@
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ysds">
|
||||
<img src="https://github.com/ysds.png" alt="@ysds" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<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>Shohei Yoshida</strong> @ysds
|
||||
<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/ffoodd">
|
||||
<img src="https://github.com/ffoodd.png" alt="@ffoodd" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<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>
|
||||
<strong>Gaël Poupard</strong> @ffoodd
|
||||
<strong>Gleb Mazovetskiy</strong> @glebm
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta3/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.0/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Links to community-translated Bootstrap documentation sites.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -418,20 +418,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
docs/5.0/assets/js/docs.min.js
vendored
2
docs/5.0/assets/js/docs.min.js
vendored
File diff suppressed because one or more lines are too long
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -402,6 +402,7 @@
|
||||
<li><a href="#example">Example</a>
|
||||
<ul>
|
||||
<li><a href="#flush">Flush</a></li>
|
||||
<li><a href="#always-open">Always open</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#accessibility">Accessibility</a></li>
|
||||
@ -436,7 +437,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -474,7 +475,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">h2</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">"collapseOne"</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-collapse collapse show"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"headingOne"</span> <span class="na">data-bs-parent</span><span class="o">=</span><span class="s">"#accordionExample"</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">"accordion-body"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">strong</span><span class="p">></span>This is the first item's accordion body.<span class="p"></</span><span class="nt">strong</span><span class="p">></span> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <span class="p"><</span><span class="nt">code</span><span class="p">></span>.accordion-body<span class="p"></</span><span class="nt">code</span><span class="p">></span>, though the transition does limit overflow.
|
||||
<span class="p"><</span><span class="nt">strong</span><span class="p">></span>This is the first item's accordion body.<span class="p"></</span><span class="nt">strong</span><span class="p">></span> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <span class="p"><</span><span class="nt">code</span><span class="p">></span>.accordion-body<span class="p"></</span><span class="nt">code</span><span class="p">></span>, though the transition does limit overflow.
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
@ -570,6 +571,85 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="always-open">Always open</h3>
|
||||
<p>Omit the <code>data-bs-parent</code> attribute on each <code>.accordion-collapse</code> to make accordion items stay open when another item is opened.</p>
|
||||
<div class="bd-example">
|
||||
<div class="accordion" id="accordionPanelsStayOpenExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion"</span> <span class="na">id</span><span class="o">=</span><span class="s">"accordionPanelsStayOpenExample"</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">"accordion-item"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-header"</span> <span class="na">id</span><span class="o">=</span><span class="s">"panelsStayOpen-headingOne"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-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">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#panelsStayOpen-collapseOne"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"true"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"panelsStayOpen-collapseOne"</span><span class="p">></span>
|
||||
Accordion Item #1
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">h2</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">"panelsStayOpen-collapseOne"</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-collapse collapse show"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"panelsStayOpen-headingOne"</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">"accordion-body"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">strong</span><span class="p">></span>This is the first item's accordion body.<span class="p"></</span><span class="nt">strong</span><span class="p">></span> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <span class="p"><</span><span class="nt">code</span><span class="p">></span>.accordion-body<span class="p"></</span><span class="nt">code</span><span class="p">></span>, though the transition does limit overflow.
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-item"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-header"</span> <span class="na">id</span><span class="o">=</span><span class="s">"panelsStayOpen-headingTwo"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-button collapsed"</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">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#panelsStayOpen-collapseTwo"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"panelsStayOpen-collapseTwo"</span><span class="p">></span>
|
||||
Accordion Item #2
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">h2</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">"panelsStayOpen-collapseTwo"</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-collapse collapse"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"panelsStayOpen-headingTwo"</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">"accordion-body"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">strong</span><span class="p">></span>This is the second item's accordion body.<span class="p"></</span><span class="nt">strong</span><span class="p">></span> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <span class="p"><</span><span class="nt">code</span><span class="p">></span>.accordion-body<span class="p"></</span><span class="nt">code</span><span class="p">></span>, though the transition does limit overflow.
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-item"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-header"</span> <span class="na">id</span><span class="o">=</span><span class="s">"panelsStayOpen-headingThree"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-button collapsed"</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">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#panelsStayOpen-collapseThree"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"panelsStayOpen-collapseThree"</span><span class="p">></span>
|
||||
Accordion Item #3
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">h2</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">"panelsStayOpen-collapseThree"</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-collapse collapse"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"panelsStayOpen-headingThree"</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">"accordion-body"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">strong</span><span class="p">></span>This is the third item's accordion body.<span class="p"></</span><span class="nt">strong</span><span class="p">></span> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <span class="p"><</span><span class="nt">code</span><span class="p">></span>.accordion-body<span class="p"></</span><span class="nt">code</span><span class="p">></span>, though the transition does limit overflow.
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
<p>Please read the <a href="/docs/5.0/components/collapse/#accessibility">collapse accessibility section</a> for more information.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
@ -601,7 +681,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<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-transform</span><span class="o">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="mi">-180</span><span class="kt">deg</span><span class="p">);</span>
|
||||
|
||||
<span class="nv">$accordion-button-icon</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$accordion-icon-color</span><span class="si">}</span><span class="sx">'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>")</span><span class="p">;</span>
|
||||
<span class="nv">$accordion-button-active-icon</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$accordion-icon-active-color</span><span class="si">}</span><span class="sx">'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>")</span><span class="p">;</span>
|
||||
@ -612,20 +692,65 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -402,6 +402,7 @@
|
||||
<ul>
|
||||
<li><a href="#link-color">Link color</a></li>
|
||||
<li><a href="#additional-content">Additional content</a></li>
|
||||
<li><a href="#icons">Icons</a></li>
|
||||
<li><a href="#dismissing">Dismissing</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -551,6 +552,99 @@
|
||||
<span class="p"><</span><span class="nt">hr</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="icons">Icons</h3>
|
||||
<p>Similarly, you can use <a href="/docs/5.0/utilities/flex/">flexbox utilities</a> and <a href="https://icons.getbootstrap.com/">Bootstrap Icons</a> to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.</p>
|
||||
<div class="bd-example">
|
||||
<div class="alert alert-primary d-flex align-items-center" role="alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16">
|
||||
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
||||
</svg>
|
||||
<div>
|
||||
An example alert with an icon
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-primary d-flex align-items-center"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi bi-exclamation-triangle-fill flex-shrink-0 me-2"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">path</span> <span class="na">d</span><span class="o">=</span><span class="s">"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"</span><span class="p">/></span>
|
||||
<span class="p"></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
|
||||
An example alert with an icon
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<p>Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.</p>
|
||||
<div class="bd-example">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
||||
</symbol>
|
||||
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
|
||||
</symbol>
|
||||
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="alert alert-primary d-flex align-items-center" role="alert">
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#info-fill"/></svg>
|
||||
<div>
|
||||
An example alert with an icon
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-success d-flex align-items-center" role="alert">
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#check-circle-fill"/></svg>
|
||||
<div>
|
||||
An example success alert with an icon
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning d-flex align-items-center" role="alert">
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#exclamation-triangle-fill"/></svg>
|
||||
<div>
|
||||
An example warning alert with an icon
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger d-flex align-items-center" role="alert">
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#exclamation-triangle-fill"/></svg>
|
||||
<div>
|
||||
An example danger alert with an icon
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">svg</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">style</span><span class="o">=</span><span class="s">"display: none;"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">symbol</span> <span class="na">id</span><span class="o">=</span><span class="s">"check-circle-fill"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">path</span> <span class="na">d</span><span class="o">=</span><span class="s">"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"</span><span class="p">/></span>
|
||||
<span class="p"></</span><span class="nt">symbol</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">symbol</span> <span class="na">id</span><span class="o">=</span><span class="s">"info-fill"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">path</span> <span class="na">d</span><span class="o">=</span><span class="s">"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"</span><span class="p">/></span>
|
||||
<span class="p"></</span><span class="nt">symbol</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">symbol</span> <span class="na">id</span><span class="o">=</span><span class="s">"exclamation-triangle-fill"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">path</span> <span class="na">d</span><span class="o">=</span><span class="s">"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"</span><span class="p">/></span>
|
||||
<span class="p"></</span><span class="nt">symbol</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">svg</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">"alert alert-primary d-flex align-items-center"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#info-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
|
||||
An example alert with an icon
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-success d-flex align-items-center"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#check-circle-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
|
||||
An example success alert with an icon
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-warning d-flex align-items-center"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#exclamation-triangle-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
|
||||
An example warning alert with an icon
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-danger d-flex align-items-center"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#exclamation-triangle-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
|
||||
An example danger alert with an icon
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="dismissing">Dismissing</h3>
|
||||
<p>Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:</p>
|
||||
<ul>
|
||||
@ -702,20 +796,65 @@ When an alert is dismissed, the element is completely removed from the page stru
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -508,20 +508,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -527,20 +527,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Group a series of buttons together on a single line or stack them in a vertical column.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -731,20 +731,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -820,20 +820,65 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/che
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -1780,20 +1780,65 @@ Note that content should not be larger than the height of the image. If content
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -1080,20 +1080,65 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="A generic close button for dismissing content like modals and alerts.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -452,20 +452,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -659,20 +659,65 @@ Multiple <code><button></code> or <code><a></code> can show and hide
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -435,7 +435,11 @@
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#dropdown-options">Dropdown options</a></li>
|
||||
<li><a href="#dropdown-options">Dropdown options</a>
|
||||
<ul>
|
||||
<li><a href="#auto-close-behavior">Auto close behavior</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
@ -465,7 +469,7 @@
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is <a href="https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision</a>.</p>
|
||||
<p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
|
||||
<p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
<p>The <a href="https://www.w3.org/TR/wai-aria/"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> standard defines an actual <a href="https://www.w3.org/WAI/PF/aria/roles#menu"><code>role="menu"</code> widget</a>, but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.</p>
|
||||
<p>Bootstrap’s dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the <code>role</code> and <code>aria-</code> attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.</p>
|
||||
@ -1515,6 +1519,95 @@
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="auto-close-behavior">Auto close behavior</h3>
|
||||
<p>By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the <code>autoClose</code> option to change this behavior of the dropdown.</p>
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
|
||||
Default dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
|
||||
Clickable outside
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
||||
Clickable inside
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
|
||||
Manual close
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"defaultDropdown"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">data-bs-auto-close</span><span class="o">=</span><span class="s">"true"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||
Default dropdown
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"defaultDropdown"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuClickableOutside"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">data-bs-auto-close</span><span class="o">=</span><span class="s">"inside"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||
Clickable outside
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuClickableOutside"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuClickableInside"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">data-bs-auto-close</span><span class="o">=</span><span class="s">"outside"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||
Clickable inside
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuClickableInside"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuClickable"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">data-bs-auto-close</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||
Manual close
|
||||
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuClickable"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Menu item<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<p>Variables for all dropdowns:</p>
|
||||
@ -1660,7 +1753,7 @@ On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> h
|
||||
</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>
|
||||
<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>. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using <code>data-bs-autoClose="false"</code>, use <code>data-bs-auto-close="false"</code>.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1675,7 +1768,7 @@ On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> h
|
||||
<td><code>boundary</code></td>
|
||||
<td>string | element</td>
|
||||
<td><code>'clippingParents'</code></td>
|
||||
<td>Overflow constraint boundary of the dropdown menu. By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">preventOverflow docs</a>.</td>
|
||||
<td>Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>reference</code></td>
|
||||
@ -1699,6 +1792,20 @@ On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> h
|
||||
<p>For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>autoClose</code></td>
|
||||
<td>boolean | string</td>
|
||||
<td><code>true</code></td>
|
||||
<td>
|
||||
<p>Configure the auto close behavior of the dropdown:</p>
|
||||
<ul>
|
||||
<li><code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.</li>
|
||||
<li><code>false</code> - the dropdown will be closed by clicking the toggle button and manually calling <code>hide</code> or <code>toggle</code> method. (Also will not be closed by pressing <kbd>esc</kbd> key)</li>
|
||||
<li><code>'inside'</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.</li>
|
||||
<li><code>'outside'</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>popperConfig</code></td>
|
||||
<td>null | object | function</td>
|
||||
@ -1819,20 +1926,65 @@ On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> h
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -552,7 +552,7 @@
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="numbered">Numbered</h2>
|
||||
<p>Add the <code>.list-group-numbered</code> modifier class (and optionally use an <code><ol></code> element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <code><ol></code>s default browser styling) for better placement inside list group items and to allow for better customization.</p>
|
||||
<p>Numbers are generated by <code>counter-reset</code> on the <code><ol></code>, and then styled and placed with a <code>::before</code> psuedo-element on the <code><li></code> with <code>counter-increment</code> and <code>content</code>.</p>
|
||||
<p>Numbers are generated by <code>counter-reset</code> on the <code><ol></code>, and then styled and placed with a <code>::before</code> pseudo-element on the <code><li></code> with <code>counter-increment</code> and <code>content</code>.</p>
|
||||
<div class="bd-example">
|
||||
<ol class="list-group list-group-numbered">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
@ -975,7 +975,7 @@
|
||||
<span class="nv">$list-group-background</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-bg-scale</span><span class="p">);</span>
|
||||
<span class="nv">$list-group-color</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-color-scale</span><span class="p">);</span>
|
||||
<span class="k">@if</span> <span class="p">(</span><span class="nf">contrast-ratio</span><span class="p">(</span><span class="nv">$list-group-background</span><span class="o">,</span> <span class="nv">$list-group-color</span><span class="p">)</span> <span class="o"><</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nv">$list-group-color</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$list-group-background</span><span class="p">)</span><span class="o">,</span> <span class="nf">abs</span><span class="p">(</span><span class="nv">$alert-color-scale</span><span class="p">));</span>
|
||||
<span class="nv">$list-group-color</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$list-group-background</span><span class="p">)</span><span class="o">,</span> <span class="nf">abs</span><span class="p">(</span><span class="nv">$list-group-item-color-scale</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@include</span><span class="nd"> list-group-item-variant</span><span class="p">(</span><span class="nv">$state</span><span class="o">,</span> <span class="nv">$list-group-background</span><span class="o">,</span> <span class="nv">$list-group-color</span><span class="p">);</span>
|
||||
@ -1014,10 +1014,10 @@
|
||||
<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">"row"</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-4"</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">"list-group"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-tab"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tablist"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-home-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-home"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"home"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-profile-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-profile"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"profile"</span><span class="p">></span>Profile<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-messages-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-messages"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"messages"</span><span class="p">></span>Messages<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-settings-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-settings"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"settings"</span><span class="p">></span>Settings<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-home-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-home"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"list-home"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-profile-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-profile"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"list-profile"</span><span class="p">></span>Profile<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-messages-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-messages"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"list-messages"</span><span class="p">></span>Messages<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-settings-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-settings"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"list-settings"</span><span class="p">></span>Settings<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-8"</span><span class="p">></span>
|
||||
@ -1154,20 +1154,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -615,15 +615,8 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p>
|
||||
<p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p>
|
||||
<p>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.</p>
|
||||
<p>Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.</p>
|
||||
<p>You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.</p>
|
||||
<p>I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?</p>
|
||||
<p>Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.</p>
|
||||
<p>We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.</p>
|
||||
<div class="modal-body" style="min-height: 1500px">
|
||||
<p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
@ -646,14 +639,9 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.</p>
|
||||
<p>I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?</p>
|
||||
<p>Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.</p>
|
||||
<p>We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.</p>
|
||||
<p>Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p>
|
||||
<p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p>
|
||||
<p>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.</p>
|
||||
<p>Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.</p>
|
||||
<p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<p>This content should appear at the bottom after you scroll.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
@ -681,7 +669,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Placeholder text for this demonstration of a vertically centered modal dialog.</p>
|
||||
<p>This is a vertically centered modal.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
@ -698,10 +686,9 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Placeholder text for this demonstration of a vertically centered modal dialog.</p>
|
||||
<p>In this case, the dialog has a bit more content, just to show how vertical centering can be added to a scrollable modal.</p>
|
||||
<p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p>
|
||||
<p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p>
|
||||
<p>This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
|
||||
<br><br><br><br><br><br><br><br><br><br>
|
||||
<p>Just like that.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
@ -922,67 +909,73 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</code></pre></div><h3 id="toggle-between-modals">Toggle between modals</h3>
|
||||
<p>Toggle between multiple modals with some clever placement of the <code>data-bs-target</code> and <code>data-bs-toggle</code> attributes. For example, you could toggle a password reset modal from within an already open sign in modal. <strong>Please note multiple modals cannot be open at the same time</strong>—this method simply toggles between two separate modals.</p>
|
||||
<div class="bd-example">
|
||||
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Show a second modal and hide this one with the button below.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
|
||||
</div>
|
||||
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Show a second modal and hide this one with the button below.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Hide this modal and show the first with the button below.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
|
||||
</div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- First modal dialog --></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"..."</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span><span class="p">></span>
|
||||
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Hide this modal and show the first with the button below.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModalToggle"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"exampleModalToggleLabel"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-centered"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModalToggleLabel"</span><span class="p">></span>Modal 1<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span>
|
||||
Show a second modal and hide this one with the button below.
|
||||
<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">"modal-footer"</span><span class="p">></span>
|
||||
<span class="c"><!-- Toogle to second dialog --></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#modal2"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Open #modal2<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#exampleModalToggle2"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Open second modal<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="c"><!-- Second modal dialog --></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"modal2"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"..."</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModalToggle2"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"exampleModalToggleLabel2"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-centered"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModalToggleLabel2"</span><span class="p">></span>Modal 2<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span>
|
||||
Hide this modal and show the first with the button below.
|
||||
<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">"modal-footer"</span><span class="p">></span>
|
||||
<span class="c"><!-- Toogle to first dialog, `data-bs-dismiss` attribute can be omitted - clicking on link will close dialog anyway --></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#modal"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Open #modal<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#exampleModalToggle"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Back to first<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="c"><!-- Open first dialog --></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#modal"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Open #modal<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
</code></pre></div><h3 id="change-animation">Change animation</h3>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#exampleModalToggle"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Open first modal<span class="p"></</span><span class="nt">a</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="change-animation">Change animation</h3>
|
||||
<p>The <code>$modal-fade-transform</code> variable determines the transform state of <code>.modal-dialog</code> before the modal fade-in animation, the <code>$modal-show-transform</code> variable determines the transform of <code>.modal-dialog</code> at the end of the modal fade-in animation.</p>
|
||||
<p>If you want for example a zoom-in animation, you can set <code>$modal-fade-transform: scale(.8)</code>.</p>
|
||||
<h3 id="remove-animation">Remove animation</h3>
|
||||
@ -1133,14 +1126,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>What follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.</p>
|
||||
<p>Last Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.</p>
|
||||
<p>Don't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.</p>
|
||||
<p>Yo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.</p>
|
||||
<p>I'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.</p>
|
||||
<p>Growing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.</p>
|
||||
<p>Make it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.</p>
|
||||
<p>We can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.</p>
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
@ -1419,20 +1405,65 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -1427,20 +1427,65 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for how to use Bootstrap’s included navigation components.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -872,8 +872,8 @@
|
||||
<span class="nv">$nav-link-padding-x</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-font-size</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-font-weight</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-hover-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$nav-link-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-disabled-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
|
||||
@ -907,13 +907,13 @@
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
|
||||
<p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
|
||||
<p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
|
||||
<p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -944,13 +944,13 @@
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
|
||||
<p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
|
||||
<p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
|
||||
<p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -981,13 +981,13 @@
|
||||
</ul>
|
||||
<div class="tab-content" id="pills-tabContent">
|
||||
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
|
||||
<p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
|
||||
<p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
|
||||
<p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1018,16 +1018,16 @@
|
||||
</div>
|
||||
<div class="tab-content" id="v-pills-tabContent">
|
||||
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the home tab. Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that wears the crown. Yes, we make angels cry, raining down on earth from up above. Wanna see the show in 3D, a movie. Do you ever feel, feel so paper thin. It’s a yes or no, no maybe.</p>
|
||||
<p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
|
||||
<p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
|
||||
<p><strong>This is some placeholder content the Messages tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
|
||||
<p><strong>This is some placeholder content the Settings tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1192,20 +1192,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -456,7 +456,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas offcanvas-start show"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"offcanvasLabel"</span> <span class="na">data-bs-backdrop</span><span class="o">=</span><span class="s">"false"</span> <span class="na">data-bs-scroll</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas offcanvas-start"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"offcanvasLabel"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasLabel"</span><span class="p">></span>Offcanvas<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close text-reset"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
@ -534,9 +534,33 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<ul>
|
||||
<li><code>.offcanvas-start</code> places offcanvas on the left of the viewport (shown above)</li>
|
||||
<li><code>.offcanvas-end</code> places offcanvas on the right of the viewport</li>
|
||||
<li><code>.offcanvas-top</code> places offcanvas on the top of the viewport</li>
|
||||
<li><code>.offcanvas-bottom</code> places offcanvas on the bottom of the viewport</li>
|
||||
</ul>
|
||||
<p>Try the right and bottom examples out below.</p>
|
||||
<p>Try the top, right, and bottom examples out below.</p>
|
||||
<div class="bd-example">
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
|
||||
|
||||
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#offcanvasTop"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"offcanvasTop"</span><span class="p">></span>Toggle top offcanvas<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas offcanvas-top"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasTop"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"offcanvasTopLabel"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-header"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"offcanvasTopLabel"</span><span class="p">></span>Offcanvas top<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close text-reset"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"offcanvas"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"offcanvas-body"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<div class="bd-example">
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
|
||||
|
||||
@ -662,7 +686,6 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="nv">$offcanvas-title-line-height</span><span class="o">:</span> <span class="nv">$modal-title-line-height</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-bg-color</span><span class="o">:</span> <span class="nv">$modal-content-bg</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-color</span><span class="o">:</span> <span class="nv">$modal-content-color</span><span class="p">;</span>
|
||||
<span class="nv">$offcanvas-body-backdrop-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$modal-backdrop-bg</span><span class="o">,</span> <span class="nv">$modal-backdrop-opacity</span><span class="p">);</span>
|
||||
<span class="nv">$offcanvas-box-shadow</span><span class="o">:</span> <span class="nv">$modal-content-box-shadow-xs</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h2 id="usage">Usage</h2>
|
||||
@ -749,7 +772,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<td>Hides an offcanvas element. <strong>Returns to the caller before the offcanvas element has actually been hidden</strong> (i.e. before the <code>hidden.bs.offcanvas</code> event occurs).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>_getInstance</code></td>
|
||||
<td><code>getInstance</code></td>
|
||||
<td><em>Static</em> method which allows you to get the offcanvas instance associated with a DOM element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -794,20 +817,65 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for 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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -711,20 +711,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -447,7 +447,7 @@
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>Things to know when using the popover plugin:</p>
|
||||
<ul>
|
||||
<li>Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper in order for popovers to work!</li>
|
||||
<li>Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper in order for popovers to work!</li>
|
||||
<li>Popovers require the <a href="/docs/5.0/components/tooltips/">tooltip plugin</a> as a dependency.</li>
|
||||
<li>Popovers are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
|
||||
<li>Zero-length <code>title</code> and <code>content</code> values will never show a popover.</li>
|
||||
@ -571,7 +571,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</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-animation=""</code>. Make sure to change the case type of the option name from camelCase to kebab-case when passing via data attributes. For example: instead of using <code>data-bs-customClass="beautifier"</code>, use <code>data-bs-custom-class="beautifier"</code>.</p>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-bs-</code>, as in <code>data-bs-animation=""</code>. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using <code>data-bs-customClass="beautifier"</code>, use <code>data-bs-custom-class="beautifier"</code>.</p>
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code>, and <code>allowList</code> options cannot be supplied using data attributes.
|
||||
</div>
|
||||
@ -678,7 +678,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
<td><code>boundary</code></td>
|
||||
<td>string | element</td>
|
||||
<td><code>'clippingParents'</code></td>
|
||||
<td>Overflow constraint boundary of the popover. By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">preventOverflow docs</a>.</td>
|
||||
<td>Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>customClass</code></td>
|
||||
@ -818,20 +818,65 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -603,20 +603,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -445,66 +445,65 @@
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
<a class="nav-link" href="#scrollspyHeading1">First</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
<a class="nav-link" href="#scrollspyHeading2">Second</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#one">one</a></li>
|
||||
<li><a class="dropdown-item" href="#two">two</a></li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#three">three</a></li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
|
||||
<h4 id="fat">@fat</h4>
|
||||
<p>Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
|
||||
<h4 id="mdo">@mdo</h4>
|
||||
<p>Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.</p>
|
||||
<h4 id="one">one</h4>
|
||||
<p>Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
|
||||
<h4 id="two">two</h4>
|
||||
<p>Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.</p>
|
||||
<h4 id="three">three</h4>
|
||||
<p>Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.</p>
|
||||
<p>And some more placeholder content, for good measure.</p>
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading3">Thidd heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading4">Fourth heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading5">Fifth heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbar-example2"</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light px-3"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-brand"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Navbar<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#fat"</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#scrollspyHeading1"</span><span class="p">></span>First<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#mdo"</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#scrollspyHeading2"</span><span class="p">></span>Second<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item dropdown"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>Dropdown<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu dropdown-menu-end"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#one"</span><span class="p">></span>one<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#two"</span><span class="p">></span>two<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#scrollspyHeading3"</span><span class="p">></span>Third<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#scrollspyHeading4"</span><span class="p">></span>Fourth<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">hr</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-divider"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#three"</span><span class="p">></span>three<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#scrollspyHeading5"</span><span class="p">></span>Fifth<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">data-bs-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#navbar-example2"</span> <span class="na">data-bs-offset</span><span class="o">=</span><span class="s">"0"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"fat"</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">data-bs-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#navbar-example2"</span> <span class="na">data-bs-offset</span><span class="o">=</span><span class="s">"0"</span> <span class="na">class</span><span class="o">=</span><span class="s">"scrollspy-example"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"scrollspyHeading1"</span><span class="p">></span>First heading<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"mdo"</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"scrollspyHeading2"</span><span class="p">></span>Second heading<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"one"</span><span class="p">></span>one<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"scrollspyHeading3"</span><span class="p">></span>Thidd heading<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"two"</span><span class="p">></span>two<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"scrollspyHeading4"</span><span class="p">></span>Fourth heading<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"three"</span><span class="p">></span>three<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"scrollspyHeading5"</span><span class="p">></span>Fifth heading<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><h2 id="example-with-nested-nav">Example with nested nav</h2>
|
||||
@ -512,7 +511,7 @@
|
||||
<div class="bd-example">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column">
|
||||
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1">Item 1</a>
|
||||
@ -532,24 +531,24 @@
|
||||
<div class="col-8">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
|
||||
<h4 id="item-1">Item 1</h4>
|
||||
<p>Placeholder content for the scrollspy example. This one relates to item 1. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h5 id="item-1-1">Item 1-1</h5>
|
||||
<p>Placeholder content for the scrollspy example. This one relates to the item 1-1. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h5 id="item-1-2">Item 1-2</h5>
|
||||
<p>Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="item-2">Item 2</h4>
|
||||
<p>Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.</p>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="item-3">Item 3</h4>
|
||||
<p>Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.</p>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h5 id="item-3-1">Item 3-1</h5>
|
||||
<p>Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.</p>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h5 id="item-3-2">Item 3-2</h5>
|
||||
<p>Placeholder content for the scrollspy example. This one relates to item 3-2. You're original, cannot be replaced. All night they're playing, your song. California girls we're undeniable. Like a bird without a cage. There is no fear now, let go and just be free, I will love you unconditionally. I can see the writing on the wall. You could travel the world but nothing comes close to the golden coast.</p>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbar-example3"</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light"</span><span class="p">></span>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbar-example3"</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light flex-column align-items-stretch p-3"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-brand"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Navbar<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills flex-column"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
@ -597,13 +596,13 @@
|
||||
<div class="col-8">
|
||||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
|
||||
<h4 id="list-item-1">Item 1</h4>
|
||||
<p>Placeholder content for the scrollspy list-group example. This one relates to item 1. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. Thought that I was the exception.</p>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="list-item-2">Item 2</h4>
|
||||
<p>Placeholder content for the scrollspy list-group example. This one relates to item 2. Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, you're a firework. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.</p>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="list-item-3">Item 3</h4>
|
||||
<p>Placeholder content for the scrollspy list-group example. This one relates to item 3. We go higher and higher. Never one without the other, we made a pact. I'm walking on air. Someone said you had your tattoo removed. Now I’m floating like a butterfly. Tone, tan fit and ready, turn it up cause its gettin' heavy. Cause once you’re mine, once you’re mine. You just gotta ignite the light and let it shine! So we hit the boulevard. Do you ever feel, feel so paper thin. I see it all, I see it now.</p>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="list-item-4">Item 4</h4>
|
||||
<p>Placeholder content for the scrollspy list-group example. This one relates to item 4. Summer after high school when we first met. There is no fear now, let go and just be free, I will love you unconditionally. Sun-kissed skin so hot we'll melt your popsicle. This love will make you levitate.</p>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -725,20 +724,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -692,6 +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-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>
|
||||
|
||||
@ -721,20 +722,65 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -477,7 +477,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="live">Live</h3>
|
||||
<p>Click the button the below to show as toast (positioning with our utilities in the lower right corner) that has been hidden by default with <code>.hide</code>.</p>
|
||||
<p>Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with <code>.hide</code>.</p>
|
||||
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
|
||||
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
@ -511,7 +511,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><h3 id="translucent">Translucent</h3>
|
||||
<p>Toasts are slightly translucent, too, so they blend over whatever they might appear over.</p>
|
||||
<p>Toasts are slightly translucent to blend in with what’s below them.</p>
|
||||
<div class="bd-example bg-dark">
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
@ -592,7 +592,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="custom-content">Custom content</h3>
|
||||
<p>Customize your toasts by removing sub-components, tweaking with <a href="/docs/5.0/utilities/api/">utilities</a>, or adding your own markup. Here we’ve created a simpler toast by removing the default <code>.toast-header</code>, adding a custom hide icon from <a href="https://icons.getbootstrap.com/">Bootstrap Icons</a>, and using some <a href="/docs/5.0/utilities/flex/">flexbox utilities</a> to adjust the layout.</p>
|
||||
<p>Customize your toasts by removing sub-components, tweaking them with <a href="/docs/5.0/utilities/api/">utilities</a>, or by adding your own markup. Here we’ve created a simpler toast by removing the default <code>.toast-header</code>, adding a custom hide icon from <a href="https://icons.getbootstrap.com/">Bootstrap Icons</a>, and using some <a href="/docs/5.0/utilities/flex/">flexbox utilities</a> to adjust the layout.</p>
|
||||
<div class="bd-example bg-light">
|
||||
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
@ -821,10 +821,10 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
<p>Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code> region</a>. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include <code>aria-atomic="true"</code> to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the <a href="/docs/5.0/components/alerts/">alert component</a> instead of toast.</p>
|
||||
<p>Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code> region</a>. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include <code>aria-atomic="true"</code> to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the <a href="/docs/5.0/components/alerts/">alert component</a> instead of toast.</p>
|
||||
<p>Note that the live region needs to be present in the markup <em>before</em> the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.</p>
|
||||
<p>You also need to adapt the <code>role</code> and <code>aria-live</code> level depending on the content. If it’s an important message like an error, use <code>role="alert" aria-live="assertive"</code>, otherwise use <code>role="status" aria-live="polite"</code> attributes.</p>
|
||||
<p>As the content you’re displaying changes, be sure to update the <a href="#options"><code>delay</code> timeout</a> to ensure people have enough time to read the toast.</p>
|
||||
<p>As the content you’re displaying changes, be sure to update the <a href="#options"><code>delay</code> timeout</a> so that users have enough time to read the toast.</p>
|
||||
<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">"toast"</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">"polite"</span> <span class="na">aria-atomic</span><span class="o">=</span><span class="s">"true"</span> <span class="na">data-bs-delay</span><span class="o">=</span><span class="s">"10000"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</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="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
@ -853,6 +853,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
Hello, world! This is a toast message.
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<p>While technically it’s possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long <a href="#options"><code>delay</code> timeout</a>, keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don’t receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with <code>autohide: false</code>.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$toast-max-width</span><span class="o">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
|
||||
@ -966,20 +967,65 @@ You have to manually call this method, instead your toast won’t show.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -442,7 +442,7 @@
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>Things to know when using the tooltip plugin:</p>
|
||||
<ul>
|
||||
<li>Tooltips rely on the 3rd party library <a href="https://popper.js.org/">Popper</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper in order for tooltips to work!</li>
|
||||
<li>Tooltips rely on the 3rd party library <a href="https://popper.js.org/">Popper</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper in order for tooltips to work!</li>
|
||||
<li>Tooltips are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
|
||||
<li>Tooltips with zero-length titles are never displayed.</li>
|
||||
<li>Specify <code>container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
|
||||
@ -531,11 +531,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced
|
||||
<span class="kd">var</span> <span class="nx">tooltip</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tooltip</span><span class="p">(</span><span class="nx">exampleEl</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span>
|
||||
</code></pre></div><div class="bd-callout bd-callout-warning">
|
||||
<h5 id="overflow-auto-and-scroll">Overflow <code>auto</code> and <code>scroll</code></h5>
|
||||
<p>Tooltip position attempts to automatically change when a parent container has <code>overflow: auto</code> or <code>overflow: scroll</code> like our <code>.table-responsive</code>, but still keeps the original placement’s positioning. To resolve, set the <code>boundary</code> option to anything other than default value, <code>'scrollParent'</code>, such as <code>'window'</code>:</p>
|
||||
<p>Tooltip position attempts to automatically change when a <strong>parent container</strong> has <code>overflow: auto</code> or <code>overflow: scroll</code> like our <code>.table-responsive</code>, but still keeps the original placement’s positioning. To resolve this, set the <a href="https://popper.js.org/docs/v2/modifiers/flip/#boundary"><code>boundary</code> option</a> (for the flip modifier using the <code>popperConfig</code> option) to any HTMLElement to override the default value, <code>'clippingParents'</code>, such as <code>document.body</code>:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">exampleEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="kd">var</span> <span class="nx">tooltip</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tooltip</span><span class="p">(</span><span class="nx">exampleEl</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">boundary</span><span class="o">:</span> <span class="s1">'window'</span>
|
||||
<span class="p">})</span>
|
||||
<span class="nx">boundary</span><span class="o">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span> <span class="c1">// or document.querySelector('#boundary')
|
||||
</span><span class="c1"></span><span class="p">})</span>
|
||||
</code></pre></div>
|
||||
</div>
|
||||
|
||||
@ -568,7 +568,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="p">></span></code></pre></div>
|
||||
</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-animation=""</code>. Make sure to change the case type of the option name from camelCase to kebab-case when passing via data attributes. For example: instead of using <code>data-bs-customClass="beautifier"</code>, use <code>data-bs-custom-class="beautifier"</code>.</p>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-bs-</code>, as in <code>data-bs-animation=""</code>. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using <code>data-bs-customClass="beautifier"</code>, use <code>data-bs-custom-class="beautifier"</code>.</p>
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code>, and <code>allowList</code> options cannot be supplied using data attributes.
|
||||
</div>
|
||||
@ -673,7 +673,7 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
<td><code>boundary</code></td>
|
||||
<td>string | element</td>
|
||||
<td><code>'clippingParents'</code></td>
|
||||
<td>Overflow constraint boundary of the tooltip. By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">preventOverflow docs</a>.</td>
|
||||
<td>Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>customClass</code></td>
|
||||
@ -817,20 +817,65 @@ Note that for security reasons the <code>sanitize</code>, <code>sanitizeFn</code
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -445,20 +445,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -470,20 +470,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -822,20 +822,65 @@ To edit settings, press <span class="p"><</span><span class="nt">kbd</span><s
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -1195,31 +1195,29 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-sm table-dark"</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">"table-responsive"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table align-middle"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">thead</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">tr</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">thead</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">tbody</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">tr</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-bottom"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">td</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">td</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-top"</span><span class="p">></span>This cell is aligned to the top.<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">td</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">tbody</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">table</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">table</span><span class="p">></span>
|
||||
<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">"table-responsive"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table align-middle"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">thead</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">tr</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">thead</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">tbody</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">tr</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-bottom"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">td</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">td</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-top"</span><span class="p">></span>This cell is aligned to the top.<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">td</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">tbody</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">table</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><h2 id="nesting">Nesting</h2>
|
||||
<p>Border styles, active styles, and table variants are not inherited by nested tables.</p>
|
||||
<div class="bd-example">
|
||||
@ -2050,20 +2048,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -824,20 +824,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -809,20 +809,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn how and why we build nearly all our components responsively and with base and modifier classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -440,7 +440,7 @@
|
||||
<span class="nv">$list-group-background</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-bg-scale</span><span class="p">);</span>
|
||||
<span class="nv">$list-group-color</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-color-scale</span><span class="p">);</span>
|
||||
<span class="k">@if</span> <span class="p">(</span><span class="nf">contrast-ratio</span><span class="p">(</span><span class="nv">$list-group-background</span><span class="o">,</span> <span class="nv">$list-group-color</span><span class="p">)</span> <span class="o"><</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nv">$list-group-color</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$list-group-background</span><span class="p">)</span><span class="o">,</span> <span class="nf">abs</span><span class="p">(</span><span class="nv">$alert-color-scale</span><span class="p">));</span>
|
||||
<span class="nv">$list-group-color</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$list-group-background</span><span class="p">)</span><span class="o">,</span> <span class="nf">abs</span><span class="p">(</span><span class="nv">$list-group-item-color-scale</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@include</span><span class="nd"> list-group-item-variant</span><span class="p">(</span><span class="nv">$state</span><span class="o">,</span> <span class="nv">$list-group-background</span><span class="o">,</span> <span class="nv">$list-group-color</span><span class="p">);</span>
|
||||
@ -521,20 +521,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use Bootstrap’s CSS custom properties for fast and forward-looking design and development.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -457,20 +457,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -517,20 +517,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -488,20 +488,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -473,20 +473,65 @@
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@ -417,6 +417,11 @@
|
||||
<li><a href="#add-and-subtract-functions">Add and Subtract functions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#mixins">Mixins</a>
|
||||
<ul>
|
||||
<li><a href="#color-schemes">Color schemes</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -618,26 +623,90 @@
|
||||
<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 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>
|
||||
<h3 id="color-schemes">Color schemes</h3>
|
||||
<p>A shorthand mixin for the <code>prefers-color-scheme</code> media query is available with support for <code>light</code>, <code>dark</code>, and custom color schemes.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> color-scheme</span><span class="p">(</span><span class="nv">$name</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">prefers-color-scheme</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$name</span><span class="si">}</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@content</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="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="c1">// Insert dark mode styles here
|
||||
</span><span class="c1"></span> <span class="p">}</span>
|
||||
|
||||
<span class="k">@include</span><span class="nd"> color-scheme</span><span class="p">(</span><span class="n">custom-named-scheme</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Insert custom color scheme styles here
|
||||
</span><span class="c1"></span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-grid.css
vendored
2
docs/5.0/dist/css/bootstrap-grid.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Grid v5.0.0 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-grid.css.map
vendored
2
docs/5.0/dist/css/bootstrap-grid.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap-grid.min.css
vendored
2
docs/5.0/dist/css/bootstrap-grid.min.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Grid v5.0.0 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-grid.min.css.map
vendored
2
docs/5.0/dist/css/bootstrap-grid.min.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap-grid.rtl.css
vendored
2
docs/5.0/dist/css/bootstrap-grid.rtl.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Grid v5.0.0 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
|
||||
2
docs/5.0/dist/css/bootstrap-grid.rtl.css.map
vendored
2
docs/5.0/dist/css/bootstrap-grid.rtl.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/5.0/dist/css/bootstrap-grid.rtl.min.css
vendored
2
docs/5.0/dist/css/bootstrap-grid.rtl.min.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Grid v5.0.0 (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.css
vendored
2
docs/5.0/dist/css/bootstrap-reboot.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Reboot v5.0.0 (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.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Reboot v5.0.0 (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.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Reboot v5.0.0 (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.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Reboot v5.0.0 (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.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Utilities v5.0.0 (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.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Utilities v5.0.0 (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.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Utilities v5.0.0 (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.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap Utilities v5.0.0 (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
88
docs/5.0/dist/css/bootstrap.css
vendored
88
docs/5.0/dist/css/bootstrap.css
vendored
@ -1,6 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.0 (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)
|
||||
@ -2169,7 +2169,10 @@ progress {
|
||||
.form-control[type=file] {
|
||||
overflow: hidden;
|
||||
}
|
||||
.form-control[type=file]:not(:disabled):not([readonly]) {
|
||||
.form-control[type=file]:not(:disabled):not(:-moz-read-only) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-control[type=file]:not(:disabled):not(:read-only) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-control:focus {
|
||||
@ -2190,7 +2193,11 @@ progress {
|
||||
color: #6c757d;
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control:disabled, .form-control[readonly] {
|
||||
.form-control:-moz-read-only {
|
||||
background-color: #e9ecef;
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control:disabled, .form-control:read-only {
|
||||
background-color: #e9ecef;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -2214,7 +2221,10 @@ progress {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
|
||||
.form-control:hover:not(:disabled):not(:-moz-read-only)::file-selector-button {
|
||||
background-color: #dde0e3;
|
||||
}
|
||||
.form-control:hover:not(:disabled):not(:read-only)::file-selector-button {
|
||||
background-color: #dde0e3;
|
||||
}
|
||||
.form-control::-webkit-file-upload-button {
|
||||
@ -2239,7 +2249,7 @@ progress {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
|
||||
.form-control:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
|
||||
background-color: #dde0e3;
|
||||
}
|
||||
|
||||
@ -2312,7 +2322,10 @@ textarea.form-control-lg {
|
||||
height: auto;
|
||||
padding: 0.375rem;
|
||||
}
|
||||
.form-control-color:not(:disabled):not([readonly]) {
|
||||
.form-control-color:not(:disabled):not(:-moz-read-only) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-control-color:not(:disabled):not(:read-only) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-control-color::-moz-color-swatch {
|
||||
@ -2759,6 +2772,8 @@ textarea.form-control-lg {
|
||||
|
||||
.was-validated .form-select:valid, .form-select.is-valid {
|
||||
border-color: #198754;
|
||||
}
|
||||
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
|
||||
padding-right: 4.125rem;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
|
||||
background-position: right 0.75rem center, center right 2.25rem;
|
||||
@ -2841,6 +2856,8 @@ textarea.form-control-lg {
|
||||
|
||||
.was-validated .form-select:invalid, .form-select.is-invalid {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
|
||||
padding-right: 4.125rem;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
|
||||
background-position: right 0.75rem center, center right 2.25rem;
|
||||
@ -3427,7 +3444,6 @@ textarea.form-control-lg {
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
min-width: 10rem;
|
||||
@ -3443,6 +3459,7 @@ textarea.form-control-lg {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.dropdown-menu[data-bs-popper] {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
@ -3568,12 +3585,10 @@ textarea.form-control-lg {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.dropend .dropdown-menu {
|
||||
.dropend .dropdown-menu[data-bs-popper] {
|
||||
top: 0;
|
||||
right: auto;
|
||||
left: 100%;
|
||||
}
|
||||
.dropend .dropdown-menu[data-bs-popper] {
|
||||
margin-top: 0;
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
@ -3594,12 +3609,10 @@ textarea.form-control-lg {
|
||||
vertical-align: 0;
|
||||
}
|
||||
|
||||
.dropstart .dropdown-menu {
|
||||
.dropstart .dropdown-menu[data-bs-popper] {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
.dropstart .dropdown-menu[data-bs-popper] {
|
||||
margin-top: 0;
|
||||
margin-right: 0.125rem;
|
||||
}
|
||||
@ -3818,6 +3831,7 @@ textarea.form-control-lg {
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: #0d6efd;
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
}
|
||||
@ -3826,6 +3840,9 @@ textarea.form-control-lg {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.nav-link:hover, .nav-link:focus {
|
||||
color: #0a58ca;
|
||||
}
|
||||
.nav-link.disabled {
|
||||
color: #6c757d;
|
||||
pointer-events: none;
|
||||
@ -4404,7 +4421,7 @@ textarea.form-control-lg {
|
||||
}
|
||||
.accordion-button:not(.collapsed)::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
|
||||
transform: rotate(180deg);
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
.accordion-button::after {
|
||||
flex-shrink: 0;
|
||||
@ -4437,7 +4454,6 @@ textarea.form-control-lg {
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
margin-bottom: -1px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
@ -4449,8 +4465,10 @@ textarea.form-control-lg {
|
||||
border-top-left-radius: calc(0.25rem - 1px);
|
||||
border-top-right-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
.accordion-item:not(:first-of-type) {
|
||||
border-top: 0;
|
||||
}
|
||||
.accordion-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
@ -5261,7 +5279,7 @@ textarea.form-control-lg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1050;
|
||||
z-index: 1040;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
@ -5314,14 +5332,6 @@ textarea.form-control-lg {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.modal-scrollbar-measure {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.modal-dialog {
|
||||
max-width: 500px;
|
||||
@ -5934,7 +5944,7 @@ textarea.form-control-lg {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: -0.125em;
|
||||
border: 0.25em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
@ -5971,7 +5981,7 @@ textarea.form-control-lg {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: -0.125em;
|
||||
background-color: currentColor;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
@ -5994,7 +6004,7 @@ textarea.form-control-lg {
|
||||
.offcanvas {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1040;
|
||||
z-index: 1050;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
@ -6012,6 +6022,7 @@ textarea.form-control-lg {
|
||||
|
||||
.offcanvas-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
@ -6047,6 +6058,16 @@ textarea.form-control-lg {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30vh;
|
||||
max-height: 100%;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
@ -6060,17 +6081,6 @@ textarea.form-control-lg {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.offcanvas-backdrop::before {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1039;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
|
||||
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
88
docs/5.0/dist/css/bootstrap.rtl.css
vendored
88
docs/5.0/dist/css/bootstrap.rtl.css
vendored
@ -1,6 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.0 (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)
|
||||
@ -2167,7 +2167,10 @@ progress {
|
||||
.form-control[type=file] {
|
||||
overflow: hidden;
|
||||
}
|
||||
.form-control[type=file]:not(:disabled):not([readonly]) {
|
||||
.form-control[type=file]:not(:disabled):not(:-moz-read-only) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-control[type=file]:not(:disabled):not(:read-only) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-control:focus {
|
||||
@ -2188,7 +2191,11 @@ progress {
|
||||
color: #6c757d;
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control:disabled, .form-control[readonly] {
|
||||
.form-control:-moz-read-only {
|
||||
background-color: #e9ecef;
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control:disabled, .form-control:read-only {
|
||||
background-color: #e9ecef;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -2212,7 +2219,10 @@ progress {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
|
||||
.form-control:hover:not(:disabled):not(:-moz-read-only)::file-selector-button {
|
||||
background-color: #dde0e3;
|
||||
}
|
||||
.form-control:hover:not(:disabled):not(:read-only)::file-selector-button {
|
||||
background-color: #dde0e3;
|
||||
}
|
||||
.form-control::-webkit-file-upload-button {
|
||||
@ -2237,7 +2247,7 @@ progress {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
|
||||
.form-control:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
|
||||
background-color: #dde0e3;
|
||||
}
|
||||
|
||||
@ -2310,7 +2320,10 @@ textarea.form-control-lg {
|
||||
height: auto;
|
||||
padding: 0.375rem;
|
||||
}
|
||||
.form-control-color:not(:disabled):not([readonly]) {
|
||||
.form-control-color:not(:disabled):not(:-moz-read-only) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-control-color:not(:disabled):not(:read-only) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-control-color::-moz-color-swatch {
|
||||
@ -2757,6 +2770,8 @@ textarea.form-control-lg {
|
||||
|
||||
.was-validated .form-select:valid, .form-select.is-valid {
|
||||
border-color: #198754;
|
||||
}
|
||||
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
|
||||
padding-left: 4.125rem;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
|
||||
background-position: left 0.75rem center, center left 2.25rem;
|
||||
@ -2839,6 +2854,8 @@ textarea.form-control-lg {
|
||||
|
||||
.was-validated .form-select:invalid, .form-select.is-invalid {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
|
||||
padding-left: 4.125rem;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
|
||||
background-position: left 0.75rem center, center left 2.25rem;
|
||||
@ -3425,7 +3442,6 @@ textarea.form-control-lg {
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
min-width: 10rem;
|
||||
@ -3441,6 +3457,7 @@ textarea.form-control-lg {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.dropdown-menu[data-bs-popper] {
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
@ -3566,12 +3583,10 @@ textarea.form-control-lg {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.dropend .dropdown-menu {
|
||||
.dropend .dropdown-menu[data-bs-popper] {
|
||||
top: 0;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
}
|
||||
.dropend .dropdown-menu[data-bs-popper] {
|
||||
margin-top: 0;
|
||||
margin-right: 0.125rem;
|
||||
}
|
||||
@ -3592,12 +3607,10 @@ textarea.form-control-lg {
|
||||
vertical-align: 0;
|
||||
}
|
||||
|
||||
.dropstart .dropdown-menu {
|
||||
.dropstart .dropdown-menu[data-bs-popper] {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
right: auto;
|
||||
}
|
||||
.dropstart .dropdown-menu[data-bs-popper] {
|
||||
margin-top: 0;
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
@ -3816,6 +3829,7 @@ textarea.form-control-lg {
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: #0d6efd;
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
}
|
||||
@ -3824,6 +3838,9 @@ textarea.form-control-lg {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.nav-link:hover, .nav-link:focus {
|
||||
color: #0a58ca;
|
||||
}
|
||||
.nav-link.disabled {
|
||||
color: #6c757d;
|
||||
pointer-events: none;
|
||||
@ -4402,7 +4419,7 @@ textarea.form-control-lg {
|
||||
}
|
||||
.accordion-button:not(.collapsed)::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
|
||||
transform: rotate(-180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.accordion-button::after {
|
||||
flex-shrink: 0;
|
||||
@ -4435,7 +4452,6 @@ textarea.form-control-lg {
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
margin-bottom: -1px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
@ -4447,8 +4463,10 @@ textarea.form-control-lg {
|
||||
border-top-right-radius: calc(0.25rem - 1px);
|
||||
border-top-left-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
.accordion-item:not(:first-of-type) {
|
||||
border-top: 0;
|
||||
}
|
||||
.accordion-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
@ -5259,7 +5277,7 @@ textarea.form-control-lg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1050;
|
||||
z-index: 1040;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
@ -5312,14 +5330,6 @@ textarea.form-control-lg {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.modal-scrollbar-measure {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.modal-dialog {
|
||||
max-width: 500px;
|
||||
@ -5919,7 +5929,7 @@ textarea.form-control-lg {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: -0.125em;
|
||||
border: 0.25em solid currentColor;
|
||||
border-left-color: transparent;
|
||||
border-radius: 50%;
|
||||
@ -5956,7 +5966,7 @@ textarea.form-control-lg {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: -0.125em;
|
||||
background-color: currentColor;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
@ -5979,7 +5989,7 @@ textarea.form-control-lg {
|
||||
.offcanvas {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1040;
|
||||
z-index: 1050;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
@ -5997,6 +6007,7 @@ textarea.form-control-lg {
|
||||
|
||||
.offcanvas-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
@ -6032,6 +6043,16 @@ textarea.form-control-lg {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.offcanvas-top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30vh;
|
||||
max-height: 100%;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.offcanvas-bottom {
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -6045,17 +6066,6 @@ textarea.form-control-lg {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.offcanvas-backdrop::before {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1039;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
|
||||
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
997
docs/5.0/dist/js/bootstrap.bundle.js
vendored
997
docs/5.0/dist/js/bootstrap.bundle.js
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.0 (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.0-beta3): util/index.js
|
||||
* Bootstrap (v5.0.0): util/index.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -56,7 +56,7 @@
|
||||
|
||||
|
||||
if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) {
|
||||
hrefAttr = '#' + hrefAttr.split('#')[1];
|
||||
hrefAttr = `#${hrefAttr.split('#')[1]}`;
|
||||
}
|
||||
|
||||
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null;
|
||||
@ -134,7 +134,7 @@
|
||||
const valueType = value && isElement$1(value) ? 'element' : toType(value);
|
||||
|
||||
if (!new RegExp(expectedTypes).test(valueType)) {
|
||||
throw new TypeError(`${componentName.toUpperCase()}: ` + `Option "${property}" provided type "${valueType}" ` + `but expected type "${expectedTypes}".`);
|
||||
throw new TypeError(`${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -192,7 +192,7 @@
|
||||
return findShadowRoot(element.parentNode);
|
||||
};
|
||||
|
||||
const noop = () => function () {};
|
||||
const noop = () => {};
|
||||
|
||||
const reflow = element => element.offsetHeight;
|
||||
|
||||
@ -236,9 +236,15 @@
|
||||
});
|
||||
};
|
||||
|
||||
const execute = callback => {
|
||||
if (typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/data.js
|
||||
* Bootstrap (v5.0.0): dom/data.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -292,7 +298,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/event-handler.js
|
||||
* Bootstrap (v5.0.0): dom/event-handler.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -312,6 +318,7 @@
|
||||
mouseenter: 'mouseover',
|
||||
mouseleave: 'mouseout'
|
||||
};
|
||||
const customEventsRegex = /^(mouseenter|mouseleave)/i;
|
||||
const nativeEvents = new Set(['click', 'dblclick', 'mouseup', 'mousedown', 'contextmenu', 'mousewheel', 'DOMMouseScroll', 'mouseover', 'mouseout', 'mousemove', 'selectstart', 'selectend', 'keydown', 'keypress', 'keyup', 'orientationchange', 'touchstart', 'touchmove', 'touchend', 'touchcancel', 'pointerdown', 'pointermove', 'pointerup', 'pointerleave', 'pointercancel', 'gesturestart', 'gesturechange', 'gestureend', 'focus', 'blur', 'change', 'reset', 'select', 'submit', 'focusin', 'focusout', 'load', 'unload', 'beforeunload', 'resize', 'move', 'DOMContentLoaded', 'readystatechange', 'error', 'abort', 'scroll']);
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@ -355,7 +362,7 @@
|
||||
|
||||
if (handler.oneOff) {
|
||||
// eslint-disable-next-line unicorn/consistent-destructuring
|
||||
EventHandler.off(element, event.type, fn);
|
||||
EventHandler.off(element, event.type, selector, fn);
|
||||
}
|
||||
|
||||
return fn.apply(target, [event]);
|
||||
@ -384,15 +391,8 @@
|
||||
|
||||
function normalizeParams(originalTypeEvent, handler, delegationFn) {
|
||||
const delegation = typeof handler === 'string';
|
||||
const originalHandler = delegation ? delegationFn : handler; // allow to get the native events from namespaced events ('click.bs.button' --> 'click')
|
||||
|
||||
let typeEvent = originalTypeEvent.replace(stripNameRegex, '');
|
||||
const custom = customEvents[typeEvent];
|
||||
|
||||
if (custom) {
|
||||
typeEvent = custom;
|
||||
}
|
||||
|
||||
const originalHandler = delegation ? delegationFn : handler;
|
||||
let typeEvent = getTypeEvent(originalTypeEvent);
|
||||
const isNative = nativeEvents.has(typeEvent);
|
||||
|
||||
if (!isNative) {
|
||||
@ -410,6 +410,24 @@
|
||||
if (!handler) {
|
||||
handler = delegationFn;
|
||||
delegationFn = null;
|
||||
} // in case of mouseenter or mouseleave wrap the handler within a function that checks for its DOM position
|
||||
// this prevents the handler from being dispatched the same way as mouseover or mouseout does
|
||||
|
||||
|
||||
if (customEventsRegex.test(originalTypeEvent)) {
|
||||
const wrapFn = fn => {
|
||||
return function (event) {
|
||||
if (!event.relatedTarget || event.relatedTarget !== event.delegateTarget && !event.delegateTarget.contains(event.relatedTarget)) {
|
||||
return fn.call(this, event);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
if (delegationFn) {
|
||||
delegationFn = wrapFn(delegationFn);
|
||||
} else {
|
||||
handler = wrapFn(handler);
|
||||
}
|
||||
}
|
||||
|
||||
const [delegation, originalHandler, typeEvent] = normalizeParams(originalTypeEvent, handler, delegationFn);
|
||||
@ -453,6 +471,12 @@
|
||||
});
|
||||
}
|
||||
|
||||
function getTypeEvent(event) {
|
||||
// allow to get the native events from namespaced events ('click.bs.button' --> 'click')
|
||||
event = event.replace(stripNameRegex, '');
|
||||
return customEvents[event] || event;
|
||||
}
|
||||
|
||||
const EventHandler = {
|
||||
on(element, event, handler, delegationFn) {
|
||||
addHandler(element, event, handler, delegationFn, false);
|
||||
@ -505,7 +529,7 @@
|
||||
}
|
||||
|
||||
const $ = getjQuery();
|
||||
const typeEvent = event.replace(stripNameRegex, '');
|
||||
const typeEvent = getTypeEvent(event);
|
||||
const inNamespace = event !== typeEvent;
|
||||
const isNative = nativeEvents.has(typeEvent);
|
||||
let jQueryEvent;
|
||||
@ -563,7 +587,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): base-component.js
|
||||
* Bootstrap (v5.0.0): base-component.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -573,7 +597,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const VERSION = '5.0.0-beta3';
|
||||
const VERSION = '5.0.0';
|
||||
|
||||
class BaseComponent {
|
||||
constructor(element) {
|
||||
@ -589,6 +613,7 @@
|
||||
|
||||
dispose() {
|
||||
Data.remove(this._element, this.constructor.DATA_KEY);
|
||||
EventHandler.off(this._element, `.${this.constructor.DATA_KEY}`);
|
||||
this._element = null;
|
||||
}
|
||||
/** Static */
|
||||
@ -606,7 +631,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): alert.js
|
||||
* Bootstrap (v5.0.0): alert.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -616,7 +641,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$b = 'alert';
|
||||
const NAME$c = 'alert';
|
||||
const DATA_KEY$b = 'bs.alert';
|
||||
const EVENT_KEY$b = `.${DATA_KEY$b}`;
|
||||
const DATA_API_KEY$8 = '.data-api';
|
||||
@ -625,8 +650,8 @@
|
||||
const EVENT_CLOSED = `closed${EVENT_KEY$b}`;
|
||||
const EVENT_CLICK_DATA_API$7 = `click${EVENT_KEY$b}${DATA_API_KEY$8}`;
|
||||
const CLASS_NAME_ALERT = 'alert';
|
||||
const CLASS_NAME_FADE$5 = 'fade';
|
||||
const CLASS_NAME_SHOW$8 = 'show';
|
||||
const CLASS_NAME_FADE$6 = 'fade';
|
||||
const CLASS_NAME_SHOW$9 = 'show';
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
@ -662,9 +687,9 @@
|
||||
}
|
||||
|
||||
_removeElement(element) {
|
||||
element.classList.remove(CLASS_NAME_SHOW$8);
|
||||
element.classList.remove(CLASS_NAME_SHOW$9);
|
||||
|
||||
if (!element.classList.contains(CLASS_NAME_FADE$5)) {
|
||||
if (!element.classList.contains(CLASS_NAME_FADE$6)) {
|
||||
this._destroyElement(element);
|
||||
|
||||
return;
|
||||
@ -724,11 +749,11 @@
|
||||
* add .Alert to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$b, Alert);
|
||||
defineJQueryPlugin(NAME$c, Alert);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): button.js
|
||||
* Bootstrap (v5.0.0): button.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -738,7 +763,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$a = 'button';
|
||||
const NAME$b = 'button';
|
||||
const DATA_KEY$a = 'bs.button';
|
||||
const EVENT_KEY$a = `.${DATA_KEY$a}`;
|
||||
const DATA_API_KEY$7 = '.data-api';
|
||||
@ -804,11 +829,11 @@
|
||||
* add .Button to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$a, Button);
|
||||
defineJQueryPlugin(NAME$b, Button);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/manipulator.js
|
||||
* Bootstrap (v5.0.0): dom/manipulator.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -882,7 +907,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/selector-engine.js
|
||||
* Bootstrap (v5.0.0): dom/selector-engine.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -953,7 +978,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): carousel.js
|
||||
* Bootstrap (v5.0.0): carousel.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -963,7 +988,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$9 = 'carousel';
|
||||
const NAME$a = 'carousel';
|
||||
const DATA_KEY$9 = 'bs.carousel';
|
||||
const EVENT_KEY$9 = `.${DATA_KEY$9}`;
|
||||
const DATA_API_KEY$6 = '.data-api';
|
||||
@ -972,7 +997,7 @@
|
||||
const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
|
||||
|
||||
const SWIPE_THRESHOLD = 40;
|
||||
const Default$8 = {
|
||||
const Default$9 = {
|
||||
interval: 5000,
|
||||
keyboard: true,
|
||||
slide: false,
|
||||
@ -980,7 +1005,7 @@
|
||||
wrap: true,
|
||||
touch: true
|
||||
};
|
||||
const DefaultType$8 = {
|
||||
const DefaultType$9 = {
|
||||
interval: '(number|boolean)',
|
||||
keyboard: 'boolean',
|
||||
slide: '(boolean|string)',
|
||||
@ -1051,7 +1076,7 @@
|
||||
|
||||
|
||||
static get Default() {
|
||||
return Default$8;
|
||||
return Default$9;
|
||||
}
|
||||
|
||||
static get DATA_KEY() {
|
||||
@ -1136,7 +1161,6 @@
|
||||
}
|
||||
|
||||
dispose() {
|
||||
EventHandler.off(this._element, EVENT_KEY$9);
|
||||
this._items = null;
|
||||
this._config = null;
|
||||
this._interval = null;
|
||||
@ -1149,10 +1173,10 @@
|
||||
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$8,
|
||||
config = { ...Default$9,
|
||||
...config
|
||||
};
|
||||
typeCheckConfig(NAME$9, config, DefaultType$8);
|
||||
typeCheckConfig(NAME$a, config, DefaultType$9);
|
||||
return config;
|
||||
}
|
||||
|
||||
@ -1251,11 +1275,11 @@
|
||||
if (event.key === ARROW_LEFT_KEY) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_LEFT);
|
||||
this._slide(DIRECTION_RIGHT);
|
||||
} else if (event.key === ARROW_RIGHT_KEY) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_RIGHT);
|
||||
this._slide(DIRECTION_LEFT);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1417,10 +1441,10 @@
|
||||
}
|
||||
|
||||
if (isRTL()) {
|
||||
return direction === DIRECTION_RIGHT ? ORDER_PREV : ORDER_NEXT;
|
||||
return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT;
|
||||
}
|
||||
|
||||
return direction === DIRECTION_RIGHT ? ORDER_NEXT : ORDER_PREV;
|
||||
return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV;
|
||||
}
|
||||
|
||||
_orderToDirection(order) {
|
||||
@ -1429,16 +1453,16 @@
|
||||
}
|
||||
|
||||
if (isRTL()) {
|
||||
return order === ORDER_NEXT ? DIRECTION_LEFT : DIRECTION_RIGHT;
|
||||
return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT;
|
||||
}
|
||||
|
||||
return order === ORDER_NEXT ? DIRECTION_RIGHT : DIRECTION_LEFT;
|
||||
return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT;
|
||||
} // Static
|
||||
|
||||
|
||||
static carouselInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$9);
|
||||
let _config = { ...Default$8,
|
||||
let _config = { ...Default$9,
|
||||
...Manipulator.getDataAttributes(element)
|
||||
};
|
||||
|
||||
@ -1522,11 +1546,11 @@
|
||||
* add .Carousel to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$9, Carousel);
|
||||
defineJQueryPlugin(NAME$a, Carousel);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): collapse.js
|
||||
* Bootstrap (v5.0.0): collapse.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1536,15 +1560,15 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$8 = 'collapse';
|
||||
const NAME$9 = 'collapse';
|
||||
const DATA_KEY$8 = 'bs.collapse';
|
||||
const EVENT_KEY$8 = `.${DATA_KEY$8}`;
|
||||
const DATA_API_KEY$5 = '.data-api';
|
||||
const Default$7 = {
|
||||
const Default$8 = {
|
||||
toggle: true,
|
||||
parent: ''
|
||||
};
|
||||
const DefaultType$7 = {
|
||||
const DefaultType$8 = {
|
||||
toggle: 'boolean',
|
||||
parent: '(string|element)'
|
||||
};
|
||||
@ -1553,7 +1577,7 @@
|
||||
const EVENT_HIDE$5 = `hide${EVENT_KEY$8}`;
|
||||
const EVENT_HIDDEN$5 = `hidden${EVENT_KEY$8}`;
|
||||
const EVENT_CLICK_DATA_API$4 = `click${EVENT_KEY$8}${DATA_API_KEY$5}`;
|
||||
const CLASS_NAME_SHOW$7 = 'show';
|
||||
const CLASS_NAME_SHOW$8 = 'show';
|
||||
const CLASS_NAME_COLLAPSE = 'collapse';
|
||||
const CLASS_NAME_COLLAPSING = 'collapsing';
|
||||
const CLASS_NAME_COLLAPSED = 'collapsed';
|
||||
@ -1600,7 +1624,7 @@
|
||||
|
||||
|
||||
static get Default() {
|
||||
return Default$7;
|
||||
return Default$8;
|
||||
}
|
||||
|
||||
static get DATA_KEY() {
|
||||
@ -1609,7 +1633,7 @@
|
||||
|
||||
|
||||
toggle() {
|
||||
if (this._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (this._element.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
@ -1617,7 +1641,7 @@
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this._isTransitioning || this._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (this._isTransitioning || this._element.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1687,7 +1711,7 @@
|
||||
const complete = () => {
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSING);
|
||||
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$7);
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$8);
|
||||
|
||||
this._element.style[dimension] = '';
|
||||
this.setTransitioning(false);
|
||||
@ -1703,7 +1727,7 @@
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1720,7 +1744,7 @@
|
||||
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSING);
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$7);
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$8);
|
||||
|
||||
const triggerArrayLength = this._triggerArray.length;
|
||||
|
||||
@ -1729,7 +1753,7 @@
|
||||
const trigger = this._triggerArray[i];
|
||||
const elem = getElementFromSelector(trigger);
|
||||
|
||||
if (elem && !elem.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (elem && !elem.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
trigger.classList.add(CLASS_NAME_COLLAPSED);
|
||||
trigger.setAttribute('aria-expanded', false);
|
||||
}
|
||||
@ -1768,12 +1792,12 @@
|
||||
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$7,
|
||||
config = { ...Default$8,
|
||||
...config
|
||||
};
|
||||
config.toggle = Boolean(config.toggle); // Coerce string values
|
||||
|
||||
typeCheckConfig(NAME$8, config, DefaultType$7);
|
||||
typeCheckConfig(NAME$9, config, DefaultType$8);
|
||||
return config;
|
||||
}
|
||||
|
||||
@ -1809,7 +1833,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const isOpen = element.classList.contains(CLASS_NAME_SHOW$7);
|
||||
const isOpen = element.classList.contains(CLASS_NAME_SHOW$8);
|
||||
triggerArray.forEach(elem => {
|
||||
if (isOpen) {
|
||||
elem.classList.remove(CLASS_NAME_COLLAPSED);
|
||||
@ -1824,7 +1848,7 @@
|
||||
|
||||
static collapseInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$8);
|
||||
const _config = { ...Default$7,
|
||||
const _config = { ...Default$8,
|
||||
...Manipulator.getDataAttributes(element),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
};
|
||||
@ -1895,7 +1919,7 @@
|
||||
* add .Collapse to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$8, Collapse);
|
||||
defineJQueryPlugin(NAME$9, Collapse);
|
||||
|
||||
var top = 'top';
|
||||
var bottom = 'bottom';
|
||||
@ -2159,6 +2183,17 @@
|
||||
|
||||
function getContainingBlock(element) {
|
||||
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
|
||||
var isIE = navigator.userAgent.indexOf('Trident') !== -1;
|
||||
|
||||
if (isIE && isHTMLElement(element)) {
|
||||
// In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
|
||||
var elementCss = getComputedStyle$1(element);
|
||||
|
||||
if (elementCss.position === 'fixed') {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
var currentNode = getParentNode(element);
|
||||
|
||||
while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
|
||||
@ -3642,7 +3677,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dropdown.js
|
||||
* Bootstrap (v5.0.0): dropdown.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3652,7 +3687,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$7 = 'dropdown';
|
||||
const NAME$8 = 'dropdown';
|
||||
const DATA_KEY$7 = 'bs.dropdown';
|
||||
const EVENT_KEY$7 = `.${DATA_KEY$7}`;
|
||||
const DATA_API_KEY$4 = '.data-api';
|
||||
@ -3672,8 +3707,7 @@
|
||||
const EVENT_CLICK_DATA_API$3 = `click${EVENT_KEY$7}${DATA_API_KEY$4}`;
|
||||
const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY$7}${DATA_API_KEY$4}`;
|
||||
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY$7}${DATA_API_KEY$4}`;
|
||||
const CLASS_NAME_DISABLED = 'disabled';
|
||||
const CLASS_NAME_SHOW$6 = 'show';
|
||||
const CLASS_NAME_SHOW$7 = 'show';
|
||||
const CLASS_NAME_DROPUP = 'dropup';
|
||||
const CLASS_NAME_DROPEND = 'dropend';
|
||||
const CLASS_NAME_DROPSTART = 'dropstart';
|
||||
@ -3688,19 +3722,21 @@
|
||||
const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end';
|
||||
const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start';
|
||||
const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start';
|
||||
const Default$6 = {
|
||||
const Default$7 = {
|
||||
offset: [0, 2],
|
||||
boundary: 'clippingParents',
|
||||
reference: 'toggle',
|
||||
display: 'dynamic',
|
||||
popperConfig: null
|
||||
popperConfig: null,
|
||||
autoClose: true
|
||||
};
|
||||
const DefaultType$6 = {
|
||||
const DefaultType$7 = {
|
||||
offset: '(array|string|function)',
|
||||
boundary: '(string|element)',
|
||||
reference: '(string|element|object)',
|
||||
display: 'string',
|
||||
popperConfig: '(null|object|function)'
|
||||
popperConfig: '(null|object|function)',
|
||||
autoClose: '(boolean|string)'
|
||||
};
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@ -3721,11 +3757,11 @@
|
||||
|
||||
|
||||
static get Default() {
|
||||
return Default$6;
|
||||
return Default$7;
|
||||
}
|
||||
|
||||
static get DefaultType() {
|
||||
return DefaultType$6;
|
||||
return DefaultType$7;
|
||||
}
|
||||
|
||||
static get DATA_KEY() {
|
||||
@ -3734,15 +3770,14 @@
|
||||
|
||||
|
||||
toggle() {
|
||||
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED)) {
|
||||
if (isDisabled(this._element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isActive = this._element.classList.contains(CLASS_NAME_SHOW$6);
|
||||
|
||||
Dropdown.clearMenus();
|
||||
const isActive = this._element.classList.contains(CLASS_NAME_SHOW$7);
|
||||
|
||||
if (isActive) {
|
||||
this.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -3750,7 +3785,7 @@
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED) || this._menu.classList.contains(CLASS_NAME_SHOW$6)) {
|
||||
if (isDisabled(this._element) || this._menu.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -3801,48 +3836,33 @@
|
||||
|
||||
|
||||
if ('ontouchstart' in document.documentElement && !parent.closest(SELECTOR_NAVBAR_NAV)) {
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.on(elem, 'mouseover', null, noop()));
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.on(elem, 'mouseover', noop));
|
||||
}
|
||||
|
||||
this._element.focus();
|
||||
|
||||
this._element.setAttribute('aria-expanded', true);
|
||||
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$7);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$7);
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_SHOWN$4, relatedTarget);
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED) || !this._menu.classList.contains(CLASS_NAME_SHOW$6)) {
|
||||
if (isDisabled(this._element) || !this._menu.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const relatedTarget = {
|
||||
relatedTarget: this._element
|
||||
};
|
||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$4, relatedTarget);
|
||||
|
||||
if (hideEvent.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
this._popper.destroy();
|
||||
}
|
||||
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
|
||||
Manipulator.removeDataAttribute(this._menu, 'popper');
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$4, relatedTarget);
|
||||
this._completeHide(relatedTarget);
|
||||
}
|
||||
|
||||
dispose() {
|
||||
EventHandler.off(this._element, EVENT_KEY$7);
|
||||
this._menu = null;
|
||||
|
||||
if (this._popper) {
|
||||
@ -3870,16 +3890,43 @@
|
||||
});
|
||||
}
|
||||
|
||||
_completeHide(relatedTarget) {
|
||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$4, relatedTarget);
|
||||
|
||||
if (hideEvent.defaultPrevented) {
|
||||
return;
|
||||
} // If this is a touch-enabled device we remove the extra
|
||||
// empty mouseover listeners we added for iOS support
|
||||
|
||||
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.off(elem, 'mouseover', noop));
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
this._popper.destroy();
|
||||
}
|
||||
|
||||
this._menu.classList.remove(CLASS_NAME_SHOW$7);
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_SHOW$7);
|
||||
|
||||
this._element.setAttribute('aria-expanded', 'false');
|
||||
|
||||
Manipulator.removeDataAttribute(this._menu, 'popper');
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$4, relatedTarget);
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...this.constructor.Default,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...config
|
||||
};
|
||||
typeCheckConfig(NAME$7, config, this.constructor.DefaultType);
|
||||
typeCheckConfig(NAME$8, config, this.constructor.DefaultType);
|
||||
|
||||
if (typeof config.reference === 'object' && !isElement$1(config.reference) && typeof config.reference.getBoundingClientRect !== 'function') {
|
||||
// Popper virtual elements require a getBoundingClientRect method
|
||||
throw new TypeError(`${NAME$7.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);
|
||||
throw new TypeError(`${NAME$8.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);
|
||||
}
|
||||
|
||||
return config;
|
||||
@ -3956,6 +4003,29 @@
|
||||
return { ...defaultBsPopperConfig,
|
||||
...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig)
|
||||
};
|
||||
}
|
||||
|
||||
_selectMenuItem(event) {
|
||||
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 (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();
|
||||
} // Static
|
||||
|
||||
|
||||
@ -3989,7 +4059,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (/input|select|textarea|form/i.test(event.target.tagName)) {
|
||||
if (/input|select|option|textarea|form/i.test(event.target.tagName)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -3998,58 +4068,38 @@
|
||||
|
||||
for (let i = 0, len = toggles.length; i < len; i++) {
|
||||
const context = Data.get(toggles[i], DATA_KEY$7);
|
||||
|
||||
if (!context || context._config.autoClose === false) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!context._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const relatedTarget = {
|
||||
relatedTarget: toggles[i]
|
||||
relatedTarget: context._element
|
||||
};
|
||||
|
||||
if (event && event.type === 'click') {
|
||||
relatedTarget.clickEvent = event;
|
||||
}
|
||||
|
||||
if (!context) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const dropdownMenu = context._menu;
|
||||
|
||||
if (!toggles[i].classList.contains(CLASS_NAME_SHOW$6)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (event) {
|
||||
// Don't close the menu if the clicked element or one of its parents is the dropdown button
|
||||
if ([context._element].some(element => event.composedPath().includes(element))) {
|
||||
const composedPath = event.composedPath();
|
||||
const isMenuTarget = composedPath.includes(context._menu);
|
||||
|
||||
if (composedPath.includes(context._element) || context._config.autoClose === 'inside' && !isMenuTarget || context._config.autoClose === 'outside' && isMenuTarget) {
|
||||
continue;
|
||||
} // Tab navigation through the dropdown menu shouldn't close the menu
|
||||
|
||||
|
||||
if (event.type === 'keyup' && event.key === TAB_KEY && dropdownMenu.contains(event.target)) {
|
||||
if (event.type === 'keyup' && event.key === TAB_KEY && context._menu.contains(event.target)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (event.type === 'click') {
|
||||
relatedTarget.clickEvent = event;
|
||||
}
|
||||
}
|
||||
|
||||
const hideEvent = EventHandler.trigger(toggles[i], EVENT_HIDE$4, relatedTarget);
|
||||
|
||||
if (hideEvent.defaultPrevented) {
|
||||
continue;
|
||||
} // If this is a touch-enabled device we remove the extra
|
||||
// empty mouseover listeners we added for iOS support
|
||||
|
||||
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.off(elem, 'mouseover', null, noop()));
|
||||
}
|
||||
|
||||
toggles[i].setAttribute('aria-expanded', 'false');
|
||||
|
||||
if (context._popper) {
|
||||
context._popper.destroy();
|
||||
}
|
||||
|
||||
dropdownMenu.classList.remove(CLASS_NAME_SHOW$6);
|
||||
toggles[i].classList.remove(CLASS_NAME_SHOW$6);
|
||||
Manipulator.removeDataAttribute(dropdownMenu, 'popper');
|
||||
EventHandler.trigger(toggles[i], EVENT_HIDDEN$4, relatedTarget);
|
||||
context._completeHide(relatedTarget);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4069,26 +4119,29 @@
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const isActive = this.classList.contains(CLASS_NAME_SHOW$7);
|
||||
|
||||
if (this.disabled || this.classList.contains(CLASS_NAME_DISABLED)) {
|
||||
if (!isActive && event.key === ESCAPE_KEY$2) {
|
||||
return;
|
||||
}
|
||||
|
||||
const parent = Dropdown.getParentFromElement(this);
|
||||
const isActive = this.classList.contains(CLASS_NAME_SHOW$6);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (isDisabled(this)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const getToggleButton = () => this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0];
|
||||
|
||||
if (event.key === ESCAPE_KEY$2) {
|
||||
const button = this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0];
|
||||
button.focus();
|
||||
getToggleButton().focus();
|
||||
Dropdown.clearMenus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
|
||||
const button = this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0];
|
||||
button.click();
|
||||
getToggleButton().click();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -4097,26 +4150,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, parent).filter(isVisible);
|
||||
|
||||
if (!items.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
let index = items.indexOf(event.target); // Up
|
||||
|
||||
if (event.key === ARROW_UP_KEY && index > 0) {
|
||||
index--;
|
||||
} // Down
|
||||
|
||||
|
||||
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();
|
||||
Dropdown.getInstance(getToggleButton())._selectMenuItem(event);
|
||||
}
|
||||
|
||||
}
|
||||
@ -4142,11 +4176,213 @@
|
||||
* add .Dropdown to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$7, Dropdown);
|
||||
defineJQueryPlugin(NAME$8, Dropdown);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): modal.js
|
||||
* Bootstrap (v5.0.0): 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);
|
||||
}
|
||||
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
|
||||
const _setElementAttributes = (selector, styleProp, callback) => {
|
||||
const scrollbarWidth = getWidth();
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0): util/backdrop.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
const Default$6 = {
|
||||
isVisible: true,
|
||||
// if false, we use the backdrop helper without adding any element to the dom
|
||||
isAnimated: false,
|
||||
rootElement: document.body,
|
||||
// give the choice to place backdrop under different elements
|
||||
clickCallback: null
|
||||
};
|
||||
const DefaultType$6 = {
|
||||
isVisible: 'boolean',
|
||||
isAnimated: 'boolean',
|
||||
rootElement: 'element',
|
||||
clickCallback: '(function|null)'
|
||||
};
|
||||
const NAME$7 = 'backdrop';
|
||||
const CLASS_NAME_BACKDROP = 'modal-backdrop';
|
||||
const CLASS_NAME_FADE$5 = 'fade';
|
||||
const CLASS_NAME_SHOW$6 = 'show';
|
||||
const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$7}`;
|
||||
|
||||
class Backdrop {
|
||||
constructor(config) {
|
||||
this._config = this._getConfig(config);
|
||||
this._isAppended = false;
|
||||
this._element = null;
|
||||
}
|
||||
|
||||
show(callback) {
|
||||
if (!this._config.isVisible) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
this._append();
|
||||
|
||||
if (this._config.isAnimated) {
|
||||
reflow(this._getElement());
|
||||
}
|
||||
|
||||
this._getElement().classList.add(CLASS_NAME_SHOW$6);
|
||||
|
||||
this._emulateAnimation(() => {
|
||||
execute(callback);
|
||||
});
|
||||
}
|
||||
|
||||
hide(callback) {
|
||||
if (!this._config.isVisible) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
this._getElement().classList.remove(CLASS_NAME_SHOW$6);
|
||||
|
||||
this._emulateAnimation(() => {
|
||||
this.dispose();
|
||||
execute(callback);
|
||||
});
|
||||
} // Private
|
||||
|
||||
|
||||
_getElement() {
|
||||
if (!this._element) {
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = CLASS_NAME_BACKDROP;
|
||||
|
||||
if (this._config.isAnimated) {
|
||||
backdrop.classList.add(CLASS_NAME_FADE$5);
|
||||
}
|
||||
|
||||
this._element = backdrop;
|
||||
}
|
||||
|
||||
return this._element;
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$6,
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
typeCheckConfig(NAME$7, config, DefaultType$6);
|
||||
return config;
|
||||
}
|
||||
|
||||
_append() {
|
||||
if (this._isAppended) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._config.rootElement.appendChild(this._getElement());
|
||||
|
||||
EventHandler.on(this._getElement(), EVENT_MOUSEDOWN, () => {
|
||||
execute(this._config.clickCallback);
|
||||
});
|
||||
this._isAppended = true;
|
||||
}
|
||||
|
||||
dispose() {
|
||||
if (!this._isAppended) {
|
||||
return;
|
||||
}
|
||||
|
||||
EventHandler.off(this._element, EVENT_MOUSEDOWN);
|
||||
|
||||
this._getElement().parentNode.removeChild(this._element);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0): modal.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4179,12 +4415,10 @@
|
||||
const EVENT_FOCUSIN$1 = `focusin${EVENT_KEY$6}`;
|
||||
const EVENT_RESIZE = `resize${EVENT_KEY$6}`;
|
||||
const EVENT_CLICK_DISMISS$2 = `click.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_KEYDOWN_DISMISS$1 = `keydown.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_CLICK_DATA_API$2 = `click${EVENT_KEY$6}${DATA_API_KEY$3}`;
|
||||
const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure';
|
||||
const CLASS_NAME_BACKDROP = 'modal-backdrop';
|
||||
const CLASS_NAME_OPEN = 'modal-open';
|
||||
const CLASS_NAME_FADE$4 = 'fade';
|
||||
const CLASS_NAME_SHOW$5 = 'show';
|
||||
@ -4193,8 +4427,6 @@
|
||||
const SELECTOR_MODAL_BODY = '.modal-body';
|
||||
const SELECTOR_DATA_TOGGLE$2 = '[data-bs-toggle="modal"]';
|
||||
const SELECTOR_DATA_DISMISS$2 = '[data-bs-dismiss="modal"]';
|
||||
const SELECTOR_FIXED_CONTENT$1 = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top';
|
||||
const SELECTOR_STICKY_CONTENT$1 = '.sticky-top';
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
@ -4206,12 +4438,10 @@
|
||||
super(element);
|
||||
this._config = this._getConfig(config);
|
||||
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
|
||||
this._backdrop = null;
|
||||
this._backdrop = this._initializeBackDrop();
|
||||
this._isShown = false;
|
||||
this._isBodyOverflowing = false;
|
||||
this._ignoreBackdropClick = false;
|
||||
this._isTransitioning = false;
|
||||
this._scrollbarWidth = 0;
|
||||
} // Getters
|
||||
|
||||
|
||||
@ -4246,10 +4476,8 @@
|
||||
}
|
||||
|
||||
this._isShown = true;
|
||||
|
||||
this._checkScrollbar();
|
||||
|
||||
this._setScrollbar();
|
||||
hide();
|
||||
document.body.classList.add(CLASS_NAME_OPEN);
|
||||
|
||||
this._adjustDialog();
|
||||
|
||||
@ -4313,7 +4541,7 @@
|
||||
}
|
||||
|
||||
dispose() {
|
||||
[window, this._element, this._dialog].forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY$6));
|
||||
[window, this._dialog].forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY$6));
|
||||
super.dispose();
|
||||
/**
|
||||
* `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API`
|
||||
@ -4324,12 +4552,13 @@
|
||||
EventHandler.off(document, EVENT_FOCUSIN$1);
|
||||
this._config = null;
|
||||
this._dialog = null;
|
||||
|
||||
this._backdrop.dispose();
|
||||
|
||||
this._backdrop = null;
|
||||
this._isShown = null;
|
||||
this._isBodyOverflowing = null;
|
||||
this._ignoreBackdropClick = null;
|
||||
this._isTransitioning = null;
|
||||
this._scrollbarWidth = null;
|
||||
}
|
||||
|
||||
handleUpdate() {
|
||||
@ -4337,8 +4566,17 @@
|
||||
} // Private
|
||||
|
||||
|
||||
_initializeBackDrop() {
|
||||
return new Backdrop({
|
||||
isVisible: Boolean(this._config.backdrop),
|
||||
// 'static' option will be translated to true, and booleans will keep their value
|
||||
isAnimated: this._isAnimated()
|
||||
});
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$5,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...config
|
||||
};
|
||||
typeCheckConfig(NAME$6, config, DefaultType$5);
|
||||
@ -4411,7 +4649,7 @@
|
||||
|
||||
_setEscapeEvent() {
|
||||
if (this._isShown) {
|
||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS$1, event => {
|
||||
if (this._config.keyboard && event.key === ESCAPE_KEY$1) {
|
||||
event.preventDefault();
|
||||
this.hide();
|
||||
@ -4420,7 +4658,7 @@
|
||||
}
|
||||
});
|
||||
} else {
|
||||
EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS);
|
||||
EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS$1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4443,85 +4681,35 @@
|
||||
|
||||
this._isTransitioning = false;
|
||||
|
||||
this._showBackdrop(() => {
|
||||
this._backdrop.hide(() => {
|
||||
document.body.classList.remove(CLASS_NAME_OPEN);
|
||||
|
||||
this._resetAdjustments();
|
||||
|
||||
this._resetScrollbar();
|
||||
|
||||
reset();
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$3);
|
||||
});
|
||||
}
|
||||
|
||||
_removeBackdrop() {
|
||||
this._backdrop.parentNode.removeChild(this._backdrop);
|
||||
|
||||
this._backdrop = null;
|
||||
}
|
||||
|
||||
_showBackdrop(callback) {
|
||||
const isAnimated = this._isAnimated();
|
||||
|
||||
if (this._isShown && this._config.backdrop) {
|
||||
this._backdrop = document.createElement('div');
|
||||
this._backdrop.className = CLASS_NAME_BACKDROP;
|
||||
|
||||
if (isAnimated) {
|
||||
this._backdrop.classList.add(CLASS_NAME_FADE$4);
|
||||
}
|
||||
|
||||
document.body.appendChild(this._backdrop);
|
||||
EventHandler.on(this._element, EVENT_CLICK_DISMISS$2, event => {
|
||||
if (this._ignoreBackdropClick) {
|
||||
this._ignoreBackdropClick = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._config.backdrop === 'static') {
|
||||
this._triggerBackdropTransition();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
|
||||
if (isAnimated) {
|
||||
reflow(this._backdrop);
|
||||
}
|
||||
|
||||
this._backdrop.classList.add(CLASS_NAME_SHOW$5);
|
||||
|
||||
if (!isAnimated) {
|
||||
callback();
|
||||
EventHandler.on(this._element, EVENT_CLICK_DISMISS$2, event => {
|
||||
if (this._ignoreBackdropClick) {
|
||||
this._ignoreBackdropClick = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop);
|
||||
EventHandler.one(this._backdrop, 'transitionend', callback);
|
||||
emulateTransitionEnd(this._backdrop, backdropTransitionDuration);
|
||||
} else if (!this._isShown && this._backdrop) {
|
||||
this._backdrop.classList.remove(CLASS_NAME_SHOW$5);
|
||||
|
||||
const callbackRemove = () => {
|
||||
this._removeBackdrop();
|
||||
|
||||
callback();
|
||||
};
|
||||
|
||||
if (isAnimated) {
|
||||
const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop);
|
||||
EventHandler.one(this._backdrop, 'transitionend', callbackRemove);
|
||||
emulateTransitionEnd(this._backdrop, backdropTransitionDuration);
|
||||
} else {
|
||||
callbackRemove();
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
|
||||
if (this._config.backdrop === true) {
|
||||
this.hide();
|
||||
} else if (this._config.backdrop === 'static') {
|
||||
this._triggerBackdropTransition();
|
||||
}
|
||||
});
|
||||
|
||||
this._backdrop.show(callback);
|
||||
}
|
||||
|
||||
_isAnimated() {
|
||||
@ -4565,103 +4753,37 @@
|
||||
|
||||
_adjustDialog() {
|
||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
const scrollbarWidth = getWidth();
|
||||
const isBodyOverflowing = scrollbarWidth > 0;
|
||||
|
||||
if (!this._isBodyOverflowing && isModalOverflowing && !isRTL() || this._isBodyOverflowing && !isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingLeft = `${this._scrollbarWidth}px`;
|
||||
if (!isBodyOverflowing && isModalOverflowing && !isRTL() || isBodyOverflowing && !isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingLeft = `${scrollbarWidth}px`;
|
||||
}
|
||||
|
||||
if (this._isBodyOverflowing && !isModalOverflowing && !isRTL() || !this._isBodyOverflowing && isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingRight = `${this._scrollbarWidth}px`;
|
||||
if (isBodyOverflowing && !isModalOverflowing && !isRTL() || !isBodyOverflowing && isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingRight = `${scrollbarWidth}px`;
|
||||
}
|
||||
}
|
||||
|
||||
_resetAdjustments() {
|
||||
this._element.style.paddingLeft = '';
|
||||
this._element.style.paddingRight = '';
|
||||
}
|
||||
|
||||
_checkScrollbar() {
|
||||
const rect = document.body.getBoundingClientRect();
|
||||
this._isBodyOverflowing = Math.round(rect.left + rect.right) < window.innerWidth;
|
||||
this._scrollbarWidth = this._getScrollbarWidth();
|
||||
}
|
||||
|
||||
_setScrollbar() {
|
||||
if (this._isBodyOverflowing) {
|
||||
this._setElementAttributes(SELECTOR_FIXED_CONTENT$1, 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth);
|
||||
|
||||
this._setElementAttributes(SELECTOR_STICKY_CONTENT$1, 'marginRight', calculatedValue => calculatedValue - this._scrollbarWidth);
|
||||
|
||||
this._setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth);
|
||||
}
|
||||
|
||||
document.body.classList.add(CLASS_NAME_OPEN);
|
||||
}
|
||||
|
||||
_setElementAttributes(selector, styleProp, callback) {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + this._scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
const actualValue = element.style[styleProp];
|
||||
const calculatedValue = window.getComputedStyle(element)[styleProp];
|
||||
Manipulator.setDataAttribute(element, styleProp, actualValue);
|
||||
element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
_resetScrollbar() {
|
||||
this._resetElementAttributes(SELECTOR_FIXED_CONTENT$1, 'paddingRight');
|
||||
|
||||
this._resetElementAttributes(SELECTOR_STICKY_CONTENT$1, 'marginRight');
|
||||
|
||||
this._resetElementAttributes('body', 'paddingRight');
|
||||
}
|
||||
|
||||
_resetElementAttributes(selector, styleProp) {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined' && element === document.body) {
|
||||
element.style[styleProp] = '';
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_getScrollbarWidth() {
|
||||
// thx d.walsh
|
||||
const scrollDiv = document.createElement('div');
|
||||
scrollDiv.className = CLASS_NAME_SCROLLBAR_MEASURER;
|
||||
document.body.appendChild(scrollDiv);
|
||||
const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
|
||||
document.body.removeChild(scrollDiv);
|
||||
return scrollbarWidth;
|
||||
} // Static
|
||||
|
||||
|
||||
static jQueryInterface(config, relatedTarget) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$6);
|
||||
const _config = { ...Default$5,
|
||||
...Manipulator.getDataAttributes(this),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
};
|
||||
const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {});
|
||||
|
||||
if (!data) {
|
||||
data = new Modal(this, _config);
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config](relatedTarget);
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config](relatedTarget);
|
||||
});
|
||||
}
|
||||
|
||||
@ -4676,7 +4798,7 @@
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API$2, SELECTOR_DATA_TOGGLE$2, function (event) {
|
||||
const target = getElementFromSelector(this);
|
||||
|
||||
if (this.tagName === 'A' || this.tagName === 'AREA') {
|
||||
if (['A', 'AREA'].includes(this.tagName)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@ -4692,15 +4814,7 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
let data = Data.get(target, DATA_KEY$6);
|
||||
|
||||
if (!data) {
|
||||
const config = { ...Manipulator.getDataAttributes(target),
|
||||
...Manipulator.getDataAttributes(this)
|
||||
};
|
||||
data = new Modal(target, config);
|
||||
}
|
||||
|
||||
const data = Modal.getInstance(target) || new Modal(target);
|
||||
data.toggle(this);
|
||||
});
|
||||
/**
|
||||
@ -4714,69 +4828,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): util/scrollBar.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed';
|
||||
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()) => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
_setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
|
||||
_setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
|
||||
|
||||
_setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
};
|
||||
|
||||
const _setElementAttributes = (selector, styleProp, callback) => {
|
||||
const scrollbarWidth = getWidth();
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
document.body.style.overflow = 'auto';
|
||||
|
||||
_resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
||||
|
||||
_resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
||||
|
||||
_resetElementAttributes('body', 'paddingRight');
|
||||
};
|
||||
|
||||
const _resetElementAttributes = (selector, styleProp) => {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined' && element === document.body) {
|
||||
element.style.removeProperty(styleProp);
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): offcanvas.js
|
||||
* Bootstrap (v5.0.0): offcanvas.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4802,11 +4854,8 @@
|
||||
keyboard: 'boolean',
|
||||
scroll: 'boolean'
|
||||
};
|
||||
const CLASS_NAME_BACKDROP_BODY = 'offcanvas-backdrop';
|
||||
const CLASS_NAME_SHOW$4 = 'show';
|
||||
const CLASS_NAME_TOGGLING = 'offcanvas-toggling';
|
||||
const OPEN_SELECTOR = '.offcanvas.show';
|
||||
const ACTIVE_SELECTOR = `${OPEN_SELECTOR}, .${CLASS_NAME_TOGGLING}`;
|
||||
const EVENT_SHOW$2 = `show${EVENT_KEY$5}`;
|
||||
const EVENT_SHOWN$2 = `shown${EVENT_KEY$5}`;
|
||||
const EVENT_HIDE$2 = `hide${EVENT_KEY$5}`;
|
||||
@ -4814,6 +4863,7 @@
|
||||
const EVENT_FOCUSIN = `focusin${EVENT_KEY$5}`;
|
||||
const EVENT_CLICK_DATA_API$1 = `click${EVENT_KEY$5}${DATA_API_KEY$2}`;
|
||||
const EVENT_CLICK_DISMISS$1 = `click.dismiss${EVENT_KEY$5}`;
|
||||
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY$5}`;
|
||||
const SELECTOR_DATA_DISMISS$1 = '[data-bs-dismiss="offcanvas"]';
|
||||
const SELECTOR_DATA_TOGGLE$1 = '[data-bs-toggle="offcanvas"]';
|
||||
/**
|
||||
@ -4827,6 +4877,7 @@
|
||||
super(element);
|
||||
this._config = this._getConfig(config);
|
||||
this._isShown = false;
|
||||
this._backdrop = this._initializeBackDrop();
|
||||
|
||||
this._addEventListeners();
|
||||
} // Getters
|
||||
@ -4861,15 +4912,13 @@
|
||||
this._isShown = true;
|
||||
this._element.style.visibility = 'visible';
|
||||
|
||||
if (this._config.backdrop) {
|
||||
document.body.classList.add(CLASS_NAME_BACKDROP_BODY);
|
||||
}
|
||||
this._backdrop.show();
|
||||
|
||||
if (!this._config.scroll) {
|
||||
hide();
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_TOGGLING);
|
||||
this._enforceFocusOnElement(this._element);
|
||||
}
|
||||
|
||||
this._element.removeAttribute('aria-hidden');
|
||||
|
||||
@ -4880,16 +4929,14 @@
|
||||
this._element.classList.add(CLASS_NAME_SHOW$4);
|
||||
|
||||
const completeCallBack = () => {
|
||||
this._element.classList.remove(CLASS_NAME_TOGGLING);
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_SHOWN$2, {
|
||||
relatedTarget
|
||||
});
|
||||
|
||||
this._enforceFocusOnElement(this._element);
|
||||
};
|
||||
|
||||
setTimeout(completeCallBack, getTransitionDurationFromElement(this._element));
|
||||
const transitionDuration = getTransitionDurationFromElement(this._element);
|
||||
EventHandler.one(this._element, 'transitionend', completeCallBack);
|
||||
emulateTransitionEnd(this._element, transitionDuration);
|
||||
}
|
||||
|
||||
hide() {
|
||||
@ -4903,8 +4950,6 @@
|
||||
return;
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_TOGGLING);
|
||||
|
||||
EventHandler.off(document, EVENT_FOCUSIN);
|
||||
|
||||
this._element.blur();
|
||||
@ -4913,6 +4958,8 @@
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_SHOW$4);
|
||||
|
||||
this._backdrop.hide();
|
||||
|
||||
const completeCallback = () => {
|
||||
this._element.setAttribute('aria-hidden', true);
|
||||
|
||||
@ -4922,20 +4969,25 @@
|
||||
|
||||
this._element.style.visibility = 'hidden';
|
||||
|
||||
if (this._config.backdrop) {
|
||||
document.body.classList.remove(CLASS_NAME_BACKDROP_BODY);
|
||||
}
|
||||
|
||||
if (!this._config.scroll) {
|
||||
reset();
|
||||
}
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$2);
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_TOGGLING);
|
||||
};
|
||||
|
||||
setTimeout(completeCallback, getTransitionDurationFromElement(this._element));
|
||||
const transitionDuration = getTransitionDurationFromElement(this._element);
|
||||
EventHandler.one(this._element, 'transitionend', completeCallback);
|
||||
emulateTransitionEnd(this._element, transitionDuration);
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this._backdrop.dispose();
|
||||
|
||||
super.dispose();
|
||||
EventHandler.off(document, EVENT_FOCUSIN);
|
||||
this._config = null;
|
||||
this._backdrop = null;
|
||||
} // Private
|
||||
|
||||
|
||||
@ -4948,6 +5000,15 @@
|
||||
return config;
|
||||
}
|
||||
|
||||
_initializeBackDrop() {
|
||||
return new Backdrop({
|
||||
isVisible: this._config.backdrop,
|
||||
isAnimated: true,
|
||||
rootElement: this._element.parentNode,
|
||||
clickCallback: () => this.hide()
|
||||
});
|
||||
}
|
||||
|
||||
_enforceFocusOnElement(element) {
|
||||
EventHandler.off(document, EVENT_FOCUSIN); // guard against infinite focus loop
|
||||
|
||||
@ -4961,18 +5022,11 @@
|
||||
|
||||
_addEventListeners() {
|
||||
EventHandler.on(this._element, EVENT_CLICK_DISMISS$1, SELECTOR_DATA_DISMISS$1, () => this.hide());
|
||||
EventHandler.on(document, 'keydown', event => {
|
||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
||||
if (this._config.keyboard && event.key === ESCAPE_KEY) {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API$1, event => {
|
||||
const target = SelectorEngine.findOne(getSelectorFromElement(event.target));
|
||||
|
||||
if (!this._element.contains(event.target) && target !== this._element) {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
} // Static
|
||||
|
||||
|
||||
@ -5018,10 +5072,10 @@
|
||||
}
|
||||
}); // avoid conflict when clicking a toggler of an offcanvas, while another is open
|
||||
|
||||
const allReadyOpen = SelectorEngine.findOne(ACTIVE_SELECTOR);
|
||||
const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR);
|
||||
|
||||
if (allReadyOpen && allReadyOpen !== target) {
|
||||
return;
|
||||
Offcanvas.getInstance(allReadyOpen).hide();
|
||||
}
|
||||
|
||||
const data = Data.get(target, DATA_KEY$5) || new Offcanvas(target);
|
||||
@ -5040,7 +5094,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): util/sanitizer.js
|
||||
* Bootstrap (v5.0.0): util/sanitizer.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -5153,7 +5207,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): tooltip.js
|
||||
* Bootstrap (v5.0.0): tooltip.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -5328,7 +5382,6 @@
|
||||
|
||||
dispose() {
|
||||
clearTimeout(this._timeout);
|
||||
EventHandler.off(this._element, this.constructor.EVENT_KEY);
|
||||
EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler);
|
||||
|
||||
if (this.tip && this.tip.parentNode) {
|
||||
@ -5413,7 +5466,7 @@
|
||||
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
[].concat(...document.body.children).forEach(element => {
|
||||
EventHandler.on(element, 'mouseover', noop());
|
||||
EventHandler.on(element, 'mouseover', noop);
|
||||
});
|
||||
}
|
||||
|
||||
@ -5612,7 +5665,6 @@
|
||||
modifiers: [{
|
||||
name: 'flip',
|
||||
options: {
|
||||
altBoundary: true,
|
||||
fallbackPlacements: this.config.fallbackPlacements
|
||||
}
|
||||
}, {
|
||||
@ -5895,7 +5947,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): popover.js
|
||||
* Bootstrap (v5.0.0): popover.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -6045,7 +6097,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): scrollspy.js
|
||||
* Bootstrap (v5.0.0): scrollspy.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -6158,6 +6210,7 @@
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$1,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
};
|
||||
|
||||
@ -6266,21 +6319,17 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$2);
|
||||
const data = ScrollSpy.getInstance(this) || new ScrollSpy(this, typeof config === 'object' ? config : {});
|
||||
|
||||
const _config = typeof config === 'object' && config;
|
||||
|
||||
if (!data) {
|
||||
data = new ScrollSpy(this, _config);
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config]();
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config]();
|
||||
});
|
||||
}
|
||||
|
||||
@ -6293,7 +6342,7 @@
|
||||
|
||||
|
||||
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
||||
SelectorEngine.find(SELECTOR_DATA_SPY).forEach(spy => new ScrollSpy(spy, Manipulator.getDataAttributes(spy)));
|
||||
SelectorEngine.find(SELECTOR_DATA_SPY).forEach(spy => new ScrollSpy(spy));
|
||||
});
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@ -6306,7 +6355,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): tab.js
|
||||
* Bootstrap (v5.0.0): tab.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -6350,7 +6399,7 @@
|
||||
|
||||
|
||||
show() {
|
||||
if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.classList.contains(CLASS_NAME_ACTIVE) || isDisabled(this._element)) {
|
||||
if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.classList.contains(CLASS_NAME_ACTIVE)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -6438,11 +6487,17 @@
|
||||
element.classList.add(CLASS_NAME_SHOW$1);
|
||||
}
|
||||
|
||||
if (element.parentNode && element.parentNode.classList.contains(CLASS_NAME_DROPDOWN_MENU)) {
|
||||
let parent = element.parentNode;
|
||||
|
||||
if (parent && parent.nodeName === 'LI') {
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
|
||||
if (parent && parent.classList.contains(CLASS_NAME_DROPDOWN_MENU)) {
|
||||
const dropdownElement = element.closest(SELECTOR_DROPDOWN);
|
||||
|
||||
if (dropdownElement) {
|
||||
SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE).forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE));
|
||||
SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement).forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE));
|
||||
}
|
||||
|
||||
element.setAttribute('aria-expanded', true);
|
||||
@ -6477,7 +6532,14 @@
|
||||
|
||||
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
||||
event.preventDefault();
|
||||
if (['A', 'AREA'].includes(this.tagName)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (isDisabled(this)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = Data.get(this, DATA_KEY$1) || new Tab(this);
|
||||
data.show();
|
||||
});
|
||||
@ -6492,7 +6554,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): toast.js
|
||||
* Bootstrap (v5.0.0): toast.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -6631,7 +6693,6 @@
|
||||
this._element.classList.remove(CLASS_NAME_SHOW);
|
||||
}
|
||||
|
||||
EventHandler.off(this._element, EVENT_CLICK_DISMISS);
|
||||
super.dispose();
|
||||
this._config = null;
|
||||
} // Private
|
||||
@ -6689,7 +6750,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): index.umd.js
|
||||
* Bootstrap (v5.0.0): 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
984
docs/5.0/dist/js/bootstrap.esm.js
vendored
984
docs/5.0/dist/js/bootstrap.esm.js
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.0 (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.0-beta3): util/index.js
|
||||
* Bootstrap (v5.0.0): util/index.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -52,7 +52,7 @@ const getSelector = element => {
|
||||
|
||||
|
||||
if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) {
|
||||
hrefAttr = '#' + hrefAttr.split('#')[1];
|
||||
hrefAttr = `#${hrefAttr.split('#')[1]}`;
|
||||
}
|
||||
|
||||
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null;
|
||||
@ -130,7 +130,7 @@ const typeCheckConfig = (componentName, config, configTypes) => {
|
||||
const valueType = value && isElement(value) ? 'element' : toType(value);
|
||||
|
||||
if (!new RegExp(expectedTypes).test(valueType)) {
|
||||
throw new TypeError(`${componentName.toUpperCase()}: ` + `Option "${property}" provided type "${valueType}" ` + `but expected type "${expectedTypes}".`);
|
||||
throw new TypeError(`${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -188,7 +188,7 @@ const findShadowRoot = element => {
|
||||
return findShadowRoot(element.parentNode);
|
||||
};
|
||||
|
||||
const noop = () => function () {};
|
||||
const noop = () => {};
|
||||
|
||||
const reflow = element => element.offsetHeight;
|
||||
|
||||
@ -232,9 +232,15 @@ const defineJQueryPlugin = (name, plugin) => {
|
||||
});
|
||||
};
|
||||
|
||||
const execute = callback => {
|
||||
if (typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/data.js
|
||||
* Bootstrap (v5.0.0): dom/data.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -288,7 +294,7 @@ var Data = {
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/event-handler.js
|
||||
* Bootstrap (v5.0.0): dom/event-handler.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -308,6 +314,7 @@ const customEvents = {
|
||||
mouseenter: 'mouseover',
|
||||
mouseleave: 'mouseout'
|
||||
};
|
||||
const customEventsRegex = /^(mouseenter|mouseleave)/i;
|
||||
const nativeEvents = new Set(['click', 'dblclick', 'mouseup', 'mousedown', 'contextmenu', 'mousewheel', 'DOMMouseScroll', 'mouseover', 'mouseout', 'mousemove', 'selectstart', 'selectend', 'keydown', 'keypress', 'keyup', 'orientationchange', 'touchstart', 'touchmove', 'touchend', 'touchcancel', 'pointerdown', 'pointermove', 'pointerup', 'pointerleave', 'pointercancel', 'gesturestart', 'gesturechange', 'gestureend', 'focus', 'blur', 'change', 'reset', 'select', 'submit', 'focusin', 'focusout', 'load', 'unload', 'beforeunload', 'resize', 'move', 'DOMContentLoaded', 'readystatechange', 'error', 'abort', 'scroll']);
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@ -351,7 +358,7 @@ function bootstrapDelegationHandler(element, selector, fn) {
|
||||
|
||||
if (handler.oneOff) {
|
||||
// eslint-disable-next-line unicorn/consistent-destructuring
|
||||
EventHandler.off(element, event.type, fn);
|
||||
EventHandler.off(element, event.type, selector, fn);
|
||||
}
|
||||
|
||||
return fn.apply(target, [event]);
|
||||
@ -380,15 +387,8 @@ function findHandler(events, handler, delegationSelector = null) {
|
||||
|
||||
function normalizeParams(originalTypeEvent, handler, delegationFn) {
|
||||
const delegation = typeof handler === 'string';
|
||||
const originalHandler = delegation ? delegationFn : handler; // allow to get the native events from namespaced events ('click.bs.button' --> 'click')
|
||||
|
||||
let typeEvent = originalTypeEvent.replace(stripNameRegex, '');
|
||||
const custom = customEvents[typeEvent];
|
||||
|
||||
if (custom) {
|
||||
typeEvent = custom;
|
||||
}
|
||||
|
||||
const originalHandler = delegation ? delegationFn : handler;
|
||||
let typeEvent = getTypeEvent(originalTypeEvent);
|
||||
const isNative = nativeEvents.has(typeEvent);
|
||||
|
||||
if (!isNative) {
|
||||
@ -406,6 +406,24 @@ function addHandler(element, originalTypeEvent, handler, delegationFn, oneOff) {
|
||||
if (!handler) {
|
||||
handler = delegationFn;
|
||||
delegationFn = null;
|
||||
} // in case of mouseenter or mouseleave wrap the handler within a function that checks for its DOM position
|
||||
// this prevents the handler from being dispatched the same way as mouseover or mouseout does
|
||||
|
||||
|
||||
if (customEventsRegex.test(originalTypeEvent)) {
|
||||
const wrapFn = fn => {
|
||||
return function (event) {
|
||||
if (!event.relatedTarget || event.relatedTarget !== event.delegateTarget && !event.delegateTarget.contains(event.relatedTarget)) {
|
||||
return fn.call(this, event);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
if (delegationFn) {
|
||||
delegationFn = wrapFn(delegationFn);
|
||||
} else {
|
||||
handler = wrapFn(handler);
|
||||
}
|
||||
}
|
||||
|
||||
const [delegation, originalHandler, typeEvent] = normalizeParams(originalTypeEvent, handler, delegationFn);
|
||||
@ -449,6 +467,12 @@ function removeNamespacedHandlers(element, events, typeEvent, namespace) {
|
||||
});
|
||||
}
|
||||
|
||||
function getTypeEvent(event) {
|
||||
// allow to get the native events from namespaced events ('click.bs.button' --> 'click')
|
||||
event = event.replace(stripNameRegex, '');
|
||||
return customEvents[event] || event;
|
||||
}
|
||||
|
||||
const EventHandler = {
|
||||
on(element, event, handler, delegationFn) {
|
||||
addHandler(element, event, handler, delegationFn, false);
|
||||
@ -501,7 +525,7 @@ const EventHandler = {
|
||||
}
|
||||
|
||||
const $ = getjQuery();
|
||||
const typeEvent = event.replace(stripNameRegex, '');
|
||||
const typeEvent = getTypeEvent(event);
|
||||
const inNamespace = event !== typeEvent;
|
||||
const isNative = nativeEvents.has(typeEvent);
|
||||
let jQueryEvent;
|
||||
@ -559,7 +583,7 @@ const EventHandler = {
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): base-component.js
|
||||
* Bootstrap (v5.0.0): base-component.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -569,7 +593,7 @@ const EventHandler = {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const VERSION = '5.0.0-beta3';
|
||||
const VERSION = '5.0.0';
|
||||
|
||||
class BaseComponent {
|
||||
constructor(element) {
|
||||
@ -585,6 +609,7 @@ class BaseComponent {
|
||||
|
||||
dispose() {
|
||||
Data.remove(this._element, this.constructor.DATA_KEY);
|
||||
EventHandler.off(this._element, `.${this.constructor.DATA_KEY}`);
|
||||
this._element = null;
|
||||
}
|
||||
/** Static */
|
||||
@ -602,7 +627,7 @@ class BaseComponent {
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): alert.js
|
||||
* Bootstrap (v5.0.0): alert.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -612,7 +637,7 @@ class BaseComponent {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$b = 'alert';
|
||||
const NAME$c = 'alert';
|
||||
const DATA_KEY$b = 'bs.alert';
|
||||
const EVENT_KEY$b = `.${DATA_KEY$b}`;
|
||||
const DATA_API_KEY$8 = '.data-api';
|
||||
@ -621,8 +646,8 @@ const EVENT_CLOSE = `close${EVENT_KEY$b}`;
|
||||
const EVENT_CLOSED = `closed${EVENT_KEY$b}`;
|
||||
const EVENT_CLICK_DATA_API$7 = `click${EVENT_KEY$b}${DATA_API_KEY$8}`;
|
||||
const CLASS_NAME_ALERT = 'alert';
|
||||
const CLASS_NAME_FADE$5 = 'fade';
|
||||
const CLASS_NAME_SHOW$8 = 'show';
|
||||
const CLASS_NAME_FADE$6 = 'fade';
|
||||
const CLASS_NAME_SHOW$9 = 'show';
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
@ -658,9 +683,9 @@ class Alert extends BaseComponent {
|
||||
}
|
||||
|
||||
_removeElement(element) {
|
||||
element.classList.remove(CLASS_NAME_SHOW$8);
|
||||
element.classList.remove(CLASS_NAME_SHOW$9);
|
||||
|
||||
if (!element.classList.contains(CLASS_NAME_FADE$5)) {
|
||||
if (!element.classList.contains(CLASS_NAME_FADE$6)) {
|
||||
this._destroyElement(element);
|
||||
|
||||
return;
|
||||
@ -720,11 +745,11 @@ EventHandler.on(document, EVENT_CLICK_DATA_API$7, SELECTOR_DISMISS, Alert.handle
|
||||
* add .Alert to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$b, Alert);
|
||||
defineJQueryPlugin(NAME$c, Alert);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): button.js
|
||||
* Bootstrap (v5.0.0): button.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -734,7 +759,7 @@ defineJQueryPlugin(NAME$b, Alert);
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$a = 'button';
|
||||
const NAME$b = 'button';
|
||||
const DATA_KEY$a = 'bs.button';
|
||||
const EVENT_KEY$a = `.${DATA_KEY$a}`;
|
||||
const DATA_API_KEY$7 = '.data-api';
|
||||
@ -800,11 +825,11 @@ EventHandler.on(document, EVENT_CLICK_DATA_API$6, SELECTOR_DATA_TOGGLE$5, event
|
||||
* add .Button to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$a, Button);
|
||||
defineJQueryPlugin(NAME$b, Button);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/manipulator.js
|
||||
* Bootstrap (v5.0.0): dom/manipulator.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -878,7 +903,7 @@ const Manipulator = {
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/selector-engine.js
|
||||
* Bootstrap (v5.0.0): dom/selector-engine.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -949,7 +974,7 @@ const SelectorEngine = {
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): carousel.js
|
||||
* Bootstrap (v5.0.0): carousel.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -959,7 +984,7 @@ const SelectorEngine = {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$9 = 'carousel';
|
||||
const NAME$a = 'carousel';
|
||||
const DATA_KEY$9 = 'bs.carousel';
|
||||
const EVENT_KEY$9 = `.${DATA_KEY$9}`;
|
||||
const DATA_API_KEY$6 = '.data-api';
|
||||
@ -968,7 +993,7 @@ const ARROW_RIGHT_KEY = 'ArrowRight';
|
||||
const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
|
||||
|
||||
const SWIPE_THRESHOLD = 40;
|
||||
const Default$8 = {
|
||||
const Default$9 = {
|
||||
interval: 5000,
|
||||
keyboard: true,
|
||||
slide: false,
|
||||
@ -976,7 +1001,7 @@ const Default$8 = {
|
||||
wrap: true,
|
||||
touch: true
|
||||
};
|
||||
const DefaultType$8 = {
|
||||
const DefaultType$9 = {
|
||||
interval: '(number|boolean)',
|
||||
keyboard: 'boolean',
|
||||
slide: '(boolean|string)',
|
||||
@ -1047,7 +1072,7 @@ class Carousel extends BaseComponent {
|
||||
|
||||
|
||||
static get Default() {
|
||||
return Default$8;
|
||||
return Default$9;
|
||||
}
|
||||
|
||||
static get DATA_KEY() {
|
||||
@ -1132,7 +1157,6 @@ class Carousel extends BaseComponent {
|
||||
}
|
||||
|
||||
dispose() {
|
||||
EventHandler.off(this._element, EVENT_KEY$9);
|
||||
this._items = null;
|
||||
this._config = null;
|
||||
this._interval = null;
|
||||
@ -1145,10 +1169,10 @@ class Carousel extends BaseComponent {
|
||||
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$8,
|
||||
config = { ...Default$9,
|
||||
...config
|
||||
};
|
||||
typeCheckConfig(NAME$9, config, DefaultType$8);
|
||||
typeCheckConfig(NAME$a, config, DefaultType$9);
|
||||
return config;
|
||||
}
|
||||
|
||||
@ -1247,11 +1271,11 @@ class Carousel extends BaseComponent {
|
||||
if (event.key === ARROW_LEFT_KEY) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_LEFT);
|
||||
this._slide(DIRECTION_RIGHT);
|
||||
} else if (event.key === ARROW_RIGHT_KEY) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_RIGHT);
|
||||
this._slide(DIRECTION_LEFT);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1413,10 +1437,10 @@ class Carousel extends BaseComponent {
|
||||
}
|
||||
|
||||
if (isRTL()) {
|
||||
return direction === DIRECTION_RIGHT ? ORDER_PREV : ORDER_NEXT;
|
||||
return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT;
|
||||
}
|
||||
|
||||
return direction === DIRECTION_RIGHT ? ORDER_NEXT : ORDER_PREV;
|
||||
return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV;
|
||||
}
|
||||
|
||||
_orderToDirection(order) {
|
||||
@ -1425,16 +1449,16 @@ class Carousel extends BaseComponent {
|
||||
}
|
||||
|
||||
if (isRTL()) {
|
||||
return order === ORDER_NEXT ? DIRECTION_LEFT : DIRECTION_RIGHT;
|
||||
return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT;
|
||||
}
|
||||
|
||||
return order === ORDER_NEXT ? DIRECTION_RIGHT : DIRECTION_LEFT;
|
||||
return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT;
|
||||
} // Static
|
||||
|
||||
|
||||
static carouselInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$9);
|
||||
let _config = { ...Default$8,
|
||||
let _config = { ...Default$9,
|
||||
...Manipulator.getDataAttributes(element)
|
||||
};
|
||||
|
||||
@ -1518,11 +1542,11 @@ EventHandler.on(window, EVENT_LOAD_DATA_API$2, () => {
|
||||
* add .Carousel to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$9, Carousel);
|
||||
defineJQueryPlugin(NAME$a, Carousel);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): collapse.js
|
||||
* Bootstrap (v5.0.0): collapse.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1532,15 +1556,15 @@ defineJQueryPlugin(NAME$9, Carousel);
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$8 = 'collapse';
|
||||
const NAME$9 = 'collapse';
|
||||
const DATA_KEY$8 = 'bs.collapse';
|
||||
const EVENT_KEY$8 = `.${DATA_KEY$8}`;
|
||||
const DATA_API_KEY$5 = '.data-api';
|
||||
const Default$7 = {
|
||||
const Default$8 = {
|
||||
toggle: true,
|
||||
parent: ''
|
||||
};
|
||||
const DefaultType$7 = {
|
||||
const DefaultType$8 = {
|
||||
toggle: 'boolean',
|
||||
parent: '(string|element)'
|
||||
};
|
||||
@ -1549,7 +1573,7 @@ const EVENT_SHOWN$5 = `shown${EVENT_KEY$8}`;
|
||||
const EVENT_HIDE$5 = `hide${EVENT_KEY$8}`;
|
||||
const EVENT_HIDDEN$5 = `hidden${EVENT_KEY$8}`;
|
||||
const EVENT_CLICK_DATA_API$4 = `click${EVENT_KEY$8}${DATA_API_KEY$5}`;
|
||||
const CLASS_NAME_SHOW$7 = 'show';
|
||||
const CLASS_NAME_SHOW$8 = 'show';
|
||||
const CLASS_NAME_COLLAPSE = 'collapse';
|
||||
const CLASS_NAME_COLLAPSING = 'collapsing';
|
||||
const CLASS_NAME_COLLAPSED = 'collapsed';
|
||||
@ -1596,7 +1620,7 @@ class Collapse extends BaseComponent {
|
||||
|
||||
|
||||
static get Default() {
|
||||
return Default$7;
|
||||
return Default$8;
|
||||
}
|
||||
|
||||
static get DATA_KEY() {
|
||||
@ -1605,7 +1629,7 @@ class Collapse extends BaseComponent {
|
||||
|
||||
|
||||
toggle() {
|
||||
if (this._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (this._element.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
@ -1613,7 +1637,7 @@ class Collapse extends BaseComponent {
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this._isTransitioning || this._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (this._isTransitioning || this._element.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1683,7 +1707,7 @@ class Collapse extends BaseComponent {
|
||||
const complete = () => {
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSING);
|
||||
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$7);
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$8);
|
||||
|
||||
this._element.style[dimension] = '';
|
||||
this.setTransitioning(false);
|
||||
@ -1699,7 +1723,7 @@ class Collapse extends BaseComponent {
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1716,7 +1740,7 @@ class Collapse extends BaseComponent {
|
||||
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSING);
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$7);
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$8);
|
||||
|
||||
const triggerArrayLength = this._triggerArray.length;
|
||||
|
||||
@ -1725,7 +1749,7 @@ class Collapse extends BaseComponent {
|
||||
const trigger = this._triggerArray[i];
|
||||
const elem = getElementFromSelector(trigger);
|
||||
|
||||
if (elem && !elem.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (elem && !elem.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
trigger.classList.add(CLASS_NAME_COLLAPSED);
|
||||
trigger.setAttribute('aria-expanded', false);
|
||||
}
|
||||
@ -1764,12 +1788,12 @@ class Collapse extends BaseComponent {
|
||||
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$7,
|
||||
config = { ...Default$8,
|
||||
...config
|
||||
};
|
||||
config.toggle = Boolean(config.toggle); // Coerce string values
|
||||
|
||||
typeCheckConfig(NAME$8, config, DefaultType$7);
|
||||
typeCheckConfig(NAME$9, config, DefaultType$8);
|
||||
return config;
|
||||
}
|
||||
|
||||
@ -1805,7 +1829,7 @@ class Collapse extends BaseComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
const isOpen = element.classList.contains(CLASS_NAME_SHOW$7);
|
||||
const isOpen = element.classList.contains(CLASS_NAME_SHOW$8);
|
||||
triggerArray.forEach(elem => {
|
||||
if (isOpen) {
|
||||
elem.classList.remove(CLASS_NAME_COLLAPSED);
|
||||
@ -1820,7 +1844,7 @@ class Collapse extends BaseComponent {
|
||||
|
||||
static collapseInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$8);
|
||||
const _config = { ...Default$7,
|
||||
const _config = { ...Default$8,
|
||||
...Manipulator.getDataAttributes(element),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
};
|
||||
@ -1891,11 +1915,11 @@ EventHandler.on(document, EVENT_CLICK_DATA_API$4, SELECTOR_DATA_TOGGLE$4, functi
|
||||
* add .Collapse to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$8, Collapse);
|
||||
defineJQueryPlugin(NAME$9, Collapse);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dropdown.js
|
||||
* Bootstrap (v5.0.0): dropdown.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1905,7 +1929,7 @@ defineJQueryPlugin(NAME$8, Collapse);
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$7 = 'dropdown';
|
||||
const NAME$8 = 'dropdown';
|
||||
const DATA_KEY$7 = 'bs.dropdown';
|
||||
const EVENT_KEY$7 = `.${DATA_KEY$7}`;
|
||||
const DATA_API_KEY$4 = '.data-api';
|
||||
@ -1925,8 +1949,7 @@ const EVENT_CLICK = `click${EVENT_KEY$7}`;
|
||||
const EVENT_CLICK_DATA_API$3 = `click${EVENT_KEY$7}${DATA_API_KEY$4}`;
|
||||
const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY$7}${DATA_API_KEY$4}`;
|
||||
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY$7}${DATA_API_KEY$4}`;
|
||||
const CLASS_NAME_DISABLED = 'disabled';
|
||||
const CLASS_NAME_SHOW$6 = 'show';
|
||||
const CLASS_NAME_SHOW$7 = 'show';
|
||||
const CLASS_NAME_DROPUP = 'dropup';
|
||||
const CLASS_NAME_DROPEND = 'dropend';
|
||||
const CLASS_NAME_DROPSTART = 'dropstart';
|
||||
@ -1941,19 +1964,21 @@ const PLACEMENT_BOTTOM = isRTL() ? 'bottom-end' : 'bottom-start';
|
||||
const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end';
|
||||
const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start';
|
||||
const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start';
|
||||
const Default$6 = {
|
||||
const Default$7 = {
|
||||
offset: [0, 2],
|
||||
boundary: 'clippingParents',
|
||||
reference: 'toggle',
|
||||
display: 'dynamic',
|
||||
popperConfig: null
|
||||
popperConfig: null,
|
||||
autoClose: true
|
||||
};
|
||||
const DefaultType$6 = {
|
||||
const DefaultType$7 = {
|
||||
offset: '(array|string|function)',
|
||||
boundary: '(string|element)',
|
||||
reference: '(string|element|object)',
|
||||
display: 'string',
|
||||
popperConfig: '(null|object|function)'
|
||||
popperConfig: '(null|object|function)',
|
||||
autoClose: '(boolean|string)'
|
||||
};
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@ -1974,11 +1999,11 @@ class Dropdown extends BaseComponent {
|
||||
|
||||
|
||||
static get Default() {
|
||||
return Default$6;
|
||||
return Default$7;
|
||||
}
|
||||
|
||||
static get DefaultType() {
|
||||
return DefaultType$6;
|
||||
return DefaultType$7;
|
||||
}
|
||||
|
||||
static get DATA_KEY() {
|
||||
@ -1987,15 +2012,14 @@ class Dropdown extends BaseComponent {
|
||||
|
||||
|
||||
toggle() {
|
||||
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED)) {
|
||||
if (isDisabled(this._element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isActive = this._element.classList.contains(CLASS_NAME_SHOW$6);
|
||||
|
||||
Dropdown.clearMenus();
|
||||
const isActive = this._element.classList.contains(CLASS_NAME_SHOW$7);
|
||||
|
||||
if (isActive) {
|
||||
this.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2003,7 +2027,7 @@ class Dropdown extends BaseComponent {
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED) || this._menu.classList.contains(CLASS_NAME_SHOW$6)) {
|
||||
if (isDisabled(this._element) || this._menu.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2054,48 +2078,33 @@ class Dropdown extends BaseComponent {
|
||||
|
||||
|
||||
if ('ontouchstart' in document.documentElement && !parent.closest(SELECTOR_NAVBAR_NAV)) {
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.on(elem, 'mouseover', null, noop()));
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.on(elem, 'mouseover', noop));
|
||||
}
|
||||
|
||||
this._element.focus();
|
||||
|
||||
this._element.setAttribute('aria-expanded', true);
|
||||
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$7);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$7);
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_SHOWN$4, relatedTarget);
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED) || !this._menu.classList.contains(CLASS_NAME_SHOW$6)) {
|
||||
if (isDisabled(this._element) || !this._menu.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const relatedTarget = {
|
||||
relatedTarget: this._element
|
||||
};
|
||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$4, relatedTarget);
|
||||
|
||||
if (hideEvent.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
this._popper.destroy();
|
||||
}
|
||||
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
|
||||
Manipulator.removeDataAttribute(this._menu, 'popper');
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$4, relatedTarget);
|
||||
this._completeHide(relatedTarget);
|
||||
}
|
||||
|
||||
dispose() {
|
||||
EventHandler.off(this._element, EVENT_KEY$7);
|
||||
this._menu = null;
|
||||
|
||||
if (this._popper) {
|
||||
@ -2123,16 +2132,43 @@ class Dropdown extends BaseComponent {
|
||||
});
|
||||
}
|
||||
|
||||
_completeHide(relatedTarget) {
|
||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$4, relatedTarget);
|
||||
|
||||
if (hideEvent.defaultPrevented) {
|
||||
return;
|
||||
} // If this is a touch-enabled device we remove the extra
|
||||
// empty mouseover listeners we added for iOS support
|
||||
|
||||
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.off(elem, 'mouseover', noop));
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
this._popper.destroy();
|
||||
}
|
||||
|
||||
this._menu.classList.remove(CLASS_NAME_SHOW$7);
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_SHOW$7);
|
||||
|
||||
this._element.setAttribute('aria-expanded', 'false');
|
||||
|
||||
Manipulator.removeDataAttribute(this._menu, 'popper');
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$4, relatedTarget);
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...this.constructor.Default,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...config
|
||||
};
|
||||
typeCheckConfig(NAME$7, config, this.constructor.DefaultType);
|
||||
typeCheckConfig(NAME$8, config, this.constructor.DefaultType);
|
||||
|
||||
if (typeof config.reference === 'object' && !isElement(config.reference) && typeof config.reference.getBoundingClientRect !== 'function') {
|
||||
// Popper virtual elements require a getBoundingClientRect method
|
||||
throw new TypeError(`${NAME$7.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);
|
||||
throw new TypeError(`${NAME$8.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);
|
||||
}
|
||||
|
||||
return config;
|
||||
@ -2209,6 +2245,29 @@ class Dropdown extends BaseComponent {
|
||||
return { ...defaultBsPopperConfig,
|
||||
...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig)
|
||||
};
|
||||
}
|
||||
|
||||
_selectMenuItem(event) {
|
||||
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 (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();
|
||||
} // Static
|
||||
|
||||
|
||||
@ -2242,7 +2301,7 @@ class Dropdown extends BaseComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
if (/input|select|textarea|form/i.test(event.target.tagName)) {
|
||||
if (/input|select|option|textarea|form/i.test(event.target.tagName)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -2251,58 +2310,38 @@ class Dropdown extends BaseComponent {
|
||||
|
||||
for (let i = 0, len = toggles.length; i < len; i++) {
|
||||
const context = Data.get(toggles[i], DATA_KEY$7);
|
||||
|
||||
if (!context || context._config.autoClose === false) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!context._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const relatedTarget = {
|
||||
relatedTarget: toggles[i]
|
||||
relatedTarget: context._element
|
||||
};
|
||||
|
||||
if (event && event.type === 'click') {
|
||||
relatedTarget.clickEvent = event;
|
||||
}
|
||||
|
||||
if (!context) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const dropdownMenu = context._menu;
|
||||
|
||||
if (!toggles[i].classList.contains(CLASS_NAME_SHOW$6)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (event) {
|
||||
// Don't close the menu if the clicked element or one of its parents is the dropdown button
|
||||
if ([context._element].some(element => event.composedPath().includes(element))) {
|
||||
const composedPath = event.composedPath();
|
||||
const isMenuTarget = composedPath.includes(context._menu);
|
||||
|
||||
if (composedPath.includes(context._element) || context._config.autoClose === 'inside' && !isMenuTarget || context._config.autoClose === 'outside' && isMenuTarget) {
|
||||
continue;
|
||||
} // Tab navigation through the dropdown menu shouldn't close the menu
|
||||
|
||||
|
||||
if (event.type === 'keyup' && event.key === TAB_KEY && dropdownMenu.contains(event.target)) {
|
||||
if (event.type === 'keyup' && event.key === TAB_KEY && context._menu.contains(event.target)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (event.type === 'click') {
|
||||
relatedTarget.clickEvent = event;
|
||||
}
|
||||
}
|
||||
|
||||
const hideEvent = EventHandler.trigger(toggles[i], EVENT_HIDE$4, relatedTarget);
|
||||
|
||||
if (hideEvent.defaultPrevented) {
|
||||
continue;
|
||||
} // If this is a touch-enabled device we remove the extra
|
||||
// empty mouseover listeners we added for iOS support
|
||||
|
||||
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.off(elem, 'mouseover', null, noop()));
|
||||
}
|
||||
|
||||
toggles[i].setAttribute('aria-expanded', 'false');
|
||||
|
||||
if (context._popper) {
|
||||
context._popper.destroy();
|
||||
}
|
||||
|
||||
dropdownMenu.classList.remove(CLASS_NAME_SHOW$6);
|
||||
toggles[i].classList.remove(CLASS_NAME_SHOW$6);
|
||||
Manipulator.removeDataAttribute(dropdownMenu, 'popper');
|
||||
EventHandler.trigger(toggles[i], EVENT_HIDDEN$4, relatedTarget);
|
||||
context._completeHide(relatedTarget);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2322,26 +2361,29 @@ class Dropdown extends BaseComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const isActive = this.classList.contains(CLASS_NAME_SHOW$7);
|
||||
|
||||
if (this.disabled || this.classList.contains(CLASS_NAME_DISABLED)) {
|
||||
if (!isActive && event.key === ESCAPE_KEY$2) {
|
||||
return;
|
||||
}
|
||||
|
||||
const parent = Dropdown.getParentFromElement(this);
|
||||
const isActive = this.classList.contains(CLASS_NAME_SHOW$6);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (isDisabled(this)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const getToggleButton = () => this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0];
|
||||
|
||||
if (event.key === ESCAPE_KEY$2) {
|
||||
const button = this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0];
|
||||
button.focus();
|
||||
getToggleButton().focus();
|
||||
Dropdown.clearMenus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
|
||||
const button = this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0];
|
||||
button.click();
|
||||
getToggleButton().click();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2350,26 +2392,7 @@ class Dropdown extends BaseComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, parent).filter(isVisible);
|
||||
|
||||
if (!items.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
let index = items.indexOf(event.target); // Up
|
||||
|
||||
if (event.key === ARROW_UP_KEY && index > 0) {
|
||||
index--;
|
||||
} // Down
|
||||
|
||||
|
||||
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();
|
||||
Dropdown.getInstance(getToggleButton())._selectMenuItem(event);
|
||||
}
|
||||
|
||||
}
|
||||
@ -2395,11 +2418,213 @@ EventHandler.on(document, EVENT_CLICK_DATA_API$3, SELECTOR_DATA_TOGGLE$3, functi
|
||||
* add .Dropdown to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$7, Dropdown);
|
||||
defineJQueryPlugin(NAME$8, Dropdown);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): modal.js
|
||||
* Bootstrap (v5.0.0): 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);
|
||||
}
|
||||
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
|
||||
const _setElementAttributes = (selector, styleProp, callback) => {
|
||||
const scrollbarWidth = getWidth();
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0): util/backdrop.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
const Default$6 = {
|
||||
isVisible: true,
|
||||
// if false, we use the backdrop helper without adding any element to the dom
|
||||
isAnimated: false,
|
||||
rootElement: document.body,
|
||||
// give the choice to place backdrop under different elements
|
||||
clickCallback: null
|
||||
};
|
||||
const DefaultType$6 = {
|
||||
isVisible: 'boolean',
|
||||
isAnimated: 'boolean',
|
||||
rootElement: 'element',
|
||||
clickCallback: '(function|null)'
|
||||
};
|
||||
const NAME$7 = 'backdrop';
|
||||
const CLASS_NAME_BACKDROP = 'modal-backdrop';
|
||||
const CLASS_NAME_FADE$5 = 'fade';
|
||||
const CLASS_NAME_SHOW$6 = 'show';
|
||||
const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$7}`;
|
||||
|
||||
class Backdrop {
|
||||
constructor(config) {
|
||||
this._config = this._getConfig(config);
|
||||
this._isAppended = false;
|
||||
this._element = null;
|
||||
}
|
||||
|
||||
show(callback) {
|
||||
if (!this._config.isVisible) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
this._append();
|
||||
|
||||
if (this._config.isAnimated) {
|
||||
reflow(this._getElement());
|
||||
}
|
||||
|
||||
this._getElement().classList.add(CLASS_NAME_SHOW$6);
|
||||
|
||||
this._emulateAnimation(() => {
|
||||
execute(callback);
|
||||
});
|
||||
}
|
||||
|
||||
hide(callback) {
|
||||
if (!this._config.isVisible) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
this._getElement().classList.remove(CLASS_NAME_SHOW$6);
|
||||
|
||||
this._emulateAnimation(() => {
|
||||
this.dispose();
|
||||
execute(callback);
|
||||
});
|
||||
} // Private
|
||||
|
||||
|
||||
_getElement() {
|
||||
if (!this._element) {
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = CLASS_NAME_BACKDROP;
|
||||
|
||||
if (this._config.isAnimated) {
|
||||
backdrop.classList.add(CLASS_NAME_FADE$5);
|
||||
}
|
||||
|
||||
this._element = backdrop;
|
||||
}
|
||||
|
||||
return this._element;
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$6,
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
typeCheckConfig(NAME$7, config, DefaultType$6);
|
||||
return config;
|
||||
}
|
||||
|
||||
_append() {
|
||||
if (this._isAppended) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._config.rootElement.appendChild(this._getElement());
|
||||
|
||||
EventHandler.on(this._getElement(), EVENT_MOUSEDOWN, () => {
|
||||
execute(this._config.clickCallback);
|
||||
});
|
||||
this._isAppended = true;
|
||||
}
|
||||
|
||||
dispose() {
|
||||
if (!this._isAppended) {
|
||||
return;
|
||||
}
|
||||
|
||||
EventHandler.off(this._element, EVENT_MOUSEDOWN);
|
||||
|
||||
this._getElement().parentNode.removeChild(this._element);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0): modal.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -2432,12 +2657,10 @@ const EVENT_SHOWN$3 = `shown${EVENT_KEY$6}`;
|
||||
const EVENT_FOCUSIN$1 = `focusin${EVENT_KEY$6}`;
|
||||
const EVENT_RESIZE = `resize${EVENT_KEY$6}`;
|
||||
const EVENT_CLICK_DISMISS$2 = `click.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_KEYDOWN_DISMISS$1 = `keydown.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_CLICK_DATA_API$2 = `click${EVENT_KEY$6}${DATA_API_KEY$3}`;
|
||||
const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure';
|
||||
const CLASS_NAME_BACKDROP = 'modal-backdrop';
|
||||
const CLASS_NAME_OPEN = 'modal-open';
|
||||
const CLASS_NAME_FADE$4 = 'fade';
|
||||
const CLASS_NAME_SHOW$5 = 'show';
|
||||
@ -2446,8 +2669,6 @@ const SELECTOR_DIALOG = '.modal-dialog';
|
||||
const SELECTOR_MODAL_BODY = '.modal-body';
|
||||
const SELECTOR_DATA_TOGGLE$2 = '[data-bs-toggle="modal"]';
|
||||
const SELECTOR_DATA_DISMISS$2 = '[data-bs-dismiss="modal"]';
|
||||
const SELECTOR_FIXED_CONTENT$1 = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top';
|
||||
const SELECTOR_STICKY_CONTENT$1 = '.sticky-top';
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
@ -2459,12 +2680,10 @@ class Modal extends BaseComponent {
|
||||
super(element);
|
||||
this._config = this._getConfig(config);
|
||||
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
|
||||
this._backdrop = null;
|
||||
this._backdrop = this._initializeBackDrop();
|
||||
this._isShown = false;
|
||||
this._isBodyOverflowing = false;
|
||||
this._ignoreBackdropClick = false;
|
||||
this._isTransitioning = false;
|
||||
this._scrollbarWidth = 0;
|
||||
} // Getters
|
||||
|
||||
|
||||
@ -2499,10 +2718,8 @@ class Modal extends BaseComponent {
|
||||
}
|
||||
|
||||
this._isShown = true;
|
||||
|
||||
this._checkScrollbar();
|
||||
|
||||
this._setScrollbar();
|
||||
hide();
|
||||
document.body.classList.add(CLASS_NAME_OPEN);
|
||||
|
||||
this._adjustDialog();
|
||||
|
||||
@ -2566,7 +2783,7 @@ class Modal extends BaseComponent {
|
||||
}
|
||||
|
||||
dispose() {
|
||||
[window, this._element, this._dialog].forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY$6));
|
||||
[window, this._dialog].forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY$6));
|
||||
super.dispose();
|
||||
/**
|
||||
* `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API`
|
||||
@ -2577,12 +2794,13 @@ class Modal extends BaseComponent {
|
||||
EventHandler.off(document, EVENT_FOCUSIN$1);
|
||||
this._config = null;
|
||||
this._dialog = null;
|
||||
|
||||
this._backdrop.dispose();
|
||||
|
||||
this._backdrop = null;
|
||||
this._isShown = null;
|
||||
this._isBodyOverflowing = null;
|
||||
this._ignoreBackdropClick = null;
|
||||
this._isTransitioning = null;
|
||||
this._scrollbarWidth = null;
|
||||
}
|
||||
|
||||
handleUpdate() {
|
||||
@ -2590,8 +2808,17 @@ class Modal extends BaseComponent {
|
||||
} // Private
|
||||
|
||||
|
||||
_initializeBackDrop() {
|
||||
return new Backdrop({
|
||||
isVisible: Boolean(this._config.backdrop),
|
||||
// 'static' option will be translated to true, and booleans will keep their value
|
||||
isAnimated: this._isAnimated()
|
||||
});
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$5,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...config
|
||||
};
|
||||
typeCheckConfig(NAME$6, config, DefaultType$5);
|
||||
@ -2664,7 +2891,7 @@ class Modal extends BaseComponent {
|
||||
|
||||
_setEscapeEvent() {
|
||||
if (this._isShown) {
|
||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS$1, event => {
|
||||
if (this._config.keyboard && event.key === ESCAPE_KEY$1) {
|
||||
event.preventDefault();
|
||||
this.hide();
|
||||
@ -2673,7 +2900,7 @@ class Modal extends BaseComponent {
|
||||
}
|
||||
});
|
||||
} else {
|
||||
EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS);
|
||||
EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS$1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2696,85 +2923,35 @@ class Modal extends BaseComponent {
|
||||
|
||||
this._isTransitioning = false;
|
||||
|
||||
this._showBackdrop(() => {
|
||||
this._backdrop.hide(() => {
|
||||
document.body.classList.remove(CLASS_NAME_OPEN);
|
||||
|
||||
this._resetAdjustments();
|
||||
|
||||
this._resetScrollbar();
|
||||
|
||||
reset();
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$3);
|
||||
});
|
||||
}
|
||||
|
||||
_removeBackdrop() {
|
||||
this._backdrop.parentNode.removeChild(this._backdrop);
|
||||
|
||||
this._backdrop = null;
|
||||
}
|
||||
|
||||
_showBackdrop(callback) {
|
||||
const isAnimated = this._isAnimated();
|
||||
|
||||
if (this._isShown && this._config.backdrop) {
|
||||
this._backdrop = document.createElement('div');
|
||||
this._backdrop.className = CLASS_NAME_BACKDROP;
|
||||
|
||||
if (isAnimated) {
|
||||
this._backdrop.classList.add(CLASS_NAME_FADE$4);
|
||||
}
|
||||
|
||||
document.body.appendChild(this._backdrop);
|
||||
EventHandler.on(this._element, EVENT_CLICK_DISMISS$2, event => {
|
||||
if (this._ignoreBackdropClick) {
|
||||
this._ignoreBackdropClick = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._config.backdrop === 'static') {
|
||||
this._triggerBackdropTransition();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
|
||||
if (isAnimated) {
|
||||
reflow(this._backdrop);
|
||||
}
|
||||
|
||||
this._backdrop.classList.add(CLASS_NAME_SHOW$5);
|
||||
|
||||
if (!isAnimated) {
|
||||
callback();
|
||||
EventHandler.on(this._element, EVENT_CLICK_DISMISS$2, event => {
|
||||
if (this._ignoreBackdropClick) {
|
||||
this._ignoreBackdropClick = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop);
|
||||
EventHandler.one(this._backdrop, 'transitionend', callback);
|
||||
emulateTransitionEnd(this._backdrop, backdropTransitionDuration);
|
||||
} else if (!this._isShown && this._backdrop) {
|
||||
this._backdrop.classList.remove(CLASS_NAME_SHOW$5);
|
||||
|
||||
const callbackRemove = () => {
|
||||
this._removeBackdrop();
|
||||
|
||||
callback();
|
||||
};
|
||||
|
||||
if (isAnimated) {
|
||||
const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop);
|
||||
EventHandler.one(this._backdrop, 'transitionend', callbackRemove);
|
||||
emulateTransitionEnd(this._backdrop, backdropTransitionDuration);
|
||||
} else {
|
||||
callbackRemove();
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
|
||||
if (this._config.backdrop === true) {
|
||||
this.hide();
|
||||
} else if (this._config.backdrop === 'static') {
|
||||
this._triggerBackdropTransition();
|
||||
}
|
||||
});
|
||||
|
||||
this._backdrop.show(callback);
|
||||
}
|
||||
|
||||
_isAnimated() {
|
||||
@ -2818,103 +2995,37 @@ class Modal extends BaseComponent {
|
||||
|
||||
_adjustDialog() {
|
||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
const scrollbarWidth = getWidth();
|
||||
const isBodyOverflowing = scrollbarWidth > 0;
|
||||
|
||||
if (!this._isBodyOverflowing && isModalOverflowing && !isRTL() || this._isBodyOverflowing && !isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingLeft = `${this._scrollbarWidth}px`;
|
||||
if (!isBodyOverflowing && isModalOverflowing && !isRTL() || isBodyOverflowing && !isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingLeft = `${scrollbarWidth}px`;
|
||||
}
|
||||
|
||||
if (this._isBodyOverflowing && !isModalOverflowing && !isRTL() || !this._isBodyOverflowing && isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingRight = `${this._scrollbarWidth}px`;
|
||||
if (isBodyOverflowing && !isModalOverflowing && !isRTL() || !isBodyOverflowing && isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingRight = `${scrollbarWidth}px`;
|
||||
}
|
||||
}
|
||||
|
||||
_resetAdjustments() {
|
||||
this._element.style.paddingLeft = '';
|
||||
this._element.style.paddingRight = '';
|
||||
}
|
||||
|
||||
_checkScrollbar() {
|
||||
const rect = document.body.getBoundingClientRect();
|
||||
this._isBodyOverflowing = Math.round(rect.left + rect.right) < window.innerWidth;
|
||||
this._scrollbarWidth = this._getScrollbarWidth();
|
||||
}
|
||||
|
||||
_setScrollbar() {
|
||||
if (this._isBodyOverflowing) {
|
||||
this._setElementAttributes(SELECTOR_FIXED_CONTENT$1, 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth);
|
||||
|
||||
this._setElementAttributes(SELECTOR_STICKY_CONTENT$1, 'marginRight', calculatedValue => calculatedValue - this._scrollbarWidth);
|
||||
|
||||
this._setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth);
|
||||
}
|
||||
|
||||
document.body.classList.add(CLASS_NAME_OPEN);
|
||||
}
|
||||
|
||||
_setElementAttributes(selector, styleProp, callback) {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + this._scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
const actualValue = element.style[styleProp];
|
||||
const calculatedValue = window.getComputedStyle(element)[styleProp];
|
||||
Manipulator.setDataAttribute(element, styleProp, actualValue);
|
||||
element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
_resetScrollbar() {
|
||||
this._resetElementAttributes(SELECTOR_FIXED_CONTENT$1, 'paddingRight');
|
||||
|
||||
this._resetElementAttributes(SELECTOR_STICKY_CONTENT$1, 'marginRight');
|
||||
|
||||
this._resetElementAttributes('body', 'paddingRight');
|
||||
}
|
||||
|
||||
_resetElementAttributes(selector, styleProp) {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined' && element === document.body) {
|
||||
element.style[styleProp] = '';
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_getScrollbarWidth() {
|
||||
// thx d.walsh
|
||||
const scrollDiv = document.createElement('div');
|
||||
scrollDiv.className = CLASS_NAME_SCROLLBAR_MEASURER;
|
||||
document.body.appendChild(scrollDiv);
|
||||
const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
|
||||
document.body.removeChild(scrollDiv);
|
||||
return scrollbarWidth;
|
||||
} // Static
|
||||
|
||||
|
||||
static jQueryInterface(config, relatedTarget) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$6);
|
||||
const _config = { ...Default$5,
|
||||
...Manipulator.getDataAttributes(this),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
};
|
||||
const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {});
|
||||
|
||||
if (!data) {
|
||||
data = new Modal(this, _config);
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config](relatedTarget);
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config](relatedTarget);
|
||||
});
|
||||
}
|
||||
|
||||
@ -2929,7 +3040,7 @@ class Modal extends BaseComponent {
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API$2, SELECTOR_DATA_TOGGLE$2, function (event) {
|
||||
const target = getElementFromSelector(this);
|
||||
|
||||
if (this.tagName === 'A' || this.tagName === 'AREA') {
|
||||
if (['A', 'AREA'].includes(this.tagName)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@ -2945,15 +3056,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API$2, SELECTOR_DATA_TOGGLE$2, functi
|
||||
}
|
||||
});
|
||||
});
|
||||
let data = Data.get(target, DATA_KEY$6);
|
||||
|
||||
if (!data) {
|
||||
const config = { ...Manipulator.getDataAttributes(target),
|
||||
...Manipulator.getDataAttributes(this)
|
||||
};
|
||||
data = new Modal(target, config);
|
||||
}
|
||||
|
||||
const data = Modal.getInstance(target) || new Modal(target);
|
||||
data.toggle(this);
|
||||
});
|
||||
/**
|
||||
@ -2967,69 +3070,7 @@ defineJQueryPlugin(NAME$6, Modal);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): util/scrollBar.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed';
|
||||
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()) => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
_setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
|
||||
_setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
|
||||
|
||||
_setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
};
|
||||
|
||||
const _setElementAttributes = (selector, styleProp, callback) => {
|
||||
const scrollbarWidth = getWidth();
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
document.body.style.overflow = 'auto';
|
||||
|
||||
_resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
||||
|
||||
_resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
||||
|
||||
_resetElementAttributes('body', 'paddingRight');
|
||||
};
|
||||
|
||||
const _resetElementAttributes = (selector, styleProp) => {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined' && element === document.body) {
|
||||
element.style.removeProperty(styleProp);
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): offcanvas.js
|
||||
* Bootstrap (v5.0.0): offcanvas.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3055,11 +3096,8 @@ const DefaultType$4 = {
|
||||
keyboard: 'boolean',
|
||||
scroll: 'boolean'
|
||||
};
|
||||
const CLASS_NAME_BACKDROP_BODY = 'offcanvas-backdrop';
|
||||
const CLASS_NAME_SHOW$4 = 'show';
|
||||
const CLASS_NAME_TOGGLING = 'offcanvas-toggling';
|
||||
const OPEN_SELECTOR = '.offcanvas.show';
|
||||
const ACTIVE_SELECTOR = `${OPEN_SELECTOR}, .${CLASS_NAME_TOGGLING}`;
|
||||
const EVENT_SHOW$2 = `show${EVENT_KEY$5}`;
|
||||
const EVENT_SHOWN$2 = `shown${EVENT_KEY$5}`;
|
||||
const EVENT_HIDE$2 = `hide${EVENT_KEY$5}`;
|
||||
@ -3067,6 +3105,7 @@ const EVENT_HIDDEN$2 = `hidden${EVENT_KEY$5}`;
|
||||
const EVENT_FOCUSIN = `focusin${EVENT_KEY$5}`;
|
||||
const EVENT_CLICK_DATA_API$1 = `click${EVENT_KEY$5}${DATA_API_KEY$2}`;
|
||||
const EVENT_CLICK_DISMISS$1 = `click.dismiss${EVENT_KEY$5}`;
|
||||
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY$5}`;
|
||||
const SELECTOR_DATA_DISMISS$1 = '[data-bs-dismiss="offcanvas"]';
|
||||
const SELECTOR_DATA_TOGGLE$1 = '[data-bs-toggle="offcanvas"]';
|
||||
/**
|
||||
@ -3080,6 +3119,7 @@ class Offcanvas extends BaseComponent {
|
||||
super(element);
|
||||
this._config = this._getConfig(config);
|
||||
this._isShown = false;
|
||||
this._backdrop = this._initializeBackDrop();
|
||||
|
||||
this._addEventListeners();
|
||||
} // Getters
|
||||
@ -3114,15 +3154,13 @@ class Offcanvas extends BaseComponent {
|
||||
this._isShown = true;
|
||||
this._element.style.visibility = 'visible';
|
||||
|
||||
if (this._config.backdrop) {
|
||||
document.body.classList.add(CLASS_NAME_BACKDROP_BODY);
|
||||
}
|
||||
this._backdrop.show();
|
||||
|
||||
if (!this._config.scroll) {
|
||||
hide();
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_TOGGLING);
|
||||
this._enforceFocusOnElement(this._element);
|
||||
}
|
||||
|
||||
this._element.removeAttribute('aria-hidden');
|
||||
|
||||
@ -3133,16 +3171,14 @@ class Offcanvas extends BaseComponent {
|
||||
this._element.classList.add(CLASS_NAME_SHOW$4);
|
||||
|
||||
const completeCallBack = () => {
|
||||
this._element.classList.remove(CLASS_NAME_TOGGLING);
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_SHOWN$2, {
|
||||
relatedTarget
|
||||
});
|
||||
|
||||
this._enforceFocusOnElement(this._element);
|
||||
};
|
||||
|
||||
setTimeout(completeCallBack, getTransitionDurationFromElement(this._element));
|
||||
const transitionDuration = getTransitionDurationFromElement(this._element);
|
||||
EventHandler.one(this._element, 'transitionend', completeCallBack);
|
||||
emulateTransitionEnd(this._element, transitionDuration);
|
||||
}
|
||||
|
||||
hide() {
|
||||
@ -3156,8 +3192,6 @@ class Offcanvas extends BaseComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_TOGGLING);
|
||||
|
||||
EventHandler.off(document, EVENT_FOCUSIN);
|
||||
|
||||
this._element.blur();
|
||||
@ -3166,6 +3200,8 @@ class Offcanvas extends BaseComponent {
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_SHOW$4);
|
||||
|
||||
this._backdrop.hide();
|
||||
|
||||
const completeCallback = () => {
|
||||
this._element.setAttribute('aria-hidden', true);
|
||||
|
||||
@ -3175,20 +3211,25 @@ class Offcanvas extends BaseComponent {
|
||||
|
||||
this._element.style.visibility = 'hidden';
|
||||
|
||||
if (this._config.backdrop) {
|
||||
document.body.classList.remove(CLASS_NAME_BACKDROP_BODY);
|
||||
}
|
||||
|
||||
if (!this._config.scroll) {
|
||||
reset();
|
||||
}
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$2);
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_TOGGLING);
|
||||
};
|
||||
|
||||
setTimeout(completeCallback, getTransitionDurationFromElement(this._element));
|
||||
const transitionDuration = getTransitionDurationFromElement(this._element);
|
||||
EventHandler.one(this._element, 'transitionend', completeCallback);
|
||||
emulateTransitionEnd(this._element, transitionDuration);
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this._backdrop.dispose();
|
||||
|
||||
super.dispose();
|
||||
EventHandler.off(document, EVENT_FOCUSIN);
|
||||
this._config = null;
|
||||
this._backdrop = null;
|
||||
} // Private
|
||||
|
||||
|
||||
@ -3201,6 +3242,15 @@ class Offcanvas extends BaseComponent {
|
||||
return config;
|
||||
}
|
||||
|
||||
_initializeBackDrop() {
|
||||
return new Backdrop({
|
||||
isVisible: this._config.backdrop,
|
||||
isAnimated: true,
|
||||
rootElement: this._element.parentNode,
|
||||
clickCallback: () => this.hide()
|
||||
});
|
||||
}
|
||||
|
||||
_enforceFocusOnElement(element) {
|
||||
EventHandler.off(document, EVENT_FOCUSIN); // guard against infinite focus loop
|
||||
|
||||
@ -3214,18 +3264,11 @@ class Offcanvas extends BaseComponent {
|
||||
|
||||
_addEventListeners() {
|
||||
EventHandler.on(this._element, EVENT_CLICK_DISMISS$1, SELECTOR_DATA_DISMISS$1, () => this.hide());
|
||||
EventHandler.on(document, 'keydown', event => {
|
||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
||||
if (this._config.keyboard && event.key === ESCAPE_KEY) {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API$1, event => {
|
||||
const target = SelectorEngine.findOne(getSelectorFromElement(event.target));
|
||||
|
||||
if (!this._element.contains(event.target) && target !== this._element) {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
} // Static
|
||||
|
||||
|
||||
@ -3271,10 +3314,10 @@ EventHandler.on(document, EVENT_CLICK_DATA_API$1, SELECTOR_DATA_TOGGLE$1, functi
|
||||
}
|
||||
}); // avoid conflict when clicking a toggler of an offcanvas, while another is open
|
||||
|
||||
const allReadyOpen = SelectorEngine.findOne(ACTIVE_SELECTOR);
|
||||
const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR);
|
||||
|
||||
if (allReadyOpen && allReadyOpen !== target) {
|
||||
return;
|
||||
Offcanvas.getInstance(allReadyOpen).hide();
|
||||
}
|
||||
|
||||
const data = Data.get(target, DATA_KEY$5) || new Offcanvas(target);
|
||||
@ -3293,7 +3336,7 @@ defineJQueryPlugin(NAME$5, Offcanvas);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): util/sanitizer.js
|
||||
* Bootstrap (v5.0.0): util/sanitizer.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3406,7 +3449,7 @@ function sanitizeHtml(unsafeHtml, allowList, sanitizeFn) {
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): tooltip.js
|
||||
* Bootstrap (v5.0.0): tooltip.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3581,7 +3624,6 @@ class Tooltip extends BaseComponent {
|
||||
|
||||
dispose() {
|
||||
clearTimeout(this._timeout);
|
||||
EventHandler.off(this._element, this.constructor.EVENT_KEY);
|
||||
EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler);
|
||||
|
||||
if (this.tip && this.tip.parentNode) {
|
||||
@ -3666,7 +3708,7 @@ class Tooltip extends BaseComponent {
|
||||
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
[].concat(...document.body.children).forEach(element => {
|
||||
EventHandler.on(element, 'mouseover', noop());
|
||||
EventHandler.on(element, 'mouseover', noop);
|
||||
});
|
||||
}
|
||||
|
||||
@ -3865,7 +3907,6 @@ class Tooltip extends BaseComponent {
|
||||
modifiers: [{
|
||||
name: 'flip',
|
||||
options: {
|
||||
altBoundary: true,
|
||||
fallbackPlacements: this.config.fallbackPlacements
|
||||
}
|
||||
}, {
|
||||
@ -4148,7 +4189,7 @@ defineJQueryPlugin(NAME$4, Tooltip);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): popover.js
|
||||
* Bootstrap (v5.0.0): popover.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4298,7 +4339,7 @@ defineJQueryPlugin(NAME$3, Popover);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): scrollspy.js
|
||||
* Bootstrap (v5.0.0): scrollspy.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4411,6 +4452,7 @@ class ScrollSpy extends BaseComponent {
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$1,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
};
|
||||
|
||||
@ -4519,21 +4561,17 @@ class ScrollSpy extends BaseComponent {
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$2);
|
||||
const data = ScrollSpy.getInstance(this) || new ScrollSpy(this, typeof config === 'object' ? config : {});
|
||||
|
||||
const _config = typeof config === 'object' && config;
|
||||
|
||||
if (!data) {
|
||||
data = new ScrollSpy(this, _config);
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config]();
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config]();
|
||||
});
|
||||
}
|
||||
|
||||
@ -4546,7 +4584,7 @@ class ScrollSpy extends BaseComponent {
|
||||
|
||||
|
||||
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
||||
SelectorEngine.find(SELECTOR_DATA_SPY).forEach(spy => new ScrollSpy(spy, Manipulator.getDataAttributes(spy)));
|
||||
SelectorEngine.find(SELECTOR_DATA_SPY).forEach(spy => new ScrollSpy(spy));
|
||||
});
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@ -4559,7 +4597,7 @@ defineJQueryPlugin(NAME$2, ScrollSpy);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): tab.js
|
||||
* Bootstrap (v5.0.0): tab.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4603,7 +4641,7 @@ class Tab extends BaseComponent {
|
||||
|
||||
|
||||
show() {
|
||||
if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.classList.contains(CLASS_NAME_ACTIVE) || isDisabled(this._element)) {
|
||||
if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.classList.contains(CLASS_NAME_ACTIVE)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -4691,11 +4729,17 @@ class Tab extends BaseComponent {
|
||||
element.classList.add(CLASS_NAME_SHOW$1);
|
||||
}
|
||||
|
||||
if (element.parentNode && element.parentNode.classList.contains(CLASS_NAME_DROPDOWN_MENU)) {
|
||||
let parent = element.parentNode;
|
||||
|
||||
if (parent && parent.nodeName === 'LI') {
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
|
||||
if (parent && parent.classList.contains(CLASS_NAME_DROPDOWN_MENU)) {
|
||||
const dropdownElement = element.closest(SELECTOR_DROPDOWN);
|
||||
|
||||
if (dropdownElement) {
|
||||
SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE).forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE));
|
||||
SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement).forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE));
|
||||
}
|
||||
|
||||
element.setAttribute('aria-expanded', true);
|
||||
@ -4730,7 +4774,14 @@ class Tab extends BaseComponent {
|
||||
|
||||
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
||||
event.preventDefault();
|
||||
if (['A', 'AREA'].includes(this.tagName)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (isDisabled(this)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = Data.get(this, DATA_KEY$1) || new Tab(this);
|
||||
data.show();
|
||||
});
|
||||
@ -4745,7 +4796,7 @@ defineJQueryPlugin(NAME$1, Tab);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): toast.js
|
||||
* Bootstrap (v5.0.0): toast.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4884,7 +4935,6 @@ class Toast extends BaseComponent {
|
||||
this._element.classList.remove(CLASS_NAME_SHOW);
|
||||
}
|
||||
|
||||
EventHandler.off(this._element, EVENT_CLICK_DISMISS);
|
||||
super.dispose();
|
||||
this._config = null;
|
||||
} // Private
|
||||
|
||||
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
986
docs/5.0/dist/js/bootstrap.js
vendored
986
docs/5.0/dist/js/bootstrap.js
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
|
||||
* Bootstrap v5.0.0 (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.0-beta3): util/index.js
|
||||
* Bootstrap (v5.0.0): util/index.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -78,7 +78,7 @@
|
||||
|
||||
|
||||
if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) {
|
||||
hrefAttr = '#' + hrefAttr.split('#')[1];
|
||||
hrefAttr = `#${hrefAttr.split('#')[1]}`;
|
||||
}
|
||||
|
||||
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null;
|
||||
@ -156,7 +156,7 @@
|
||||
const valueType = value && isElement(value) ? 'element' : toType(value);
|
||||
|
||||
if (!new RegExp(expectedTypes).test(valueType)) {
|
||||
throw new TypeError(`${componentName.toUpperCase()}: ` + `Option "${property}" provided type "${valueType}" ` + `but expected type "${expectedTypes}".`);
|
||||
throw new TypeError(`${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -214,7 +214,7 @@
|
||||
return findShadowRoot(element.parentNode);
|
||||
};
|
||||
|
||||
const noop = () => function () {};
|
||||
const noop = () => {};
|
||||
|
||||
const reflow = element => element.offsetHeight;
|
||||
|
||||
@ -258,9 +258,15 @@
|
||||
});
|
||||
};
|
||||
|
||||
const execute = callback => {
|
||||
if (typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/data.js
|
||||
* Bootstrap (v5.0.0): dom/data.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -314,7 +320,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/event-handler.js
|
||||
* Bootstrap (v5.0.0): dom/event-handler.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -334,6 +340,7 @@
|
||||
mouseenter: 'mouseover',
|
||||
mouseleave: 'mouseout'
|
||||
};
|
||||
const customEventsRegex = /^(mouseenter|mouseleave)/i;
|
||||
const nativeEvents = new Set(['click', 'dblclick', 'mouseup', 'mousedown', 'contextmenu', 'mousewheel', 'DOMMouseScroll', 'mouseover', 'mouseout', 'mousemove', 'selectstart', 'selectend', 'keydown', 'keypress', 'keyup', 'orientationchange', 'touchstart', 'touchmove', 'touchend', 'touchcancel', 'pointerdown', 'pointermove', 'pointerup', 'pointerleave', 'pointercancel', 'gesturestart', 'gesturechange', 'gestureend', 'focus', 'blur', 'change', 'reset', 'select', 'submit', 'focusin', 'focusout', 'load', 'unload', 'beforeunload', 'resize', 'move', 'DOMContentLoaded', 'readystatechange', 'error', 'abort', 'scroll']);
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@ -377,7 +384,7 @@
|
||||
|
||||
if (handler.oneOff) {
|
||||
// eslint-disable-next-line unicorn/consistent-destructuring
|
||||
EventHandler.off(element, event.type, fn);
|
||||
EventHandler.off(element, event.type, selector, fn);
|
||||
}
|
||||
|
||||
return fn.apply(target, [event]);
|
||||
@ -406,15 +413,8 @@
|
||||
|
||||
function normalizeParams(originalTypeEvent, handler, delegationFn) {
|
||||
const delegation = typeof handler === 'string';
|
||||
const originalHandler = delegation ? delegationFn : handler; // allow to get the native events from namespaced events ('click.bs.button' --> 'click')
|
||||
|
||||
let typeEvent = originalTypeEvent.replace(stripNameRegex, '');
|
||||
const custom = customEvents[typeEvent];
|
||||
|
||||
if (custom) {
|
||||
typeEvent = custom;
|
||||
}
|
||||
|
||||
const originalHandler = delegation ? delegationFn : handler;
|
||||
let typeEvent = getTypeEvent(originalTypeEvent);
|
||||
const isNative = nativeEvents.has(typeEvent);
|
||||
|
||||
if (!isNative) {
|
||||
@ -432,6 +432,24 @@
|
||||
if (!handler) {
|
||||
handler = delegationFn;
|
||||
delegationFn = null;
|
||||
} // in case of mouseenter or mouseleave wrap the handler within a function that checks for its DOM position
|
||||
// this prevents the handler from being dispatched the same way as mouseover or mouseout does
|
||||
|
||||
|
||||
if (customEventsRegex.test(originalTypeEvent)) {
|
||||
const wrapFn = fn => {
|
||||
return function (event) {
|
||||
if (!event.relatedTarget || event.relatedTarget !== event.delegateTarget && !event.delegateTarget.contains(event.relatedTarget)) {
|
||||
return fn.call(this, event);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
if (delegationFn) {
|
||||
delegationFn = wrapFn(delegationFn);
|
||||
} else {
|
||||
handler = wrapFn(handler);
|
||||
}
|
||||
}
|
||||
|
||||
const [delegation, originalHandler, typeEvent] = normalizeParams(originalTypeEvent, handler, delegationFn);
|
||||
@ -475,6 +493,12 @@
|
||||
});
|
||||
}
|
||||
|
||||
function getTypeEvent(event) {
|
||||
// allow to get the native events from namespaced events ('click.bs.button' --> 'click')
|
||||
event = event.replace(stripNameRegex, '');
|
||||
return customEvents[event] || event;
|
||||
}
|
||||
|
||||
const EventHandler = {
|
||||
on(element, event, handler, delegationFn) {
|
||||
addHandler(element, event, handler, delegationFn, false);
|
||||
@ -527,7 +551,7 @@
|
||||
}
|
||||
|
||||
const $ = getjQuery();
|
||||
const typeEvent = event.replace(stripNameRegex, '');
|
||||
const typeEvent = getTypeEvent(event);
|
||||
const inNamespace = event !== typeEvent;
|
||||
const isNative = nativeEvents.has(typeEvent);
|
||||
let jQueryEvent;
|
||||
@ -585,7 +609,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): base-component.js
|
||||
* Bootstrap (v5.0.0): base-component.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -595,7 +619,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const VERSION = '5.0.0-beta3';
|
||||
const VERSION = '5.0.0';
|
||||
|
||||
class BaseComponent {
|
||||
constructor(element) {
|
||||
@ -611,6 +635,7 @@
|
||||
|
||||
dispose() {
|
||||
Data.remove(this._element, this.constructor.DATA_KEY);
|
||||
EventHandler.off(this._element, `.${this.constructor.DATA_KEY}`);
|
||||
this._element = null;
|
||||
}
|
||||
/** Static */
|
||||
@ -628,7 +653,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): alert.js
|
||||
* Bootstrap (v5.0.0): alert.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -638,7 +663,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$b = 'alert';
|
||||
const NAME$c = 'alert';
|
||||
const DATA_KEY$b = 'bs.alert';
|
||||
const EVENT_KEY$b = `.${DATA_KEY$b}`;
|
||||
const DATA_API_KEY$8 = '.data-api';
|
||||
@ -647,8 +672,8 @@
|
||||
const EVENT_CLOSED = `closed${EVENT_KEY$b}`;
|
||||
const EVENT_CLICK_DATA_API$7 = `click${EVENT_KEY$b}${DATA_API_KEY$8}`;
|
||||
const CLASS_NAME_ALERT = 'alert';
|
||||
const CLASS_NAME_FADE$5 = 'fade';
|
||||
const CLASS_NAME_SHOW$8 = 'show';
|
||||
const CLASS_NAME_FADE$6 = 'fade';
|
||||
const CLASS_NAME_SHOW$9 = 'show';
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
@ -684,9 +709,9 @@
|
||||
}
|
||||
|
||||
_removeElement(element) {
|
||||
element.classList.remove(CLASS_NAME_SHOW$8);
|
||||
element.classList.remove(CLASS_NAME_SHOW$9);
|
||||
|
||||
if (!element.classList.contains(CLASS_NAME_FADE$5)) {
|
||||
if (!element.classList.contains(CLASS_NAME_FADE$6)) {
|
||||
this._destroyElement(element);
|
||||
|
||||
return;
|
||||
@ -746,11 +771,11 @@
|
||||
* add .Alert to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$b, Alert);
|
||||
defineJQueryPlugin(NAME$c, Alert);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): button.js
|
||||
* Bootstrap (v5.0.0): button.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -760,7 +785,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$a = 'button';
|
||||
const NAME$b = 'button';
|
||||
const DATA_KEY$a = 'bs.button';
|
||||
const EVENT_KEY$a = `.${DATA_KEY$a}`;
|
||||
const DATA_API_KEY$7 = '.data-api';
|
||||
@ -826,11 +851,11 @@
|
||||
* add .Button to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$a, Button);
|
||||
defineJQueryPlugin(NAME$b, Button);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/manipulator.js
|
||||
* Bootstrap (v5.0.0): dom/manipulator.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -904,7 +929,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dom/selector-engine.js
|
||||
* Bootstrap (v5.0.0): dom/selector-engine.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -975,7 +1000,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): carousel.js
|
||||
* Bootstrap (v5.0.0): carousel.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -985,7 +1010,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$9 = 'carousel';
|
||||
const NAME$a = 'carousel';
|
||||
const DATA_KEY$9 = 'bs.carousel';
|
||||
const EVENT_KEY$9 = `.${DATA_KEY$9}`;
|
||||
const DATA_API_KEY$6 = '.data-api';
|
||||
@ -994,7 +1019,7 @@
|
||||
const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
|
||||
|
||||
const SWIPE_THRESHOLD = 40;
|
||||
const Default$8 = {
|
||||
const Default$9 = {
|
||||
interval: 5000,
|
||||
keyboard: true,
|
||||
slide: false,
|
||||
@ -1002,7 +1027,7 @@
|
||||
wrap: true,
|
||||
touch: true
|
||||
};
|
||||
const DefaultType$8 = {
|
||||
const DefaultType$9 = {
|
||||
interval: '(number|boolean)',
|
||||
keyboard: 'boolean',
|
||||
slide: '(boolean|string)',
|
||||
@ -1073,7 +1098,7 @@
|
||||
|
||||
|
||||
static get Default() {
|
||||
return Default$8;
|
||||
return Default$9;
|
||||
}
|
||||
|
||||
static get DATA_KEY() {
|
||||
@ -1158,7 +1183,6 @@
|
||||
}
|
||||
|
||||
dispose() {
|
||||
EventHandler.off(this._element, EVENT_KEY$9);
|
||||
this._items = null;
|
||||
this._config = null;
|
||||
this._interval = null;
|
||||
@ -1171,10 +1195,10 @@
|
||||
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$8,
|
||||
config = { ...Default$9,
|
||||
...config
|
||||
};
|
||||
typeCheckConfig(NAME$9, config, DefaultType$8);
|
||||
typeCheckConfig(NAME$a, config, DefaultType$9);
|
||||
return config;
|
||||
}
|
||||
|
||||
@ -1273,11 +1297,11 @@
|
||||
if (event.key === ARROW_LEFT_KEY) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_LEFT);
|
||||
this._slide(DIRECTION_RIGHT);
|
||||
} else if (event.key === ARROW_RIGHT_KEY) {
|
||||
event.preventDefault();
|
||||
|
||||
this._slide(DIRECTION_RIGHT);
|
||||
this._slide(DIRECTION_LEFT);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1439,10 +1463,10 @@
|
||||
}
|
||||
|
||||
if (isRTL()) {
|
||||
return direction === DIRECTION_RIGHT ? ORDER_PREV : ORDER_NEXT;
|
||||
return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT;
|
||||
}
|
||||
|
||||
return direction === DIRECTION_RIGHT ? ORDER_NEXT : ORDER_PREV;
|
||||
return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV;
|
||||
}
|
||||
|
||||
_orderToDirection(order) {
|
||||
@ -1451,16 +1475,16 @@
|
||||
}
|
||||
|
||||
if (isRTL()) {
|
||||
return order === ORDER_NEXT ? DIRECTION_LEFT : DIRECTION_RIGHT;
|
||||
return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT;
|
||||
}
|
||||
|
||||
return order === ORDER_NEXT ? DIRECTION_RIGHT : DIRECTION_LEFT;
|
||||
return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT;
|
||||
} // Static
|
||||
|
||||
|
||||
static carouselInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$9);
|
||||
let _config = { ...Default$8,
|
||||
let _config = { ...Default$9,
|
||||
...Manipulator.getDataAttributes(element)
|
||||
};
|
||||
|
||||
@ -1544,11 +1568,11 @@
|
||||
* add .Carousel to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$9, Carousel);
|
||||
defineJQueryPlugin(NAME$a, Carousel);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): collapse.js
|
||||
* Bootstrap (v5.0.0): collapse.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1558,15 +1582,15 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$8 = 'collapse';
|
||||
const NAME$9 = 'collapse';
|
||||
const DATA_KEY$8 = 'bs.collapse';
|
||||
const EVENT_KEY$8 = `.${DATA_KEY$8}`;
|
||||
const DATA_API_KEY$5 = '.data-api';
|
||||
const Default$7 = {
|
||||
const Default$8 = {
|
||||
toggle: true,
|
||||
parent: ''
|
||||
};
|
||||
const DefaultType$7 = {
|
||||
const DefaultType$8 = {
|
||||
toggle: 'boolean',
|
||||
parent: '(string|element)'
|
||||
};
|
||||
@ -1575,7 +1599,7 @@
|
||||
const EVENT_HIDE$5 = `hide${EVENT_KEY$8}`;
|
||||
const EVENT_HIDDEN$5 = `hidden${EVENT_KEY$8}`;
|
||||
const EVENT_CLICK_DATA_API$4 = `click${EVENT_KEY$8}${DATA_API_KEY$5}`;
|
||||
const CLASS_NAME_SHOW$7 = 'show';
|
||||
const CLASS_NAME_SHOW$8 = 'show';
|
||||
const CLASS_NAME_COLLAPSE = 'collapse';
|
||||
const CLASS_NAME_COLLAPSING = 'collapsing';
|
||||
const CLASS_NAME_COLLAPSED = 'collapsed';
|
||||
@ -1622,7 +1646,7 @@
|
||||
|
||||
|
||||
static get Default() {
|
||||
return Default$7;
|
||||
return Default$8;
|
||||
}
|
||||
|
||||
static get DATA_KEY() {
|
||||
@ -1631,7 +1655,7 @@
|
||||
|
||||
|
||||
toggle() {
|
||||
if (this._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (this._element.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
@ -1639,7 +1663,7 @@
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this._isTransitioning || this._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (this._isTransitioning || this._element.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1709,7 +1733,7 @@
|
||||
const complete = () => {
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSING);
|
||||
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$7);
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$8);
|
||||
|
||||
this._element.style[dimension] = '';
|
||||
this.setTransitioning(false);
|
||||
@ -1725,7 +1749,7 @@
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1742,7 +1766,7 @@
|
||||
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSING);
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$7);
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW$8);
|
||||
|
||||
const triggerArrayLength = this._triggerArray.length;
|
||||
|
||||
@ -1751,7 +1775,7 @@
|
||||
const trigger = this._triggerArray[i];
|
||||
const elem = getElementFromSelector(trigger);
|
||||
|
||||
if (elem && !elem.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
if (elem && !elem.classList.contains(CLASS_NAME_SHOW$8)) {
|
||||
trigger.classList.add(CLASS_NAME_COLLAPSED);
|
||||
trigger.setAttribute('aria-expanded', false);
|
||||
}
|
||||
@ -1790,12 +1814,12 @@
|
||||
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$7,
|
||||
config = { ...Default$8,
|
||||
...config
|
||||
};
|
||||
config.toggle = Boolean(config.toggle); // Coerce string values
|
||||
|
||||
typeCheckConfig(NAME$8, config, DefaultType$7);
|
||||
typeCheckConfig(NAME$9, config, DefaultType$8);
|
||||
return config;
|
||||
}
|
||||
|
||||
@ -1831,7 +1855,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const isOpen = element.classList.contains(CLASS_NAME_SHOW$7);
|
||||
const isOpen = element.classList.contains(CLASS_NAME_SHOW$8);
|
||||
triggerArray.forEach(elem => {
|
||||
if (isOpen) {
|
||||
elem.classList.remove(CLASS_NAME_COLLAPSED);
|
||||
@ -1846,7 +1870,7 @@
|
||||
|
||||
static collapseInterface(element, config) {
|
||||
let data = Data.get(element, DATA_KEY$8);
|
||||
const _config = { ...Default$7,
|
||||
const _config = { ...Default$8,
|
||||
...Manipulator.getDataAttributes(element),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
};
|
||||
@ -1917,11 +1941,11 @@
|
||||
* add .Collapse to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$8, Collapse);
|
||||
defineJQueryPlugin(NAME$9, Collapse);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): dropdown.js
|
||||
* Bootstrap (v5.0.0): dropdown.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -1931,7 +1955,7 @@
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME$7 = 'dropdown';
|
||||
const NAME$8 = 'dropdown';
|
||||
const DATA_KEY$7 = 'bs.dropdown';
|
||||
const EVENT_KEY$7 = `.${DATA_KEY$7}`;
|
||||
const DATA_API_KEY$4 = '.data-api';
|
||||
@ -1951,8 +1975,7 @@
|
||||
const EVENT_CLICK_DATA_API$3 = `click${EVENT_KEY$7}${DATA_API_KEY$4}`;
|
||||
const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY$7}${DATA_API_KEY$4}`;
|
||||
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY$7}${DATA_API_KEY$4}`;
|
||||
const CLASS_NAME_DISABLED = 'disabled';
|
||||
const CLASS_NAME_SHOW$6 = 'show';
|
||||
const CLASS_NAME_SHOW$7 = 'show';
|
||||
const CLASS_NAME_DROPUP = 'dropup';
|
||||
const CLASS_NAME_DROPEND = 'dropend';
|
||||
const CLASS_NAME_DROPSTART = 'dropstart';
|
||||
@ -1967,19 +1990,21 @@
|
||||
const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end';
|
||||
const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start';
|
||||
const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start';
|
||||
const Default$6 = {
|
||||
const Default$7 = {
|
||||
offset: [0, 2],
|
||||
boundary: 'clippingParents',
|
||||
reference: 'toggle',
|
||||
display: 'dynamic',
|
||||
popperConfig: null
|
||||
popperConfig: null,
|
||||
autoClose: true
|
||||
};
|
||||
const DefaultType$6 = {
|
||||
const DefaultType$7 = {
|
||||
offset: '(array|string|function)',
|
||||
boundary: '(string|element)',
|
||||
reference: '(string|element|object)',
|
||||
display: 'string',
|
||||
popperConfig: '(null|object|function)'
|
||||
popperConfig: '(null|object|function)',
|
||||
autoClose: '(boolean|string)'
|
||||
};
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@ -2000,11 +2025,11 @@
|
||||
|
||||
|
||||
static get Default() {
|
||||
return Default$6;
|
||||
return Default$7;
|
||||
}
|
||||
|
||||
static get DefaultType() {
|
||||
return DefaultType$6;
|
||||
return DefaultType$7;
|
||||
}
|
||||
|
||||
static get DATA_KEY() {
|
||||
@ -2013,15 +2038,14 @@
|
||||
|
||||
|
||||
toggle() {
|
||||
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED)) {
|
||||
if (isDisabled(this._element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isActive = this._element.classList.contains(CLASS_NAME_SHOW$6);
|
||||
|
||||
Dropdown.clearMenus();
|
||||
const isActive = this._element.classList.contains(CLASS_NAME_SHOW$7);
|
||||
|
||||
if (isActive) {
|
||||
this.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2029,7 +2053,7 @@
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED) || this._menu.classList.contains(CLASS_NAME_SHOW$6)) {
|
||||
if (isDisabled(this._element) || this._menu.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2080,48 +2104,33 @@
|
||||
|
||||
|
||||
if ('ontouchstart' in document.documentElement && !parent.closest(SELECTOR_NAVBAR_NAV)) {
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.on(elem, 'mouseover', null, noop()));
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.on(elem, 'mouseover', noop));
|
||||
}
|
||||
|
||||
this._element.focus();
|
||||
|
||||
this._element.setAttribute('aria-expanded', true);
|
||||
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$7);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$7);
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_SHOWN$4, relatedTarget);
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED) || !this._menu.classList.contains(CLASS_NAME_SHOW$6)) {
|
||||
if (isDisabled(this._element) || !this._menu.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const relatedTarget = {
|
||||
relatedTarget: this._element
|
||||
};
|
||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$4, relatedTarget);
|
||||
|
||||
if (hideEvent.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
this._popper.destroy();
|
||||
}
|
||||
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$6);
|
||||
|
||||
Manipulator.removeDataAttribute(this._menu, 'popper');
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$4, relatedTarget);
|
||||
this._completeHide(relatedTarget);
|
||||
}
|
||||
|
||||
dispose() {
|
||||
EventHandler.off(this._element, EVENT_KEY$7);
|
||||
this._menu = null;
|
||||
|
||||
if (this._popper) {
|
||||
@ -2149,16 +2158,43 @@
|
||||
});
|
||||
}
|
||||
|
||||
_completeHide(relatedTarget) {
|
||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$4, relatedTarget);
|
||||
|
||||
if (hideEvent.defaultPrevented) {
|
||||
return;
|
||||
} // If this is a touch-enabled device we remove the extra
|
||||
// empty mouseover listeners we added for iOS support
|
||||
|
||||
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.off(elem, 'mouseover', noop));
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
this._popper.destroy();
|
||||
}
|
||||
|
||||
this._menu.classList.remove(CLASS_NAME_SHOW$7);
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_SHOW$7);
|
||||
|
||||
this._element.setAttribute('aria-expanded', 'false');
|
||||
|
||||
Manipulator.removeDataAttribute(this._menu, 'popper');
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$4, relatedTarget);
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...this.constructor.Default,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...config
|
||||
};
|
||||
typeCheckConfig(NAME$7, config, this.constructor.DefaultType);
|
||||
typeCheckConfig(NAME$8, config, this.constructor.DefaultType);
|
||||
|
||||
if (typeof config.reference === 'object' && !isElement(config.reference) && typeof config.reference.getBoundingClientRect !== 'function') {
|
||||
// Popper virtual elements require a getBoundingClientRect method
|
||||
throw new TypeError(`${NAME$7.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);
|
||||
throw new TypeError(`${NAME$8.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);
|
||||
}
|
||||
|
||||
return config;
|
||||
@ -2235,6 +2271,29 @@
|
||||
return { ...defaultBsPopperConfig,
|
||||
...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig)
|
||||
};
|
||||
}
|
||||
|
||||
_selectMenuItem(event) {
|
||||
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 (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();
|
||||
} // Static
|
||||
|
||||
|
||||
@ -2268,7 +2327,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (/input|select|textarea|form/i.test(event.target.tagName)) {
|
||||
if (/input|select|option|textarea|form/i.test(event.target.tagName)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -2277,58 +2336,38 @@
|
||||
|
||||
for (let i = 0, len = toggles.length; i < len; i++) {
|
||||
const context = Data.get(toggles[i], DATA_KEY$7);
|
||||
|
||||
if (!context || context._config.autoClose === false) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!context._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const relatedTarget = {
|
||||
relatedTarget: toggles[i]
|
||||
relatedTarget: context._element
|
||||
};
|
||||
|
||||
if (event && event.type === 'click') {
|
||||
relatedTarget.clickEvent = event;
|
||||
}
|
||||
|
||||
if (!context) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const dropdownMenu = context._menu;
|
||||
|
||||
if (!toggles[i].classList.contains(CLASS_NAME_SHOW$6)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (event) {
|
||||
// Don't close the menu if the clicked element or one of its parents is the dropdown button
|
||||
if ([context._element].some(element => event.composedPath().includes(element))) {
|
||||
const composedPath = event.composedPath();
|
||||
const isMenuTarget = composedPath.includes(context._menu);
|
||||
|
||||
if (composedPath.includes(context._element) || context._config.autoClose === 'inside' && !isMenuTarget || context._config.autoClose === 'outside' && isMenuTarget) {
|
||||
continue;
|
||||
} // Tab navigation through the dropdown menu shouldn't close the menu
|
||||
|
||||
|
||||
if (event.type === 'keyup' && event.key === TAB_KEY && dropdownMenu.contains(event.target)) {
|
||||
if (event.type === 'keyup' && event.key === TAB_KEY && context._menu.contains(event.target)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (event.type === 'click') {
|
||||
relatedTarget.clickEvent = event;
|
||||
}
|
||||
}
|
||||
|
||||
const hideEvent = EventHandler.trigger(toggles[i], EVENT_HIDE$4, relatedTarget);
|
||||
|
||||
if (hideEvent.defaultPrevented) {
|
||||
continue;
|
||||
} // If this is a touch-enabled device we remove the extra
|
||||
// empty mouseover listeners we added for iOS support
|
||||
|
||||
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
[].concat(...document.body.children).forEach(elem => EventHandler.off(elem, 'mouseover', null, noop()));
|
||||
}
|
||||
|
||||
toggles[i].setAttribute('aria-expanded', 'false');
|
||||
|
||||
if (context._popper) {
|
||||
context._popper.destroy();
|
||||
}
|
||||
|
||||
dropdownMenu.classList.remove(CLASS_NAME_SHOW$6);
|
||||
toggles[i].classList.remove(CLASS_NAME_SHOW$6);
|
||||
Manipulator.removeDataAttribute(dropdownMenu, 'popper');
|
||||
EventHandler.trigger(toggles[i], EVENT_HIDDEN$4, relatedTarget);
|
||||
context._completeHide(relatedTarget);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2348,26 +2387,29 @@
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const isActive = this.classList.contains(CLASS_NAME_SHOW$7);
|
||||
|
||||
if (this.disabled || this.classList.contains(CLASS_NAME_DISABLED)) {
|
||||
if (!isActive && event.key === ESCAPE_KEY$2) {
|
||||
return;
|
||||
}
|
||||
|
||||
const parent = Dropdown.getParentFromElement(this);
|
||||
const isActive = this.classList.contains(CLASS_NAME_SHOW$6);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (isDisabled(this)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const getToggleButton = () => this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0];
|
||||
|
||||
if (event.key === ESCAPE_KEY$2) {
|
||||
const button = this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0];
|
||||
button.focus();
|
||||
getToggleButton().focus();
|
||||
Dropdown.clearMenus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
|
||||
const button = this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0];
|
||||
button.click();
|
||||
getToggleButton().click();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2376,26 +2418,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, parent).filter(isVisible);
|
||||
|
||||
if (!items.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
let index = items.indexOf(event.target); // Up
|
||||
|
||||
if (event.key === ARROW_UP_KEY && index > 0) {
|
||||
index--;
|
||||
} // Down
|
||||
|
||||
|
||||
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();
|
||||
Dropdown.getInstance(getToggleButton())._selectMenuItem(event);
|
||||
}
|
||||
|
||||
}
|
||||
@ -2421,11 +2444,213 @@
|
||||
* add .Dropdown to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(NAME$7, Dropdown);
|
||||
defineJQueryPlugin(NAME$8, Dropdown);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): modal.js
|
||||
* Bootstrap (v5.0.0): 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);
|
||||
}
|
||||
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
|
||||
const _setElementAttributes = (selector, styleProp, callback) => {
|
||||
const scrollbarWidth = getWidth();
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0): util/backdrop.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
const Default$6 = {
|
||||
isVisible: true,
|
||||
// if false, we use the backdrop helper without adding any element to the dom
|
||||
isAnimated: false,
|
||||
rootElement: document.body,
|
||||
// give the choice to place backdrop under different elements
|
||||
clickCallback: null
|
||||
};
|
||||
const DefaultType$6 = {
|
||||
isVisible: 'boolean',
|
||||
isAnimated: 'boolean',
|
||||
rootElement: 'element',
|
||||
clickCallback: '(function|null)'
|
||||
};
|
||||
const NAME$7 = 'backdrop';
|
||||
const CLASS_NAME_BACKDROP = 'modal-backdrop';
|
||||
const CLASS_NAME_FADE$5 = 'fade';
|
||||
const CLASS_NAME_SHOW$6 = 'show';
|
||||
const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$7}`;
|
||||
|
||||
class Backdrop {
|
||||
constructor(config) {
|
||||
this._config = this._getConfig(config);
|
||||
this._isAppended = false;
|
||||
this._element = null;
|
||||
}
|
||||
|
||||
show(callback) {
|
||||
if (!this._config.isVisible) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
this._append();
|
||||
|
||||
if (this._config.isAnimated) {
|
||||
reflow(this._getElement());
|
||||
}
|
||||
|
||||
this._getElement().classList.add(CLASS_NAME_SHOW$6);
|
||||
|
||||
this._emulateAnimation(() => {
|
||||
execute(callback);
|
||||
});
|
||||
}
|
||||
|
||||
hide(callback) {
|
||||
if (!this._config.isVisible) {
|
||||
execute(callback);
|
||||
return;
|
||||
}
|
||||
|
||||
this._getElement().classList.remove(CLASS_NAME_SHOW$6);
|
||||
|
||||
this._emulateAnimation(() => {
|
||||
this.dispose();
|
||||
execute(callback);
|
||||
});
|
||||
} // Private
|
||||
|
||||
|
||||
_getElement() {
|
||||
if (!this._element) {
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = CLASS_NAME_BACKDROP;
|
||||
|
||||
if (this._config.isAnimated) {
|
||||
backdrop.classList.add(CLASS_NAME_FADE$5);
|
||||
}
|
||||
|
||||
this._element = backdrop;
|
||||
}
|
||||
|
||||
return this._element;
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$6,
|
||||
...(typeof config === 'object' ? config : {})
|
||||
};
|
||||
typeCheckConfig(NAME$7, config, DefaultType$6);
|
||||
return config;
|
||||
}
|
||||
|
||||
_append() {
|
||||
if (this._isAppended) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._config.rootElement.appendChild(this._getElement());
|
||||
|
||||
EventHandler.on(this._getElement(), EVENT_MOUSEDOWN, () => {
|
||||
execute(this._config.clickCallback);
|
||||
});
|
||||
this._isAppended = true;
|
||||
}
|
||||
|
||||
dispose() {
|
||||
if (!this._isAppended) {
|
||||
return;
|
||||
}
|
||||
|
||||
EventHandler.off(this._element, EVENT_MOUSEDOWN);
|
||||
|
||||
this._getElement().parentNode.removeChild(this._element);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0): modal.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -2458,12 +2683,10 @@
|
||||
const EVENT_FOCUSIN$1 = `focusin${EVENT_KEY$6}`;
|
||||
const EVENT_RESIZE = `resize${EVENT_KEY$6}`;
|
||||
const EVENT_CLICK_DISMISS$2 = `click.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_KEYDOWN_DISMISS$1 = `keydown.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY$6}`;
|
||||
const EVENT_CLICK_DATA_API$2 = `click${EVENT_KEY$6}${DATA_API_KEY$3}`;
|
||||
const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure';
|
||||
const CLASS_NAME_BACKDROP = 'modal-backdrop';
|
||||
const CLASS_NAME_OPEN = 'modal-open';
|
||||
const CLASS_NAME_FADE$4 = 'fade';
|
||||
const CLASS_NAME_SHOW$5 = 'show';
|
||||
@ -2472,8 +2695,6 @@
|
||||
const SELECTOR_MODAL_BODY = '.modal-body';
|
||||
const SELECTOR_DATA_TOGGLE$2 = '[data-bs-toggle="modal"]';
|
||||
const SELECTOR_DATA_DISMISS$2 = '[data-bs-dismiss="modal"]';
|
||||
const SELECTOR_FIXED_CONTENT$1 = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top';
|
||||
const SELECTOR_STICKY_CONTENT$1 = '.sticky-top';
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
@ -2485,12 +2706,10 @@
|
||||
super(element);
|
||||
this._config = this._getConfig(config);
|
||||
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element);
|
||||
this._backdrop = null;
|
||||
this._backdrop = this._initializeBackDrop();
|
||||
this._isShown = false;
|
||||
this._isBodyOverflowing = false;
|
||||
this._ignoreBackdropClick = false;
|
||||
this._isTransitioning = false;
|
||||
this._scrollbarWidth = 0;
|
||||
} // Getters
|
||||
|
||||
|
||||
@ -2525,10 +2744,8 @@
|
||||
}
|
||||
|
||||
this._isShown = true;
|
||||
|
||||
this._checkScrollbar();
|
||||
|
||||
this._setScrollbar();
|
||||
hide();
|
||||
document.body.classList.add(CLASS_NAME_OPEN);
|
||||
|
||||
this._adjustDialog();
|
||||
|
||||
@ -2592,7 +2809,7 @@
|
||||
}
|
||||
|
||||
dispose() {
|
||||
[window, this._element, this._dialog].forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY$6));
|
||||
[window, this._dialog].forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY$6));
|
||||
super.dispose();
|
||||
/**
|
||||
* `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API`
|
||||
@ -2603,12 +2820,13 @@
|
||||
EventHandler.off(document, EVENT_FOCUSIN$1);
|
||||
this._config = null;
|
||||
this._dialog = null;
|
||||
|
||||
this._backdrop.dispose();
|
||||
|
||||
this._backdrop = null;
|
||||
this._isShown = null;
|
||||
this._isBodyOverflowing = null;
|
||||
this._ignoreBackdropClick = null;
|
||||
this._isTransitioning = null;
|
||||
this._scrollbarWidth = null;
|
||||
}
|
||||
|
||||
handleUpdate() {
|
||||
@ -2616,8 +2834,17 @@
|
||||
} // Private
|
||||
|
||||
|
||||
_initializeBackDrop() {
|
||||
return new Backdrop({
|
||||
isVisible: Boolean(this._config.backdrop),
|
||||
// 'static' option will be translated to true, and booleans will keep their value
|
||||
isAnimated: this._isAnimated()
|
||||
});
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$5,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...config
|
||||
};
|
||||
typeCheckConfig(NAME$6, config, DefaultType$5);
|
||||
@ -2690,7 +2917,7 @@
|
||||
|
||||
_setEscapeEvent() {
|
||||
if (this._isShown) {
|
||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS$1, event => {
|
||||
if (this._config.keyboard && event.key === ESCAPE_KEY$1) {
|
||||
event.preventDefault();
|
||||
this.hide();
|
||||
@ -2699,7 +2926,7 @@
|
||||
}
|
||||
});
|
||||
} else {
|
||||
EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS);
|
||||
EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS$1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2722,85 +2949,35 @@
|
||||
|
||||
this._isTransitioning = false;
|
||||
|
||||
this._showBackdrop(() => {
|
||||
this._backdrop.hide(() => {
|
||||
document.body.classList.remove(CLASS_NAME_OPEN);
|
||||
|
||||
this._resetAdjustments();
|
||||
|
||||
this._resetScrollbar();
|
||||
|
||||
reset();
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$3);
|
||||
});
|
||||
}
|
||||
|
||||
_removeBackdrop() {
|
||||
this._backdrop.parentNode.removeChild(this._backdrop);
|
||||
|
||||
this._backdrop = null;
|
||||
}
|
||||
|
||||
_showBackdrop(callback) {
|
||||
const isAnimated = this._isAnimated();
|
||||
|
||||
if (this._isShown && this._config.backdrop) {
|
||||
this._backdrop = document.createElement('div');
|
||||
this._backdrop.className = CLASS_NAME_BACKDROP;
|
||||
|
||||
if (isAnimated) {
|
||||
this._backdrop.classList.add(CLASS_NAME_FADE$4);
|
||||
}
|
||||
|
||||
document.body.appendChild(this._backdrop);
|
||||
EventHandler.on(this._element, EVENT_CLICK_DISMISS$2, event => {
|
||||
if (this._ignoreBackdropClick) {
|
||||
this._ignoreBackdropClick = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._config.backdrop === 'static') {
|
||||
this._triggerBackdropTransition();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
|
||||
if (isAnimated) {
|
||||
reflow(this._backdrop);
|
||||
}
|
||||
|
||||
this._backdrop.classList.add(CLASS_NAME_SHOW$5);
|
||||
|
||||
if (!isAnimated) {
|
||||
callback();
|
||||
EventHandler.on(this._element, EVENT_CLICK_DISMISS$2, event => {
|
||||
if (this._ignoreBackdropClick) {
|
||||
this._ignoreBackdropClick = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop);
|
||||
EventHandler.one(this._backdrop, 'transitionend', callback);
|
||||
emulateTransitionEnd(this._backdrop, backdropTransitionDuration);
|
||||
} else if (!this._isShown && this._backdrop) {
|
||||
this._backdrop.classList.remove(CLASS_NAME_SHOW$5);
|
||||
|
||||
const callbackRemove = () => {
|
||||
this._removeBackdrop();
|
||||
|
||||
callback();
|
||||
};
|
||||
|
||||
if (isAnimated) {
|
||||
const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop);
|
||||
EventHandler.one(this._backdrop, 'transitionend', callbackRemove);
|
||||
emulateTransitionEnd(this._backdrop, backdropTransitionDuration);
|
||||
} else {
|
||||
callbackRemove();
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
|
||||
if (this._config.backdrop === true) {
|
||||
this.hide();
|
||||
} else if (this._config.backdrop === 'static') {
|
||||
this._triggerBackdropTransition();
|
||||
}
|
||||
});
|
||||
|
||||
this._backdrop.show(callback);
|
||||
}
|
||||
|
||||
_isAnimated() {
|
||||
@ -2844,103 +3021,37 @@
|
||||
|
||||
_adjustDialog() {
|
||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
const scrollbarWidth = getWidth();
|
||||
const isBodyOverflowing = scrollbarWidth > 0;
|
||||
|
||||
if (!this._isBodyOverflowing && isModalOverflowing && !isRTL() || this._isBodyOverflowing && !isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingLeft = `${this._scrollbarWidth}px`;
|
||||
if (!isBodyOverflowing && isModalOverflowing && !isRTL() || isBodyOverflowing && !isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingLeft = `${scrollbarWidth}px`;
|
||||
}
|
||||
|
||||
if (this._isBodyOverflowing && !isModalOverflowing && !isRTL() || !this._isBodyOverflowing && isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingRight = `${this._scrollbarWidth}px`;
|
||||
if (isBodyOverflowing && !isModalOverflowing && !isRTL() || !isBodyOverflowing && isModalOverflowing && isRTL()) {
|
||||
this._element.style.paddingRight = `${scrollbarWidth}px`;
|
||||
}
|
||||
}
|
||||
|
||||
_resetAdjustments() {
|
||||
this._element.style.paddingLeft = '';
|
||||
this._element.style.paddingRight = '';
|
||||
}
|
||||
|
||||
_checkScrollbar() {
|
||||
const rect = document.body.getBoundingClientRect();
|
||||
this._isBodyOverflowing = Math.round(rect.left + rect.right) < window.innerWidth;
|
||||
this._scrollbarWidth = this._getScrollbarWidth();
|
||||
}
|
||||
|
||||
_setScrollbar() {
|
||||
if (this._isBodyOverflowing) {
|
||||
this._setElementAttributes(SELECTOR_FIXED_CONTENT$1, 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth);
|
||||
|
||||
this._setElementAttributes(SELECTOR_STICKY_CONTENT$1, 'marginRight', calculatedValue => calculatedValue - this._scrollbarWidth);
|
||||
|
||||
this._setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth);
|
||||
}
|
||||
|
||||
document.body.classList.add(CLASS_NAME_OPEN);
|
||||
}
|
||||
|
||||
_setElementAttributes(selector, styleProp, callback) {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + this._scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
const actualValue = element.style[styleProp];
|
||||
const calculatedValue = window.getComputedStyle(element)[styleProp];
|
||||
Manipulator.setDataAttribute(element, styleProp, actualValue);
|
||||
element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
_resetScrollbar() {
|
||||
this._resetElementAttributes(SELECTOR_FIXED_CONTENT$1, 'paddingRight');
|
||||
|
||||
this._resetElementAttributes(SELECTOR_STICKY_CONTENT$1, 'marginRight');
|
||||
|
||||
this._resetElementAttributes('body', 'paddingRight');
|
||||
}
|
||||
|
||||
_resetElementAttributes(selector, styleProp) {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined' && element === document.body) {
|
||||
element.style[styleProp] = '';
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_getScrollbarWidth() {
|
||||
// thx d.walsh
|
||||
const scrollDiv = document.createElement('div');
|
||||
scrollDiv.className = CLASS_NAME_SCROLLBAR_MEASURER;
|
||||
document.body.appendChild(scrollDiv);
|
||||
const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
|
||||
document.body.removeChild(scrollDiv);
|
||||
return scrollbarWidth;
|
||||
} // Static
|
||||
|
||||
|
||||
static jQueryInterface(config, relatedTarget) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$6);
|
||||
const _config = { ...Default$5,
|
||||
...Manipulator.getDataAttributes(this),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
};
|
||||
const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {});
|
||||
|
||||
if (!data) {
|
||||
data = new Modal(this, _config);
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config](relatedTarget);
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config](relatedTarget);
|
||||
});
|
||||
}
|
||||
|
||||
@ -2955,7 +3066,7 @@
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API$2, SELECTOR_DATA_TOGGLE$2, function (event) {
|
||||
const target = getElementFromSelector(this);
|
||||
|
||||
if (this.tagName === 'A' || this.tagName === 'AREA') {
|
||||
if (['A', 'AREA'].includes(this.tagName)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@ -2971,15 +3082,7 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
let data = Data.get(target, DATA_KEY$6);
|
||||
|
||||
if (!data) {
|
||||
const config = { ...Manipulator.getDataAttributes(target),
|
||||
...Manipulator.getDataAttributes(this)
|
||||
};
|
||||
data = new Modal(target, config);
|
||||
}
|
||||
|
||||
const data = Modal.getInstance(target) || new Modal(target);
|
||||
data.toggle(this);
|
||||
});
|
||||
/**
|
||||
@ -2993,69 +3096,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): util/scrollBar.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed';
|
||||
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()) => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
_setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
|
||||
_setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
|
||||
|
||||
_setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width);
|
||||
};
|
||||
|
||||
const _setElementAttributes = (selector, styleProp, callback) => {
|
||||
const scrollbarWidth = getWidth();
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
document.body.style.overflow = 'auto';
|
||||
|
||||
_resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
||||
|
||||
_resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
||||
|
||||
_resetElementAttributes('body', 'paddingRight');
|
||||
};
|
||||
|
||||
const _resetElementAttributes = (selector, styleProp) => {
|
||||
SelectorEngine.find(selector).forEach(element => {
|
||||
const value = Manipulator.getDataAttribute(element, styleProp);
|
||||
|
||||
if (typeof value === 'undefined' && element === document.body) {
|
||||
element.style.removeProperty(styleProp);
|
||||
} else {
|
||||
Manipulator.removeDataAttribute(element, styleProp);
|
||||
element.style[styleProp] = value;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): offcanvas.js
|
||||
* Bootstrap (v5.0.0): offcanvas.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3081,11 +3122,8 @@
|
||||
keyboard: 'boolean',
|
||||
scroll: 'boolean'
|
||||
};
|
||||
const CLASS_NAME_BACKDROP_BODY = 'offcanvas-backdrop';
|
||||
const CLASS_NAME_SHOW$4 = 'show';
|
||||
const CLASS_NAME_TOGGLING = 'offcanvas-toggling';
|
||||
const OPEN_SELECTOR = '.offcanvas.show';
|
||||
const ACTIVE_SELECTOR = `${OPEN_SELECTOR}, .${CLASS_NAME_TOGGLING}`;
|
||||
const EVENT_SHOW$2 = `show${EVENT_KEY$5}`;
|
||||
const EVENT_SHOWN$2 = `shown${EVENT_KEY$5}`;
|
||||
const EVENT_HIDE$2 = `hide${EVENT_KEY$5}`;
|
||||
@ -3093,6 +3131,7 @@
|
||||
const EVENT_FOCUSIN = `focusin${EVENT_KEY$5}`;
|
||||
const EVENT_CLICK_DATA_API$1 = `click${EVENT_KEY$5}${DATA_API_KEY$2}`;
|
||||
const EVENT_CLICK_DISMISS$1 = `click.dismiss${EVENT_KEY$5}`;
|
||||
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY$5}`;
|
||||
const SELECTOR_DATA_DISMISS$1 = '[data-bs-dismiss="offcanvas"]';
|
||||
const SELECTOR_DATA_TOGGLE$1 = '[data-bs-toggle="offcanvas"]';
|
||||
/**
|
||||
@ -3106,6 +3145,7 @@
|
||||
super(element);
|
||||
this._config = this._getConfig(config);
|
||||
this._isShown = false;
|
||||
this._backdrop = this._initializeBackDrop();
|
||||
|
||||
this._addEventListeners();
|
||||
} // Getters
|
||||
@ -3140,15 +3180,13 @@
|
||||
this._isShown = true;
|
||||
this._element.style.visibility = 'visible';
|
||||
|
||||
if (this._config.backdrop) {
|
||||
document.body.classList.add(CLASS_NAME_BACKDROP_BODY);
|
||||
}
|
||||
this._backdrop.show();
|
||||
|
||||
if (!this._config.scroll) {
|
||||
hide();
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_TOGGLING);
|
||||
this._enforceFocusOnElement(this._element);
|
||||
}
|
||||
|
||||
this._element.removeAttribute('aria-hidden');
|
||||
|
||||
@ -3159,16 +3197,14 @@
|
||||
this._element.classList.add(CLASS_NAME_SHOW$4);
|
||||
|
||||
const completeCallBack = () => {
|
||||
this._element.classList.remove(CLASS_NAME_TOGGLING);
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_SHOWN$2, {
|
||||
relatedTarget
|
||||
});
|
||||
|
||||
this._enforceFocusOnElement(this._element);
|
||||
};
|
||||
|
||||
setTimeout(completeCallBack, getTransitionDurationFromElement(this._element));
|
||||
const transitionDuration = getTransitionDurationFromElement(this._element);
|
||||
EventHandler.one(this._element, 'transitionend', completeCallBack);
|
||||
emulateTransitionEnd(this._element, transitionDuration);
|
||||
}
|
||||
|
||||
hide() {
|
||||
@ -3182,8 +3218,6 @@
|
||||
return;
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_TOGGLING);
|
||||
|
||||
EventHandler.off(document, EVENT_FOCUSIN);
|
||||
|
||||
this._element.blur();
|
||||
@ -3192,6 +3226,8 @@
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_SHOW$4);
|
||||
|
||||
this._backdrop.hide();
|
||||
|
||||
const completeCallback = () => {
|
||||
this._element.setAttribute('aria-hidden', true);
|
||||
|
||||
@ -3201,20 +3237,25 @@
|
||||
|
||||
this._element.style.visibility = 'hidden';
|
||||
|
||||
if (this._config.backdrop) {
|
||||
document.body.classList.remove(CLASS_NAME_BACKDROP_BODY);
|
||||
}
|
||||
|
||||
if (!this._config.scroll) {
|
||||
reset();
|
||||
}
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN$2);
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_TOGGLING);
|
||||
};
|
||||
|
||||
setTimeout(completeCallback, getTransitionDurationFromElement(this._element));
|
||||
const transitionDuration = getTransitionDurationFromElement(this._element);
|
||||
EventHandler.one(this._element, 'transitionend', completeCallback);
|
||||
emulateTransitionEnd(this._element, transitionDuration);
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this._backdrop.dispose();
|
||||
|
||||
super.dispose();
|
||||
EventHandler.off(document, EVENT_FOCUSIN);
|
||||
this._config = null;
|
||||
this._backdrop = null;
|
||||
} // Private
|
||||
|
||||
|
||||
@ -3227,6 +3268,15 @@
|
||||
return config;
|
||||
}
|
||||
|
||||
_initializeBackDrop() {
|
||||
return new Backdrop({
|
||||
isVisible: this._config.backdrop,
|
||||
isAnimated: true,
|
||||
rootElement: this._element.parentNode,
|
||||
clickCallback: () => this.hide()
|
||||
});
|
||||
}
|
||||
|
||||
_enforceFocusOnElement(element) {
|
||||
EventHandler.off(document, EVENT_FOCUSIN); // guard against infinite focus loop
|
||||
|
||||
@ -3240,18 +3290,11 @@
|
||||
|
||||
_addEventListeners() {
|
||||
EventHandler.on(this._element, EVENT_CLICK_DISMISS$1, SELECTOR_DATA_DISMISS$1, () => this.hide());
|
||||
EventHandler.on(document, 'keydown', event => {
|
||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
||||
if (this._config.keyboard && event.key === ESCAPE_KEY) {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API$1, event => {
|
||||
const target = SelectorEngine.findOne(getSelectorFromElement(event.target));
|
||||
|
||||
if (!this._element.contains(event.target) && target !== this._element) {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
} // Static
|
||||
|
||||
|
||||
@ -3297,10 +3340,10 @@
|
||||
}
|
||||
}); // avoid conflict when clicking a toggler of an offcanvas, while another is open
|
||||
|
||||
const allReadyOpen = SelectorEngine.findOne(ACTIVE_SELECTOR);
|
||||
const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR);
|
||||
|
||||
if (allReadyOpen && allReadyOpen !== target) {
|
||||
return;
|
||||
Offcanvas.getInstance(allReadyOpen).hide();
|
||||
}
|
||||
|
||||
const data = Data.get(target, DATA_KEY$5) || new Offcanvas(target);
|
||||
@ -3319,7 +3362,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): util/sanitizer.js
|
||||
* Bootstrap (v5.0.0): util/sanitizer.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3432,7 +3475,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): tooltip.js
|
||||
* Bootstrap (v5.0.0): tooltip.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -3607,7 +3650,6 @@
|
||||
|
||||
dispose() {
|
||||
clearTimeout(this._timeout);
|
||||
EventHandler.off(this._element, this.constructor.EVENT_KEY);
|
||||
EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler);
|
||||
|
||||
if (this.tip && this.tip.parentNode) {
|
||||
@ -3692,7 +3734,7 @@
|
||||
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
[].concat(...document.body.children).forEach(element => {
|
||||
EventHandler.on(element, 'mouseover', noop());
|
||||
EventHandler.on(element, 'mouseover', noop);
|
||||
});
|
||||
}
|
||||
|
||||
@ -3891,7 +3933,6 @@
|
||||
modifiers: [{
|
||||
name: 'flip',
|
||||
options: {
|
||||
altBoundary: true,
|
||||
fallbackPlacements: this.config.fallbackPlacements
|
||||
}
|
||||
}, {
|
||||
@ -4174,7 +4215,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): popover.js
|
||||
* Bootstrap (v5.0.0): popover.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4324,7 +4365,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): scrollspy.js
|
||||
* Bootstrap (v5.0.0): scrollspy.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4437,6 +4478,7 @@
|
||||
|
||||
_getConfig(config) {
|
||||
config = { ...Default$1,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
};
|
||||
|
||||
@ -4545,21 +4587,17 @@
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = Data.get(this, DATA_KEY$2);
|
||||
const data = ScrollSpy.getInstance(this) || new ScrollSpy(this, typeof config === 'object' ? config : {});
|
||||
|
||||
const _config = typeof config === 'object' && config;
|
||||
|
||||
if (!data) {
|
||||
data = new ScrollSpy(this, _config);
|
||||
if (typeof config !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config]();
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`);
|
||||
}
|
||||
|
||||
data[config]();
|
||||
});
|
||||
}
|
||||
|
||||
@ -4572,7 +4610,7 @@
|
||||
|
||||
|
||||
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
||||
SelectorEngine.find(SELECTOR_DATA_SPY).forEach(spy => new ScrollSpy(spy, Manipulator.getDataAttributes(spy)));
|
||||
SelectorEngine.find(SELECTOR_DATA_SPY).forEach(spy => new ScrollSpy(spy));
|
||||
});
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@ -4585,7 +4623,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): tab.js
|
||||
* Bootstrap (v5.0.0): tab.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4629,7 +4667,7 @@
|
||||
|
||||
|
||||
show() {
|
||||
if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.classList.contains(CLASS_NAME_ACTIVE) || isDisabled(this._element)) {
|
||||
if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.classList.contains(CLASS_NAME_ACTIVE)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -4717,11 +4755,17 @@
|
||||
element.classList.add(CLASS_NAME_SHOW$1);
|
||||
}
|
||||
|
||||
if (element.parentNode && element.parentNode.classList.contains(CLASS_NAME_DROPDOWN_MENU)) {
|
||||
let parent = element.parentNode;
|
||||
|
||||
if (parent && parent.nodeName === 'LI') {
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
|
||||
if (parent && parent.classList.contains(CLASS_NAME_DROPDOWN_MENU)) {
|
||||
const dropdownElement = element.closest(SELECTOR_DROPDOWN);
|
||||
|
||||
if (dropdownElement) {
|
||||
SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE).forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE));
|
||||
SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement).forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE));
|
||||
}
|
||||
|
||||
element.setAttribute('aria-expanded', true);
|
||||
@ -4756,7 +4800,14 @@
|
||||
|
||||
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
||||
event.preventDefault();
|
||||
if (['A', 'AREA'].includes(this.tagName)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (isDisabled(this)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = Data.get(this, DATA_KEY$1) || new Tab(this);
|
||||
data.show();
|
||||
});
|
||||
@ -4771,7 +4822,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): toast.js
|
||||
* Bootstrap (v5.0.0): toast.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
@ -4910,7 +4961,6 @@
|
||||
this._element.classList.remove(CLASS_NAME_SHOW);
|
||||
}
|
||||
|
||||
EventHandler.off(this._element, EVENT_CLICK_DISMISS);
|
||||
super.dispose();
|
||||
this._config = null;
|
||||
} // Private
|
||||
@ -4968,7 +5018,7 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.0-beta3): index.umd.js
|
||||
* Bootstrap (v5.0.0): 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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<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-trxYGD5BY4TyBTvU5H23FalSCYwpLA0vWEvXXGm5eytyztxb+97WzzY+IWDOSbav" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-jHiSqEim4+W1UCvv8kTcMbtCZlRF8MxbgKdfpvncia8gdN1UImBnhTpKtufREzv7" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -51,14 +51,14 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-md-7 py-4">
|
||||
<h4 class="text-white">حول</h4>
|
||||
<p class="text-muted">أضف بعض المعلومات حول الألبوم أدناه أو المؤلف أو أي سياق خلفية آخر. اجعلها بضع جمل طويلة حتى يتمكن الناس من التقاط بعض الحكايات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
|
||||
<p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
|
||||
</div>
|
||||
<div class="col-sm-4 offset-md-1 py-4">
|
||||
<h4 class="text-white">اتصل</h4>
|
||||
<h4 class="text-white">تواصل معي</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white">تابع على تويتر</a></li>
|
||||
<li><a href="#" class="text-white">مثل في الفيسبوك</a></li>
|
||||
<li><a href="#" class="text-white">راسلني</a></li>
|
||||
<li><a href="#" class="text-white">تابعني على تويتر</a></li>
|
||||
<li><a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a></li>
|
||||
<li><a href="#" class="text-white">راسلني على البريد الإلكتروني</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -83,7 +83,7 @@
|
||||
<div class="row py-lg-5">
|
||||
<div class="col-lg-6 col-md-8 mx-auto">
|
||||
<h1 class="fw-light">مثال الألبوم</h1>
|
||||
<p class="lead text-muted">شيء قصير وقائد حول المجموعة أدناه - محتوياتها ، ومنشئها ، وما إلى ذلك. اجعلها قصيرة ولطيفة ، ولكن ليست قصيرة جدًا حتى لا يتخطى الناس ببساطة هذه المجموعة تمامًا.</p>
|
||||
<p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>
|
||||
<a href="#" class="btn btn-secondary my-2">عمل ثانوي</a>
|
||||
@ -98,13 +98,13 @@
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: ظفري" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">ظفري</text></svg>
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
@ -114,13 +114,13 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: ظفري" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">ظفري</text></svg>
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
@ -130,13 +130,13 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: ظفري" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">ظفري</text></svg>
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
@ -147,13 +147,13 @@
|
||||
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: ظفري" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">ظفري</text></svg>
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
@ -163,13 +163,13 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: ظفري" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">ظفري</text></svg>
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
@ -179,13 +179,13 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: ظفري" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">ظفري</text></svg>
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
@ -196,13 +196,13 @@
|
||||
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: ظفري" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">ظفري</text></svg>
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
@ -212,13 +212,13 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: ظفري" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">ظفري</text></svg>
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
@ -228,13 +228,13 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: ظفري" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">ظفري</text></svg>
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
@ -259,7 +259,7 @@
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" 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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" 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-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" 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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<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-trxYGD5BY4TyBTvU5H23FalSCYwpLA0vWEvXXGm5eytyztxb+97WzzY+IWDOSbav" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-jHiSqEim4+W1UCvv8kTcMbtCZlRF8MxbgKdfpvncia8gdN1UImBnhTpKtufREzv7" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -53,7 +53,7 @@
|
||||
<header class="blog-header py-3">
|
||||
<div class="row flex-nowrap justify-content-between align-items-center">
|
||||
<div class="col-4 pt-1">
|
||||
<a class="link-secondary" href="#">الإشتراك</a>
|
||||
<a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<a class="blog-header-logo text-dark" href="#">كبير</a>
|
||||
@ -62,24 +62,24 @@
|
||||
<a class="link-secondary" href="#" aria-label="بحث">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>بحث</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
|
||||
</a>
|
||||
<a class="btn btn-sm btn-outline-secondary" href="#">سجل</a>
|
||||
<a class="btn btn-sm btn-outline-secondary" href="#">إنشاء حساب</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="nav-scroller py-1 mb-2">
|
||||
<nav class="nav d-flex justify-content-between">
|
||||
<a class="p-2 link-secondary" href="#">العالمية</a>
|
||||
<a class="p-2 link-secondary" href="#">نحن.</a>
|
||||
<a class="p-2 link-secondary" href="#">تقنية</a>
|
||||
<a class="p-2 link-secondary" href="#">العالم</a>
|
||||
<a class="p-2 link-secondary" href="#">الولايات المتحدة</a>
|
||||
<a class="p-2 link-secondary" href="#">التقنية</a>
|
||||
<a class="p-2 link-secondary" href="#">التصميم</a>
|
||||
<a class="p-2 link-secondary" href="#">حضاره</a>
|
||||
<a class="p-2 link-secondary" href="#">اعمال</a>
|
||||
<a class="p-2 link-secondary" href="#">سياسة</a>
|
||||
<a class="p-2 link-secondary" href="#">رأي</a>
|
||||
<a class="p-2 link-secondary" href="#">علم</a>
|
||||
<a class="p-2 link-secondary" href="#">الحضارة</a>
|
||||
<a class="p-2 link-secondary" href="#">المال والأعمال</a>
|
||||
<a class="p-2 link-secondary" href="#">السياسة</a>
|
||||
<a class="p-2 link-secondary" href="#">الرأي العام</a>
|
||||
<a class="p-2 link-secondary" href="#">العلوم</a>
|
||||
<a class="p-2 link-secondary" href="#">الصحة</a>
|
||||
<a class="p-2 link-secondary" href="#">أسلوب</a>
|
||||
<a class="p-2 link-secondary" href="#">الموضة</a>
|
||||
<a class="p-2 link-secondary" href="#">السفر</a>
|
||||
</nav>
|
||||
</div>
|
||||
@ -88,8 +88,8 @@
|
||||
<main class="container">
|
||||
<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
|
||||
<div class="col-md-6 px-0">
|
||||
<h1 class="display-4 fst-italic">عنوان مشاركة مدونة مميزة أطول</h1>
|
||||
<p class="lead my-3">أسطر نصية متعددة تشكل الجزء الأمامي ، لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه المشاركة.</p>
|
||||
<h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1>
|
||||
<p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p>
|
||||
<p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -98,14 +98,14 @@
|
||||
<div class="col-md-6">
|
||||
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-primary">العالمية</strong>
|
||||
<strong class="d-inline-block mb-2 text-primary">العالم</strong>
|
||||
<h3 class="mb-0">مشاركة مميزة</h3>
|
||||
<div class="mb-1 text-muted">12 نوفمبر</div>
|
||||
<div class="mb-1 text-muted">نوفمبر 12</div>
|
||||
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
|
||||
<a href="#" class="stretched-link">أكمل القراءة</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: ظفري" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">ظفري</text></svg>
|
||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -115,12 +115,12 @@
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-success">التصميم</strong>
|
||||
<h3 class="mb-0">عنوان الوظيفة</h3>
|
||||
<div class="mb-1 text-muted">11 نوفمبر</div>
|
||||
<div class="mb-1 text-muted">نوفمبر 11</div>
|
||||
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
|
||||
<a href="#" class="stretched-link">أكمل القراءة</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: ظفري" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">ظفري</text></svg>
|
||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text></svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -134,111 +134,115 @@
|
||||
</h3>
|
||||
|
||||
<article class="blog-post">
|
||||
<h2 class="blog-post-title">عينة مشاركة مدونة</h2>
|
||||
<p class="blog-post-meta">1 يناير 2014 بواسطة <a href="#"> Mark </a></p>
|
||||
<h2 class="blog-post-title">مثال على تدوينة</h2>
|
||||
<p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p>
|
||||
|
||||
<p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. الطباعة الأساسية والصور والرموز كلها مدعومة.</p>
|
||||
<p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p>
|
||||
<hr>
|
||||
<p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p>
|
||||
<p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p>
|
||||
<blockquote>
|
||||
<p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p>
|
||||
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p>
|
||||
</blockquote>
|
||||
<p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p>
|
||||
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p>
|
||||
<h2>عنوان</h2>
|
||||
<p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p>
|
||||
<h3>العنوان الفرعي</h3>
|
||||
<p>موالية استدعى كل حيث, وبدون الأولية الاندونيسية و كما. فعل قد لعدم اليابانية, اليميني الساحلية أن جهة. جُل ما اليميني العسكري الدنمارك. إذ وفي الموسوعة الأمريكي, سابق الأمريكية ثم مدن. تم وفي أوروبا بلديهما ماليزيا،, ويتّفق بالجانب وقد أي.</p>
|
||||
<p>تحصل النباتات على غذائها بواسطة عملية تسمى البناء الضوئي، حيث تقوم النباتات بتحويل ضوء الشمس والماء وثاني أكسيد الكربون الموجود في الغلاف الجوي إلى غذاء وتطلق الأكسجين كمنتج ثانوي لهذا التفاعل الكيميائي. وتحدث هذه العملية في "البلاستيدات الخضراء". فالنباتات تستفيد من طاقة ضوء الشمس في تقسيم الماء إلى هيدروجين وأكسجين، وتحدث تفاعلات كيميائية أخرى ينتج عنها سكر الجلكوز الذي تستخدمه كمصدر للغذاء وينطلق الأكسجين من النباتات إلى الغلاف الجوي. وهذا يعني أن النباتات تحوِّل ثاني أكسيد الكربون إلى غذاء من خلال تفاعلات كيميائية معقَّدة. ويُعد البناء الضوئي من أهم التفاعلات الكيميائية على كوكب الأرض، فقد ساعد في الماضي على تطوُّر كوكبنا وظهور الحياة عليه. فالنباتات تستخدم ثاني أكسيد الكربون لصنع غذائها، وتطلق الأكسجين لتساعد الكائنات الأخرى على التنفس!</p>
|
||||
<h3>عنوان فرعي</h3>
|
||||
<p>ألهمت هذه العملية علماء وكالة الفضاء الأمريكية (ناسا) خلال الستينيات من القرن الماضي، لبحث فكرة إطعام روَّاد الفضاء في مهمات الفضاء الطويلة مثل السفر إلى المريخ. وكانت واحدة من الأفكار الواعدة تصنيع الغذاء عن طريق ثاني أكسيد الكربون الذي ينتجه روَّاد الفضاء، لكن ليس بواسطة النباتات بل عن طريق ميكروبات صغيرة وحيدة الخلية قادرة على حصد ثاني أكسيد الكربون لإنتاج كميات وفيرة من البروتين المغذي على شكل مسحوق عديم النكهة، كما يمكن استخدام المادة في صنع الأطعمة المألوفة لدينا.</p>
|
||||
<pre><code>Example code block</code></pre>
|
||||
<p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p>
|
||||
<h3>العنوان الفرعي</h3>
|
||||
<p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p>
|
||||
<p>وخلافاً لما هو الحال في عالم النبات، فإن هذه الميكروبات لا تستخدم الضوء كما يحدث في عملية البناء الضوئي التي تستخدمها النباتات للحصول على الغذاء، أي لأنها قادرة على النمو في الظلام. تسمى هذه البكتريا "هيدروجينوتروف" (Hydrogenotrophs)، وهي تستخدم الهيدروجين كوقود لإنتاج الغذاء من ثاني أكسيد الكربون. فعندما يُنتج روَّاد الفضاء ثاني أكسيد الكربون، تلتقطه الميكروبات، ويتحوَّل مع مدخلات أخرى إلى غذاء غني بالكربون. وبهذه الطريقة سوف نحصل على دورة كربون مغلقة الحلقة.</p>
|
||||
<h3>عنوان فرعي</h3>
|
||||
<p>بعد مرور أكثر من نصف قرن على أبحاث ناسا، تعمل حالياً عدة شركات في قطاع البيولوجيا التركيبية من ضمنها إير بروتين (Air Protein) وسولار فودز (Solar Foods) على تطوير جيل جديد من المنتجات الغذائية المستدامة، من دون وجود بصمة كربونية. ولن تقتصر هذه المنتجات الغذائية على روَّاد الفضاء فحسب، بل سوف تمتد لتشمل جميع سكان الأرض، وسوف تُنتَج في فترة زمنية قصيرة، بدلاً من الشهور، ومن دون الاعتماد على الأراضي الزراعية. وهذا يعني الحصول على منتجات غذائية بشكل سريع جداً. كما سيصبح من الممكن تصنيع الغذاء بطريقة عمودية من خلال هذه الميكروبات، بدلاً من الطريقة الأفقية التقليدية الشبيهة بتقنية الزراعة العمودية الحديثة. وهذا يعني توفير منتجات غذائية أكبر من المساحة نفسها.</p>
|
||||
<p>يتكوَّن الغذاء البشري من ثلاثة أنواع رئيسة، هي:</p>
|
||||
<ul>
|
||||
<li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li>
|
||||
<li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li>
|
||||
<li>ذات مئات المشترك بالمحور عن وشعار.</li>
|
||||
<li>البروتينات</li>
|
||||
<li>الكربوهيدرات</li>
|
||||
<li>الدهون</li>
|
||||
</ul>
|
||||
<p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p>
|
||||
<p>وتتكوَّن البروتينات من الأحماض الأمينية، وهي مجموعة من المركبات العضوية يبلغ عددها في جسم الإنسان عشرين حمضاً أمينياً، من بينها تسعة أساسية يحصل عليها الجسم من الغذاء. وتتكوَّن الأحماض الأمينية بشكل أساس من:</p>
|
||||
<ol>
|
||||
<li>عرض قتيل، الجنرال الأوروبي ما, ثم تعد بقعة.</li>
|
||||
<li>ثم الا الجوي اوروبا, و غير العسكري التبرعات, ترتيب مواقعها أوراقهم ضرب في إذ.</li>
|
||||
<li>علاقة يتعلّق وبلجيكا، على مع, الجنود الخطّة جُل عل, فقد ان سقوط.</li>
|
||||
<li>الكربون</li>
|
||||
<li>الهيدروجين</li>
|
||||
<li>الأكسجين</li>
|
||||
<li>النيتروجين</li>
|
||||
</ol>
|
||||
<p>الشرق، وصافرات الساحلية بل بلا. ٠٨٠٤ ودول العناد انه أن. في تونس أوزار مقاومة وصل, قد وقد حلّت دأبوا رجوعهم. أفاق والعتاد لم قبل, عن كلّ منتصف محاولات. المشترك الأولية ان كلا, ألمّ إحتار التقليدية و مدن. عن عدد تسمّى المسرح الطرفين.</p>
|
||||
</article><!-- /.blog-post -->
|
||||
<p>ومن الملاحظ أن النيتروجين يشكِّل نسبة %78 من الهواء، كما أن الهيدروجين نحصل عليه من خلال التحليل الكهربائي للماء، ومن الممكن نظرياً سحب الكربون من الهواء لتشكيل هذه الأحماض، ذلك أن الكربون هو العمود الفقري للأحماض الأمينية، كما أن الحياة على كوكب الأرض قائمة على الكربون لقدرته على تكوين سلاسل كربونية طويلة، وهذا ما تفعله الميكروبات بتصنيع أحماض أمينية من ثاني أكسيد الكربون من خلال مجموعة من التفاعلات الكيميائية المعقَّدة. وإضافة إلى صنع وجبات غنية بالبروتين، فهذه الميكروبات تنتج منتجات أخرى مثل الزيوت التي لها عديد من الاستخدامات.</p>
|
||||
</article>
|
||||
|
||||
<article class="blog-post">
|
||||
<h2 class="blog-post-title">مشاركة مدونة أخرى</h2>
|
||||
<p class="blog-post-meta">23 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p>
|
||||
<h2 class="blog-post-title">تدوينة أخرى</h2>
|
||||
<p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
|
||||
|
||||
<p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p>
|
||||
<p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p>
|
||||
<blockquote>
|
||||
<p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p>
|
||||
<p>تم تصنيع اللحوم بأنواع عديدة</p>
|
||||
</blockquote>
|
||||
<p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p>
|
||||
<p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p>
|
||||
</article><!-- /.blog-post -->
|
||||
<p>إذ استخدم هؤلاء الباحثون الهواء والطاقة المتجدِّدة كمدخلات في عملية مشابهة للتخمير، لإنتاج بروتين يحتوي على الأحماض الأمينية التسعة الأساسية وغني بالفيتامينات والمعادن، كما أنه خالٍ من الهرمونات والمضادات الحيوية والمبيدات الحشرية ومبيدات الأعشاب.</p>
|
||||
<p> وتم تصنيع اللحوم بأنواع عديدة بما فيها الدواجن والأبقار والمأكولات البحرية، من دون حصول انبعاثات كربونية، على عكس تربية الأبقار التي تسهم في انبعاث غاز الميثان أحد غازات الاحتباس الحراري.</p>
|
||||
</article>
|
||||
|
||||
<article class="blog-post">
|
||||
<h2 class="blog-post-title">ميزة جديدة</h2>
|
||||
<p class="blog-post-meta">14 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p>
|
||||
<p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
|
||||
|
||||
<p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p>
|
||||
<p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p>
|
||||
<p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p>
|
||||
<p>وتقوم الشركة حالياً بجمع البيانات حول المنتج الغذائي لتقديمه إلى الاتحاد الأوروبي بهدف الحصول على ترخيص غذائي، كما أنها تخطط لبدء الإنتاج التجاري في العام المقبل 2021م. وقد أوضحت الشركة أنها مهتمة بإنتاج أطعمة صديقة للبيئة من خلال استخدام المواد الأساسية: الكهرباء وثاني أكسيد الكربون، وهذه الأطعمة سوف تجنبنا الأثر السلبي البيئي للزراعة التقليدية الذي يشمل كل شيء من استخدام الأرض والمياه إلى الانبعاثات الناتجة من تسميد المحاصيل أو تربية الحيوانات.</p>
|
||||
<p>وعلى هذا، فإن البروتينات المشتقة من الميكروبات سوف:</p>
|
||||
<ul>
|
||||
<li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li>
|
||||
<li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li>
|
||||
<li>ذات مئات المشترك بالمحور عن وشعار.</li>
|
||||
<li>توفر حلاً ممكناً في ظل زيادة الطلب العالمي المستقبلي على الغذاء</li>
|
||||
<li>تتوسع مصانع الغذاء في المستقبل لتكون أكفأ وأكثر استدامة</li>
|
||||
<li>تصبح قادرة على توفير الغذاء لروَّاد الفضاء في سفرهم إلى المريخ وجميع سكان كوكب الأرض في عام 2050م</li>
|
||||
</ul>
|
||||
<p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p>
|
||||
</article><!-- /.blog-post -->
|
||||
<p>فتخيّل أن الميكروبات ستكون مصانع المستقبل، وأن غذاء المستقبل سيكون مصنوعاً من الهواء! وأن عام 2050م سيكون مختلفاً تماماً عن عالمنا اليوم. فهو عالم من دون زراعة ولا تربية حيوانات من أجل الغذاء! قد يبدو ذلك خيالياً لكنه ليس مستحيلاً!</p>
|
||||
</article>
|
||||
|
||||
<nav class="blog-pagination" aria-label="Pagination">
|
||||
<a class="btn btn-outline-primary" href="#">أقدم الوظائف</a>
|
||||
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">أحدث المشاركات</a>
|
||||
<a class="btn btn-outline-primary" href="#">تدوينات أقدم</a>
|
||||
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">تدوينات أحدث</a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="p-4 mb-3 bg-light rounded">
|
||||
<h4 class="fst-italic">حول</h4>
|
||||
<p class="mb-0">بل مدن وإعلان بتخصيص إيطاليا. حيث عقبت أساسي وتنامت و, وباءت وايرلندا وقد بـ, مرمى سقطت إحكام يكن و. كل ومن تصفح بالرّغم الاندونيسية. ٣٠ انتباه والروسية كلّ, الوراء ولكسمبورغ عن لكل. الخاصّة والإتحاد لان بل, وقد الهجوم وتنامت و.</p>
|
||||
</div>
|
||||
<div class="position-sticky" style="top: 2rem;">
|
||||
<div class="p-4 mb-3 bg-light rounded">
|
||||
<h4 class="fst-italic">حول</h4>
|
||||
<p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">أرشيف</h4>
|
||||
<ol class="list-unstyled mb-0">
|
||||
<li><a href="#">مارس 2014</a></li>
|
||||
<li><a href="#">شباط 2014</a></li>
|
||||
<li><a href="#">يناير 2014</a></li>
|
||||
<li><a href="#">ديسمبر 2013</a></li>
|
||||
<li><a href="#">نوفمبر 2013</a></li>
|
||||
<li><a href="#">أكتوبر 2013</a></li>
|
||||
<li><a href="#">سبتمبر 2013</a></li>
|
||||
<li><a href="#">اغسطس 2013</a></li>
|
||||
<li><a href="#">يوليو 2013</a></li>
|
||||
<li><a href="#">يونيو 2013</a></li>
|
||||
<li><a href="#">مايو 2013</a></li>
|
||||
<li><a href="#">ابريل 2013</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">الأرشيف</h4>
|
||||
<ol class="list-unstyled mb-0">
|
||||
<li><a href="#">مارس 2021</a></li>
|
||||
<li><a href="#">شباط 2021</a></li>
|
||||
<li><a href="#">يناير 2021</a></li>
|
||||
<li><a href="#">ديسمبر 2020</a></li>
|
||||
<li><a href="#">نوفمبر 2020</a></li>
|
||||
<li><a href="#">أكتوبر 2020</a></li>
|
||||
<li><a href="#">سبتمبر 2020</a></li>
|
||||
<li><a href="#">اغسطس 2020</a></li>
|
||||
<li><a href="#">يوليو 2020</a></li>
|
||||
<li><a href="#">يونيو 2020</a></li>
|
||||
<li><a href="#">مايو 2020</a></li>
|
||||
<li><a href="#">ابريل 2020</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">في مكان آخر</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">في مكان آخر</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.row -->
|
||||
|
||||
</main><!-- /.container -->
|
||||
</main>
|
||||
|
||||
<footer class="blog-footer">
|
||||
<p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/"> Bootstrap </a> بواسطة <a href="https://twitter.com/mdo">mdo </a>.</p>
|
||||
<p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p>
|
||||
<p>
|
||||
<a href="#">عد إلى الأعلى</a>
|
||||
</p>
|
||||
|
||||
@ -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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -127,7 +127,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row g-5">
|
||||
<div class="col-md-8">
|
||||
<h3 class="pb-4 mb-4 fst-italic border-bottom">
|
||||
From the Firehose
|
||||
@ -135,61 +135,118 @@
|
||||
|
||||
<article class="blog-post">
|
||||
<h2 class="blog-post-title">Sample blog post</h2>
|
||||
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
|
||||
<p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
|
||||
|
||||
<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
|
||||
<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
|
||||
<hr>
|
||||
<p>Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, <a href="#">you're a firework</a>. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.</p>
|
||||
<blockquote>
|
||||
<p>Bikinis, zucchinis, Martinis, no weenies. I know there will be sacrifice but that's the price. <strong>This is how we do it</strong>. I'm not sticking around to watch you go down. You think you're so rock and roll, but you're really just a joke. I know one spark will shock the world, yeah yeah. Can't replace you with a million rings.</p>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<h2>Blockquotes</h2>
|
||||
<p>This is an example blockquote in action:</p>
|
||||
<blockquote class="blockquote">
|
||||
<p>Quoted text goes here.</p>
|
||||
</blockquote>
|
||||
<p>Trying to connect the dots, don't know what to tell my boss. Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine. Glitter all over the room <em>pink flamingos</em> in the pool. </p>
|
||||
<h2>Heading</h2>
|
||||
<p>Suiting up for my crowning battle. If you only knew what the future holds. Bring the beat back. Peach-pink lips, yeah, everybody stares.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>You give a hundred reasons why, and you say you're really gonna try. Straight stuntin' yeah we do it like that. Calling out my name. ‘Cause I, I’m capable of anything.</p>
|
||||
<pre><code>Example code block</code></pre>
|
||||
<p>Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out.</p>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<h3>Example lists</h3>
|
||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:</p>
|
||||
<ul>
|
||||
<li>Got a motel and built a fort out of sheets.</li>
|
||||
<li>Your kiss is cosmic, every move is magic.</li>
|
||||
<li>Suiting up for my crowning battle.</li>
|
||||
<li>First list item</li>
|
||||
<li>Second list item with a longer description</li>
|
||||
<li>Third list item to close it out</li>
|
||||
</ul>
|
||||
<p>Takes you miles high, so high, 'cause she’s got that one international smile.</p>
|
||||
<p>And this is an ordered list:</p>
|
||||
<ol>
|
||||
<li>Scared to rock the boat and make a mess.</li>
|
||||
<li>I could have rewrite your addiction.</li>
|
||||
<li>I know you get me so I let my walls come down.</li>
|
||||
<li>First list item</li>
|
||||
<li>Second list item with a longer description</li>
|
||||
<li>Third list item to close it out</li>
|
||||
</ol>
|
||||
<p>After a hurricane comes a rainbow.</p>
|
||||
</article><!-- /.blog-post -->
|
||||
<p>And this is a definiton list:</p>
|
||||
<dl>
|
||||
<dt>HyperText Markup Language (HTML)</dt>
|
||||
<dd>The language used to describe and define the content of a Web page</dd>
|
||||
<dt>Cascading Style Sheets (CSS)</dt>
|
||||
<dd>Used to describe the appearance of Web content</dd>
|
||||
<dt>JavaScript (JS)</dt>
|
||||
<dd>The programming language used to build advanced Web sites and applications</dd>
|
||||
</dl>
|
||||
<h2>Inline HTML elements</h2>
|
||||
<p>HTML defines a long list of available inline tags, a complete list of which can be found on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer Network</a>.</p>
|
||||
<ul>
|
||||
<li><strong>To bold text</strong>, use <code class="language-plaintext highlighter-rouge"><strong></code>.</li>
|
||||
<li><em>To italicize text</em>, use <code class="language-plaintext highlighter-rouge"><em></code>.</li>
|
||||
<li>Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use <code class="language-plaintext highlighter-rouge"><abbr></code>, with an optional <code class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.</li>
|
||||
<li>Citations, like <cite>— Mark Otto</cite>, should use <code class="language-plaintext highlighter-rouge"><cite></code>.</li>
|
||||
<li><del>Deleted</del> text should use <code class="language-plaintext highlighter-rouge"><del></code> and <ins>inserted</ins> text should use <code class="language-plaintext highlighter-rouge"><ins></code>.</li>
|
||||
<li>Superscript <sup>text</sup> uses <code class="language-plaintext highlighter-rouge"><sup></code> and subscript <sub>text</sub> uses <code class="language-plaintext highlighter-rouge"><sub></code>.</li>
|
||||
</ul>
|
||||
<p>Most of these elements are styled by browsers with few modifications on our part.</p>
|
||||
<h2>Heading</h2>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<pre><code>Example code block</code></pre>
|
||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
|
||||
</article>
|
||||
|
||||
<article class="blog-post">
|
||||
<h2 class="blog-post-title">Another blog post</h2>
|
||||
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
|
||||
<p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
|
||||
|
||||
<p>I am ready for the road less traveled. Already <a href="#">brushing off the dust</a>. Yeah, you're lucky if you're on her plane. I used to bite my tongue and hold my breath. Uh, She’s a beast. I call her Karma (come back). Black ray-bans, you know she's with the band. I can't sleep let's run away and don't ever look back, don't ever look back.</p>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<blockquote>
|
||||
<p>Growing fast into a <strong>bolt of lightning</strong>. Be careful Try not to lead her on</p>
|
||||
<p>Longer quote goes here, maybe with some <strong>emphasized text</strong> in the middle of it.</p>
|
||||
</blockquote>
|
||||
<p>I'm intrigued, for a peek, heard it's fascinating. Oh oh! Wanna be a victim ready for abduction. She's got that international smile, oh yeah, she's got that one international smile. Do you ever feel, feel so paper thin. I’m gon’ put her in a coma. Sun-kissed skin so hot we'll melt your popsicle.</p>
|
||||
<p>This is transcendental, on another level, boy, you're my lucky star.</p>
|
||||
</article><!-- /.blog-post -->
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<h3>Example table</h3>
|
||||
<p>And don't forget about tables in these posts:</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Upvotes</th>
|
||||
<th>Downvotes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alice</td>
|
||||
<td>10</td>
|
||||
<td>11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bob</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charlie</td>
|
||||
<td>7</td>
|
||||
<td>9</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Totals</td>
|
||||
<td>21</td>
|
||||
<td>23</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
|
||||
</article>
|
||||
|
||||
<article class="blog-post">
|
||||
<h2 class="blog-post-title">New feature</h2>
|
||||
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
|
||||
<p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
|
||||
|
||||
<p>From Tokyo to Mexico, to Rio. Yeah, you take me to utopia. I'm walking on air. We'd make out in your Mustang to Radiohead. I mean the ones, I mean like she's the one. Sun-kissed skin so hot we'll melt your popsicle. Slow cooking pancakes for my boy, still up, still fresh as a Daisy.</p>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<ul>
|
||||
<li>I hope you got a healthy appetite.</li>
|
||||
<li>You're never gonna be unsatisfied.</li>
|
||||
<li>Got a motel and built a fort out of sheets.</li>
|
||||
<li>First list item</li>
|
||||
<li>Second list item with a longer description</li>
|
||||
<li>Third list item to close it out</li>
|
||||
</ul>
|
||||
<p>Don't need apologies. Boy, you're an alien your touch so foreign, it's <em>supernatural</em>, extraterrestrial. Talk about our future like we had a clue. I can feel a phoenix inside of me.</p>
|
||||
</article><!-- /.blog-post -->
|
||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
|
||||
</article>
|
||||
|
||||
<nav class="blog-pagination" aria-label="Pagination">
|
||||
<a class="btn btn-outline-primary" href="#">Older</a>
|
||||
@ -199,42 +256,43 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="p-4 mb-3 bg-light rounded">
|
||||
<h4 class="fst-italic">About</h4>
|
||||
<p class="mb-0">Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that <em>wears the crown</em>. Yes, we make angels cry, raining down on earth from up above.</p>
|
||||
</div>
|
||||
<div class="position-sticky" style="top: 2rem;">
|
||||
<div class="p-4 mb-3 bg-light rounded">
|
||||
<h4 class="fst-italic">About</h4>
|
||||
<p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">Archives</h4>
|
||||
<ol class="list-unstyled mb-0">
|
||||
<li><a href="#">March 2014</a></li>
|
||||
<li><a href="#">February 2014</a></li>
|
||||
<li><a href="#">January 2014</a></li>
|
||||
<li><a href="#">December 2013</a></li>
|
||||
<li><a href="#">November 2013</a></li>
|
||||
<li><a href="#">October 2013</a></li>
|
||||
<li><a href="#">September 2013</a></li>
|
||||
<li><a href="#">August 2013</a></li>
|
||||
<li><a href="#">July 2013</a></li>
|
||||
<li><a href="#">June 2013</a></li>
|
||||
<li><a href="#">May 2013</a></li>
|
||||
<li><a href="#">April 2013</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">Archives</h4>
|
||||
<ol class="list-unstyled mb-0">
|
||||
<li><a href="#">March 2021</a></li>
|
||||
<li><a href="#">February 2021</a></li>
|
||||
<li><a href="#">January 2021</a></li>
|
||||
<li><a href="#">December 2020</a></li>
|
||||
<li><a href="#">November 2020</a></li>
|
||||
<li><a href="#">October 2020</a></li>
|
||||
<li><a href="#">September 2020</a></li>
|
||||
<li><a href="#">August 2020</a></li>
|
||||
<li><a href="#">July 2020</a></li>
|
||||
<li><a href="#">June 2020</a></li>
|
||||
<li><a href="#">May 2020</a></li>
|
||||
<li><a href="#">April 2020</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">Elsewhere</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">Elsewhere</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.row -->
|
||||
|
||||
</main><!-- /.container -->
|
||||
</main>
|
||||
|
||||
<footer class="blog-footer">
|
||||
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
|
||||
@ -5,15 +5,15 @@
|
||||
<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.82.0">
|
||||
<title>قالب دائري · Bootstrap v5.0</title>
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<title>قالب شرائح العرض · Bootstrap v5.0</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/carousel-rtl/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-trxYGD5BY4TyBTvU5H23FalSCYwpLA0vWEvXXGm5eytyztxb+97WzzY+IWDOSbav" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-jHiSqEim4+W1UCvv8kTcMbtCZlRF8MxbgKdfpvncia8gdN1UImBnhTpKtufREzv7" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -50,7 +50,7 @@
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">دائري</a>
|
||||
<a class="navbar-brand" href="#">شرائح العرض</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
@ -63,7 +63,7 @@
|
||||
<a class="nav-link" href="#">حلقة الوصل</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معاق</a>
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">رابط غير مفعل</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
@ -90,7 +90,7 @@
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-start">
|
||||
<h1>عنوان المثال.</h1>
|
||||
<p> نهاية الأوضاع ان أضف, هو مما رجوعهم وقدّموا. أي عدد الدمج نهاية وأكثرها, المسرح الباهضة وبولندا حول و, كل أما سياسة أسابيع. مع حيث قُدُماً الكونجرس, بها و خيار ٢٠٠٤, كلا في مكّن وقام. مع يكن زهاء بالفشل, الجوي الصين الشمال إذ على.</p>
|
||||
<p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -101,7 +101,7 @@
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1>عنوان مثال آخر.</h1>
|
||||
<p>ثم تزامناً الفرنسي الإقتصادية دار. لكل عن الضغوط المتّبعة, أن حتى إختار المدن بالإنزال. عن الشمل بالفشل تلك, بل أراض أوزار بلديهما حول. دون لكون والتي ثم, كُلفة ويعزى استطاعوا أن لمّ. جُل بخطوط واحدة البشريةً.</p>
|
||||
<p>حسب المجلس الثقافي البريطاني فإن تعليم الإنجليزية داخل بريطانيا يسهم في تعزيز اقتصادها بما يتجاوز ملياري جنيه سنوياً، كما أنه وفر أكثر من 26 ألف وظيفة.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#">أعرف أكثر</a></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -112,7 +112,7 @@
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-end">
|
||||
<h1>واحد أكثر لقياس جيد.</h1>
|
||||
<p>قررت العصبة إيطاليا وتم أن, عن سكان وقامت الحكومة وفي. كان بـ اوروبا اليابانية, ثمّة بوابة يتعلّق عل بعض. عدم رئيس الآلاف أن حدى.</p>
|
||||
<p>الإحصاءات لحجم الاستثمار اللغوي خارج بريطانيا تتفاوت من سنة لأخرى إلا أن المدير التنفيذي للمجلس الثقافي البريطاني إدي بايرز يرى أن استثمار تعليم الإنجليزية في الخارج لا يحسب على المستوى المالي فحسب بل على المستوى السياسي أيضاً.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#">تصفح المعرض</a></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -124,7 +124,7 @@
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">التالى</span>
|
||||
<span class="visually-hidden">التالي</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -141,21 +141,21 @@
|
||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
||||
|
||||
<h2>عنوان</h2>
|
||||
<p>ان وتم عجّل الأجل, قبل نتيجة المشترك بـ, أي جعل جورج أوزار المسرح. أن وإعلان الساحل تلك, مكن ان استبدال الباهضة التكاليف. الى ماذا اليميني الحكومة في, إجلاء نتيجة قبل تم. مساعدة بولندا، أي هذه الحكم.</p>
|
||||
<p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
|
||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
||||
|
||||
<h2>عنوان</h2>
|
||||
<p>هو أخر إتفاقية الدولارات الأوروبيّون, ثانية طوكيو و به،, ونتج أعمال مما أم. عن الا يونيو أفريقيا, السيطرة التقليدي ومن ٣٠. هو الغالي الإتفاقية ويكيبيديا، مكن, و الى هُزم اعتداء وايرلندا. وقبل بمباركة الأوروبيّون عن فقد, بتحدّي والفلبين ما كلا.</p>
|
||||
<h2>عنوان آخر</h2>
|
||||
<p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
|
||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
||||
|
||||
<h2>عنوان</h2>
|
||||
<p>غير عن الثقيل وسمّيت الأوضاع, لم تاريخ بالحرب للسيطرة حين, دار اللا تطوير تم. الى بشرية اليابان في. أما الشهيرة الإثنان وايرلندا ما, لإعلان واشتدّت و مدن. في غير والحزب للسيطرة الإكتفاء. ثانية الكونجرس الا من, جُل ٣٠ وبداية الشرقية.</p>
|
||||
<h2>عنوان ثالث لتأكيد المعلومة</h2>
|
||||
<p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
|
||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
</div><!-- /.row -->
|
||||
@ -168,7 +168,7 @@
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
|
||||
<p class="lead">في التخطيط التجارية هذا, إذ هذه الشمل موالية الخاطفة. أحدث وبدون اتفاق من غير, جعل عل أطراف مشاركة الأعمال. بل الى قادة واحدة, لهيمنة التجارية حتى ثم. هو وبالرغم ابتدعها بال. بوابة ماشاء أما أي, ما وفي أحكم غريمه التقليدية.</p>
|
||||
<p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
||||
@ -180,8 +180,8 @@
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7 order-md-2">
|
||||
<h2 class="featurette-heading">أوه نعم ، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
|
||||
<p class="lead">صفحة وحرمان الأراضي أم أخذ, قد ذلك الثقيلة المتاخمة وبريطانيا. أخذ أن اللا لإعلان لهيمنة, وفي كل موالية الشّعبين. تكاليف الخاسرة لمّ لم, إذ بحق موالية الثقيلة. العظمى والفلبين تم عرض, جمعت شعار الحرة حيث بل. عرض و وترك اللازمة.</p>
|
||||
<h2 class="featurette-heading">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
|
||||
<p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
|
||||
</div>
|
||||
<div class="col-md-5 order-md-1">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
||||
@ -193,8 +193,8 @@
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading">وأخيرًا ، هذا. <span class="text-muted"> كش ملك. </span></h2>
|
||||
<p class="lead">تحرّك أراضي هذا عن, كرسي وكسبت يتم بل. بحق بل القوى وفنلندا, الجو واُسدل التكاليف وتم تم, بسبب ا السادس كان أن. وبعد ميناء من بلا, تصفح يتبقّ تلك هو. ان دول بخطوط وإعلان ومطالبة, المزيفة الأوروبية، عل حدى قام.</p>
|
||||
<h2 class="featurette-heading">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
|
||||
<p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
|
||||
@ -212,12 +212,12 @@
|
||||
<!-- FOOTER -->
|
||||
<footer class="container">
|
||||
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
|
||||
<p>© 2017–2021 Company, Inc. · <a href="#">خصوصية</a> · <a href="#">شروط</a></p>
|
||||
<p>© 2017–2021 Company, Inc. · <a href="#">سياسة الخصوصية</a> · <a href="#">شروط الاستخدام</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" 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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" 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-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
@ -5,15 +5,15 @@
|
||||
<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.82.0">
|
||||
<title>ورقة غش · Bootstrap v5.0</title>
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<title>ورقة الغش · Bootstrap v5.0</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cheatsheet-rtl/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-trxYGD5BY4TyBTvU5H23FalSCYwpLA0vWEvXXGm5eytyztxb+97WzzY+IWDOSbav" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-jHiSqEim4+W1UCvv8kTcMbtCZlRF8MxbgKdfpvncia8gdN1UImBnhTpKtufREzv7" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -51,7 +51,7 @@
|
||||
<div class="container-fluid d-flex align-items-center">
|
||||
<h1 class="d-flex align-items-center fs-4 text-white mb-0">
|
||||
<img src="/docs/5.0/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
|
||||
ورقة غش
|
||||
ورقة الغش
|
||||
</h1>
|
||||
<a href="/docs/5.0/examples/cheatsheet/" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
|
||||
</div>
|
||||
@ -61,48 +61,48 @@
|
||||
<nav class="small" id="toc">
|
||||
<ul class="list-unstyled">
|
||||
<li class="my-2">
|
||||
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">محتويات</button>
|
||||
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
|
||||
<ul class="list-unstyled ps-3 collapse" id="contents-collapse">
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#typography">الطباعة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#images">صور</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#tables">جدول</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#figures">رقم</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#typography">النصوص</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#images">الصور</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#tables">الجداول</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#figures">النماذج البيانية</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">نماذج</button>
|
||||
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
|
||||
<ul class="list-unstyled ps-3 collapse" id="forms-collapse">
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#overview">نظرة عامة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">أشكال المعطلين</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#sizing">تحجيم</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">الحقول المعطلة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#sizing">الأحجام</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#input-group">مجموعة الإدخال</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">تسميات عائمة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#validation">التحقق</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
|
||||
<ul class="list-unstyled ps-3 collapse" id="components-collapse">
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#accordion">الأكورديون</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#alerts">إنذار</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#badge">شارة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#buttons">أزرار</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#accordion">المطوية</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#alerts">الإنذارات</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#badge">الشارة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل التفصيلي</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#buttons">الأزرار</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#button-group">مجموعة الأزرار</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#card">بطاقة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح عرض</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">هبوط قطرة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة القوائم</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#modal">مشروط</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#card">البطاقة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح العرض</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">القوائم المنسدلة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة العناصر</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#modal">الصندوق العائم</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#navs">التنقل</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#navbar">شريط التنقل</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#pagination">ترقيم الصفحات</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#popovers">بوبوفيرس</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#popovers">الصناديق المنبثقة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#progress">شريط التقدم</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">مخطوطة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#spinners">المغازل</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#toasts">نخب</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#tooltips">تلميحات الأدوات</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">المخطوطة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#spinners">الدوائر المتحركة</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#toasts">الإشعارات</a></li>
|
||||
<li><a class="d-inline-flex align-items-center rounded" href="#tooltips">التلميحات</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -110,19 +110,19 @@
|
||||
</aside>
|
||||
<div class="bd-cheatsheet container-fluid bg-body">
|
||||
<section id="content">
|
||||
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">محتويات</h2>
|
||||
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">المحتوى</h2>
|
||||
|
||||
<article class="my-3" id="typography">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>الطباعة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/content/typography/">توثيق</a>
|
||||
<h3>النصوص</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/content/typography/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<p class="display-1">العرض 1</p>
|
||||
<p class="display-2">العرض 2</p>
|
||||
<p class="display-3 ">العرض 3</p>
|
||||
<p class="display-3">العرض 3</p>
|
||||
<p class="display-4">العرض 4</p>
|
||||
<p class="display-5">العرض 5</p>
|
||||
<p class="display-6">العرض 6</p>
|
||||
@ -139,61 +139,58 @@
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="lead">
|
||||
حيث وبدون الساحة وقوعها، أي, فقد عل مكّن تمهيد قتيل،. ولم والحزب الشرقي و, أضف بالفشل الخاسر استمرار ان. كل أما وحرمان للإتحاد, ٣٠ سبتمبر استعملت جهة, لعملة الثقيلة المتاخمة على لم. أي نفس دارت والفلبين.
|
||||
هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<p>يمكنك استخدام علامة <mark>العلامة</mark> لتحديد نص .</p>
|
||||
<p>يمكنك استخدام تصنيف mark <mark>لتحديد</mark> نص.</p>
|
||||
<p><del>من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.</del></p>
|
||||
<p><s>من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.</s></p>
|
||||
<p><ins>من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.</ins></p>
|
||||
<p><u>سيتم عرض هذا السطر كما هو مسطر.</u></p>
|
||||
<p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه طباعة جيدة.</small></p>
|
||||
<p><strong>تم تقديم هذا السطر كنص عريض.</strong></p>
|
||||
<p><em>تم تقديم هذا السطر كنص مائل.</em></p>
|
||||
<p><u>سيتم عرض النص في هذا السطر كما وتحته خط.</u></p>
|
||||
<p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.</small></p>
|
||||
<p><strong>هذا السطر يحوي نص عريض.</strong></p>
|
||||
<p><em>هذا السطر يحوي نص مائل.</em></p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<blockquote class="blockquote">
|
||||
<p>بين كرسي والمعدات بالولايات تم. الذود اتّجة التقليدية يتم و, حيث وقرى.</p>
|
||||
<p>إقتباس مبهر، موضوع في عنصر blockquote</p>
|
||||
<footer class="blockquote-footer">شخص مشهور في <cite title= "عنوان المصدر"> عنوان المصدر </cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-unstyled">
|
||||
<li>معقل الطريق واقتصار أم قام.</li>
|
||||
<li>أمّا ولكسمبورغ ثم جُل, هو.</li>
|
||||
<li>ان وبحلول لمحاكم الخارجية ومن.</li>
|
||||
<li>بها بل العظمى إيطاليا الساحلية.</li>
|
||||
<li>مدن قد وبحلول وأكثرها الدنمارك.
|
||||
<li>هذه قائمة عناصر.</li>
|
||||
<li>بالرغم من أنها مصممة كي لا تظهر كذلك.</li>
|
||||
<li>إلا أنها مجهزة كـ قائمة خلف الكواليس</li>
|
||||
<li>هذا التصميم ينطبق فقد على القائمة الرئيسية</li>
|
||||
<li>القوائم الفرعية
|
||||
<ul>
|
||||
<li>به، المشترك إتفاقية.</li>
|
||||
<li>لإعادة الواقعة و.</li>
|
||||
<li>وترك وانتهاءً ضرب.</li>
|
||||
<li>الشتاء العالم، أي.</li>
|
||||
<li>لا تتأثر بهذا التصميم</li>
|
||||
<li>فهي تظهر عليها علامات الترقيم</li>
|
||||
<li>وتحتوي على مساحة فارغة بجوارها</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>ودول يتسنّى بتطويق لمّ في.</li>
|
||||
<li>بعض و مرمى يتسنّى, في.</li>
|
||||
<li>أسيا اعلان ومحاولة عل انه.</li>
|
||||
<li>قد يكون هذا التصميم مفيدًا في بعض الأحيان.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">لمّ مع.</li>
|
||||
<li class="list-inline-item">أم دون.</li>
|
||||
<li class="list-inline-item">ذات بل.</li>
|
||||
<li class="list-inline-item">هذا عنصر في قائمة.</li>
|
||||
<li class="list-inline-item">وهذا أيضًا.</li>
|
||||
<li class="list-inline-item">لكنهم يظهرون متجاورين.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="my-3" id="images">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>صور</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/content/images/">توثيق</a>
|
||||
<h3>الصور</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/content/images/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -210,8 +207,8 @@
|
||||
</article>
|
||||
<article class="my-3" id="tables">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>جدول</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/content/tables/">توثيق</a>
|
||||
<h3>الجداول</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/content/tables/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -222,7 +219,7 @@
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">الاسم الاول</th>
|
||||
<th scope="col">الكنية</th>
|
||||
<th scope="col">اسم مستعار</th>
|
||||
<th scope="col">الاسم المستعار</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -230,18 +227,18 @@
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
<td><bdo lang="en" dir="ltr">@mdo</bdo></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
<td><bdo lang="en" dir="ltr">@fat</bdo></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -254,7 +251,7 @@
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">الاسم الاول</th>
|
||||
<th scope="col">الكنية</th>
|
||||
<th scope="col">اسم مستعار</th>
|
||||
<th scope="col">الاسم المستعار</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -262,18 +259,18 @@
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
<td><bdo lang="en" dir="ltr">@mdo</bdo></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
<td><bdo lang="en" dir="ltr">@fat</bdo></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -291,49 +288,49 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Default</th>
|
||||
<td>زنزانة</td>
|
||||
<td>زنزانة</td>
|
||||
<td>خلية</td>
|
||||
<td>خلية</td>
|
||||
</tr>
|
||||
|
||||
<tr class="table-primary">
|
||||
<th scope="row">Primary</th>
|
||||
<td>زنزانة</td>
|
||||
<td>زنزانة</td>
|
||||
<td>خلية</td>
|
||||
<td>خلية</td>
|
||||
</tr>
|
||||
<tr class="table-secondary">
|
||||
<th scope="row">Secondary</th>
|
||||
<td>زنزانة</td>
|
||||
<td>زنزانة</td>
|
||||
<td>خلية</td>
|
||||
<td>خلية</td>
|
||||
</tr>
|
||||
<tr class="table-success">
|
||||
<th scope="row">Success</th>
|
||||
<td>زنزانة</td>
|
||||
<td>زنزانة</td>
|
||||
<td>خلية</td>
|
||||
<td>خلية</td>
|
||||
</tr>
|
||||
<tr class="table-danger">
|
||||
<th scope="row">Danger</th>
|
||||
<td>زنزانة</td>
|
||||
<td>زنزانة</td>
|
||||
<td>خلية</td>
|
||||
<td>خلية</td>
|
||||
</tr>
|
||||
<tr class="table-warning">
|
||||
<th scope="row">Warning</th>
|
||||
<td>زنزانة</td>
|
||||
<td>زنزانة</td>
|
||||
<td>خلية</td>
|
||||
<td>خلية</td>
|
||||
</tr>
|
||||
<tr class="table-info">
|
||||
<th scope="row">Info</th>
|
||||
<td>زنزانة</td>
|
||||
<td>زنزانة</td>
|
||||
<td>خلية</td>
|
||||
<td>خلية</td>
|
||||
</tr>
|
||||
<tr class="table-light">
|
||||
<th scope="row">Light</th>
|
||||
<td>زنزانة</td>
|
||||
<td>زنزانة</td>
|
||||
<td>خلية</td>
|
||||
<td>خلية</td>
|
||||
</tr>
|
||||
<tr class="table-dark">
|
||||
<th scope="row">Dark</th>
|
||||
<td>زنزانة</td>
|
||||
<td>زنزانة</td>
|
||||
<td>خلية</td>
|
||||
<td>خلية</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -346,7 +343,7 @@
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">الاسم الاول</th>
|
||||
<th scope="col">الكنية</th>
|
||||
<th scope="col">اسم مستعار</th>
|
||||
<th scope="col">الاسم المستعار</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -354,18 +351,18 @@
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
<td><bdo lang="en" dir="ltr">@mdo</bdo></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
<td><bdo lang="en" dir="ltr">@fat</bdo></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -374,8 +371,8 @@
|
||||
</article>
|
||||
<article class="my-3" id="figures">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>رقم</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/content/figures/">توثيق</a>
|
||||
<h3>النماذج البيانية</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/content/figures/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -391,39 +388,39 @@
|
||||
</section>
|
||||
|
||||
<section id="forms">
|
||||
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">نماذج</h2>
|
||||
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">النماذج</h2>
|
||||
|
||||
<article class="my-3" id="overview">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>نظرة عامة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/forms/overview/">توثيق</a>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/forms/overview/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">عنوان البريد الالكترونى</label>
|
||||
<label for="exampleInputEmail1" class="form-label">البريد الإلكتروني</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
<div id="emailHelp" class="form-text">لن نشارك بريدك الإلكتروني مع أي شخص آخر.</div>
|
||||
<div id="emailHelp" class="form-text">لن نقوم بمشاركة بريدك الإلكتروني مع أي شخص آخر.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">كلمه السر</label>
|
||||
<label for="exampleInputPassword1" class="form-label">كلمة السر</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1">
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">تفقدني</label>
|
||||
<label class="form-check-label" for="exampleCheck1">اخترني</label>
|
||||
</div>
|
||||
<fieldset class="mb-3">
|
||||
<legend>أزرار الراديو</legend>
|
||||
<legend>أزرار الاختيار الأحادي</legend>
|
||||
<div class="form-check">
|
||||
<input type="radio" name="radios" class="form-check-input" id="exampleRadio1">
|
||||
<label class="form-check-label" for="exampleRadio1">الراديو الافتراضي</label>
|
||||
<input type="radio" name="radios" class="form-check-input" id="exampleRadio1" checked>
|
||||
<label class="form-check-label" for="exampleRadio1">الخيار الافتراضي</label>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="radio" name="radios" class="form-check-input" id="exampleRadio2">
|
||||
<label class="form-check-label" for="exampleRadio2">راديو آخر</label>
|
||||
<label class="form-check-label" for="exampleRadio2">خيار آخر</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="mb-3">
|
||||
@ -432,10 +429,10 @@
|
||||
</div>
|
||||
<div class="mb-3 form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
|
||||
<label class="form-check-label" for="flexSwitchCheckChecked">تم تحديد إدخال خانة الاختيار التبديل</label>
|
||||
<label class="form-check-label" for="flexSwitchCheckChecked">زر على شكل مفتاح اختيار.</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="customRange3" class="form-label">نطاق المثال</label>
|
||||
<label for="customRange3" class="form-label">مثال على حقل اختيار نطاقي</label>
|
||||
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">إرسال</button>
|
||||
@ -445,8 +442,8 @@
|
||||
</article>
|
||||
<article class="my-3" id="disabled-forms">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>أشكال المعطلين</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/forms/overview/#disabled-forms">توثيق</a>
|
||||
<h3>الحقول المعطلة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/forms/overview/#disabled-forms">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -454,44 +451,44 @@
|
||||
<form>
|
||||
<fieldset disabled aria-label="مثال على مجموعة الحقول المعطلة">
|
||||
<div class="mb-3">
|
||||
<label for="disabledTextInput" class="form-label">إدخال معطل</label>
|
||||
<input type="text" id="disabledTextInput" class="form-control" placeholder="إدخال معطل">
|
||||
<label for="disabledTextInput" class="form-label">حقل إدخال معطل</label>
|
||||
<input type="text" id="disabledTextInput" class="form-control" placeholder="حقل إدخال معطل">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="disabledSelect" class="form-label">حدد القائمة معطل</label>
|
||||
<label for="disabledSelect" class="form-label">قائمة اختيار معطلة</label>
|
||||
<select id="disabledSelect" class="form-select">
|
||||
<option>حدد معطل</option>
|
||||
<option>خيار معطل</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
|
||||
<label class="form-check-label" for="disabledFieldsetCheck">
|
||||
لا يمكن التحقق من هذا
|
||||
زر اختيار معطل
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="mb-3">
|
||||
<legend>أزرار اختيار المعوقين</legend>
|
||||
<legend>أزرار اختيار أحادي معطلين</legend>
|
||||
<div class="form-check">
|
||||
<input type="radio" name="radios" class="form-check-input" id="disabledRadio1" disabled>
|
||||
<label class="form-check-label" for="disabledRadio1">راديو معطل</label>
|
||||
<label class="form-check-label" for="disabledRadio1">خيار معطل</label>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="radio" name="radios" class="form-check-input" id="disabledRadio2" disabled>
|
||||
<label class="form-check-label" for="disabledRadio2">راديو آخر</label>
|
||||
<label class="form-check-label" for="disabledRadio2">خيار آخر معطل</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="disabledCustomFile">تحميل معطل</label>
|
||||
<label class="form-label" for="disabledCustomFile">رفع معطل</label>
|
||||
<input type="file" class="form-control" id="disabledCustomFile" disabled>
|
||||
</div>
|
||||
<div class="mb-3 form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="disabledSwitchCheckChecked" checked disabled>
|
||||
<label class="form-check-label" for="disabledSwitchCheckChecked">تم تعطيل إدخال خانة الاختيار التبديل</label>
|
||||
<label class="form-check-label" for="disabledSwitchCheckChecked">زر معطل على شكل مفتاح اختيار.</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="disabledRange" class="form-label">نطاق المعوقين</label>
|
||||
<label for="disabledRange" class="form-label">حقل اختيار نطاقي معطل</label>
|
||||
<input type="range" class="form-range" min="0" max="5" step="0.5" id="disabledRange">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">إرسال</button>
|
||||
@ -502,18 +499,18 @@
|
||||
</article>
|
||||
<article class="my-3" id="sizing">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>تحجيم</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/forms/form-control/#sizing">توثيق</a>
|
||||
<h3>الأحجام</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/forms/form-control/#sizing">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<div class="mb-3">
|
||||
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg مثال">
|
||||
<input class="form-control form-control-lg" type="text" placeholder="حقل إدخال كبير" aria-label=".form-control-lg مثال">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg مثال">
|
||||
<option selected>افتح قائمة التحديد هذه</option>
|
||||
<option selected>افتح قائمة الاختيار هذه</option>
|
||||
<option value="1">واحد</option>
|
||||
<option value="2">اثنان</option>
|
||||
<option value="3">ثلاثة</option>
|
||||
@ -526,11 +523,11 @@
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="mb-3">
|
||||
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm مثال">
|
||||
<input class="form-control form-control-sm" type="text" placeholder="حقل إدخال صغير" aria-label=".form-control-sm مثال">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<select class="form-select form-select-sm" aria-label=".form-select-sm مثال">
|
||||
<option selected>افتح قائمة التحديد هذه</option>
|
||||
<option selected>افتح قائمة الاختيار هذه</option>
|
||||
<option value="1">واحد</option>
|
||||
<option value="2">اثنان</option>
|
||||
<option value="3">ثلاثة</option>
|
||||
@ -545,28 +542,28 @@
|
||||
<article class="my-3" id="input-group">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>مجموعة الإدخال</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/forms/input-group/">توثيق</a>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/forms/input-group/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-label="اسم المستخدم" aria-describedby="basic-addon1">
|
||||
<span class="input-group-text" id="basic-addon1">أنا اسمي</span>
|
||||
<input type="text" class="form-control" placeholder="فلان الفلاني" aria-label="الاسم" aria-describedby="basic-addon1">
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="اسم مستخدم المستلم" aria-describedby="basic-addon2">
|
||||
<span class="input-group-text" id="basic-addon2">@example.com</span>
|
||||
<input type="text" class="form-control" placeholder="أنا أحب الكعك والقهوة" aria-label="الطعام المفضل" aria-describedby="basic-addon2">
|
||||
<span class="input-group-text" id="basic-addon2">وغيرها</span>
|
||||
</div>
|
||||
<label for="basic-url" class="form-label">عنوان URL المخصص الخاص بك</label>
|
||||
<label for="basic-url" class="form-label">عنوان حسابك الشخصي</label>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
|
||||
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
|
||||
<span class="input-group-text" id="basic-addon3"><bdo lang="en" dir="ltr">https://example.com/users/</bdo></span>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">$</span>
|
||||
<span class="input-group-text"><bdo lang="en" dir="ltr">.00</bdo></span>
|
||||
<input type="text" class="form-control" aria-label="المبلغ (لأقرب دولار)">
|
||||
<span class="input-group-text">.00</span>
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">مع textarea</span>
|
||||
@ -577,8 +574,8 @@
|
||||
</article>
|
||||
<article class="my-3" id="floating-labels">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>تسميات عائمة</h3>
|
||||
<a class="d-flex align-items-center" href="/docs/5.0/forms/floating-labels/">Documentation</a>
|
||||
<h3>الحقول ذوي العناوين العائمة</h3>
|
||||
<a class="d-flex align-items-center" href="/docs/5.0/forms/floating-labels/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -586,11 +583,11 @@
|
||||
<form>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
||||
<label for="floatingInput">عنوان بريد الكتروني</label>
|
||||
<label for="floatingInput">البريد الالكتروني</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="password" class="form-control" id="floatingPassword" placeholder="كلمه السر">
|
||||
<label for="floatingPassword">كلمه السر</label>
|
||||
<input type="password" class="form-control" id="floatingPassword" placeholder="كلمة السر">
|
||||
<label for="floatingPassword">كلمة السر</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -599,7 +596,7 @@
|
||||
<article class="my-3" id="validation">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>التحقق</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/forms/validation/">توثيق</a>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/forms/validation/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -609,23 +606,23 @@
|
||||
<label for="validationServer01" class="form-label">الاسم الاول</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
|
||||
<div class="valid-feedback">
|
||||
تبدو جيدا!
|
||||
يبدو صحيحًا!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationServer02" class="form-label">الكنية</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
|
||||
<div class="valid-feedback">
|
||||
تبدو جيدا!
|
||||
يبدو صحيحًا!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationServerUsername" class="form-label">اسم المستخدم</label>
|
||||
<div class="input-group has-validation">
|
||||
<span class="input-group-text" id="inputGroupPrepend3">@</span>
|
||||
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
|
||||
<span class="input-group-text" id="inputGroupPrepend3">@</span>
|
||||
<div class="invalid-feedback">
|
||||
يرجى اختيار اسم المستخدم.
|
||||
يرجى اختيار اسم مستخدم.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -633,39 +630,39 @@
|
||||
<label for="validationServer03" class="form-label">مدينة</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer03" required>
|
||||
<div class="invalid-feedback">
|
||||
الرجاء إدخال مدينة صالحة.
|
||||
يرجى إدخال مدينة صحيحة.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationServer04" class="form-label">حالة</label>
|
||||
<select class="form-select is-invalid" id="validationServer04" required>
|
||||
<option selected disabled value="">أختر...</option>
|
||||
<option selected disabled value="">اختر...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
الرجاء تحديد ولاية صالحة.
|
||||
يرجى اختيار ولاية صحيحة.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationServer05" class="form-label">الرمز البريدي</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer05" required>
|
||||
<div class="invalid-feedback">
|
||||
الرجاء تقديم رمز بريدي صالح.
|
||||
يرجى إدخال رمز بريدي صحيح.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
|
||||
<label class="form-check-label" for="invalidCheck3">
|
||||
وافق على الشروط والأحكام
|
||||
أوافق على الشروط والأحكام
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
يجب أن توافق قبل التقديم.
|
||||
تجب الموافقة قبل إرسال النموذج.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">تقديم النموذج</button>
|
||||
<button class="btn btn-primary" type="submit">إرسال النموذج</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -674,12 +671,12 @@
|
||||
</section>
|
||||
|
||||
<section id="components">
|
||||
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">مكونات</h2>
|
||||
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">العناصر</h2>
|
||||
|
||||
<article class="my-3" id="accordion">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>انهيارالأكورديون</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/accordion/">توثيق</a>
|
||||
<h3>المطوية</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/accordion/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -688,36 +685,36 @@
|
||||
<div class="accordion-item">
|
||||
<h4 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
عنصر الأكورديون #1
|
||||
عنصر المطوية الأول
|
||||
</button>
|
||||
</h4>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة.
|
||||
<strong>هذا هو محتوى عنصر المطوية الأول.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h4 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
عنصر الأكورديون #2
|
||||
عنصر المطوية الثاني
|
||||
</button>
|
||||
</h4>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة.
|
||||
<strong>هذا هو محتوى عنصر المطوية الثاني.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h4 class="accordion-header" id="headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
عنصر الأكورديون #3
|
||||
عنصر المطوية الثالث
|
||||
</button>
|
||||
</h4>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة.
|
||||
<strong>هذا هو محتوى عنصر المطوية الثالث.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -727,8 +724,8 @@
|
||||
</article>
|
||||
<article class="my-3" id="alerts">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>إنذار</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/alerts/">توثيق</a>
|
||||
<h3>الإنذارات</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/alerts/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -780,20 +777,20 @@
|
||||
</article>
|
||||
<article class="my-3" id="badge">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>شارة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/badge/">توثيق</a>
|
||||
<h3>الشارة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/badge/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<p class="h1">عنوان المثال <span class="badge bg-primary">جديد</span></p>
|
||||
<p class="h2">عنوان المثال <span class="badge bg-secondary">جديد</span></p>
|
||||
<p class="h3">عنوان المثال <span class="badge bg-success">جديد</span></p>
|
||||
<p class="h4">عنوان المثال <span class="badge bg-danger">جديد</span></p>
|
||||
<p class="h5">عنوان المثال <span class="badge bg-warning text-dark">جديد</span></p>
|
||||
<p class="h6">عنوان المثال <span class="badge bg-info text-dark">جديد</span></p>
|
||||
<p class="h6">عنوان المثال <span class="badge bg-light text-dark">جديد</span></p>
|
||||
<p class="h6">عنوان المثال <span class="badge bg-dark">جديد</span></p>
|
||||
<p class="h1">مثال على عنوان <span class="badge bg-primary">جديد</span></p>
|
||||
<p class="h2">مثال على عنوان <span class="badge bg-secondary">جديد</span></p>
|
||||
<p class="h3">مثال على عنوان <span class="badge bg-success">جديد</span></p>
|
||||
<p class="h4">مثال على عنوان <span class="badge bg-danger">جديد</span></p>
|
||||
<p class="h5">مثال على عنوان <span class="badge bg-warning text-dark">جديد</span></p>
|
||||
<p class="h6">مثال على عنوان <span class="badge bg-info text-dark">جديد</span></p>
|
||||
<p class="h6">مثال على عنوان <span class="badge bg-light text-dark">جديد</span></p>
|
||||
<p class="h6">مثال على عنوان <span class="badge bg-dark">جديد</span></p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
@ -811,16 +808,16 @@
|
||||
</article>
|
||||
<article class="my-3" id="breadcrumb">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>مسار التنقل</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/breadcrumb/">توثيق</a>
|
||||
<h3>مسار التنقل التفصيلي (فتات الخبز)</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/breadcrumb/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<nav aria-label="مسار الخبز">
|
||||
<nav aria-label="فتات الخبز">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">الصفحة الرئيسية</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">مكتبة</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">المكتبة</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">البيانات</li>
|
||||
</ol>
|
||||
</nav>
|
||||
@ -829,8 +826,8 @@
|
||||
</article>
|
||||
<article class="my-3" id="buttons">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>أزرار</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/buttons/">توثيق</a>
|
||||
<h3>الأزرار</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/buttons/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -845,7 +842,7 @@
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
|
||||
<button type="button" class="btn btn-link">حلقة الوصل</button>
|
||||
<button type="button" class="btn btn-link">رابط</button>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
@ -870,12 +867,12 @@
|
||||
<article class="my-3" id="button-group">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>مجموعة الأزرار</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/button-group/">توثيق</a>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/button-group/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="شريط الأدوات مع مجموعات الأزرار">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="شريط أدوات مع مجموعات أزرار">
|
||||
<div class="btn-group me-2" role="group" aria-label="المجموعة الأولى">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
@ -896,8 +893,8 @@
|
||||
</article>
|
||||
<article class="my-3" id="card">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>بطاقة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/card/">توثيق</a>
|
||||
<h3>البطاقة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/card/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -925,7 +922,7 @@
|
||||
<a href="#" class="btn btn-primary">اذهب لمكان ما</a>
|
||||
</div>
|
||||
<div class="card-footer text-muted">
|
||||
2 منذ أيام
|
||||
منذ يومان
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -936,9 +933,9 @@
|
||||
<p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">أسر كل أراض.</li>
|
||||
<li class="list-group-item">شرسة مشارف واستمرت.</li>
|
||||
<li class="list-group-item">مكن إذ كانتا.</li>
|
||||
<li class="list-group-item">عنصر</li>
|
||||
<li class="list-group-item">عنصر آخر</li>
|
||||
<li class="list-group-item">عنصر ثالث</li>
|
||||
</ul>
|
||||
<div class="card-body">
|
||||
<a href="#" class="card-link">رابط البطاقة</a>
|
||||
@ -956,7 +953,7 @@
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">عنوان البطاقة</h5>
|
||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||
<p class="card-text">هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||
<p class="card-text"><small class="text-muted">آخر تحديث منذ 3 دقائق</small></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -969,8 +966,8 @@
|
||||
</article>
|
||||
<article class="my-3" id="carousel">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>شرائح عرض</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/carousel/">توثيق</a>
|
||||
<h3>شرائح العرض</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/carousel/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -986,24 +983,24 @@
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: الشريحة الأولى" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">الشريحة الأولى</text></svg>
|
||||
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>تسمية الشريحة الأولى</h5>
|
||||
<p>إستعمل تحرّكت المتحدة كان ما. لم وفي الشرقي المتاخمة تعد.</p>
|
||||
<h5>عنوان الشريحة الأولى</h5>
|
||||
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: الشريحة الثانية" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">الشريحة الثانية</text></svg>
|
||||
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>تسمية الشريحة الثانية</h5>
|
||||
<p>أجزاء الخاسرة التّحول ٣٠ انه, وصل أن عالمية التحالف التجارية.</p>
|
||||
<h5>عنوان الشريحة الثانية</h5>
|
||||
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: الشريحة الثالثة" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">الشريحة الثالثة</text></svg>
|
||||
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>تسمية الشريحة الثالثة</h5>
|
||||
<p>ان فقد ترتيب والديون. وتتحمّل الحيلولة أخذ قد. ضرب بل.</p>
|
||||
<h5>عنوان الشريحة الثالثة</h5>
|
||||
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1013,7 +1010,7 @@
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">التالى</span>
|
||||
<span class="visually-hidden">التالي</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -1021,8 +1018,8 @@
|
||||
</article>
|
||||
<article class="my-3" id="dropdowns">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>هبوط قطرة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/dropdowns/">توثيق</a>
|
||||
<h3>القوائم المنسدلة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/dropdowns/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -1033,7 +1030,7 @@
|
||||
زر القائمة المنسدلة
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM">
|
||||
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
|
||||
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
|
||||
<li><a class="dropdown-item" href="#">عمل</a></li>
|
||||
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
|
||||
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
|
||||
@ -1046,7 +1043,7 @@
|
||||
زر القائمة المنسدلة
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
|
||||
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
|
||||
<li><a class="dropdown-item" href="#">عمل</a></li>
|
||||
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
|
||||
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
|
||||
@ -1059,7 +1056,7 @@
|
||||
زر القائمة المنسدلة
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG">
|
||||
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
|
||||
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
|
||||
<li><a class="dropdown-item" href="#">عمل</a></li>
|
||||
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
|
||||
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
|
||||
@ -1143,10 +1140,10 @@
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
|
||||
<div class="dropend">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
زر Dropend
|
||||
زر القائمة المنسدلة لليسار
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
|
||||
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
|
||||
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
|
||||
<li><a class="dropdown-item" href="#">عمل</a></li>
|
||||
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
|
||||
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
|
||||
@ -1156,10 +1153,10 @@
|
||||
</div>
|
||||
<div class="dropup">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
زر Dropup
|
||||
زر القائمة المنسدلة للأعلى
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
|
||||
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
|
||||
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
|
||||
<li><a class="dropdown-item" href="#">عمل</a></li>
|
||||
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
|
||||
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
|
||||
@ -1169,10 +1166,10 @@
|
||||
</div>
|
||||
<div class="dropstart">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
زر Dropstart
|
||||
زر القائمة المنسدلة لليمين
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
|
||||
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
|
||||
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
|
||||
<li><a class="dropdown-item" href="#">عمل</a></li>
|
||||
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
|
||||
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
|
||||
@ -1187,10 +1184,10 @@
|
||||
<div class="btn-group">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownRightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
قائمة بمحاذاة النهاية
|
||||
قائمة منسدلة بمحاذاة نهاية الزر
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownRightMenuButton">
|
||||
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
|
||||
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
|
||||
<li><a class="dropdown-item" href="#">عمل</a></li>
|
||||
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
@ -1203,34 +1200,34 @@
|
||||
</article>
|
||||
<article class="my-3" id="list-group">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>مجموعة القوائم</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/list-group/">توثيق</a>
|
||||
<h3>مجموعة العناصر</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/list-group/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item active" aria-current="true">الفرنسية الأثناء، أي.</li>
|
||||
<li class="list-group-item disabled" aria-disabled="true">كلّ في تعداد.</li>
|
||||
<li class="list-group-item">وتم الأخذ أساسي.</li>
|
||||
<li class="list-group-item">لدحر بشرية ابتدعها.</li>
|
||||
<li class="list-group-item">لكون أسيا ولاتّساع.</li>
|
||||
<li class="list-group-item disabled" aria-disabled="true">عنصر معطل</li>
|
||||
<li class="list-group-item">عنصر ثاني</li>
|
||||
<li class="list-group-item">عنصر ثالث</li>
|
||||
<li class="list-group-item">عنصر رابع</li>
|
||||
<li class="list-group-item">وعنصر خامس أيضًا</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">الفرنسية الأثناء، أي.</li>
|
||||
<li class="list-group-item">كلّ في تعداد.</li>
|
||||
<li class="list-group-item">وتم الأخذ أساسي.</li>
|
||||
<li class="list-group-item">لدحر بشرية ابتدعها.</li>
|
||||
<li class="list-group-item">لكون أسيا ولاتّساع.</li>
|
||||
<li class="list-group-item">عنصر</li>
|
||||
<li class="list-group-item">عنصر ثاني</li>
|
||||
<li class="list-group-item">عنصر ثالث</li>
|
||||
<li class="list-group-item">عنصر رابع</li>
|
||||
<li class="list-group-item">وعنصر خامس أيضًا</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action">كلّ في تعداد.</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">عنصر مجموعة قائمة default بسيط</a>
|
||||
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">عنصر مجموعة قائمة primary بسيط</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">عنصر مجموعة قائمة secondary بسيط</a>
|
||||
@ -1246,24 +1243,24 @@
|
||||
</article>
|
||||
<article class="my-3" id="modal">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>مشروط</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/modal/">توثيق</a>
|
||||
<h3>الصندوق العائم</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/modal/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<div class="d-flex justify-content-between flex-wrap">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
|
||||
إطلاق نموذج تجريبي
|
||||
إطلاق صندوق عائم تجريبي
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">
|
||||
إطلاق مشروط خلفية ثابتة
|
||||
إطلاق صندوق عائم عالق
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
|
||||
مشروط قابل للتمرير تتمركز عموديًا
|
||||
صندوق عائم متنصف عاموديًا وقابل للتمرير
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">
|
||||
شاشة كاملة
|
||||
صندوق عائم يملأ الشاشة
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -1272,15 +1269,15 @@
|
||||
<article class="my-3" id="navs">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>التنقل</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/navs-tabs/">توثيق</a>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/navs-tabs/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" aria-current="page" href="#">نشيط</a>
|
||||
<a class="nav-link" href="#">حلقة الوصل</a>
|
||||
<a class="nav-link" href="#">حلقة الوصل</a>
|
||||
<a class="nav-link active" aria-current="page" href="#">نشط</a>
|
||||
<a class="nav-link" href="#">رابط</a>
|
||||
<a class="nav-link" href="#">رابط</a>
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معطل</a>
|
||||
</nav>
|
||||
</div>
|
||||
@ -1290,18 +1287,18 @@
|
||||
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
|
||||
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</button>
|
||||
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">الملف الشخصي</button>
|
||||
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل</button>
|
||||
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل بنا</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
|
||||
<p class="px-3">هو أسيا والإتحاد أضف, فشكّل الإتفاقية ذلك في. اكتوبر والعتاد و لمّ, وفي أم ٢٠٠٤ وإقامة الانجليزية. وجزر المضي التقليدي ان أما. كلا لإنعدام استراليا، بـ, ٣٠ أضف بوابة أوزار مساعدة. ما السيطرة الأرضية دار, هو بال الساحة الموسوعة.</p>
|
||||
<p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الصفحة الرئيسية. إذن، أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، لإخراجنا من هذه الورطة، لا سيّما أنها نفسها، مقرونة بالافتقار إلى البصيرة، هي التي أودت بنا إلى هذا التبدُّل المناخي في الدرجة الأولى.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
|
||||
<p class="px-3">بفرض البشريةً ذلك أي, ٣٠ تنفّس ليركز الإطلاق جُل. يكن ألمّ أمام في. بفرض الصينية الخاسرة هو لها. ومن معاملة وحلفاؤها كل. بلا يعادل العظمى مع. بـ بحث وجزر الصعداء الأعمال, لكون نتيجة هذا من. مع ثانية أوروبا بحث, كلّ بتطويق واستمرت أن.</p>
|
||||
<p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الملف الشخصي. معظم البشر في بلدان العالَم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظًا بالسكان في العالم.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
|
||||
<p class="px-3">كلا تم وزارة الأسيوي, جهة خطّة سنغافورة إذ. فقد أن قبضتهم شواطيء, مسارح أوزار إبّان كلّ أي. أحكم استمرار مدن تم, الى إتفاقية الإنذار، ان, ما هذه أراض وصغار استمرار. دنو هو تجهيز أصقاع الأعمال. و وأزيز إيطاليا ومن, بـ يبق السفن أدوات, اتفاق شواطيء الأوروبي ذلك عن.</p>
|
||||
<p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الاتصال بنا. أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، بل يجب وضع معايير جدوى جديدة لشركات البناء ومعايير أعلى لجدوى التكييف من أجل تحفيز الحلول المستدامة قانونيًا.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1309,13 +1306,13 @@
|
||||
<div class="bd-example">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">نشيط</a>
|
||||
<a class="nav-link active" aria-current="page" href="#">نشط</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">حلقة الوصل</a>
|
||||
<a class="nav-link" href="#">رابط</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">حلقة الوصل</a>
|
||||
<a class="nav-link" href="#">رابط</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معطل</a>
|
||||
@ -1327,7 +1324,7 @@
|
||||
<article class="my-3" id="navbar">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>شريط التنقل</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/navbar/">توثيق</a>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/navbar/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -1347,11 +1344,11 @@
|
||||
<a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">حلقة الوصل</a>
|
||||
<a class="nav-link" href="#">رابط</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
اسقاط
|
||||
قائمة منسدلة
|
||||
</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<li><a class="dropdown-item" href="#">عمل</a></li>
|
||||
@ -1386,11 +1383,11 @@
|
||||
<a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">حلقة الوصل</a>
|
||||
<a class="nav-link" href="#">رابط</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
اسقاط
|
||||
قائمة منسدلة
|
||||
</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
|
||||
<li><a class="dropdown-item" href="#">عمل</a></li>
|
||||
@ -1416,7 +1413,7 @@
|
||||
<article class="my-3" id="pagination">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>ترقيم الصفحات</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/pagination/">توثيق</a>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/pagination/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -1444,7 +1441,7 @@
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="التالى">
|
||||
<a class="page-link" href="#" aria-label="التالي">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
@ -1473,27 +1470,29 @@
|
||||
</article>
|
||||
<article class="my-3" id="popovers">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>بوبوفيرس</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/popovers/">توثيق</a>
|
||||
<h3>الصناديق المنبثقة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/popovers/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان Popover" data-bs-content="وإليك بعض المحتويات الرائعة. إنه ممتع للغاية. حق؟">انقر لتبديل المنبثقة</button>
|
||||
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان الصندوق المنبثق" data-bs-content="وإليك بعض المحتويات الرائعة. إنه آسر للغاية. أليس كذلك؟">
|
||||
انقر لعرض/إخفاء الصندوق المنبثق
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
|
||||
انبثاق في الأعلى
|
||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
|
||||
انبثاق إلى الأعلى
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
|
||||
popover في النهاية
|
||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
|
||||
انبثاق إلى اليسار
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
|
||||
انبثاق في الأسفل
|
||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
|
||||
انبثاق إلى الأسفل
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
|
||||
popover عند البدء
|
||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
|
||||
انبثاق إلى اليمين
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -1501,7 +1500,7 @@
|
||||
<article class="my-3" id="progress">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>شريط التقدم</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/progress/">توثيق</a>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/progress/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -1533,8 +1532,8 @@
|
||||
</article>
|
||||
<article class="my-3" id="scrollspy">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>مخطوطة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/scrollspy/">توثيق</a>
|
||||
<h3>المخطوطة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/scrollspy/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -1543,13 +1542,13 @@
|
||||
<a class="navbar-brand" href="#">شريط التنقل</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
<a class="nav-link" href="#fat"><bdi lang="en" dir="ltr">@fat</bdi></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
<a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">اسقاط</a>
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#one">واحد</a></li>
|
||||
<li><a class="dropdown-item" href="#two">اثنان</a></li>
|
||||
@ -1560,25 +1559,25 @@
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example">
|
||||
<h4 id="fat">@fat</h4>
|
||||
<p>إنطلاق العالمي ما هذه, لم فسقط عُقر الهادي جُل. بعد ٣٠ شرسة النزاع اليميني. عن بحث اتّجة الصينية, مع وأزيز الفرنسية مدن, عدد مرجع العالمية لبلجيكا، أن. طوكيو أعلنت حيث بل. الأخذ واندونيسيا، إذ ذلك, به، قد معاملة وقوعها،. ولم التي إبّان بالفشل ٣٠, جنوب مشاركة حيث أم.</p>
|
||||
<h4 id="mdo">@mdo</h4>
|
||||
<p>بل الشتاء، بمحاولة جُل, فعل ببعض الأراضي مع. أما لم الأولى تكاليف, في بحشد جنوب الدول دون. في لمحاكم الإنزال تلك, أي بين الصفحة النزاع. عن دول فسقط احداث. وباءت التقليدي أم حيث, دنو ماذا واستمرت بل, غير ٣٠ بقعة هناك وفنلندا.</p>
|
||||
<h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4>
|
||||
<p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
|
||||
<h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>
|
||||
<p>بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.</p>
|
||||
<h4 id="one">واحد</h4>
|
||||
<p>وزارة العاصمة الأوربيين حتى بـ. إذ دول مقاطعة بالرغم الأوروبي, كلّ هو نهاية لبولندا،, إذ مما ماشاء إتفاقية. إذ جهة تسبب وانتهاءً, تم تعد الذود أعلنت الأمريكية. ضرب نقطة حالية أن, ثم مارد للصين جديداً بين, بعد بل العظمى ابتدعها والفرنسي. ثم جعل يذكر ووصف, أثره، وعُرفت هو كان, بها قُدُماً البولندي ان. العالمي الجديدة، الفرنسية عرض كل.</p>
|
||||
<p>وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.</p>
|
||||
<h4 id="two">اثنان</h4>
|
||||
<p>إذ قِبل أعلنت عرض. ما به، هاربر قتيل، الإكتفاء, أوزار المنتصر لبولندا، بلا بـ. وبدون بزمام وبحلول جُل أن, مكن أي لعدم مشارف. تم أخر دفّة وصغار وبالتحديد،, وقد اعلان العالم واشتدّت عن. أي حين الأولية لبولندا،, كما مايو وحتّى فرنسا ثم.</p>
|
||||
<p>مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.</p>
|
||||
<h4 id="three">ثلاثة</h4>
|
||||
<p>لم هذا تسمّى إعادة مليون, ان يذكر فرنسا كما. إذ الدول الشتوية وأكثرها مدن. عرض بفرض بتحدّي الأوضاع تم. أحدث شاسعة تكبّد أخر من, ٣٠ حتى الخاطفة العالمية, هناك عالمية وقد لم. بشرية إتفاقية عل جهة, كل هُزم كانتا ضرب.</p>
|
||||
<p>أن كلّ صفحة إعادة الأمريكية. بحث تشكيل ويعزى وتزويده بل. وحتّى وإعلان أن دار, من مكّن الصينية المشتّتون مكن, وبحلول للمجهود الأمريكي أن بحق. أم جهة وجهان الأرض.</p>
|
||||
<p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p>
|
||||
<p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="my-3" id="spinners">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>المغازل</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/spinners/">توثيق</a>
|
||||
<h3>الدوائر المتحركة</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/spinners/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -1641,8 +1640,8 @@
|
||||
</article>
|
||||
<article class="my-3" id="toasts">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>نخب</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/toasts/">توثيق</a>
|
||||
<h3>الإشعارات</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/toasts/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -1656,7 +1655,7 @@
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
مرحبا بالعالم! هذه رسالة نخب.
|
||||
مرحبا بالعالم! هذه رسالة إشعار.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1664,16 +1663,16 @@
|
||||
</article>
|
||||
<article class="mt-3 mb-5 pb-5" id="tooltips">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>تلميحات الأدوات</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/tooltips/">توثيق</a>
|
||||
<h3>التلميحات</h3>
|
||||
<a class="d-flex align-items-center" hreflang="en" href="/docs/5.0/components/tooltips/">دليل الإستخدام</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example tooltip-demo">
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح في الأعلى">تلميح في الأعلى</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح في النهاية">تلميح في النهاية</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح في الأسفل">تلميح في الأسفل</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح عند البدء">تلميح عند البدء</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح يظهر في الأعلى">تلميح يظهر في الأعلى</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح يظهر على اليسار">تلميح يظهر على اليسار</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح يظهر في الأسفل">تلميح يظهر في الأسفل</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح يظهر على اليمين">تلميح يظهر على اليمين</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>تلميح</em> <u>مع</u> <b>HTML</b>">تلميح مع HTML</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -1685,15 +1684,15 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">عنوان مشروط</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
|
||||
<h5 class="modal-title" id="exampleModalLabel">عنوان الصندوق العائم</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
|
||||
<button type="button" class="btn btn-primary">احفظ التغييرات</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
|
||||
<button type="button" class="btn btn-primary">حفظ التغيرات</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1702,36 +1701,38 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLiveLabel">عنوان مشروط</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
|
||||
<h5 class="modal-title" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>لن أغلق إذا نقرت خارج لي. لا تحاول حتى الضغط على مفتاح الهروب.</p>
|
||||
<p>لن أغلق إذا نقرت خارجي. لا تحاول حتى الضغط على مفتاح الهروب.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
|
||||
<button type="button" class="btn btn-primary">فهمت</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
|
||||
<button type="button" class="btn btn-primary">حسنًا</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان مشروط</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
|
||||
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
|
||||
<p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
|
||||
<p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
|
||||
<p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
|
||||
<p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
|
||||
<p>نص لتوضيح عمل الصندوق العائم المتنصّف عاموديًا القابل للتمرير</p>
|
||||
<p>في هذه الحالة، هذا الصندوق يحتوي على محتوى أكثر قليلًا، ولذلك لتوضيح كيف يمكن إضافة خاصية الإنتصاف العامودي لصندوق عائم قابل للتمرير.</p>
|
||||
<p>يعتبر كوب أو فنجان القهوة عادة يومية عند غالبية سكان الكرة الأرضية في الصباح والمساء، وفي حين تكثر الدراسات حول إيجابياتها هناك أيضا سلبيات كثيرة للمشروب المفضل للكثيرين.</p>
|
||||
<p>وفي هذا الشأن، أظهرت دراسة جديدة أن تناول الكافيين بانتظام يقلل من حجم المادة الرمادية في الدماغ، مما يشير إلى أن تناول القهوة يمكن أن يضعف القدرة على معالجة المعلومات، وفقاً لما نشرته "ديلي ميل" البريطانية.</p>
|
||||
<p>وأعطى باحثون سويسريون متطوعين ثلاث حصص من الكافيين 150 ملغم يوميًا لمدة 10 أيام - وهو مقدار كافيين يعادل حوالي أربعة أو خمسة أكواب صغيرة من القهوة المخمرة يوميًا، أو سبعة إسبريسو فردي.</p>
|
||||
<p>وتبين حدوث انخفاض في المادة الرمادية، والتي توجد غالبًا في الطبقة الخارجية للدماغ، أو القشرة، وتعمل على معالجة المعلومات.</p>
|
||||
<p>كما كان الانخفاض مذهلاً بشكل خاص في الفص الصدغي الإنسي الأيمن، بما في ذلك الحُصين، وهي منطقة من الدماغ ضرورية لتقوية الذاكرة.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
|
||||
<button type="button" class="btn btn-primary">احفظ التغييرات</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
|
||||
<button type="button" class="btn btn-primary">حفظ التغيرات</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1740,39 +1741,29 @@
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">مشروط ملء الشاشة</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
|
||||
<p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
|
||||
<p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
|
||||
<p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
|
||||
<p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
|
||||
<p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
|
||||
<p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
|
||||
<p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
|
||||
<p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
|
||||
<p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
|
||||
<p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
|
||||
<p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
|
||||
<p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
|
||||
<p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
|
||||
<p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
|
||||
<p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
|
||||
<p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
|
||||
<p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
|
||||
<p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
|
||||
<p>في ما يلي، نص طويل لتعبئة كامل الشاشة. قد يبدو أنني أثرثر كثيرًا، لذا سأقوم بنسخ مقالة من إحدى الصحف العربية.</p>
|
||||
<p>تكييف الهواء هو من التكنولوجيا التي ما إن نمتلكها حتى نصبح عاجزين عن تخيّل العيش من دونها. وتكييف الهواء في مناطق عديدة من العالم ليس ترفاً يمكن الاستغناء عنه. ولكن هذه الحاجة الحيوية تثير تحديات كبيرة على مستوى استهلاك الطاقة في معظم بلدان العالم. ويُتوقع أن تتفاقم هذه التحديات خلال العقود الثلاثة المقبلة، مع توقُّع ارتفاع عدد المكيفات في العالم نحو ثلاثة أضعاف. وفي حين أن الابتكارات التكنولوجية تحقِّق كل يوم إنجازاً جديداً، وعلى الرغم من بعض التحسينات والتدابير المحدودة التي طرأت على صناعة المكيفات، “فإن تكنولوجيتها الأساسية لا تزال تعمل كما كانت، منذ اعتمادها قبل نحو قرن من السنين"، حسبما جاء في تقرير لمعهد ماساشوستس للتكنولوجيا (MIT)، في الأول من سبتمبر 2020م. ولمعالجة هذه المشكلات الخطيرة، لا مفر من إعادة التفكير بجد.</p>
|
||||
<p>التكييف حاجة حيويّة. فالتعرّض للحرارة لمدة طويلة ضارٌ بالصحة. ووفقاً لمنظمة الصحة العالميّة يمكن للتعرُّض الطويل للحرارة أيضاً أن يؤدي إلى "إعياء حراري، وضربة شمس، وتورّم في الرجلين، وطفح جلدي على العنق، وتشنج، وصداع، وحساسيّة، والخمول والوهَن. ويمكن للحرارة أن تسبِّب جفافاً خطراً، وأعراضاً حادة في أوعية الدماغ الدمويّة، وتسهم في تكوّن الجلطات".</p>
|
||||
<p>وموجات الحر أيضاً من أشد المخاطر الطبيعيّة المميتة. إذ يقدَّر أن بين عامي 1998 و2017م، توفي نحو 166 ألف شخص من موجات الحر. ومات 70 ألفاً من هؤلاء في أوروبا سنة 2003م وحدها. ومن دون أن يصل الخطر إلى الموت، تتسبَّب الحرارة العالية بانخفاض الأداء المعرفي لدى الشبان البالغين في المباني غير المكيّفة. فقد بيّنت دراسة أجرتها "كليّة ت. هـ. تشان" للصحة العامة في جامعة هارفرد، نشرتها "بلوس ميديسين" في 10 يوليو 2018م، أن التلاميذ الذين ينامون في مهاجع غير مكيّفة، يقل أداؤهم عن أولئك الذين ينامون في مهاجع مكيّفة. ولتجنّب مخاطر التعرّض للحرارة، يلتفت الناس إلى استخدام التكييف.</p>
|
||||
<p>يتطلّب التكييف كثيراً من الطاقة. فنحو %10 من استهلاك الكهرباء في العالم يُنفَق في تشغيل المكيّفات. وتصل هذه النسبة إلى %50 في المملكة حسب "المركز السعودي لكفاءة الطاقة". أضف إلى ذلك أن معظم البشر في بلدان العالم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظاً بالسكان في العالم. وجاء في تقرير لوكالة الطاقة الدوليّة بعنوان "مستقبل التبريد"، ونُشر في مايو 2018م، أن في أجزاء من أمريكا الجنوبيّة وإفريقيا وآسيا والشرق الأوسط، يعيش 2.8 مليار نسمة، ولا يملك وحدات تكييف سوى %8 من المنازل. في حين الدول المتقدِّمة مثل كوريا الجنوبيّة، واليابان، والولايات المتحدة، فإن %89 من المنازل تملك مكيفات، وفي الصين %60 من البيوت تملكها أيضاً.</p>
|
||||
<p>ولكن مع تنامي الدخل في بلدان الاقتصاد الصاعد، يتوقّع أن تزداد المنازل التي تقتني مكيّفاً. وبحسب مقالة نُشرت في صحيفة "نيويورك تايمز"، في 15 مايو 2018م، سيرتفع عدد المكيّفات في العالم من نحو 1.6 مليار حالياً، إلى 5.6 مليارات عام 2050م، طبقاً لمعدَّلات النمو الاقتصادي.</p>
|
||||
<p>ومع الافتقار إلى الابتكار وتطوير النظم لفرض معايير الجدوى الأعلى، فسيتضاعف استهلاك الطاقة لتشغيل المكيّفات ثلاثة أضعاف. وسينتج من ذلك طلب إضافي للطاقة يساوي مجموع إنتاج الطاقة في الصين حالياً. فمبيعات المكيّفات ترتفع اليوم في البلدان النامية، لكن فعاليّة هذه الوحدات مشكوك فيها. فمثلاً، أوسع وحدات التكييف انتشاراً في بعض الأسواق الآسيوية تتطلّب ضعفي ما تتطلّبه وحدات تكييف أجدى. والمكيّفات التي تباع في اليابان والاتحاد الأوروبي أجدى بنسبة %25 عادة، من تلك التي تباع في الصين والولايات المتحدة.</p>
|
||||
<p>وبصرف النظر عن كثير من الطاقة التي يحتاج إليها المكيّف، فإنه يبث مقادير وفيرة من غازات الدفيئة نفسها. وطبقاً لموقع تكييف الهواء (airconditioning.com)، فإن المبرِّدات في معظم المكيّفات مثل مواد مركبات الكربون الكلورية فلورية أو مواد هيدروفلوروولفينات، ومركبات ثاني أكسيد الكربون الهيدروكلورية فلورية، أسوأ بكثير للبيئة من ثاني أكسيد الكربون، لأنها تحتبس من الحرارة مقادير أكبر حين تتسرّب إلى الجو.</p>
|
||||
<p>وبالإضافة إلى ظاهرة الدفيئة، فهذه الغازات تسهم أيضاً بالإضرار بطبقة الأوزون. ويمكن لهذه المواد الكيميائية أن تتسرّب خلال عملية التصنيع أو التصليح. ويعرف كل من يملك في منزله مكيّفاً كم تتكرر أعطال هذه الأجهزة. ثم إن المكيف يُرمَى حين يتعطّل نهائياً ولا يعود قابلاً للإصلاح، والمواد المبرِّدة فيه ستتسرّب على الأرجح لتلوث الهواء.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="../cheatsheet/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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -1292,13 +1292,13 @@
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
|
||||
<p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
|
||||
<p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
|
||||
<p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
|
||||
<p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1540,34 +1540,33 @@
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
<a class="nav-link active" href="#scrollspyHeading1">First</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
<a class="nav-link" href="#scrollspyHeading2">Second</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#one">one</a></li>
|
||||
<li><a class="dropdown-item" href="#two">two</a></li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#three">three</a></li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
|
||||
<h4 id="fat">@fat</h4>
|
||||
<p>Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
|
||||
<h4 id="mdo">@mdo</h4>
|
||||
<p>Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.</p>
|
||||
<h4 id="one">one</h4>
|
||||
<p>Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
|
||||
<h4 id="two">two</h4>
|
||||
<p>Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.</p>
|
||||
<h4 id="three">three</h4>
|
||||
<p>Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.</p>
|
||||
<p>And some more placeholder content, for good measure.</p>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading3">Third heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading4">Fourth heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading5">Fifth heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1720,10 +1719,9 @@
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Placeholder text for this demonstration of a vertically centered modal dialog.</p>
|
||||
<p>In this case, the dialog has a bit more content, just to show how vertical centering can be added to a scrollable modal.</p>
|
||||
<p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p>
|
||||
<p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p>
|
||||
<p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<p>This content should appear at the bottom after you scroll.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
@ -1740,14 +1738,7 @@
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>What follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.</p>
|
||||
<p>Last Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.</p>
|
||||
<p>Don't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.</p>
|
||||
<p>Yo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.</p>
|
||||
<p>I'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.</p>
|
||||
<p>Growing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.</p>
|
||||
<p>Make it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.</p>
|
||||
<p>We can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.</p>
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
@ -1757,7 +1748,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="cheatsheet.js"></script>
|
||||
</body>
|
||||
|
||||
@ -5,15 +5,15 @@
|
||||
<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.82.0">
|
||||
<title>مثال الخروج · Bootstrap v5.0</title>
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<title>مثال إتمام الشراء · Bootstrap v5.0</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout-rtl/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-trxYGD5BY4TyBTvU5H23FalSCYwpLA0vWEvXXGm5eytyztxb+97WzzY+IWDOSbav" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-jHiSqEim4+W1UCvv8kTcMbtCZlRF8MxbgKdfpvncia8gdN1UImBnhTpKtufREzv7" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -51,14 +51,14 @@
|
||||
<main>
|
||||
<div class="py-5 text-center">
|
||||
<img class="d-block mx-auto mb-4" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
||||
<h2>نموذج الخروج</h2>
|
||||
<h2>نموذج إتمام الشراء</h2>
|
||||
<p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-5 col-lg-4 order-md-last">
|
||||
<h4 class="d-flex justify-content-between align-items-center mb-3">
|
||||
<span class="text-muted">عربتك</span>
|
||||
<span class="text-muted">عربة التسوق</span>
|
||||
<span class="badge bg-secondary rounded-pill">3</span>
|
||||
</h4>
|
||||
<ul class="list-group mb-3">
|
||||
@ -99,27 +99,27 @@
|
||||
<form class="card p-2">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="رمز ترويجي">
|
||||
<button type="submit" class="btn btn-secondary">افتدى</button>
|
||||
<button type="submit" class="btn btn-secondary">تحقق</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-7 col-lg-8">
|
||||
<h4 class="mb-3">عنوان وصول الفواتير</h4>
|
||||
<h4 class="mb-3">عنوان الفوترة</h4>
|
||||
<form class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-6">
|
||||
<label for="firstName" class="form-label">الاسم الاول</label>
|
||||
<label for="firstName" class="form-label">الاسم الأول</label>
|
||||
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
|
||||
<div class="invalid-feedback">
|
||||
مطلوب الاسم الأول صالح.
|
||||
يرجى إدخال اسم أول صحيح.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<label for="lastName" class="form-label">الكنية</label>
|
||||
<label for="lastName" class="form-label">اسم العائلة</label>
|
||||
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
|
||||
<div class="invalid-feedback">
|
||||
مطلوب اسم أخير صالح.
|
||||
يرجى إدخال اسم عائلة صحيح.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -135,45 +135,45 @@
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="email" class="form-label"><span class="text-muted">(اختياري)</span>البريد الإلكتروني </label>
|
||||
<label for="email" class="form-label">البريد الإلكتروني <span class="text-muted">(اختياري)</span></label>
|
||||
<input type="email" class="form-control" id="email" placeholder="you@example.com">
|
||||
<div class="invalid-feedback">
|
||||
يرجى إدخال عنوان بريد إلكتروني صالح لتحديثات الشحن.
|
||||
يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="address" class="form-label">عنوان</label>
|
||||
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
|
||||
<label for="address" class="form-label">العنوان</label>
|
||||
<input type="text" class="form-control" id="address" placeholder="1234 الشارع الأول" required>
|
||||
<div class="invalid-feedback">
|
||||
يرجى إدخال عنوان الشحن الخاص بك.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="address2" class="form-label"><span class="text-muted">(اختياري)</span>عنوان 2 </label>
|
||||
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
|
||||
<label for="address2" class="form-label">عنوان 2 <span class="text-muted">(اختياري)</span></label>
|
||||
<input type="text" class="form-control" id="address2" placeholder="شقة 24">
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<label for="country" class="form-label">بلد</label>
|
||||
<label for="country" class="form-label">البلد</label>
|
||||
<select class="form-select" id="country" required>
|
||||
<option value="">أختر...</option>
|
||||
<option value="">اختر...</option>
|
||||
<option>الولايات المتحدة الأمريكية</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
يرجى تحديد بلد صالح.
|
||||
يرجى اختيار بلد صحيح.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label for="state" class="form-label">حالة</label>
|
||||
<label for="state" class="form-label">المنطقة</label>
|
||||
<select class="form-select" id="state" required>
|
||||
<option value="">أختر...</option>
|
||||
<option value="">اختر...</option>
|
||||
<option>كاليفورنيا</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
يرجى تقديم حالة صالحة.
|
||||
يرجى اختيار اسم منطقة صحيح.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -190,7 +190,7 @@
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="same-address">
|
||||
<label class="form-check-label" for="same-address">عنوان الشحن هو نفس عنوان الفاتورة الخاص بي</label>
|
||||
<label class="form-check-label" for="same-address">عنوان الشحن هو نفس عنوان الفوترة الخاص بي</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
@ -200,16 +200,16 @@
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h4 class="mb-3">دفع</h4>
|
||||
<h4 class="mb-3">طريقة الدفع</h4>
|
||||
|
||||
<div class="my-3">
|
||||
<div class="form-check">
|
||||
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
|
||||
<label class="form-check-label" for="credit">بطاقة الائتمان</label>
|
||||
<label class="form-check-label" for="credit">بطاقة ائتمان</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
|
||||
<label class="form-check-label" for="debit">بطاقة ائتمان</label>
|
||||
<input id="cash" name="paymentMethod" type="radio" class="form-check-input" required>
|
||||
<label class="form-check-label" for="cash">نقد</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
|
||||
@ -228,7 +228,7 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="cc-number" class="form-label">رقم بطاقه الائتمان</label>
|
||||
<label for="cc-number" class="form-label">رقم البطاقة</label>
|
||||
<input type="text" class="form-control" id="cc-number" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
رقم بطاقة الائتمان مطلوب
|
||||
@ -236,7 +236,7 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="cc-expiration" class="form-label">انتهاء الصلاحية</label>
|
||||
<label for="cc-expiration" class="form-label">تاريخ انتهاء الصلاحية</label>
|
||||
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
تاريخ انتهاء الصلاحية مطلوب
|
||||
@ -244,7 +244,7 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="cc-cvv" class="form-label">CVV</label>
|
||||
<label for="cc-cvv" class="form-label">الرمز الثلاثي (CVV)</label>
|
||||
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
رمز الحماية مطلوب
|
||||
@ -254,7 +254,7 @@
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<button class="w-100 btn btn-primary btn-lg" type="submit">الاستمرار في الخروج</button>
|
||||
<button class="w-100 btn btn-primary btn-lg" type="submit">الاستمرار بالدفع</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -262,15 +262,15 @@
|
||||
<footer class="my-5 pt-5 text-muted text-center text-small">
|
||||
<p class="mb-1">© 2021-2017 اسم الشركة</p>
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><a href="#">خصوصية</a></li>
|
||||
<li class="list-inline-item"><a href="#">شروط</a></li>
|
||||
<li class="list-inline-item"><a href="#">الدعم</a></li>
|
||||
<li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>
|
||||
<li class="list-inline-item"><a href="#">اتفاقية الاستخدام</a></li>
|
||||
<li class="list-inline-item"><a href="#">الدعم الفني</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" 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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" 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-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" 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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<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-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
'الثلاثاء',
|
||||
'الأربعاء',
|
||||
'الخميس',
|
||||
'يوم الجمعة',
|
||||
'يوم السبت'
|
||||
'الجمعة',
|
||||
'السبت'
|
||||
],
|
||||
datasets: [{
|
||||
data: [
|
||||
|
||||
@ -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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<title>قالب لوحة القيادة · Bootstrap v5.0</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/dashboard-rtl/">
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-trxYGD5BY4TyBTvU5H23FalSCYwpLA0vWEvXXGm5eytyztxb+97WzzY+IWDOSbav" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-jHiSqEim4+W1UCvv8kTcMbtCZlRF8MxbgKdfpvncia8gdN1UImBnhTpKtufREzv7" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -49,13 +49,13 @@
|
||||
|
||||
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
||||
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">اسم الشركة</a>
|
||||
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
|
||||
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث">
|
||||
<ul class="navbar-nav px-3">
|
||||
<li class="nav-item text-nowrap">
|
||||
<a class="nav-link" href="#">خروج</a>
|
||||
<a class="nav-link" href="#">تسجيل الخروج</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
@ -74,13 +74,13 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="file"></span>
|
||||
أوامر
|
||||
الطلبات
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="shopping-cart"></span>
|
||||
منتجات
|
||||
المنتجات
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
@ -98,14 +98,14 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="layers"></span>
|
||||
التكامل
|
||||
التكاملات
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
|
||||
<span>التقارير المحفوظة</span>
|
||||
<a class="link-secondary" href="#" aria-label="أضف تقرير جديد">
|
||||
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
|
||||
<span data-feather="plus-circle"></span>
|
||||
</a>
|
||||
</h6>
|
||||
@ -125,13 +125,13 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="file-text"></span>
|
||||
ارتباط اجتماعي
|
||||
التفاعل الإجتماعي
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="file-text"></span>
|
||||
بيع نهاية العام
|
||||
مبيعات نهاية العام
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -143,12 +143,12 @@
|
||||
<h1 class="h2">لوحة القيادة</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group me-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">شارك</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
|
||||
<span data-feather="calendar"></span>
|
||||
هذا الاسبوع
|
||||
هذا الأسبوع
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -161,124 +161,124 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>العنوان</th>
|
||||
<th>العنوان</th>
|
||||
<th>العنوان</th>
|
||||
<th>العنوان</th>
|
||||
<th>عنوان</th>
|
||||
<th>عنوان</th>
|
||||
<th>عنوان</th>
|
||||
<th>عنوان</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1,001</td>
|
||||
<td>أم.</td>
|
||||
<td>و.</td>
|
||||
<td>ثمّة.</td>
|
||||
<td>ويتّفق.</td>
|
||||
<td>بيانات</td>
|
||||
<td>عشوائية</td>
|
||||
<td>تثري</td>
|
||||
<td>الجدول</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,002</td>
|
||||
<td>أضف.</td>
|
||||
<td>ما.</td>
|
||||
<td>من.</td>
|
||||
<td>أم.</td>
|
||||
<td>تثري</td>
|
||||
<td>مبهة</td>
|
||||
<td>تصميم</td>
|
||||
<td>تنسيق</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>دار.</td>
|
||||
<td>ذلك.</td>
|
||||
<td>يبق.</td>
|
||||
<td>المتحدة.</td>
|
||||
<td>عشوائية</td>
|
||||
<td>غنية</td>
|
||||
<td>قيمة</td>
|
||||
<td>مفيدة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>فكانت.</td>
|
||||
<td>الخارجية.</td>
|
||||
<td>الآخر.</td>
|
||||
<td>حتى.</td>
|
||||
<td>معلومات</td>
|
||||
<td>تثري</td>
|
||||
<td>توضيحية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,004</td>
|
||||
<td>أم.</td>
|
||||
<td>و.</td>
|
||||
<td>ثمّة.</td>
|
||||
<td>ويتّفق.</td>
|
||||
<td>الجدول</td>
|
||||
<td>بيانات</td>
|
||||
<td>تنسيق</td>
|
||||
<td>قيمة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,005</td>
|
||||
<td>أضف.</td>
|
||||
<td>ما.</td>
|
||||
<td>من.</td>
|
||||
<td>أم.</td>
|
||||
<td>قيمة</td>
|
||||
<td>مبهة</td>
|
||||
<td>الجدول</td>
|
||||
<td>تثري</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,006</td>
|
||||
<td>دار.</td>
|
||||
<td>ذلك.</td>
|
||||
<td>يبق.</td>
|
||||
<td>المتحدة.</td>
|
||||
<td>قيمة</td>
|
||||
<td>توضيحية</td>
|
||||
<td>غنية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,007</td>
|
||||
<td>أم.</td>
|
||||
<td>و.</td>
|
||||
<td>ثمّة.</td>
|
||||
<td>ويتّفق.</td>
|
||||
<td>تثري</td>
|
||||
<td>مفيدة</td>
|
||||
<td>معلومات</td>
|
||||
<td>مبهة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,008</td>
|
||||
<td>أضف.</td>
|
||||
<td>ما.</td>
|
||||
<td>من.</td>
|
||||
<td>أم.</td>
|
||||
<td>بيانات</td>
|
||||
<td>عشوائية</td>
|
||||
<td>تثري</td>
|
||||
<td>الجدول</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,009</td>
|
||||
<td>دار.</td>
|
||||
<td>ذلك.</td>
|
||||
<td>يبق.</td>
|
||||
<td>المتحدة.</td>
|
||||
<td>تثري</td>
|
||||
<td>مبهة</td>
|
||||
<td>تصميم</td>
|
||||
<td>تنسيق</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,010</td>
|
||||
<td>أم.</td>
|
||||
<td>و.</td>
|
||||
<td>ثمّة.</td>
|
||||
<td>ويتّفق.</td>
|
||||
<td>عشوائية</td>
|
||||
<td>غنية</td>
|
||||
<td>قيمة</td>
|
||||
<td>مفيدة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,011</td>
|
||||
<td>أضف.</td>
|
||||
<td>ما.</td>
|
||||
<td>من.</td>
|
||||
<td>أم.</td>
|
||||
<td>معلومات</td>
|
||||
<td>تثري</td>
|
||||
<td>توضيحية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,012</td>
|
||||
<td>دار.</td>
|
||||
<td>ذلك.</td>
|
||||
<td>يبق.</td>
|
||||
<td>المتحدة.</td>
|
||||
<td>الجدول</td>
|
||||
<td>تثري</td>
|
||||
<td>تنسيق</td>
|
||||
<td>قيمة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,013</td>
|
||||
<td>أم.</td>
|
||||
<td>و.</td>
|
||||
<td>ثمّة.</td>
|
||||
<td>ويتّفق.</td>
|
||||
<td>قيمة</td>
|
||||
<td>مبهة</td>
|
||||
<td>الجدول</td>
|
||||
<td>تصميم</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,014</td>
|
||||
<td>أضف.</td>
|
||||
<td>ما.</td>
|
||||
<td>من.</td>
|
||||
<td>أم.</td>
|
||||
<td>قيمة</td>
|
||||
<td>توضيحية</td>
|
||||
<td>غنية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,015</td>
|
||||
<td>دار.</td>
|
||||
<td>ذلك.</td>
|
||||
<td>يبق.</td>
|
||||
<td>المتحدة.</td>
|
||||
<td>بيانات</td>
|
||||
<td>مفيدة</td>
|
||||
<td>معلومات</td>
|
||||
<td>الجدول</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -288,7 +288,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js" integrity="sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI" crossorigin="anonymous"></script><script src="dashboard.js"></script>
|
||||
</body>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user