mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-23 15:52:21 +01:00
Add v4.5.1 docs (#31409)
This commit is contained in:
XhmikosR
GitHub
parent
3f76a6fcd2
commit
891f87bb54
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/brand/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -477,7 +478,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/about/brand.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Brand guidelines</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for Bootstrap’s logo and brand usage guidelines.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -557,6 +561,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/license/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,7 +469,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/about/license.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">License FAQs</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Commonly asked questions about Bootstrap’s open source license.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -506,13 +510,13 @@
|
||||
<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/v4.5.0/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/v4.5.1/LICENSE">in the project repository</a> for more information.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/overview/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,7 +469,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/about/overview.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">About</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -488,13 +492,13 @@
|
||||
|
||||
<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/v4.5.0/.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/v4.5.1/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/team/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,7 +469,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/about/team.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Team</h1>
|
||||
</div>
|
||||
<p class="bd-lead">An overview of the founding team and core contributors to Bootstrap.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -546,15 +550,22 @@
|
||||
</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 mr-2" loading="lazy" />
|
||||
<span>
|
||||
<strong>Gaël Poupard</strong> @ffoodd
|
||||
</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/v4.5.0/.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/v4.5.1/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/translations/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,7 +469,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/about/translations.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Translations</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Links to community-translated Bootstrap documentation sites.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -497,6 +501,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
2
docs/4.5/assets/css/docs.min.css
vendored
2
docs/4.5/assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/browser-bugs/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,7 +469,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/browser-bugs.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Wall of browser bugs</h1>
|
||||
</div>
|
||||
<p class="bd-lead"></p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -521,7 +525,7 @@
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Native browser tooltip for <code class="highlighter-rouge">title</code> shows on first keyboard focus (in addition to custom tooltip component)</p>
|
||||
<td><p>Native browser tooltip for <code class="language-plaintext highlighter-rouge">title</code> shows on first keyboard focus (in addition to custom tooltip component)</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6793560/">Edge issue #6793560</a>
|
||||
@ -536,7 +540,7 @@
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Hovered element still remains in <code class="highlighter-rouge">:hover</code> state after scrolling away.</p>
|
||||
<td><p>Hovered element still remains in <code class="language-plaintext highlighter-rouge">:hover</code> state after scrolling away.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5381673/">Edge issue #5381673</a>
|
||||
@ -551,7 +555,7 @@
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>CSS <code class="highlighter-rouge">border-radius</code> sometimes causes lines of bleed-through of the <code class="highlighter-rouge">background-color</code> of the parent element.</p>
|
||||
<td><p>CSS <code class="language-plaintext highlighter-rouge">border-radius</code> sometimes causes lines of bleed-through of the <code class="language-plaintext highlighter-rouge">background-color</code> of the parent element.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3342037/">Edge issue #3342037</a>
|
||||
@ -566,7 +570,7 @@
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">background</code> of <code class="highlighter-rouge"><tr></code> is only applied to first child cell instead of all cells in the row</p>
|
||||
<td><p><code class="language-plaintext highlighter-rouge">background</code> of <code class="language-plaintext highlighter-rouge"><tr></code> is only applied to first child cell instead of all cells in the row</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5865620/">Edge issue #5865620</a>
|
||||
@ -596,7 +600,7 @@
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Hovering over descendant SVG element fires <code class="highlighter-rouge">mouseleave</code> event at ancestor</p>
|
||||
<td><p>Hovering over descendant SVG element fires <code class="language-plaintext highlighter-rouge">mouseleave</code> event at ancestor</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7787318/">Edge issue #7787318</a>
|
||||
@ -611,7 +615,7 @@
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Active <code class="highlighter-rouge">position: fixed;</code> <code class="highlighter-rouge"><button></code> flickers when scrolling</p>
|
||||
<td><p>Active <code class="language-plaintext highlighter-rouge">position: fixed;</code> <code class="language-plaintext highlighter-rouge"><button></code> flickers when scrolling</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8770398/">Edge issue #8770398</a>
|
||||
@ -626,7 +630,7 @@
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">.table-bordered</code> with an empty <code class="highlighter-rouge"><tbody></code> is missing borders.</p>
|
||||
<td><p><code class="language-plaintext highlighter-rouge">.table-bordered</code> with an empty <code class="language-plaintext highlighter-rouge"><tbody></code> is missing borders.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a>
|
||||
@ -656,7 +660,7 @@
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">focus</code> events should not be fired at the <code class="highlighter-rouge">document</code> object</p>
|
||||
<td><p><code class="language-plaintext highlighter-rouge">focus</code> events should not be fired at the <code class="language-plaintext highlighter-rouge">document</code> object</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1228802">Mozilla bug #1228802</a>
|
||||
@ -686,7 +690,7 @@
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>Mouse sometimes not within element for purposes of <code class="highlighter-rouge">mouseenter</code>/<code class="highlighter-rouge">mouseleave</code> when it’s within SVG elements</p>
|
||||
<td><p>Mouse sometimes not within element for purposes of <code class="language-plaintext highlighter-rouge">mouseenter</code>/<code class="language-plaintext highlighter-rouge">mouseleave</code> when it’s within SVG elements</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=577785">Mozilla bug #577785</a>
|
||||
@ -716,7 +720,7 @@
|
||||
<tr>
|
||||
<td>Firefox (Windows)
|
||||
</td>
|
||||
<td><p>Right border of <code class="highlighter-rouge"><select></code> menu is sometimes missing when screen is set to uncommon resolution</p>
|
||||
<td><p>Right border of <code class="language-plaintext highlighter-rouge"><select></code> menu is sometimes missing when screen is set to uncommon resolution</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=545685">Mozilla bug #545685</a>
|
||||
@ -746,7 +750,7 @@
|
||||
<tr>
|
||||
<td>Chrome (macOS)
|
||||
</td>
|
||||
<td><p>Clicking above <code class="highlighter-rouge"><input type="number"></code> increment button flashes the decrement button.</p>
|
||||
<td><p>Clicking above <code class="language-plaintext highlighter-rouge"><input type="number"></code> increment button flashes the decrement button.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=419108">Chromium issue #419108</a>
|
||||
@ -782,7 +786,7 @@
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">table-cell</code> borders not overlapping despite <code class="highlighter-rouge">margin-right: -1px</code></p>
|
||||
<td><p><code class="language-plaintext highlighter-rouge">table-cell</code> borders not overlapping despite <code class="language-plaintext highlighter-rouge">margin-right: -1px</code></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=749848">Chromium issue #749848</a>
|
||||
@ -800,7 +804,7 @@
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Don’t make <code class="highlighter-rouge">:hover</code> sticky on touch-friendly webpages</p>
|
||||
<td><p>Don’t make <code class="language-plaintext highlighter-rouge">:hover</code> sticky on touch-friendly webpages</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=370155">Chromium issue #370155</a>
|
||||
@ -815,7 +819,7 @@
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">position: absolute</code> element that’s wider than its column is incorrectly clipped to column boundary</p>
|
||||
<td><p><code class="language-plaintext highlighter-rouge">position: absolute</code> element that’s wider than its column is incorrectly clipped to column boundary</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=269061">Chromium issue #269061</a>
|
||||
@ -830,7 +834,7 @@
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Significant performance hit for dynamic SVGs with text depending on the number of fonts in <code class="highlighter-rouge">font-family</code>.</p>
|
||||
<td><p>Significant performance hit for dynamic SVGs with text depending on the number of fonts in <code class="language-plaintext highlighter-rouge">font-family</code>.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=781344">Chromium issue #781344</a>
|
||||
@ -845,7 +849,7 @@
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">rem</code> units in media queries should be calculated using <code class="highlighter-rouge">font-size: initial</code>, not the root element’s <code class="highlighter-rouge">font-size</code></p>
|
||||
<td><p><code class="language-plaintext highlighter-rouge">rem</code> units in media queries should be calculated using <code class="language-plaintext highlighter-rouge">font-size: initial</code>, not the root element’s <code class="language-plaintext highlighter-rouge">font-size</code></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=156684">WebKit bug #156684</a>
|
||||
@ -875,7 +879,7 @@
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p>CSS <code class="highlighter-rouge">min-width</code> and <code class="highlighter-rouge">max-width</code> media features should not round fractional pixel</p>
|
||||
<td><p>CSS <code class="language-plaintext highlighter-rouge">min-width</code> and <code class="language-plaintext highlighter-rouge">max-width</code> media features should not round fractional pixel</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=178261">WebKit bug #178261</a>
|
||||
@ -890,7 +894,7 @@
|
||||
<tr>
|
||||
<td>Safari (macOS)
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">px</code>, <code class="highlighter-rouge">em</code>, and <code class="highlighter-rouge">rem</code> should all behave the same in media queries when page zoom is applied</p>
|
||||
<td><p><code class="language-plaintext highlighter-rouge">px</code>, <code class="language-plaintext highlighter-rouge">em</code>, and <code class="language-plaintext highlighter-rouge">rem</code> should all behave the same in media queries when page zoom is applied</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=156687">WebKit bug #156687</a>
|
||||
@ -905,7 +909,7 @@
|
||||
<tr>
|
||||
<td>Safari (macOS)
|
||||
</td>
|
||||
<td><p>Weird button behavior with some <code class="highlighter-rouge"><input type="number"></code> elements.</p>
|
||||
<td><p>Weird button behavior with some <code class="language-plaintext highlighter-rouge"><input type="number"></code> elements.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
|
||||
@ -929,7 +933,7 @@
|
||||
<tr>
|
||||
<td>Safari (macOS)
|
||||
</td>
|
||||
<td><p>Small font size when printing webpage with fixed-width <code class="highlighter-rouge">.container</code>.</p>
|
||||
<td><p>Small font size when printing webpage with fixed-width <code class="language-plaintext highlighter-rouge">.container</code>.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
|
||||
@ -947,7 +951,7 @@
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">transform: translate3d(0,0,0);</code> rendering bug.</p>
|
||||
<td><p><code class="language-plaintext highlighter-rouge">transform: translate3d(0,0,0);</code> rendering bug.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
|
||||
@ -983,7 +987,7 @@
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Can’t move cursor to start of text after entering long string of text into <code class="highlighter-rouge"><input type="text"></code></p>
|
||||
<td><p>Can’t move cursor to start of text after entering long string of text into <code class="language-plaintext highlighter-rouge"><input type="text"></code></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
|
||||
@ -1001,7 +1005,7 @@
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">display: block</code> causes text of temporal <code class="highlighter-rouge"><input></code>s to become vertically misaligned</p>
|
||||
<td><p><code class="language-plaintext highlighter-rouge">display: block</code> causes text of temporal <code class="language-plaintext highlighter-rouge"><input></code>s to become vertically misaligned</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
|
||||
@ -1022,7 +1026,7 @@
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Tapping on <code class="highlighter-rouge"><body></code> doesn’t fire <code class="highlighter-rouge">click</code> events</p>
|
||||
<td><p>Tapping on <code class="language-plaintext highlighter-rouge"><body></code> doesn’t fire <code class="language-plaintext highlighter-rouge">click</code> events</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=151933">WebKit bug #151933</a>
|
||||
@ -1037,7 +1041,7 @@
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">position:fixed</code> is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari</p>
|
||||
<td><p><code class="language-plaintext highlighter-rouge">position:fixed</code> is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=153056">WebKit bug #153056</a>
|
||||
@ -1052,7 +1056,7 @@
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Tapping into an <code class="highlighter-rouge"><input></code> within a <code class="highlighter-rouge">position:fixed</code> element scrolls to the top of the page</p>
|
||||
<td><p>Tapping into an <code class="language-plaintext highlighter-rouge"><input></code> within a <code class="language-plaintext highlighter-rouge">position:fixed</code> element scrolls to the top of the page</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
|
||||
@ -1070,7 +1074,7 @@
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge"><body></code> with <code class="highlighter-rouge">overflow:hidden</code> CSS is scrollable on iOS</p>
|
||||
<td><p><code class="language-plaintext highlighter-rouge"><body></code> with <code class="language-plaintext highlighter-rouge">overflow:hidden</code> CSS is scrollable on iOS</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a>
|
||||
@ -1085,7 +1089,7 @@
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Scroll gesture in text field in <code class="highlighter-rouge">position:fixed</code> element sometimes scrolls <code class="highlighter-rouge"><body></code> instead of scrollable ancestor</p>
|
||||
<td><p>Scroll gesture in text field in <code class="language-plaintext highlighter-rouge">position:fixed</code> element sometimes scrolls <code class="language-plaintext highlighter-rouge"><body></code> instead of scrollable ancestor</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a>
|
||||
@ -1100,7 +1104,7 @@
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Modal with <code class="highlighter-rouge">-webkit-overflow-scrolling: touch</code> doesn’t become scrollable after added text makes it taller</p>
|
||||
<td><p>Modal with <code class="language-plaintext highlighter-rouge">-webkit-overflow-scrolling: touch</code> doesn’t become scrollable after added text makes it taller</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=158342">WebKit bug #158342</a>
|
||||
@ -1115,7 +1119,7 @@
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Don’t make <code class="highlighter-rouge">:hover</code> sticky on touch-friendly webpages</p>
|
||||
<td><p>Don’t make <code class="language-plaintext highlighter-rouge">:hover</code> sticky on touch-friendly webpages</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=158517">WebKit bug #158517</a>
|
||||
@ -1130,7 +1134,7 @@
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Element which is <code class="highlighter-rouge">position:fixed</code> disappears after opening a <code class="highlighter-rouge"><select></code> menu</p>
|
||||
<td><p>Element which is <code class="language-plaintext highlighter-rouge">position:fixed</code> disappears after opening a <code class="language-plaintext highlighter-rouge"><select></code> menu</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=162362">WebKit bug #162362</a>
|
||||
@ -1145,7 +1149,7 @@
|
||||
<tr>
|
||||
<td>Safari (iPad Pro)
|
||||
</td>
|
||||
<td><p>Rendering of descendants of <code class="highlighter-rouge">position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p>
|
||||
<td><p>Rendering of descendants of <code class="language-plaintext highlighter-rouge">position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
|
||||
@ -1198,7 +1202,7 @@
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="language-plaintext highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/12299532">Edge UserVoice idea #12299532</a>
|
||||
@ -1213,7 +1217,7 @@
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="highlighter-rouge"><dialog></code> element</a></p>
|
||||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="language-plaintext highlighter-rouge"><dialog></code> element</a></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6508895">Edge UserVoice idea #6508895</a>
|
||||
@ -1228,7 +1232,7 @@
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event"><code class="highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event"><code class="language-plaintext highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/15939898">Edge UserVoice idea #15939898</a>
|
||||
@ -1243,7 +1247,7 @@
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class="highlighter-rouge">of <selector-list></code> clause</a> of the <code class="highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||||
<td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class="language-plaintext highlighter-rouge">of <selector-list></code> clause</a> of the <code class="language-plaintext highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/15944476">Edge UserVoice idea #15944476</a>
|
||||
@ -1258,7 +1262,7 @@
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class="highlighter-rouge">of <selector-list></code> clause</a> of the <code class="highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||||
<td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class="language-plaintext highlighter-rouge">of <selector-list></code> clause</a> of the <code class="language-plaintext highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=854148">Mozilla bug #854148</a>
|
||||
@ -1273,7 +1277,7 @@
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="highlighter-rouge"><dialog></code> element</a></p>
|
||||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="language-plaintext highlighter-rouge"><dialog></code> element</a></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=840640">Mozilla bug #840640</a>
|
||||
@ -1303,7 +1307,7 @@
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event"><code class="highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event"><code class="language-plaintext highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=642487">Chromium issue #642487</a>
|
||||
@ -1318,7 +1322,7 @@
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class="highlighter-rouge">of <selector-list></code> clause</a> of the <code class="highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||||
<td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class="language-plaintext highlighter-rouge">of <selector-list></code> clause</a> of the <code class="language-plaintext highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=304163">Chromium issue #304163</a>
|
||||
@ -1333,7 +1337,7 @@
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="language-plaintext highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=576815">Chromium issue #576815</a>
|
||||
@ -1348,7 +1352,7 @@
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event"><code class="highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event"><code class="language-plaintext highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=161535">WebKit bug #161535</a>
|
||||
@ -1363,7 +1367,7 @@
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="language-plaintext highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=64861">WebKit bug #64861</a>
|
||||
@ -1378,7 +1382,7 @@
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="highlighter-rouge"><dialog></code> element</a></p>
|
||||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="language-plaintext highlighter-rouge"><dialog></code> element</a></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=84635">WebKit bug #84635</a>
|
||||
@ -1398,6 +1402,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/alerts/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -487,13 +488,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/alerts.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Alerts</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code class="highlighter-rouge">.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts jQuery plugin</a>.</p>
|
||||
<p>Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code class="language-plaintext highlighter-rouge">.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts jQuery plugin</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -550,12 +554,12 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="language-plaintext highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="link-color">Link color</h3>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
|
||||
<p>Use the <code class="language-plaintext highlighter-rouge">.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -634,10 +638,10 @@
|
||||
|
||||
<ul>
|
||||
<li>Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.</li>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>. The compiled version includes this.</li>
|
||||
<li>Add a dismiss button and the <code class="highlighter-rouge">.alert-dismissible</code> class, which adds extra padding to the right of the alert and positions the <code class="highlighter-rouge">.close</code> button.</li>
|
||||
<li>On the dismiss button, add the <code class="highlighter-rouge">data-dismiss="alert"</code> attribute, which triggers the JavaScript functionality. Be sure to use the <code class="highlighter-rouge"><button></code> element with it for proper behavior across all devices.</li>
|
||||
<li>To animate alerts when dismissing them, be sure to add the <code class="highlighter-rouge">.fade</code> and <code class="highlighter-rouge">.show</code> classes.</li>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="language-plaintext highlighter-rouge">util.js</code></a>. The compiled version includes this.</li>
|
||||
<li>Add a dismiss button and the <code class="language-plaintext highlighter-rouge">.alert-dismissible</code> class, which adds extra padding to the right of the alert and positions the <code class="language-plaintext highlighter-rouge">.close</code> button.</li>
|
||||
<li>On the dismiss button, add the <code class="language-plaintext highlighter-rouge">data-dismiss="alert"</code> attribute, which triggers the JavaScript functionality. Be sure to use the <code class="language-plaintext highlighter-rouge"><button></code> element with it for proper behavior across all devices.</li>
|
||||
<li>To animate alerts when dismissing them, be sure to add the <code class="language-plaintext highlighter-rouge">.fade</code> and <code class="language-plaintext highlighter-rouge">.show</code> classes.</li>
|
||||
</ul>
|
||||
|
||||
<p>You can see this in action with a live demo:</p>
|
||||
@ -665,7 +669,7 @@
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.alert</span><span class="dl">'</span><span class="p">).</span><span class="nx">alert</span><span class="p">()</span></code></pre></figure>
|
||||
|
||||
<p>Or with <code class="highlighter-rouge">data</code> attributes on a button <strong>within the alert</strong>, as demonstrated above:</p>
|
||||
<p>Or with <code class="language-plaintext highlighter-rouge">data</code> attributes on a button <strong>within the alert</strong>, as demonstrated above:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
|
||||
@ -684,15 +688,15 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().alert()</code></td>
|
||||
<td>Makes an alert listen for click events on descendant elements which have the <code class="highlighter-rouge">data-dismiss="alert"</code> attribute. (Not necessary when using the data-api’s auto-initialization.)</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$().alert()</code></td>
|
||||
<td>Makes an alert listen for click events on descendant elements which have the <code class="language-plaintext highlighter-rouge">data-dismiss="alert"</code> attribute. (Not necessary when using the data-api’s auto-initialization.)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().alert('close')</code></td>
|
||||
<td>Closes an alert by removing it from the DOM. If the <code class="highlighter-rouge">.fade</code> and <code class="highlighter-rouge">.show</code> classes are present on the element, the alert will fade out before it is removed.</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$().alert('close')</code></td>
|
||||
<td>Closes an alert by removing it from the DOM. If the <code class="language-plaintext highlighter-rouge">.fade</code> and <code class="language-plaintext highlighter-rouge">.show</code> classes are present on the element, the alert will fade out before it is removed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().alert('dispose')</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$().alert('dispose')</code></td>
|
||||
<td>Destroys an element’s alert.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -713,11 +717,11 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">close.bs.alert</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">close.bs.alert</code></td>
|
||||
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">closed.bs.alert</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">closed.bs.alert</code></td>
|
||||
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -733,6 +737,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/badge/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -477,13 +478,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/badge.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Badges</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code class="highlighter-rouge">em</code> units.</p>
|
||||
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code class="language-plaintext highlighter-rouge">em</code> units.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
|
||||
@ -553,12 +557,12 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="language-plaintext highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="pill-badges">Pill badges</h2>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.badge-pill</code> modifier class to make badges more rounded (with a larger <code class="highlighter-rouge">border-radius</code> and additional horizontal <code class="highlighter-rouge">padding</code>). Useful if you miss the badges from v3.</p>
|
||||
<p>Use the <code class="language-plaintext highlighter-rouge">.badge-pill</code> modifier class to make badges more rounded (with a larger <code class="language-plaintext highlighter-rouge">border-radius</code> and additional horizontal <code class="language-plaintext highlighter-rouge">padding</code>). Useful if you miss the badges from v3.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -582,7 +586,7 @@
|
||||
|
||||
<h2 id="links">Links</h2>
|
||||
|
||||
<p>Using the contextual <code class="highlighter-rouge">.badge-*</code> classes on an <code class="highlighter-rouge"><a></code> element quickly provide <em>actionable</em> badges with hover and focus states.</p>
|
||||
<p>Using the contextual <code class="language-plaintext highlighter-rouge">.badge-*</code> classes on an <code class="language-plaintext highlighter-rouge"><a></code> element quickly provide <em>actionable</em> badges with hover and focus states.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -610,6 +614,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/breadcrumb/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,7 +469,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/breadcrumb.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Breadcrumb</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -519,7 +523,7 @@
|
||||
|
||||
<h2 id="changing-the-separator">Changing the separator</h2>
|
||||
|
||||
<p>Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code class="highlighter-rouge">::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code class="highlighter-rouge">content</code></a>. They can be changed by changing <code class="highlighter-rouge">$breadcrumb-divider</code>. The <a href="https://sass-lang.com/documentation/modules/string#quote">quote</a> function is needed to generate the quotes around a string, so if you want <code class="highlighter-rouge">></code> as separator, you can use this:</p>
|
||||
<p>Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code class="language-plaintext highlighter-rouge">::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code class="language-plaintext highlighter-rouge">content</code></a>. They can be changed by changing <code class="language-plaintext highlighter-rouge">$breadcrumb-divider</code>. The <a href="https://sass-lang.com/documentation/modules/string#quote">quote</a> function is needed to generate the quotes around a string, so if you want <code class="language-plaintext highlighter-rouge">></code> as separator, you can use this:</p>
|
||||
|
||||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$breadcrumb-divider</span><span class="p">:</span> <span class="nf">quote</span><span class="p">(</span><span class="s2">">"</span><span class="p">);</span>
|
||||
</code></pre></div></div>
|
||||
@ -529,14 +533,14 @@
|
||||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$breadcrumb-divider</span><span class="p">:</span> <span class="sx">url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+)</span><span class="p">;</span>
|
||||
</code></pre></div></div>
|
||||
|
||||
<p>The separator can be removed by setting <code class="highlighter-rouge">$breadcrumb-divider</code> to <code class="highlighter-rouge">none</code>:</p>
|
||||
<p>The separator can be removed by setting <code class="language-plaintext highlighter-rouge">$breadcrumb-divider</code> to <code class="language-plaintext highlighter-rouge">none</code>:</p>
|
||||
|
||||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$breadcrumb-divider</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
|
||||
</code></pre></div></div>
|
||||
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
|
||||
<p>Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as <code class="highlighter-rouge">aria-label="breadcrumb"</code> to describe the type of navigation provided in the <code class="highlighter-rouge"><nav></code> element, as well as applying an <code class="highlighter-rouge">aria-current="page"</code> to the last item of the set to indicate that it represents the current page.</p>
|
||||
<p>Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as <code class="language-plaintext highlighter-rouge">aria-label="breadcrumb"</code> to describe the type of navigation provided in the <code class="language-plaintext highlighter-rouge"><nav></code> element, as well as applying an <code class="language-plaintext highlighter-rouge">aria-current="page"</code> to the last item of the set to indicate that it represents the current page.</p>
|
||||
|
||||
<p>For more information, see the <a href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb">WAI-ARIA Authoring Practices for the breadcrumb pattern</a>.</p>
|
||||
|
||||
@ -545,6 +549,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/button-group/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -478,13 +479,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/button-group.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Button group</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="basic-example">Basic example</h2>
|
||||
|
||||
<p>Wrap a series of buttons with <code class="highlighter-rouge">.btn</code> in <code class="highlighter-rouge">.btn-group</code>. Add on optional JavaScript radio and checkbox style behavior with <a href="/docs/4.5/components/buttons/#button-plugin">our buttons plugin</a>.</p>
|
||||
<p>Wrap a series of buttons with <code class="language-plaintext highlighter-rouge">.btn</code> in <code class="language-plaintext highlighter-rouge">.btn-group</code>. Add on optional JavaScript radio and checkbox style behavior with <a href="/docs/4.5/components/buttons/#button-plugin">our buttons plugin</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
@ -500,11 +504,11 @@
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="ensure-correct-role-and-provide-a-label">Ensure correct <code class="highlighter-rouge">role</code> and provide a label</h5>
|
||||
<h5 id="ensure-correct-role-and-provide-a-label">Ensure correct <code class="language-plaintext highlighter-rouge">role</code> and provide a label</h5>
|
||||
|
||||
<p>In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate <code class="highlighter-rouge">role</code> attribute needs to be provided. For button groups, this would be <code class="highlighter-rouge">role="group"</code>, while toolbars should have a <code class="highlighter-rouge">role="toolbar"</code>.</p>
|
||||
<p>In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate <code class="language-plaintext highlighter-rouge">role</code> attribute needs to be provided. For button groups, this would be <code class="language-plaintext highlighter-rouge">role="group"</code>, while toolbars should have a <code class="language-plaintext highlighter-rouge">role="toolbar"</code>.</p>
|
||||
|
||||
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use <code class="highlighter-rouge">aria-label</code>, but alternatives such as <code class="highlighter-rouge">aria-labelledby</code> can also be used.</p>
|
||||
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use <code class="language-plaintext highlighter-rouge">aria-label</code>, but alternatives such as <code class="language-plaintext highlighter-rouge">aria-labelledby</code> can also be used.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="button-toolbar">Button toolbar</h2>
|
||||
@ -611,7 +615,7 @@
|
||||
|
||||
<h2 id="sizing">Sizing</h2>
|
||||
|
||||
<p>Instead of applying button sizing classes to every button in a group, just add <code class="highlighter-rouge">.btn-group-*</code> to each <code class="highlighter-rouge">.btn-group</code>, including each one when nesting multiple groups.</p>
|
||||
<p>Instead of applying button sizing classes to every button in a group, just add <code class="language-plaintext highlighter-rouge">.btn-group-*</code> to each <code class="language-plaintext highlighter-rouge">.btn-group</code>, including each one when nesting multiple groups.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
||||
@ -639,7 +643,7 @@
|
||||
|
||||
<h2 id="nesting">Nesting</h2>
|
||||
|
||||
<p>Place a <code class="highlighter-rouge">.btn-group</code> within another <code class="highlighter-rouge">.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
|
||||
<p>Place a <code class="language-plaintext highlighter-rouge">.btn-group</code> within another <code class="language-plaintext highlighter-rouge">.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
@ -742,6 +746,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/buttons/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -487,7 +488,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/buttons.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Buttons</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -522,18 +526,18 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="language-plaintext highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="disable-text-wrapping">Disable text wrapping</h2>
|
||||
|
||||
<p>If you don’t want the button text to wrap, you can add the <code class="highlighter-rouge">.text-nowrap</code> class to the button. In Sass, you can set <code class="highlighter-rouge">$btn-white-space: nowrap</code> to disable text wrapping for each button.</p>
|
||||
<p>If you don’t want the button text to wrap, you can add the <code class="language-plaintext highlighter-rouge">.text-nowrap</code> class to the button. In Sass, you can set <code class="language-plaintext highlighter-rouge">$btn-white-space: nowrap</code> to disable text wrapping for each button.</p>
|
||||
|
||||
<h2 id="button-tags">Button tags</h2>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.btn</code> classes are designed to be used with the <code class="highlighter-rouge"><button></code> element. However, you can also use these classes on <code class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><input></code> elements (though some browsers may apply a slightly different rendering).</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">.btn</code> classes are designed to be used with the <code class="language-plaintext highlighter-rouge"><button></code> element. However, you can also use these classes on <code class="language-plaintext highlighter-rouge"><a></code> or <code class="language-plaintext highlighter-rouge"><input></code> elements (though some browsers may apply a slightly different rendering).</p>
|
||||
|
||||
<p>When using button classes on <code class="highlighter-rouge"><a></code> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a <code class="highlighter-rouge">role="button"</code> to appropriately convey their purpose to assistive technologies such as screen readers.</p>
|
||||
<p>When using button classes on <code class="language-plaintext highlighter-rouge"><a></code> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a <code class="language-plaintext highlighter-rouge">role="button"</code> to appropriately convey their purpose to assistive technologies such as screen readers.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<a class="btn btn-primary" href="#" role="button">Link</a>
|
||||
@ -550,7 +554,7 @@
|
||||
|
||||
<h2 id="outline-buttons">Outline buttons</h2>
|
||||
|
||||
<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code class="highlighter-rouge">.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
|
||||
<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code class="language-plaintext highlighter-rouge">.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -574,7 +578,7 @@
|
||||
|
||||
<h2 id="sizes">Sizes</h2>
|
||||
|
||||
<p>Fancy larger or smaller buttons? Add <code class="highlighter-rouge">.btn-lg</code> or <code class="highlighter-rouge">.btn-sm</code> for additional sizes.</p>
|
||||
<p>Fancy larger or smaller buttons? Add <code class="language-plaintext highlighter-rouge">.btn-lg</code> or <code class="language-plaintext highlighter-rouge">.btn-sm</code> for additional sizes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
@ -590,7 +594,7 @@
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<p>Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">.btn-block</code>.</p>
|
||||
<p>Create block level buttons—those that span the full width of a parent—by adding <code class="language-plaintext highlighter-rouge">.btn-block</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
@ -601,7 +605,7 @@
|
||||
|
||||
<h2 id="active-state">Active state</h2>
|
||||
|
||||
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. <strong>There’s no need to add a class to <code class="highlighter-rouge"><button></code>s as they use a pseudo-class</strong>. However, you can still force the same active appearance with <code class="highlighter-rouge">.active</code> (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.</p>
|
||||
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. <strong>There’s no need to add a class to <code class="language-plaintext highlighter-rouge"><button></code>s as they use a pseudo-class</strong>. However, you can still force the same active appearance with <code class="language-plaintext highlighter-rouge">.active</code> (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
|
||||
@ -612,7 +616,7 @@
|
||||
|
||||
<h2 id="disabled-state">Disabled state</h2>
|
||||
|
||||
<p>Make buttons look inactive by adding the <code class="highlighter-rouge">disabled</code> boolean attribute to any <code class="highlighter-rouge"><button></code> element.</p>
|
||||
<p>Make buttons look inactive by adding the <code class="language-plaintext highlighter-rouge">disabled</code> boolean attribute to any <code class="language-plaintext highlighter-rouge"><button></code> element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-lg btn-primary" disabled="">Primary button</button>
|
||||
@ -621,12 +625,12 @@
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-primary"</span> <span class="na">disabled</span><span class="nt">></span>Primary button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span> <span class="na">disabled</span><span class="nt">></span>Button<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<p>Disabled buttons using the <code class="highlighter-rouge"><a></code> element behave a bit different:</p>
|
||||
<p>Disabled buttons using the <code class="language-plaintext highlighter-rouge"><a></code> element behave a bit different:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge"><a></code>s don’t support the <code class="highlighter-rouge">disabled</code> attribute, so you must add the <code class="highlighter-rouge">.disabled</code> class to make it visually appear disabled.</li>
|
||||
<li>Some future-friendly styles are included to disable all <code class="highlighter-rouge">pointer-events</code> on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.</li>
|
||||
<li>Disabled buttons should include the <code class="highlighter-rouge">aria-disabled="true"</code> attribute to indicate the state of the element to assistive technologies.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge"><a></code>s don’t support the <code class="language-plaintext highlighter-rouge">disabled</code> attribute, so you must add the <code class="language-plaintext highlighter-rouge">.disabled</code> class to make it visually appear disabled.</li>
|
||||
<li>Some future-friendly styles are included to disable all <code class="language-plaintext highlighter-rouge">pointer-events</code> on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.</li>
|
||||
<li>Disabled buttons should include the <code class="language-plaintext highlighter-rouge">aria-disabled="true"</code> attribute to indicate the state of the element to assistive technologies.</li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-example">
|
||||
@ -639,7 +643,7 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="link-functionality-caveat">Link functionality caveat</h5>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.disabled</code> class uses <code class="highlighter-rouge">pointer-events: none</code> to try to disable the link functionality of <code class="highlighter-rouge"><a></code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code class="highlighter-rouge">pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a <code class="highlighter-rouge">tabindex="-1"</code> attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">.disabled</code> class uses <code class="language-plaintext highlighter-rouge">pointer-events: none</code> to try to disable the link functionality of <code class="language-plaintext highlighter-rouge"><a></code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code class="language-plaintext highlighter-rouge">pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a <code class="language-plaintext highlighter-rouge">tabindex="-1"</code> attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="button-plugin">Button plugin</h2>
|
||||
@ -648,7 +652,7 @@
|
||||
|
||||
<h3 id="toggle-states">Toggle states</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">data-toggle="button"</code> to toggle a button’s <code class="highlighter-rouge">active</code> state. If you’re pre-toggling a button, you must manually add the <code class="highlighter-rouge">.active</code> class <strong>and</strong> <code class="highlighter-rouge">aria-pressed="true"</code> to the <code class="highlighter-rouge"><button></code>.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">data-toggle="button"</code> to toggle a button’s <code class="language-plaintext highlighter-rouge">active</code> state. If you’re pre-toggling a button, you must manually add the <code class="language-plaintext highlighter-rouge">.active</code> class <strong>and</strong> <code class="language-plaintext highlighter-rouge">aria-pressed="true"</code> to the <code class="language-plaintext highlighter-rouge"><button></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
|
||||
@ -661,11 +665,11 @@
|
||||
|
||||
<h3 id="checkbox-and-radio-buttons">Checkbox and radio buttons</h3>
|
||||
|
||||
<p>Bootstrap’s <code class="highlighter-rouge">.button</code> styles can be applied to other elements, such as <code class="highlighter-rouge"><label></code>s, to provide checkbox or radio style button toggling. Add <code class="highlighter-rouge">data-toggle="buttons"</code> to a <code class="highlighter-rouge">.btn-group</code> containing those modified buttons to enable their toggling behavior via JavaScript and add <code class="highlighter-rouge">.btn-group-toggle</code> to style the <code class="highlighter-rouge"><input></code>s within your buttons. <strong>Note that you can create single input-powered buttons or groups of them.</strong></p>
|
||||
<p>Bootstrap’s <code class="language-plaintext highlighter-rouge">.button</code> styles can be applied to other elements, such as <code class="language-plaintext highlighter-rouge"><label></code>s, to provide checkbox or radio style button toggling. Add <code class="language-plaintext highlighter-rouge">data-toggle="buttons"</code> to a <code class="language-plaintext highlighter-rouge">.btn-group</code> containing those modified buttons to enable their toggling behavior via JavaScript and add <code class="language-plaintext highlighter-rouge">.btn-group-toggle</code> to style the <code class="language-plaintext highlighter-rouge"><input></code>s within your buttons. <strong>Note that you can create single input-powered buttons or groups of them.</strong></p>
|
||||
|
||||
<p>The checked state for these buttons is <strong>only updated via <code class="highlighter-rouge">click</code> event</strong> on the button. If you use another method to update the input—e.g., with <code class="highlighter-rouge"><input type="reset"></code> or by manually applying the input’s <code class="highlighter-rouge">checked</code> property—you’ll need to toggle <code class="highlighter-rouge">.active</code> on the <code class="highlighter-rouge"><label></code> manually.</p>
|
||||
<p>The checked state for these buttons is <strong>only updated via <code class="language-plaintext highlighter-rouge">click</code> event</strong> on the button. If you use another method to update the input—e.g., with <code class="language-plaintext highlighter-rouge"><input type="reset"></code> or by manually applying the input’s <code class="language-plaintext highlighter-rouge">checked</code> property—you’ll need to toggle <code class="language-plaintext highlighter-rouge">.active</code> on the <code class="language-plaintext highlighter-rouge"><label></code> manually.</p>
|
||||
|
||||
<p>Note that pre-checked buttons require you to manually add the <code class="highlighter-rouge">.active</code> class to the input’s <code class="highlighter-rouge"><label></code>.</p>
|
||||
<p>Note that pre-checked buttons require you to manually add the <code class="language-plaintext highlighter-rouge">.active</code> class to the input’s <code class="language-plaintext highlighter-rouge"><label></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group-toggle" data-toggle="buttons">
|
||||
@ -716,11 +720,11 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().button('toggle')</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$().button('toggle')</code></td>
|
||||
<td>Toggles push state. Gives the button the appearance that it has been activated.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().button('dispose')</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$().button('dispose')</code></td>
|
||||
<td>Destroys an element’s button.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -731,6 +735,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/card/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -516,7 +517,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/card.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Cards</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -526,7 +530,7 @@
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no <code class="highlighter-rouge">margin</code> by default, so use <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> as needed.</p>
|
||||
<p>Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no <code class="language-plaintext highlighter-rouge">margin</code> by default, so use <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> as needed.</p>
|
||||
|
||||
<p>Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various <a href="#sizing">sizing options</a>.</p>
|
||||
|
||||
@ -555,7 +559,7 @@
|
||||
|
||||
<h3 id="body">Body</h3>
|
||||
|
||||
<p>The building block of a card is the <code class="highlighter-rouge">.card-body</code>. Use it whenever you need a padded section within a card.</p>
|
||||
<p>The building block of a card is the <code class="language-plaintext highlighter-rouge">.card-body</code>. Use it whenever you need a padded section within a card.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card">
|
||||
@ -572,9 +576,9 @@
|
||||
|
||||
<h3 id="titles-text-and-links">Titles, text, and links</h3>
|
||||
|
||||
<p>Card titles are used by adding <code class="highlighter-rouge">.card-title</code> to a <code class="highlighter-rouge"><h*></code> tag. In the same way, links are added and placed next to each other by adding <code class="highlighter-rouge">.card-link</code> to an <code class="highlighter-rouge"><a></code> tag.</p>
|
||||
<p>Card titles are used by adding <code class="language-plaintext highlighter-rouge">.card-title</code> to a <code class="language-plaintext highlighter-rouge"><h*></code> tag. In the same way, links are added and placed next to each other by adding <code class="language-plaintext highlighter-rouge">.card-link</code> to an <code class="language-plaintext highlighter-rouge"><a></code> tag.</p>
|
||||
|
||||
<p>Subtitles are used by adding a <code class="highlighter-rouge">.card-subtitle</code> to a <code class="highlighter-rouge"><h*></code> tag. If the <code class="highlighter-rouge">.card-title</code> and the <code class="highlighter-rouge">.card-subtitle</code> items are placed in a <code class="highlighter-rouge">.card-body</code> item, the card title and subtitle are aligned nicely.</p>
|
||||
<p>Subtitles are used by adding a <code class="language-plaintext highlighter-rouge">.card-subtitle</code> to a <code class="language-plaintext highlighter-rouge"><h*></code> tag. If the <code class="language-plaintext highlighter-rouge">.card-title</code> and the <code class="language-plaintext highlighter-rouge">.card-subtitle</code> items are placed in a <code class="language-plaintext highlighter-rouge">.card-body</code> item, the card title and subtitle are aligned nicely.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
@ -599,7 +603,7 @@
|
||||
|
||||
<h3 id="images">Images</h3>
|
||||
|
||||
<p><code class="highlighter-rouge">.card-img-top</code> places an image to the top of the card. With <code class="highlighter-rouge">.card-text</code>, text can be added to the card. Text within <code class="highlighter-rouge">.card-text</code> can also be styled with the standard HTML tags.</p>
|
||||
<p><code class="language-plaintext highlighter-rouge">.card-img-top</code> places an image to the top of the card. With <code class="language-plaintext highlighter-rouge">.card-text</code>, text can be added to the card. Text within <code class="language-plaintext highlighter-rouge">.card-text</code> can also be styled with the standard HTML tags.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
@ -660,6 +664,29 @@
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
<div class="card-footer">
|
||||
Card footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
||||
Card footer
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="kitchen-sink">Kitchen sink</h3>
|
||||
|
||||
<p>Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.</p>
|
||||
@ -726,7 +753,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Card headers can be styled by adding <code class="highlighter-rouge">.card-header</code> to <code class="highlighter-rouge"><h*></code> elements.</p>
|
||||
<p>Card headers can be styled by adding <code class="language-plaintext highlighter-rouge">.card-header</code> to <code class="language-plaintext highlighter-rouge"><h*></code> elements.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card">
|
||||
@ -803,7 +830,7 @@
|
||||
|
||||
<h2 id="sizing">Sizing</h2>
|
||||
|
||||
<p>Cards assume no specific <code class="highlighter-rouge">width</code> to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.</p>
|
||||
<p>Cards assume no specific <code class="language-plaintext highlighter-rouge">width</code> to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.</p>
|
||||
|
||||
<h3 id="using-grid-markup">Using grid markup</h3>
|
||||
|
||||
@ -1079,6 +1106,7 @@
|
||||
<svg class="bd-placeholder-img card-img-bottom" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
@ -1093,7 +1121,7 @@
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-bottom"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="image-overlays">Image overlays</h3>
|
||||
@ -1125,7 +1153,7 @@
|
||||
|
||||
<h2 id="horizontal">Horizontal</h2>
|
||||
|
||||
<p>Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with <code class="highlighter-rouge">.no-gutters</code> and use <code class="highlighter-rouge">.col-md-*</code> classes to make the card horizontal at the <code class="highlighter-rouge">md</code> breakpoint. Further adjustments may be needed depending on your card content.</p>
|
||||
<p>Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with <code class="language-plaintext highlighter-rouge">.no-gutters</code> and use <code class="language-plaintext highlighter-rouge">.col-md-*</code> classes to make the card horizontal at the <code class="language-plaintext highlighter-rouge">md</code> breakpoint. Further adjustments may be needed depending on your card content.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card mb-3" style="max-width: 540px;">
|
||||
@ -1285,12 +1313,12 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="language-plaintext highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="border">Border</h3>
|
||||
|
||||
<p>Use <a href="/docs/4.5/utilities/borders/">border utilities</a> to change just the <code class="highlighter-rouge">border-color</code> of a card. Note that you can put <code class="highlighter-rouge">.text-{color}</code> classes on the parent <code class="highlighter-rouge">.card</code> or a subset of the card’s contents as shown below.</p>
|
||||
<p>Use <a href="/docs/4.5/utilities/borders/">border utilities</a> to change just the <code class="language-plaintext highlighter-rouge">border-color</code> of a card. Note that you can put <code class="language-plaintext highlighter-rouge">.text-{color}</code> classes on the parent <code class="language-plaintext highlighter-rouge">.card</code> or a subset of the card’s contents as shown below.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -1410,7 +1438,7 @@
|
||||
|
||||
<h3 id="mixins-utilities">Mixins utilities</h3>
|
||||
|
||||
<p>You can also change the borders on the card header and footer as needed, and even remove their <code class="highlighter-rouge">background-color</code> with <code class="highlighter-rouge">.bg-transparent</code>.</p>
|
||||
<p>You can also change the borders on the card header and footer as needed, and even remove their <code class="language-plaintext highlighter-rouge">background-color</code> with <code class="language-plaintext highlighter-rouge">.bg-transparent</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card border-success mb-3" style="max-width: 18rem;">
|
||||
@ -1437,7 +1465,7 @@
|
||||
|
||||
<h3 id="card-groups">Card groups</h3>
|
||||
|
||||
<p>Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use <code class="highlighter-rouge">display: flex;</code> to become attached with uniform dimensions starting at the <code class="highlighter-rouge">sm</code> breakpoint.</p>
|
||||
<p>Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use <code class="language-plaintext highlighter-rouge">display: flex;</code> to become attached with uniform dimensions starting at the <code class="language-plaintext highlighter-rouge">sm</code> breakpoint.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card-group">
|
||||
@ -1693,7 +1721,7 @@
|
||||
|
||||
<h3 id="grid-cards">Grid cards</h3>
|
||||
|
||||
<p>Use the Bootstrap grid system and its <a href="/docs/4.5/layout/grid/#row-columns"><code class="highlighter-rouge">.row-cols</code> classes</a> to control how many grid columns (wrapped around your cards) you show per row. For example, here’s <code class="highlighter-rouge">.row-cols-1</code> laying out the cards on one column, and <code class="highlighter-rouge">.row-cols-md-2</code> splitting four cards to equal width across multiple rows, from the medium breakpoint up.</p>
|
||||
<p>Use the Bootstrap grid system and its <a href="/docs/4.5/layout/grid/#row-columns"><code class="language-plaintext highlighter-rouge">.row-cols</code> classes</a> to control how many grid columns (wrapped around your cards) you show per row. For example, here’s <code class="language-plaintext highlighter-rouge">.row-cols-1</code> laying out the cards on one column, and <code class="language-plaintext highlighter-rouge">.row-cols-md-2</code> splitting four cards to equal width across multiple rows, from the medium breakpoint up.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row row-cols-1 row-cols-md-2">
|
||||
@ -1774,7 +1802,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Change it to <code class="highlighter-rouge">.row-cols-3</code> and you’ll see the fourth card wrap.</p>
|
||||
<p>Change it to <code class="language-plaintext highlighter-rouge">.row-cols-3</code> and you’ll see the fourth card wrap.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row row-cols-1 row-cols-md-3">
|
||||
@ -1855,7 +1883,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>When you need equal height, add <code class="highlighter-rouge">.h-100</code> to the cards. If you want equal heights by default, you can set <code class="highlighter-rouge">$card-height: 100%</code> in Sass.</p>
|
||||
<p>When you need equal height, add <code class="language-plaintext highlighter-rouge">.h-100</code> to the cards. If you want equal heights by default, you can set <code class="language-plaintext highlighter-rouge">$card-height: 100%</code> in Sass.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row row-cols-1 row-cols-md-3">
|
||||
@ -1938,9 +1966,9 @@
|
||||
|
||||
<h3 id="card-columns">Card columns</h3>
|
||||
|
||||
<p>Cards can be organized into <a href="https://masonry.desandro.com/">Masonry</a>-like columns with just CSS by wrapping them in <code class="highlighter-rouge">.card-columns</code>. Cards are built with CSS <code class="highlighter-rouge">column</code> properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.</p>
|
||||
<p>Cards can be organized into <a href="https://masonry.desandro.com/">Masonry</a>-like columns with just CSS by wrapping them in <code class="language-plaintext highlighter-rouge">.card-columns</code>. Cards are built with CSS <code class="language-plaintext highlighter-rouge">column</code> properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.</p>
|
||||
|
||||
<p><strong>Heads up!</strong> Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to <code class="highlighter-rouge">display: inline-block</code> as <code class="highlighter-rouge">column-break-inside: avoid</code> isn’t a bulletproof solution yet.</p>
|
||||
<p><strong>Heads up!</strong> Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to <code class="language-plaintext highlighter-rouge">display: inline-block</code> as <code class="language-plaintext highlighter-rouge">column-break-inside: avoid</code> isn’t a bulletproof solution yet.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card-columns">
|
||||
@ -2073,7 +2101,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Card columns can also be extended and customized with some additional code. Shown below is an extension of the <code class="highlighter-rouge">.card-columns</code> class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.</p>
|
||||
<p>Card columns can also be extended and customized with some additional code. Shown below is an extension of the <code class="language-plaintext highlighter-rouge">.card-columns</code> class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.card-columns</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">media-breakpoint-only</span><span class="p">(</span><span class="n">lg</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -2090,6 +2118,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/carousel/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -504,7 +505,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/carousel.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Carousel</h1>
|
||||
</div>
|
||||
<p class="bd-lead">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -515,22 +519,22 @@
|
||||
<p>In browsers where the <a href="https://www.w3.org/TR/page-visibility/">Page Visibility API</a> is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
<p>The animation effect of this component is dependent on the <code class="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
<p>Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.</p>
|
||||
|
||||
<p>Lastly, if you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
|
||||
<p>Lastly, if you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="language-plaintext highlighter-rouge">util.js</code></a>.</p>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.</p>
|
||||
|
||||
<p><strong>The <code class="highlighter-rouge">.active</code> class needs to be added to one of the slides</strong> otherwise the carousel will not be visible. Also be sure to set a unique id on the <code class="highlighter-rouge">.carousel</code> for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a <code class="highlighter-rouge">data-target</code> attribute (or <code class="highlighter-rouge">href</code> for links) that matches the id of the <code class="highlighter-rouge">.carousel</code> element.</p>
|
||||
<p><strong>The <code class="language-plaintext highlighter-rouge">.active</code> class needs to be added to one of the slides</strong> otherwise the carousel will not be visible. Also be sure to set a unique id on the <code class="language-plaintext highlighter-rouge">.carousel</code> for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a <code class="language-plaintext highlighter-rouge">data-target</code> attribute (or <code class="language-plaintext highlighter-rouge">href</code> for links) that matches the id of the <code class="language-plaintext highlighter-rouge">.carousel</code> element.</p>
|
||||
|
||||
<h3 id="slides-only">Slides only</h3>
|
||||
|
||||
<p>Here’s a carousel with slides only. Note the presence of the <code class="highlighter-rouge">.d-block</code> and <code class="highlighter-rouge">.w-100</code> on carousel images to prevent browser default image alignment.</p>
|
||||
<p>Here’s a carousel with slides only. Note the presence of the <code class="language-plaintext highlighter-rouge">.d-block</code> and <code class="language-plaintext highlighter-rouge">.w-100</code> on carousel images to prevent browser default image alignment.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
|
||||
@ -671,7 +675,7 @@
|
||||
|
||||
<h3 id="with-captions">With captions</h3>
|
||||
|
||||
<p>Add captions to your slides easily with the <code class="highlighter-rouge">.carousel-caption</code> element within any <code class="highlighter-rouge">.carousel-item</code>. They can be easily hidden on smaller viewports, as shown below, with optional <a href="/docs/4.5/utilities/display/">display utilities</a>. We hide them initially with <code class="highlighter-rouge">.d-none</code> and bring them back on medium-sized devices with <code class="highlighter-rouge">.d-md-block</code>.</p>
|
||||
<p>Add captions to your slides easily with the <code class="language-plaintext highlighter-rouge">.carousel-caption</code> element within any <code class="language-plaintext highlighter-rouge">.carousel-item</code>. They can be easily hidden on smaller viewports, as shown below, with optional <a href="/docs/4.5/utilities/display/">display utilities</a>. We hide them initially with <code class="language-plaintext highlighter-rouge">.d-none</code> and bring them back on medium-sized devices with <code class="language-plaintext highlighter-rouge">.d-md-block</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
||||
@ -754,7 +758,7 @@
|
||||
|
||||
<h3 id="crossfade">Crossfade</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
|
||||
@ -801,9 +805,9 @@
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="individual-carousel-item-interval">Individual <code class="highlighter-rouge">.carousel-item</code> interval</h3>
|
||||
<h3 id="individual-carousel-item-interval">Individual <code class="language-plaintext highlighter-rouge">.carousel-item</code> interval</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">data-interval=""</code> to a <code class="highlighter-rouge">.carousel-item</code> to change the amount of time to delay between automatically cycling to the next item.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">data-interval=""</code> to a <code class="language-plaintext highlighter-rouge">.carousel-item</code> to change the amount of time to delay between automatically cycling to the next item.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
|
||||
@ -854,9 +858,9 @@
|
||||
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
|
||||
<p>Use data attributes to easily control the position of the carousel. <code class="highlighter-rouge">data-slide</code> accepts the keywords <code class="highlighter-rouge">prev</code> or <code class="highlighter-rouge">next</code>, which alters the slide position relative to its current position. Alternatively, use <code class="highlighter-rouge">data-slide-to</code> to pass a raw slide index to the carousel <code class="highlighter-rouge">data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code class="highlighter-rouge">0</code>.</p>
|
||||
<p>Use data attributes to easily control the position of the carousel. <code class="language-plaintext highlighter-rouge">data-slide</code> accepts the keywords <code class="language-plaintext highlighter-rouge">prev</code> or <code class="language-plaintext highlighter-rouge">next</code>, which alters the slide position relative to its current position. Alternatively, use <code class="language-plaintext highlighter-rouge">data-slide-to</code> to pass a raw slide index to the carousel <code class="language-plaintext highlighter-rouge">data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code class="language-plaintext highlighter-rouge">0</code>.</p>
|
||||
|
||||
<p>The <code class="highlighter-rouge">data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load. If you don’t use <code class="highlighter-rouge">data-ride="carousel"</code> to initialize your carousel, you have to initialize it yourself. <strong>It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.</strong></p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load. If you don’t use <code class="language-plaintext highlighter-rouge">data-ride="carousel"</code> to initialize your carousel, you have to initialize it yourself. <strong>It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.</strong></p>
|
||||
|
||||
<h3 id="via-javascript">Via JavaScript</h3>
|
||||
|
||||
@ -866,7 +870,7 @@
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-interval=""</code>.</p>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="language-plaintext highlighter-rouge">data-</code>, as in <code class="language-plaintext highlighter-rouge">data-interval=""</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -928,35 +932,35 @@
|
||||
<p><a href="/docs/4.5/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
|
||||
</div>
|
||||
|
||||
<h4 id="carouseloptions"><code class="highlighter-rouge">.carousel(options)</code></h4>
|
||||
<h4 id="carouseloptions"><code class="language-plaintext highlighter-rouge">.carousel(options)</code></h4>
|
||||
|
||||
<p>Initializes the carousel with an optional options <code class="highlighter-rouge">object</code> and starts cycling through items.</p>
|
||||
<p>Initializes the carousel with an optional options <code class="language-plaintext highlighter-rouge">object</code> and starts cycling through items.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.carousel</span><span class="dl">'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">({</span>
|
||||
<span class="na">interval</span><span class="p">:</span> <span class="mi">2000</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h4 id="carouselcycle"><code class="highlighter-rouge">.carousel('cycle')</code></h4>
|
||||
<h4 id="carouselcycle"><code class="language-plaintext highlighter-rouge">.carousel('cycle')</code></h4>
|
||||
|
||||
<p>Cycles through the carousel items from left to right.</p>
|
||||
|
||||
<h4 id="carouselpause"><code class="highlighter-rouge">.carousel('pause')</code></h4>
|
||||
<h4 id="carouselpause"><code class="language-plaintext highlighter-rouge">.carousel('pause')</code></h4>
|
||||
|
||||
<p>Stops the carousel from cycling through items.</p>
|
||||
|
||||
<h4 id="carouselnumber"><code class="highlighter-rouge">.carousel(number)</code></h4>
|
||||
<h4 id="carouselnumber"><code class="language-plaintext highlighter-rouge">.carousel(number)</code></h4>
|
||||
|
||||
<p>Cycles the carousel to a particular frame (0 based, similar to an array). <strong>Returns to the caller before the target item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
|
||||
<p>Cycles the carousel to a particular frame (0 based, similar to an array). <strong>Returns to the caller before the target item has been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
|
||||
|
||||
<h4 id="carouselprev"><code class="highlighter-rouge">.carousel('prev')</code></h4>
|
||||
<h4 id="carouselprev"><code class="language-plaintext highlighter-rouge">.carousel('prev')</code></h4>
|
||||
|
||||
<p>Cycles to the previous item. <strong>Returns to the caller before the previous item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
|
||||
<p>Cycles to the previous item. <strong>Returns to the caller before the previous item has been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
|
||||
|
||||
<h4 id="carouselnext"><code class="highlighter-rouge">.carousel('next')</code></h4>
|
||||
<h4 id="carouselnext"><code class="language-plaintext highlighter-rouge">.carousel('next')</code></h4>
|
||||
|
||||
<p>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
|
||||
<p>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
|
||||
|
||||
<h4 id="carouseldispose"><code class="highlighter-rouge">.carousel('dispose')</code></h4>
|
||||
<h4 id="carouseldispose"><code class="language-plaintext highlighter-rouge">.carousel('dispose')</code></h4>
|
||||
|
||||
<p>Destroys an element’s carousel.</p>
|
||||
|
||||
@ -965,13 +969,13 @@
|
||||
<p>Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">direction</code>: The direction in which the carousel is sliding (either <code class="highlighter-rouge">"left"</code> or <code class="highlighter-rouge">"right"</code>).</li>
|
||||
<li><code class="highlighter-rouge">relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
|
||||
<li><code class="highlighter-rouge">from</code>: The index of the current item</li>
|
||||
<li><code class="highlighter-rouge">to</code>: The index of the next item</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">direction</code>: The direction in which the carousel is sliding (either <code class="language-plaintext highlighter-rouge">"left"</code> or <code class="language-plaintext highlighter-rouge">"right"</code>).</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">from</code>: The index of the current item</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">to</code>: The index of the next item</li>
|
||||
</ul>
|
||||
|
||||
<p>All carousel events are fired at the carousel itself (i.e. at the <code class="highlighter-rouge"><div class="carousel"></code>).</p>
|
||||
<p>All carousel events are fired at the carousel itself (i.e. at the <code class="language-plaintext highlighter-rouge"><div class="carousel"></code>).</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -998,13 +1002,13 @@
|
||||
|
||||
<h3 id="change-transition-duration">Change transition duration</h3>
|
||||
|
||||
<p>The transition duration of <code class="highlighter-rouge">.carousel-item</code> can be changed with the <code class="highlighter-rouge">$carousel-transition</code> Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. <code class="highlighter-rouge">transition: transform 2s ease, opacity .5s ease-out</code>).</p>
|
||||
<p>The transition duration of <code class="language-plaintext highlighter-rouge">.carousel-item</code> can be changed with the <code class="language-plaintext highlighter-rouge">$carousel-transition</code> Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. <code class="language-plaintext highlighter-rouge">transition: transform 2s ease, opacity .5s ease-out</code>).</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/collapse/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -495,16 +496,19 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/collapse.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Collapse</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
|
||||
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code class="highlighter-rouge">height</code> from its current value to <code class="highlighter-rouge">0</code>. Given how CSS handles animations, you cannot use <code class="highlighter-rouge">padding</code> on a <code class="highlighter-rouge">.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
|
||||
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code class="language-plaintext highlighter-rouge">height</code> from its current value to <code class="language-plaintext highlighter-rouge">0</code>. Given how CSS handles animations, you cannot use <code class="language-plaintext highlighter-rouge">padding</code> on a <code class="language-plaintext highlighter-rouge">.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
<p>The animation effect of this component is dependent on the <code class="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
@ -512,12 +516,12 @@
|
||||
<p>Click the buttons below to show and hide another element via class changes:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.collapse</code> hides content</li>
|
||||
<li><code class="highlighter-rouge">.collapsing</code> is applied during transitions</li>
|
||||
<li><code class="highlighter-rouge">.collapse.show</code> shows content</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.collapse</code> hides content</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.collapsing</code> is applied during transitions</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.collapse.show</code> shows content</li>
|
||||
</ul>
|
||||
|
||||
<p>You can use a link with the <code class="highlighter-rouge">href</code> attribute, or a button with the <code class="highlighter-rouge">data-target</code> attribute. In both cases, the <code class="highlighter-rouge">data-toggle="collapse"</code> is required.</p>
|
||||
<p>You can use a link with the <code class="language-plaintext highlighter-rouge">href</code> attribute, or a button with the <code class="language-plaintext highlighter-rouge">data-target</code> attribute. In both cases, the <code class="language-plaintext highlighter-rouge">data-toggle="collapse"</code> is required.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p>
|
||||
@ -550,8 +554,8 @@
|
||||
|
||||
<h2 id="multiple-targets">Multiple targets</h2>
|
||||
|
||||
<p>A <code class="highlighter-rouge"><button></code> or <code class="highlighter-rouge"><a></code> can show and hide multiple elements by referencing them with a JQuery selector in its <code class="highlighter-rouge">href</code> or <code class="highlighter-rouge">data-target</code> attribute.
|
||||
Multiple <code class="highlighter-rouge"><button></code> or <code class="highlighter-rouge"><a></code> can show and hide an element if they each reference it with their <code class="highlighter-rouge">href</code> or <code class="highlighter-rouge">data-target</code> attribute</p>
|
||||
<p>A <code class="language-plaintext highlighter-rouge"><button></code> or <code class="language-plaintext highlighter-rouge"><a></code> can show and hide multiple elements by referencing them with a JQuery selector in its <code class="language-plaintext highlighter-rouge">href</code> or <code class="language-plaintext highlighter-rouge">data-target</code> attribute.
|
||||
Multiple <code class="language-plaintext highlighter-rouge"><button></code> or <code class="language-plaintext highlighter-rouge"><a></code> can show and hide an element if they each reference it with their <code class="language-plaintext highlighter-rouge">href</code> or <code class="language-plaintext highlighter-rouge">data-target</code> attribute</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p>
|
||||
@ -600,7 +604,7 @@ Multiple <code class="highlighter-rouge"><button></code> or <code class="h
|
||||
|
||||
<h2 id="accordion-example">Accordion example</h2>
|
||||
|
||||
<p>Using the <a href="/docs/4.5/components/card/">card</a> component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use <code class="highlighter-rouge">.accordion</code> as a wrapper.</p>
|
||||
<p>Using the <a href="/docs/4.5/components/card/">card</a> component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use <code class="language-plaintext highlighter-rouge">.accordion</code> as a wrapper.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="accordion" id="accordionExample">
|
||||
@ -697,9 +701,9 @@ Multiple <code class="highlighter-rouge"><button></code> or <code class="h
|
||||
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
|
||||
<p>Be sure to add <code class="highlighter-rouge">aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code class="highlighter-rouge">aria-expanded="false"</code>. If you’ve set the collapsible element to be open by default using the <code class="highlighter-rouge">show</code> class, set <code class="highlighter-rouge">aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an <code class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><div></code>), the attribute <code class="highlighter-rouge">role="button"</code> should be added to the element.</p>
|
||||
<p>Be sure to add <code class="language-plaintext highlighter-rouge">aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code class="language-plaintext highlighter-rouge">aria-expanded="false"</code>. If you’ve set the collapsible element to be open by default using the <code class="language-plaintext highlighter-rouge">show</code> class, set <code class="language-plaintext highlighter-rouge">aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an <code class="language-plaintext highlighter-rouge"><a></code> or <code class="language-plaintext highlighter-rouge"><div></code>), the attribute <code class="language-plaintext highlighter-rouge">role="button"</code> should be added to the element.</p>
|
||||
|
||||
<p>If your control element is targeting a single collapsible element – i.e. the <code class="highlighter-rouge">data-target</code> attribute is pointing to an <code class="highlighter-rouge">id</code> selector – you should add the <code class="highlighter-rouge">aria-controls</code> attribute to the control element, containing the <code class="highlighter-rouge">id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
|
||||
<p>If your control element is targeting a single collapsible element – i.e. the <code class="language-plaintext highlighter-rouge">data-target</code> attribute is pointing to an <code class="language-plaintext highlighter-rouge">id</code> selector – you should add the <code class="language-plaintext highlighter-rouge">aria-controls</code> attribute to the control element, containing the <code class="language-plaintext highlighter-rouge">id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
|
||||
|
||||
<p>Note that Bootstrap’s current implementation does not cover the various keyboard interactions described in the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#accordion">WAI-ARIA Authoring Practices 1.1 accordion pattern</a> - you will need to include these yourself with custom JavaScript.</p>
|
||||
|
||||
@ -708,18 +712,18 @@ Multiple <code class="highlighter-rouge"><button></code> or <code class="h
|
||||
<p>The collapse plugin utilizes a few classes to handle the heavy lifting:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.collapse</code> hides the content</li>
|
||||
<li><code class="highlighter-rouge">.collapse.show</code> shows the content</li>
|
||||
<li><code class="highlighter-rouge">.collapsing</code> is added when the transition starts, and removed when it finishes</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.collapse</code> hides the content</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.collapse.show</code> shows the content</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.collapsing</code> is added when the transition starts, and removed when it finishes</li>
|
||||
</ul>
|
||||
|
||||
<p>These classes can be found in <code class="highlighter-rouge">_transitions.scss</code>.</p>
|
||||
<p>These classes can be found in <code class="language-plaintext highlighter-rouge">_transitions.scss</code>.</p>
|
||||
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
|
||||
<p>Just add <code class="highlighter-rouge">data-toggle="collapse"</code> and a <code class="highlighter-rouge">data-target</code> to the element to automatically assign control of one or more collapsible elements. The <code class="highlighter-rouge">data-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code class="highlighter-rouge">collapse</code> to the collapsible element. If you’d like it to default open, add the additional class <code class="highlighter-rouge">show</code>.</p>
|
||||
<p>Just add <code class="language-plaintext highlighter-rouge">data-toggle="collapse"</code> and a <code class="language-plaintext highlighter-rouge">data-target</code> to the element to automatically assign control of one or more collapsible elements. The <code class="language-plaintext highlighter-rouge">data-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code class="language-plaintext highlighter-rouge">collapse</code> to the collapsible element. If you’d like it to default open, add the additional class <code class="language-plaintext highlighter-rouge">show</code>.</p>
|
||||
|
||||
<p>To add accordion-like group management to a collapsible area, add the data attribute <code class="highlighter-rouge">data-parent="#selector"</code>. Refer to the demo to see this in action.</p>
|
||||
<p>To add accordion-like group management to a collapsible area, add the data attribute <code class="language-plaintext highlighter-rouge">data-parent="#selector"</code>. Refer to the demo to see this in action.</p>
|
||||
|
||||
<h3 id="via-javascript">Via JavaScript</h3>
|
||||
|
||||
@ -729,7 +733,7 @@ Multiple <code class="highlighter-rouge"><button></code> or <code class="h
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-parent=""</code>.</p>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="language-plaintext highlighter-rouge">data-</code>, as in <code class="language-plaintext highlighter-rouge">data-parent=""</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -766,27 +770,27 @@ Multiple <code class="highlighter-rouge"><button></code> or <code class="h
|
||||
<p><a href="/docs/4.5/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
|
||||
</div>
|
||||
|
||||
<h4 id="collapseoptions"><code class="highlighter-rouge">.collapse(options)</code></h4>
|
||||
<h4 id="collapseoptions"><code class="language-plaintext highlighter-rouge">.collapse(options)</code></h4>
|
||||
|
||||
<p>Activates your content as a collapsible element. Accepts an optional options <code class="highlighter-rouge">object</code>.</p>
|
||||
<p>Activates your content as a collapsible element. Accepts an optional options <code class="language-plaintext highlighter-rouge">object</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myCollapsible</span><span class="dl">'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">({</span>
|
||||
<span class="na">toggle</span><span class="p">:</span> <span class="kc">false</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h4 id="collapsetoggle"><code class="highlighter-rouge">.collapse('toggle')</code></h4>
|
||||
<h4 id="collapsetoggle"><code class="language-plaintext highlighter-rouge">.collapse('toggle')</code></h4>
|
||||
|
||||
<p>Toggles a collapsible element to shown or hidden. <strong>Returns to the caller before the collapsible element has actually been shown or hidden</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.collapse</code> or <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
|
||||
<p>Toggles a collapsible element to shown or hidden. <strong>Returns to the caller before the collapsible element has actually been shown or hidden</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">shown.bs.collapse</code> or <code class="language-plaintext highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
|
||||
|
||||
<h4 id="collapseshow"><code class="highlighter-rouge">.collapse('show')</code></h4>
|
||||
<h4 id="collapseshow"><code class="language-plaintext highlighter-rouge">.collapse('show')</code></h4>
|
||||
|
||||
<p>Shows a collapsible element. <strong>Returns to the caller before the collapsible element has actually been shown</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.collapse</code> event occurs).</p>
|
||||
<p>Shows a collapsible element. <strong>Returns to the caller before the collapsible element has actually been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">shown.bs.collapse</code> event occurs).</p>
|
||||
|
||||
<h4 id="collapsehide"><code class="highlighter-rouge">.collapse('hide')</code></h4>
|
||||
<h4 id="collapsehide"><code class="language-plaintext highlighter-rouge">.collapse('hide')</code></h4>
|
||||
|
||||
<p>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
|
||||
<p>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
|
||||
|
||||
<h4 id="collapsedispose"><code class="highlighter-rouge">.collapse('dispose')</code></h4>
|
||||
<h4 id="collapsedispose"><code class="language-plaintext highlighter-rouge">.collapse('dispose')</code></h4>
|
||||
|
||||
<p>Destroys an element’s collapse.</p>
|
||||
|
||||
@ -831,6 +835,6 @@ Multiple <code class="highlighter-rouge"><button></code> or <code class="h
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/dropdowns/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -518,7 +519,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/dropdowns.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Dropdowns</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -526,25 +530,25 @@
|
||||
|
||||
<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.js</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js. Popper.js 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.js</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code class="language-plaintext highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="language-plaintext highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
|
||||
|
||||
<p>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
|
||||
<p>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="language-plaintext highlighter-rouge">util.js</code></a>.</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 class="highlighter-rouge">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>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 class="language-plaintext highlighter-rouge">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 class="highlighter-rouge">role</code> and <code class="highlighter-rouge">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>
|
||||
<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 class="language-plaintext highlighter-rouge">role</code> and <code class="language-plaintext highlighter-rouge">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>
|
||||
|
||||
<p>However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual <code class="highlighter-rouge">.dropdown-item</code> elements using the cursor keys and close the menu with the <kbd>ESC</kbd> key.</p>
|
||||
<p>However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual <code class="language-plaintext highlighter-rouge">.dropdown-item</code> elements using the cursor keys and close the menu with the <kbd>ESC</kbd> key.</p>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code class="highlighter-rouge">.dropdown</code>, or another element that declares <code class="highlighter-rouge">position: relative;</code>. Dropdowns can be triggered from <code class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><button></code> elements to better fit your potential needs.</p>
|
||||
<p>Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code class="language-plaintext highlighter-rouge">.dropdown</code>, or another element that declares <code class="language-plaintext highlighter-rouge">position: relative;</code>. Dropdowns can be triggered from <code class="language-plaintext highlighter-rouge"><a></code> or <code class="language-plaintext highlighter-rouge"><button></code> elements to better fit your potential needs.</p>
|
||||
|
||||
<h3 id="single-button">Single button</h3>
|
||||
|
||||
<p>Any single <code class="highlighter-rouge">.btn</code> can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <code class="highlighter-rouge"><button></code> elements:</p>
|
||||
<p>Any single <code class="language-plaintext highlighter-rouge">.btn</code> can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <code class="language-plaintext highlighter-rouge"><button></code> elements:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown">
|
||||
@ -569,7 +573,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>And with <code class="highlighter-rouge"><a></code> elements:</p>
|
||||
<p>And with <code class="language-plaintext highlighter-rouge"><a></code> elements:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown">
|
||||
@ -677,9 +681,9 @@
|
||||
|
||||
<h3 id="split-button">Split button</h3>
|
||||
|
||||
<p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code class="highlighter-rouge">.dropdown-toggle-split</code> for proper spacing around the dropdown caret.</p>
|
||||
<p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code class="language-plaintext highlighter-rouge">.dropdown-toggle-split</code> for proper spacing around the dropdown caret.</p>
|
||||
|
||||
<p>We use this extra class to reduce the horizontal <code class="highlighter-rouge">padding</code> on either side of the caret by 25% and remove the <code class="highlighter-rouge">margin-left</code> that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.</p>
|
||||
<p>We use this extra class to reduce the horizontal <code class="language-plaintext highlighter-rouge">padding</code> on either side of the caret by 25% and remove the <code class="language-plaintext highlighter-rouge">margin-left</code> that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
@ -885,7 +889,7 @@
|
||||
|
||||
<h3 id="dropup">Dropup</h3>
|
||||
|
||||
<p>Trigger dropdown menus above elements by adding <code class="highlighter-rouge">.dropup</code> to the parent element.</p>
|
||||
<p>Trigger dropdown menus above elements by adding <code class="language-plaintext highlighter-rouge">.dropup</code> to the parent element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group dropup">
|
||||
@ -943,7 +947,7 @@
|
||||
|
||||
<h3 id="dropright">Dropright</h3>
|
||||
|
||||
<p>Trigger dropdown menus at the right of the elements by adding <code class="highlighter-rouge">.dropright</code> to the parent element.</p>
|
||||
<p>Trigger dropdown menus at the right of the elements by adding <code class="language-plaintext highlighter-rouge">.dropright</code> to the parent element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group dropright">
|
||||
@ -1001,7 +1005,7 @@
|
||||
|
||||
<h3 id="dropleft">Dropleft</h3>
|
||||
|
||||
<p>Trigger dropdown menus at the left of the elements by adding <code class="highlighter-rouge">.dropleft</code> to the parent element.</p>
|
||||
<p>Trigger dropdown menus at the left of the elements by adding <code class="language-plaintext highlighter-rouge">.dropleft</code> to the parent element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group dropleft">
|
||||
@ -1063,7 +1067,7 @@
|
||||
|
||||
<h2 id="menu-items">Menu items</h2>
|
||||
|
||||
<p>Historically dropdown menu contents <em>had</em> to be links, but that’s no longer the case with v4. Now you can optionally use <code class="highlighter-rouge"><button></code> elements in your dropdowns instead of just <code class="highlighter-rouge"><a></code>s.</p>
|
||||
<p>Historically dropdown menu contents <em>had</em> to be links, but that’s no longer the case with v4. Now you can optionally use <code class="language-plaintext highlighter-rouge"><button></code> elements in your dropdowns instead of just <code class="language-plaintext highlighter-rouge"><a></code>s.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown">
|
||||
@ -1088,7 +1092,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>You can also create non-interactive dropdown items with <code class="highlighter-rouge">.dropdown-item-text</code>. Feel free to style further with custom CSS or text utilities.</p>
|
||||
<p>You can also create non-interactive dropdown items with <code class="language-plaintext highlighter-rouge">.dropdown-item-text</code>. Feel free to style further with custom CSS or text utilities.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown-menu">
|
||||
@ -1107,7 +1111,7 @@
|
||||
|
||||
<h3 id="active">Active</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.active</code> to items in the dropdown to <strong>style them as active</strong>.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.active</code> to items in the dropdown to <strong>style them as active</strong>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown-menu">
|
||||
@ -1124,7 +1128,7 @@
|
||||
|
||||
<h3 id="disabled">Disabled</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.disabled</code> to items in the dropdown to <strong>style them as disabled</strong>.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.disabled</code> to items in the dropdown to <strong>style them as disabled</strong>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown-menu">
|
||||
@ -1141,7 +1145,7 @@
|
||||
|
||||
<h2 id="menu-alignment">Menu alignment</h2>
|
||||
|
||||
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code class="highlighter-rouge">.dropdown-menu-right</code> to a <code class="highlighter-rouge">.dropdown-menu</code> to right align the dropdown menu.</p>
|
||||
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code class="language-plaintext highlighter-rouge">.dropdown-menu-right</code> to a <code class="language-plaintext highlighter-rouge">.dropdown-menu</code> to right align the dropdown menu.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p><strong>Heads up!</strong> Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).</p>
|
||||
@ -1172,9 +1176,9 @@
|
||||
|
||||
<h3 id="responsive-alignment">Responsive alignment</h3>
|
||||
|
||||
<p>If you want to use responsive alignment, disable dynamic positioning by adding the <code class="highlighter-rouge">data-display="static"</code> attribute and use the responsive variation classes.</p>
|
||||
<p>If you want to use responsive alignment, disable dynamic positioning by adding the <code class="language-plaintext highlighter-rouge">data-display="static"</code> attribute and use the responsive variation classes.</p>
|
||||
|
||||
<p>To align <strong>right</strong> the dropdown menu with the given breakpoint or larger, add <code class="highlighter-rouge">.dropdown-menu{-sm|-md|-lg|-xl}-right</code>.</p>
|
||||
<p>To align <strong>right</strong> the dropdown menu with the given breakpoint or larger, add <code class="language-plaintext highlighter-rouge">.dropdown-menu{-sm|-md|-lg|-xl}-right</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
@ -1199,7 +1203,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>To align <strong>left</strong> the dropdown menu with the given breakpoint or larger, add <code class="highlighter-rouge">.dropdown-menu-right</code> and <code class="highlighter-rouge">.dropdown-menu{-sm|-md|-lg|-xl}-left</code>.</p>
|
||||
<p>To align <strong>left</strong> the dropdown menu with the given breakpoint or larger, add <code class="language-plaintext highlighter-rouge">.dropdown-menu-right</code> and <code class="language-plaintext highlighter-rouge">.dropdown-menu{-sm|-md|-lg|-xl}-left</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
@ -1224,7 +1228,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Note that you don’t need to add a <code class="highlighter-rouge">data-display="static"</code> attribute to dropdown buttons in navbars, since Popper.js isn’t used in navbars.</p>
|
||||
<p>Note that you don’t need to add a <code class="language-plaintext highlighter-rouge">data-display="static"</code> attribute to dropdown buttons in navbars, since Popper.js isn’t used in navbars.</p>
|
||||
|
||||
<h2 id="menu-content">Menu content</h2>
|
||||
|
||||
@ -1387,7 +1391,7 @@
|
||||
|
||||
<h2 id="dropdown-options">Dropdown options</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">data-offset</code> or <code class="highlighter-rouge">data-reference</code> to change the location of the dropdown.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">data-offset</code> or <code class="language-plaintext highlighter-rouge">data-reference</code> to change the location of the dropdown.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex">
|
||||
@ -1444,15 +1448,15 @@
|
||||
|
||||
<h2 id="usage">Usage</h2>
|
||||
|
||||
<p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code class="highlighter-rouge">.show</code> class on the parent list item. The <code class="highlighter-rouge">data-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.</p>
|
||||
<p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code class="language-plaintext highlighter-rouge">.show</code> class on the parent list item. The <code class="language-plaintext highlighter-rouge">data-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>On touch-enabled devices, opening a dropdown adds empty (<code class="highlighter-rouge">$.noop</code>) <code class="highlighter-rouge">mouseover</code> handlers to the immediate children of the <code class="highlighter-rouge"><body></code> element. This admittedly ugly hack is necessary to work around a <a href="https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html">quirk in iOS’ event delegation</a>, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty <code class="highlighter-rouge">mouseover</code> handlers are removed.</p>
|
||||
<p>On touch-enabled devices, opening a dropdown adds empty (<code class="language-plaintext highlighter-rouge">$.noop</code>) <code class="language-plaintext highlighter-rouge">mouseover</code> handlers to the immediate children of the <code class="language-plaintext highlighter-rouge"><body></code> element. This admittedly ugly hack is necessary to work around a <a href="https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html">quirk in iOS’ event delegation</a>, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty <code class="language-plaintext highlighter-rouge">mouseover</code> handlers are removed.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">id=</span><span class="s">"dLabel"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
@ -1470,14 +1474,14 @@
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.dropdown-toggle</span><span class="dl">'</span><span class="p">).</span><span class="nx">dropdown</span><span class="p">()</span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h5 id="data-toggledropdown-still-required"><code class="highlighter-rouge">data-toggle="dropdown"</code> still required</h5>
|
||||
<h5 id="data-toggledropdown-still-required"><code class="language-plaintext highlighter-rouge">data-toggle="dropdown"</code> still required</h5>
|
||||
|
||||
<p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code class="highlighter-rouge">data-toggle="dropdown"</code> is always required to be present on the dropdown’s trigger element.</p>
|
||||
<p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code class="language-plaintext highlighter-rouge">data-toggle="dropdown"</code> is always required to be present on the dropdown’s trigger element.</p>
|
||||
</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 class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-offset=""</code>.</p>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="language-plaintext highlighter-rouge">data-</code>, as in <code class="language-plaintext highlighter-rouge">data-offset=""</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -1532,7 +1536,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>Note when <code class="highlighter-rouge">boundary</code> is set to any value other than <code class="highlighter-rouge">'scrollParent'</code>, the style <code class="highlighter-rouge">position: static</code> is applied to the <code class="highlighter-rouge">.dropdown</code> container.</p>
|
||||
<p>Note when <code class="language-plaintext highlighter-rouge">boundary</code> is set to any value other than <code class="language-plaintext highlighter-rouge">'scrollParent'</code>, the style <code class="language-plaintext highlighter-rouge">position: static</code> is applied to the <code class="language-plaintext highlighter-rouge">.dropdown</code> container.</p>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
@ -1545,23 +1549,23 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().dropdown('toggle')</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$().dropdown('toggle')</code></td>
|
||||
<td>Toggles the dropdown menu of a given navbar or tabbed navigation.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().dropdown('show')</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$().dropdown('show')</code></td>
|
||||
<td>Shows the dropdown menu of a given navbar or tabbed navigation.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().dropdown('hide')</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$().dropdown('hide')</code></td>
|
||||
<td>Hides the dropdown menu of a given navbar or tabbed navigation.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().dropdown('update')</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$().dropdown('update')</code></td>
|
||||
<td>Updates the position of an element’s dropdown.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().dropdown('dispose')</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$().dropdown('dispose')</code></td>
|
||||
<td>Destroys an element’s dropdown.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -1569,8 +1573,8 @@
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
|
||||
<p>All dropdown events are fired at the <code class="highlighter-rouge">.dropdown-menu</code>’s parent element and have a <code class="highlighter-rouge">relatedTarget</code> property, whose value is the toggling anchor element.
|
||||
<code class="highlighter-rouge">hide.bs.dropdown</code> and <code class="highlighter-rouge">hidden.bs.dropdown</code> events have a <code class="highlighter-rouge">clickEvent</code> property (only when the original event type is <code class="highlighter-rouge">click</code>) that contains an Event Object for the click event.</p>
|
||||
<p>All dropdown events are fired at the <code class="language-plaintext highlighter-rouge">.dropdown-menu</code>’s parent element and have a <code class="language-plaintext highlighter-rouge">relatedTarget</code> property, whose value is the toggling anchor element.
|
||||
<code class="language-plaintext highlighter-rouge">hide.bs.dropdown</code> and <code class="language-plaintext highlighter-rouge">hidden.bs.dropdown</code> events have a <code class="language-plaintext highlighter-rouge">clickEvent</code> property (only when the original event type is <code class="language-plaintext highlighter-rouge">click</code>) that contains an Event Object for the click event.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
@ -1581,19 +1585,19 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">show.bs.dropdown</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">show.bs.dropdown</code></td>
|
||||
<td>This event fires immediately when the show instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">shown.bs.dropdown</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">shown.bs.dropdown</code></td>
|
||||
<td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">hide.bs.dropdown</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">hide.bs.dropdown</code></td>
|
||||
<td>This event is fired immediately when the hide instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">hidden.bs.dropdown</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">hidden.bs.dropdown</code></td>
|
||||
<td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -1609,6 +1613,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/forms/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -538,7 +539,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/forms.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Forms</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -546,7 +550,7 @@
|
||||
|
||||
<p>Bootstrap’s form controls expand on <a href="/docs/4.5/content/reboot/#forms">our Rebooted form styles</a> with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.</p>
|
||||
|
||||
<p>Be sure to use an appropriate <code class="highlighter-rouge">type</code> attribute on all inputs (e.g., <code class="highlighter-rouge">email</code> for email address or <code class="highlighter-rouge">number</code> for numerical information) to take advantage of newer input controls like email verification, number selection, and more.</p>
|
||||
<p>Be sure to use an appropriate <code class="language-plaintext highlighter-rouge">type</code> attribute on all inputs (e.g., <code class="language-plaintext highlighter-rouge">email</code> for email address or <code class="language-plaintext highlighter-rouge">number</code> for numerical information) to take advantage of newer input controls like email verification, number selection, and more.</p>
|
||||
|
||||
<p>Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.</p>
|
||||
|
||||
@ -587,9 +591,9 @@
|
||||
|
||||
<h2 id="form-controls">Form controls</h2>
|
||||
|
||||
<p>Textual form controls—like <code class="highlighter-rouge"><input></code>s, <code class="highlighter-rouge"><select></code>s, and <code class="highlighter-rouge"><textarea></code>s—are styled with the <code class="highlighter-rouge">.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
|
||||
<p>Textual form controls—like <code class="language-plaintext highlighter-rouge"><input></code>s, <code class="language-plaintext highlighter-rouge"><select></code>s, and <code class="language-plaintext highlighter-rouge"><textarea></code>s—are styled with the <code class="language-plaintext highlighter-rouge">.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
|
||||
|
||||
<p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code class="highlighter-rouge"><select></code>s.</p>
|
||||
<p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code class="language-plaintext highlighter-rouge"><select></code>s.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -654,7 +658,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<p>For file inputs, swap the <code class="highlighter-rouge">.form-control</code> for <code class="highlighter-rouge">.form-control-file</code>.</p>
|
||||
<p>For file inputs, swap the <code class="language-plaintext highlighter-rouge">.form-control</code> for <code class="language-plaintext highlighter-rouge">.form-control-file</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -673,7 +677,7 @@
|
||||
|
||||
<h3 id="sizing">Sizing</h3>
|
||||
|
||||
<p>Set heights using classes like <code class="highlighter-rouge">.form-control-lg</code> and <code class="highlighter-rouge">.form-control-sm</code>.</p>
|
||||
<p>Set heights using classes like <code class="language-plaintext highlighter-rouge">.form-control-lg</code> and <code class="language-plaintext highlighter-rouge">.form-control-sm</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" />
|
||||
@ -707,7 +711,7 @@
|
||||
|
||||
<h3 id="readonly">Readonly</h3>
|
||||
|
||||
<p>Add the <code class="highlighter-rouge">readonly</code> boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
|
||||
<p>Add the <code class="language-plaintext highlighter-rouge">readonly</code> boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<input class="form-control" type="text" placeholder="Readonly input here..." readonly="" />
|
||||
@ -716,7 +720,7 @@
|
||||
|
||||
<h3 id="readonly-plain-text">Readonly plain text</h3>
|
||||
|
||||
<p>If you want to have <code class="highlighter-rouge"><input readonly></code> elements in your form styled as plain text, use the <code class="highlighter-rouge">.form-control-plaintext</code> class to remove the default form field styling and preserve the correct margin and padding.</p>
|
||||
<p>If you want to have <code class="language-plaintext highlighter-rouge"><input readonly></code> elements in your form styled as plain text, use the <code class="language-plaintext highlighter-rouge">.form-control-plaintext</code> class to remove the default form field styling and preserve the correct margin and padding.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -776,7 +780,7 @@
|
||||
|
||||
<h2 id="range-inputs">Range Inputs</h2>
|
||||
|
||||
<p>Set horizontally scrollable range inputs using <code class="highlighter-rouge">.form-control-range</code>.</p>
|
||||
<p>Set horizontally scrollable range inputs using <code class="language-plaintext highlighter-rouge">.form-control-range</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -795,15 +799,15 @@
|
||||
|
||||
<h2 id="checkboxes-and-radios">Checkboxes and radios</h2>
|
||||
|
||||
<p>Default checkboxes and radios are improved upon with the help of <code class="highlighter-rouge">.form-check</code>, <strong>a single class for both input types that improves the layout and behavior of their HTML elements</strong>. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
|
||||
<p>Default checkboxes and radios are improved upon with the help of <code class="language-plaintext highlighter-rouge">.form-check</code>, <strong>a single class for both input types that improves the layout and behavior of their HTML elements</strong>. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
|
||||
|
||||
<p>Disabled checkboxes and radios are supported. The <code class="highlighter-rouge">disabled</code> attribute will apply a lighter color to help indicate the input’s state.</p>
|
||||
<p>Disabled checkboxes and radios are supported. The <code class="language-plaintext highlighter-rouge">disabled</code> attribute will apply a lighter color to help indicate the input’s state.</p>
|
||||
|
||||
<p>Checkboxes and radio buttons support HTML-based form validation and provide concise, accessible labels. As such, our <code class="highlighter-rouge"><input></code>s and <code class="highlighter-rouge"><label></code>s are sibling elements as opposed to an <code class="highlighter-rouge"><input></code> within a <code class="highlighter-rouge"><label></code>. This is slightly more verbose as you must specify <code class="highlighter-rouge">id</code> and <code class="highlighter-rouge">for</code> attributes to relate the <code class="highlighter-rouge"><input></code> and <code class="highlighter-rouge"><label></code>.</p>
|
||||
<p>Checkboxes and radio buttons support HTML-based form validation and provide concise, accessible labels. As such, our <code class="language-plaintext highlighter-rouge"><input></code>s and <code class="language-plaintext highlighter-rouge"><label></code>s are sibling elements as opposed to an <code class="language-plaintext highlighter-rouge"><input></code> within a <code class="language-plaintext highlighter-rouge"><label></code>. This is slightly more verbose as you must specify <code class="language-plaintext highlighter-rouge">id</code> and <code class="language-plaintext highlighter-rouge">for</code> attributes to relate the <code class="language-plaintext highlighter-rouge"><input></code> and <code class="language-plaintext highlighter-rouge"><label></code>.</p>
|
||||
|
||||
<h3 id="default-stacked">Default (stacked)</h3>
|
||||
|
||||
<p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with <code class="highlighter-rouge">.form-check</code>.</p>
|
||||
<p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with <code class="language-plaintext highlighter-rouge">.form-check</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="form-check">
|
||||
@ -873,7 +877,7 @@
|
||||
|
||||
<h3 id="inline">Inline</h3>
|
||||
|
||||
<p>Group checkboxes or radios on the same horizontal row by adding <code class="highlighter-rouge">.form-check-inline</code> to any <code class="highlighter-rouge">.form-check</code>.</p>
|
||||
<p>Group checkboxes or radios on the same horizontal row by adding <code class="language-plaintext highlighter-rouge">.form-check-inline</code> to any <code class="language-plaintext highlighter-rouge">.form-check</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="form-check form-check-inline">
|
||||
@ -931,7 +935,7 @@
|
||||
|
||||
<h3 id="without-labels">Without labels</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.position-static</code> to inputs within <code class="highlighter-rouge">.form-check</code> that don’t have any label text. Remember to still provide some form of label for assistive technologies (for instance, using <code class="highlighter-rouge">aria-label</code>).</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.position-static</code> to inputs within <code class="language-plaintext highlighter-rouge">.form-check</code> that don’t have any label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using <code class="language-plaintext highlighter-rouge">aria-label</code>).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="form-check">
|
||||
@ -950,11 +954,11 @@
|
||||
|
||||
<h2 id="layout">Layout</h2>
|
||||
|
||||
<p>Since Bootstrap applies <code class="highlighter-rouge">display: block</code> and <code class="highlighter-rouge">width: 100%</code> to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.</p>
|
||||
<p>Since Bootstrap applies <code class="language-plaintext highlighter-rouge">display: block</code> and <code class="language-plaintext highlighter-rouge">width: 100%</code> to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.</p>
|
||||
|
||||
<h3 id="form-groups">Form groups</h3>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.form-group</code> class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies <code class="highlighter-rouge">margin-bottom</code>, but it picks up additional styles in <code class="highlighter-rouge">.form-inline</code> as needed. Use it with <code class="highlighter-rouge"><fieldset></code>s, <code class="highlighter-rouge"><div></code>s, or nearly any other element.</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">.form-group</code> class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies <code class="language-plaintext highlighter-rouge">margin-bottom</code>, but it picks up additional styles in <code class="language-plaintext highlighter-rouge">.form-inline</code> as needed. Use it with <code class="language-plaintext highlighter-rouge"><fieldset></code>s, <code class="language-plaintext highlighter-rouge"><div></code>s, or nearly any other element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -1008,7 +1012,7 @@
|
||||
|
||||
<h4 id="form-row">Form row</h4>
|
||||
|
||||
<p>You may also swap <code class="highlighter-rouge">.row</code> for <code class="highlighter-rouge">.form-row</code>, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.</p>
|
||||
<p>You may also swap <code class="language-plaintext highlighter-rouge">.row</code> for <code class="language-plaintext highlighter-rouge">.form-row</code>, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -1132,9 +1136,9 @@
|
||||
|
||||
<h4 id="horizontal-form">Horizontal form</h4>
|
||||
|
||||
<p>Create horizontal forms with the grid by adding the <code class="highlighter-rouge">.row</code> class to form groups and using the <code class="highlighter-rouge">.col-*-*</code> classes to specify the width of your labels and controls. Be sure to add <code class="highlighter-rouge">.col-form-label</code> to your <code class="highlighter-rouge"><label></code>s as well so they’re vertically centered with their associated form controls.</p>
|
||||
<p>Create horizontal forms with the grid by adding the <code class="language-plaintext highlighter-rouge">.row</code> class to form groups and using the <code class="language-plaintext highlighter-rouge">.col-*-*</code> classes to specify the width of your labels and controls. Be sure to add <code class="language-plaintext highlighter-rouge">.col-form-label</code> to your <code class="language-plaintext highlighter-rouge"><label></code>s as well so they’re vertically centered with their associated form controls.</p>
|
||||
|
||||
<p>At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the <code class="highlighter-rouge">padding-top</code> on our stacked radio inputs label to better align the text baseline.</p>
|
||||
<p>At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the <code class="language-plaintext highlighter-rouge">padding-top</code> on our stacked radio inputs label to better align the text baseline.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -1251,7 +1255,7 @@
|
||||
|
||||
<h5 id="horizontal-form-label-sizing">Horizontal form label sizing</h5>
|
||||
|
||||
<p>Be sure to use <code class="highlighter-rouge">.col-form-label-sm</code> or <code class="highlighter-rouge">.col-form-label-lg</code> to your <code class="highlighter-rouge"><label></code>s or <code class="highlighter-rouge"><legend></code>s to correctly follow the size of <code class="highlighter-rouge">.form-control-lg</code> and <code class="highlighter-rouge">.form-control-sm</code>.</p>
|
||||
<p>Be sure to use <code class="language-plaintext highlighter-rouge">.col-form-label-sm</code> or <code class="language-plaintext highlighter-rouge">.col-form-label-lg</code> to your <code class="language-plaintext highlighter-rouge"><label></code>s or <code class="language-plaintext highlighter-rouge"><legend></code>s to correctly follow the size of <code class="language-plaintext highlighter-rouge">.form-control-lg</code> and <code class="language-plaintext highlighter-rouge">.form-control-sm</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -1298,7 +1302,7 @@
|
||||
|
||||
<h4 id="column-sizing">Column sizing</h4>
|
||||
|
||||
<p>As shown in the previous examples, our grid system allows you to place any number of <code class="highlighter-rouge">.col</code>s within a <code class="highlighter-rouge">.row</code> or <code class="highlighter-rouge">.form-row</code>. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining <code class="highlighter-rouge">.col</code>s equally split the rest, with specific column classes like <code class="highlighter-rouge">.col-7</code>.</p>
|
||||
<p>As shown in the previous examples, our grid system allows you to place any number of <code class="language-plaintext highlighter-rouge">.col</code>s within a <code class="language-plaintext highlighter-rouge">.row</code> or <code class="language-plaintext highlighter-rouge">.form-row</code>. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining <code class="language-plaintext highlighter-rouge">.col</code>s equally split the rest, with specific column classes like <code class="language-plaintext highlighter-rouge">.col-7</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -1331,7 +1335,7 @@
|
||||
|
||||
<h4 id="auto-sizing">Auto-sizing</h4>
|
||||
|
||||
<p>The example below uses a flexbox utility to vertically center the contents and changes <code class="highlighter-rouge">.col</code> to <code class="highlighter-rouge">.col-auto</code> so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.</p>
|
||||
<p>The example below uses a flexbox utility to vertically center the contents and changes <code class="language-plaintext highlighter-rouge">.col</code> to <code class="language-plaintext highlighter-rouge">.col-auto</code> so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -1504,15 +1508,15 @@
|
||||
|
||||
<h3 id="inline-forms">Inline forms</h3>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.form-inline</code> class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.</p>
|
||||
<p>Use the <code class="language-plaintext highlighter-rouge">.form-inline</code> class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.</p>
|
||||
|
||||
<ul>
|
||||
<li>Controls are <code class="highlighter-rouge">display: flex</code>, collapsing any HTML white space and allowing you to provide alignment control with <a href="/docs/4.5/utilities/spacing/">spacing</a> and <a href="/docs/4.5/utilities/flex/">flexbox</a> utilities.</li>
|
||||
<li>Controls and input groups receive <code class="highlighter-rouge">width: auto</code> to override the Bootstrap default <code class="highlighter-rouge">width: 100%</code>.</li>
|
||||
<li>Controls are <code class="language-plaintext highlighter-rouge">display: flex</code>, collapsing any HTML white space and allowing you to provide alignment control with <a href="/docs/4.5/utilities/spacing/">spacing</a> and <a href="/docs/4.5/utilities/flex/">flexbox</a> utilities.</li>
|
||||
<li>Controls and input groups receive <code class="language-plaintext highlighter-rouge">width: auto</code> to override the Bootstrap default <code class="language-plaintext highlighter-rouge">width: 100%</code>.</li>
|
||||
<li>Controls <strong>only appear inline in viewports that are at least 576px wide</strong> to account for narrow viewports on mobile devices.</li>
|
||||
</ul>
|
||||
|
||||
<p>You may need to manually address the width and alignment of individual form controls with <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> (as shown below). Lastly, be sure to always include a <code class="highlighter-rouge"><label></code> with each form control, even if you need to hide it from non-screenreader visitors with <code class="highlighter-rouge">.sr-only</code>.</p>
|
||||
<p>You may need to manually address the width and alignment of individual form controls with <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> (as shown below). Lastly, be sure to always include a <code class="language-plaintext highlighter-rouge"><label></code> with each form control, even if you need to hide it from non-screenreader visitors with <code class="language-plaintext highlighter-rouge">.sr-only</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="form-inline">
|
||||
@ -1598,20 +1602,20 @@
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="alternatives-to-hidden-labels">Alternatives to hidden labels</h5>
|
||||
<p>Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the <code class="highlighter-rouge">.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code class="highlighter-rouge">aria-label</code>, <code class="highlighter-rouge">aria-labelledby</code> or <code class="highlighter-rouge">title</code> attribute. If none of these are present, assistive technologies may resort to using the <code class="highlighter-rouge">placeholder</code> attribute, if present, but note that use of <code class="highlighter-rouge">placeholder</code> as a replacement for other labelling methods is not advised.</p>
|
||||
<p>Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the <code class="language-plaintext highlighter-rouge">.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code class="language-plaintext highlighter-rouge">aria-label</code>, <code class="language-plaintext highlighter-rouge">aria-labelledby</code> or <code class="language-plaintext highlighter-rouge">title</code> attribute. If none of these are present, assistive technologies may resort to using the <code class="language-plaintext highlighter-rouge">placeholder</code> attribute, if present, but note that use of <code class="language-plaintext highlighter-rouge">placeholder</code> as a replacement for other labelling methods is not advised.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="help-text">Help text</h2>
|
||||
|
||||
<p>Block-level help text in forms can be created using <code class="highlighter-rouge">.form-text</code> (previously known as <code class="highlighter-rouge">.help-block</code> in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like <code class="highlighter-rouge">.text-muted</code>.</p>
|
||||
<p>Block-level help text in forms can be created using <code class="language-plaintext highlighter-rouge">.form-text</code> (previously known as <code class="language-plaintext highlighter-rouge">.help-block</code> in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like <code class="language-plaintext highlighter-rouge">.text-muted</code>.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="associating-help-text-with-form-controls">Associating help text with form controls</h5>
|
||||
|
||||
<p>Help text should be explicitly associated with the form control it relates to using the <code class="highlighter-rouge">aria-describedby</code> attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.</p>
|
||||
<p>Help text should be explicitly associated with the form control it relates to using the <code class="language-plaintext highlighter-rouge">aria-describedby</code> attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.</p>
|
||||
</div>
|
||||
|
||||
<p>Help text below inputs can be styled with <code class="highlighter-rouge">.form-text</code>. This class includes <code class="highlighter-rouge">display: block</code> and adds some top margin for easy spacing from the inputs above.</p>
|
||||
<p>Help text below inputs can be styled with <code class="language-plaintext highlighter-rouge">.form-text</code>. This class includes <code class="language-plaintext highlighter-rouge">display: block</code> and adds some top margin for easy spacing from the inputs above.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="inputPassword5">Password</label>
|
||||
@ -1626,7 +1630,7 @@
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
|
||||
<span class="nt"></small></span></code></pre></figure>
|
||||
|
||||
<p>Inline text can use any typical inline HTML element (be it a <code class="highlighter-rouge"><small></code>, <code class="highlighter-rouge"><span></code>, or something else) with nothing more than a utility class.</p>
|
||||
<p>Inline text can use any typical inline HTML element (be it a <code class="language-plaintext highlighter-rouge"><small></code>, <code class="language-plaintext highlighter-rouge"><span></code>, or something else) with nothing more than a utility class.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="form-inline">
|
||||
@ -1651,11 +1655,11 @@
|
||||
|
||||
<h2 id="disabled-forms">Disabled forms</h2>
|
||||
|
||||
<p>Add the <code class="highlighter-rouge">disabled</code> boolean attribute on an input to prevent user interactions and make it appear lighter.</p>
|
||||
<p>Add the <code class="language-plaintext highlighter-rouge">disabled</code> boolean attribute on an input to prevent user interactions and make it appear lighter.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"disabledInput"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Disabled input here..."</span> <span class="na">disabled</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<p>Add the <code class="highlighter-rouge">disabled</code> attribute to a <code class="highlighter-rouge"><fieldset></code> to disable all the controls within.</p>
|
||||
<p>Add the <code class="language-plaintext highlighter-rouge">disabled</code> attribute to a <code class="language-plaintext highlighter-rouge"><fieldset></code> to disable all the controls within.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -1709,13 +1713,15 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="caveat-with-anchors">Caveat with anchors</h5>
|
||||
|
||||
<p>By default, browsers will treat all native form controls (<code class="highlighter-rouge"><input></code>, <code class="highlighter-rouge"><select></code> and <code class="highlighter-rouge"><button></code> elements) inside a <code class="highlighter-rouge"><fieldset disabled></code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code class="highlighter-rouge"><a ... class="btn btn-*"></code> elements, these will only be given a style of <code class="highlighter-rouge">pointer-events: none</code>. As noted in the section about <a href="/docs/4.5/components/buttons/#disabled-state">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
|
||||
<p>Browsers treat all native form controls (<code class="language-plaintext highlighter-rouge"><input></code>, <code class="language-plaintext highlighter-rouge"><select></code>, and <code class="language-plaintext highlighter-rouge"><button></code> elements) inside a <code class="language-plaintext highlighter-rouge"><fieldset disabled></code> as disabled, preventing both keyboard and mouse interactions on them.</p>
|
||||
|
||||
<p>However, if your form also includes custom button-like elements such as <code class="language-plaintext highlighter-rouge"><a ... class="btn btn-*"></code>, these will only be given a style of <code class="language-plaintext highlighter-rouge">pointer-events: none</code>. As noted in the section about <a href="/docs/4.5/components/buttons/#disabled-state">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Internet Explorer 10. The anchor-based controls will also still be focusable and operable using the keyboard. You must manually modify these controls by adding <code class="language-plaintext highlighter-rouge">tabindex="-1"</code> to prevent them from receiving focus and <code class="language-plaintext highlighter-rouge">aria-disabled="disabled"</code> to signal their state to assistive technologies.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4 id="cross-browser-compatibility">Cross-browser compatibility</h4>
|
||||
|
||||
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the <code class="highlighter-rouge">disabled</code> attribute on a <code class="highlighter-rouge"><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
|
||||
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the <code class="language-plaintext highlighter-rouge">disabled</code> attribute on a <code class="language-plaintext highlighter-rouge"><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="validation">Validation</h2>
|
||||
@ -1723,12 +1729,12 @@
|
||||
<p>Provide valuable, actionable feedback to your users with HTML5 form validation–<a href="https://caniuse.com/#feat=form-validation">available in all our supported browsers</a>. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<p>We currently recommend using custom validation styles, as native browser default validation messages are not consistently exposed to assistive technologies in all browsers (most notably, Chrome on desktop and mobile).</p>
|
||||
<p>We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we’d recommend either using the server-side option or the default browser validation method.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="input-group-validation">Input group validation</h5>
|
||||
<p>Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the <code class="highlighter-rouge">.input-group</code> that has <code class="highlighter-rouge">.is-{valid|invalid}</code>. Placing feedback messages within input groups breaks the <code class="highlighter-rouge">border-radius</code>. <a href="#input-group-validation-workaround">See this workaround</a>.</p>
|
||||
<p>Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the <code class="language-plaintext highlighter-rouge">.input-group</code> that has <code class="language-plaintext highlighter-rouge">.is-{valid|invalid}</code>. Placing feedback messages within input groups breaks the <code class="language-plaintext highlighter-rouge">border-radius</code>. <a href="#input-group-validation-workaround">See this workaround</a>.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="how-it-works">How it works</h3>
|
||||
@ -1736,23 +1742,23 @@
|
||||
<p>Here’s how form validation works with Bootstrap:</p>
|
||||
|
||||
<ul>
|
||||
<li>HTML form validation is applied via CSS’s two pseudo-classes, <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code>. It applies to <code class="highlighter-rouge"><input></code>, <code class="highlighter-rouge"><select></code>, and <code class="highlighter-rouge"><textarea></code> elements.</li>
|
||||
<li>Bootstrap scopes the <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> styles to parent <code class="highlighter-rouge">.was-validated</code> class, usually applied to the <code class="highlighter-rouge"><form></code>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).</li>
|
||||
<li>To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the <code class="highlighter-rouge">.was-validated</code> class from the <code class="highlighter-rouge"><form></code> again after submission.</li>
|
||||
<li>As a fallback, <code class="highlighter-rouge">.is-invalid</code> and <code class="highlighter-rouge">.is-valid</code> classes may be used instead of the pseudo-classes for <a href="#server-side">server side validation</a>. They do not require a <code class="highlighter-rouge">.was-validated</code> parent class.</li>
|
||||
<li>Due to constraints in how CSS works, we cannot (at present) apply styles to a <code class="highlighter-rouge"><label></code> that comes before a form control in the DOM without the help of custom JavaScript.</li>
|
||||
<li>HTML form validation is applied via CSS’s two pseudo-classes, <code class="language-plaintext highlighter-rouge">:invalid</code> and <code class="language-plaintext highlighter-rouge">:valid</code>. It applies to <code class="language-plaintext highlighter-rouge"><input></code>, <code class="language-plaintext highlighter-rouge"><select></code>, and <code class="language-plaintext highlighter-rouge"><textarea></code> elements.</li>
|
||||
<li>Bootstrap scopes the <code class="language-plaintext highlighter-rouge">:invalid</code> and <code class="language-plaintext highlighter-rouge">:valid</code> styles to parent <code class="language-plaintext highlighter-rouge">.was-validated</code> class, usually applied to the <code class="language-plaintext highlighter-rouge"><form></code>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).</li>
|
||||
<li>To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the <code class="language-plaintext highlighter-rouge">.was-validated</code> class from the <code class="language-plaintext highlighter-rouge"><form></code> again after submission.</li>
|
||||
<li>As a fallback, <code class="language-plaintext highlighter-rouge">.is-invalid</code> and <code class="language-plaintext highlighter-rouge">.is-valid</code> classes may be used instead of the pseudo-classes for <a href="#server-side">server side validation</a>. They do not require a <code class="language-plaintext highlighter-rouge">.was-validated</code> parent class.</li>
|
||||
<li>Due to constraints in how CSS works, we cannot (at present) apply styles to a <code class="language-plaintext highlighter-rouge"><label></code> that comes before a form control in the DOM without the help of custom JavaScript.</li>
|
||||
<li>All modern browsers support the <a href="https://www.w3.org/TR/html5/sec-forms.html#the-constraint-validation-api">constraint validation API</a>, a series of JavaScript methods for validating form controls.</li>
|
||||
<li>Feedback messages may utilize the <a href="#browser-defaults">browser defaults</a> (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.</li>
|
||||
<li>You may provide custom validity messages with <code class="highlighter-rouge">setCustomValidity</code> in JavaScript.</li>
|
||||
<li>You may provide custom validity messages with <code class="language-plaintext highlighter-rouge">setCustomValidity</code> in JavaScript.</li>
|
||||
</ul>
|
||||
|
||||
<p>With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.</p>
|
||||
|
||||
<h3 id="custom-styles">Custom styles</h3>
|
||||
|
||||
<p>For custom Bootstrap form validation messages, you’ll need to add the <code class="highlighter-rouge">novalidate</code> boolean attribute to your <code class="highlighter-rouge"><form></code>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> styles applied to your form controls.</p>
|
||||
<p>For custom Bootstrap form validation messages, you’ll need to add the <code class="language-plaintext highlighter-rouge">novalidate</code> boolean attribute to your <code class="language-plaintext highlighter-rouge"><form></code>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the <code class="language-plaintext highlighter-rouge">:invalid</code> and <code class="language-plaintext highlighter-rouge">:valid</code> styles applied to your form controls.</p>
|
||||
|
||||
<p>Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <code class="highlighter-rouge"><select></code>s are only available with <code class="highlighter-rouge">.custom-select</code>, and not <code class="highlighter-rouge">.form-control</code>.</p>
|
||||
<p>Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <code class="language-plaintext highlighter-rouge"><select></code>s are only available with <code class="language-plaintext highlighter-rouge">.custom-select</code>, and not <code class="language-plaintext highlighter-rouge">.form-control</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="needs-validation" novalidate="">
|
||||
@ -1998,7 +2004,9 @@
|
||||
|
||||
<h3 id="server-side">Server side</h3>
|
||||
|
||||
<p>We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with <code class="highlighter-rouge">.is-invalid</code> and <code class="highlighter-rouge">.is-valid</code>. Note that <code class="highlighter-rouge">.invalid-feedback</code> is also supported with these classes.</p>
|
||||
<p>We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with <code class="language-plaintext highlighter-rouge">.is-invalid</code> and <code class="language-plaintext highlighter-rouge">.is-valid</code>. Note that <code class="language-plaintext highlighter-rouge">.invalid-feedback</code> is also supported with these classes.</p>
|
||||
|
||||
<p>For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using <code class="language-plaintext highlighter-rouge">aria-describedby</code>. This attribute allows more than one <code class="language-plaintext highlighter-rouge">id</code> to be referenced, in case the field already points to additional form text.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
@ -2021,36 +2029,36 @@
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationServer03">City</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer03" required="" />
|
||||
<div class="invalid-feedback">
|
||||
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required="" />
|
||||
<div id="validationServer03Feedback" class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationServer04">State</label>
|
||||
<select class="custom-select is-invalid" id="validationServer04" required="">
|
||||
<select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required="">
|
||||
<option selected="" disabled="" value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
<div id="validationServer04Feedback" class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationServer05">Zip</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer05" required="" />
|
||||
<div class="invalid-feedback">
|
||||
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required="" />
|
||||
<div id="validationServer05Feedback" class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required="" />
|
||||
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required="" />
|
||||
<label class="form-check-label" for="invalidCheck3">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
<div id="invalidCheck3Feedback" class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
@ -2078,36 +2086,36 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer03"</span><span class="nt">></span>City<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer03"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer03"</span> <span class="na">aria-describedby=</span><span class="s">"validationServer03Feedback"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"validationServer03Feedback"</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please provide a valid city.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer04"</span><span class="nt">></span>State<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer04"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer04"</span> <span class="na">aria-describedby=</span><span class="s">"validationServer04Feedback"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span> <span class="na">disabled</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>...<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"validationServer04Feedback"</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please select a valid state.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer05"</span><span class="nt">></span>Zip<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer05"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer05"</span> <span class="na">aria-describedby=</span><span class="s">"validationServer05Feedback"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"validationServer05Feedback"</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please provide a valid zip.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input is-invalid"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck3"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input is-invalid"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck3"</span> <span class="na">aria-describedby=</span><span class="s">"invalidCheck3Feedback"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"invalidCheck3"</span><span class="nt">></span>
|
||||
Agree to terms and conditions
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"invalidCheck3Feedback"</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
You must agree before submitting.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
@ -2120,11 +2128,11 @@
|
||||
<p>Validation styles are available for the following form controls and components:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge"><input></code>s and <code class="highlighter-rouge"><textarea></code>s with <code class="highlighter-rouge">.form-control</code></li>
|
||||
<li><code class="highlighter-rouge"><select></code>s with <code class="highlighter-rouge">.form-control</code> or <code class="highlighter-rouge">.custom-select</code></li>
|
||||
<li><code class="highlighter-rouge">.form-check</code>s</li>
|
||||
<li><code class="highlighter-rouge">.custom-checkbox</code>s and <code class="highlighter-rouge">.custom-radio</code>s</li>
|
||||
<li><code class="highlighter-rouge">.custom-file</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge"><input></code>s and <code class="language-plaintext highlighter-rouge"><textarea></code>s with <code class="language-plaintext highlighter-rouge">.form-control</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge"><select></code>s with <code class="language-plaintext highlighter-rouge">.form-control</code> or <code class="language-plaintext highlighter-rouge">.custom-select</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.form-check</code>s</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.custom-checkbox</code>s and <code class="language-plaintext highlighter-rouge">.custom-radio</code>s</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.custom-file</code></li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-example">
|
||||
@ -2298,7 +2306,7 @@
|
||||
|
||||
<h3 id="tooltips">Tooltips</h3>
|
||||
|
||||
<p>If your form layout allows it, you can swap the <code class="highlighter-rouge">.{valid|invalid}-feedback</code> classes for <code class="highlighter-rouge">.{valid|invalid}-tooltip</code> classes to display validation feedback in a styled tooltip. Be sure to have a parent with <code class="highlighter-rouge">position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.</p>
|
||||
<p>If your form layout allows it, you can swap the <code class="language-plaintext highlighter-rouge">.{valid|invalid}-feedback</code> classes for <code class="language-plaintext highlighter-rouge">.{valid|invalid}-tooltip</code> classes to display validation feedback in a styled tooltip. Be sure to have a parent with <code class="language-plaintext highlighter-rouge">position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="needs-validation" novalidate="">
|
||||
@ -2395,9 +2403,9 @@
|
||||
|
||||
<h3 id="customizing">Customizing</h3>
|
||||
|
||||
<p>Validation states can be customized via Sass with the <code class="highlighter-rouge">$form-validation-states</code> map. Located in our <code class="highlighter-rouge">_variables.scss</code> file, this Sass map is looped over to generate the default <code class="highlighter-rouge">valid</code>/<code class="highlighter-rouge">invalid</code> validation states. Included is a nested map for customizing each state’s color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.</p>
|
||||
<p>Validation states can be customized via Sass with the <code class="language-plaintext highlighter-rouge">$form-validation-states</code> map. Located in our <code class="language-plaintext highlighter-rouge">_variables.scss</code> file, this Sass map is looped over to generate the default <code class="language-plaintext highlighter-rouge">valid</code>/<code class="language-plaintext highlighter-rouge">invalid</code> validation states. Included is a nested map for customizing each state’s color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.</p>
|
||||
|
||||
<p>Please note that we do not recommend customizing these values without also modifying the <code class="highlighter-rouge">form-validation-state</code> mixin.</p>
|
||||
<p>Please note that we do not recommend customizing these values without also modifying the <code class="language-plaintext highlighter-rouge">form-validation-state</code> mixin.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Sass map from `_variables.scss`</span>
|
||||
<span class="c1">// Override this and recompile your Sass to generate different states</span>
|
||||
@ -2424,7 +2432,7 @@
|
||||
|
||||
<h3 id="input-group-validation-workaround">Input group validation workaround</h3>
|
||||
|
||||
<p>We’re unable to resolve the broken <code class="highlighter-rouge">border-radius</code> of input groups with validation due to selector limitations, so manual overrides are required. When you’re using a standard input group and don’t customize the default border radius values, add <code class="highlighter-rouge">.rounded-right</code> to the elements with the broken <code class="highlighter-rouge">border-radius</code>.</p>
|
||||
<p>We’re unable to resolve the broken <code class="language-plaintext highlighter-rouge">border-radius</code> of input groups with validation due to selector limitations, so manual overrides are required. When you’re using a standard input group and don’t customize the default border radius values, add <code class="language-plaintext highlighter-rouge">.rounded-right</code> to the elements with the broken <code class="language-plaintext highlighter-rouge">border-radius</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
@ -2448,7 +2456,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>When you are using a small or large input group or customizing the default <code class="highlighter-rouge">border-radius</code> values, add custom CSS to the element with the busted <code class="highlighter-rouge">border-radius</code>.</p>
|
||||
<p>When you are using a small or large input group or customizing the default <code class="language-plaintext highlighter-rouge">border-radius</code> values, add custom CSS to the element with the busted <code class="language-plaintext highlighter-rouge">border-radius</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/* Change values to match the radius of your form control */</span>
|
||||
<span class="nc">.fix-rounded-right</span> <span class="p">{</span>
|
||||
@ -2484,11 +2492,11 @@
|
||||
|
||||
<h3 id="checkboxes-and-radios-1">Checkboxes and radios</h3>
|
||||
|
||||
<p>Each checkbox and radio <code class="highlighter-rouge"><input></code> and <code class="highlighter-rouge"><label></code> pairing is wrapped in a <code class="highlighter-rouge"><div></code> to create our custom control. Structurally, this is the same approach as our default <code class="highlighter-rouge">.form-check</code>.</p>
|
||||
<p>Each checkbox and radio <code class="language-plaintext highlighter-rouge"><input></code> and <code class="language-plaintext highlighter-rouge"><label></code> pairing is wrapped in a <code class="language-plaintext highlighter-rouge"><div></code> to create our custom control. Structurally, this is the same approach as our default <code class="language-plaintext highlighter-rouge">.form-check</code>.</p>
|
||||
|
||||
<p>We use the sibling selector (<code class="highlighter-rouge">~</code>) for all our <code class="highlighter-rouge"><input></code> states—like <code class="highlighter-rouge">:checked</code>—to properly style our custom form indicator. When combined with the <code class="highlighter-rouge">.custom-control-label</code> class, we can also style the text for each item based on the <code class="highlighter-rouge"><input></code>’s state.</p>
|
||||
<p>We use the sibling selector (<code class="language-plaintext highlighter-rouge">~</code>) for all our <code class="language-plaintext highlighter-rouge"><input></code> states—like <code class="language-plaintext highlighter-rouge">:checked</code>—to properly style our custom form indicator. When combined with the <code class="language-plaintext highlighter-rouge">.custom-control-label</code> class, we can also style the text for each item based on the <code class="language-plaintext highlighter-rouge"><input></code>’s state.</p>
|
||||
|
||||
<p>We hide the default <code class="highlighter-rouge"><input></code> with <code class="highlighter-rouge">opacity</code> and use the <code class="highlighter-rouge">.custom-control-label</code> to build a new custom form indicator in its place with <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code>. Unfortunately we can’t build a custom one from just the <code class="highlighter-rouge"><input></code> because CSS’s <code class="highlighter-rouge">content</code> doesn’t work on that element.</p>
|
||||
<p>We hide the default <code class="language-plaintext highlighter-rouge"><input></code> with <code class="language-plaintext highlighter-rouge">opacity</code> and use the <code class="language-plaintext highlighter-rouge">.custom-control-label</code> to build a new custom form indicator in its place with <code class="language-plaintext highlighter-rouge">::before</code> and <code class="language-plaintext highlighter-rouge">::after</code>. Unfortunately we can’t build a custom one from just the <code class="language-plaintext highlighter-rouge"><input></code> because CSS’s <code class="language-plaintext highlighter-rouge">content</code> doesn’t work on that element.</p>
|
||||
|
||||
<p>In the checked states, we use <strong>base64 embedded SVG icons</strong> from <a href="https://github.com/iconic/open-iconic">Open Iconic</a>. This provides us the best control for styling and positioning across browsers and devices.</p>
|
||||
|
||||
@ -2505,7 +2513,7 @@
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customCheck1"</span><span class="nt">></span>Check this custom checkbox<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Custom checkboxes can also utilize the <code class="highlighter-rouge">:indeterminate</code> pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).</p>
|
||||
<p>Custom checkboxes can also utilize the <code class="language-plaintext highlighter-rouge">:indeterminate</code> pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).</p>
|
||||
|
||||
<div class="bd-example bd-example-indeterminate">
|
||||
<div class="custom-control custom-checkbox">
|
||||
@ -2562,7 +2570,7 @@
|
||||
|
||||
<h4 id="disabled">Disabled</h4>
|
||||
|
||||
<p>Custom checkboxes and radios can also be disabled. Add the <code class="highlighter-rouge">disabled</code> boolean attribute to the <code class="highlighter-rouge"><input></code> and the custom indicator and label description will be automatically styled.</p>
|
||||
<p>Custom checkboxes and radios can also be disabled. Add the <code class="language-plaintext highlighter-rouge">disabled</code> boolean attribute to the <code class="language-plaintext highlighter-rouge"><input></code> and the custom indicator and label description will be automatically styled.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-control custom-checkbox">
|
||||
@ -2587,7 +2595,7 @@
|
||||
|
||||
<h3 id="switches">Switches</h3>
|
||||
|
||||
<p>A switch has the markup of a custom checkbox but uses the <code class="highlighter-rouge">.custom-switch</code> class to render a toggle switch. Switches also support the <code class="highlighter-rouge">disabled</code> attribute.</p>
|
||||
<p>A switch has the markup of a custom checkbox but uses the <code class="language-plaintext highlighter-rouge">.custom-switch</code> class to render a toggle switch. Switches also support the <code class="language-plaintext highlighter-rouge">disabled</code> attribute.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-control custom-switch">
|
||||
@ -2610,7 +2618,7 @@
|
||||
|
||||
<h3 id="select-menu">Select menu</h3>
|
||||
|
||||
<p>Custom <code class="highlighter-rouge"><select></code> menus need only a custom class, <code class="highlighter-rouge">.custom-select</code> to trigger the custom styles. Custom styles are limited to the <code class="highlighter-rouge"><select></code>’s initial appearance and cannot modify the <code class="highlighter-rouge"><option></code>s due to browser limitations.</p>
|
||||
<p>Custom <code class="language-plaintext highlighter-rouge"><select></code> menus need only a custom class, <code class="language-plaintext highlighter-rouge">.custom-select</code> to trigger the custom styles. Custom styles are limited to the <code class="language-plaintext highlighter-rouge"><select></code>’s initial appearance and cannot modify the <code class="language-plaintext highlighter-rouge"><option></code>s due to browser limitations.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<select class="custom-select">
|
||||
@ -2658,7 +2666,7 @@
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span></code></pre></figure>
|
||||
|
||||
<p>The <code class="highlighter-rouge">multiple</code> attribute is also supported:</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">multiple</code> attribute is also supported:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<select class="custom-select" multiple="">
|
||||
@ -2675,7 +2683,7 @@
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span></code></pre></figure>
|
||||
|
||||
<p>As is the <code class="highlighter-rouge">size</code> attribute:</p>
|
||||
<p>As is the <code class="language-plaintext highlighter-rouge">size</code> attribute:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<select class="custom-select" size="3">
|
||||
@ -2694,7 +2702,7 @@
|
||||
|
||||
<h3 id="range">Range</h3>
|
||||
|
||||
<p>Create custom <code class="highlighter-rouge"><input type="range"></code> controls with <code class="highlighter-rouge">.custom-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
|
||||
<p>Create custom <code class="language-plaintext highlighter-rouge"><input type="range"></code> controls with <code class="language-plaintext highlighter-rouge">.custom-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="customRange1">Example range</label>
|
||||
@ -2703,7 +2711,7 @@
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"customRange1"</span><span class="nt">></span>Example range<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"custom-range"</span> <span class="na">id=</span><span class="s">"customRange1"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<p>Range inputs have implicit values for <code class="highlighter-rouge">min</code> and <code class="highlighter-rouge">max</code>—<code class="highlighter-rouge">0</code> and <code class="highlighter-rouge">100</code>, respectively. You may specify new values for those using the <code class="highlighter-rouge">min</code> and <code class="highlighter-rouge">max</code> attributes.</p>
|
||||
<p>Range inputs have implicit values for <code class="language-plaintext highlighter-rouge">min</code> and <code class="language-plaintext highlighter-rouge">max</code>—<code class="language-plaintext highlighter-rouge">0</code> and <code class="language-plaintext highlighter-rouge">100</code>, respectively. You may specify new values for those using the <code class="language-plaintext highlighter-rouge">min</code> and <code class="language-plaintext highlighter-rouge">max</code> attributes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="customRange2">Example range</label>
|
||||
@ -2712,7 +2720,7 @@
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"customRange2"</span><span class="nt">></span>Example range<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"custom-range"</span> <span class="na">min=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"5"</span> <span class="na">id=</span><span class="s">"customRange2"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<p>By default, range inputs “snap” to integer values. To change this, you can specify a <code class="highlighter-rouge">step</code> value. In the example below, we double the number of steps by using <code class="highlighter-rouge">step="0.5"</code>.</p>
|
||||
<p>By default, range inputs “snap” to integer values. To change this, you can specify a <code class="language-plaintext highlighter-rouge">step</code> value. In the example below, we double the number of steps by using <code class="language-plaintext highlighter-rouge">step="0.5"</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="customRange3">Example range</label>
|
||||
@ -2740,18 +2748,18 @@
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFile"</span><span class="nt">></span>Choose file<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>We hide the default file <code class="highlighter-rouge"><input></code> via <code class="highlighter-rouge">opacity</code> and instead style the <code class="highlighter-rouge"><label></code>. The button is generated and positioned with <code class="highlighter-rouge">::after</code>. Lastly, we declare a <code class="highlighter-rouge">width</code> and <code class="highlighter-rouge">height</code> on the <code class="highlighter-rouge"><input></code> for proper spacing for surrounding content.</p>
|
||||
<p>We hide the default file <code class="language-plaintext highlighter-rouge"><input></code> via <code class="language-plaintext highlighter-rouge">opacity</code> and instead style the <code class="language-plaintext highlighter-rouge"><label></code>. The button is generated and positioned with <code class="language-plaintext highlighter-rouge">::after</code>. Lastly, we declare a <code class="language-plaintext highlighter-rouge">width</code> and <code class="language-plaintext highlighter-rouge">height</code> on the <code class="language-plaintext highlighter-rouge"><input></code> for proper spacing for surrounding content.</p>
|
||||
|
||||
<h4 id="translating-or-customizing-the-strings-with-scss">Translating or customizing the strings with SCSS</h4>
|
||||
|
||||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang"><code class="highlighter-rouge">:lang()</code> pseudo-class</a> is used to allow for translation of the “Browse” text into other languages. Override or add entries to the <code class="highlighter-rouge">$custom-file-text</code> Sass variable with the relevant <a href="https://en.wikipedia.org/wiki/IETF_language_tag">language tag</a> and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is <code class="highlighter-rouge">es</code>):</p>
|
||||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang"><code class="language-plaintext highlighter-rouge">:lang()</code> pseudo-class</a> is used to allow for translation of the “Browse” text into other languages. Override or add entries to the <code class="language-plaintext highlighter-rouge">$custom-file-text</code> Sass variable with the relevant <a href="https://en.wikipedia.org/wiki/IETF_language_tag">language tag</a> and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is <code class="language-plaintext highlighter-rouge">es</code>):</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$custom-file-text</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="n">en</span><span class="o">:</span> <span class="s2">"Browse"</span><span class="o">,</span>
|
||||
<span class="n">es</span><span class="o">:</span> <span class="s2">"Elegir"</span>
|
||||
<span class="p">);</span></code></pre></figure>
|
||||
|
||||
<p>Here’s <code class="highlighter-rouge">lang(es)</code> in action on the custom file input for a Spanish translation:</p>
|
||||
<p>Here’s <code class="language-plaintext highlighter-rouge">lang(es)</code> in action on the custom file input for a Spanish translation:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-file">
|
||||
@ -2764,11 +2772,11 @@
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFileLang"</span><span class="nt">></span>Seleccionar Archivo<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">the <code class="highlighter-rouge">lang</code> attribute</a> on the <code class="highlighter-rouge"><span class="nt"><html></span></code> element or the <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12"><code class="highlighter-rouge">Content-Language</code> HTTP header</a>, among other methods.</p>
|
||||
<p>You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">the <code class="language-plaintext highlighter-rouge">lang</code> attribute</a> on the <code class="language-plaintext highlighter-rouge"><html></code> element or the <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12"><code class="language-plaintext highlighter-rouge">Content-Language</code> HTTP header</a>, among other methods.</p>
|
||||
|
||||
<h4 id="translating-or-customizing-the-strings-with-html">Translating or customizing the strings with HTML</h4>
|
||||
|
||||
<p>Bootstrap also provides a way to translate the “Browse” text in HTML with the <code class="highlighter-rouge">data-browse</code> attribute which can be added to the custom input label (example in Dutch):</p>
|
||||
<p>Bootstrap also provides a way to translate the “Browse” text in HTML with the <code class="language-plaintext highlighter-rouge">data-browse</code> attribute which can be added to the custom input label (example in Dutch):</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-file">
|
||||
@ -2787,6 +2795,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/input-group/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -489,13 +490,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/input-group.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Input group</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="basic-example">Basic example</h2>
|
||||
|
||||
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <code class="highlighter-rouge"><label></code>s outside the input group.</p>
|
||||
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <code class="language-plaintext highlighter-rouge"><label></code>s outside the input group.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group mb-3">
|
||||
@ -578,7 +582,7 @@
|
||||
|
||||
<h2 id="wrapping">Wrapping</h2>
|
||||
|
||||
<p>Input groups wrap by default via <code class="highlighter-rouge">flex-wrap: wrap</code> in order to accommodate custom form field validation within an input group. You may disable this with <code class="highlighter-rouge">.flex-nowrap</code>.</p>
|
||||
<p>Input groups wrap by default via <code class="language-plaintext highlighter-rouge">flex-wrap: wrap</code> in order to accommodate custom form field validation within an input group. You may disable this with <code class="language-plaintext highlighter-rouge">.flex-nowrap</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group flex-nowrap">
|
||||
@ -597,7 +601,7 @@
|
||||
|
||||
<h2 id="sizing">Sizing</h2>
|
||||
|
||||
<p>Add the relative form sizing classes to the <code class="highlighter-rouge">.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
|
||||
<p>Add the relative form sizing classes to the <code class="language-plaintext highlighter-rouge">.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
|
||||
|
||||
<p><strong>Sizing on the individual input group elements isn’t supported.</strong></p>
|
||||
|
||||
@ -687,7 +691,7 @@
|
||||
|
||||
<h2 id="multiple-inputs">Multiple inputs</h2>
|
||||
|
||||
<p>While multiple <code class="highlighter-rouge"><input></code>s are supported visually, validation styles are only available for input groups with a single <code class="highlighter-rouge"><input></code>.</p>
|
||||
<p>While multiple <code class="language-plaintext highlighter-rouge"><input></code>s are supported visually, validation styles are only available for input groups with a single <code class="language-plaintext highlighter-rouge"><input></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group">
|
||||
@ -1124,15 +1128,26 @@
|
||||
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
|
||||
<p>Screen readers will have trouble with your forms if you don’t include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.</p>
|
||||
<p>Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a <code class="language-plaintext highlighter-rouge"><label></code> element, or—in the case of buttons—to include sufficiently descriptive text as part of the <code class="language-plaintext highlighter-rouge"><button>...</button></code> content.</p>
|
||||
|
||||
<p>The exact technique to be used (<code class="highlighter-rouge"><label></code> elements hidden using the <code class="highlighter-rouge">.sr-only</code> class, or use of the <code class="highlighter-rouge">aria-label</code> and <code class="highlighter-rouge">aria-labelledby</code> attributes, possibly in combination with <code class="highlighter-rouge">aria-describedby</code>) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you’re implementing. The examples in this section provide a few suggested, case-specific approaches.</p>
|
||||
<p>For situations where it’s not possible to include a visible <code class="language-plaintext highlighter-rouge"><label></code> or appropriate text content, there are alternative ways of still providing an accessible name, such as:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="language-plaintext highlighter-rouge"><label></code> elements hidden using the <code class="language-plaintext highlighter-rouge">.visually-hidden</code> class</li>
|
||||
<li>Pointing to an existing element that can act as a label using <code class="language-plaintext highlighter-rouge">aria-labelledby</code></li>
|
||||
<li>Providing a <code class="language-plaintext highlighter-rouge">title</code> attribute</li>
|
||||
<li>Explicitly setting the accessible name on an element using <code class="language-plaintext highlighter-rouge">aria-label</code></li>
|
||||
</ul>
|
||||
|
||||
<p>If none of these are present, assistive technologies may resort to using the <code class="language-plaintext highlighter-rouge">placeholder</code> attribute as a fallback for the accessible name on <code class="language-plaintext highlighter-rouge"><input></code> and <code class="language-plaintext highlighter-rouge"><textarea></code> elements. The examples in this section provide a few suggested, case-specific approaches.</p>
|
||||
|
||||
<p>While using visually hidden content (<code class="language-plaintext highlighter-rouge">.sr-only</code>, <code class="language-plaintext highlighter-rouge">aria-label</code>, and even <code class="language-plaintext highlighter-rouge">placeholder</code> content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Lightweight, flexible component for showcasing hero unit style content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/jumbotron/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,7 +469,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/jumbotron.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Jumbotron</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Lightweight, flexible component for showcasing hero unit style content.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -491,7 +495,7 @@
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Learn more<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>To make the jumbotron full width, and without rounded corners, add the <code class="highlighter-rouge">.jumbotron-fluid</code> modifier class and add a <code class="highlighter-rouge">.container</code> or <code class="highlighter-rouge">.container-fluid</code> within.</p>
|
||||
<p>To make the jumbotron full width, and without rounded corners, add the <code class="language-plaintext highlighter-rouge">.jumbotron-fluid</code> modifier class and add a <code class="language-plaintext highlighter-rouge">.container</code> or <code class="language-plaintext highlighter-rouge">.container-fluid</code> within.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="jumbotron jumbotron-fluid">
|
||||
@ -514,6 +518,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/list-group/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -496,7 +497,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/list-group.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">List group</h1>
|
||||
</div>
|
||||
<p class="bd-lead">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.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -523,7 +527,7 @@
|
||||
|
||||
<h2 id="active-items">Active items</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.active</code> to a <code class="highlighter-rouge">.list-group-item</code> to indicate the current active selection.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.active</code> to a <code class="language-plaintext highlighter-rouge">.list-group-item</code> to indicate the current active selection.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group">
|
||||
@ -544,7 +548,7 @@
|
||||
|
||||
<h2 id="disabled-items">Disabled items</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.disabled</code> to a <code class="highlighter-rouge">.list-group-item</code> to make it <em>appear</em> disabled. Note that some elements with <code class="highlighter-rouge">.disabled</code> will also require custom JavaScript to fully disable their click events (e.g., links).</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.disabled</code> to a <code class="language-plaintext highlighter-rouge">.list-group-item</code> to make it <em>appear</em> disabled. Note that some elements with <code class="language-plaintext highlighter-rouge">.disabled</code> will also require custom JavaScript to fully disable their click events (e.g., links).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group">
|
||||
@ -565,9 +569,9 @@
|
||||
|
||||
<h2 id="links-and-buttons">Links and buttons</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge"><a></code>s or <code class="highlighter-rouge"><button></code>s to create <em>actionable</em> list group items with hover, disabled, and active states by adding <code class="highlighter-rouge">.list-group-item-action</code>. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <code class="highlighter-rouge"><li></code>s or <code class="highlighter-rouge"><div></code>s) don’t provide a click or tap affordance.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge"><a></code>s or <code class="language-plaintext highlighter-rouge"><button></code>s to create <em>actionable</em> list group items with hover, disabled, and active states by adding <code class="language-plaintext highlighter-rouge">.list-group-item-action</code>. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <code class="language-plaintext highlighter-rouge"><li></code>s or <code class="language-plaintext highlighter-rouge"><div></code>s) don’t provide a click or tap affordance.</p>
|
||||
|
||||
<p>Be sure to <strong>not use the standard <code class="highlighter-rouge">.btn</code> classes here</strong>.</p>
|
||||
<p>Be sure to <strong>not use the standard <code class="language-plaintext highlighter-rouge">.btn</code> classes here</strong>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="list-group">
|
||||
@ -590,7 +594,7 @@
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action disabled"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>With <code class="highlighter-rouge"><button></code>s, you can also make use of the <code class="highlighter-rouge">disabled</code> attribute instead of the <code class="highlighter-rouge">.disabled</code> class. Sadly, <code class="highlighter-rouge"><a></code>s don’t support the disabled attribute.</p>
|
||||
<p>With <code class="language-plaintext highlighter-rouge"><button></code>s, you can also make use of the <code class="language-plaintext highlighter-rouge">disabled</code> attribute instead of the <code class="language-plaintext highlighter-rouge">.disabled</code> class. Sadly, <code class="language-plaintext highlighter-rouge"><a></code>s don’t support the disabled attribute.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="list-group">
|
||||
@ -615,7 +619,7 @@
|
||||
|
||||
<h2 id="flush">Flush</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.list-group-flush</code> to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.list-group-flush</code> to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group list-group-flush">
|
||||
@ -636,9 +640,9 @@
|
||||
|
||||
<h2 id="horizontal">Horizontal</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.list-group-horizontal</code> to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant <code class="highlighter-rouge">.list-group-horizontal-{sm|md|lg|xl}</code> to make a list group horizontal starting at that breakpoint’s <code class="highlighter-rouge">min-width</code>. Currently <strong>horizontal list groups cannot be combined with flush list groups.</strong></p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.list-group-horizontal</code> to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant <code class="language-plaintext highlighter-rouge">.list-group-horizontal-{sm|md|lg|xl}</code> to make a list group horizontal starting at that breakpoint’s <code class="language-plaintext highlighter-rouge">min-width</code>. Currently <strong>horizontal list groups cannot be combined with flush list groups.</strong></p>
|
||||
|
||||
<p><strong>ProTip:</strong> Want equal-width list group items when horizontal? Add <code class="highlighter-rouge">.flex-fill</code> to each list group item.</p>
|
||||
<p><strong>ProTip:</strong> Want equal-width list group items when horizontal? Add <code class="language-plaintext highlighter-rouge">.flex-fill</code> to each list group item.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group list-group-horizontal">
|
||||
@ -738,7 +742,7 @@
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-dark"</span><span class="nt">></span>A simple dark list group item<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<p>Contextual classes also work with <code class="highlighter-rouge">.list-group-item-action</code>. Note the addition of the hover styles here not present in the previous example. Also supported is the <code class="highlighter-rouge">.active</code> state; apply it to indicate an active selection on a contextual list group item.</p>
|
||||
<p>Contextual classes also work with <code class="language-plaintext highlighter-rouge">.list-group-item-action</code>. Note the addition of the hover styles here not present in the previous example. Also supported is the <code class="language-plaintext highlighter-rouge">.active</code> state; apply it to indicate an active selection on a contextual list group item.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="list-group">
|
||||
@ -772,7 +776,7 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="language-plaintext highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="with-badges">With badges</h2>
|
||||
@ -871,7 +875,7 @@
|
||||
|
||||
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||
|
||||
<p>Use the tab JavaScript plugin—include it individually or through the compiled <code class="highlighter-rouge">bootstrap.js</code> file—to extend our list group to create tabbable panes of local content.</p>
|
||||
<p>Use the tab JavaScript plugin—include it individually or through the compiled <code class="language-plaintext highlighter-rouge">bootstrap.js</code> file—to extend our list group to create tabbable panes of local content.</p>
|
||||
|
||||
<div class="bd-example" role="tabpanel">
|
||||
<div class="row">
|
||||
@ -923,7 +927,7 @@
|
||||
|
||||
<h3 id="using-data-attributes">Using data attributes</h3>
|
||||
|
||||
<p>You can activate a list group navigation without writing any JavaScript by simply specifying <code class="highlighter-rouge">data-toggle="list"</code> or on an element. Use these data attributes on <code class="highlighter-rouge">.list-group-item</code>.</p>
|
||||
<p>You can activate a list group navigation without writing any JavaScript by simply specifying <code class="language-plaintext highlighter-rouge">data-toggle="list"</code> or on an element. Use these data attributes on <code class="language-plaintext highlighter-rouge">.list-group-item</code>.</p>
|
||||
|
||||
<div role="tabpanel">
|
||||
|
||||
@ -963,7 +967,7 @@
|
||||
|
||||
<h3 id="fade-effect">Fade effect</h3>
|
||||
|
||||
<p>To make tabs panel fade in, add <code class="highlighter-rouge">.fade</code> to each <code class="highlighter-rouge">.tab-pane</code>. The first tab pane must also have <code class="highlighter-rouge">.show</code> to make the initial content visible.</p>
|
||||
<p>To make tabs panel fade in, add <code class="language-plaintext highlighter-rouge">.fade</code> to each <code class="language-plaintext highlighter-rouge">.tab-pane</code>. The first tab pane must also have <code class="language-plaintext highlighter-rouge">.show</code> to make the initial content visible.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
@ -976,7 +980,7 @@
|
||||
|
||||
<h4 id="tab">$().tab</h4>
|
||||
|
||||
<p>Activates a list item element and content container. Tab should have either a <code class="highlighter-rouge">data-target</code> or an <code class="highlighter-rouge">href</code> targeting a container node in the DOM.</p>
|
||||
<p>Activates a list item element and content container. Tab should have either a <code class="language-plaintext highlighter-rouge">data-target</code> or an <code class="language-plaintext highlighter-rouge">href</code> targeting a container node in the DOM.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span> <span class="na">id=</span><span class="s">"myList"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">></span>Home<span class="nt"></a></span>
|
||||
@ -1000,7 +1004,7 @@
|
||||
|
||||
<h4 id="tabshow">.tab(‘show’)</h4>
|
||||
|
||||
<p>Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. <strong>Returns to the caller before the tab pane has actually been shown</strong> (for example, before the <code class="highlighter-rouge">shown.bs.tab</code> event occurs).</p>
|
||||
<p>Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. <strong>Returns to the caller before the tab pane has actually been shown</strong> (for example, before the <code class="language-plaintext highlighter-rouge">shown.bs.tab</code> event occurs).</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#someListItem</span><span class="dl">'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
@ -1009,13 +1013,13 @@
|
||||
<p>When showing a new tab, the events fire in the following order:</p>
|
||||
|
||||
<ol>
|
||||
<li><code class="highlighter-rouge">hide.bs.tab</code> (on the current active tab)</li>
|
||||
<li><code class="highlighter-rouge">show.bs.tab</code> (on the to-be-shown tab)</li>
|
||||
<li><code class="highlighter-rouge">hidden.bs.tab</code> (on the previous active tab, the same one as for the <code class="highlighter-rouge">hide.bs.tab</code> event)</li>
|
||||
<li><code class="highlighter-rouge">shown.bs.tab</code> (on the newly-active just-shown tab, the same one as for the <code class="highlighter-rouge">show.bs.tab</code> event)</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">hide.bs.tab</code> (on the current active tab)</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">show.bs.tab</code> (on the to-be-shown tab)</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">hidden.bs.tab</code> (on the previous active tab, the same one as for the <code class="language-plaintext highlighter-rouge">hide.bs.tab</code> event)</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">shown.bs.tab</code> (on the newly-active just-shown tab, the same one as for the <code class="language-plaintext highlighter-rouge">show.bs.tab</code> event)</li>
|
||||
</ol>
|
||||
|
||||
<p>If no tab was already active, the <code class="highlighter-rouge">hide.bs.tab</code> and <code class="highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p>
|
||||
<p>If no tab was already active, the <code class="language-plaintext highlighter-rouge">hide.bs.tab</code> and <code class="language-plaintext highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -1055,6 +1059,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/media-object/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -478,7 +479,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/media-object.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Media object</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -486,7 +490,7 @@
|
||||
|
||||
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">media object</a> helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.</p>
|
||||
|
||||
<p>Below is an example of a single media object. Only two classes are required—the wrapping <code class="highlighter-rouge">.media</code> and the <code class="highlighter-rouge">.media-body</code> around your content. Optional padding and margin can be controlled through <a href="/docs/4.5/utilities/spacing/">spacing utilities</a>.</p>
|
||||
<p>Below is an example of a single media object. Only two classes are required—the wrapping <code class="language-plaintext highlighter-rouge">.media</code> and the <code class="language-plaintext highlighter-rouge">.media-body</code> around your content. Optional padding and margin can be controlled through <a href="/docs/4.5/utilities/spacing/">spacing utilities</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
@ -508,14 +512,14 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="flexbug-12-inline-elements-arent-treated-as-flex-items">Flexbug #12: Inline elements aren’t treated as flex items</h5>
|
||||
|
||||
<p>Internet Explorer 10-11 do not render inline elements like links or images (or <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code> pseudo-elements) as flex items. The only workaround is to set a non-inline <code class="highlighter-rouge">display</code> value (e.g., <code class="highlighter-rouge">block</code>, <code class="highlighter-rouge">inline-block</code>, or <code class="highlighter-rouge">flex</code>). We suggest using <code class="highlighter-rouge">.d-flex</code>, one of our <a href="/docs/4.5/utilities/display/">display utilities</a>, as an easy fix.</p>
|
||||
<p>Internet Explorer 10-11 do not render inline elements like links or images (or <code class="language-plaintext highlighter-rouge">::before</code> and <code class="language-plaintext highlighter-rouge">::after</code> pseudo-elements) as flex items. The only workaround is to set a non-inline <code class="language-plaintext highlighter-rouge">display</code> value (e.g., <code class="language-plaintext highlighter-rouge">block</code>, <code class="language-plaintext highlighter-rouge">inline-block</code>, or <code class="language-plaintext highlighter-rouge">flex</code>). We suggest using <code class="language-plaintext highlighter-rouge">.d-flex</code>, one of our <a href="/docs/4.5/utilities/display/">display utilities</a>, as an easy fix.</p>
|
||||
|
||||
<p><strong>Source:</strong> <a href="https://github.com/philipwalton/flexbugs#flexbug-12">Flexbugs on GitHub</a></p>
|
||||
</div>
|
||||
|
||||
<h2 id="nesting">Nesting</h2>
|
||||
|
||||
<p>Media objects can be infinitely nested, though we suggest you stop at some point. Place nested <code class="highlighter-rouge">.media</code> within the <code class="highlighter-rouge">.media-body</code> of a parent media object.</p>
|
||||
<p>Media objects can be infinitely nested, though we suggest you stop at some point. Place nested <code class="language-plaintext highlighter-rouge">.media</code> within the <code class="language-plaintext highlighter-rouge">.media-body</code> of a parent media object.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
@ -556,7 +560,7 @@
|
||||
|
||||
<h2 id="alignment">Alignment</h2>
|
||||
|
||||
<p>Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your <code class="highlighter-rouge">.media-body</code> content.</p>
|
||||
<p>Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your <code class="language-plaintext highlighter-rouge">.media-body</code> content.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
@ -617,7 +621,7 @@
|
||||
|
||||
<h2 id="order">Order</h2>
|
||||
|
||||
<p>Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the <code class="highlighter-rouge">order</code> property (to an integer of your choosing).</p>
|
||||
<p>Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the <code class="language-plaintext highlighter-rouge">order</code> property (to an integer of your choosing).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
@ -638,7 +642,7 @@
|
||||
|
||||
<h2 id="media-list">Media list</h2>
|
||||
|
||||
<p>Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <code class="highlighter-rouge"><ul></code> or <code class="highlighter-rouge"><ol></code>, add the <code class="highlighter-rouge">.list-unstyled</code> to remove any browser default list styles, and then apply <code class="highlighter-rouge">.media</code> to your <code class="highlighter-rouge"><li></code>s. As always, use spacing utilities wherever needed to fine tune.</p>
|
||||
<p>Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <code class="language-plaintext highlighter-rouge"><ul></code> or <code class="language-plaintext highlighter-rouge"><ol></code>, add the <code class="language-plaintext highlighter-rouge">.list-unstyled</code> to remove any browser default list styles, and then apply <code class="language-plaintext highlighter-rouge">.media</code> to your <code class="language-plaintext highlighter-rouge"><li></code>s. As always, use spacing utilities wherever needed to fine tune.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-unstyled">
|
||||
@ -695,6 +699,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/modal/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -510,7 +511,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/modal.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Modal</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -519,12 +523,12 @@
|
||||
<p>Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.</p>
|
||||
|
||||
<ul>
|
||||
<li>Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <code class="highlighter-rouge"><body></code> so that modal content scrolls instead.</li>
|
||||
<li>Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <code class="language-plaintext highlighter-rouge"><body></code> so that modal content scrolls instead.</li>
|
||||
<li>Clicking on the modal “backdrop” will automatically close the modal.</li>
|
||||
<li>Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.</li>
|
||||
<li>Modals use <code class="highlighter-rouge">position: fixed</code>, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a <code class="highlighter-rouge">.modal</code> within another fixed element.</li>
|
||||
<li>Once again, due to <code class="highlighter-rouge">position: fixed</code>, there are some caveats with using modals on mobile devices. <a href="/docs/4.5/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile">See our browser support docs</a> for details.</li>
|
||||
<li>Due to how HTML5 defines its semantics, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus">the <code class="highlighter-rouge">autofocus</code> HTML attribute</a> has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:</li>
|
||||
<li>Modals use <code class="language-plaintext highlighter-rouge">position: fixed</code>, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a <code class="language-plaintext highlighter-rouge">.modal</code> within another fixed element.</li>
|
||||
<li>Once again, due to <code class="language-plaintext highlighter-rouge">position: fixed</code>, there are some caveats with using modals on mobile devices. <a href="/docs/4.5/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile">See our browser support docs</a> for details.</li>
|
||||
<li>Due to how HTML5 defines its semantics, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus">the <code class="language-plaintext highlighter-rouge">autofocus</code> HTML attribute</a> has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:</li>
|
||||
</ul>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myModal</span><span class="dl">'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">shown.bs.modal</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
@ -532,7 +536,7 @@
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
<p>The animation effect of this component is dependent on the <code class="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
<p>Keep reading for demos and usage guidelines.</p>
|
||||
@ -541,10 +545,10 @@
|
||||
|
||||
<h3 id="modal-components">Modal components</h3>
|
||||
|
||||
<p>Below is a <em>static</em> modal example (meaning its <code class="highlighter-rouge">position</code> and <code class="highlighter-rouge">display</code> have been overridden). Included are the modal header, modal body (required for <code class="highlighter-rouge">padding</code>), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.</p>
|
||||
<p>Below is a <em>static</em> modal example (meaning its <code class="language-plaintext highlighter-rouge">position</code> and <code class="language-plaintext highlighter-rouge">display</code> have been overridden). Included are the modal header, modal body (required for <code class="language-plaintext highlighter-rouge">padding</code>), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.</p>
|
||||
|
||||
<div class="bd-example bd-example-modal">
|
||||
<div class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -565,7 +569,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span><span class="nt">></span>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
||||
@ -589,7 +593,7 @@
|
||||
|
||||
<p>Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.</p>
|
||||
|
||||
<div class="modal fade" id="exampleModalLive" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="exampleModalLive" tabindex="-1" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -621,7 +625,7 @@
|
||||
<span class="nt"></button></span>
|
||||
|
||||
<span class="c"><!-- Modal --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
||||
@ -645,7 +649,7 @@
|
||||
|
||||
<p>When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.</p>
|
||||
|
||||
<div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -677,7 +681,7 @@
|
||||
<span class="nt"></button></span>
|
||||
|
||||
<span class="c"><!-- Modal --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"staticBackdrop"</span> <span class="na">data-backdrop=</span><span class="s">"static"</span> <span class="na">data-keyboard=</span><span class="s">"false"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"staticBackdropLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"staticBackdrop"</span> <span class="na">data-backdrop=</span><span class="s">"static"</span> <span class="na">data-keyboard=</span><span class="s">"false"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-labelledby=</span><span class="s">"staticBackdropLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
||||
@ -701,7 +705,7 @@
|
||||
|
||||
<p>When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.</p>
|
||||
|
||||
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
|
||||
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -744,9 +748,9 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p>You can also create a scrollable modal that allows scroll the modal body by adding <code class="highlighter-rouge">.modal-dialog-scrollable</code> to <code class="highlighter-rouge">.modal-dialog</code>.</p>
|
||||
<p>You can also create a scrollable modal that allows scroll the modal body by adding <code class="language-plaintext highlighter-rouge">.modal-dialog-scrollable</code> to <code class="language-plaintext highlighter-rouge">.modal-dialog</code>.</p>
|
||||
|
||||
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
|
||||
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -796,9 +800,9 @@
|
||||
|
||||
<h3 id="vertically-centered">Vertically centered</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.modal-dialog-centered</code> to <code class="highlighter-rouge">.modal-dialog</code> to vertically center the modal.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.modal-dialog-centered</code> to <code class="language-plaintext highlighter-rouge">.modal-dialog</code> to vertically center the modal.</p>
|
||||
|
||||
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
||||
<div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -818,7 +822,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
|
||||
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -865,7 +869,7 @@
|
||||
|
||||
<p><a href="/docs/4.5/components/tooltips/">Tooltips</a> and <a href="/docs/4.5/components/popovers/">popovers</a> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.</p>
|
||||
|
||||
<div class="modal fade" id="exampleModalPopovers" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="exampleModalPopovers" tabindex="-1" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -905,9 +909,9 @@
|
||||
|
||||
<h3 id="using-the-grid">Using the grid</h3>
|
||||
|
||||
<p>Utilize the Bootstrap grid system within a modal by nesting <code class="highlighter-rouge">.container-fluid</code> within the <code class="highlighter-rouge">.modal-body</code>. Then, use the normal grid system classes as you would anywhere else.</p>
|
||||
<p>Utilize the Bootstrap grid system within a modal by nesting <code class="language-plaintext highlighter-rouge">.container-fluid</code> within the <code class="language-plaintext highlighter-rouge">.modal-body</code>. Then, use the normal grid system classes as you would anywhere else.</p>
|
||||
|
||||
<div class="modal fade" id="gridSystemModal" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="gridSystemModal" tabindex="-1" aria-labelledby="gridModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -987,16 +991,16 @@
|
||||
|
||||
<h3 id="varying-modal-content">Varying modal content</h3>
|
||||
|
||||
<p>Have a bunch of buttons that all trigger the same modal with slightly different contents? Use <code class="highlighter-rouge">event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">HTML <code class="highlighter-rouge">data-*</code> attributes</a> (possibly <a href="https://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked.</p>
|
||||
<p>Have a bunch of buttons that all trigger the same modal with slightly different contents? Use <code class="language-plaintext highlighter-rouge">event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">HTML <code class="language-plaintext highlighter-rouge">data-*</code> attributes</a> (possibly <a href="https://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked.</p>
|
||||
|
||||
<p>Below is a live demo followed by example HTML and JavaScript. For more information, <a href="#events">read the modal events docs</a> for details on <code class="highlighter-rouge">relatedTarget</code>.</p>
|
||||
<p>Below is a live demo followed by example HTML and JavaScript. For more information, <a href="#events">read the modal events docs</a> for details on <code class="language-plaintext highlighter-rouge">relatedTarget</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
||||
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -1029,7 +1033,7 @@
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever=</span><span class="s">"@fat"</span><span class="nt">></span>Open modal for @fat<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever=</span><span class="s">"@getbootstrap"</span><span class="nt">></span>Open modal for @getbootstrap<span class="nt"></button></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
||||
@ -1070,25 +1074,25 @@
|
||||
|
||||
<h3 id="change-animation">Change animation</h3>
|
||||
|
||||
<p>The <code class="highlighter-rouge">$modal-fade-transform</code> variable determines the transform state of <code class="highlighter-rouge">.modal-dialog</code> before the modal fade-in animation, the <code class="highlighter-rouge">$modal-show-transform</code> variable determines the transform of <code class="highlighter-rouge">.modal-dialog</code> at the end of the modal fade-in animation.</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">$modal-fade-transform</code> variable determines the transform state of <code class="language-plaintext highlighter-rouge">.modal-dialog</code> before the modal fade-in animation, the <code class="language-plaintext highlighter-rouge">$modal-show-transform</code> variable determines the transform of <code class="language-plaintext highlighter-rouge">.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 class="highlighter-rouge">$modal-fade-transform: scale(.8)</code>.</p>
|
||||
<p>If you want for example a zoom-in animation, you can set <code class="language-plaintext highlighter-rouge">$modal-fade-transform: scale(.8)</code>.</p>
|
||||
|
||||
<h3 id="remove-animation">Remove animation</h3>
|
||||
|
||||
<p>For modals that simply appear rather than fade in to view, remove the <code class="highlighter-rouge">.fade</code> class from your modal markup.</p>
|
||||
<p>For modals that simply appear rather than fade in to view, remove the <code class="language-plaintext highlighter-rouge">.fade</code> class from your modal markup.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"..."</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-labelledby=</span><span class="s">"..."</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="dynamic-heights">Dynamic heights</h3>
|
||||
|
||||
<p>If the height of a modal changes while it is open, you should call <code class="highlighter-rouge">$('#myModal').modal('handleUpdate')</code> to readjust the modal’s position in case a scrollbar appears.</p>
|
||||
<p>If the height of a modal changes while it is open, you should call <code class="language-plaintext highlighter-rouge">$('#myModal').modal('handleUpdate')</code> to readjust the modal’s position in case a scrollbar appears.</p>
|
||||
|
||||
<h3 id="accessibility">Accessibility</h3>
|
||||
|
||||
<p>Be sure to add <code class="highlighter-rouge">role="dialog"</code> and <code class="highlighter-rouge">aria-labelledby="..."</code>, referencing the modal title, to <code class="highlighter-rouge">.modal</code>. Additionally, you may give a description of your modal dialog with <code class="highlighter-rouge">aria-describedby</code> on <code class="highlighter-rouge">.modal</code>.</p>
|
||||
<p>Be sure to add <code class="language-plaintext highlighter-rouge">aria-labelledby="..."</code>, referencing the modal title, to <code class="language-plaintext highlighter-rouge">.modal</code>. Additionally, you may give a description of your modal dialog with <code class="language-plaintext highlighter-rouge">aria-describedby</code> on <code class="language-plaintext highlighter-rouge">.modal</code>. Note that you don’t need to add <code class="language-plaintext highlighter-rouge">role="dialog"</code> since we already add it via JavaScript.</p>
|
||||
|
||||
<h3 id="embedding-youtube-videos">Embedding YouTube videos</h3>
|
||||
|
||||
@ -1096,7 +1100,7 @@
|
||||
|
||||
<h2 id="optional-sizes">Optional sizes</h2>
|
||||
|
||||
<p>Modals have three optional sizes, available via modifier classes to be placed on a <code class="highlighter-rouge">.modal-dialog</code>. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
||||
<p>Modals have three optional sizes, available via modifier classes to be placed on a <code class="language-plaintext highlighter-rouge">.modal-dialog</code>. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -1142,7 +1146,7 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-lg"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-sm"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="modal fade" id="exampleModalXl" tabindex="-1" role="dialog" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
|
||||
@ -1159,7 +1163,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalLg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="exampleModalLg" tabindex="-1" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
|
||||
@ -1176,7 +1180,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalSm" tabindex="-1" role="dialog" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="exampleModalSm" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -1194,23 +1198,23 @@
|
||||
|
||||
<h2 id="usage">Usage</h2>
|
||||
|
||||
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code class="highlighter-rouge">.modal-open</code> to the <code class="highlighter-rouge"><body></code> to override default scrolling behavior and generates a <code class="highlighter-rouge">.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
|
||||
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code class="language-plaintext highlighter-rouge">.modal-open</code> to the <code class="language-plaintext highlighter-rouge"><body></code> to override default scrolling behavior and generates a <code class="language-plaintext highlighter-rouge">.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
|
||||
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
|
||||
<p>Activate a modal without writing JavaScript. Set <code class="highlighter-rouge">data-toggle="modal"</code> on a controller element, like a button, along with a <code class="highlighter-rouge">data-target="#foo"</code> or <code class="highlighter-rouge">href="#foo"</code> to target a specific modal to toggle.</p>
|
||||
<p>Activate a modal without writing JavaScript. Set <code class="language-plaintext highlighter-rouge">data-toggle="modal"</code> on a controller element, like a button, along with a <code class="language-plaintext highlighter-rouge">data-target="#foo"</code> or <code class="language-plaintext highlighter-rouge">href="#foo"</code> to target a specific modal to toggle.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#myModal"</span><span class="nt">></span>Launch modal<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<h3 id="via-javascript">Via JavaScript</h3>
|
||||
|
||||
<p>Call a modal with id <code class="highlighter-rouge">myModal</code> with a single line of JavaScript:</p>
|
||||
<p>Call a modal with id <code class="language-plaintext highlighter-rouge">myModal</code> with a single line of JavaScript:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myModal</span><span class="dl">'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-backdrop=""</code>.</p>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="language-plaintext highlighter-rouge">data-</code>, as in <code class="language-plaintext highlighter-rouge">data-backdrop=""</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -1259,45 +1263,45 @@
|
||||
<p><a href="/docs/4.5/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
|
||||
</div>
|
||||
|
||||
<h4 id="modaloptions"><code class="highlighter-rouge">.modal(options)</code></h4>
|
||||
<h4 id="modaloptions"><code class="language-plaintext highlighter-rouge">.modal(options)</code></h4>
|
||||
|
||||
<p>Activates your content as a modal. Accepts an optional options <code class="highlighter-rouge">object</code>.</p>
|
||||
<p>Activates your content as a modal. Accepts an optional options <code class="language-plaintext highlighter-rouge">object</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myModal</span><span class="dl">'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span>
|
||||
<span class="na">keyboard</span><span class="p">:</span> <span class="kc">false</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h4 id="modaltoggle"><code class="highlighter-rouge">.modal('toggle')</code></h4>
|
||||
<h4 id="modaltoggle"><code class="language-plaintext highlighter-rouge">.modal('toggle')</code></h4>
|
||||
|
||||
<p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.modal</code> or <code class="highlighter-rouge">hidden.bs.modal</code> event occurs).</p>
|
||||
<p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">shown.bs.modal</code> or <code class="language-plaintext highlighter-rouge">hidden.bs.modal</code> event occurs).</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myModal</span><span class="dl">'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="dl">'</span><span class="s1">toggle</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="modalshow"><code class="highlighter-rouge">.modal('show')</code></h4>
|
||||
<h4 id="modalshow"><code class="language-plaintext highlighter-rouge">.modal('show')</code></h4>
|
||||
|
||||
<p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.modal</code> event occurs).</p>
|
||||
<p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">shown.bs.modal</code> event occurs).</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myModal</span><span class="dl">'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="modalhide"><code class="highlighter-rouge">.modal('hide')</code></h4>
|
||||
<h4 id="modalhide"><code class="language-plaintext highlighter-rouge">.modal('hide')</code></h4>
|
||||
|
||||
<p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.modal</code> event occurs).</p>
|
||||
<p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">hidden.bs.modal</code> event occurs).</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myModal</span><span class="dl">'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="dl">'</span><span class="s1">hide</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="modalhandleupdate"><code class="highlighter-rouge">.modal('handleUpdate')</code></h4>
|
||||
<h4 id="modalhandleupdate"><code class="language-plaintext highlighter-rouge">.modal('handleUpdate')</code></h4>
|
||||
|
||||
<p>Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myModal</span><span class="dl">'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="dl">'</span><span class="s1">handleUpdate</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="modaldispose"><code class="highlighter-rouge">.modal('dispose')</code></h4>
|
||||
<h4 id="modaldispose"><code class="language-plaintext highlighter-rouge">.modal('dispose')</code></h4>
|
||||
|
||||
<p>Destroys an element’s modal.</p>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
|
||||
<p>Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <code class="highlighter-rouge"><div class="modal"></code>).</p>
|
||||
<p>Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <code class="language-plaintext highlighter-rouge"><div class="modal"></code>).</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -1340,6 +1344,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/navbar/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -491,7 +492,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/navbar.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Navbar</h1>
|
||||
</div>
|
||||
<p class="bd-lead">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.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -500,16 +504,16 @@
|
||||
<p>Here’s what you need to know before getting started with the navbar:</p>
|
||||
|
||||
<ul>
|
||||
<li>Navbars require a wrapping <code class="highlighter-rouge">.navbar</code> with <code class="highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> for responsive collapsing and <a href="#color-schemes">color scheme</a> classes.</li>
|
||||
<li>Navbars require a wrapping <code class="language-plaintext highlighter-rouge">.navbar</code> with <code class="language-plaintext highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> for responsive collapsing and <a href="#color-schemes">color scheme</a> classes.</li>
|
||||
<li>Navbars and their contents are fluid by default. Use <a href="#containers">optional containers</a> to limit their horizontal width.</li>
|
||||
<li>Use our <a href="/docs/4.5/utilities/spacing/">spacing</a> and <a href="/docs/4.5/utilities/flex/">flex</a> utility classes for controlling spacing and alignment within navbars.</li>
|
||||
<li>Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.</li>
|
||||
<li>Navbars are hidden by default when printing. Force them to be printed by adding <code class="highlighter-rouge">.d-print</code> to the <code class="highlighter-rouge">.navbar</code>. See the <a href="/docs/4.5/utilities/display/">display</a> utility class.</li>
|
||||
<li>Ensure accessibility by using a <code class="highlighter-rouge"><nav></code> element or, if using a more generic element such as a <code class="highlighter-rouge"><div></code>, add a <code class="highlighter-rouge">role="navigation"</code> to every navbar to explicitly identify it as a landmark region for users of assistive technologies.</li>
|
||||
<li>Navbars are hidden by default when printing. Force them to be printed by adding <code class="language-plaintext highlighter-rouge">.d-print</code> to the <code class="language-plaintext highlighter-rouge">.navbar</code>. See the <a href="/docs/4.5/utilities/display/">display</a> utility class.</li>
|
||||
<li>Ensure accessibility by using a <code class="language-plaintext highlighter-rouge"><nav></code> element or, if using a more generic element such as a <code class="language-plaintext highlighter-rouge"><div></code>, add a <code class="language-plaintext highlighter-rouge">role="navigation"</code> to every navbar to explicitly identify it as a landmark region for users of assistive technologies.</li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
<p>The animation effect of this component is dependent on the <code class="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
<p>Read on for an example and list of supported sub-components.</p>
|
||||
@ -519,15 +523,15 @@
|
||||
<p>Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.navbar-brand</code> for your company, product, or project name.</li>
|
||||
<li><code class="highlighter-rouge">.navbar-nav</code> for a full-height and lightweight navigation (including support for dropdowns).</li>
|
||||
<li><code class="highlighter-rouge">.navbar-toggler</code> for use with our collapse plugin and other <a href="#responsive-behaviors">navigation toggling</a> behaviors.</li>
|
||||
<li><code class="highlighter-rouge">.form-inline</code> for any form controls and actions.</li>
|
||||
<li><code class="highlighter-rouge">.navbar-text</code> for adding vertically centered strings of text.</li>
|
||||
<li><code class="highlighter-rouge">.collapse.navbar-collapse</code> for grouping and hiding navbar contents by a parent breakpoint.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.navbar-brand</code> for your company, product, or project name.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.navbar-nav</code> for a full-height and lightweight navigation (including support for dropdowns).</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.navbar-toggler</code> for use with our collapse plugin and other <a href="#responsive-behaviors">navigation toggling</a> behaviors.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.form-inline</code> for any form controls and actions.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.navbar-text</code> for adding vertically centered strings of text.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.collapse.navbar-collapse</code> for grouping and hiding navbar contents by a parent breakpoint.</li>
|
||||
</ul>
|
||||
|
||||
<p>Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the <code class="highlighter-rouge">lg</code> (large) breakpoint.</p>
|
||||
<p>Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the <code class="language-plaintext highlighter-rouge">lg</code> (large) breakpoint.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
@ -602,11 +606,11 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<p>This example uses <a href="/docs/4.5/utilities/colors/">color</a> (<code class="highlighter-rouge">bg-light</code>) and <a href="/docs/4.5/utilities/spacing/">spacing</a> (<code class="highlighter-rouge">my-2</code>, <code class="highlighter-rouge">my-lg-0</code>, <code class="highlighter-rouge">mr-sm-0</code>, <code class="highlighter-rouge">my-sm-0</code>) utility classes.</p>
|
||||
<p>This example uses <a href="/docs/4.5/utilities/colors/">color</a> (<code class="language-plaintext highlighter-rouge">bg-light</code>) and <a href="/docs/4.5/utilities/spacing/">spacing</a> (<code class="language-plaintext highlighter-rouge">my-2</code>, <code class="language-plaintext highlighter-rouge">my-lg-0</code>, <code class="language-plaintext highlighter-rouge">mr-sm-0</code>, <code class="language-plaintext highlighter-rouge">my-sm-0</code>) utility classes.</p>
|
||||
|
||||
<h3 id="brand">Brand</h3>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.navbar-brand</code> can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">.navbar-brand</code> can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<!-- As a link -->
|
||||
@ -629,7 +633,7 @@
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-brand mb-0 h1"</span><span class="nt">></span>Navbar<span class="nt"></span></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<p>Adding images to the <code class="highlighter-rouge">.navbar-brand</code> will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.</p>
|
||||
<p>Adding images to the <code class="language-plaintext highlighter-rouge">.navbar-brand</code> will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<!-- Just an image -->
|
||||
@ -665,9 +669,9 @@
|
||||
|
||||
<h3 id="nav">Nav</h3>
|
||||
|
||||
<p>Navbar navigation links build on our <code class="highlighter-rouge">.nav</code> options with their own modifier class and require the use of <a href="#toggler">toggler classes</a> for proper responsive styling. <strong>Navigation in navbars will also grow to occupy as much horizontal space as possible</strong> to keep your navbar contents securely aligned.</p>
|
||||
<p>Navbar navigation links build on our <code class="language-plaintext highlighter-rouge">.nav</code> options with their own modifier class and require the use of <a href="#toggler">toggler classes</a> for proper responsive styling. <strong>Navigation in navbars will also grow to occupy as much horizontal space as possible</strong> to keep your navbar contents securely aligned.</p>
|
||||
|
||||
<p>Active states—with <code class="highlighter-rouge">.active</code>—to indicate the current page can be applied directly to <code class="highlighter-rouge">.nav-link</code>s or their immediate parent <code class="highlighter-rouge">.nav-item</code>s.</p>
|
||||
<p>Active states—with <code class="language-plaintext highlighter-rouge">.active</code>—to indicate the current page can be applied directly to <code class="language-plaintext highlighter-rouge">.nav-link</code>s or their immediate parent <code class="language-plaintext highlighter-rouge">.nav-item</code>s.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
@ -726,10 +730,10 @@
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-item nav-link" href="#">Features</a>
|
||||
<a class="nav-item nav-link" href="#">Pricing</a>
|
||||
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -741,15 +745,15 @@
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarNavAltMarkup"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Features<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Pricing<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Features<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Pricing<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<p>You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for <code class="highlighter-rouge">.nav-item</code> and <code class="highlighter-rouge">.nav-link</code> as shown below.</p>
|
||||
<p>You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for <code class="language-plaintext highlighter-rouge">.nav-item</code> and <code class="language-plaintext highlighter-rouge">.nav-link</code> as shown below.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
@ -814,7 +818,7 @@
|
||||
|
||||
<h3 id="forms">Forms</h3>
|
||||
|
||||
<p>Place various form controls and components within a navbar with <code class="highlighter-rouge">.form-inline</code>.</p>
|
||||
<p>Place various form controls and components within a navbar with <code class="language-plaintext highlighter-rouge">.form-inline</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
@ -831,7 +835,7 @@
|
||||
<span class="nt"></form></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<p>Immediate children elements in <code class="highlighter-rouge">.navbar</code> use flex layout and will default to <code class="highlighter-rouge">justify-content: space-between</code>. Use additional <a href="/docs/4.5/utilities/flex/">flex utilities</a> as needed to adjust this behavior.</p>
|
||||
<p>Immediate children elements in <code class="language-plaintext highlighter-rouge">.navbar</code> use flex layout and will default to <code class="language-plaintext highlighter-rouge">justify-content: space-between</code>. Use additional <a href="/docs/4.5/utilities/flex/">flex utilities</a> as needed to adjust this behavior.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
@ -894,7 +898,7 @@
|
||||
|
||||
<h3 id="text">Text</h3>
|
||||
|
||||
<p>Navbars may contain bits of text with the help of <code class="highlighter-rouge">.navbar-text</code>. This class adjusts vertical alignment and horizontal spacing for strings of text.</p>
|
||||
<p>Navbars may contain bits of text with the help of <code class="language-plaintext highlighter-rouge">.navbar-text</code>. This class adjusts vertical alignment and horizontal spacing for strings of text.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
@ -960,7 +964,7 @@
|
||||
|
||||
<h2 id="color-schemes">Color schemes</h2>
|
||||
|
||||
<p>Theming the navbar has never been easier thanks to the combination of theming classes and <code class="highlighter-rouge">background-color</code> utilities. Choose from <code class="highlighter-rouge">.navbar-light</code> for use with light background colors, or <code class="highlighter-rouge">.navbar-dark</code> for dark background colors. Then, customize with <code class="highlighter-rouge">.bg-*</code> utilities.</p>
|
||||
<p>Theming the navbar has never been easier thanks to the combination of theming classes and <code class="language-plaintext highlighter-rouge">background-color</code> utilities. Choose from <code class="language-plaintext highlighter-rouge">.navbar-light</code> for use with light background colors, or <code class="language-plaintext highlighter-rouge">.navbar-dark</code> for dark background colors. Then, customize with <code class="language-plaintext highlighter-rouge">.bg-*</code> utilities.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
@ -1062,7 +1066,7 @@
|
||||
|
||||
<h2 id="containers">Containers</h2>
|
||||
|
||||
<p>Although it’s not required, you can wrap a navbar in a <code class="highlighter-rouge">.container</code> to center it on a page or add one within to only center the contents of a <a href="#placement">fixed or static top navbar</a>.</p>
|
||||
<p>Although it’s not required, you can wrap a navbar in a <code class="language-plaintext highlighter-rouge">.container</code> to center it on a page or add one within to only center the contents of a <a href="#placement">fixed or static top navbar</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="container">
|
||||
@ -1077,7 +1081,7 @@
|
||||
<span class="nt"></nav></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified <code class="highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.</p>
|
||||
<p>When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified <code class="language-plaintext highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
@ -1094,9 +1098,9 @@
|
||||
|
||||
<h2 id="placement">Placement</h2>
|
||||
|
||||
<p>Use our <a href="/docs/4.5/utilities/position/">position utilities</a> to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use <code class="highlighter-rouge">position: fixed</code>, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., <code class="highlighter-rouge">padding-top</code> on the <code class="highlighter-rouge"><body></code>) to prevent overlap with other elements.</p>
|
||||
<p>Use our <a href="/docs/4.5/utilities/position/">position utilities</a> to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use <code class="language-plaintext highlighter-rouge">position: fixed</code>, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., <code class="language-plaintext highlighter-rouge">padding-top</code> on the <code class="language-plaintext highlighter-rouge"><body></code>) to prevent overlap with other elements.</p>
|
||||
|
||||
<p>Also note that <strong><code class="highlighter-rouge">.sticky-top</code> uses <code class="highlighter-rouge">position: sticky</code>, which <a href="https://caniuse.com/#feat=css-sticky">isn’t fully supported in every browser</a></strong>.</p>
|
||||
<p>Also note that <strong><code class="language-plaintext highlighter-rouge">.sticky-top</code> uses <code class="language-plaintext highlighter-rouge">position: sticky</code>, which <a href="https://caniuse.com/#feat=css-sticky">isn’t fully supported in every browser</a></strong>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
@ -1136,15 +1140,15 @@
|
||||
|
||||
<h2 id="responsive-behaviors">Responsive behaviors</h2>
|
||||
|
||||
<p>Navbars can utilize <code class="highlighter-rouge">.navbar-toggler</code>, <code class="highlighter-rouge">.navbar-collapse</code>, and <code class="highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.</p>
|
||||
<p>Navbars can utilize <code class="language-plaintext highlighter-rouge">.navbar-toggler</code>, <code class="language-plaintext highlighter-rouge">.navbar-collapse</code>, and <code class="language-plaintext highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.</p>
|
||||
|
||||
<p>For navbars that never collapse, add the <code class="highlighter-rouge">.navbar-expand</code> class on the navbar. For navbars that always collapse, don’t add any <code class="highlighter-rouge">.navbar-expand</code> class.</p>
|
||||
<p>For navbars that never collapse, add the <code class="language-plaintext highlighter-rouge">.navbar-expand</code> class on the navbar. For navbars that always collapse, don’t add any <code class="language-plaintext highlighter-rouge">.navbar-expand</code> class.</p>
|
||||
|
||||
<h3 id="toggler">Toggler</h3>
|
||||
|
||||
<p>Navbar togglers are left-aligned by default, but should they follow a sibling element like a <code class="highlighter-rouge">.navbar-brand</code>, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.</p>
|
||||
<p>Navbar togglers are left-aligned by default, but should they follow a sibling element like a <code class="language-plaintext highlighter-rouge">.navbar-brand</code>, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.</p>
|
||||
|
||||
<p>With no <code class="highlighter-rouge">.navbar-brand</code> shown in lowest breakpoint:</p>
|
||||
<p>With no <code class="language-plaintext highlighter-rouge">.navbar-brand</code> shown in lowest breakpoint:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
@ -1303,7 +1307,7 @@
|
||||
|
||||
<h3 id="external-content">External content</h3>
|
||||
|
||||
<p>Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the <code class="highlighter-rouge">id</code> and <code class="highlighter-rouge">data-target</code> matching, that’s easily done!</p>
|
||||
<p>Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the <code class="language-plaintext highlighter-rouge">id</code> and <code class="language-plaintext highlighter-rouge">data-target</code> matching, that’s easily done!</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="fixed-top">
|
||||
@ -1340,6 +1344,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/navs/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -506,18 +507,21 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/navs.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Navs</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for how to use Bootstrap’s included navigation components.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="base-nav">Base nav</h2>
|
||||
|
||||
<p>Navigation available in Bootstrap share general markup and styles, from the base <code class="highlighter-rouge">.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
|
||||
<p>Navigation available in Bootstrap share general markup and styles, from the base <code class="language-plaintext highlighter-rouge">.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
|
||||
|
||||
<p>The base <code class="highlighter-rouge">.nav</code> component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.</p>
|
||||
<p>The base <code class="language-plaintext highlighter-rouge">.nav</code> component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The base <code class="highlighter-rouge">.nav</code> component does not include any <code class="highlighter-rouge">.active</code> state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.</p>
|
||||
<p>The base <code class="language-plaintext highlighter-rouge">.nav</code> component does not include any <code class="language-plaintext highlighter-rouge">.active</code> state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
@ -551,7 +555,7 @@
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<p>Classes are used throughout, so your markup can be super flexible. Use <code class="highlighter-rouge"><ul></code>s like above, <code class="highlighter-rouge"><ol></code> if the order of your items is important, or roll your own with a <code class="highlighter-rouge"><nav></code> element. Because the <code class="highlighter-rouge">.nav</code> uses <code class="highlighter-rouge">display: flex</code>, the nav links behave the same as nav items would, but without the extra markup.</p>
|
||||
<p>Classes are used throughout, so your markup can be super flexible. Use <code class="language-plaintext highlighter-rouge"><ul></code>s like above, <code class="language-plaintext highlighter-rouge"><ol></code> if the order of your items is important, or roll your own with a <code class="language-plaintext highlighter-rouge"><nav></code> element. Because the <code class="language-plaintext highlighter-rouge">.nav</code> uses <code class="language-plaintext highlighter-rouge">display: flex</code>, the nav links behave the same as nav items would, but without the extra markup.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="nav">
|
||||
@ -570,13 +574,13 @@
|
||||
|
||||
<h2 id="available-styles">Available styles</h2>
|
||||
|
||||
<p>Change the style of <code class="highlighter-rouge">.nav</code>s component with modifiers and utilities. Mix and match as needed, or build your own.</p>
|
||||
<p>Change the style of <code class="language-plaintext highlighter-rouge">.nav</code>s component with modifiers and utilities. Mix and match as needed, or build your own.</p>
|
||||
|
||||
<h3 id="horizontal-alignment">Horizontal alignment</h3>
|
||||
|
||||
<p>Change the horizontal alignment of your nav with <a href="/docs/4.5/layout/grid/#horizontal-alignment">flexbox utilities</a>. By default, navs are left-aligned, but you can easily change them to center or right aligned.</p>
|
||||
|
||||
<p>Centered with <code class="highlighter-rouge">.justify-content-center</code>:</p>
|
||||
<p>Centered with <code class="language-plaintext highlighter-rouge">.justify-content-center</code>:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="nav justify-content-center">
|
||||
@ -609,7 +613,7 @@
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<p>Right-aligned with <code class="highlighter-rouge">.justify-content-end</code>:</p>
|
||||
<p>Right-aligned with <code class="language-plaintext highlighter-rouge">.justify-content-end</code>:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="nav justify-content-end">
|
||||
@ -644,7 +648,7 @@
|
||||
|
||||
<h3 id="vertical">Vertical</h3>
|
||||
|
||||
<p>Stack your navigation by changing the flex item direction with the <code class="highlighter-rouge">.flex-column</code> utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., <code class="highlighter-rouge">.flex-sm-column</code>).</p>
|
||||
<p>Stack your navigation by changing the flex item direction with the <code class="language-plaintext highlighter-rouge">.flex-column</code> utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., <code class="language-plaintext highlighter-rouge">.flex-sm-column</code>).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="nav flex-column">
|
||||
@ -677,7 +681,7 @@
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<p>As always, vertical navigation is possible without <code class="highlighter-rouge"><ul></code>s, too.</p>
|
||||
<p>As always, vertical navigation is possible without <code class="language-plaintext highlighter-rouge"><ul></code>s, too.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="nav flex-column">
|
||||
@ -696,7 +700,7 @@
|
||||
|
||||
<h3 id="tabs">Tabs</h3>
|
||||
|
||||
<p>Takes the basic nav from above and adds the <code class="highlighter-rouge">.nav-tabs</code> class to generate a tabbed interface. Use them to create tabbable regions with our <a href="#javascript-behavior">tab JavaScript plugin</a>.</p>
|
||||
<p>Takes the basic nav from above and adds the <code class="language-plaintext highlighter-rouge">.nav-tabs</code> class to generate a tabbed interface. Use them to create tabbable regions with our <a href="#javascript-behavior">tab JavaScript plugin</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="nav nav-tabs">
|
||||
@ -731,7 +735,7 @@
|
||||
|
||||
<h3 id="pills">Pills</h3>
|
||||
|
||||
<p>Take that same HTML, but use <code class="highlighter-rouge">.nav-pills</code> instead:</p>
|
||||
<p>Take that same HTML, but use <code class="language-plaintext highlighter-rouge">.nav-pills</code> instead:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="nav nav-pills">
|
||||
@ -766,7 +770,7 @@
|
||||
|
||||
<h3 id="fill-and-justify">Fill and justify</h3>
|
||||
|
||||
<p>Force your <code class="highlighter-rouge">.nav</code>’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your <code class="highlighter-rouge">.nav-item</code>s, use <code class="highlighter-rouge">.nav-fill</code>. Notice that all horizontal space is occupied, but not every nav item has the same width.</p>
|
||||
<p>Force your <code class="language-plaintext highlighter-rouge">.nav</code>’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your <code class="language-plaintext highlighter-rouge">.nav-item</code>s, use <code class="language-plaintext highlighter-rouge">.nav-fill</code>. Notice that all horizontal space is occupied, but not every nav item has the same width.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="nav nav-pills nav-fill">
|
||||
@ -799,24 +803,24 @@
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<p>When using a <code class="highlighter-rouge"><nav></code>-based navigation, be sure to include <code class="highlighter-rouge">.nav-item</code> on the anchors.</p>
|
||||
<p>When using a <code class="language-plaintext highlighter-rouge"><nav></code>-based navigation, you can safely omit <code class="language-plaintext highlighter-rouge">.nav-item</code> as only <code class="language-plaintext highlighter-rouge">.nav-link</code> is required for styling <code class="language-plaintext highlighter-rouge"><a></code> elements.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="nav nav-pills nav-fill">
|
||||
<a class="nav-item nav-link active" href="#">Active</a>
|
||||
<a class="nav-item nav-link" href="#">Much longer nav link</a>
|
||||
<a class="nav-item nav-link" href="#">Link</a>
|
||||
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Much longer nav link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-fill"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Much longer nav link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Much longer nav link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<p>For equal-width elements, use <code class="highlighter-rouge">.nav-justified</code>. All horizontal space will be occupied by nav links, but unlike the <code class="highlighter-rouge">.nav-fill</code> above, every nav item will be the same width.</p>
|
||||
<p>For equal-width elements, use <code class="language-plaintext highlighter-rouge">.nav-justified</code>. All horizontal space will be occupied by nav links, but unlike the <code class="language-plaintext highlighter-rouge">.nav-fill</code> above, every nav item will be the same width.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="nav nav-pills nav-justified">
|
||||
@ -849,22 +853,22 @@
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<p>Similar to the <code class="highlighter-rouge">.nav-fill</code> example using a <code class="highlighter-rouge"><nav></code>-based navigation, be sure to include <code class="highlighter-rouge">.nav-item</code> on the anchors.</p>
|
||||
<p>Similar to the <code class="language-plaintext highlighter-rouge">.nav-fill</code> example using a <code class="language-plaintext highlighter-rouge"><nav></code>-based navigation.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="nav nav-pills nav-justified">
|
||||
<a class="nav-item nav-link active" href="#">Active</a>
|
||||
<a class="nav-item nav-link" href="#">Much longer nav link</a>
|
||||
<a class="nav-item nav-link" href="#">Link</a>
|
||||
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Much longer nav link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-justified"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Much longer nav link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Much longer nav link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<h2 id="working-with-flex-utilities">Working with flex utilities</h2>
|
||||
@ -888,9 +892,9 @@
|
||||
|
||||
<h2 id="regarding-accessibility">Regarding accessibility</h2>
|
||||
|
||||
<p>If you’re using navs to provide a navigation bar, be sure to add a <code class="highlighter-rouge">role="navigation"</code> to the most logical parent container of the <code class="highlighter-rouge"><ul></code>, or wrap a <code class="highlighter-rouge"><nav></code> element around the whole navigation. Do not add the role to the <code class="highlighter-rouge"><ul></code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
|
||||
<p>If you’re using navs to provide a navigation bar, be sure to add a <code class="language-plaintext highlighter-rouge">role="navigation"</code> to the most logical parent container of the <code class="language-plaintext highlighter-rouge"><ul></code>, or wrap a <code class="language-plaintext highlighter-rouge"><nav></code> element around the whole navigation. Do not add the role to the <code class="language-plaintext highlighter-rouge"><ul></code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
|
||||
|
||||
<p>Note that navigation bars, even if visually styled as tabs with the <code class="highlighter-rouge">.nav-tabs</code> class, should <strong>not</strong> be given <code class="highlighter-rouge">role="tablist"</code>, <code class="highlighter-rouge">role="tab"</code> or <code class="highlighter-rouge">role="tabpanel"</code> attributes. These are only appropriate for dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>. See <a href="#javascript-behavior">JavaScript behavior</a> for dynamic tabbed interfaces in this section for an example.</p>
|
||||
<p>Note that navigation bars, even if visually styled as tabs with the <code class="language-plaintext highlighter-rouge">.nav-tabs</code> class, should <strong>not</strong> be given <code class="language-plaintext highlighter-rouge">role="tablist"</code>, <code class="language-plaintext highlighter-rouge">role="tab"</code> or <code class="language-plaintext highlighter-rouge">role="tabpanel"</code> attributes. These are only appropriate for dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>. See <a href="#javascript-behavior">JavaScript behavior</a> for dynamic tabbed interfaces in this section for an example.</p>
|
||||
|
||||
<h2 id="using-dropdowns">Using dropdowns</h2>
|
||||
|
||||
@ -992,11 +996,11 @@
|
||||
|
||||
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||
|
||||
<p>Use the tab JavaScript plugin—include it individually or through the compiled <code class="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.</p>
|
||||
<p>Use the tab JavaScript plugin—include it individually or through the compiled <code class="language-plaintext highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.</p>
|
||||
|
||||
<p>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
|
||||
<p>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="language-plaintext highlighter-rouge">util.js</code></a>.</p>
|
||||
|
||||
<p>Dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>, require <code class="highlighter-rouge">role="tablist"</code>, <code class="highlighter-rouge">role="tab"</code>, <code class="highlighter-rouge">role="tabpanel"</code>, and additional <code class="highlighter-rouge">aria-</code> attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).</p>
|
||||
<p>Dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>, require <code class="language-plaintext highlighter-rouge">role="tablist"</code>, <code class="language-plaintext highlighter-rouge">role="tab"</code>, <code class="language-plaintext highlighter-rouge">role="tabpanel"</code>, and additional <code class="language-plaintext highlighter-rouge">aria-</code> attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).</p>
|
||||
|
||||
<p>Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.</p>
|
||||
|
||||
@ -1042,14 +1046,14 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"contact"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"contact-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>To help fit your needs, this works with <code class="highlighter-rouge"><ul></code>-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using <code class="highlighter-rouge"><nav></code>, you shouldn’t add <code class="highlighter-rouge">role="tablist"</code> directly to it, as this would override the element’s native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple <code class="highlighter-rouge"><div></code>) and wrap the <code class="highlighter-rouge"><nav></code> around it.</p>
|
||||
<p>To help fit your needs, this works with <code class="language-plaintext highlighter-rouge"><ul></code>-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using <code class="language-plaintext highlighter-rouge"><nav></code>, you shouldn’t add <code class="language-plaintext highlighter-rouge">role="tablist"</code> directly to it, as this would override the element’s native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple <code class="language-plaintext highlighter-rouge"><div></code>) and wrap the <code class="language-plaintext highlighter-rouge"><nav></code> around it.</p>
|
||||
|
||||
<div class="bd-example bd-example-tabs">
|
||||
<nav>
|
||||
<div class="nav nav-tabs" id="nav-tab" role="tablist">
|
||||
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
|
||||
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
|
||||
<a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
|
||||
<a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
@ -1067,9 +1071,9 @@
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"nav-tab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link active"</span> <span class="na">id=</span><span class="s">"nav-home-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">></span>Home<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">id=</span><span class="s">"nav-profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Profile<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">id=</span><span class="s">"nav-contact-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-contact"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-contact"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Contact<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">id=</span><span class="s">"nav-home-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">></span>Home<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"nav-profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Profile<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"nav-contact-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-contact"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-contact"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Contact<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></nav></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span> <span class="na">id=</span><span class="s">"nav-tabContent"</span><span class="nt">></span>
|
||||
@ -1174,7 +1178,7 @@
|
||||
|
||||
<h3 id="using-data-attributes">Using data attributes</h3>
|
||||
|
||||
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code class="highlighter-rouge">data-toggle="tab"</code> or <code class="highlighter-rouge">data-toggle="pill"</code> on an element. Use these data attributes on <code class="highlighter-rouge">.nav-tabs</code> or <code class="highlighter-rouge">.nav-pills</code>.</p>
|
||||
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code class="language-plaintext highlighter-rouge">data-toggle="tab"</code> or <code class="language-plaintext highlighter-rouge">data-toggle="pill"</code> on an element. Use these data attributes on <code class="language-plaintext highlighter-rouge">.nav-tabs</code> or <code class="language-plaintext highlighter-rouge">.nav-pills</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Nav tabs --></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"myTab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
@ -1218,7 +1222,7 @@
|
||||
|
||||
<h3 id="fade-effect">Fade effect</h3>
|
||||
|
||||
<p>To make tabs fade in, add <code class="highlighter-rouge">.fade</code> to each <code class="highlighter-rouge">.tab-pane</code>. The first tab pane must also have <code class="highlighter-rouge">.show</code> to make the initial content visible.</p>
|
||||
<p>To make tabs fade in, add <code class="language-plaintext highlighter-rouge">.fade</code> to each <code class="language-plaintext highlighter-rouge">.tab-pane</code>. The first tab pane must also have <code class="language-plaintext highlighter-rouge">.show</code> to make the initial content visible.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"home-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
@ -1239,7 +1243,7 @@
|
||||
|
||||
<h4 id="tab">$().tab</h4>
|
||||
|
||||
<p>Activates a tab element and content container. Tab should have either a <code class="highlighter-rouge">data-target</code> or an <code class="highlighter-rouge">href</code> targeting a container node in the DOM.</p>
|
||||
<p>Activates a tab element and content container. Tab should have either a <code class="language-plaintext highlighter-rouge">data-target</code> or an <code class="language-plaintext highlighter-rouge">href</code> targeting a container node in the DOM.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"myTab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">></span>
|
||||
@ -1271,7 +1275,7 @@
|
||||
|
||||
<h4 id="tabshow">.tab(‘show’)</h4>
|
||||
|
||||
<p>Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. <strong>Returns to the caller before the tab pane has actually been shown</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.tab</code> event occurs).</p>
|
||||
<p>Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. <strong>Returns to the caller before the tab pane has actually been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">shown.bs.tab</code> event occurs).</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#someTab</span><span class="dl">'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
@ -1284,13 +1288,13 @@
|
||||
<p>When showing a new tab, the events fire in the following order:</p>
|
||||
|
||||
<ol>
|
||||
<li><code class="highlighter-rouge">hide.bs.tab</code> (on the current active tab)</li>
|
||||
<li><code class="highlighter-rouge">show.bs.tab</code> (on the to-be-shown tab)</li>
|
||||
<li><code class="highlighter-rouge">hidden.bs.tab</code> (on the previous active tab, the same one as for the <code class="highlighter-rouge">hide.bs.tab</code> event)</li>
|
||||
<li><code class="highlighter-rouge">shown.bs.tab</code> (on the newly-active just-shown tab, the same one as for the <code class="highlighter-rouge">show.bs.tab</code> event)</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">hide.bs.tab</code> (on the current active tab)</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">show.bs.tab</code> (on the to-be-shown tab)</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">hidden.bs.tab</code> (on the previous active tab, the same one as for the <code class="language-plaintext highlighter-rouge">hide.bs.tab</code> event)</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">shown.bs.tab</code> (on the newly-active just-shown tab, the same one as for the <code class="language-plaintext highlighter-rouge">show.bs.tab</code> event)</li>
|
||||
</ol>
|
||||
|
||||
<p>If no tab was already active, then the <code class="highlighter-rouge">hide.bs.tab</code> and <code class="highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p>
|
||||
<p>If no tab was already active, then the <code class="language-plaintext highlighter-rouge">hide.bs.tab</code> and <code class="language-plaintext highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -1330,6 +1334,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/pagination/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -478,15 +479,18 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/pagination.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Pagination</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
|
||||
<p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code class="highlighter-rouge"><nav></code> element to identify it as a navigation section to screen readers and other assistive technologies.</p>
|
||||
<p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code class="language-plaintext highlighter-rouge"><nav></code> element to identify it as a navigation section to screen readers and other assistive technologies.</p>
|
||||
|
||||
<p>In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive <code class="highlighter-rouge">aria-label</code> for the <code class="highlighter-rouge"><nav></code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code class="highlighter-rouge">aria-label="Search results pages"</code>.</p>
|
||||
<p>In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive <code class="language-plaintext highlighter-rouge">aria-label</code> for the <code class="language-plaintext highlighter-rouge"><nav></code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code class="language-plaintext highlighter-rouge">aria-label="Search results pages"</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="Page navigation example">
|
||||
@ -511,7 +515,7 @@
|
||||
|
||||
<h2 id="working-with-icons">Working with icons</h2>
|
||||
|
||||
<p>Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with <code class="highlighter-rouge">aria</code> attributes.</p>
|
||||
<p>Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with <code class="language-plaintext highlighter-rouge">aria</code> attributes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="Page navigation example">
|
||||
@ -552,9 +556,9 @@
|
||||
|
||||
<h2 id="disabled-and-active-states">Disabled and active states</h2>
|
||||
|
||||
<p>Pagination links are customizable for different circumstances. Use <code class="highlighter-rouge">.disabled</code> for links that appear un-clickable and <code class="highlighter-rouge">.active</code> to indicate the current page.</p>
|
||||
<p>Pagination links are customizable for different circumstances. Use <code class="language-plaintext highlighter-rouge">.disabled</code> for links that appear un-clickable and <code class="language-plaintext highlighter-rouge">.active</code> to indicate the current page.</p>
|
||||
|
||||
<p>While the <code class="highlighter-rouge">.disabled</code> class uses <code class="highlighter-rouge">pointer-events: none</code> to <em>try</em> to disable the link functionality of <code class="highlighter-rouge"><a></code>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add <code class="highlighter-rouge">tabindex="-1"</code> on disabled links and use custom JavaScript to fully disable their functionality.</p>
|
||||
<p>While the <code class="language-plaintext highlighter-rouge">.disabled</code> class uses <code class="language-plaintext highlighter-rouge">pointer-events: none</code> to <em>try</em> to disable the link functionality of <code class="language-plaintext highlighter-rouge"><a></code>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add <code class="language-plaintext highlighter-rouge">tabindex="-1"</code> on disabled links and use custom JavaScript to fully disable their functionality.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="...">
|
||||
@ -589,7 +593,7 @@
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<p>You can optionally swap out active or disabled anchors for <code class="highlighter-rouge"><span></code>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.</p>
|
||||
<p>You can optionally swap out active or disabled anchors for <code class="language-plaintext highlighter-rouge"><span></code>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="...">
|
||||
@ -632,7 +636,7 @@
|
||||
|
||||
<h2 id="sizing">Sizing</h2>
|
||||
|
||||
<p>Fancy larger or smaller pagination? Add <code class="highlighter-rouge">.pagination-lg</code> or <code class="highlighter-rouge">.pagination-sm</code> for additional sizes.</p>
|
||||
<p>Fancy larger or smaller pagination? Add <code class="language-plaintext highlighter-rouge">.pagination-lg</code> or <code class="language-plaintext highlighter-rouge">.pagination-sm</code> for additional sizes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="...">
|
||||
@ -756,6 +760,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/popovers/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -502,7 +503,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/popovers.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Popovers</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -511,36 +515,36 @@
|
||||
<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.js</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for popovers to work!</li>
|
||||
<li>Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code class="language-plaintext highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="language-plaintext highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for popovers to work!</li>
|
||||
<li>Popovers require the <a href="/docs/4.5/components/tooltips/">tooltip plugin</a> as a dependency.</li>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="language-plaintext highlighter-rouge">util.js</code></a>.</li>
|
||||
<li>Popovers are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
|
||||
<li>Zero-length <code class="highlighter-rouge">title</code> and <code class="highlighter-rouge">content</code> values will never show a popover.</li>
|
||||
<li>Specify <code class="highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
|
||||
<li>Zero-length <code class="language-plaintext highlighter-rouge">title</code> and <code class="language-plaintext highlighter-rouge">content</code> values will never show a popover.</li>
|
||||
<li>Specify <code class="language-plaintext highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
|
||||
<li>Triggering popovers on hidden elements will not work.</li>
|
||||
<li>Popovers for <code class="highlighter-rouge">.disabled</code> or <code class="highlighter-rouge">disabled</code> elements must be triggered on a wrapper element.</li>
|
||||
<li>When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors’ overall width. Use <code class="highlighter-rouge">.text-nowrap</code> on your <code class="highlighter-rouge"><a></code>s to avoid this behavior.</li>
|
||||
<li>Popovers for <code class="language-plaintext highlighter-rouge">.disabled</code> or <code class="language-plaintext highlighter-rouge">disabled</code> elements must be triggered on a wrapper element.</li>
|
||||
<li>When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors’ overall width. Use <code class="language-plaintext highlighter-rouge">.text-nowrap</code> on your <code class="language-plaintext highlighter-rouge"><a></code>s to avoid this behavior.</li>
|
||||
<li>Popovers must be hidden before their corresponding elements have been removed from the DOM.</li>
|
||||
<li>Popovers can be triggered thanks to an element inside a shadow DOM.</li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
<p>The animation effect of this component is dependent on the <code class="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
<p>Keep reading to see how popovers work with some examples.</p>
|
||||
|
||||
<h2 id="example-enable-popovers-everywhere">Example: Enable popovers everywhere</h2>
|
||||
|
||||
<p>One way to initialize all popovers on a page would be to select them by their <code class="highlighter-rouge">data-toggle</code> attribute:</p>
|
||||
<p>One way to initialize all popovers on a page would be to select them by their <code class="language-plaintext highlighter-rouge">data-toggle</code> attribute:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">[data-toggle="popover"]</span><span class="dl">'</span><span class="p">).</span><span class="nx">popover</span><span class="p">()</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h2 id="example-using-the-container-option">Example: Using the <code class="highlighter-rouge">container</code> option</h2>
|
||||
<h2 id="example-using-the-container-option">Example: Using the <code class="language-plaintext highlighter-rouge">container</code> option</h2>
|
||||
|
||||
<p>When you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom <code class="highlighter-rouge">container</code> so that the popover’s HTML appears within that element instead.</p>
|
||||
<p>When you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom <code class="language-plaintext highlighter-rouge">container</code> so that the popover’s HTML appears within that element instead.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.example-popover</span><span class="dl">'</span><span class="p">).</span><span class="nx">popover</span><span class="p">({</span>
|
||||
@ -595,12 +599,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
|
||||
<h3 id="dismiss-on-next-click">Dismiss on next click</h3>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">focus</code> trigger to dismiss popovers on the user’s next click of a different element than the toggle element.</p>
|
||||
<p>Use the <code class="language-plaintext highlighter-rouge">focus</code> trigger to dismiss popovers on the user’s next click of a different element than the toggle element.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4 id="specific-markup-required-for-dismiss-on-next-click">Specific markup required for dismiss-on-next-click</h4>
|
||||
|
||||
<p>For proper cross-browser and cross-platform behavior, you must use the <code class="highlighter-rouge"><a></code> tag, <em>not</em> the <code class="highlighter-rouge"><button></code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"><code class="highlighter-rouge">tabindex</code></a> attribute.</p>
|
||||
<p>For proper cross-browser and cross-platform behavior, you must use the <code class="language-plaintext highlighter-rouge"><a></code> tag, <em>not</em> the <code class="language-plaintext highlighter-rouge"><button></code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"><code class="language-plaintext highlighter-rouge">tabindex</code></a> attribute.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
@ -614,9 +618,9 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
|
||||
<h3 id="disabled-elements">Disabled elements</h3>
|
||||
|
||||
<p>Elements with the <code class="highlighter-rouge">disabled</code> attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <code class="highlighter-rouge"><div></code> or <code class="highlighter-rouge"><span></code> and override the <code class="highlighter-rouge">pointer-events</code> on the disabled element.</p>
|
||||
<p>Elements with the <code class="language-plaintext highlighter-rouge">disabled</code> attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <code class="language-plaintext highlighter-rouge"><div></code> or <code class="language-plaintext highlighter-rouge"><span></code> and override the <code class="language-plaintext highlighter-rouge">pointer-events</code> on the disabled element.</p>
|
||||
|
||||
<p>For disabled popover triggers, you may also prefer <code class="highlighter-rouge">data-trigger="hover"</code> so that the popover appears as immediate visual feedback to your users as they may not expect to <em>click</em> on a disabled element.</p>
|
||||
<p>For disabled popover triggers, you may also prefer <code class="language-plaintext highlighter-rouge">data-trigger="hover"</code> so that the popover appears as immediate visual feedback to your users as they may not expect to <em>click</em> on a disabled element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
|
||||
@ -636,19 +640,19 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h3 id="making-popovers-work-for-keyboard-and-assistive-technology-users">Making popovers work for keyboard and assistive technology users</h3>
|
||||
|
||||
<p>To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <code class="highlighter-rouge"><span></code>s) can be made focusable by adding the <code class="highlighter-rouge">tabindex="0"</code> attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover’s content in this situation. Additionally, do not rely solely on <code class="highlighter-rouge">hover</code> as the trigger for your popovers, as this will make them impossible to trigger for keyboard users.</p>
|
||||
<p>To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <code class="language-plaintext highlighter-rouge"><span></code>s) can be made focusable by adding the <code class="language-plaintext highlighter-rouge">tabindex="0"</code> attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover’s content in this situation. Additionally, do not rely solely on <code class="language-plaintext highlighter-rouge">hover</code> as the trigger for your popovers, as this will make them impossible to trigger for keyboard users.</p>
|
||||
|
||||
<p>While you can insert rich, structured HTML in popovers with the <code class="highlighter-rouge">html</code> option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the <code class="highlighter-rouge">aria-describedby</code> attribute. As a result, the entirety of the popover’s content will be announced to assistive technology users as one long, uninterrupted stream.</p>
|
||||
<p>While you can insert rich, structured HTML in popovers with the <code class="language-plaintext highlighter-rouge">html</code> option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the <code class="language-plaintext highlighter-rouge">aria-describedby</code> attribute. As a result, the entirety of the popover’s content will be announced to assistive technology users as one long, uninterrupted stream.</p>
|
||||
|
||||
<p>Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the <code class="highlighter-rouge">whiteList</code> or allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document’s structure, there is no guarantee that moving forward/pressing <kbd>TAB</kbd> will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead.</p>
|
||||
<p>Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the <code class="language-plaintext highlighter-rouge">whiteList</code> or allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document’s structure, there is no guarantee that moving forward/pressing <kbd>TAB</kbd> will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead.</p>
|
||||
</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 class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-animation=""</code>.</p>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="language-plaintext highlighter-rouge">data-</code>, as in <code class="language-plaintext highlighter-rouge">data-animation=""</code>.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<p>Note that for security reasons the <code class="highlighter-rouge">sanitize</code>, <code class="highlighter-rouge">sanitizeFn</code> and <code class="highlighter-rouge">whiteList</code> options cannot be supplied using data attributes.</p>
|
||||
<p>Note that for security reasons the <code class="language-plaintext highlighter-rouge">sanitize</code>, <code class="language-plaintext highlighter-rouge">sanitizeFn</code> and <code class="language-plaintext highlighter-rouge">whiteList</code> options cannot be supplied using data attributes.</p>
|
||||
</div>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
@ -804,53 +808,53 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<p><a href="/docs/4.5/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
|
||||
</div>
|
||||
|
||||
<h4 id="popoveroptions"><code class="highlighter-rouge">$().popover(options)</code></h4>
|
||||
<h4 id="popoveroptions"><code class="language-plaintext highlighter-rouge">$().popover(options)</code></h4>
|
||||
|
||||
<p>Initializes popovers for an element collection.</p>
|
||||
|
||||
<h4 id="popovershow"><code class="highlighter-rouge">.popover('show')</code></h4>
|
||||
<h4 id="popovershow"><code class="language-plaintext highlighter-rouge">.popover('show')</code></h4>
|
||||
|
||||
<p>Reveals an element’s popover. <strong>Returns to the caller before the popover has actually been shown</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover. Popovers whose title and content are both zero-length are never displayed.</p>
|
||||
<p>Reveals an element’s popover. <strong>Returns to the caller before the popover has actually been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">shown.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover. Popovers whose title and content are both zero-length are never displayed.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popoverhide"><code class="highlighter-rouge">.popover('hide')</code></h4>
|
||||
<h4 id="popoverhide"><code class="language-plaintext highlighter-rouge">.popover('hide')</code></h4>
|
||||
|
||||
<p>Hides an element’s popover. <strong>Returns to the caller before the popover has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover.</p>
|
||||
<p>Hides an element’s popover. <strong>Returns to the caller before the popover has actually been hidden</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">hidden.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="dl">'</span><span class="s1">hide</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popovertoggle"><code class="highlighter-rouge">.popover('toggle')</code></h4>
|
||||
<h4 id="popovertoggle"><code class="language-plaintext highlighter-rouge">.popover('toggle')</code></h4>
|
||||
|
||||
<p>Toggles an element’s popover. <strong>Returns to the caller before the popover has actually been shown or hidden</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.popover</code> or <code class="highlighter-rouge">hidden.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover.</p>
|
||||
<p>Toggles an element’s popover. <strong>Returns to the caller before the popover has actually been shown or hidden</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">shown.bs.popover</code> or <code class="language-plaintext highlighter-rouge">hidden.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="dl">'</span><span class="s1">toggle</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popoverdispose"><code class="highlighter-rouge">.popover('dispose')</code></h4>
|
||||
<h4 id="popoverdispose"><code class="language-plaintext highlighter-rouge">.popover('dispose')</code></h4>
|
||||
|
||||
<p>Hides and destroys an element’s popover. Popovers that use delegation (which are created using <a href="#options">the <code class="highlighter-rouge">selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
|
||||
<p>Hides and destroys an element’s popover. Popovers that use delegation (which are created using <a href="#options">the <code class="language-plaintext highlighter-rouge">selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="dl">'</span><span class="s1">dispose</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popoverenable"><code class="highlighter-rouge">.popover('enable')</code></h4>
|
||||
<h4 id="popoverenable"><code class="language-plaintext highlighter-rouge">.popover('enable')</code></h4>
|
||||
|
||||
<p>Gives an element’s popover the ability to be shown. <strong>Popovers are enabled by default.</strong></p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="dl">'</span><span class="s1">enable</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popoverdisable"><code class="highlighter-rouge">.popover('disable')</code></h4>
|
||||
<h4 id="popoverdisable"><code class="language-plaintext highlighter-rouge">.popover('disable')</code></h4>
|
||||
|
||||
<p>Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="dl">'</span><span class="s1">disable</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popovertoggleenabled"><code class="highlighter-rouge">.popover('toggleEnabled')</code></h4>
|
||||
<h4 id="popovertoggleenabled"><code class="language-plaintext highlighter-rouge">.popover('toggleEnabled')</code></h4>
|
||||
|
||||
<p>Toggles the ability for an element’s popover to be shown or hidden.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="dl">'</span><span class="s1">toggleEnabled</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="popoverupdate"><code class="highlighter-rouge">.popover('update')</code></h4>
|
||||
<h4 id="popoverupdate"><code class="language-plaintext highlighter-rouge">.popover('update')</code></h4>
|
||||
|
||||
<p>Updates the position of an element’s popover.</p>
|
||||
|
||||
@ -899,6 +903,6 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/progress/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -480,19 +481,22 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/progress.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Progress</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
|
||||
<p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">the HTML5 <code class="highlighter-rouge"><progress></code> element</a>, ensuring you can stack progress bars, animate them, and place text labels over them.</p>
|
||||
<p>Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">the HTML5 <code class="language-plaintext highlighter-rouge"><progress></code> element</a>, ensuring you can stack progress bars, animate them, and place text labels over them.</p>
|
||||
|
||||
<ul>
|
||||
<li>We use the <code class="highlighter-rouge">.progress</code> as a wrapper to indicate the max value of the progress bar.</li>
|
||||
<li>We use the inner <code class="highlighter-rouge">.progress-bar</code> to indicate the progress so far.</li>
|
||||
<li>The <code class="highlighter-rouge">.progress-bar</code> requires an inline style, utility class, or custom CSS to set their width.</li>
|
||||
<li>The <code class="highlighter-rouge">.progress-bar</code> also requires some <code class="highlighter-rouge">role</code> and <code class="highlighter-rouge">aria</code> attributes to make it accessible.</li>
|
||||
<li>We use the <code class="language-plaintext highlighter-rouge">.progress</code> as a wrapper to indicate the max value of the progress bar.</li>
|
||||
<li>We use the inner <code class="language-plaintext highlighter-rouge">.progress-bar</code> to indicate the progress so far.</li>
|
||||
<li>The <code class="language-plaintext highlighter-rouge">.progress-bar</code> requires an inline style, utility class, or custom CSS to set their width.</li>
|
||||
<li>The <code class="language-plaintext highlighter-rouge">.progress-bar</code> also requires some <code class="language-plaintext highlighter-rouge">role</code> and <code class="language-plaintext highlighter-rouge">aria</code> attributes to make it accessible.</li>
|
||||
</ul>
|
||||
|
||||
<p>Put that all together, and you have the following examples.</p>
|
||||
@ -543,7 +547,7 @@
|
||||
|
||||
<h2 id="labels">Labels</h2>
|
||||
|
||||
<p>Add labels to your progress bars by placing text within the <code class="highlighter-rouge">.progress-bar</code>.</p>
|
||||
<p>Add labels to your progress bars by placing text within the <code class="language-plaintext highlighter-rouge">.progress-bar</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="progress">
|
||||
@ -556,7 +560,7 @@
|
||||
|
||||
<h2 id="height">Height</h2>
|
||||
|
||||
<p>We only set a <code class="highlighter-rouge">height</code> value on the <code class="highlighter-rouge">.progress</code>, so if you change that value the inner <code class="highlighter-rouge">.progress-bar</code> will automatically resize accordingly.</p>
|
||||
<p>We only set a <code class="language-plaintext highlighter-rouge">height</code> value on the <code class="language-plaintext highlighter-rouge">.progress</code>, so if you change that value the inner <code class="language-plaintext highlighter-rouge">.progress-bar</code> will automatically resize accordingly.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="progress" style="height: 1px;">
|
||||
@ -623,7 +627,7 @@
|
||||
|
||||
<h2 id="striped">Striped</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.progress-bar-striped</code> to any <code class="highlighter-rouge">.progress-bar</code> to apply a stripe via CSS gradient over the progress bar’s background color.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.progress-bar-striped</code> to any <code class="language-plaintext highlighter-rouge">.progress-bar</code> to apply a stripe via CSS gradient over the progress bar’s background color.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="progress">
|
||||
@ -660,7 +664,7 @@
|
||||
|
||||
<h2 id="animated-stripes">Animated stripes</h2>
|
||||
|
||||
<p>The striped gradient can also be animated. Add <code class="highlighter-rouge">.progress-bar-animated</code> to <code class="highlighter-rouge">.progress-bar</code> to animate the stripes right to left via CSS3 animations.</p>
|
||||
<p>The striped gradient can also be animated. Add <code class="language-plaintext highlighter-rouge">.progress-bar-animated</code> to <code class="language-plaintext highlighter-rouge">.progress-bar</code> to animate the stripes right to left via CSS3 animations.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="progress">
|
||||
@ -681,6 +685,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/scrollspy/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -491,7 +492,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/scrollspy.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Scrollspy</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -500,14 +504,14 @@
|
||||
<p>Scrollspy has a few requirements to function properly:</p>
|
||||
|
||||
<ul>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="language-plaintext highlighter-rouge">util.js</code></a>.</li>
|
||||
<li>It must be used on a Bootstrap <a href="/docs/4.5/components/navs/">nav component</a> or <a href="/docs/4.5/components/list-group/">list group</a>.</li>
|
||||
<li>Scrollspy requires <code class="highlighter-rouge">position: relative;</code> on the element you’re spying on, usually the <code class="highlighter-rouge"><body></code>.</li>
|
||||
<li>When spying on elements other than the <code class="highlighter-rouge"><body></code>, be sure to have a <code class="highlighter-rouge">height</code> set and <code class="highlighter-rouge">overflow-y: scroll;</code> applied.</li>
|
||||
<li>Anchors (<code class="highlighter-rouge"><a></code>) are required and must point to an element with that <code class="highlighter-rouge">id</code>.</li>
|
||||
<li>Scrollspy requires <code class="language-plaintext highlighter-rouge">position: relative;</code> on the element you’re spying on, usually the <code class="language-plaintext highlighter-rouge"><body></code>.</li>
|
||||
<li>When spying on elements other than the <code class="language-plaintext highlighter-rouge"><body></code>, be sure to have a <code class="language-plaintext highlighter-rouge">height</code> set and <code class="language-plaintext highlighter-rouge">overflow-y: scroll;</code> applied.</li>
|
||||
<li>Anchors (<code class="language-plaintext highlighter-rouge"><a></code>) are required and must point to an element with that <code class="language-plaintext highlighter-rouge">id</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p>When successfully implemented, your nav or list group will update accordingly, moving the <code class="highlighter-rouge">.active</code> class from one item to the next based on their associated targets.</p>
|
||||
<p>When successfully implemented, your nav or list group will update accordingly, moving the <code class="language-plaintext highlighter-rouge">.active</code> class from one item to the next based on their associated targets.</p>
|
||||
|
||||
<h2 id="example-in-navbar">Example in navbar</h2>
|
||||
|
||||
@ -585,7 +589,7 @@
|
||||
|
||||
<h2 id="example-with-nested-nav">Example with nested nav</h2>
|
||||
|
||||
<p>Scrollspy also works with nested <code class="highlighter-rouge">.nav</code>s. If a nested <code class="highlighter-rouge">.nav</code> is <code class="highlighter-rouge">.active</code>, its parents will also be <code class="highlighter-rouge">.active</code>. Scroll the area next to the navbar and watch the active class change.</p>
|
||||
<p>Scrollspy also works with nested <code class="language-plaintext highlighter-rouge">.nav</code>s. If a nested <code class="language-plaintext highlighter-rouge">.nav</code> is <code class="language-plaintext highlighter-rouge">.active</code>, its parents will also be <code class="language-plaintext highlighter-rouge">.active</code>. Scroll the area next to the navbar and watch the active class change.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row">
|
||||
@ -664,7 +668,7 @@
|
||||
|
||||
<h2 id="example-with-list-group">Example with list-group</h2>
|
||||
|
||||
<p>Scrollspy also works with <code class="highlighter-rouge">.list-group</code>s. Scroll the area next to the list group and watch the active class change.</p>
|
||||
<p>Scrollspy also works with <code class="language-plaintext highlighter-rouge">.list-group</code>s. Scroll the area next to the list group and watch the active class change.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row">
|
||||
@ -712,7 +716,7 @@
|
||||
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
|
||||
<p>To easily add scrollspy behavior to your topbar navigation, add <code class="highlighter-rouge">data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code class="highlighter-rouge"><body></code>). Then add the <code class="highlighter-rouge">data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code class="highlighter-rouge">.nav</code> component.</p>
|
||||
<p>To easily add scrollspy behavior to your topbar navigation, add <code class="language-plaintext highlighter-rouge">data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code class="language-plaintext highlighter-rouge"><body></code>). Then add the <code class="language-plaintext highlighter-rouge">data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code class="language-plaintext highlighter-rouge">.nav</code> component.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span>
|
||||
<span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
|
||||
@ -730,25 +734,25 @@
|
||||
|
||||
<h3 id="via-javascript">Via JavaScript</h3>
|
||||
|
||||
<p>After adding <code class="highlighter-rouge">position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
|
||||
<p>After adding <code class="language-plaintext highlighter-rouge">position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">body</span><span class="dl">'</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">({</span> <span class="na">target</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#navbar-example</span><span class="dl">'</span> <span class="p">})</span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4 id="resolvable-id-targets-required">Resolvable ID targets required</h4>
|
||||
|
||||
<p>Navbar links must have resolvable id targets. For example, a <code class="highlighter-rouge"><a href="#home">home</a></code> must correspond to something in the DOM like <code class="highlighter-rouge"><div id="home"></div></code>.</p>
|
||||
<p>Navbar links must have resolvable id targets. For example, a <code class="language-plaintext highlighter-rouge"><a href="#home">home</a></code> must correspond to something in the DOM like <code class="language-plaintext highlighter-rouge"><div id="home"></div></code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4 id="non-visible-target-elements-ignored">Non-<code class="highlighter-rouge">:visible</code> target elements ignored</h4>
|
||||
<h4 id="non-visible-target-elements-ignored">Non-<code class="language-plaintext highlighter-rouge">:visible</code> target elements ignored</h4>
|
||||
|
||||
<p>Target elements that are not <a href="https://api.jquery.com/visible-selector/"><code class="highlighter-rouge">:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
|
||||
<p>Target elements that are not <a href="https://api.jquery.com/visible-selector/"><code class="language-plaintext highlighter-rouge">:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
<h4 id="scrollspyrefresh"><code class="highlighter-rouge">.scrollspy('refresh')</code></h4>
|
||||
<h4 id="scrollspyrefresh"><code class="language-plaintext highlighter-rouge">.scrollspy('refresh')</code></h4>
|
||||
|
||||
<p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:</p>
|
||||
|
||||
@ -756,13 +760,13 @@
|
||||
<span class="kd">var</span> <span class="nx">$spy</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">(</span><span class="dl">'</span><span class="s1">refresh</span><span class="dl">'</span><span class="p">)</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h4 id="scrollspydispose"><code class="highlighter-rouge">.scrollspy('dispose')</code></h4>
|
||||
<h4 id="scrollspydispose"><code class="language-plaintext highlighter-rouge">.scrollspy('dispose')</code></h4>
|
||||
|
||||
<p>Destroys an element’s scrollspy.</p>
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-offset=""</code>.</p>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="language-plaintext highlighter-rouge">data-</code>, as in <code class="language-plaintext highlighter-rouge">data-offset=""</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -822,6 +826,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/spinners/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -494,7 +495,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/spinners.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Spinners</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -502,7 +506,7 @@
|
||||
|
||||
<p>Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.</p>
|
||||
|
||||
<p>For accessibility purposes, each loader here includes <code class="highlighter-rouge">role="status"</code> and a nested <code class="highlighter-rouge"><span class="sr-only">Loading...</span></code>.</p>
|
||||
<p>For accessibility purposes, each loader here includes <code class="language-plaintext highlighter-rouge">role="status"</code> and a nested <code class="language-plaintext highlighter-rouge"><span class="sr-only">Loading...</span></code>.</p>
|
||||
|
||||
<h2 id="border-spinner">Border spinner</h2>
|
||||
|
||||
@ -519,7 +523,7 @@
|
||||
|
||||
<h3 id="colors">Colors</h3>
|
||||
|
||||
<p>The border spinner uses <code class="highlighter-rouge">currentColor</code> for its <code class="highlighter-rouge">border-color</code>, meaning you can customize the color with <a href="/docs/4.5/utilities/colors/">text color utilities</a>. You can use any of our text color utilities on the standard spinner.</p>
|
||||
<p>The border spinner uses <code class="language-plaintext highlighter-rouge">currentColor</code> for its <code class="language-plaintext highlighter-rouge">border-color</code>, meaning you can customize the color with <a href="/docs/4.5/utilities/colors/">text color utilities</a>. You can use any of our text color utilities on the standard spinner.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -574,7 +578,7 @@
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p><strong>Why not use <code class="highlighter-rouge">border-color</code> utilities?</strong> Each border spinner specifies a <code class="highlighter-rouge">transparent</code> border for at least one side, so <code class="highlighter-rouge">.border-{color}</code> utilities would override that.</p>
|
||||
<p><strong>Why not use <code class="language-plaintext highlighter-rouge">border-color</code> utilities?</strong> Each border spinner specifies a <code class="language-plaintext highlighter-rouge">transparent</code> border for at least one side, so <code class="language-plaintext highlighter-rouge">.border-{color}</code> utilities would override that.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="growing-spinner">Growing spinner</h2>
|
||||
@ -590,7 +594,7 @@
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Loading...<span class="nt"></span></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Once again, this spinner is built with <code class="highlighter-rouge">currentColor</code>, so you can easily change its appearance with <a href="/docs/4.5/utilities/colors/">text color utilities</a>. Here it is in blue, along with the supported variants.</p>
|
||||
<p>Once again, this spinner is built with <code class="language-plaintext highlighter-rouge">currentColor</code>, so you can easily change its appearance with <a href="/docs/4.5/utilities/colors/">text color utilities</a>. Here it is in blue, along with the supported variants.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -646,11 +650,11 @@
|
||||
|
||||
<h2 id="alignment">Alignment</h2>
|
||||
|
||||
<p>Spinners in Bootstrap are built with <code class="highlighter-rouge">rem</code>s, <code class="highlighter-rouge">currentColor</code>, and <code class="highlighter-rouge">display: inline-flex</code>. This means they can easily be resized, recolored, and quickly aligned.</p>
|
||||
<p>Spinners in Bootstrap are built with <code class="language-plaintext highlighter-rouge">rem</code>s, <code class="language-plaintext highlighter-rouge">currentColor</code>, and <code class="language-plaintext highlighter-rouge">display: inline-flex</code>. This means they can easily be resized, recolored, and quickly aligned.</p>
|
||||
|
||||
<h3 id="margin">Margin</h3>
|
||||
|
||||
<p>Use <a href="/docs/4.5/utilities/spacing/">margin utilities</a> like <code class="highlighter-rouge">.m-5</code> for easy spacing.</p>
|
||||
<p>Use <a href="/docs/4.5/utilities/spacing/">margin utilities</a> like <code class="language-plaintext highlighter-rouge">.m-5</code> for easy spacing.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="spinner-border m-5" role="status">
|
||||
@ -723,7 +727,7 @@
|
||||
|
||||
<h2 id="size">Size</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.spinner-border-sm</code> and <code class="highlighter-rouge">.spinner-grow-sm</code> to make a smaller spinner that can quickly be used within other components.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.spinner-border-sm</code> and <code class="language-plaintext highlighter-rouge">.spinner-grow-sm</code> to make a smaller spinner that can quickly be used within other components.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="spinner-border spinner-border-sm" role="status">
|
||||
@ -805,6 +809,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/toasts/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -498,7 +499,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/toasts.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Toasts</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -509,21 +513,21 @@
|
||||
<p>Things to know when using the toast plugin:</p>
|
||||
|
||||
<ul>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="language-plaintext highlighter-rouge">util.js</code></a>.</li>
|
||||
<li>Toasts are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
|
||||
<li><strong>Please note that you are responsible for positioning toasts.</strong></li>
|
||||
<li>Toasts will automatically hide if you do not specify <code class="highlighter-rouge">autohide: false</code>.</li>
|
||||
<li>Toasts will automatically hide if you do not specify <code class="language-plaintext highlighter-rouge">autohide: false</code>.</li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
<p>The animation effect of this component is dependent on the <code class="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<h3 id="basic">Basic</h3>
|
||||
|
||||
<p>To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use <code class="highlighter-rouge">display: flex</code>, allowing easy alignment of content thanks to our margin and flexbox utilities.</p>
|
||||
<p>To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use <code class="language-plaintext highlighter-rouge">display: flex</code>, allowing easy alignment of content thanks to our margin and flexbox utilities.</p>
|
||||
|
||||
<p>Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.</p>
|
||||
|
||||
@ -558,7 +562,7 @@
|
||||
|
||||
<h3 id="translucent">Translucent</h3>
|
||||
|
||||
<p>Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the <code class="highlighter-rouge">backdrop-filter</code> CSS property, we’ll also attempt to blur the elements under a toast.</p>
|
||||
<p>Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the <code class="language-plaintext highlighter-rouge">backdrop-filter</code> CSS property, we’ll also attempt to blur the elements under a toast.</p>
|
||||
|
||||
<div class="bd-example bg-dark">
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
@ -652,7 +656,7 @@
|
||||
|
||||
<h2 id="placement">Placement</h2>
|
||||
|
||||
<p>Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the <code class="highlighter-rouge">.toast</code>.</p>
|
||||
<p>Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the <code class="language-plaintext highlighter-rouge">.toast</code>.</p>
|
||||
|
||||
<div class="bd-example bg-dark">
|
||||
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
|
||||
@ -764,7 +768,7 @@
|
||||
|
||||
<div class="bd-example bg-dark">
|
||||
<!-- Flexbox container for aligning the toasts -->
|
||||
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
|
||||
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">
|
||||
|
||||
<!-- Then put toasts within -->
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
@ -783,7 +787,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Flexbox container for aligning the toasts --></span>
|
||||
<span class="nt"><div</span> <span class="na">aria-live=</span><span class="s">"polite"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">class=</span><span class="s">"d-flex justify-content-center align-items-center"</span> <span class="na">style=</span><span class="s">"min-height: 200px;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">aria-live=</span><span class="s">"polite"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">class=</span><span class="s">"d-flex justify-content-center align-items-center"</span> <span class="na">style=</span><span class="s">"height: 200px;"</span><span class="nt">></span>
|
||||
|
||||
<span class="c"><!-- Then put toasts within --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
@ -803,19 +807,19 @@
|
||||
|
||||
<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 class="highlighter-rouge">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 class="highlighter-rouge">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/4.5/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 class="language-plaintext highlighter-rouge">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 class="language-plaintext highlighter-rouge">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/4.5/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 class="highlighter-rouge">role</code> and <code class="highlighter-rouge">aria-live</code> level depending on the content. If it’s an important message like an error, use <code class="highlighter-rouge">role="alert" aria-live="assertive"</code>, otherwise use <code class="highlighter-rouge">role="status" aria-live="polite"</code> attributes.</p>
|
||||
<p>You also need to adapt the <code class="language-plaintext highlighter-rouge">role</code> and <code class="language-plaintext highlighter-rouge">aria-live</code> level depending on the content. If it’s an important message like an error, use <code class="language-plaintext highlighter-rouge">role="alert" aria-live="assertive"</code>, otherwise use <code class="language-plaintext highlighter-rouge">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 class="highlighter-rouge">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 class="language-plaintext highlighter-rouge">delay</code> timeout</a> to ensure people have enough time to read the toast.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"polite"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-delay=</span><span class="s">"10000"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>When using <code class="highlighter-rouge">autohide: false</code>, you must add a close button to allow users to dismiss the toast.</p>
|
||||
<p>When using <code class="language-plaintext highlighter-rouge">autohide: false</code>, you must add a close button to allow users to dismiss the toast.</p>
|
||||
|
||||
<div class="bd-example bg-light">
|
||||
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
|
||||
@ -856,7 +860,7 @@
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-animation=""</code>.</p>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="language-plaintext highlighter-rouge">data-</code>, as in <code class="language-plaintext highlighter-rouge">data-animation=""</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -901,24 +905,24 @@
|
||||
<p><a href="/docs/4.5/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
|
||||
</div>
|
||||
|
||||
<h4 id="toastoptions"><code class="highlighter-rouge">$().toast(options)</code></h4>
|
||||
<h4 id="toastoptions"><code class="language-plaintext highlighter-rouge">$().toast(options)</code></h4>
|
||||
|
||||
<p>Attaches a toast handler to an element collection.</p>
|
||||
|
||||
<h4 id="toastshow"><code class="highlighter-rouge">.toast('show')</code></h4>
|
||||
<h4 id="toastshow"><code class="language-plaintext highlighter-rouge">.toast('show')</code></h4>
|
||||
|
||||
<p>Reveals an element’s toast. <strong>Returns to the caller before the toast has actually been shown</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.toast</code> event occurs).
|
||||
<p>Reveals an element’s toast. <strong>Returns to the caller before the toast has actually been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">shown.bs.toast</code> event occurs).
|
||||
You have to manually call this method, instead your toast won’t show.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="toasthide"><code class="highlighter-rouge">.toast('hide')</code></h4>
|
||||
<h4 id="toasthide"><code class="language-plaintext highlighter-rouge">.toast('hide')</code></h4>
|
||||
|
||||
<p>Hides an element’s toast. <strong>Returns to the caller before the toast has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.toast</code> event occurs). You have to manually call this method if you made <code class="highlighter-rouge">autohide</code> to <code class="highlighter-rouge">false</code>.</p>
|
||||
<p>Hides an element’s toast. <strong>Returns to the caller before the toast has actually been hidden</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">hidden.bs.toast</code> event occurs). You have to manually call this method if you made <code class="language-plaintext highlighter-rouge">autohide</code> to <code class="language-plaintext highlighter-rouge">false</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="dl">'</span><span class="s1">hide</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="toastdispose"><code class="highlighter-rouge">.toast('dispose')</code></h4>
|
||||
<h4 id="toastdispose"><code class="language-plaintext highlighter-rouge">.toast('dispose')</code></h4>
|
||||
|
||||
<p>Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.</p>
|
||||
|
||||
@ -963,6 +967,6 @@ You have to manually call this method, instead your toast won’t show.</p>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/tooltips/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -497,7 +498,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/tooltips.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Tooltips</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -506,27 +510,27 @@
|
||||
<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.js</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for tooltips to work!</li>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
|
||||
<li>Tooltips rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code class="language-plaintext highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="language-plaintext highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for tooltips to work!</li>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="language-plaintext highlighter-rouge">util.js</code></a>.</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 class="highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
|
||||
<li>Specify <code class="language-plaintext highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
|
||||
<li>Triggering tooltips on hidden elements will not work.</li>
|
||||
<li>Tooltips for <code class="highlighter-rouge">.disabled</code> or <code class="highlighter-rouge">disabled</code> elements must be triggered on a wrapper element.</li>
|
||||
<li>When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use <code class="highlighter-rouge">white-space: nowrap;</code> on your <code class="highlighter-rouge"><a></code>s to avoid this behavior.</li>
|
||||
<li>Tooltips for <code class="language-plaintext highlighter-rouge">.disabled</code> or <code class="language-plaintext highlighter-rouge">disabled</code> elements must be triggered on a wrapper element.</li>
|
||||
<li>When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use <code class="language-plaintext highlighter-rouge">white-space: nowrap;</code> on your <code class="language-plaintext highlighter-rouge"><a></code>s to avoid this behavior.</li>
|
||||
<li>Tooltips must be hidden before their corresponding elements have been removed from the DOM.</li>
|
||||
<li>Tooltips can be triggered thanks to an element inside a shadow DOM.</li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
<p>The animation effect of this component is dependent on the <code class="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
<p>Got all that? Great, let’s see how they work with some examples.</p>
|
||||
|
||||
<h2 id="example-enable-tooltips-everywhere">Example: Enable tooltips everywhere</h2>
|
||||
|
||||
<p>One way to initialize all tooltips on a page would be to select them by their <code class="highlighter-rouge">data-toggle</code> attribute:</p>
|
||||
<p>One way to initialize all tooltips on a page would be to select them by their <code class="language-plaintext highlighter-rouge">data-toggle</code> attribute:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">[data-toggle="tooltip"]</span><span class="dl">'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">()</span>
|
||||
@ -581,9 +585,9 @@
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#example</span><span class="dl">'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="overflow-auto-and-scroll">Overflow <code class="highlighter-rouge">auto</code> and <code class="highlighter-rouge">scroll</code></h5>
|
||||
<h5 id="overflow-auto-and-scroll">Overflow <code class="language-plaintext highlighter-rouge">auto</code> and <code class="language-plaintext highlighter-rouge">scroll</code></h5>
|
||||
|
||||
<p>Tooltip position attempts to automatically change when a parent container has <code class="highlighter-rouge">overflow: auto</code> or <code class="highlighter-rouge">overflow: scroll</code> like our <code class="highlighter-rouge">.table-responsive</code>, but still keeps the original placement’s positioning. To resolve, set the <code class="highlighter-rouge">boundary</code> option to anything other than default value, <code class="highlighter-rouge">'scrollParent'</code>, such as <code class="highlighter-rouge">'window'</code>:</p>
|
||||
<p>Tooltip position attempts to automatically change when a parent container has <code class="language-plaintext highlighter-rouge">overflow: auto</code> or <code class="language-plaintext highlighter-rouge">overflow: scroll</code> like our <code class="language-plaintext highlighter-rouge">.table-responsive</code>, but still keeps the original placement’s positioning. To resolve, set the <code class="language-plaintext highlighter-rouge">boundary</code> option to anything other than default value, <code class="language-plaintext highlighter-rouge">'scrollParent'</code>, such as <code class="language-plaintext highlighter-rouge">'window'</code>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#example</span><span class="dl">'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">({</span> <span class="na">boundary</span><span class="p">:</span> <span class="dl">'</span><span class="s1">window</span><span class="dl">'</span> <span class="p">})</span></code></pre></figure>
|
||||
|
||||
@ -591,12 +595,12 @@
|
||||
|
||||
<h3 id="markup">Markup</h3>
|
||||
|
||||
<p>The required markup for a tooltip is only a <code class="highlighter-rouge">data</code> attribute and <code class="highlighter-rouge">title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code class="highlighter-rouge">top</code> by the plugin).</p>
|
||||
<p>The required markup for a tooltip is only a <code class="language-plaintext highlighter-rouge">data</code> attribute and <code class="language-plaintext highlighter-rouge">title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code class="language-plaintext highlighter-rouge">top</code> by the plugin).</p>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="making-tooltips-work-for-keyboard-and-assistive-technology-users">Making tooltips work for keyboard and assistive technology users</h5>
|
||||
|
||||
<p>You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <code class="highlighter-rouge"><span></code>s) can be made focusable by adding the <code class="highlighter-rouge">tabindex="0"</code> attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on <code class="highlighter-rouge">hover</code> as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.</p>
|
||||
<p>You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <code class="language-plaintext highlighter-rouge"><span></code>s) can be made focusable by adding the <code class="language-plaintext highlighter-rouge">tabindex="0"</code> attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on <code class="language-plaintext highlighter-rouge">hover</code> as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.</p>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- HTML to write --></span>
|
||||
@ -612,7 +616,7 @@
|
||||
|
||||
<h3 id="disabled-elements">Disabled elements</h3>
|
||||
|
||||
<p>Elements with the <code class="highlighter-rouge">disabled</code> attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <code class="highlighter-rouge"><div></code> or <code class="highlighter-rouge"><span></code>, ideally made keyboard-focusable using <code class="highlighter-rouge">tabindex="0"</code>, and override the <code class="highlighter-rouge">pointer-events</code> on the disabled element.</p>
|
||||
<p>Elements with the <code class="language-plaintext highlighter-rouge">disabled</code> attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <code class="language-plaintext highlighter-rouge"><div></code> or <code class="language-plaintext highlighter-rouge"><span></code>, ideally made keyboard-focusable using <code class="language-plaintext highlighter-rouge">tabindex="0"</code>, and override the <code class="language-plaintext highlighter-rouge">pointer-events</code> on the disabled element.</p>
|
||||
|
||||
<div class="tooltip-demo">
|
||||
|
||||
@ -629,10 +633,10 @@
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-animation=""</code>.</p>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="language-plaintext highlighter-rouge">data-</code>, as in <code class="language-plaintext highlighter-rouge">data-animation=""</code>.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<p>Note that for security reasons the <code class="highlighter-rouge">sanitize</code>, <code class="highlighter-rouge">sanitizeFn</code> and <code class="highlighter-rouge">whiteList</code> options cannot be supplied using data attributes.</p>
|
||||
<p>Note that for security reasons the <code class="language-plaintext highlighter-rouge">sanitize</code>, <code class="language-plaintext highlighter-rouge">sanitizeFn</code> and <code class="language-plaintext highlighter-rouge">whiteList</code> options cannot be supplied using data attributes.</p>
|
||||
</div>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
@ -790,53 +794,53 @@
|
||||
<p><a href="/docs/4.5/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
|
||||
</div>
|
||||
|
||||
<h4 id="tooltipoptions"><code class="highlighter-rouge">$().tooltip(options)</code></h4>
|
||||
<h4 id="tooltipoptions"><code class="language-plaintext highlighter-rouge">$().tooltip(options)</code></h4>
|
||||
|
||||
<p>Attaches a tooltip handler to an element collection.</p>
|
||||
|
||||
<h4 id="tooltipshow"><code class="highlighter-rouge">.tooltip('show')</code></h4>
|
||||
<h4 id="tooltipshow"><code class="language-plaintext highlighter-rouge">.tooltip('show')</code></h4>
|
||||
|
||||
<p>Reveals an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been shown</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.</p>
|
||||
<p>Reveals an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been shown</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">shown.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="tooltiphide"><code class="highlighter-rouge">.tooltip('hide')</code></h4>
|
||||
<h4 id="tooltiphide"><code class="language-plaintext highlighter-rouge">.tooltip('hide')</code></h4>
|
||||
|
||||
<p>Hides an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip.</p>
|
||||
<p>Hides an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been hidden</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">hidden.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="dl">'</span><span class="s1">hide</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="tooltiptoggle"><code class="highlighter-rouge">.tooltip('toggle')</code></h4>
|
||||
<h4 id="tooltiptoggle"><code class="language-plaintext highlighter-rouge">.tooltip('toggle')</code></h4>
|
||||
|
||||
<p>Toggles an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been shown or hidden</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.tooltip</code> or <code class="highlighter-rouge">hidden.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip.</p>
|
||||
<p>Toggles an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been shown or hidden</strong> (i.e. before the <code class="language-plaintext highlighter-rouge">shown.bs.tooltip</code> or <code class="language-plaintext highlighter-rouge">hidden.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="dl">'</span><span class="s1">toggle</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="tooltipdispose"><code class="highlighter-rouge">.tooltip('dispose')</code></h4>
|
||||
<h4 id="tooltipdispose"><code class="language-plaintext highlighter-rouge">.tooltip('dispose')</code></h4>
|
||||
|
||||
<p>Hides and destroys an element’s tooltip. Tooltips that use delegation (which are created using <a href="#options">the <code class="highlighter-rouge">selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
|
||||
<p>Hides and destroys an element’s tooltip. Tooltips that use delegation (which are created using <a href="#options">the <code class="language-plaintext highlighter-rouge">selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="dl">'</span><span class="s1">dispose</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="tooltipenable"><code class="highlighter-rouge">.tooltip('enable')</code></h4>
|
||||
<h4 id="tooltipenable"><code class="language-plaintext highlighter-rouge">.tooltip('enable')</code></h4>
|
||||
|
||||
<p>Gives an element’s tooltip the ability to be shown. <strong>Tooltips are enabled by default.</strong></p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="dl">'</span><span class="s1">enable</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="tooltipdisable"><code class="highlighter-rouge">.tooltip('disable')</code></h4>
|
||||
<h4 id="tooltipdisable"><code class="language-plaintext highlighter-rouge">.tooltip('disable')</code></h4>
|
||||
|
||||
<p>Removes the ability for an element’s tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="dl">'</span><span class="s1">disable</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="tooltiptoggleenabled"><code class="highlighter-rouge">.tooltip('toggleEnabled')</code></h4>
|
||||
<h4 id="tooltiptoggleenabled"><code class="language-plaintext highlighter-rouge">.tooltip('toggleEnabled')</code></h4>
|
||||
|
||||
<p>Toggles the ability for an element’s tooltip to be shown or hidden.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#element</span><span class="dl">'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="dl">'</span><span class="s1">toggleEnabled</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="tooltipupdate"><code class="highlighter-rouge">.tooltip('update')</code></h4>
|
||||
<h4 id="tooltipupdate"><code class="language-plaintext highlighter-rouge">.tooltip('update')</code></h4>
|
||||
|
||||
<p>Updates the position of an element’s tooltip.</p>
|
||||
|
||||
@ -885,6 +889,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/code/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -478,13 +479,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/content/code.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Code</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="inline-code">Inline code</h2>
|
||||
|
||||
<p>Wrap inline snippets of code with <code class="highlighter-rouge"><code></code>. Be sure to escape HTML angle brackets.</p>
|
||||
<p>Wrap inline snippets of code with <code class="language-plaintext highlighter-rouge"><code></code>. Be sure to escape HTML angle brackets.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
@ -493,7 +497,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
|
||||
<h2 id="code-blocks">Code blocks</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge"><pre></code>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the <code class="highlighter-rouge">.pre-scrollable</code> class, which will set a max-height of 340px and provide a y-axis scrollbar.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge"><pre></code>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the <code class="language-plaintext highlighter-rouge">.pre-scrollable</code> class, which will set a max-height of 340px and provide a y-axis scrollbar.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<pre><code><p>Sample text here...</p>
|
||||
@ -506,7 +510,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
|
||||
<h2 id="variables">Variables</h2>
|
||||
|
||||
<p>For indicating variables use the <code class="highlighter-rouge"><var></code> tag.</p>
|
||||
<p>For indicating variables use the <code class="language-plaintext highlighter-rouge"><var></code> tag.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
|
||||
@ -515,7 +519,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
|
||||
<h2 id="user-input">User input</h2>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge"><kbd></code> to indicate input that is typically entered via keyboard.</p>
|
||||
<p>Use the <code class="language-plaintext highlighter-rouge"><kbd></code> to indicate input that is typically entered via keyboard.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br />
|
||||
@ -526,7 +530,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
|
||||
<h2 id="sample-output">Sample output</h2>
|
||||
|
||||
<p>For indicating sample output from a program use the <code class="highlighter-rouge"><samp></code> tag.</p>
|
||||
<p>For indicating sample output from a program use the <code class="language-plaintext highlighter-rouge"><samp></code> tag.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
||||
@ -539,6 +543,6 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/figures/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,13 +469,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/content/figures.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Figures</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for displaying related images and text with the figure component in Bootstrap.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code class="highlighter-rouge"><figure></code>.</p>
|
||||
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code class="language-plaintext highlighter-rouge"><figure></code>.</p>
|
||||
|
||||
<p>Use the included <code class="highlighter-rouge">.figure</code> , <code class="highlighter-rouge">.figure-img</code> and <code class="highlighter-rouge">.figure-caption</code> classes to provide some baseline styles for the HTML5 <code class="highlighter-rouge"><figure></code> and <code class="highlighter-rouge"><figcaption></code> elements. Images in figures have no explicit size, so be sure to add the <code class="highlighter-rouge">.img-fluid</code> class to your <code class="highlighter-rouge"><img></code> to make it responsive.</p>
|
||||
<p>Use the included <code class="language-plaintext highlighter-rouge">.figure</code> , <code class="language-plaintext highlighter-rouge">.figure-img</code> and <code class="language-plaintext highlighter-rouge">.figure-caption</code> classes to provide some baseline styles for the HTML5 <code class="language-plaintext highlighter-rouge"><figure></code> and <code class="language-plaintext highlighter-rouge"><figcaption></code> elements. Images in figures have no explicit size, so be sure to add the <code class="language-plaintext highlighter-rouge">.img-fluid</code> class to your <code class="language-plaintext highlighter-rouge"><img></code> to make it responsive.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<figure class="figure">
|
||||
@ -506,6 +510,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/images/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -477,13 +478,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/content/images.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Images</h1>
|
||||
</div>
|
||||
<p class="bd-lead">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.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="responsive-images">Responsive images</h2>
|
||||
|
||||
<p>Images in Bootstrap are made responsive with <code class="highlighter-rouge">.img-fluid</code>. <code class="highlighter-rouge">max-width: 100%;</code> and <code class="highlighter-rouge">height: auto;</code> are applied to the image so that it scales with the parent element.</p>
|
||||
<p>Images in Bootstrap are made responsive with <code class="language-plaintext highlighter-rouge">.img-fluid</code>. <code class="language-plaintext highlighter-rouge">max-width: 100%;</code> and <code class="language-plaintext highlighter-rouge">height: auto;</code> are applied to the image so that it scales with the parent element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg img-fluid" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Responsive image"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive image</text></svg>
|
||||
@ -492,14 +496,14 @@
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid"</span> <span class="na">alt=</span><span class="s">"Responsive image"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="svg-images-and-ie-10">SVG images and IE 10</h5>
|
||||
<h5 id="svg-images-and-internet-explorer">SVG images and Internet Explorer</h5>
|
||||
|
||||
<p>In Internet Explorer 10, SVG images with <code class="highlighter-rouge">.img-fluid</code> are disproportionately sized. To fix this, add <code class="highlighter-rouge">width: 100% \9;</code> where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.</p>
|
||||
<p>In Internet Explorer 10 and 11, SVG images with <code class="language-plaintext highlighter-rouge">.img-fluid</code> are disproportionately sized. To fix this, add <code class="language-plaintext highlighter-rouge">width: 100%;</code> or <code class="language-plaintext highlighter-rouge">.w-100</code> where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="image-thumbnails">Image thumbnails</h2>
|
||||
|
||||
<p>In addition to our <a href="/docs/4.5/utilities/borders/">border-radius utilities</a>, you can use <code class="highlighter-rouge">.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>
|
||||
<p>In addition to our <a href="/docs/4.5/utilities/borders/">border-radius utilities</a>, you can use <code class="language-plaintext highlighter-rouge">.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
|
||||
@ -509,7 +513,7 @@
|
||||
|
||||
<h2 id="aligning-images">Aligning images</h2>
|
||||
|
||||
<p>Align images with the <a href="/docs/4.5/utilities/float/">helper float classes</a> or <a href="/docs/4.5/utilities/text/#text-alignment">text alignment classes</a>. <code class="highlighter-rouge">block</code>-level images can be centered using <a href="/docs/4.5/utilities/spacing/#horizontal-centering">the <code class="highlighter-rouge">.mx-auto</code> margin utility class</a>.</p>
|
||||
<p>Align images with the <a href="/docs/4.5/utilities/float/">helper float classes</a> or <a href="/docs/4.5/utilities/text/#text-alignment">text alignment classes</a>. <code class="language-plaintext highlighter-rouge">block</code>-level images can be centered using <a href="/docs/4.5/utilities/spacing/#horizontal-centering">the <code class="language-plaintext highlighter-rouge">.mx-auto</code> margin utility class</a>.</p>
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<svg class="bd-placeholder-img rounded float-left" width="200" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 200x200"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
|
||||
@ -537,7 +541,7 @@
|
||||
|
||||
<h2 id="picture">Picture</h2>
|
||||
|
||||
<p>If you are using the <code class="highlighter-rouge"><picture></code> element to specify multiple <code class="highlighter-rouge"><source></code> elements for a specific <code class="highlighter-rouge"><img></code>, make sure to add the <code class="highlighter-rouge">.img-*</code> classes to the <code class="highlighter-rouge"><img></code> and not to the <code class="highlighter-rouge"><picture></code> tag.</p>
|
||||
<p>If you are using the <code class="language-plaintext highlighter-rouge"><picture></code> element to specify multiple <code class="language-plaintext highlighter-rouge"><source></code> elements for a specific <code class="language-plaintext highlighter-rouge"><img></code>, make sure to add the <code class="language-plaintext highlighter-rouge">.img-*</code> classes to the <code class="language-plaintext highlighter-rouge"><img></code> and not to the <code class="language-plaintext highlighter-rouge"><picture></code> tag.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><picture></span>
|
||||
<span class="nt"><source</span> <span class="na">srcset=</span><span class="s">"..."</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span><span class="nt">></span>
|
||||
@ -550,6 +554,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/reboot/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -494,32 +495,35 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/content/reboot.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Reboot</h1>
|
||||
</div>
|
||||
<p class="bd-lead">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.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="approach">Approach</h2>
|
||||
|
||||
<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <code class="highlighter-rouge"><table></code> styles for a simpler baseline and later provide <code class="highlighter-rouge">.table</code>, <code class="highlighter-rouge">.table-bordered</code>, and more.</p>
|
||||
<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <code class="language-plaintext highlighter-rouge"><table></code> styles for a simpler baseline and later provide <code class="language-plaintext highlighter-rouge">.table</code>, <code class="language-plaintext highlighter-rouge">.table-bordered</code>, and more.</p>
|
||||
|
||||
<p>Here are our guidelines and reasons for choosing what to override in Reboot:</p>
|
||||
|
||||
<ul>
|
||||
<li>Update some browser default values to use <code class="highlighter-rouge">rem</code>s instead of <code class="highlighter-rouge">em</code>s for scalable component spacing.</li>
|
||||
<li>Avoid <code class="highlighter-rouge">margin-top</code>. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of <code class="highlighter-rouge">margin</code> is a simpler mental model.</li>
|
||||
<li>For easier scaling across device sizes, block elements should use <code class="highlighter-rouge">rem</code>s for <code class="highlighter-rouge">margin</code>s.</li>
|
||||
<li>Keep declarations of <code class="highlighter-rouge">font</code>-related properties to a minimum, using <code class="highlighter-rouge">inherit</code> whenever possible.</li>
|
||||
<li>Update some browser default values to use <code class="language-plaintext highlighter-rouge">rem</code>s instead of <code class="language-plaintext highlighter-rouge">em</code>s for scalable component spacing.</li>
|
||||
<li>Avoid <code class="language-plaintext highlighter-rouge">margin-top</code>. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of <code class="language-plaintext highlighter-rouge">margin</code> is a simpler mental model.</li>
|
||||
<li>For easier scaling across device sizes, block elements should use <code class="language-plaintext highlighter-rouge">rem</code>s for <code class="language-plaintext highlighter-rouge">margin</code>s.</li>
|
||||
<li>Keep declarations of <code class="language-plaintext highlighter-rouge">font</code>-related properties to a minimum, using <code class="language-plaintext highlighter-rouge">inherit</code> whenever possible.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="page-defaults">Page defaults</h2>
|
||||
|
||||
<p>The <code class="highlighter-rouge"><span class="nt"><html></span></code> and <code class="highlighter-rouge"><body></code> elements are updated to provide better page-wide defaults. More specifically:</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge"><html></code> and <code class="language-plaintext highlighter-rouge"><body></code> elements are updated to provide better page-wide defaults. More specifically:</p>
|
||||
|
||||
<ul>
|
||||
<li>The <code class="highlighter-rouge">box-sizing</code> is globally set on every element—including <code class="highlighter-rouge">*::before</code> and <code class="highlighter-rouge">*::after</code>, to <code class="highlighter-rouge">border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.</li>
|
||||
<li>No base <code class="highlighter-rouge">font-size</code> is declared on the <code class="highlighter-rouge"><span class="nt"><html></span></code>, but <code class="highlighter-rouge">16px</code> is assumed (the browser default). <code class="highlighter-rouge">font-size: 1rem</code> is applied on the <code class="highlighter-rouge"><body></code> for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.</li>
|
||||
<li>The <code class="highlighter-rouge"><body></code> also sets a global <code class="highlighter-rouge">font-family</code>, <code class="highlighter-rouge">line-height</code>, and <code class="highlighter-rouge">text-align</code>. This is inherited later by some form elements to prevent font inconsistencies.</li>
|
||||
<li>For safety, the <code class="highlighter-rouge"><body></code> has a declared <code class="highlighter-rouge">background-color</code>, defaulting to <code class="highlighter-rouge">#fff</code>.</li>
|
||||
<li>The <code class="language-plaintext highlighter-rouge">box-sizing</code> is globally set on every element—including <code class="language-plaintext highlighter-rouge">*::before</code> and <code class="language-plaintext highlighter-rouge">*::after</code>, to <code class="language-plaintext highlighter-rouge">border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.</li>
|
||||
<li>No base <code class="language-plaintext highlighter-rouge">font-size</code> is declared on the <code class="language-plaintext highlighter-rouge"><html></code>, but <code class="language-plaintext highlighter-rouge">16px</code> is assumed (the browser default). <code class="language-plaintext highlighter-rouge">font-size: 1rem</code> is applied on the <code class="language-plaintext highlighter-rouge"><body></code> for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.</li>
|
||||
<li>The <code class="language-plaintext highlighter-rouge"><body></code> also sets a global <code class="language-plaintext highlighter-rouge">font-family</code>, <code class="language-plaintext highlighter-rouge">line-height</code>, and <code class="language-plaintext highlighter-rouge">text-align</code>. This is inherited later by some form elements to prevent font inconsistencies.</li>
|
||||
<li>For safety, the <code class="language-plaintext highlighter-rouge"><body></code> has a declared <code class="language-plaintext highlighter-rouge">background-color</code>, defaulting to <code class="language-plaintext highlighter-rouge">#fff</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="native-font-stack">Native font stack</h2>
|
||||
@ -544,11 +548,11 @@
|
||||
<span class="c1">// Emoji fonts</span>
|
||||
<span class="s2">"Apple Color Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Symbol"</span><span class="o">,</span> <span class="s2">"Noto Color Emoji"</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span></code></pre></figure>
|
||||
|
||||
<p>This <code class="highlighter-rouge">font-family</code> is applied to the <code class="highlighter-rouge"><body></code> and automatically inherited globally throughout Bootstrap. To switch the global <code class="highlighter-rouge">font-family</code>, update <code class="highlighter-rouge">$font-family-base</code> and recompile Bootstrap.</p>
|
||||
<p>This <code class="language-plaintext highlighter-rouge">font-family</code> is applied to the <code class="language-plaintext highlighter-rouge"><body></code> and automatically inherited globally throughout Bootstrap. To switch the global <code class="language-plaintext highlighter-rouge">font-family</code>, update <code class="language-plaintext highlighter-rouge">$font-family-base</code> and recompile Bootstrap.</p>
|
||||
|
||||
<h2 id="headings-and-paragraphs">Headings and paragraphs</h2>
|
||||
|
||||
<p>All heading elements—e.g., <code class="highlighter-rouge"><h1></code>—and <code class="highlighter-rouge"><p></code> are reset to have their <code class="highlighter-rouge">margin-top</code> removed. Headings have <code class="highlighter-rouge">margin-bottom: .5rem</code> added and paragraphs <code class="highlighter-rouge">margin-bottom: 1rem</code> for easy spacing.</p>
|
||||
<p>All heading elements—e.g., <code class="language-plaintext highlighter-rouge"><h1></code>—and <code class="language-plaintext highlighter-rouge"><p></code> are reset to have their <code class="language-plaintext highlighter-rouge">margin-top</code> removed. Headings have <code class="language-plaintext highlighter-rouge">margin-bottom: .5rem</code> added and paragraphs <code class="language-plaintext highlighter-rouge">margin-bottom: 1rem</code> for easy spacing.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
@ -560,42 +564,42 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h1></h1></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h1></h1></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h2></h2></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h2></h2></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h3></h3></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h3></h3></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h4></h4></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h4></h4></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h5></h5></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h5></h5></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h6></h6></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h6></h6></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||||
@ -605,7 +609,7 @@
|
||||
|
||||
<h2 id="lists">Lists</h2>
|
||||
|
||||
<p>All lists—<code class="highlighter-rouge"><ul></code>, <code class="highlighter-rouge"><ol></code>, and <code class="highlighter-rouge"><dl></code>—have their <code class="highlighter-rouge">margin-top</code> removed and a <code class="highlighter-rouge">margin-bottom: 1rem</code>. Nested lists have no <code class="highlighter-rouge">margin-bottom</code>.</p>
|
||||
<p>All lists—<code class="language-plaintext highlighter-rouge"><ul></code>, <code class="language-plaintext highlighter-rouge"><ol></code>, and <code class="language-plaintext highlighter-rouge"><dl></code>—have their <code class="language-plaintext highlighter-rouge">margin-top</code> removed and a <code class="language-plaintext highlighter-rouge">margin-bottom: 1rem</code>. Nested lists have no <code class="language-plaintext highlighter-rouge">margin-bottom</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -641,7 +645,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<p>For simpler styling, clear hierarchy, and better spacing, description lists have updated <code class="highlighter-rouge">margin</code>s. <code class="highlighter-rouge"><dd></code>s reset <code class="highlighter-rouge">margin-left</code> to <code class="highlighter-rouge">0</code> and add <code class="highlighter-rouge">margin-bottom: .5rem</code>. <code class="highlighter-rouge"><dt></code>s are <strong>bolded</strong>.</p>
|
||||
<p>For simpler styling, clear hierarchy, and better spacing, description lists have updated <code class="language-plaintext highlighter-rouge">margin</code>s. <code class="language-plaintext highlighter-rouge"><dd></code>s reset <code class="language-plaintext highlighter-rouge">margin-left</code> to <code class="language-plaintext highlighter-rouge">0</code> and add <code class="language-plaintext highlighter-rouge">margin-bottom: .5rem</code>. <code class="language-plaintext highlighter-rouge"><dt></code>s are <strong>bolded</strong>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<dl>
|
||||
@ -657,7 +661,7 @@
|
||||
|
||||
<h2 id="preformatted-text">Preformatted text</h2>
|
||||
|
||||
<p>The <code class="highlighter-rouge"><pre></code> element is reset to remove its <code class="highlighter-rouge">margin-top</code> and use <code class="highlighter-rouge">rem</code> units for its <code class="highlighter-rouge">margin-bottom</code>.</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge"><pre></code> element is reset to remove its <code class="language-plaintext highlighter-rouge">margin-top</code> and use <code class="language-plaintext highlighter-rouge">rem</code> units for its <code class="language-plaintext highlighter-rouge">margin-bottom</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<pre>
|
||||
@ -669,7 +673,7 @@
|
||||
|
||||
<h2 id="tables">Tables</h2>
|
||||
|
||||
<p>Tables are slightly adjusted to style <code class="highlighter-rouge"><caption></code>s, collapse borders, and ensure consistent <code class="highlighter-rouge">text-align</code> throughout. Additional changes for borders, padding, and more come with <a href="/docs/4.5/content/tables/">the <code class="highlighter-rouge">.table</code> class</a>.</p>
|
||||
<p>Tables are slightly adjusted to style <code class="language-plaintext highlighter-rouge"><caption></code>s, collapse borders, and ensure consistent <code class="language-plaintext highlighter-rouge">text-align</code> throughout. Additional changes for borders, padding, and more come with <a href="/docs/4.5/content/tables/">the <code class="language-plaintext highlighter-rouge">.table</code> class</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table>
|
||||
@ -712,12 +716,12 @@
|
||||
<p>Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge"><fieldset></code>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.</li>
|
||||
<li><code class="highlighter-rouge"><legend></code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li>
|
||||
<li><code class="highlighter-rouge"><label></code>s are set to <code class="highlighter-rouge">display: inline-block</code> to allow <code class="highlighter-rouge">margin</code> to be applied.</li>
|
||||
<li><code class="highlighter-rouge"><input></code>s, <code class="highlighter-rouge"><select></code>s, <code class="highlighter-rouge"><textarea></code>s, and <code class="highlighter-rouge"><button></code>s are mostly addressed by Normalize, but Reboot removes their <code class="highlighter-rouge">margin</code> and sets <code class="highlighter-rouge">line-height: inherit</code>, too.</li>
|
||||
<li><code class="highlighter-rouge"><textarea></code>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.</li>
|
||||
<li><code class="highlighter-rouge"><button></code>s and <code class="highlighter-rouge"><input></code> button elements have <code class="highlighter-rouge">cursor: pointer</code> when <code class="highlighter-rouge">:not(:disabled)</code>.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge"><fieldset></code>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge"><legend></code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge"><label></code>s are set to <code class="language-plaintext highlighter-rouge">display: inline-block</code> to allow <code class="language-plaintext highlighter-rouge">margin</code> to be applied.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge"><input></code>s, <code class="language-plaintext highlighter-rouge"><select></code>s, <code class="language-plaintext highlighter-rouge"><textarea></code>s, and <code class="language-plaintext highlighter-rouge"><button></code>s are mostly addressed by Normalize, but Reboot removes their <code class="language-plaintext highlighter-rouge">margin</code> and sets <code class="language-plaintext highlighter-rouge">line-height: inherit</code>, too.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge"><textarea></code>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge"><button></code>s and <code class="language-plaintext highlighter-rouge"><input></code> button elements have <code class="language-plaintext highlighter-rouge">cursor: pointer</code> when <code class="language-plaintext highlighter-rouge">:not(:disabled)</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p>These changes, and more, are demonstrated below.</p>
|
||||
@ -808,18 +812,18 @@
|
||||
|
||||
<h3 id="pointers-on-buttons">Pointers on buttons</h3>
|
||||
|
||||
<p>Reboot includes an enhancement for <code class="highlighter-rouge">role="button"</code> to change the default cursor to <code class="highlighter-rouge">pointer</code>. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <code class="highlighter-rouge"><button></code> elements, which get their own <code class="highlighter-rouge">cursor</code> change.</p>
|
||||
<p>Reboot includes an enhancement for <code class="language-plaintext highlighter-rouge">role="button"</code> to change the default cursor to <code class="language-plaintext highlighter-rouge">pointer</code>. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <code class="language-plaintext highlighter-rouge"><button></code> elements, which get their own <code class="language-plaintext highlighter-rouge">cursor</code> change.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<span role="button">Non-button element button</span>
|
||||
<span role="button" tabindex="0">Non-button element button</span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Non-button element button<span class="nt"></span></span></code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">tabindex=</span><span class="s">"0"</span><span class="nt">></span>Non-button element button<span class="nt"></span></span></code></pre></figure>
|
||||
|
||||
<h2 id="misc-elements">Misc elements</h2>
|
||||
|
||||
<h3 id="address">Address</h3>
|
||||
|
||||
<p>The <code class="highlighter-rouge"><address></code> element is updated to reset the browser default <code class="highlighter-rouge">font-style</code> from <code class="highlighter-rouge">italic</code> to <code class="highlighter-rouge">normal</code>. <code class="highlighter-rouge">line-height</code> is also now inherited, and <code class="highlighter-rouge">margin-bottom: 1rem</code> has been added. <code class="highlighter-rouge"><address></code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code class="highlighter-rouge"><br></code>.</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge"><address></code> element is updated to reset the browser default <code class="language-plaintext highlighter-rouge">font-style</code> from <code class="language-plaintext highlighter-rouge">italic</code> to <code class="language-plaintext highlighter-rouge">normal</code>. <code class="language-plaintext highlighter-rouge">line-height</code> is also now inherited, and <code class="language-plaintext highlighter-rouge">margin-bottom: 1rem</code> has been added. <code class="language-plaintext highlighter-rouge"><address></code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code class="language-plaintext highlighter-rouge"><br></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<address>
|
||||
@ -837,7 +841,7 @@
|
||||
|
||||
<h3 id="blockquote">Blockquote</h3>
|
||||
|
||||
<p>The default <code class="highlighter-rouge">margin</code> on blockquotes is <code class="highlighter-rouge">1em 40px</code>, so we reset that to <code class="highlighter-rouge">0 0 1rem</code> for something more consistent with other elements.</p>
|
||||
<p>The default <code class="language-plaintext highlighter-rouge">margin</code> on blockquotes is <code class="language-plaintext highlighter-rouge">1em 40px</code>, so we reset that to <code class="language-plaintext highlighter-rouge">0 0 1rem</code> for something more consistent with other elements.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<blockquote class="blockquote">
|
||||
@ -848,7 +852,7 @@
|
||||
|
||||
<h3 id="inline-elements">Inline elements</h3>
|
||||
|
||||
<p>The <code class="highlighter-rouge"><abbr></code> element receives basic styling to make it stand out amongst paragraph text.</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge"><abbr></code> element receives basic styling to make it stand out amongst paragraph text.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
|
||||
@ -856,7 +860,7 @@
|
||||
|
||||
<h3 id="summary">Summary</h3>
|
||||
|
||||
<p>The default <code class="highlighter-rouge">cursor</code> on summary is <code class="highlighter-rouge">text</code>, so we reset that to <code class="highlighter-rouge">pointer</code> to convey that the element can be interacted with by clicking on it.</p>
|
||||
<p>The default <code class="language-plaintext highlighter-rouge">cursor</code> on summary is <code class="language-plaintext highlighter-rouge">text</code>, so we reset that to <code class="language-plaintext highlighter-rouge">pointer</code> to convey that the element can be interacted with by clicking on it.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<details>
|
||||
@ -870,25 +874,25 @@
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<h2 id="html5-hidden-attribute">HTML5 <code class="highlighter-rouge">[hidden]</code> attribute</h2>
|
||||
<h2 id="html5-hidden-attribute">HTML5 <code class="language-plaintext highlighter-rouge">[hidden]</code> attribute</h2>
|
||||
|
||||
<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code class="highlighter-rouge">[hidden]</code></a>, which is styled as <code class="highlighter-rouge">display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code class="highlighter-rouge">[hidden] { display: none !important; }</code> to help prevent its <code class="highlighter-rouge">display</code> from getting accidentally overridden. While <code class="highlighter-rouge">[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
|
||||
<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code class="language-plaintext highlighter-rouge">[hidden]</code></a>, which is styled as <code class="language-plaintext highlighter-rouge">display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code class="language-plaintext highlighter-rouge">[hidden] { display: none !important; }</code> to help prevent its <code class="language-plaintext highlighter-rouge">display</code> from getting accidentally overridden. While <code class="language-plaintext highlighter-rouge">[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="jquery-incompatibility">jQuery incompatibility</h5>
|
||||
|
||||
<p><code class="highlighter-rouge">[hidden]</code> is not compatible with jQuery’s <code class="highlighter-rouge">$(...).hide()</code> and <code class="highlighter-rouge">$(...).show()</code> methods. Therefore, we don’t currently especially endorse <code class="highlighter-rouge">[hidden]</code> over other techniques for managing the <code class="highlighter-rouge">display</code> of elements.</p>
|
||||
<p><code class="language-plaintext highlighter-rouge">[hidden]</code> is not compatible with jQuery’s <code class="language-plaintext highlighter-rouge">$(...).hide()</code> and <code class="language-plaintext highlighter-rouge">$(...).show()</code> methods. Therefore, we don’t currently especially endorse <code class="language-plaintext highlighter-rouge">[hidden]</code> over other techniques for managing the <code class="language-plaintext highlighter-rouge">display</code> of elements.</p>
|
||||
</div>
|
||||
|
||||
<p>To merely toggle the visibility of an element, meaning its <code class="highlighter-rouge">display</code> is not modified and the element can still affect the flow of the document, use <a href="/docs/4.5/utilities/visibility/">the <code class="highlighter-rouge">.invisible</code> class</a> instead.</p>
|
||||
<p>To merely toggle the visibility of an element, meaning its <code class="language-plaintext highlighter-rouge">display</code> is not modified and the element can still affect the flow of the document, use <a href="/docs/4.5/utilities/visibility/">the <code class="language-plaintext highlighter-rouge">.invisible</code> class</a> instead.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/tables/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -488,15 +489,18 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/content/tables.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Tables</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be <strong>opt-in</strong>. Just add the base class <code class="highlighter-rouge">.table</code> to any <code class="highlighter-rouge"><table></code>, then extend with custom styles or our various included modifier classes.</p>
|
||||
<p>Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be <strong>opt-in</strong>. Just add the base class <code class="language-plaintext highlighter-rouge">.table</code> to any <code class="language-plaintext highlighter-rouge"><table></code>, then extend with custom styles or our various included modifier classes.</p>
|
||||
|
||||
<p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 4</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
|
||||
<p>Using the most basic table markup, here’s how <code class="language-plaintext highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 4</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table">
|
||||
@ -561,7 +565,7 @@
|
||||
<span class="nt"></tbody></span>
|
||||
<span class="nt"></table></span></code></pre></figure>
|
||||
|
||||
<p>You can also invert the colors—with light text on dark backgrounds—with <code class="highlighter-rouge">.table-dark</code>.</p>
|
||||
<p>You can also invert the colors—with light text on dark backgrounds—with <code class="language-plaintext highlighter-rouge">.table-dark</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-dark">
|
||||
@ -628,7 +632,7 @@
|
||||
|
||||
<h2 id="table-head-options">Table head options</h2>
|
||||
|
||||
<p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.thead-light</code> or <code class="highlighter-rouge">.thead-dark</code> to make <code class="highlighter-rouge"><thead></code>s appear light or dark gray.</p>
|
||||
<p>Similar to tables and dark tables, use the modifier classes <code class="language-plaintext highlighter-rouge">.thead-light</code> or <code class="language-plaintext highlighter-rouge">.thead-dark</code> to make <code class="language-plaintext highlighter-rouge"><thead></code>s appear light or dark gray.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table">
|
||||
@ -757,7 +761,7 @@
|
||||
|
||||
<h2 id="striped-rows">Striped rows</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the <code class="highlighter-rouge"><tbody></code>.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the <code class="language-plaintext highlighter-rouge"><tbody></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-striped">
|
||||
@ -887,7 +891,7 @@
|
||||
|
||||
<h2 id="bordered-table">Bordered table</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.table-bordered</code> for borders on all sides of the table and cells.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.table-bordered</code> for borders on all sides of the table and cells.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-bordered">
|
||||
@ -1013,7 +1017,7 @@
|
||||
|
||||
<h2 id="borderless-table">Borderless table</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.table-borderless</code> for a table without borders.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.table-borderless</code> for a table without borders.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-borderless">
|
||||
@ -1076,7 +1080,7 @@
|
||||
<span class="nt"></tbody></span>
|
||||
<span class="nt"></table></span></code></pre></figure>
|
||||
|
||||
<p><code class="highlighter-rouge">.table-borderless</code> can also be used on dark tables.</p>
|
||||
<p><code class="language-plaintext highlighter-rouge">.table-borderless</code> can also be used on dark tables.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-borderless table-dark">
|
||||
@ -1141,7 +1145,7 @@
|
||||
|
||||
<h2 id="hoverable-rows">Hoverable rows</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a <code class="highlighter-rouge"><tbody></code>.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a <code class="language-plaintext highlighter-rouge"><tbody></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-hover">
|
||||
@ -1267,7 +1271,7 @@
|
||||
|
||||
<h2 id="small-table">Small table</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.table-sm</code> to make tables more compact by cutting cell padding in half.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.table-sm</code> to make tables more compact by cutting cell padding in half.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-sm">
|
||||
@ -1567,18 +1571,18 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="language-plaintext highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<p>Create responsive tables by wrapping any <code class="highlighter-rouge">.table</code> with <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>, making the table scroll horizontally at each <code class="highlighter-rouge">max-width</code> breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.</p>
|
||||
<p>Create responsive tables by wrapping any <code class="language-plaintext highlighter-rouge">.table</code> with <code class="language-plaintext highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>, making the table scroll horizontally at each <code class="language-plaintext highlighter-rouge">max-width</code> breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>Note that since browsers do not currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code class="highlighter-rouge">min-</code> and <code class="highlighter-rouge">max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.</p>
|
||||
<p>Note that since browsers do not currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code class="language-plaintext highlighter-rouge">min-</code> and <code class="language-plaintext highlighter-rouge">max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="captions">Captions</h2>
|
||||
|
||||
<p>A <code class="highlighter-rouge"><caption></code> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.</p>
|
||||
<p>A <code class="language-plaintext highlighter-rouge"><caption></code> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table">
|
||||
@ -1647,17 +1651,17 @@
|
||||
|
||||
<h2 id="responsive-tables">Responsive tables</h2>
|
||||
|
||||
<p>Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a <code class="highlighter-rouge">.table</code> with <code class="highlighter-rouge">.table-responsive</code>. Or, pick a maximum breakpoint with which to have a responsive table up to by using <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>.</p>
|
||||
<p>Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a <code class="language-plaintext highlighter-rouge">.table</code> with <code class="language-plaintext highlighter-rouge">.table-responsive</code>. Or, pick a maximum breakpoint with which to have a responsive table up to by using <code class="language-plaintext highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="vertical-clippingtruncation">Vertical clipping/truncation</h5>
|
||||
|
||||
<p>Responsive tables make use of <code class="highlighter-rouge">overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
|
||||
<p>Responsive tables make use of <code class="language-plaintext highlighter-rouge">overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="always-responsive">Always responsive</h3>
|
||||
|
||||
<p>Across every breakpoint, use <code class="highlighter-rouge">.table-responsive</code> for horizontally scrolling tables.</p>
|
||||
<p>Across every breakpoint, use <code class="language-plaintext highlighter-rouge">.table-responsive</code> for horizontally scrolling tables.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="table-responsive">
|
||||
@ -1726,7 +1730,7 @@
|
||||
|
||||
<h3 id="breakpoint-specific">Breakpoint specific</h3>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code> as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code> as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.</p>
|
||||
|
||||
<p><strong>These tables may appear broken until their responsive styles apply at specific viewport widths.</strong></p>
|
||||
|
||||
@ -1980,6 +1984,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/typography/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -498,7 +499,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/content/typography.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Typography</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -507,18 +511,18 @@
|
||||
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <a href="/docs/4.5/utilities/text/">textual utility classes</a>.</p>
|
||||
|
||||
<ul>
|
||||
<li>Use a <a href="/docs/4.5/content/reboot/#native-font-stack">native font stack</a> that selects the best <code class="highlighter-rouge">font-family</code> for each OS and device.</li>
|
||||
<li>For a more inclusive and accessible type scale, we assume the browser default root <code class="highlighter-rouge">font-size</code> (typically 16px) so visitors can customize their browser defaults as needed.</li>
|
||||
<li>Use the <code class="highlighter-rouge">$font-family-base</code>, <code class="highlighter-rouge">$font-size-base</code>, and <code class="highlighter-rouge">$line-height-base</code> attributes as our typographic base applied to the <code class="highlighter-rouge"><body></code>.</li>
|
||||
<li>Set the global link color via <code class="highlighter-rouge">$link-color</code> and apply link underlines only on <code class="highlighter-rouge">:hover</code>.</li>
|
||||
<li>Use <code class="highlighter-rouge">$body-bg</code> to set a <code class="highlighter-rouge">background-color</code> on the <code class="highlighter-rouge"><body></code> (<code class="highlighter-rouge">#fff</code> by default).</li>
|
||||
<li>Use a <a href="/docs/4.5/content/reboot/#native-font-stack">native font stack</a> that selects the best <code class="language-plaintext highlighter-rouge">font-family</code> for each OS and device.</li>
|
||||
<li>For a more inclusive and accessible type scale, we assume the browser default root <code class="language-plaintext highlighter-rouge">font-size</code> (typically 16px) so visitors can customize their browser defaults as needed.</li>
|
||||
<li>Use the <code class="language-plaintext highlighter-rouge">$font-family-base</code>, <code class="language-plaintext highlighter-rouge">$font-size-base</code>, and <code class="language-plaintext highlighter-rouge">$line-height-base</code> attributes as our typographic base applied to the <code class="language-plaintext highlighter-rouge"><body></code>.</li>
|
||||
<li>Set the global link color via <code class="language-plaintext highlighter-rouge">$link-color</code> and apply link underlines only on <code class="language-plaintext highlighter-rouge">:hover</code>.</li>
|
||||
<li>Use <code class="language-plaintext highlighter-rouge">$body-bg</code> to set a <code class="language-plaintext highlighter-rouge">background-color</code> on the <code class="language-plaintext highlighter-rouge"><body></code> (<code class="language-plaintext highlighter-rouge">#fff</code> by default).</li>
|
||||
</ul>
|
||||
|
||||
<p>These styles can be found within <code class="highlighter-rouge">_reboot.scss</code>, and the global variables are defined in <code class="highlighter-rouge">_variables.scss</code>. Make sure to set <code class="highlighter-rouge">$font-size-base</code> in <code class="highlighter-rouge">rem</code>.</p>
|
||||
<p>These styles can be found within <code class="language-plaintext highlighter-rouge">_reboot.scss</code>, and the global variables are defined in <code class="language-plaintext highlighter-rouge">_variables.scss</code>. Make sure to set <code class="language-plaintext highlighter-rouge">$font-size-base</code> in <code class="language-plaintext highlighter-rouge">rem</code>.</p>
|
||||
|
||||
<h2 id="headings">Headings</h2>
|
||||
|
||||
<p>All HTML headings, <code class="highlighter-rouge"><h1></code> through <code class="highlighter-rouge"><h6></code>, are available.</p>
|
||||
<p>All HTML headings, <code class="language-plaintext highlighter-rouge"><h1></code> through <code class="language-plaintext highlighter-rouge"><h6></code>, are available.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
@ -530,42 +534,42 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h1></h1></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h1></h1></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h2></h2></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h2></h2></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h3></h3></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h3></h3></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h4></h4></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h4></h4></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h5></h5></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h5></h5></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h6></h6></code></p>
|
||||
<p><code class="language-plaintext highlighter-rouge"><h6></h6></code></p>
|
||||
|
||||
</td>
|
||||
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||||
@ -580,7 +584,7 @@
|
||||
<span class="nt"><h5></span>h5. Bootstrap heading<span class="nt"></h5></span>
|
||||
<span class="nt"><h6></span>h6. Bootstrap heading<span class="nt"></h6></span></code></pre></figure>
|
||||
|
||||
<p><code class="highlighter-rouge">.h1</code> through <code class="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
|
||||
<p><code class="language-plaintext highlighter-rouge">.h1</code> through <code class="language-plaintext highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
@ -642,7 +646,7 @@
|
||||
|
||||
<h2 id="lead">Lead</h2>
|
||||
|
||||
<p>Make a paragraph stand out by adding <code class="highlighter-rouge">.lead</code>.</p>
|
||||
<p>Make a paragraph stand out by adding <code class="language-plaintext highlighter-rouge">.lead</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="lead">
|
||||
@ -676,9 +680,9 @@
|
||||
<span class="nt"><p><strong></span>This line rendered as bold text.<span class="nt"></strong></p></span>
|
||||
<span class="nt"><p><em></span>This line rendered as italicized text.<span class="nt"></em></p></span></code></pre></figure>
|
||||
|
||||
<p><code class="highlighter-rouge">.mark</code> and <code class="highlighter-rouge">.small</code> classes are also available to apply the same styles as <code class="highlighter-rouge"><mark></code> and <code class="highlighter-rouge"><small></code> while avoiding any unwanted semantic implications that the tags would bring.</p>
|
||||
<p><code class="language-plaintext highlighter-rouge">.mark</code> and <code class="language-plaintext highlighter-rouge">.small</code> classes are also available to apply the same styles as <code class="language-plaintext highlighter-rouge"><mark></code> and <code class="language-plaintext highlighter-rouge"><small></code> while avoiding any unwanted semantic implications that the tags would bring.</p>
|
||||
|
||||
<p>While not shown above, feel free to use <code class="highlighter-rouge"><b></code> and <code class="highlighter-rouge"><i></code> in HTML5. <code class="highlighter-rouge"><b></code> is meant to highlight words or phrases without conveying additional importance while <code class="highlighter-rouge"><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
<p>While not shown above, feel free to use <code class="language-plaintext highlighter-rouge"><b></code> and <code class="language-plaintext highlighter-rouge"><i></code> in HTML5. <code class="language-plaintext highlighter-rouge"><b></code> is meant to highlight words or phrases without conveying additional importance while <code class="language-plaintext highlighter-rouge"><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
|
||||
<h2 id="text-utilities">Text utilities</h2>
|
||||
|
||||
@ -686,9 +690,9 @@
|
||||
|
||||
<h2 id="abbreviations">Abbreviations</h2>
|
||||
|
||||
<p>Stylized implementation of HTML’s <code class="highlighter-rouge"><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.</p>
|
||||
<p>Stylized implementation of HTML’s <code class="language-plaintext highlighter-rouge"><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.</p>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p><abbr title="attribute">attr</abbr></p>
|
||||
@ -699,7 +703,7 @@
|
||||
|
||||
<h2 id="blockquotes">Blockquotes</h2>
|
||||
|
||||
<p>For quoting blocks of content from another source within your document. Wrap <code class="highlighter-rouge"><blockquote class="blockquote"></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.</p>
|
||||
<p>For quoting blocks of content from another source within your document. Wrap <code class="language-plaintext highlighter-rouge"><blockquote class="blockquote"></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<blockquote class="blockquote">
|
||||
@ -712,7 +716,7 @@
|
||||
|
||||
<h3 id="naming-a-source">Naming a source</h3>
|
||||
|
||||
<p>Add a <code class="highlighter-rouge"><footer class="blockquote-footer"></code> for identifying the source. Wrap the name of the source work in <code class="highlighter-rouge"><cite></code>.</p>
|
||||
<p>Add a <code class="language-plaintext highlighter-rouge"><footer class="blockquote-footer"></code> for identifying the source. Wrap the name of the source work in <code class="language-plaintext highlighter-rouge"><cite></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<blockquote class="blockquote">
|
||||
@ -755,7 +759,7 @@
|
||||
|
||||
<h3 id="unstyled">Unstyled</h3>
|
||||
|
||||
<p>Remove the default <code class="highlighter-rouge">list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
|
||||
<p>Remove the default <code class="language-plaintext highlighter-rouge">list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-unstyled">
|
||||
@ -796,7 +800,7 @@
|
||||
|
||||
<h3 id="inline">Inline</h3>
|
||||
|
||||
<p>Remove a list’s bullets and apply some light <code class="highlighter-rouge">margin</code> with a combination of two classes, <code class="highlighter-rouge">.list-inline</code> and <code class="highlighter-rouge">.list-inline-item</code>.</p>
|
||||
<p>Remove a list’s bullets and apply some light <code class="language-plaintext highlighter-rouge">margin</code> with a combination of two classes, <code class="language-plaintext highlighter-rouge">.list-inline</code> and <code class="language-plaintext highlighter-rouge">.list-inline-item</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-inline">
|
||||
@ -813,7 +817,7 @@
|
||||
|
||||
<h3 id="description-list-alignment">Description list alignment</h3>
|
||||
|
||||
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
|
||||
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code class="language-plaintext highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<dl class="row">
|
||||
@ -868,15 +872,15 @@
|
||||
|
||||
<h2 id="responsive-font-sizes">Responsive font sizes</h2>
|
||||
|
||||
<p>Bootstrap v4.3 ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. <abbr title="Responsive font sizes">RFS</abbr> can be enabled by changing the <code class="highlighter-rouge">$enable-responsive-font-sizes</code> Sass variable to <code class="highlighter-rouge">true</code> and recompiling Bootstrap.</p>
|
||||
<p>Bootstrap v4.3 ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. <abbr title="Responsive font sizes">RFS</abbr> can be enabled by changing the <code class="language-plaintext highlighter-rouge">$enable-responsive-font-sizes</code> Sass variable to <code class="language-plaintext highlighter-rouge">true</code> and recompiling Bootstrap.</p>
|
||||
|
||||
<p>To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal <code class="highlighter-rouge">font-size</code> properties. Responsive font sizes will be compiled into <code class="highlighter-rouge">calc()</code> functions with a mix of <code class="highlighter-rouge">rem</code> and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its <a href="https://github.com/twbs/rfs/tree/v8.0.4">GitHub repository</a>.</p>
|
||||
<p>To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal <code class="language-plaintext highlighter-rouge">font-size</code> properties. Responsive font sizes will be compiled into <code class="language-plaintext highlighter-rouge">calc()</code> functions with a mix of <code class="language-plaintext highlighter-rouge">rem</code> and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its <a href="https://github.com/twbs/rfs/tree/v8.0.4">GitHub repository</a>.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
50
docs/4.5/dist/css/bootstrap-grid.css
vendored
50
docs/4.5/dist/css/bootstrap-grid.css
vendored
@ -1,8 +1,8 @@
|
||||
/*!
|
||||
* Bootstrap Grid v4.5.0 (https://getbootstrap.com/)
|
||||
* Bootstrap Grid v4.5.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
@ -15,39 +15,12 @@ html {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-sm,
|
||||
.container-md,
|
||||
.container-lg,
|
||||
.container-xl {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
@ -82,6 +55,8 @@ html {
|
||||
.row {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex: 1 0 100%;
|
||||
flex: 1 0 100%;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -15px;
|
||||
@ -116,7 +91,6 @@ html {
|
||||
flex-basis: 0;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@ -360,7 +334,6 @@ html {
|
||||
flex-basis: 0;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.row-cols-sm-1 > * {
|
||||
@ -563,7 +536,6 @@ html {
|
||||
flex-basis: 0;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.row-cols-md-1 > * {
|
||||
@ -766,7 +738,6 @@ html {
|
||||
flex-basis: 0;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.row-cols-lg-1 > * {
|
||||
@ -969,7 +940,6 @@ html {
|
||||
flex-basis: 0;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.row-cols-xl-1 > * {
|
||||
|
||||
2
docs/4.5/dist/css/bootstrap-grid.css.map
vendored
2
docs/4.5/dist/css/bootstrap-grid.css.map
vendored
File diff suppressed because one or more lines are too long
6
docs/4.5/dist/css/bootstrap-grid.min.css
vendored
6
docs/4.5/dist/css/bootstrap-grid.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/4.5/dist/css/bootstrap-grid.min.css.map
vendored
2
docs/4.5/dist/css/bootstrap-grid.min.css.map
vendored
File diff suppressed because one or more lines are too long
8
docs/4.5/dist/css/bootstrap-reboot.css
vendored
8
docs/4.5/dist/css/bootstrap-reboot.css
vendored
@ -1,8 +1,8 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v4.5.0 (https://getbootstrap.com/)
|
||||
* Bootstrap Reboot v4.5.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
*,
|
||||
@ -133,12 +133,12 @@ a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:not([href]) {
|
||||
a:not([href]):not([class]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):hover {
|
||||
a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
2
docs/4.5/dist/css/bootstrap-reboot.css.map
vendored
2
docs/4.5/dist/css/bootstrap-reboot.css.map
vendored
File diff suppressed because one or more lines are too long
6
docs/4.5/dist/css/bootstrap-reboot.min.css
vendored
6
docs/4.5/dist/css/bootstrap-reboot.min.css
vendored
@ -1,8 +1,8 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v4.5.0 (https://getbootstrap.com/)
|
||||
* Bootstrap Reboot v4.5.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
|
||||
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
|
||||
/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||
File diff suppressed because one or more lines are too long
83
docs/4.5/dist/css/bootstrap.css
vendored
83
docs/4.5/dist/css/bootstrap.css
vendored
@ -1,8 +1,8 @@
|
||||
/*!
|
||||
* Bootstrap v4.5.0 (https://getbootstrap.com/)
|
||||
* Bootstrap v4.5.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
:root {
|
||||
--blue: #007bff;
|
||||
@ -163,12 +163,12 @@ a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:not([href]) {
|
||||
a:not([href]):not([class]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):hover {
|
||||
a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -539,39 +539,12 @@ pre code {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-sm,
|
||||
.container-md,
|
||||
.container-lg,
|
||||
.container-xl {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
@ -606,6 +579,8 @@ pre code {
|
||||
.row {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex: 1 0 100%;
|
||||
flex: 1 0 100%;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -15px;
|
||||
@ -640,7 +615,6 @@ pre code {
|
||||
flex-basis: 0;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@ -884,7 +858,6 @@ pre code {
|
||||
flex-basis: 0;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.row-cols-sm-1 > * {
|
||||
@ -1087,7 +1060,6 @@ pre code {
|
||||
flex-basis: 0;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.row-cols-md-1 > * {
|
||||
@ -1290,7 +1262,6 @@ pre code {
|
||||
flex-basis: 0;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.row-cols-lg-1 > * {
|
||||
@ -1493,7 +1464,6 @@ pre code {
|
||||
flex-basis: 0;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.row-cols-xl-1 > * {
|
||||
@ -2259,6 +2229,7 @@ textarea.form-control {
|
||||
.valid-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
max-width: 100%;
|
||||
@ -2359,6 +2330,7 @@ textarea.form-control {
|
||||
.invalid-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
max-width: 100%;
|
||||
@ -3776,6 +3748,7 @@ input[type="button"].btn-block {
|
||||
|
||||
.custom-control {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
min-height: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
@ -4312,12 +4285,14 @@ input[type="button"].btn-block {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.nav-fill > .nav-link,
|
||||
.nav-fill .nav-item {
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-justified > .nav-link,
|
||||
.nav-justified .nav-item {
|
||||
-ms-flex-preferred-size: 0;
|
||||
flex-basis: 0;
|
||||
@ -4775,6 +4750,11 @@ input[type="button"].btn-block {
|
||||
border-bottom-left-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
|
||||
.card > .card-header + .list-group,
|
||||
.card > .list-group + .card-footer {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
@ -4814,10 +4794,6 @@ input[type="button"].btn-block {
|
||||
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
|
||||
}
|
||||
|
||||
.card-header + .list-group .list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 0.75rem 1.25rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
@ -4847,6 +4823,7 @@ input[type="button"].btn-block {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 1.25rem;
|
||||
border-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
|
||||
.card-img,
|
||||
@ -4958,6 +4935,10 @@ input[type="button"].btn-block {
|
||||
}
|
||||
}
|
||||
|
||||
.accordion {
|
||||
overflow-anchor: none;
|
||||
}
|
||||
|
||||
.accordion > .card {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -5876,15 +5857,14 @@ a.close.disabled {
|
||||
}
|
||||
|
||||
.toast {
|
||||
-ms-flex-preferred-size: 350px;
|
||||
flex-basis: 350px;
|
||||
max-width: 350px;
|
||||
overflow: hidden;
|
||||
font-size: 0.875rem;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
opacity: 0;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
@ -5916,6 +5896,8 @@ a.close.disabled {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
background-clip: padding-box;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-top-left-radius: calc(0.25rem - 1px);
|
||||
border-top-right-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
|
||||
.toast-body {
|
||||
@ -10182,7 +10164,8 @@ a.text-dark:hover, a.text-dark:focus {
|
||||
}
|
||||
|
||||
.text-break {
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
|
||||
.text-reset {
|
||||
|
||||
2
docs/4.5/dist/css/bootstrap.css.map
vendored
2
docs/4.5/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
6
docs/4.5/dist/css/bootstrap.min.css
vendored
6
docs/4.5/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/4.5/dist/css/bootstrap.min.css.map
vendored
2
docs/4.5/dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
204
docs/4.5/dist/js/bootstrap.bundle.js
vendored
204
docs/4.5/dist/js/bootstrap.bundle.js
vendored
@ -1,12 +1,12 @@
|
||||
/*!
|
||||
* Bootstrap v4.5.0 (https://getbootstrap.com/)
|
||||
* Bootstrap v4.5.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery')) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'jquery'], factory) :
|
||||
(global = global || self, factory(global.bootstrap = {}, global.jQuery));
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.bootstrap = {}, global.jQuery));
|
||||
}(this, (function (exports, $) { 'use strict';
|
||||
|
||||
$ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
|
||||
@ -27,53 +27,22 @@
|
||||
return Constructor;
|
||||
}
|
||||
|
||||
function _defineProperty(obj, key, value) {
|
||||
if (key in obj) {
|
||||
Object.defineProperty(obj, key, {
|
||||
value: value,
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
writable: true
|
||||
});
|
||||
} else {
|
||||
obj[key] = value;
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
function ownKeys(object, enumerableOnly) {
|
||||
var keys = Object.keys(object);
|
||||
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var symbols = Object.getOwnPropertySymbols(object);
|
||||
if (enumerableOnly) symbols = symbols.filter(function (sym) {
|
||||
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||
});
|
||||
keys.push.apply(keys, symbols);
|
||||
}
|
||||
|
||||
return keys;
|
||||
}
|
||||
|
||||
function _objectSpread2(target) {
|
||||
function _extends() {
|
||||
_extends = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i] != null ? arguments[i] : {};
|
||||
var source = arguments[i];
|
||||
|
||||
if (i % 2) {
|
||||
ownKeys(Object(source), true).forEach(function (key) {
|
||||
_defineProperty(target, key, source[key]);
|
||||
});
|
||||
} else if (Object.getOwnPropertyDescriptors) {
|
||||
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||
} else {
|
||||
ownKeys(Object(source)).forEach(function (key) {
|
||||
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||
});
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
return _extends.apply(this, arguments);
|
||||
}
|
||||
|
||||
function _inheritsLoose(subClass, superClass) {
|
||||
@ -84,8 +53,8 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.5.0): util.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Bootstrap (v4.5.1): util.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
/**
|
||||
@ -265,7 +234,7 @@
|
||||
*/
|
||||
|
||||
var NAME = 'alert';
|
||||
var VERSION = '4.5.0';
|
||||
var VERSION = '4.5.1';
|
||||
var DATA_KEY = 'bs.alert';
|
||||
var EVENT_KEY = "." + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
@ -421,7 +390,7 @@
|
||||
*/
|
||||
|
||||
var NAME$1 = 'button';
|
||||
var VERSION$1 = '4.5.0';
|
||||
var VERSION$1 = '4.5.1';
|
||||
var DATA_KEY$1 = 'bs.button';
|
||||
var EVENT_KEY$1 = "." + DATA_KEY$1;
|
||||
var DATA_API_KEY$1 = '.data-api';
|
||||
@ -556,12 +525,10 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (initialButton.tagName === 'LABEL' && inputBtn && inputBtn.type === 'checkbox') {
|
||||
event.preventDefault(); // work around event sent to label and input
|
||||
}
|
||||
|
||||
if (initialButton.tagName !== 'LABEL' || inputBtn && inputBtn.type !== 'checkbox') {
|
||||
Button._jQueryInterface.call($(button), 'toggle');
|
||||
}
|
||||
}
|
||||
}).on(EVENT_FOCUS_BLUR_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, function (event) {
|
||||
var button = $(event.target).closest(SELECTOR_BUTTON)[0];
|
||||
$(button).toggleClass(CLASS_NAME_FOCUS, /^focus(in)?$/.test(event.type));
|
||||
@ -616,7 +583,7 @@
|
||||
*/
|
||||
|
||||
var NAME$2 = 'carousel';
|
||||
var VERSION$2 = '4.5.0';
|
||||
var VERSION$2 = '4.5.1';
|
||||
var DATA_KEY$2 = 'bs.carousel';
|
||||
var EVENT_KEY$2 = "." + DATA_KEY$2;
|
||||
var DATA_API_KEY$2 = '.data-api';
|
||||
@ -803,7 +770,7 @@
|
||||
;
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2({}, Default), config);
|
||||
config = _extends({}, Default, config);
|
||||
Util.typeCheckConfig(NAME$2, config, DefaultType);
|
||||
return config;
|
||||
};
|
||||
@ -1093,10 +1060,10 @@
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY$2);
|
||||
|
||||
var _config = _objectSpread2(_objectSpread2({}, Default), $(this).data());
|
||||
var _config = _extends({}, Default, $(this).data());
|
||||
|
||||
if (typeof config === 'object') {
|
||||
_config = _objectSpread2(_objectSpread2({}, _config), config);
|
||||
_config = _extends({}, _config, config);
|
||||
}
|
||||
|
||||
var action = typeof config === 'string' ? config : _config.slide;
|
||||
@ -1134,7 +1101,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
var config = _objectSpread2(_objectSpread2({}, $(target).data()), $(this).data());
|
||||
var config = _extends({}, $(target).data(), $(this).data());
|
||||
|
||||
var slideIndex = this.getAttribute('data-slide-to');
|
||||
|
||||
@ -1203,7 +1170,7 @@
|
||||
*/
|
||||
|
||||
var NAME$3 = 'collapse';
|
||||
var VERSION$3 = '4.5.0';
|
||||
var VERSION$3 = '4.5.1';
|
||||
var DATA_KEY$3 = 'bs.collapse';
|
||||
var EVENT_KEY$3 = "." + DATA_KEY$3;
|
||||
var DATA_API_KEY$3 = '.data-api';
|
||||
@ -1418,7 +1385,7 @@
|
||||
;
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2({}, Default$1), config);
|
||||
config = _extends({}, Default$1, config);
|
||||
config.toggle = Boolean(config.toggle); // Coerce string values
|
||||
|
||||
Util.typeCheckConfig(NAME$3, config, DefaultType$1);
|
||||
@ -1472,7 +1439,7 @@
|
||||
var $this = $(this);
|
||||
var data = $this.data(DATA_KEY$3);
|
||||
|
||||
var _config = _objectSpread2(_objectSpread2(_objectSpread2({}, Default$1), $this.data()), typeof config === 'object' && config ? config : {});
|
||||
var _config = _extends({}, Default$1, $this.data(), typeof config === 'object' && config ? config : {});
|
||||
|
||||
if (!data && _config.toggle && typeof config === 'string' && /show|hide/.test(config)) {
|
||||
_config.toggle = false;
|
||||
@ -1547,7 +1514,7 @@
|
||||
|
||||
/**!
|
||||
* @fileOverview Kickass library to create and place poppers near their reference elements.
|
||||
* @version 1.16.0
|
||||
* @version 1.16.1
|
||||
* @license
|
||||
* Copyright (c) 2016 Federico Zivolo and contributors
|
||||
*
|
||||
@ -1893,7 +1860,7 @@
|
||||
var sideA = axis === 'x' ? 'Left' : 'Top';
|
||||
var sideB = sideA === 'Left' ? 'Right' : 'Bottom';
|
||||
|
||||
return parseFloat(styles['border' + sideA + 'Width'], 10) + parseFloat(styles['border' + sideB + 'Width'], 10);
|
||||
return parseFloat(styles['border' + sideA + 'Width']) + parseFloat(styles['border' + sideB + 'Width']);
|
||||
}
|
||||
|
||||
function getSize(axis, body, html, computedStyle) {
|
||||
@ -1954,7 +1921,7 @@
|
||||
return obj;
|
||||
};
|
||||
|
||||
var _extends = Object.assign || function (target) {
|
||||
var _extends$1 = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
@ -1976,7 +1943,7 @@
|
||||
* @returns {Object} ClientRect like output
|
||||
*/
|
||||
function getClientRect(offsets) {
|
||||
return _extends({}, offsets, {
|
||||
return _extends$1({}, offsets, {
|
||||
right: offsets.left + offsets.width,
|
||||
bottom: offsets.top + offsets.height
|
||||
});
|
||||
@ -2048,8 +2015,8 @@
|
||||
var scrollParent = getScrollParent(children);
|
||||
|
||||
var styles = getStyleComputedProperty(parent);
|
||||
var borderTopWidth = parseFloat(styles.borderTopWidth, 10);
|
||||
var borderLeftWidth = parseFloat(styles.borderLeftWidth, 10);
|
||||
var borderTopWidth = parseFloat(styles.borderTopWidth);
|
||||
var borderLeftWidth = parseFloat(styles.borderLeftWidth);
|
||||
|
||||
// In cases where the parent is fixed, we must ignore negative scroll in offset calc
|
||||
if (fixedPosition && isHTML) {
|
||||
@ -2070,8 +2037,8 @@
|
||||
// differently when margins are applied to it. The margins are included in
|
||||
// the box of the documentElement, in the other cases not.
|
||||
if (!isIE10 && isHTML) {
|
||||
var marginTop = parseFloat(styles.marginTop, 10);
|
||||
var marginLeft = parseFloat(styles.marginLeft, 10);
|
||||
var marginTop = parseFloat(styles.marginTop);
|
||||
var marginLeft = parseFloat(styles.marginLeft);
|
||||
|
||||
offsets.top -= borderTopWidth - marginTop;
|
||||
offsets.bottom -= borderTopWidth - marginTop;
|
||||
@ -2264,7 +2231,7 @@
|
||||
};
|
||||
|
||||
var sortedAreas = Object.keys(rects).map(function (key) {
|
||||
return _extends({
|
||||
return _extends$1({
|
||||
key: key
|
||||
}, rects[key], {
|
||||
area: getArea(rects[key])
|
||||
@ -2906,9 +2873,9 @@
|
||||
};
|
||||
|
||||
// Update `data` attributes, styles and arrowStyles
|
||||
data.attributes = _extends({}, attributes, data.attributes);
|
||||
data.styles = _extends({}, styles, data.styles);
|
||||
data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);
|
||||
data.attributes = _extends$1({}, attributes, data.attributes);
|
||||
data.styles = _extends$1({}, styles, data.styles);
|
||||
data.arrowStyles = _extends$1({}, data.offsets.arrow, data.arrowStyles);
|
||||
|
||||
return data;
|
||||
}
|
||||
@ -3010,8 +2977,8 @@
|
||||
// Compute the sideValue using the updated popper offsets
|
||||
// take popper margin in account because we don't have this info available
|
||||
var css = getStyleComputedProperty(data.instance.popper);
|
||||
var popperMarginSide = parseFloat(css['margin' + sideCapitalized], 10);
|
||||
var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width'], 10);
|
||||
var popperMarginSide = parseFloat(css['margin' + sideCapitalized]);
|
||||
var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width']);
|
||||
var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;
|
||||
|
||||
// prevent arrowElement from being placed not contiguously to its popper
|
||||
@ -3188,7 +3155,7 @@
|
||||
|
||||
// this object contains `position`, we want to preserve it along with
|
||||
// any additional property we may add in the future
|
||||
data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
|
||||
data.offsets.popper = _extends$1({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
|
||||
|
||||
data = runModifiers(data.instance.modifiers, data, 'flip');
|
||||
}
|
||||
@ -3462,7 +3429,7 @@
|
||||
|
||||
order.forEach(function (placement) {
|
||||
var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
|
||||
popper = _extends({}, popper, check[side](placement));
|
||||
popper = _extends$1({}, popper, check[side](placement));
|
||||
});
|
||||
|
||||
data.offsets.popper = popper;
|
||||
@ -3497,7 +3464,7 @@
|
||||
end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
|
||||
};
|
||||
|
||||
data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);
|
||||
data.offsets.popper = _extends$1({}, popper, shiftOffsets[shiftvariation]);
|
||||
}
|
||||
|
||||
return data;
|
||||
@ -4029,7 +3996,7 @@
|
||||
this.update = debounce(this.update.bind(this));
|
||||
|
||||
// with {} we create a new object with the options inside it
|
||||
this.options = _extends({}, Popper.Defaults, options);
|
||||
this.options = _extends$1({}, Popper.Defaults, options);
|
||||
|
||||
// init state
|
||||
this.state = {
|
||||
@ -4044,13 +4011,13 @@
|
||||
|
||||
// Deep merge modifiers options
|
||||
this.options.modifiers = {};
|
||||
Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
|
||||
_this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
|
||||
Object.keys(_extends$1({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
|
||||
_this.options.modifiers[name] = _extends$1({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
|
||||
});
|
||||
|
||||
// Refactoring modifiers' list (Object => Array)
|
||||
this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
|
||||
return _extends({
|
||||
return _extends$1({
|
||||
name: name
|
||||
}, _this.options.modifiers[name]);
|
||||
})
|
||||
@ -4166,7 +4133,7 @@
|
||||
*/
|
||||
|
||||
var NAME$4 = 'dropdown';
|
||||
var VERSION$4 = '4.5.0';
|
||||
var VERSION$4 = '4.5.1';
|
||||
var DATA_KEY$4 = 'bs.dropdown';
|
||||
var EVENT_KEY$4 = "." + DATA_KEY$4;
|
||||
var DATA_API_KEY$4 = '.data-api';
|
||||
@ -4393,7 +4360,7 @@
|
||||
};
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2(_objectSpread2({}, this.constructor.Default), $(this._element).data()), config);
|
||||
config = _extends({}, this.constructor.Default, $(this._element).data(), config);
|
||||
Util.typeCheckConfig(NAME$4, config, this.constructor.DefaultType);
|
||||
return config;
|
||||
};
|
||||
@ -4438,7 +4405,7 @@
|
||||
|
||||
if (typeof this._config.offset === 'function') {
|
||||
offset.fn = function (data) {
|
||||
data.offsets = _objectSpread2(_objectSpread2({}, data.offsets), _this2._config.offset(data.offsets, _this2._element) || {});
|
||||
data.offsets = _extends({}, data.offsets, _this2._config.offset(data.offsets, _this2._element) || {});
|
||||
return data;
|
||||
};
|
||||
} else {
|
||||
@ -4468,7 +4435,7 @@
|
||||
};
|
||||
}
|
||||
|
||||
return _objectSpread2(_objectSpread2({}, popperConfig), this._config.popperConfig);
|
||||
return _extends({}, popperConfig, this._config.popperConfig);
|
||||
} // Static
|
||||
;
|
||||
|
||||
@ -4680,7 +4647,7 @@
|
||||
*/
|
||||
|
||||
var NAME$5 = 'modal';
|
||||
var VERSION$5 = '4.5.0';
|
||||
var VERSION$5 = '4.5.1';
|
||||
var DATA_KEY$5 = 'bs.modal';
|
||||
var EVENT_KEY$5 = "." + DATA_KEY$5;
|
||||
var DATA_API_KEY$5 = '.data-api';
|
||||
@ -4872,7 +4839,7 @@
|
||||
;
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2({}, Default$3), config);
|
||||
config = _extends({}, Default$3, config);
|
||||
Util.typeCheckConfig(NAME$5, config, DefaultType$3);
|
||||
return config;
|
||||
};
|
||||
@ -4888,11 +4855,24 @@
|
||||
return;
|
||||
}
|
||||
|
||||
var isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
|
||||
if (!isModalOverflowing) {
|
||||
this._element.style.overflowY = 'hidden';
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_STATIC);
|
||||
|
||||
var modalTransitionDuration = Util.getTransitionDurationFromElement(this._element);
|
||||
var modalTransitionDuration = Util.getTransitionDurationFromElement(this._dialog);
|
||||
$(this._element).off(Util.TRANSITION_END);
|
||||
$(this._element).one(Util.TRANSITION_END, function () {
|
||||
_this3._element.classList.remove(CLASS_NAME_STATIC);
|
||||
|
||||
if (!isModalOverflowing) {
|
||||
$(_this3._element).one(Util.TRANSITION_END, function () {
|
||||
_this3._element.style.overflowY = '';
|
||||
}).emulateTransitionEnd(_this3._element, modalTransitionDuration);
|
||||
}
|
||||
}).emulateTransitionEnd(modalTransitionDuration);
|
||||
|
||||
this._element.focus();
|
||||
@ -4918,6 +4898,8 @@
|
||||
|
||||
this._element.setAttribute('aria-modal', true);
|
||||
|
||||
this._element.setAttribute('role', 'dialog');
|
||||
|
||||
if ($(this._dialog).hasClass(CLASS_NAME_SCROLLABLE) && modalBody) {
|
||||
modalBody.scrollTop = 0;
|
||||
} else {
|
||||
@ -5005,6 +4987,8 @@
|
||||
|
||||
this._element.removeAttribute('aria-modal');
|
||||
|
||||
this._element.removeAttribute('role');
|
||||
|
||||
this._isTransitioning = false;
|
||||
|
||||
this._showBackdrop(function () {
|
||||
@ -5186,7 +5170,7 @@
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY$5);
|
||||
|
||||
var _config = _objectSpread2(_objectSpread2(_objectSpread2({}, Default$3), $(this).data()), typeof config === 'object' && config ? config : {});
|
||||
var _config = _extends({}, Default$3, $(this).data(), typeof config === 'object' && config ? config : {});
|
||||
|
||||
if (!data) {
|
||||
data = new Modal(this, _config);
|
||||
@ -5236,7 +5220,7 @@
|
||||
target = document.querySelector(selector);
|
||||
}
|
||||
|
||||
var config = $(target).data(DATA_KEY$5) ? 'toggle' : _objectSpread2(_objectSpread2({}, $(target).data()), $(this).data());
|
||||
var config = $(target).data(DATA_KEY$5) ? 'toggle' : _extends({}, $(target).data(), $(this).data());
|
||||
|
||||
if (this.tagName === 'A' || this.tagName === 'AREA') {
|
||||
event.preventDefault();
|
||||
@ -5273,8 +5257,8 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.5.0): tools/sanitizer.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Bootstrap (v4.5.1): tools/sanitizer.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
var uriAttrs = ['background', 'cite', 'href', 'itemtype', 'longdesc', 'poster', 'src', 'xlink:href'];
|
||||
@ -5399,7 +5383,7 @@
|
||||
*/
|
||||
|
||||
var NAME$6 = 'tooltip';
|
||||
var VERSION$6 = '4.5.0';
|
||||
var VERSION$6 = '4.5.1';
|
||||
var DATA_KEY$6 = 'bs.tooltip';
|
||||
var EVENT_KEY$6 = "." + DATA_KEY$6;
|
||||
var JQUERY_NO_CONFLICT$6 = $.fn[NAME$6];
|
||||
@ -5787,7 +5771,7 @@
|
||||
return _this3._handlePopperPlacementChange(data);
|
||||
}
|
||||
};
|
||||
return _objectSpread2(_objectSpread2({}, defaultBsConfig), this.config.popperConfig);
|
||||
return _extends({}, defaultBsConfig, this.config.popperConfig);
|
||||
};
|
||||
|
||||
_proto._getOffset = function _getOffset() {
|
||||
@ -5797,7 +5781,7 @@
|
||||
|
||||
if (typeof this.config.offset === 'function') {
|
||||
offset.fn = function (data) {
|
||||
data.offsets = _objectSpread2(_objectSpread2({}, data.offsets), _this4.config.offset(data.offsets, _this4.element) || {});
|
||||
data.offsets = _extends({}, data.offsets, _this4.config.offset(data.offsets, _this4.element) || {});
|
||||
return data;
|
||||
};
|
||||
} else {
|
||||
@ -5852,7 +5836,7 @@
|
||||
$(this.element).closest('.modal').on('hide.bs.modal', this._hideModalHandler);
|
||||
|
||||
if (this.config.selector) {
|
||||
this.config = _objectSpread2(_objectSpread2({}, this.config), {}, {
|
||||
this.config = _extends({}, this.config, {
|
||||
trigger: 'manual',
|
||||
selector: ''
|
||||
});
|
||||
@ -5952,7 +5936,7 @@
|
||||
delete dataAttributes[dataAttr];
|
||||
}
|
||||
});
|
||||
config = _objectSpread2(_objectSpread2(_objectSpread2({}, this.constructor.Default), dataAttributes), typeof config === 'object' && config ? config : {});
|
||||
config = _extends({}, this.constructor.Default, dataAttributes, typeof config === 'object' && config ? config : {});
|
||||
|
||||
if (typeof config.delay === 'number') {
|
||||
config.delay = {
|
||||
@ -6111,21 +6095,21 @@
|
||||
*/
|
||||
|
||||
var NAME$7 = 'popover';
|
||||
var VERSION$7 = '4.5.0';
|
||||
var VERSION$7 = '4.5.1';
|
||||
var DATA_KEY$7 = 'bs.popover';
|
||||
var EVENT_KEY$7 = "." + DATA_KEY$7;
|
||||
var JQUERY_NO_CONFLICT$7 = $.fn[NAME$7];
|
||||
var CLASS_PREFIX$1 = 'bs-popover';
|
||||
var BSCLS_PREFIX_REGEX$1 = new RegExp("(^|\\s)" + CLASS_PREFIX$1 + "\\S+", 'g');
|
||||
|
||||
var Default$5 = _objectSpread2(_objectSpread2({}, Tooltip.Default), {}, {
|
||||
var Default$5 = _extends({}, Tooltip.Default, {
|
||||
placement: 'right',
|
||||
trigger: 'click',
|
||||
content: '',
|
||||
template: '<div class="popover" role="tooltip">' + '<div class="arrow"></div>' + '<h3 class="popover-header"></h3>' + '<div class="popover-body"></div></div>'
|
||||
});
|
||||
|
||||
var DefaultType$5 = _objectSpread2(_objectSpread2({}, Tooltip.DefaultType), {}, {
|
||||
var DefaultType$5 = _extends({}, Tooltip.DefaultType, {
|
||||
content: '(string|element|function)'
|
||||
});
|
||||
|
||||
@ -6291,7 +6275,7 @@
|
||||
*/
|
||||
|
||||
var NAME$8 = 'scrollspy';
|
||||
var VERSION$8 = '4.5.0';
|
||||
var VERSION$8 = '4.5.1';
|
||||
var DATA_KEY$8 = 'bs.scrollspy';
|
||||
var EVENT_KEY$8 = "." + DATA_KEY$8;
|
||||
var DATA_API_KEY$6 = '.data-api';
|
||||
@ -6405,7 +6389,7 @@
|
||||
;
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2({}, Default$6), typeof config === 'object' && config ? config : {});
|
||||
config = _extends({}, Default$6, typeof config === 'object' && config ? config : {});
|
||||
|
||||
if (typeof config.target !== 'string' && Util.isElement(config.target)) {
|
||||
var id = $(config.target).attr('id');
|
||||
@ -6583,7 +6567,7 @@
|
||||
*/
|
||||
|
||||
var NAME$9 = 'tab';
|
||||
var VERSION$9 = '4.5.0';
|
||||
var VERSION$9 = '4.5.1';
|
||||
var DATA_KEY$9 = 'bs.tab';
|
||||
var EVENT_KEY$9 = "." + DATA_KEY$9;
|
||||
var DATA_API_KEY$7 = '.data-api';
|
||||
@ -6809,7 +6793,7 @@
|
||||
*/
|
||||
|
||||
var NAME$a = 'toast';
|
||||
var VERSION$a = '4.5.0';
|
||||
var VERSION$a = '4.5.1';
|
||||
var DATA_KEY$a = 'bs.toast';
|
||||
var EVENT_KEY$a = "." + DATA_KEY$a;
|
||||
var JQUERY_NO_CONFLICT$a = $.fn[NAME$a];
|
||||
@ -6862,6 +6846,8 @@
|
||||
return;
|
||||
}
|
||||
|
||||
this._clearTimeout();
|
||||
|
||||
if (this._config.animation) {
|
||||
this._element.classList.add(CLASS_NAME_FADE$5);
|
||||
}
|
||||
@ -6910,8 +6896,7 @@
|
||||
};
|
||||
|
||||
_proto.dispose = function dispose() {
|
||||
clearTimeout(this._timeout);
|
||||
this._timeout = null;
|
||||
this._clearTimeout();
|
||||
|
||||
if (this._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
this._element.classList.remove(CLASS_NAME_SHOW$7);
|
||||
@ -6925,7 +6910,7 @@
|
||||
;
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2(_objectSpread2({}, Default$7), $(this._element).data()), typeof config === 'object' && config ? config : {});
|
||||
config = _extends({}, Default$7, $(this._element).data(), typeof config === 'object' && config ? config : {});
|
||||
Util.typeCheckConfig(NAME$a, config, this.constructor.DefaultType);
|
||||
return config;
|
||||
};
|
||||
@ -6955,6 +6940,11 @@
|
||||
} else {
|
||||
complete();
|
||||
}
|
||||
};
|
||||
|
||||
_proto._clearTimeout = function _clearTimeout() {
|
||||
clearTimeout(this._timeout);
|
||||
this._timeout = null;
|
||||
} // Static
|
||||
;
|
||||
|
||||
|
||||
2
docs/4.5/dist/js/bootstrap.bundle.js.map
vendored
2
docs/4.5/dist/js/bootstrap.bundle.js.map
vendored
File diff suppressed because one or more lines are too long
6
docs/4.5/dist/js/bootstrap.bundle.min.js
vendored
6
docs/4.5/dist/js/bootstrap.bundle.min.js
vendored
File diff suppressed because one or more lines are too long
2
docs/4.5/dist/js/bootstrap.bundle.min.js.map
vendored
2
docs/4.5/dist/js/bootstrap.bundle.min.js.map
vendored
File diff suppressed because one or more lines are too long
162
docs/4.5/dist/js/bootstrap.js
vendored
162
docs/4.5/dist/js/bootstrap.js
vendored
@ -1,12 +1,12 @@
|
||||
/*!
|
||||
* Bootstrap v4.5.0 (https://getbootstrap.com/)
|
||||
* Bootstrap v4.5.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery'), require('popper.js')) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'jquery', 'popper.js'], factory) :
|
||||
(global = global || self, factory(global.bootstrap = {}, global.jQuery, global.Popper));
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.bootstrap = {}, global.jQuery, global.Popper));
|
||||
}(this, (function (exports, $, Popper) { 'use strict';
|
||||
|
||||
$ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
|
||||
@ -28,53 +28,22 @@
|
||||
return Constructor;
|
||||
}
|
||||
|
||||
function _defineProperty(obj, key, value) {
|
||||
if (key in obj) {
|
||||
Object.defineProperty(obj, key, {
|
||||
value: value,
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
writable: true
|
||||
});
|
||||
} else {
|
||||
obj[key] = value;
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
function ownKeys(object, enumerableOnly) {
|
||||
var keys = Object.keys(object);
|
||||
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var symbols = Object.getOwnPropertySymbols(object);
|
||||
if (enumerableOnly) symbols = symbols.filter(function (sym) {
|
||||
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||
});
|
||||
keys.push.apply(keys, symbols);
|
||||
}
|
||||
|
||||
return keys;
|
||||
}
|
||||
|
||||
function _objectSpread2(target) {
|
||||
function _extends() {
|
||||
_extends = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i] != null ? arguments[i] : {};
|
||||
var source = arguments[i];
|
||||
|
||||
if (i % 2) {
|
||||
ownKeys(Object(source), true).forEach(function (key) {
|
||||
_defineProperty(target, key, source[key]);
|
||||
});
|
||||
} else if (Object.getOwnPropertyDescriptors) {
|
||||
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||
} else {
|
||||
ownKeys(Object(source)).forEach(function (key) {
|
||||
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||
});
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
return _extends.apply(this, arguments);
|
||||
}
|
||||
|
||||
function _inheritsLoose(subClass, superClass) {
|
||||
@ -85,8 +54,8 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.5.0): util.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Bootstrap (v4.5.1): util.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
/**
|
||||
@ -266,7 +235,7 @@
|
||||
*/
|
||||
|
||||
var NAME = 'alert';
|
||||
var VERSION = '4.5.0';
|
||||
var VERSION = '4.5.1';
|
||||
var DATA_KEY = 'bs.alert';
|
||||
var EVENT_KEY = "." + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
@ -422,7 +391,7 @@
|
||||
*/
|
||||
|
||||
var NAME$1 = 'button';
|
||||
var VERSION$1 = '4.5.0';
|
||||
var VERSION$1 = '4.5.1';
|
||||
var DATA_KEY$1 = 'bs.button';
|
||||
var EVENT_KEY$1 = "." + DATA_KEY$1;
|
||||
var DATA_API_KEY$1 = '.data-api';
|
||||
@ -557,12 +526,10 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (initialButton.tagName === 'LABEL' && inputBtn && inputBtn.type === 'checkbox') {
|
||||
event.preventDefault(); // work around event sent to label and input
|
||||
}
|
||||
|
||||
if (initialButton.tagName !== 'LABEL' || inputBtn && inputBtn.type !== 'checkbox') {
|
||||
Button._jQueryInterface.call($(button), 'toggle');
|
||||
}
|
||||
}
|
||||
}).on(EVENT_FOCUS_BLUR_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, function (event) {
|
||||
var button = $(event.target).closest(SELECTOR_BUTTON)[0];
|
||||
$(button).toggleClass(CLASS_NAME_FOCUS, /^focus(in)?$/.test(event.type));
|
||||
@ -617,7 +584,7 @@
|
||||
*/
|
||||
|
||||
var NAME$2 = 'carousel';
|
||||
var VERSION$2 = '4.5.0';
|
||||
var VERSION$2 = '4.5.1';
|
||||
var DATA_KEY$2 = 'bs.carousel';
|
||||
var EVENT_KEY$2 = "." + DATA_KEY$2;
|
||||
var DATA_API_KEY$2 = '.data-api';
|
||||
@ -804,7 +771,7 @@
|
||||
;
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2({}, Default), config);
|
||||
config = _extends({}, Default, config);
|
||||
Util.typeCheckConfig(NAME$2, config, DefaultType);
|
||||
return config;
|
||||
};
|
||||
@ -1094,10 +1061,10 @@
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY$2);
|
||||
|
||||
var _config = _objectSpread2(_objectSpread2({}, Default), $(this).data());
|
||||
var _config = _extends({}, Default, $(this).data());
|
||||
|
||||
if (typeof config === 'object') {
|
||||
_config = _objectSpread2(_objectSpread2({}, _config), config);
|
||||
_config = _extends({}, _config, config);
|
||||
}
|
||||
|
||||
var action = typeof config === 'string' ? config : _config.slide;
|
||||
@ -1135,7 +1102,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
var config = _objectSpread2(_objectSpread2({}, $(target).data()), $(this).data());
|
||||
var config = _extends({}, $(target).data(), $(this).data());
|
||||
|
||||
var slideIndex = this.getAttribute('data-slide-to');
|
||||
|
||||
@ -1204,7 +1171,7 @@
|
||||
*/
|
||||
|
||||
var NAME$3 = 'collapse';
|
||||
var VERSION$3 = '4.5.0';
|
||||
var VERSION$3 = '4.5.1';
|
||||
var DATA_KEY$3 = 'bs.collapse';
|
||||
var EVENT_KEY$3 = "." + DATA_KEY$3;
|
||||
var DATA_API_KEY$3 = '.data-api';
|
||||
@ -1419,7 +1386,7 @@
|
||||
;
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2({}, Default$1), config);
|
||||
config = _extends({}, Default$1, config);
|
||||
config.toggle = Boolean(config.toggle); // Coerce string values
|
||||
|
||||
Util.typeCheckConfig(NAME$3, config, DefaultType$1);
|
||||
@ -1473,7 +1440,7 @@
|
||||
var $this = $(this);
|
||||
var data = $this.data(DATA_KEY$3);
|
||||
|
||||
var _config = _objectSpread2(_objectSpread2(_objectSpread2({}, Default$1), $this.data()), typeof config === 'object' && config ? config : {});
|
||||
var _config = _extends({}, Default$1, $this.data(), typeof config === 'object' && config ? config : {});
|
||||
|
||||
if (!data && _config.toggle && typeof config === 'string' && /show|hide/.test(config)) {
|
||||
_config.toggle = false;
|
||||
@ -1553,7 +1520,7 @@
|
||||
*/
|
||||
|
||||
var NAME$4 = 'dropdown';
|
||||
var VERSION$4 = '4.5.0';
|
||||
var VERSION$4 = '4.5.1';
|
||||
var DATA_KEY$4 = 'bs.dropdown';
|
||||
var EVENT_KEY$4 = "." + DATA_KEY$4;
|
||||
var DATA_API_KEY$4 = '.data-api';
|
||||
@ -1780,7 +1747,7 @@
|
||||
};
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2(_objectSpread2({}, this.constructor.Default), $(this._element).data()), config);
|
||||
config = _extends({}, this.constructor.Default, $(this._element).data(), config);
|
||||
Util.typeCheckConfig(NAME$4, config, this.constructor.DefaultType);
|
||||
return config;
|
||||
};
|
||||
@ -1825,7 +1792,7 @@
|
||||
|
||||
if (typeof this._config.offset === 'function') {
|
||||
offset.fn = function (data) {
|
||||
data.offsets = _objectSpread2(_objectSpread2({}, data.offsets), _this2._config.offset(data.offsets, _this2._element) || {});
|
||||
data.offsets = _extends({}, data.offsets, _this2._config.offset(data.offsets, _this2._element) || {});
|
||||
return data;
|
||||
};
|
||||
} else {
|
||||
@ -1855,7 +1822,7 @@
|
||||
};
|
||||
}
|
||||
|
||||
return _objectSpread2(_objectSpread2({}, popperConfig), this._config.popperConfig);
|
||||
return _extends({}, popperConfig, this._config.popperConfig);
|
||||
} // Static
|
||||
;
|
||||
|
||||
@ -2067,7 +2034,7 @@
|
||||
*/
|
||||
|
||||
var NAME$5 = 'modal';
|
||||
var VERSION$5 = '4.5.0';
|
||||
var VERSION$5 = '4.5.1';
|
||||
var DATA_KEY$5 = 'bs.modal';
|
||||
var EVENT_KEY$5 = "." + DATA_KEY$5;
|
||||
var DATA_API_KEY$5 = '.data-api';
|
||||
@ -2259,7 +2226,7 @@
|
||||
;
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2({}, Default$3), config);
|
||||
config = _extends({}, Default$3, config);
|
||||
Util.typeCheckConfig(NAME$5, config, DefaultType$3);
|
||||
return config;
|
||||
};
|
||||
@ -2275,11 +2242,24 @@
|
||||
return;
|
||||
}
|
||||
|
||||
var isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
|
||||
if (!isModalOverflowing) {
|
||||
this._element.style.overflowY = 'hidden';
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_STATIC);
|
||||
|
||||
var modalTransitionDuration = Util.getTransitionDurationFromElement(this._element);
|
||||
var modalTransitionDuration = Util.getTransitionDurationFromElement(this._dialog);
|
||||
$(this._element).off(Util.TRANSITION_END);
|
||||
$(this._element).one(Util.TRANSITION_END, function () {
|
||||
_this3._element.classList.remove(CLASS_NAME_STATIC);
|
||||
|
||||
if (!isModalOverflowing) {
|
||||
$(_this3._element).one(Util.TRANSITION_END, function () {
|
||||
_this3._element.style.overflowY = '';
|
||||
}).emulateTransitionEnd(_this3._element, modalTransitionDuration);
|
||||
}
|
||||
}).emulateTransitionEnd(modalTransitionDuration);
|
||||
|
||||
this._element.focus();
|
||||
@ -2305,6 +2285,8 @@
|
||||
|
||||
this._element.setAttribute('aria-modal', true);
|
||||
|
||||
this._element.setAttribute('role', 'dialog');
|
||||
|
||||
if ($(this._dialog).hasClass(CLASS_NAME_SCROLLABLE) && modalBody) {
|
||||
modalBody.scrollTop = 0;
|
||||
} else {
|
||||
@ -2392,6 +2374,8 @@
|
||||
|
||||
this._element.removeAttribute('aria-modal');
|
||||
|
||||
this._element.removeAttribute('role');
|
||||
|
||||
this._isTransitioning = false;
|
||||
|
||||
this._showBackdrop(function () {
|
||||
@ -2573,7 +2557,7 @@
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY$5);
|
||||
|
||||
var _config = _objectSpread2(_objectSpread2(_objectSpread2({}, Default$3), $(this).data()), typeof config === 'object' && config ? config : {});
|
||||
var _config = _extends({}, Default$3, $(this).data(), typeof config === 'object' && config ? config : {});
|
||||
|
||||
if (!data) {
|
||||
data = new Modal(this, _config);
|
||||
@ -2623,7 +2607,7 @@
|
||||
target = document.querySelector(selector);
|
||||
}
|
||||
|
||||
var config = $(target).data(DATA_KEY$5) ? 'toggle' : _objectSpread2(_objectSpread2({}, $(target).data()), $(this).data());
|
||||
var config = $(target).data(DATA_KEY$5) ? 'toggle' : _extends({}, $(target).data(), $(this).data());
|
||||
|
||||
if (this.tagName === 'A' || this.tagName === 'AREA') {
|
||||
event.preventDefault();
|
||||
@ -2660,8 +2644,8 @@
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.5.0): tools/sanitizer.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Bootstrap (v4.5.1): tools/sanitizer.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
var uriAttrs = ['background', 'cite', 'href', 'itemtype', 'longdesc', 'poster', 'src', 'xlink:href'];
|
||||
@ -2786,7 +2770,7 @@
|
||||
*/
|
||||
|
||||
var NAME$6 = 'tooltip';
|
||||
var VERSION$6 = '4.5.0';
|
||||
var VERSION$6 = '4.5.1';
|
||||
var DATA_KEY$6 = 'bs.tooltip';
|
||||
var EVENT_KEY$6 = "." + DATA_KEY$6;
|
||||
var JQUERY_NO_CONFLICT$6 = $.fn[NAME$6];
|
||||
@ -3174,7 +3158,7 @@
|
||||
return _this3._handlePopperPlacementChange(data);
|
||||
}
|
||||
};
|
||||
return _objectSpread2(_objectSpread2({}, defaultBsConfig), this.config.popperConfig);
|
||||
return _extends({}, defaultBsConfig, this.config.popperConfig);
|
||||
};
|
||||
|
||||
_proto._getOffset = function _getOffset() {
|
||||
@ -3184,7 +3168,7 @@
|
||||
|
||||
if (typeof this.config.offset === 'function') {
|
||||
offset.fn = function (data) {
|
||||
data.offsets = _objectSpread2(_objectSpread2({}, data.offsets), _this4.config.offset(data.offsets, _this4.element) || {});
|
||||
data.offsets = _extends({}, data.offsets, _this4.config.offset(data.offsets, _this4.element) || {});
|
||||
return data;
|
||||
};
|
||||
} else {
|
||||
@ -3239,7 +3223,7 @@
|
||||
$(this.element).closest('.modal').on('hide.bs.modal', this._hideModalHandler);
|
||||
|
||||
if (this.config.selector) {
|
||||
this.config = _objectSpread2(_objectSpread2({}, this.config), {}, {
|
||||
this.config = _extends({}, this.config, {
|
||||
trigger: 'manual',
|
||||
selector: ''
|
||||
});
|
||||
@ -3339,7 +3323,7 @@
|
||||
delete dataAttributes[dataAttr];
|
||||
}
|
||||
});
|
||||
config = _objectSpread2(_objectSpread2(_objectSpread2({}, this.constructor.Default), dataAttributes), typeof config === 'object' && config ? config : {});
|
||||
config = _extends({}, this.constructor.Default, dataAttributes, typeof config === 'object' && config ? config : {});
|
||||
|
||||
if (typeof config.delay === 'number') {
|
||||
config.delay = {
|
||||
@ -3498,21 +3482,21 @@
|
||||
*/
|
||||
|
||||
var NAME$7 = 'popover';
|
||||
var VERSION$7 = '4.5.0';
|
||||
var VERSION$7 = '4.5.1';
|
||||
var DATA_KEY$7 = 'bs.popover';
|
||||
var EVENT_KEY$7 = "." + DATA_KEY$7;
|
||||
var JQUERY_NO_CONFLICT$7 = $.fn[NAME$7];
|
||||
var CLASS_PREFIX$1 = 'bs-popover';
|
||||
var BSCLS_PREFIX_REGEX$1 = new RegExp("(^|\\s)" + CLASS_PREFIX$1 + "\\S+", 'g');
|
||||
|
||||
var Default$5 = _objectSpread2(_objectSpread2({}, Tooltip.Default), {}, {
|
||||
var Default$5 = _extends({}, Tooltip.Default, {
|
||||
placement: 'right',
|
||||
trigger: 'click',
|
||||
content: '',
|
||||
template: '<div class="popover" role="tooltip">' + '<div class="arrow"></div>' + '<h3 class="popover-header"></h3>' + '<div class="popover-body"></div></div>'
|
||||
});
|
||||
|
||||
var DefaultType$5 = _objectSpread2(_objectSpread2({}, Tooltip.DefaultType), {}, {
|
||||
var DefaultType$5 = _extends({}, Tooltip.DefaultType, {
|
||||
content: '(string|element|function)'
|
||||
});
|
||||
|
||||
@ -3678,7 +3662,7 @@
|
||||
*/
|
||||
|
||||
var NAME$8 = 'scrollspy';
|
||||
var VERSION$8 = '4.5.0';
|
||||
var VERSION$8 = '4.5.1';
|
||||
var DATA_KEY$8 = 'bs.scrollspy';
|
||||
var EVENT_KEY$8 = "." + DATA_KEY$8;
|
||||
var DATA_API_KEY$6 = '.data-api';
|
||||
@ -3792,7 +3776,7 @@
|
||||
;
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2({}, Default$6), typeof config === 'object' && config ? config : {});
|
||||
config = _extends({}, Default$6, typeof config === 'object' && config ? config : {});
|
||||
|
||||
if (typeof config.target !== 'string' && Util.isElement(config.target)) {
|
||||
var id = $(config.target).attr('id');
|
||||
@ -3970,7 +3954,7 @@
|
||||
*/
|
||||
|
||||
var NAME$9 = 'tab';
|
||||
var VERSION$9 = '4.5.0';
|
||||
var VERSION$9 = '4.5.1';
|
||||
var DATA_KEY$9 = 'bs.tab';
|
||||
var EVENT_KEY$9 = "." + DATA_KEY$9;
|
||||
var DATA_API_KEY$7 = '.data-api';
|
||||
@ -4196,7 +4180,7 @@
|
||||
*/
|
||||
|
||||
var NAME$a = 'toast';
|
||||
var VERSION$a = '4.5.0';
|
||||
var VERSION$a = '4.5.1';
|
||||
var DATA_KEY$a = 'bs.toast';
|
||||
var EVENT_KEY$a = "." + DATA_KEY$a;
|
||||
var JQUERY_NO_CONFLICT$a = $.fn[NAME$a];
|
||||
@ -4249,6 +4233,8 @@
|
||||
return;
|
||||
}
|
||||
|
||||
this._clearTimeout();
|
||||
|
||||
if (this._config.animation) {
|
||||
this._element.classList.add(CLASS_NAME_FADE$5);
|
||||
}
|
||||
@ -4297,8 +4283,7 @@
|
||||
};
|
||||
|
||||
_proto.dispose = function dispose() {
|
||||
clearTimeout(this._timeout);
|
||||
this._timeout = null;
|
||||
this._clearTimeout();
|
||||
|
||||
if (this._element.classList.contains(CLASS_NAME_SHOW$7)) {
|
||||
this._element.classList.remove(CLASS_NAME_SHOW$7);
|
||||
@ -4312,7 +4297,7 @@
|
||||
;
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread2(_objectSpread2(_objectSpread2({}, Default$7), $(this._element).data()), typeof config === 'object' && config ? config : {});
|
||||
config = _extends({}, Default$7, $(this._element).data(), typeof config === 'object' && config ? config : {});
|
||||
Util.typeCheckConfig(NAME$a, config, this.constructor.DefaultType);
|
||||
return config;
|
||||
};
|
||||
@ -4342,6 +4327,11 @@
|
||||
} else {
|
||||
complete();
|
||||
}
|
||||
};
|
||||
|
||||
_proto._clearTimeout = function _clearTimeout() {
|
||||
clearTimeout(this._timeout);
|
||||
this._timeout = null;
|
||||
} // Static
|
||||
;
|
||||
|
||||
|
||||
2
docs/4.5/dist/js/bootstrap.js.map
vendored
2
docs/4.5/dist/js/bootstrap.js.map
vendored
File diff suppressed because one or more lines are too long
6
docs/4.5/dist/js/bootstrap.min.js
vendored
6
docs/4.5/dist/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
2
docs/4.5/dist/js/bootstrap.min.js.map
vendored
2
docs/4.5/dist/js/bootstrap.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Album example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/album/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -246,5 +246,5 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script></body>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Blog Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/blog/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Carousel Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/carousel/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -202,5 +202,5 @@
|
||||
</footer>
|
||||
</main>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script></body>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Checkout example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/checkout/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -260,6 +260,6 @@
|
||||
</footer>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script>
|
||||
<script src="form-validation.js"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Cover Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/cover/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Dashboard Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/dashboard/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -284,7 +284,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
|
||||
<script src="dashboard.js"></script></body>
|
||||
|
||||
@ -25,13 +25,13 @@ body {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-label-group > input,
|
||||
.form-label-group > label {
|
||||
.form-label-group input,
|
||||
.form-label-group label {
|
||||
height: 3.125rem;
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
.form-label-group > label {
|
||||
.form-label-group label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -51,6 +51,10 @@ body {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input:-ms-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
@ -59,12 +63,18 @@ body {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::-moz-placeholder {
|
||||
.form-label-group input::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::placeholder {
|
||||
color: transparent;
|
||||
.form-label-group input:not(:-moz-placeholder-shown) {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:-ms-input-placeholder) {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:placeholder-shown) {
|
||||
@ -72,6 +82,20 @@ body {
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:-moz-placeholder-shown) ~ label {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:-ms-input-placeholder) ~ label {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:placeholder-shown) ~ label {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
@ -82,21 +106,18 @@ body {
|
||||
/* Fallback for Edge
|
||||
-------------------------------------------------- */
|
||||
@supports (-ms-ime-align: auto) {
|
||||
.form-label-group > label {
|
||||
display: none;
|
||||
.form-label-group {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.form-label-group label {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.form-label-group input::-ms-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fallback for IE
|
||||
-------------------------------------------------- */
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.form-label-group > label {
|
||||
display: none;
|
||||
}
|
||||
.form-label-group input:-ms-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Floating labels example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/floating-labels/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -48,7 +48,7 @@
|
||||
<div class="text-center mb-4">
|
||||
<img class="mb-4" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
|
||||
<h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
|
||||
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
|
||||
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, Firefox, and IE 10/11 (prefixed).</a></p>
|
||||
</div>
|
||||
|
||||
<div class="form-label-group">
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Grid Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/grid/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
|
||||
@ -60,9 +60,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -132,8 +133,8 @@
|
||||
<div class="pt-md-3 pb-md-4">
|
||||
<h1 class="bd-title mt-0">Examples</h1>
|
||||
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p><div class="d-flex flex-column flex-sm-row">
|
||||
<a href="https://github.com/twbs/bootstrap/releases/download/v4.5.0/bootstrap-4.5.0-examples.zip" class="btn btn-bd-primary py-2 px-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
|
||||
<a href="https://github.com/twbs/bootstrap/archive/v4.5.0.zip" class="btn btn-outline-secondary py-2 px-3 mt-3 mt-sm-0 ml-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
|
||||
<a href="https://github.com/twbs/bootstrap/releases/download/v4.5.1/bootstrap-4.5.1-examples.zip" class="btn btn-bd-primary py-2 px-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
|
||||
<a href="https://github.com/twbs/bootstrap/archive/v4.5.1.zip" class="btn btn-outline-secondary py-2 px-3 mt-3 mt-sm-0 ml-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
|
||||
</div></div>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -453,11 +454,11 @@
|
||||
<li><a href="/docs/4.5/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p>Designed and built with all the love in the world by the <a href="/docs/4.5/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Currently v4.5.0. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p>Currently v4.5.1. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Jumbotron Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/jumbotron/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -118,5 +118,5 @@
|
||||
<p>© Company 2017-2020</p>
|
||||
</footer>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script></body>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Bottom navbar example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/navbar-bottom/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -77,5 +77,5 @@
|
||||
</div>
|
||||
</nav>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script></body>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Fixed top navbar example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/navbar-fixed/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -76,5 +76,5 @@
|
||||
</div>
|
||||
</main>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script></body>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Top navbar example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/navbar-static/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -76,5 +76,5 @@
|
||||
</div>
|
||||
</main>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script></body>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Navbar Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/navbars/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -400,5 +400,5 @@
|
||||
</main>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script></body>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Offcanvas template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/offcanvas/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -172,6 +172,6 @@
|
||||
</div>
|
||||
</main>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script>
|
||||
<script src="offcanvas.js"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Pricing example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/pricing/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Product example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/product/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -184,5 +184,5 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script></body>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Signin Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/sign-in/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Starter Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/starter-template/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -86,5 +86,5 @@
|
||||
|
||||
</main><!-- /.container -->
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script></body>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Sticky Footer Navbar Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@ -86,5 +86,5 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script></body>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
<title>Sticky Footer Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/sticky-footer/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/extend/approach/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,7 +469,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/extend/approach.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Approach</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -493,64 +497,64 @@
|
||||
|
||||
<p>Bootstrap’s responsive styles are built to be responsive, an approach that’s often referred to as <em>mobile-first</em>. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component <em>must</em> be entirely responsive in Bootstrap, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger.</p>
|
||||
|
||||
<p>Across Bootstrap, you’ll see this most clearly in our media queries. In most cases, we use <code class="highlighter-rouge">min-width</code> queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a <code class="highlighter-rouge">.d-none</code> applies from <code class="highlighter-rouge">min-width: 0</code> to infinity. On the other hand, a <code class="highlighter-rouge">.d-md-none</code> applies from the medium breakpoint and up.</p>
|
||||
<p>Across Bootstrap, you’ll see this most clearly in our media queries. In most cases, we use <code class="language-plaintext highlighter-rouge">min-width</code> queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a <code class="language-plaintext highlighter-rouge">.d-none</code> applies from <code class="language-plaintext highlighter-rouge">min-width: 0</code> to infinity. On the other hand, a <code class="language-plaintext highlighter-rouge">.d-md-none</code> applies from the medium breakpoint and up.</p>
|
||||
|
||||
<p>At times we’ll use <code class="highlighter-rouge">max-width</code> when a component’s inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time.</p>
|
||||
<p>At times we’ll use <code class="language-plaintext highlighter-rouge">max-width</code> when a component’s inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time.</p>
|
||||
|
||||
<h2 id="classes">Classes</h2>
|
||||
|
||||
<p>Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., <code class="highlighter-rouge">input[type="text"]</code>) and extraneous parent classes (e.g., <code class="highlighter-rouge">.parent .child</code>) that make styles too specific to easily override.</p>
|
||||
<p>Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., <code class="language-plaintext highlighter-rouge">input[type="text"]</code>) and extraneous parent classes (e.g., <code class="language-plaintext highlighter-rouge">.parent .child</code>) that make styles too specific to easily override.</p>
|
||||
|
||||
<p>As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, <code class="highlighter-rouge">.btn</code> and <code class="highlighter-rouge">.btn-primary</code>. We use <code class="highlighter-rouge">.btn</code> for all the common styles like <code class="highlighter-rouge">display</code>, <code class="highlighter-rouge">padding</code>, and <code class="highlighter-rouge">border-width</code>. We then use modifiers like <code class="highlighter-rouge">.btn-primary</code> to add the color, background-color, border-color, etc.</p>
|
||||
<p>As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, <code class="language-plaintext highlighter-rouge">.btn</code> and <code class="language-plaintext highlighter-rouge">.btn-primary</code>. We use <code class="language-plaintext highlighter-rouge">.btn</code> for all the common styles like <code class="language-plaintext highlighter-rouge">display</code>, <code class="language-plaintext highlighter-rouge">padding</code>, and <code class="language-plaintext highlighter-rouge">border-width</code>. We then use modifiers like <code class="language-plaintext highlighter-rouge">.btn-primary</code> to add the color, background-color, border-color, etc.</p>
|
||||
|
||||
<p>Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you’re actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.</p>
|
||||
|
||||
<h2 id="z-index-scales">z-index scales</h2>
|
||||
|
||||
<p>There are two <code class="highlighter-rouge">z-index</code> scales in Bootstrap—elements within a component and overlay components.</p>
|
||||
<p>There are two <code class="language-plaintext highlighter-rouge">z-index</code> scales in Bootstrap—elements within a component and overlay components.</p>
|
||||
|
||||
<h3 id="component-elements">Component elements</h3>
|
||||
|
||||
<ul>
|
||||
<li>Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the <code class="highlighter-rouge">border</code> property. For example, button groups, input groups, and pagination.</li>
|
||||
<li>These components share a standard <code class="highlighter-rouge">z-index</code> scale of <code class="highlighter-rouge">0</code> through <code class="highlighter-rouge">3</code>.</li>
|
||||
<li><code class="highlighter-rouge">0</code> is default (initial), <code class="highlighter-rouge">1</code> is <code class="highlighter-rouge">:hover</code>, <code class="highlighter-rouge">2</code> is <code class="highlighter-rouge">:active</code>/<code class="highlighter-rouge">.active</code>, and <code class="highlighter-rouge">3</code> is <code class="highlighter-rouge">:focus</code>.</li>
|
||||
<li>Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the <code class="language-plaintext highlighter-rouge">border</code> property. For example, button groups, input groups, and pagination.</li>
|
||||
<li>These components share a standard <code class="language-plaintext highlighter-rouge">z-index</code> scale of <code class="language-plaintext highlighter-rouge">0</code> through <code class="language-plaintext highlighter-rouge">3</code>.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">0</code> is default (initial), <code class="language-plaintext highlighter-rouge">1</code> is <code class="language-plaintext highlighter-rouge">:hover</code>, <code class="language-plaintext highlighter-rouge">2</code> is <code class="language-plaintext highlighter-rouge">:active</code>/<code class="language-plaintext highlighter-rouge">.active</code>, and <code class="language-plaintext highlighter-rouge">3</code> is <code class="language-plaintext highlighter-rouge">:focus</code>.</li>
|
||||
<li>This approach matches our expectations of highest user priority. If an element is focused, it’s in view and at the user’s attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly <em>anything</em> can be hovered.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="overlay-components">Overlay components</h3>
|
||||
|
||||
<p>Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest <code class="highlighter-rouge">z-index</code>, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own <code class="highlighter-rouge">z-index</code> scale that begins at <code class="highlighter-rouge">1000</code>. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.</p>
|
||||
<p>Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest <code class="language-plaintext highlighter-rouge">z-index</code>, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own <code class="language-plaintext highlighter-rouge">z-index</code> scale that begins at <code class="language-plaintext highlighter-rouge">1000</code>. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.</p>
|
||||
|
||||
<p>Each overlay component increases its <code class="highlighter-rouge">z-index</code> value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.</p>
|
||||
<p>Each overlay component increases its <code class="language-plaintext highlighter-rouge">z-index</code> value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.</p>
|
||||
|
||||
<p>Learn more about this in our <a href="/docs/4.5/layout/overview/#z-index"><code class="highlighter-rouge">z-index</code> layout page</a>.</p>
|
||||
<p>Learn more about this in our <a href="/docs/4.5/layout/overview/#z-index"><code class="language-plaintext highlighter-rouge">z-index</code> layout page</a>.</p>
|
||||
|
||||
<h2 id="html-and-css-over-js">HTML and CSS over JS</h2>
|
||||
|
||||
<p>Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.</p>
|
||||
|
||||
<p>This principle is our first-class JavaScript API using <code class="highlighter-rouge">data</code> attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in <a href="/docs/4.5/getting-started/javascript/#data-attributes">our JavaScript overview page</a>.</p>
|
||||
<p>This principle is our first-class JavaScript API using <code class="language-plaintext highlighter-rouge">data</code> attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in <a href="/docs/4.5/getting-started/javascript/#data-attributes">our JavaScript overview page</a>.</p>
|
||||
|
||||
<p>Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a <code class="highlighter-rouge">.btn</code> class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <code class="highlighter-rouge"><button></code>s and <code class="highlighter-rouge"><a></code>s.</p>
|
||||
<p>Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a <code class="language-plaintext highlighter-rouge">.btn</code> class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <code class="language-plaintext highlighter-rouge"><button></code>s and <code class="language-plaintext highlighter-rouge"><a></code>s.</p>
|
||||
|
||||
<p>The same goes for more complex components. While we <em>could</em> write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the <code class="highlighter-rouge">:valid</code>/<code class="highlighter-rouge">:invalid</code> pseudo-elements every browser provides us.</p>
|
||||
<p>The same goes for more complex components. While we <em>could</em> write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the <code class="language-plaintext highlighter-rouge">:valid</code>/<code class="language-plaintext highlighter-rouge">:invalid</code> pseudo-elements every browser provides us.</p>
|
||||
|
||||
<h2 id="utilities">Utilities</h2>
|
||||
|
||||
<p>Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., <code class="highlighter-rouge">.d-block</code> represents <code class="highlighter-rouge">display: block;</code>). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.</p>
|
||||
<p>Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., <code class="language-plaintext highlighter-rouge">.d-block</code> represents <code class="language-plaintext highlighter-rouge">display: block;</code>). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.</p>
|
||||
|
||||
<p>Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.</p>
|
||||
|
||||
<h2 id="flexible-html">Flexible HTML</h2>
|
||||
|
||||
<p>While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (<code class="highlighter-rouge">></code>). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.</p>
|
||||
<p>While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (<code class="language-plaintext highlighter-rouge">></code>). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Guidance and suggestions for using external icon libraries with Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/extend/icons/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,13 +469,26 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/extend/icons.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Icons</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Guidance and suggestions for using external icon libraries with Bootstrap.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p>
|
||||
<h2 id="bootstrap-icons">Bootstrap Icons</h2>
|
||||
|
||||
<h2 id="preferred">Preferred</h2>
|
||||
<p>While you won’t find a built-in icon library in Bootstrap, our separate <a href="https://icons.getbootstrap.com">Bootstrap Icons</a> projects is a growing set of open source SVGs you can use. While they’re designed first and foremost to work with our components and documentation, you can use them in any project.</p>
|
||||
|
||||
<p><a href="https://icons.getbootstrap.com" class="btn btn-bd-primary">Get Bootstrap Icons</a></p>
|
||||
|
||||
<p><img class="img-fluid mt-3 mx-auto" srcset="/docs/4.5/assets/img/bootstrap-icons.png, /docs/4.5/assets/img/bootstrap-icons@2x.png 2x" src="/docs/4.5/assets/img/bootstrap-icons.png" alt="Bootstrap Icons" width="966" height="600" loading="lazy" /></p>
|
||||
|
||||
<h2 id="additional-icon-sets">Additional icon sets</h2>
|
||||
|
||||
<p>In addition to Bootstrap Icons, we have a handful of alternative icon libraries for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.</p>
|
||||
|
||||
<h3 id="preferred">Preferred</h3>
|
||||
|
||||
<p>We’ve tested and used these icon sets ourselves.</p>
|
||||
|
||||
@ -484,7 +498,7 @@
|
||||
<li><a href="https://octicons.github.com/">Octicons</a></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="more-options">More options</h2>
|
||||
<h3 id="more">More</h3>
|
||||
|
||||
<p>While we haven’t tried these out, they do look promising and provide multiple formats—including SVG.</p>
|
||||
|
||||
@ -502,6 +516,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="A brief overview of Bootstrap’s features and limitations for the creation of accessible content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/getting-started/accessibility/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -483,7 +484,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/getting-started/accessibility.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Accessibility</h1>
|
||||
</div>
|
||||
<p class="bd-lead">A brief overview of Bootstrap’s features and limitations for the creation of accessible content.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -509,20 +513,20 @@
|
||||
|
||||
<h3 id="visually-hidden-content">Visually hidden content</h3>
|
||||
|
||||
<p>Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the <code class="highlighter-rouge">.sr-only</code> class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.</p>
|
||||
<p>Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the <code class="language-plaintext highlighter-rouge">.sr-only</code> class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Danger: <span class="nt"></span></span>
|
||||
This action is not reversible
|
||||
<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<p>For visually hidden interactive controls, such as traditional “skip” links, <code class="highlighter-rouge">.sr-only</code> can be combined with the <code class="highlighter-rouge">.sr-only-focusable</code> class. This will ensure that the control becomes visible once focused (for sighted keyboard users).</p>
|
||||
<p>For visually hidden interactive controls, such as traditional “skip” links, <code class="language-plaintext highlighter-rouge">.sr-only</code> can be combined with the <code class="language-plaintext highlighter-rouge">.sr-only-focusable</code> class. This will ensure that the control becomes visible once focused (for sighted keyboard users).</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"sr-only sr-only-focusable"</span> <span class="na">href=</span><span class="s">"#content"</span><span class="nt">></span>Skip to main content<span class="nt"></a></span></code></pre></figure>
|
||||
|
||||
<h3 id="reduced-motion">Reduced motion</h3>
|
||||
|
||||
<p>Bootstrap includes support for the <a href="https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion"><code class="highlighter-rouge">prefers-reduced-motion</code> media feature</a>. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled.</p>
|
||||
<p>Bootstrap includes support for the <a href="https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion"><code class="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media feature</a>. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled.</p>
|
||||
|
||||
<h2 id="additional-resources">Additional resources</h2>
|
||||
|
||||
@ -540,6 +544,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/getting-started/best-practices/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,7 +469,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/getting-started/best-practices.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Best practices</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -493,6 +497,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/getting-started/browsers-devices/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -496,7 +497,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/getting-started/browsers-devices.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Browsers and devices</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -506,9 +510,9 @@
|
||||
|
||||
<p>Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.</p>
|
||||
|
||||
<p>You can find our supported range of browsers and their versions <a href="https://github.com/twbs/bootstrap/blob/v4.5.0/.browserslistrc">in our <code class="highlighter-rouge">.browserslistrc file</code></a>:</p>
|
||||
<p>You can find our supported range of browsers and their versions <a href="https://github.com/twbs/bootstrap/blob/v4.5.1/.browserslistrc">in our <code class="language-plaintext highlighter-rouge">.browserslistrc file</code></a>:</p>
|
||||
|
||||
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code># https://github.com/browserslist/browserslist#readme
|
||||
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># https://github.com/browserslist/browserslist#readme
|
||||
|
||||
>= 1%
|
||||
last 1 major version
|
||||
@ -620,23 +624,23 @@ Opera >= 30
|
||||
|
||||
<h3 id="overflow-and-scrolling">Overflow and scrolling</h3>
|
||||
|
||||
<p>Support for <code class="highlighter-rouge">overflow: hidden;</code> on the <code class="highlighter-rouge"><body></code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices’ browsers, the <code class="highlighter-rouge"><body></code> content will begin to scroll. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=175502">Chrome bug #175502</a> (fixed in Chrome v40) and <a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a>.</p>
|
||||
<p>Support for <code class="language-plaintext highlighter-rouge">overflow: hidden;</code> on the <code class="language-plaintext highlighter-rouge"><body></code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices’ browsers, the <code class="language-plaintext highlighter-rouge"><body></code> content will begin to scroll. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=175502">Chrome bug #175502</a> (fixed in Chrome v40) and <a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a>.</p>
|
||||
|
||||
<h3 id="ios-text-fields-and-scrolling">iOS text fields and scrolling</h3>
|
||||
|
||||
<p>As of iOS 9.2, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual <code class="highlighter-rouge"><input></code> or a <code class="highlighter-rouge"><textarea></code>, the <code class="highlighter-rouge"><body></code> content underneath the modal will be scrolled instead of the modal itself. See <a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a>.</p>
|
||||
<p>As of iOS 9.2, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual <code class="language-plaintext highlighter-rouge"><input></code> or a <code class="language-plaintext highlighter-rouge"><textarea></code>, the <code class="language-plaintext highlighter-rouge"><body></code> content underneath the modal will be scrolled instead of the modal itself. See <a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a>.</p>
|
||||
|
||||
<h3 id="navbar-dropdowns">Navbar Dropdowns</h3>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.dropdown-backdrop</code> element isn’t used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile">any other element which will fire a click event in iOS</a>).</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">.dropdown-backdrop</code> element isn’t used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile">any other element which will fire a click event in iOS</a>).</p>
|
||||
|
||||
<h2 id="browser-zooming">Browser zooming</h2>
|
||||
|
||||
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
|
||||
|
||||
<h2 id="sticky-hoverfocus-on-ios">Sticky <code class="highlighter-rouge">:hover</code>/<code class="highlighter-rouge">:focus</code> on iOS</h2>
|
||||
<h2 id="sticky-hoverfocus-on-ios">Sticky <code class="language-plaintext highlighter-rouge">:hover</code>/<code class="language-plaintext highlighter-rouge">:focus</code> on iOS</h2>
|
||||
|
||||
<p>While <code class="highlighter-rouge">:hover</code> isn’t possible on most touch devices, iOS emulates this behavior, resulting in “sticky” hover styles that persist after tapping one element. These hover styles are only removed when users tap another element. This behavior is considered largely undesirable and appears to not be an issue on Android or Windows devices.</p>
|
||||
<p>While <code class="language-plaintext highlighter-rouge">:hover</code> isn’t possible on most touch devices, iOS emulates this behavior, resulting in “sticky” hover styles that persist after tapping one element. These hover styles are only removed when users tap another element. This behavior is considered largely undesirable and appears to not be an issue on Android or Windows devices.</p>
|
||||
|
||||
<p>Throughout our v4 alpha and beta releases, we included incomplete and commented out code for opting into a media query shim that would disable hover styles in touch device browsers that emulate hovering. This work was never fully completed or enabled, but to avoid complete breakage, we’ve opted to deprecate <a href="https://github.com/twbs/mq4-hover-shim">this shim</a> and keep the mixins as shortcuts for the pseudo-classes.</p>
|
||||
|
||||
@ -644,7 +648,7 @@ Opera >= 30
|
||||
|
||||
<p>Even in some modern browsers, printing can be quirky.</p>
|
||||
|
||||
<p>As of Safari v8.0, use of the fixed-width <code class="highlighter-rouge">.container</code> class can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">issue #14868</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a> for more details. One potential workaround is the following CSS:</p>
|
||||
<p>As of Safari v8.0, use of the fixed-width <code class="language-plaintext highlighter-rouge">.container</code> class can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">issue #14868</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a> for more details. One potential workaround is the following CSS:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="k">@media</span> <span class="n">print</span> <span class="p">{</span>
|
||||
<span class="nc">.container</span> <span class="p">{</span>
|
||||
@ -658,7 +662,7 @@ Opera >= 30
|
||||
|
||||
<h4 id="select-menu">Select menu</h4>
|
||||
|
||||
<p>On <code class="highlighter-rouge"><select></code> elements, the Android stock browser will not display the side controls if there is a <code class="highlighter-rouge">border-radius</code> and/or <code class="highlighter-rouge">border</code> applied. (See <a href="https://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code class="highlighter-rouge"><select></code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
|
||||
<p>On <code class="language-plaintext highlighter-rouge"><select></code> elements, the Android stock browser will not display the side controls if there is a <code class="language-plaintext highlighter-rouge">border-radius</code> and/or <code class="language-plaintext highlighter-rouge">border</code> applied. (See <a href="https://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code class="language-plaintext highlighter-rouge"><select></code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script></span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
@ -685,6 +689,6 @@ Opera >= 30
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/getting-started/build-tools/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -478,20 +479,23 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/getting-started/build-tools.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Build tools</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="tooling-setup">Tooling setup</h2>
|
||||
|
||||
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts">npm scripts</a> for its build system. Our <a href="https://github.com/twbs/bootstrap/blob/v4.5.0/package.json">package.json</a> includes convenient methods for working with the framework, including compiling code, running tests, and more.</p>
|
||||
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts">npm scripts</a> for its build system. Our <a href="https://github.com/twbs/bootstrap/blob/v4.5.1/package.json">package.json</a> includes convenient methods for working with the framework, including compiling code, running tests, and more.</p>
|
||||
|
||||
<p>To use our build system and run our documentation locally, you’ll need a copy of Bootstrap’s source files and Node. Follow these steps and you should be ready to rock:</p>
|
||||
|
||||
<ol>
|
||||
<li><a href="https://nodejs.org/en/download/">Download and install Node.js</a>, which we use to manage our dependencies.</li>
|
||||
<li>Navigate to the root <code class="highlighter-rouge">/bootstrap</code> directory and run <code class="highlighter-rouge">npm install</code> to install our local dependencies listed in <a href="https://github.com/twbs/bootstrap/blob/v4.5.0/package.json">package.json</a>.</li>
|
||||
<li><a href="https://www.ruby-lang.org/en/documentation/installation/">Install Ruby</a>, install <a href="https://bundler.io/">Bundler</a> with <code class="highlighter-rouge">gem install bundler</code>, and finally run <code class="highlighter-rouge">bundle install</code>. This will install all Ruby dependencies, such as Jekyll and plugins.
|
||||
<li>Navigate to the root <code class="language-plaintext highlighter-rouge">/bootstrap</code> directory and run <code class="language-plaintext highlighter-rouge">npm install</code> to install our local dependencies listed in <a href="https://github.com/twbs/bootstrap/blob/v4.5.1/package.json">package.json</a>.</li>
|
||||
<li><a href="https://www.ruby-lang.org/en/documentation/installation/">Install Ruby</a>, install <a href="https://bundler.io/">Bundler</a> with <code class="language-plaintext highlighter-rouge">gem install bundler</code>, and finally run <code class="language-plaintext highlighter-rouge">bundle install</code>. This will install all Ruby dependencies, such as Jekyll and plugins.
|
||||
<ul>
|
||||
<li><strong>Windows users:</strong> Read <a href="https://jekyllrb.com/docs/windows/">this guide</a> to get Jekyll up and running without problems.</li>
|
||||
</ul>
|
||||
@ -502,7 +506,7 @@
|
||||
|
||||
<h2 id="using-npm-scripts">Using npm scripts</h2>
|
||||
|
||||
<p>Our <a href="https://github.com/twbs/bootstrap/blob/v4.5.0/package.json">package.json</a> includes the following commands and tasks:</p>
|
||||
<p>Our <a href="https://github.com/twbs/bootstrap/blob/v4.5.1/package.json">package.json</a> includes the following commands and tasks:</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
@ -513,43 +517,43 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">npm run dist</code></td>
|
||||
<td><code class="highlighter-rouge">npm run dist</code> creates the <code class="highlighter-rouge">/dist/</code> directory with compiled files. <strong>Uses <a href="https://sass-lang.com/">Sass</a>, <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, and <a href="https://github.com/terser/terser">terser</a>.</strong></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">npm run dist</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">npm run dist</code> creates the <code class="language-plaintext highlighter-rouge">/dist/</code> directory with compiled files. <strong>Uses <a href="https://sass-lang.com/">Sass</a>, <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, and <a href="https://github.com/terser/terser">terser</a>.</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">npm test</code></td>
|
||||
<td>Same as <code class="highlighter-rouge">npm run dist</code> plus it runs tests locally</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">npm test</code></td>
|
||||
<td>Same as <code class="language-plaintext highlighter-rouge">npm run dist</code> plus it runs tests locally</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">npm run docs</code></td>
|
||||
<td>Builds and lints CSS and JavaScript for docs. You can then run the documentation locally via <code class="highlighter-rouge">npm run docs-serve</code>.</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">npm run docs</code></td>
|
||||
<td>Builds and lints CSS and JavaScript for docs. You can then run the documentation locally via <code class="language-plaintext highlighter-rouge">npm run docs-serve</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>Run <code class="highlighter-rouge">npm run</code> to see all the npm scripts.</p>
|
||||
<p>Run <code class="language-plaintext highlighter-rouge">npm run</code> to see all the npm scripts.</p>
|
||||
|
||||
<h2 id="autoprefixer">Autoprefixer</h2>
|
||||
|
||||
<p>Bootstrap uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.</p>
|
||||
|
||||
<p>We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See <a href="https://github.com/twbs/bootstrap/blob/v4.5.0/.browserslistrc">.browserslistrc</a> for details.</p>
|
||||
<p>We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See <a href="https://github.com/twbs/bootstrap/blob/v4.5.1/.browserslistrc">.browserslistrc</a> for details.</p>
|
||||
|
||||
<h2 id="local-documentation">Local documentation</h2>
|
||||
|
||||
<p>Running our documentation locally requires the use of Jekyll, a decently flexible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here’s how to get it started:</p>
|
||||
|
||||
<ol>
|
||||
<li>Run through the <a href="#tooling-setup">tooling setup</a> above to install Jekyll (the site builder) and other Ruby dependencies with <code class="highlighter-rouge">bundle install</code>.</li>
|
||||
<li>From the root <code class="highlighter-rouge">/bootstrap</code> directory, run <code class="highlighter-rouge">npm run docs-serve</code> in the command line.</li>
|
||||
<li>Open <code class="highlighter-rouge">http://localhost:9001</code> in your browser, and voilà.</li>
|
||||
<li>Run through the <a href="#tooling-setup">tooling setup</a> above to install Jekyll (the site builder) and other Ruby dependencies with <code class="language-plaintext highlighter-rouge">bundle install</code>.</li>
|
||||
<li>From the root <code class="language-plaintext highlighter-rouge">/bootstrap</code> directory, run <code class="language-plaintext highlighter-rouge">npm run docs-serve</code> in the command line.</li>
|
||||
<li>Open <code class="language-plaintext highlighter-rouge">http://localhost:9001</code> in your browser, and voilà.</li>
|
||||
</ol>
|
||||
|
||||
<p>Learn more about using Jekyll by reading its <a href="https://jekyllrb.com/docs/">documentation</a>.</p>
|
||||
|
||||
<h2 id="troubleshooting">Troubleshooting</h2>
|
||||
|
||||
<p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code class="highlighter-rouge">npm install</code>.</p>
|
||||
<p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code class="language-plaintext highlighter-rouge">npm install</code>.</p>
|
||||
|
||||
|
||||
</main>
|
||||
@ -557,6 +561,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Discover what’s included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap’s JavaScript plugins require jQuery.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/getting-started/contents/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -477,7 +478,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/getting-started/contents.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Contents</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Discover what’s included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap’s JavaScript plugins require jQuery.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -511,7 +515,7 @@
|
||||
├── bootstrap.min.js
|
||||
└── bootstrap.min.js.map</code></pre></figure>
|
||||
|
||||
<p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code class="highlighter-rouge">bootstrap.*</code>), as well as compiled and minified CSS and JS (<code class="highlighter-rouge">bootstrap.min.*</code>). <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps">source maps</a> (<code class="highlighter-rouge">bootstrap.*.map</code>) are available for use with certain browsers’ developer tools. Bundled JS files (<code class="highlighter-rouge">bootstrap.bundle.js</code> and minified <code class="highlighter-rouge">bootstrap.bundle.min.js</code>) include <a href="https://popper.js.org/">Popper</a>, but not <a href="https://jquery.com/">jQuery</a>.</p>
|
||||
<p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code class="language-plaintext highlighter-rouge">bootstrap.*</code>), as well as compiled and minified CSS and JS (<code class="language-plaintext highlighter-rouge">bootstrap.min.*</code>). <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps">source maps</a> (<code class="language-plaintext highlighter-rouge">bootstrap.*.map</code>) are available for use with certain browsers’ developer tools. Bundled JS files (<code class="language-plaintext highlighter-rouge">bootstrap.bundle.js</code> and minified <code class="language-plaintext highlighter-rouge">bootstrap.bundle.min.js</code>) include <a href="https://popper.js.org/">Popper</a>, but not <a href="https://jquery.com/">jQuery</a>.</p>
|
||||
|
||||
<h2 id="css-files">CSS files</h2>
|
||||
|
||||
@ -608,13 +612,13 @@
|
||||
├── js/
|
||||
└── scss/</code></pre></figure>
|
||||
|
||||
<p>The <code class="highlighter-rouge">scss/</code> and <code class="highlighter-rouge">js/</code> are the source code for our CSS and JavaScript. The <code class="highlighter-rouge">dist/</code> folder includes everything listed in the precompiled download section above. The <code class="highlighter-rouge">site/docs/</code> folder includes the source code for our documentation, and <code class="highlighter-rouge">examples/</code> of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">scss/</code> and <code class="language-plaintext highlighter-rouge">js/</code> are the source code for our CSS and JavaScript. The <code class="language-plaintext highlighter-rouge">dist/</code> folder includes everything listed in the precompiled download section above. The <code class="language-plaintext highlighter-rouge">site/docs/</code> folder includes the source code for our documentation, and <code class="language-plaintext highlighter-rouge">examples/</code> of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/getting-started/download/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -486,13 +487,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/getting-started/download.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Download</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="compiled-css-and-js">Compiled CSS and JS</h2>
|
||||
|
||||
<p>Download ready-to-use compiled code for <strong>Bootstrap v4.5.0</strong> to easily drop into your project, which includes:</p>
|
||||
<p>Download ready-to-use compiled code for <strong>Bootstrap v4.5.1</strong> to easily drop into your project, which includes:</p>
|
||||
|
||||
<ul>
|
||||
<li>Compiled and minified CSS bundles (see <a href="/docs/4.5/getting-started/contents/#css-files">CSS files comparison</a>)</li>
|
||||
@ -501,7 +505,7 @@
|
||||
|
||||
<p>This doesn’t include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).</p>
|
||||
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v4.5.0/bootstrap-4.5.0-dist.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a></p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v4.5.1/bootstrap-4.5.1-dist.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a></p>
|
||||
|
||||
<h2 id="source-files">Source files</h2>
|
||||
|
||||
@ -514,25 +518,25 @@
|
||||
|
||||
<p>Should you require <a href="/docs/4.5/getting-started/build-tools/#tooling-setup">build tools</a>, they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.</p>
|
||||
|
||||
<p><a href="https://github.com/twbs/bootstrap/archive/v4.5.0.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/archive/v4.5.1.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>If you want to download and examine our <a href="/docs/4.5/examples/">examples</a>, you can grab the already built examples:</p>
|
||||
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v4.5.0/bootstrap-4.5.0-examples.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Examples');">Download Examples</a></p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v4.5.1/bootstrap-4.5.1-examples.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Examples');">Download Examples</a></p>
|
||||
|
||||
<h2 id="bootstrapcdn">BootstrapCDN</h2>
|
||||
|
||||
<p>Skip the download with <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a> to deliver cached version of Bootstrap’s compiled CSS and JS to your project.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
|
||||
<p>If you’re using our compiled JavaScript, don’t forget to include CDN versions of jQuery and Popper.js before it.</p>
|
||||
<p>If you’re using our compiled JavaScript, don’t forget to include jQuery and Popper.js, via a CDN preferably, before our JS.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.5.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
|
||||
<h2 id="package-managers">Package managers</h2>
|
||||
|
||||
@ -544,13 +548,13 @@
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">npm <span class="nb">install </span>bootstrap</code></pre></figure>
|
||||
|
||||
<p><code class="highlighter-rouge">require('bootstrap')</code> will load all of Bootstrap’s jQuery plugins onto the jQuery object. The <code class="highlighter-rouge">bootstrap</code> module itself does not export anything. You can manually load Bootstrap’s jQuery plugins individually by loading the <code class="highlighter-rouge">/js/*.js</code> files under the package’s top-level directory.</p>
|
||||
<p><code class="language-plaintext highlighter-rouge">require('bootstrap')</code> will load all of Bootstrap’s jQuery plugins onto the jQuery object. The <code class="language-plaintext highlighter-rouge">bootstrap</code> module itself does not export anything. You can manually load Bootstrap’s jQuery plugins individually by loading the <code class="language-plaintext highlighter-rouge">/js/*.js</code> files under the package’s top-level directory.</p>
|
||||
|
||||
<p>Bootstrap’s <code class="highlighter-rouge">package.json</code> contains some additional metadata under the following keys:</p>
|
||||
<p>Bootstrap’s <code class="language-plaintext highlighter-rouge">package.json</code> contains some additional metadata under the following keys:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">sass</code> - path to Bootstrap’s main <a href="https://sass-lang.com/">Sass</a> source file</li>
|
||||
<li><code class="highlighter-rouge">style</code> - path to Bootstrap’s non-minified CSS that’s been precompiled using the default settings (no customization)</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">sass</code> - path to Bootstrap’s main <a href="https://sass-lang.com/">Sass</a> source file</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">style</code> - path to Bootstrap’s non-minified CSS that’s been precompiled using the default settings (no customization)</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="yarn">yarn</h3>
|
||||
@ -561,13 +565,13 @@
|
||||
|
||||
<h3 id="rubygems">RubyGems</h3>
|
||||
|
||||
<p>Install Bootstrap in your Ruby apps using <a href="https://bundler.io/">Bundler</a> (<strong>recommended</strong>) and <a href="https://rubygems.org/">RubyGems</a> by adding the following line to your <a href="https://bundler.io/gemfile.html"><code class="highlighter-rouge">Gemfile</code></a>:</p>
|
||||
<p>Install Bootstrap in your Ruby apps using <a href="https://bundler.io/">Bundler</a> (<strong>recommended</strong>) and <a href="https://rubygems.org/">RubyGems</a> by adding the following line to your <a href="https://bundler.io/gemfile.html"><code class="language-plaintext highlighter-rouge">Gemfile</code></a>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="n">gem</span> <span class="s1">'bootstrap'</span><span class="p">,</span> <span class="s1">'~> 4.5.0'</span></code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="n">gem</span> <span class="s1">'bootstrap'</span><span class="p">,</span> <span class="s1">'~> 4.5.1'</span></code></pre></figure>
|
||||
|
||||
<p>Alternatively, if you’re not using Bundler, you can install the gem by running this command:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">gem <span class="nb">install </span>bootstrap <span class="nt">-v</span> 4.5.0</code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">gem <span class="nb">install </span>bootstrap <span class="nt">-v</span> 4.5.1</code></pre></figure>
|
||||
|
||||
<p><a href="https://github.com/twbs/bootstrap-rubygem/blob/master/README.md">See the gem’s README</a> for further details.</p>
|
||||
|
||||
@ -575,7 +579,7 @@
|
||||
|
||||
<p>You can also install and manage Bootstrap’s Sass and JavaScript using <a href="https://getcomposer.org/">Composer</a>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">composer require twbs/bootstrap:4.5.0</code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">composer require twbs/bootstrap:4.5.1</code></pre></figure>
|
||||
|
||||
<h3 id="nuget">NuGet</h3>
|
||||
|
||||
@ -591,6 +595,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/getting-started/introduction/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -489,7 +490,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/getting-started/introduction.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Introduction</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -499,23 +503,23 @@
|
||||
|
||||
<h3 id="css">CSS</h3>
|
||||
|
||||
<p>Copy-paste the stylesheet <code class="highlighter-rouge"><link></code> into your <code class="highlighter-rouge"><head></code> before all other stylesheets to load our CSS.</p>
|
||||
<p>Copy-paste the stylesheet <code class="language-plaintext highlighter-rouge"><link></code> into your <code class="language-plaintext highlighter-rouge"><head></code> before all other stylesheets to load our CSS.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span></code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<h3 id="js">JS</h3>
|
||||
|
||||
<p>Many of our components require the use of JavaScript to function. Specifically, they require <a href="https://jquery.com/">jQuery</a>, <a href="https://popper.js.org/">Popper.js</a>, and our own JavaScript plugins. Place the following <code class="highlighter-rouge"><script></code>s near the end of your pages, right before the closing <code class="highlighter-rouge"></body></code> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.</p>
|
||||
<p>Many of our components require the use of JavaScript to function. Specifically, they require <a href="https://jquery.com/">jQuery</a>, <a href="https://popper.js.org/">Popper.js</a>, and our own JavaScript plugins. Place the following <code class="language-plaintext highlighter-rouge"><script></code>s near the end of your pages, right before the closing <code class="language-plaintext highlighter-rouge"></body></code> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.</p>
|
||||
|
||||
<p>We use <a href="https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/">jQuery’s slim build</a>, but the full version is also supported.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.5.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
|
||||
<p>Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.</p>
|
||||
|
||||
<p>Our <code class="highlighter-rouge">bootstrap.bundle.js</code> and <code class="highlighter-rouge">bootstrap.bundle.min.js</code> include <a href="https://popper.js.org/">Popper</a>, but not <a href="https://jquery.com/">jQuery</a>. For more information about what’s included in Bootstrap, please see our <a href="/docs/4.5/getting-started/contents/#precompiled-bootstrap">contents</a> section.</p>
|
||||
<p>Our <code class="language-plaintext highlighter-rouge">bootstrap.bundle.js</code> and <code class="language-plaintext highlighter-rouge">bootstrap.bundle.min.js</code> include <a href="https://popper.js.org/">Popper</a>, but not <a href="https://jquery.com/">jQuery</a>. For more information about what’s included in Bootstrap, please see our <a href="/docs/4.5/getting-started/contents/#precompiled-bootstrap">contents</a> section.</p>
|
||||
|
||||
<details>
|
||||
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
|
||||
@ -529,6 +533,7 @@
|
||||
<li>Dropdowns for displaying and positioning (also requires <a href="https://popper.js.org/">Popper.js</a>)</li>
|
||||
<li>Modals for displaying, positioning, and scroll behavior</li>
|
||||
<li>Navbar for extending our Collapse plugin to implement responsive behavior</li>
|
||||
<li>Toasts for displaying and dismissing</li>
|
||||
<li>Tooltips and popovers for displaying and positioning (also requires <a href="https://popper.js.org/">Popper.js</a>)</li>
|
||||
<li>Scrollspy for scroll behavior and navigation updates</li>
|
||||
</ul>
|
||||
@ -547,7 +552,7 @@
|
||||
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="nt">></span>
|
||||
|
||||
<span class="c"><!-- Bootstrap CSS --></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
|
||||
|
||||
<span class="nt"><title></span>Hello, world!<span class="nt"></title></span>
|
||||
<span class="nt"></head></span>
|
||||
@ -557,8 +562,8 @@
|
||||
<span class="c"><!-- Optional JavaScript --></span>
|
||||
<span class="c"><!-- jQuery first, then Popper.js, then Bootstrap JS --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.5.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"></body></span>
|
||||
<span class="nt"></html></span></code></pre></figure>
|
||||
|
||||
@ -579,7 +584,7 @@
|
||||
|
||||
<h3 id="responsive-meta-tag">Responsive meta tag</h3>
|
||||
|
||||
<p>Bootstrap is developed <em>mobile first</em>, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, <strong>add the responsive viewport meta tag</strong> to your <code class="highlighter-rouge"><head></code>.</p>
|
||||
<p>Bootstrap is developed <em>mobile first</em>, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, <strong>add the responsive viewport meta tag</strong> to your <code class="language-plaintext highlighter-rouge"><head></code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
@ -587,7 +592,7 @@
|
||||
|
||||
<h3 id="box-sizing">Box-sizing</h3>
|
||||
|
||||
<p>For more straightforward sizing in CSS, we switch the global <code class="highlighter-rouge">box-sizing</code> value from <code class="highlighter-rouge">content-box</code> to <code class="highlighter-rouge">border-box</code>. This ensures <code class="highlighter-rouge">padding</code> does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.</p>
|
||||
<p>For more straightforward sizing in CSS, we switch the global <code class="language-plaintext highlighter-rouge">box-sizing</code> value from <code class="language-plaintext highlighter-rouge">content-box</code> to <code class="language-plaintext highlighter-rouge">border-box</code>. This ensures <code class="language-plaintext highlighter-rouge">padding</code> does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.</p>
|
||||
|
||||
<p>On the rare occasion you need to override it, use something like the following:</p>
|
||||
|
||||
@ -595,7 +600,7 @@
|
||||
<span class="nl">box-sizing</span><span class="p">:</span> <span class="n">content-box</span><span class="p">;</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>With the above snippet, nested elements—including generated content via <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code>—will all inherit the specified <code class="highlighter-rouge">box-sizing</code> for that <code class="highlighter-rouge">.selector-for-some-widget</code>.</p>
|
||||
<p>With the above snippet, nested elements—including generated content via <code class="language-plaintext highlighter-rouge">::before</code> and <code class="language-plaintext highlighter-rouge">::after</code>—will all inherit the specified <code class="language-plaintext highlighter-rouge">box-sizing</code> for that <code class="language-plaintext highlighter-rouge">.selector-for-some-widget</code>.</p>
|
||||
|
||||
<p>Learn more about <a href="https://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
|
||||
|
||||
@ -611,9 +616,9 @@
|
||||
<li>Follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a>.</li>
|
||||
<li>Read and subscribe to <a href="https://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
|
||||
<li>Join <a href="https://bootstrap-slack.herokuapp.com/">the official Slack room</a>.</li>
|
||||
<li>Chat with fellow Bootstrappers in IRC. On the <code class="highlighter-rouge">irc.freenode.net</code> server, in the <code class="highlighter-rouge">##bootstrap</code> channel.</li>
|
||||
<li>Implementation help may be found at Stack Overflow (tagged <a href="https://stackoverflow.com/questions/tagged/bootstrap-4"><code class="highlighter-rouge">bootstrap-4</code></a>).</li>
|
||||
<li>Developers should use the keyword <code class="highlighter-rouge">bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
|
||||
<li>Chat with fellow Bootstrappers in IRC. On the <code class="language-plaintext highlighter-rouge">irc.freenode.net</code> server, in the <code class="language-plaintext highlighter-rouge">##bootstrap</code> channel.</li>
|
||||
<li>Implementation help may be found at Stack Overflow (tagged <a href="https://stackoverflow.com/questions/tagged/bootstrap-4"><code class="language-plaintext highlighter-rouge">bootstrap-4</code></a>).</li>
|
||||
<li>Developers should use the keyword <code class="language-plaintext highlighter-rouge">bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
|
||||
</ul>
|
||||
|
||||
<p>You can also follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
|
||||
@ -623,6 +628,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/getting-started/javascript/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -488,19 +489,22 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/getting-started/javascript.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">JavaScript</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="individual-or-compiled">Individual or compiled</h2>
|
||||
|
||||
<p>Plugins can be included individually (using Bootstrap’s individual <code class="highlighter-rouge">js/dist/*.js</code>), or all at once using <code class="highlighter-rouge">bootstrap.js</code> or the minified <code class="highlighter-rouge">bootstrap.min.js</code> (don’t include both).</p>
|
||||
<p>Plugins can be included individually (using Bootstrap’s individual <code class="language-plaintext highlighter-rouge">js/dist/*.js</code>), or all at once using <code class="language-plaintext highlighter-rouge">bootstrap.js</code> or the minified <code class="language-plaintext highlighter-rouge">bootstrap.min.js</code> (don’t include both).</p>
|
||||
|
||||
<p>If you use a bundler (Webpack, Rollup…), you can use <code class="highlighter-rouge">/js/dist/*.js</code> files which are UMD ready.</p>
|
||||
<p>If you use a bundler (Webpack, Rollup…), you can use <code class="language-plaintext highlighter-rouge">/js/dist/*.js</code> files which are UMD ready.</p>
|
||||
|
||||
<h2 id="dependencies">Dependencies</h2>
|
||||
|
||||
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that <strong>all plugins depend on jQuery</strong> (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v4.5.0/package.json">Consult our <code class="highlighter-rouge">package.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that <strong>all plugins depend on jQuery</strong> (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v4.5.1/package.json">Consult our <code class="language-plaintext highlighter-rouge">package.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
|
||||
<p>Our dropdowns, popovers and tooltips also depend on <a href="https://popper.js.org/">Popper.js</a>.</p>
|
||||
|
||||
@ -508,7 +512,7 @@
|
||||
|
||||
<p>Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to <strong>only use one set of data attributes on a single element</strong> (e.g., you cannot trigger a tooltip and modal from the same button.)</p>
|
||||
|
||||
<p>However, in some situations it may be desirable to disable this functionality. To disable the data attribute API, unbind all events on the document namespaced with <code class="highlighter-rouge">data-api</code> like so:</p>
|
||||
<p>However, in some situations it may be desirable to disable this functionality. To disable the data attribute API, unbind all events on the document namespaced with <code class="language-plaintext highlighter-rouge">data-api</code> like so:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="dl">'</span><span class="s1">.data-api</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
@ -519,15 +523,15 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h2 id="selectors">Selectors</h2>
|
||||
|
||||
<p>Currently to query DOM elements we use the native methods <code class="highlighter-rouge">querySelector</code> and <code class="highlighter-rouge">querySelectorAll</code> for performance reasons, so you have to use <a href="https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">valid selectors</a>.
|
||||
If you use special selectors, for example: <code class="highlighter-rouge">collapse:Example</code> be sure to escape them.</p>
|
||||
<p>Currently to query DOM elements we use the native methods <code class="language-plaintext highlighter-rouge">querySelector</code> and <code class="language-plaintext highlighter-rouge">querySelectorAll</code> for performance reasons, so you have to use <a href="https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">valid selectors</a>.
|
||||
If you use special selectors, for example: <code class="language-plaintext highlighter-rouge">collapse:Example</code> be sure to escape them.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="events">Events</h2>
|
||||
|
||||
<p>Bootstrap provides custom events for most plugins’ unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code class="highlighter-rouge">show</code>) is triggered at the start of an event, and its past participle form (ex. <code class="highlighter-rouge">shown</code>) is triggered on the completion of an action.</p>
|
||||
<p>Bootstrap provides custom events for most plugins’ unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code class="language-plaintext highlighter-rouge">show</code>) is triggered at the start of an event, and its past participle form (ex. <code class="language-plaintext highlighter-rouge">shown</code>) is triggered on the completion of an action.</p>
|
||||
|
||||
<p>All infinitive events provide <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault"><code class="highlighter-rouge">preventDefault()</code></a> functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call <code class="highlighter-rouge">preventDefault()</code>.</p>
|
||||
<p>All infinitive events provide <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault"><code class="language-plaintext highlighter-rouge">preventDefault()</code></a> functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call <code class="language-plaintext highlighter-rouge">preventDefault()</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myModal</span><span class="dl">'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">show.bs.modal</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -547,7 +551,7 @@ If you use special selectors, for example: <code class="highlighter-rouge">colla
|
||||
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myModal</span><span class="dl">'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span> <span class="na">keyboard</span><span class="p">:</span> <span class="kc">false</span> <span class="p">})</span> <span class="c1">// initialized with no keyboard</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myModal</span><span class="dl">'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span> <span class="c1">// initializes and invokes show immediately</span></code></pre></figure>
|
||||
|
||||
<p>Each plugin also exposes its raw constructor on a <code class="highlighter-rouge">Constructor</code> property: <code class="highlighter-rouge">$.fn.popover.Constructor</code>. If you’d like to get a particular plugin instance, retrieve it directly from an element: <code class="highlighter-rouge">$('[rel="popover"]').data('popover')</code>.</p>
|
||||
<p>Each plugin also exposes its raw constructor on a <code class="language-plaintext highlighter-rouge">Constructor</code> property: <code class="language-plaintext highlighter-rouge">$.fn.popover.Constructor</code>. If you’d like to get a particular plugin instance, retrieve it directly from an element: <code class="language-plaintext highlighter-rouge">$('[rel="popover"]').data('popover')</code>.</p>
|
||||
|
||||
<h3 id="asynchronous-functions-and-transitions">Asynchronous functions and transitions</h3>
|
||||
|
||||
@ -570,45 +574,45 @@ If you use special selectors, for example: <code class="highlighter-rouge">colla
|
||||
|
||||
<h3 id="default-settings">Default settings</h3>
|
||||
|
||||
<p>You can change the default settings for a plugin by modifying the plugin’s <code class="highlighter-rouge">Constructor.Default</code> object:</p>
|
||||
<p>You can change the default settings for a plugin by modifying the plugin’s <code class="language-plaintext highlighter-rouge">Constructor.Default</code> object:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// changes default for the modal plugin's `keyboard` option to false</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">modal</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">Default</span><span class="p">.</span><span class="nx">keyboard</span> <span class="o">=</span> <span class="kc">false</span></code></pre></figure>
|
||||
|
||||
<h2 id="no-conflict">No conflict</h2>
|
||||
|
||||
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code class="highlighter-rouge">.noConflict</code> on the plugin you wish to revert the value of.</p>
|
||||
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code class="language-plaintext highlighter-rouge">.noConflict</code> on the plugin you wish to revert the value of.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">bootstrapButton</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">button</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">()</span> <span class="c1">// return $.fn.button to previously assigned value</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapBtn</span> <span class="o">=</span> <span class="nx">bootstrapButton</span> <span class="c1">// give $().bootstrapBtn the Bootstrap functionality</span></code></pre></figure>
|
||||
|
||||
<h2 id="version-numbers">Version numbers</h2>
|
||||
|
||||
<p>The version of each of Bootstrap’s jQuery plugins can be accessed via the <code class="highlighter-rouge">VERSION</code> property of the plugin’s constructor. For example, for the tooltip plugin:</p>
|
||||
<p>The version of each of Bootstrap’s jQuery plugins can be accessed via the <code class="language-plaintext highlighter-rouge">VERSION</code> property of the plugin’s constructor. For example, for the tooltip plugin:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">VERSION</span> <span class="c1">// => "4.5.0"</span></code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">VERSION</span> <span class="c1">// => "4.5.1"</span></code></pre></figure>
|
||||
|
||||
<h2 id="no-special-fallbacks-when-javascript-is-disabled">No special fallbacks when JavaScript is disabled</h2>
|
||||
|
||||
<p>Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code class="highlighter-rouge"><noscript></code></a> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.</p>
|
||||
<p>Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code class="language-plaintext highlighter-rouge"><noscript></code></a> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="third-party-libraries">Third-party libraries</h5>
|
||||
|
||||
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code class="highlighter-rouge">.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.</p>
|
||||
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code class="language-plaintext highlighter-rouge">.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="util">Util</h2>
|
||||
|
||||
<p>All Bootstrap’s JavaScript files depend on <code class="highlighter-rouge">util.js</code> and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) <code class="highlighter-rouge">bootstrap.js</code>, there is no need to include this—it’s already there.</p>
|
||||
<p>All Bootstrap’s JavaScript files depend on <code class="language-plaintext highlighter-rouge">util.js</code> and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) <code class="language-plaintext highlighter-rouge">bootstrap.js</code>, there is no need to include this—it’s already there.</p>
|
||||
|
||||
<p><code class="highlighter-rouge">util.js</code> includes utility functions and a basic helper for <code class="highlighter-rouge">transitionEnd</code> events as well as a CSS transition emulator. It’s used by the other plugins to check for CSS transition support and to catch hanging transitions.</p>
|
||||
<p><code class="language-plaintext highlighter-rouge">util.js</code> includes utility functions and a basic helper for <code class="language-plaintext highlighter-rouge">transitionEnd</code> events as well as a CSS transition emulator. It’s used by the other plugins to check for CSS transition support and to catch hanging transitions.</p>
|
||||
|
||||
<h2 id="sanitizer">Sanitizer</h2>
|
||||
|
||||
<p>Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML.</p>
|
||||
|
||||
<p>The default <code class="highlighter-rouge">whiteList</code> value is the following:</p>
|
||||
<p>The default <code class="language-plaintext highlighter-rouge">whiteList</code> value is the following:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">ARIA_ATTRIBUTE_PATTERN</span> <span class="o">=</span> <span class="sr">/^aria-</span><span class="se">[\w</span><span class="sr">-</span><span class="se">]</span><span class="sr">*$/i</span>
|
||||
<span class="kd">var</span> <span class="nx">DefaultWhitelist</span> <span class="o">=</span> <span class="p">{</span>
|
||||
@ -645,7 +649,7 @@ If you use special selectors, for example: <code class="highlighter-rouge">colla
|
||||
<span class="na">ul</span><span class="p">:</span> <span class="p">[]</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>If you want to add new values to this default <code class="highlighter-rouge">whiteList</code> you can do the following:</p>
|
||||
<p>If you want to add new values to this default <code class="language-plaintext highlighter-rouge">whiteList</code> you can do the following:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myDefaultWhiteList</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">Default</span><span class="p">.</span><span class="nx">whiteList</span>
|
||||
|
||||
@ -674,6 +678,6 @@ If you use special selectors, for example: <code class="highlighter-rouge">colla
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/getting-started/theming/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -517,13 +518,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/getting-started/theming.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Theming Bootstrap</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="introduction">Introduction</h2>
|
||||
|
||||
<p>In Bootstrap 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme stylesheet that we included in our <code class="highlighter-rouge">dist</code> files. With some effort, one could completely redesign the look of Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar, but slightly different approach.</p>
|
||||
<p>In Bootstrap 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme stylesheet that we included in our <code class="language-plaintext highlighter-rouge">dist</code> files. With some effort, one could completely redesign the look of Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar, but slightly different approach.</p>
|
||||
|
||||
<p>Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There’s no more dedicated theme stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more.</p>
|
||||
|
||||
@ -554,7 +558,7 @@
|
||||
|
||||
<h3 id="importing">Importing</h3>
|
||||
|
||||
<p>In your <code class="highlighter-rouge">custom.scss</code>, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.</p>
|
||||
<p>In your <code class="language-plaintext highlighter-rouge">custom.scss</code>, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss</span>
|
||||
<span class="c1">// Option A: Include all of Bootstrap</span>
|
||||
@ -576,17 +580,17 @@
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/code"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/grid"</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<p>With that setup in place, you can begin to modify any of the Sass variables and maps in your <code class="highlighter-rouge">custom.scss</code>. You can also start to add parts of Bootstrap under the <code class="highlighter-rouge">// Optional</code> section as needed. We suggest using the full import stack from our <code class="highlighter-rouge">bootstrap.scss</code> file as your starting point.</p>
|
||||
<p>With that setup in place, you can begin to modify any of the Sass variables and maps in your <code class="language-plaintext highlighter-rouge">custom.scss</code>. You can also start to add parts of Bootstrap under the <code class="language-plaintext highlighter-rouge">// Optional</code> section as needed. We suggest using the full import stack from our <code class="language-plaintext highlighter-rouge">bootstrap.scss</code> file as your starting point.</p>
|
||||
|
||||
<h3 id="variable-defaults">Variable defaults</h3>
|
||||
|
||||
<p>Every Sass variable in Bootstrap 4 includes the <code class="highlighter-rouge">!default</code> flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the <code class="highlighter-rouge">!default</code> flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.</p>
|
||||
<p>Every Sass variable in Bootstrap 4 includes the <code class="language-plaintext highlighter-rouge">!default</code> flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the <code class="language-plaintext highlighter-rouge">!default</code> flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.</p>
|
||||
|
||||
<p>You will find the complete list of Bootstrap’s variables in <code class="highlighter-rouge">scss/_variables.scss</code>. Some variables are set to <code class="highlighter-rouge">null</code>, these variables don’t output the property unless they are overridden in your configuration.</p>
|
||||
<p>You will find the complete list of Bootstrap’s variables in <code class="language-plaintext highlighter-rouge">scss/_variables.scss</code>. Some variables are set to <code class="language-plaintext highlighter-rouge">null</code>, these variables don’t output the property unless they are overridden in your configuration.</p>
|
||||
|
||||
<p>Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.</p>
|
||||
|
||||
<p>Here’s an example that changes the <code class="highlighter-rouge">background-color</code> and <code class="highlighter-rouge">color</code> for the <code class="highlighter-rouge"><body></code> when importing and compiling Bootstrap via npm:</p>
|
||||
<p>Here’s an example that changes the <code class="language-plaintext highlighter-rouge">background-color</code> and <code class="language-plaintext highlighter-rouge">color</code> for the <code class="language-plaintext highlighter-rouge"><body></code> when importing and compiling Bootstrap via npm:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Your variable overrides</span>
|
||||
<span class="nv">$body-bg</span><span class="p">:</span> <span class="mh">#000</span><span class="p">;</span>
|
||||
@ -599,13 +603,13 @@
|
||||
|
||||
<h3 id="maps-and-loops">Maps and loops</h3>
|
||||
|
||||
<p>Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the <code class="highlighter-rouge">!default</code> flag and can be overridden and extended.</p>
|
||||
<p>Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the <code class="language-plaintext highlighter-rouge">!default</code> flag and can be overridden and extended.</p>
|
||||
|
||||
<p>Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making <em>removing</em> items from a map slightly more difficult.</p>
|
||||
|
||||
<h4 id="modify-map">Modify map</h4>
|
||||
|
||||
<p>To modify an existing color in our <code class="highlighter-rouge">$theme-colors</code> map, add the following to your custom Sass file:</p>
|
||||
<p>To modify an existing color in our <code class="language-plaintext highlighter-rouge">$theme-colors</code> map, add the following to your custom Sass file:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="s2">"primary"</span><span class="o">:</span> <span class="mh">#0074d9</span><span class="o">,</span>
|
||||
@ -614,7 +618,7 @@
|
||||
|
||||
<h4 id="add-to-map">Add to map</h4>
|
||||
|
||||
<p>To add a new color to <code class="highlighter-rouge">$theme-colors</code>, add the new key and value:</p>
|
||||
<p>To add a new color to <code class="language-plaintext highlighter-rouge">$theme-colors</code>, add the new key and value:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#900</span>
|
||||
@ -622,7 +626,7 @@
|
||||
|
||||
<h4 id="remove-from-map">Remove from map</h4>
|
||||
|
||||
<p>To remove colors from <code class="highlighter-rouge">$theme-colors</code>, or any other map, use <code class="highlighter-rouge">map-remove</code>. Be aware you must insert it between our requirements and options:</p>
|
||||
<p>To remove colors from <code class="language-plaintext highlighter-rouge">$theme-colors</code>, or any other map, use <code class="language-plaintext highlighter-rouge">map-remove</code>. Be aware you must insert it between our requirements and options:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Required</span>
|
||||
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/functions"</span><span class="p">;</span>
|
||||
@ -641,7 +645,7 @@
|
||||
|
||||
<p>Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map’s key is being used.</p>
|
||||
|
||||
<p>For example, we use the <code class="highlighter-rouge">primary</code>, <code class="highlighter-rouge">success</code>, and <code class="highlighter-rouge">danger</code> keys from <code class="highlighter-rouge">$theme-colors</code> for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you’ll need to modify the Sass code that makes use of those values.</p>
|
||||
<p>For example, we use the <code class="language-plaintext highlighter-rouge">primary</code>, <code class="language-plaintext highlighter-rouge">success</code>, and <code class="language-plaintext highlighter-rouge">danger</code> keys from <code class="language-plaintext highlighter-rouge">$theme-colors</code> for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you’ll need to modify the Sass code that makes use of those values.</p>
|
||||
|
||||
<h3 id="functions">Functions</h3>
|
||||
|
||||
@ -666,7 +670,7 @@
|
||||
<span class="nl">background-color</span><span class="p">:</span> <span class="nf">theme-color</span><span class="p">(</span><span class="s2">"dark"</span><span class="p">);</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>We also have another function for getting a particular <em>level</em> of color from the <code class="highlighter-rouge">$theme-colors</code> map. Negative level values will lighten the color, while higher levels will darken.</p>
|
||||
<p>We also have another function for getting a particular <em>level</em> of color from the <code class="language-plaintext highlighter-rouge">$theme-colors</code> map. Negative level values will lighten the color, while higher levels will darken.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@function</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color-name</span><span class="o">:</span> <span class="s2">"primary"</span><span class="o">,</span> <span class="nv">$level</span><span class="o">:</span> <span class="m">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nv">$color</span><span class="p">:</span> <span class="nf">theme-color</span><span class="p">(</span><span class="nv">$color-name</span><span class="p">);</span>
|
||||
@ -676,7 +680,7 @@
|
||||
<span class="k">@return</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$color-base</span><span class="o">,</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$level</span> <span class="o">*</span> <span class="nv">$theme-color-interval</span><span class="p">);</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>In practice, you’d call the function and pass in two parameters: the name of the color from <code class="highlighter-rouge">$theme-colors</code> (e.g., primary or danger) and a numeric level.</p>
|
||||
<p>In practice, you’d call the function and pass in two parameters: the name of the color from <code class="language-plaintext highlighter-rouge">$theme-colors</code> (e.g., primary or danger) and a numeric level.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
|
||||
<span class="nl">color</span><span class="p">:</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="n">primary</span><span class="o">,</span> <span class="m">-10</span><span class="p">);</span>
|
||||
@ -686,9 +690,9 @@
|
||||
|
||||
<h4 id="color-contrast">Color contrast</h4>
|
||||
|
||||
<p>An additional function we include in Bootstrap is the color contrast function, <code class="highlighter-rouge">color-yiq</code>. It utilizes the <a href="https://en.wikipedia.org/wiki/YIQ">YIQ color space</a> to automatically return a light (<code class="highlighter-rouge">#fff</code>) or dark (<code class="highlighter-rouge">#111</code>) contrast color based on the specified base color. This function is especially useful for mixins or loops where you’re generating multiple classes.</p>
|
||||
<p>An additional function we include in Bootstrap is the color contrast function, <code class="language-plaintext highlighter-rouge">color-yiq</code>. It utilizes the <a href="https://en.wikipedia.org/wiki/YIQ">YIQ color space</a> to automatically return a light (<code class="language-plaintext highlighter-rouge">#fff</code>) or dark (<code class="language-plaintext highlighter-rouge">#111</code>) contrast color based on the specified base color. This function is especially useful for mixins or loops where you’re generating multiple classes.</p>
|
||||
|
||||
<p>For example, to generate color swatches from our <code class="highlighter-rouge">$theme-colors</code> map:</p>
|
||||
<p>For example, to generate color swatches from our <code class="language-plaintext highlighter-rouge">$theme-colors</code> map:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
|
||||
<span class="nc">.swatch-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
|
||||
@ -710,11 +714,11 @@
|
||||
|
||||
<h4 id="escape-svg">Escape SVG</h4>
|
||||
|
||||
<p>We use the <code class="highlighter-rouge">escape-svg</code> function to escape the <code class="highlighter-rouge"><</code>, <code class="highlighter-rouge">></code> and <code class="highlighter-rouge">#</code> characters for SVG background images. These characters need to be escaped to properly render the background images in IE.</p>
|
||||
<p>We use the <code class="language-plaintext highlighter-rouge">escape-svg</code> function to escape the <code class="language-plaintext highlighter-rouge"><</code>, <code class="language-plaintext highlighter-rouge">></code> and <code class="language-plaintext highlighter-rouge">#</code> characters for SVG background images. These characters need to be escaped to properly render the background images in IE.</p>
|
||||
|
||||
<h4 id="add-and-subtract-functions">Add and Subtract functions</h4>
|
||||
|
||||
<p>We use the <code class="highlighter-rouge">add</code> and <code class="highlighter-rouge">subtract</code> functions to wrap the CSS <code class="highlighter-rouge">calc</code> function. The primary purpose of these functions is to avoid errors when a “unitless” <code class="highlighter-rouge">0</code> value is passed into a <code class="highlighter-rouge">calc</code> expression. Expressions like <code class="highlighter-rouge">calc(10px - 0)</code> will return an error in all browsers, despite being mathematically correct.</p>
|
||||
<p>We use the <code class="language-plaintext highlighter-rouge">add</code> and <code class="language-plaintext highlighter-rouge">subtract</code> functions to wrap the CSS <code class="language-plaintext highlighter-rouge">calc</code> function. The primary purpose of these functions is to avoid errors when a “unitless” <code class="language-plaintext highlighter-rouge">0</code> value is passed into a <code class="language-plaintext highlighter-rouge">calc</code> expression. Expressions like <code class="language-plaintext highlighter-rouge">calc(10px - 0)</code> will return an error in all browsers, despite being mathematically correct.</p>
|
||||
|
||||
<p>Example where the calc is valid:</p>
|
||||
|
||||
@ -748,9 +752,9 @@
|
||||
|
||||
<h2 id="sass-options">Sass options</h2>
|
||||
|
||||
<p>Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new <code class="highlighter-rouge">$enable-*</code> Sass variables. Override a variable’s value and recompile with <code class="highlighter-rouge">npm run test</code> as needed.</p>
|
||||
<p>Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new <code class="language-plaintext highlighter-rouge">$enable-*</code> Sass variables. Override a variable’s value and recompile with <code class="language-plaintext highlighter-rouge">npm run test</code> as needed.</p>
|
||||
|
||||
<p>You can find and customize these variables for key global options in Bootstrap’s <code class="highlighter-rouge">scss/_variables.scss</code> file.</p>
|
||||
<p>You can find and customize these variables for key global options in Bootstrap’s <code class="language-plaintext highlighter-rouge">scss/_variables.scss</code> file.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
@ -762,74 +766,74 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$spacer</code></td>
|
||||
<td><code class="highlighter-rouge">1rem</code> (default), or any value > 0</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$spacer</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">1rem</code> (default), or any value > 0</td>
|
||||
<td>Specifies the default spacer value to programmatically generate our <a href="/docs/4.5/utilities/spacing/">spacer utilities</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-rounded</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||||
<td>Enables predefined <code class="highlighter-rouge">border-radius</code> styles on various components.</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-rounded</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> (default) or <code class="language-plaintext highlighter-rouge">false</code></td>
|
||||
<td>Enables predefined <code class="language-plaintext highlighter-rouge">border-radius</code> styles on various components.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-shadows</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
|
||||
<td>Enables predefined <code class="highlighter-rouge">box-shadow</code> styles on various components.</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-shadows</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> or <code class="language-plaintext highlighter-rouge">false</code> (default)</td>
|
||||
<td>Enables predefined <code class="language-plaintext highlighter-rouge">box-shadow</code> styles on various components.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-gradients</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
|
||||
<td>Enables predefined gradients via <code class="highlighter-rouge">background-image</code> styles on various components.</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-gradients</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> or <code class="language-plaintext highlighter-rouge">false</code> (default)</td>
|
||||
<td>Enables predefined gradients via <code class="language-plaintext highlighter-rouge">background-image</code> styles on various components.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-transitions</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||||
<td>Enables predefined <code class="highlighter-rouge">transition</code>s on various components.</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-transitions</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> (default) or <code class="language-plaintext highlighter-rouge">false</code></td>
|
||||
<td>Enables predefined <code class="language-plaintext highlighter-rouge">transition</code>s on various components.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-prefers-reduced-motion-media-query</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||||
<td>Enables the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion"><code class="highlighter-rouge">prefers-reduced-motion</code> media query</a>, which suppresses certain animations/transitions based on the users’ browser/operating system preferences.</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-prefers-reduced-motion-media-query</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> (default) or <code class="language-plaintext highlighter-rouge">false</code></td>
|
||||
<td>Enables the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion"><code class="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media query</a>, which suppresses certain animations/transitions based on the users’ browser/operating system preferences.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-hover-media-query</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-hover-media-query</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> or <code class="language-plaintext highlighter-rouge">false</code> (default)</td>
|
||||
<td><strong>Deprecated</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-grid-classes</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||||
<td>Enables the generation of CSS classes for the grid system (e.g., <code class="highlighter-rouge">.container</code>, <code class="highlighter-rouge">.row</code>, <code class="highlighter-rouge">.col-md-1</code>, etc.).</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-grid-classes</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> (default) or <code class="language-plaintext highlighter-rouge">false</code></td>
|
||||
<td>Enables the generation of CSS classes for the grid system (e.g., <code class="language-plaintext highlighter-rouge">.container</code>, <code class="language-plaintext highlighter-rouge">.row</code>, <code class="language-plaintext highlighter-rouge">.col-md-1</code>, etc.).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-caret</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||||
<td>Enables pseudo element caret on <code class="highlighter-rouge">.dropdown-toggle</code>.</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-caret</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> (default) or <code class="language-plaintext highlighter-rouge">false</code></td>
|
||||
<td>Enables pseudo element caret on <code class="language-plaintext highlighter-rouge">.dropdown-toggle</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-pointer-cursor-for-buttons</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-pointer-cursor-for-buttons</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> (default) or <code class="language-plaintext highlighter-rouge">false</code></td>
|
||||
<td>Add “hand” cursor to non-disabled button elements.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-print-styles</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-print-styles</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> (default) or <code class="language-plaintext highlighter-rouge">false</code></td>
|
||||
<td>Enables styles for optimizing printing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-responsive-font-sizes</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-responsive-font-sizes</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> or <code class="language-plaintext highlighter-rouge">false</code> (default)</td>
|
||||
<td>Enables <a href="/docs/4.5/content/typography/#responsive-font-sizes">responsive font sizes</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-validation-icons</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||||
<td>Enables <code class="highlighter-rouge">background-image</code> icons within textual inputs and some custom forms for validation states.</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-validation-icons</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> (default) or <code class="language-plaintext highlighter-rouge">false</code></td>
|
||||
<td>Enables <code class="language-plaintext highlighter-rouge">background-image</code> icons within textual inputs and some custom forms for validation states.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-deprecation-messages</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
|
||||
<td>Set to <code class="highlighter-rouge">true</code> to show warnings when using any of the deprecated mixins and functions that are planned to be removed in <code class="highlighter-rouge">v5</code>.</td>
|
||||
<td><code class="language-plaintext highlighter-rouge">$enable-deprecation-messages</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">true</code> or <code class="language-plaintext highlighter-rouge">false</code> (default)</td>
|
||||
<td>Set to <code class="language-plaintext highlighter-rouge">true</code> to show warnings when using any of the deprecated mixins and functions that are planned to be removed in <code class="language-plaintext highlighter-rouge">v5</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -840,7 +844,7 @@
|
||||
|
||||
<h3 id="all-colors">All colors</h3>
|
||||
|
||||
<p>All colors available in Bootstrap 4, are available as Sass variables and a Sass map in <code class="highlighter-rouge">scss/_variables.scss</code> file. This will be expanded upon in subsequent minor releases to add additional shades, much like the <a href="#grays">grayscale palette</a> we already include.</p>
|
||||
<p>All colors available in Bootstrap 4, are available as Sass variables and a Sass map in <code class="language-plaintext highlighter-rouge">scss/_variables.scss</code> file. This will be expanded upon in subsequent minor releases to add additional shades, much like the <a href="#grays">grayscale palette</a> we already include.</p>
|
||||
|
||||
<div class="row">
|
||||
|
||||
@ -920,7 +924,7 @@
|
||||
<span class="c1">// From the Sass map with our `color()` function</span>
|
||||
<span class="nc">.beta</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nf">color</span><span class="p">(</span><span class="s2">"purple"</span><span class="p">);</span> <span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p><a href="/docs/4.5/utilities/colors/">Color utility classes</a> are also available for setting <code class="highlighter-rouge">color</code> and <code class="highlighter-rouge">background-color</code>.</p>
|
||||
<p><a href="/docs/4.5/utilities/colors/">Color utility classes</a> are also available for setting <code class="language-plaintext highlighter-rouge">color</code> and <code class="language-plaintext highlighter-rouge">background-color</code>.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>In the future, we’ll aim to provide Sass maps and variables for shades of each color as we’ve done with the grayscale colors below.</p>
|
||||
@ -928,7 +932,7 @@
|
||||
|
||||
<h3 id="theme-colors">Theme colors</h3>
|
||||
|
||||
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code class="highlighter-rouge">scss/_variables.scss</code> file.</p>
|
||||
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s <code class="language-plaintext highlighter-rouge">scss/_variables.scss</code> file.</p>
|
||||
|
||||
<div class="row">
|
||||
|
||||
@ -968,7 +972,7 @@
|
||||
|
||||
<h3 id="grays">Grays</h3>
|
||||
|
||||
<p>An expansive set of gray variables and a Sass map in <code class="highlighter-rouge">scss/_variables.scss</code> for consistent shades of gray across your project. Note that these are “cool grays”, which tend towards a subtle blue tone, rather than neutral grays.</p>
|
||||
<p>An expansive set of gray variables and a Sass map in <code class="language-plaintext highlighter-rouge">scss/_variables.scss</code> for consistent shades of gray across your project. Note that these are “cool grays”, which tend towards a subtle blue tone, rather than neutral grays.</p>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4">
|
||||
@ -994,7 +998,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Within <code class="highlighter-rouge">scss/_variables.scss</code>, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the <code class="highlighter-rouge">$colors</code> Sass map:</p>
|
||||
<p>Within <code class="language-plaintext highlighter-rouge">scss/_variables.scss</code>, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the <code class="language-plaintext highlighter-rouge">$colors</code> Sass map:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$colors</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="s2">"blue"</span><span class="o">:</span> <span class="nv">$blue</span><span class="o">,</span>
|
||||
@ -1012,17 +1016,17 @@
|
||||
<span class="s2">"gray-dark"</span><span class="o">:</span> <span class="nv">$gray-800</span>
|
||||
<span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<p>Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not <em>every</em> component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the <code class="highlighter-rouge">${color}</code> variables and this Sass map.</p>
|
||||
<p>Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not <em>every</em> component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the <code class="language-plaintext highlighter-rouge">${color}</code> variables and this Sass map.</p>
|
||||
|
||||
<h2 id="components">Components</h2>
|
||||
|
||||
<p>Many of Bootstrap’s components and utilities are built with <code class="highlighter-rouge">@each</code> loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our <code class="highlighter-rouge">$theme-colors</code> and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.</p>
|
||||
<p>Many of Bootstrap’s components and utilities are built with <code class="language-plaintext highlighter-rouge">@each</code> loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our <code class="language-plaintext highlighter-rouge">$theme-colors</code> and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.</p>
|
||||
|
||||
<h3 id="modifiers">Modifiers</h3>
|
||||
|
||||
<p>Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., <code class="highlighter-rouge">.btn</code>) while style variations are confined to modifier classes (e.g., <code class="highlighter-rouge">.btn-danger</code>). These modifier classes are built from the <code class="highlighter-rouge">$theme-colors</code> map to make customizing the number and name of our modifier classes.</p>
|
||||
<p>Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., <code class="language-plaintext highlighter-rouge">.btn</code>) while style variations are confined to modifier classes (e.g., <code class="language-plaintext highlighter-rouge">.btn-danger</code>). These modifier classes are built from the <code class="language-plaintext highlighter-rouge">$theme-colors</code> map to make customizing the number and name of our modifier classes.</p>
|
||||
|
||||
<p>Here are two examples of how we loop over the <code class="highlighter-rouge">$theme-colors</code> map to generate modifiers to the <code class="highlighter-rouge">.alert</code> component and all our <code class="highlighter-rouge">.bg-*</code> background utilities.</p>
|
||||
<p>Here are two examples of how we loop over the <code class="language-plaintext highlighter-rouge">$theme-colors</code> map to generate modifiers to the <code class="language-plaintext highlighter-rouge">.alert</code> component and all our <code class="language-plaintext highlighter-rouge">.bg-*</code> background utilities.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Generate alert modifier classes</span>
|
||||
<span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
|
||||
@ -1038,7 +1042,7 @@
|
||||
|
||||
<h3 id="responsive">Responsive</h3>
|
||||
|
||||
<p>These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an <code class="highlighter-rouge">@each</code> loop for the <code class="highlighter-rouge">$grid-breakpoints</code> Sass map with a media query include.</p>
|
||||
<p>These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an <code class="language-plaintext highlighter-rouge">@each</code> loop for the <code class="language-plaintext highlighter-rouge">$grid-breakpoints</code> Sass map with a media query include.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$breakpoint</span> <span class="n">in</span> <span class="nf">map-keys</span><span class="p">(</span><span class="nv">$grid-breakpoints</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -1050,7 +1054,7 @@
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>Should you need to modify your <code class="highlighter-rouge">$grid-breakpoints</code>, your changes will apply to all the loops iterating over that map.</p>
|
||||
<p>Should you need to modify your <code class="language-plaintext highlighter-rouge">$grid-breakpoints</code>, your changes will apply to all the loops iterating over that map.</p>
|
||||
|
||||
<h2 id="css-variables">CSS variables</h2>
|
||||
|
||||
@ -1058,7 +1062,7 @@
|
||||
|
||||
<h3 id="available-variables">Available variables</h3>
|
||||
|
||||
<p>Here are the variables we include (note that the <code class="highlighter-rouge">:root</code> is required). They’re located in our <code class="highlighter-rouge">_root.scss</code> file.</p>
|
||||
<p>Here are the variables we include (note that the <code class="language-plaintext highlighter-rouge">:root</code> is required). They’re located in our <code class="language-plaintext highlighter-rouge">_root.scss</code> file.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nd">:root</span> <span class="p">{</span>
|
||||
<span class="py">--blue</span><span class="p">:</span> <span class="m">#007bff</span><span class="p">;</span>
|
||||
@ -1104,7 +1108,7 @@
|
||||
|
||||
<h3 id="breakpoint-variables">Breakpoint variables</h3>
|
||||
|
||||
<p>While we originally included breakpoints in our CSS variables (e.g., <code class="highlighter-rouge">--breakpoint-md</code>), <strong>these are not supported in media queries</strong>, but they can still be used <em>within</em> rulesets in media queries. These breakpoint variables remain in the compiled CSS for backward compatibility given they can be utilized by JavaScript. <a href="https://www.w3.org/TR/css-variables-1/#using-variables">Learn more in the spec</a>.</p>
|
||||
<p>While we originally included breakpoints in our CSS variables (e.g., <code class="language-plaintext highlighter-rouge">--breakpoint-md</code>), <strong>these are not supported in media queries</strong>, but they can still be used <em>within</em> rulesets in media queries. These breakpoint variables remain in the compiled CSS for backward compatibility given they can be utilized by JavaScript. <a href="https://www.w3.org/TR/css-variables-1/#using-variables">Learn more in the spec</a>.</p>
|
||||
|
||||
<p>Here’s an example of <strong>what’s not supported:</strong></p>
|
||||
|
||||
@ -1126,6 +1130,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn how to include Bootstrap in your project using Webpack.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/getting-started/webpack/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -481,7 +482,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/getting-started/webpack.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Webpack</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Learn how to include Bootstrap in your project using Webpack.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -491,7 +495,7 @@
|
||||
|
||||
<h2 id="importing-javascript">Importing JavaScript</h2>
|
||||
|
||||
<p>Import <a href="/docs/4.5/getting-started/javascript/">Bootstrap’s JavaScript</a> by adding this line to your app’s entry point (usually <code class="highlighter-rouge">index.js</code> or <code class="highlighter-rouge">app.js</code>):</p>
|
||||
<p>Import <a href="/docs/4.5/getting-started/javascript/">Bootstrap’s JavaScript</a> by adding this line to your app’s entry point (usually <code class="language-plaintext highlighter-rouge">index.js</code> or <code class="language-plaintext highlighter-rouge">app.js</code>):</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">import</span> <span class="dl">'</span><span class="s1">bootstrap</span><span class="dl">'</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
@ -502,8 +506,8 @@
|
||||
<span class="p">...</span></code></pre></figure>
|
||||
|
||||
<p>Bootstrap depends on <a href="https://jquery.com/">jQuery</a> and <a href="https://popper.js.org/">Popper</a>,
|
||||
which are specified in the <code class="highlighter-rouge">peerDependencies</code> property; this means that you will have to make sure to add both of them
|
||||
to your <code class="highlighter-rouge">package.json</code> using <code class="highlighter-rouge">npm install --save jquery popper.js</code>.</p>
|
||||
which are specified in the <code class="language-plaintext highlighter-rouge">peerDependencies</code> property; this means that you will have to make sure to add both of them
|
||||
to your <code class="language-plaintext highlighter-rouge">package.json</code> using <code class="language-plaintext highlighter-rouge">npm install --save jquery popper.js</code>.</p>
|
||||
|
||||
<h2 id="importing-styles">Importing Styles</h2>
|
||||
|
||||
@ -511,7 +515,7 @@ to your <code class="highlighter-rouge">package.json</code> using <code class="h
|
||||
|
||||
<p>To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project’s bundling process.</p>
|
||||
|
||||
<p>First, create your own <code class="highlighter-rouge">_custom.scss</code> and use it to override the <a href="/docs/4.5/getting-started/theming/">built-in custom variables</a>. Then, use your main Sass file to import your custom variables, followed by Bootstrap:</p>
|
||||
<p>First, create your own <code class="language-plaintext highlighter-rouge">_custom.scss</code> and use it to override the <a href="/docs/4.5/getting-started/theming/">built-in custom variables</a>. Then, use your main Sass file to import your custom variables, followed by Bootstrap:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@import</span> <span class="s2">"custom"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"~bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre></figure>
|
||||
@ -546,7 +550,7 @@ to your <code class="highlighter-rouge">package.json</code> using <code class="h
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">import</span> <span class="dl">'</span><span class="s1">bootstrap/dist/css/bootstrap.min.css</span><span class="dl">'</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<p>In this case you may use your existing rule for <code class="highlighter-rouge">css</code> without any special modifications to webpack config, except you don’t need <code class="highlighter-rouge">sass-loader</code> just <a href="https://github.com/webpack-contrib/style-loader">style-loader</a> and <a href="https://github.com/webpack-contrib/css-loader">css-loader</a>.</p>
|
||||
<p>In this case you may use your existing rule for <code class="language-plaintext highlighter-rouge">css</code> without any special modifications to webpack config, except you don’t need <code class="language-plaintext highlighter-rouge">sass-loader</code> just <a href="https://github.com/webpack-contrib/style-loader">style-loader</a> and <a href="https://github.com/webpack-contrib/css-loader">css-loader</a>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="p">...</span>
|
||||
<span class="nx">module</span><span class="p">:</span> <span class="p">{</span>
|
||||
@ -565,6 +569,6 @@ to your <code class="highlighter-rouge">package.json</code> using <code class="h
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/layout/grid/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -526,7 +527,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/layout/grid.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Grid system</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -569,28 +573,28 @@
|
||||
|
||||
</div>
|
||||
|
||||
<p>The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent <code class="highlighter-rouge">.container</code>.</p>
|
||||
<p>The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent <code class="language-plaintext highlighter-rouge">.container</code>.</p>
|
||||
|
||||
<p>Breaking it down, here’s how it works:</p>
|
||||
|
||||
<ul>
|
||||
<li>Containers provide a means to center and horizontally pad your site’s contents. Use <code class="highlighter-rouge">.container</code> for a responsive pixel width or <code class="highlighter-rouge">.container-fluid</code> for <code class="highlighter-rouge">width: 100%</code> across all viewport and device sizes.</li>
|
||||
<li>Rows are wrappers for columns. Each column has horizontal <code class="highlighter-rouge">padding</code> (called a gutter) for controlling the space between them. This <code class="highlighter-rouge">padding</code> is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.</li>
|
||||
<li>Containers provide a means to center and horizontally pad your site’s contents. Use <code class="language-plaintext highlighter-rouge">.container</code> for a responsive pixel width or <code class="language-plaintext highlighter-rouge">.container-fluid</code> for <code class="language-plaintext highlighter-rouge">width: 100%</code> across all viewport and device sizes.</li>
|
||||
<li>Rows are wrappers for columns. Each column has horizontal <code class="language-plaintext highlighter-rouge">padding</code> (called a gutter) for controlling the space between them. This <code class="language-plaintext highlighter-rouge">padding</code> is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.</li>
|
||||
<li>In a grid layout, content must be placed within columns and only columns may be immediate children of rows.</li>
|
||||
<li>Thanks to flexbox, grid columns without a specified <code class="highlighter-rouge">width</code> will automatically layout as equal width columns. For example, four instances of <code class="highlighter-rouge">.col-sm</code> will each automatically be 25% wide from the small breakpoint and up. See the <a href="#auto-layout-columns">auto-layout columns</a> section for more examples.</li>
|
||||
<li>Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use <code class="highlighter-rouge">.col-4</code>.</li>
|
||||
<li>Column <code class="highlighter-rouge">width</code>s are set in percentages, so they’re always fluid and sized relative to their parent element.</li>
|
||||
<li>Columns have horizontal <code class="highlighter-rouge">padding</code> to create the gutters between individual columns, however, you can remove the <code class="highlighter-rouge">margin</code> from rows and <code class="highlighter-rouge">padding</code> from columns with <code class="highlighter-rouge">.no-gutters</code> on the <code class="highlighter-rouge">.row</code>.</li>
|
||||
<li>Thanks to flexbox, grid columns without a specified <code class="language-plaintext highlighter-rouge">width</code> will automatically layout as equal width columns. For example, four instances of <code class="language-plaintext highlighter-rouge">.col-sm</code> will each automatically be 25% wide from the small breakpoint and up. See the <a href="#auto-layout-columns">auto-layout columns</a> section for more examples.</li>
|
||||
<li>Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use <code class="language-plaintext highlighter-rouge">.col-4</code>.</li>
|
||||
<li>Column <code class="language-plaintext highlighter-rouge">width</code>s are set in percentages, so they’re always fluid and sized relative to their parent element.</li>
|
||||
<li>Columns have horizontal <code class="language-plaintext highlighter-rouge">padding</code> to create the gutters between individual columns, however, you can remove the <code class="language-plaintext highlighter-rouge">margin</code> from rows and <code class="language-plaintext highlighter-rouge">padding</code> from columns with <code class="language-plaintext highlighter-rouge">.no-gutters</code> on the <code class="language-plaintext highlighter-rouge">.row</code>.</li>
|
||||
<li>To make the grid responsive, there are five grid breakpoints, one for each <a href="/docs/4.5/layout/overview/#responsive-breakpoints">responsive breakpoint</a>: all breakpoints (extra small), small, medium, large, and extra large.</li>
|
||||
<li>Grid breakpoints are based on minimum width media queries, meaning <strong>they apply to that one breakpoint and all those above it</strong> (e.g., <code class="highlighter-rouge">.col-sm-4</code> applies to small, medium, large, and extra large devices, but not the first <code class="highlighter-rouge">xs</code> breakpoint).</li>
|
||||
<li>You can use predefined grid classes (like <code class="highlighter-rouge">.col-4</code>) or <a href="#sass-mixins">Sass mixins</a> for more semantic markup.</li>
|
||||
<li>Grid breakpoints are based on minimum width media queries, meaning <strong>they apply to that one breakpoint and all those above it</strong> (e.g., <code class="language-plaintext highlighter-rouge">.col-sm-4</code> applies to small, medium, large, and extra large devices, but not the first <code class="language-plaintext highlighter-rouge">xs</code> breakpoint).</li>
|
||||
<li>You can use predefined grid classes (like <code class="language-plaintext highlighter-rouge">.col-4</code>) or <a href="#sass-mixins">Sass mixins</a> for more semantic markup.</li>
|
||||
</ul>
|
||||
|
||||
<p>Be aware of the limitations and <a href="https://github.com/philipwalton/flexbugs">bugs around flexbox</a>, like the <a href="https://github.com/philipwalton/flexbugs#flexbug-9">inability to use some HTML elements as flex containers</a>.</p>
|
||||
|
||||
<h2 id="grid-options">Grid options</h2>
|
||||
|
||||
<p>While Bootstrap uses <code class="highlighter-rouge">em</code>s or <code class="highlighter-rouge">rem</code>s for defining most sizes, <code class="highlighter-rouge">px</code>s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the <a href="https://drafts.csswg.org/mediaqueries-3/#units">font size</a>.</p>
|
||||
<p>While Bootstrap uses <code class="language-plaintext highlighter-rouge">em</code>s or <code class="language-plaintext highlighter-rouge">rem</code>s for defining most sizes, <code class="language-plaintext highlighter-rouge">px</code>s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the <a href="https://drafts.csswg.org/mediaqueries-3/#units">font size</a>.</p>
|
||||
|
||||
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
|
||||
|
||||
@ -658,11 +662,11 @@
|
||||
|
||||
<h2 id="auto-layout-columns">Auto-layout columns</h2>
|
||||
|
||||
<p>Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like <code class="highlighter-rouge">.col-sm-6</code>.</p>
|
||||
<p>Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like <code class="language-plaintext highlighter-rouge">.col-sm-6</code>.</p>
|
||||
|
||||
<h3 id="equal-width">Equal-width</h3>
|
||||
|
||||
<p>For example, here are two grid layouts that apply to every device and viewport, from <code class="highlighter-rouge">xs</code> to <code class="highlighter-rouge">xl</code>. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p>
|
||||
<p>For example, here are two grid layouts that apply to every device and viewport, from <code class="language-plaintext highlighter-rouge">xs</code> to <code class="language-plaintext highlighter-rouge">xl</code>. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@ -715,9 +719,9 @@
|
||||
|
||||
<h3 id="equal-width-multi-line">Equal-width multi-line</h3>
|
||||
|
||||
<p>Create equal-width columns that span multiple lines by inserting a <code class="highlighter-rouge">.w-100</code> where you want the columns to break to a new line. Make the breaks responsive by mixing <code class="highlighter-rouge">.w-100</code> with some <a href="/docs/4.5/utilities/display/">responsive display utilities</a>.</p>
|
||||
<p>Create equal-width columns that span multiple lines by inserting a <code class="language-plaintext highlighter-rouge">.w-100</code> where you want the columns to break to a new line. Make the breaks responsive by mixing <code class="language-plaintext highlighter-rouge">.w-100</code> with some <a href="/docs/4.5/utilities/display/">responsive display utilities</a>.</p>
|
||||
|
||||
<p>There was a <a href="https://github.com/philipwalton/flexbugs#flexbug-11">Safari flexbox bug</a> that prevented this from working without an explicit <code class="highlighter-rouge">flex-basis</code> or <code class="highlighter-rouge">border</code>. There are workarounds for older browser versions, but they shouldn’t be necessary if your target browsers don’t fall into the buggy versions.</p>
|
||||
<p>There was a <a href="https://github.com/philipwalton/flexbugs#flexbug-11">Safari flexbox bug</a> that prevented this from working without an explicit <code class="language-plaintext highlighter-rouge">flex-basis</code> or <code class="language-plaintext highlighter-rouge">border</code>. There are workarounds for older browser versions, but they shouldn’t be necessary if your target browsers don’t fall into the buggy versions.</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@ -805,7 +809,7 @@
|
||||
|
||||
<h3 id="variable-width-content">Variable width content</h3>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">col-{breakpoint}-auto</code> classes to size columns based on the natural width of their content.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">col-{breakpoint}-auto</code> classes to size columns based on the natural width of their content.</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@ -868,7 +872,7 @@
|
||||
|
||||
<h3 id="all-breakpoints">All breakpoints</h3>
|
||||
|
||||
<p>For grids that are the same from the smallest of devices to the largest, use the <code class="highlighter-rouge">.col</code> and <code class="highlighter-rouge">.col-*</code> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <code class="highlighter-rouge">.col</code>.</p>
|
||||
<p>For grids that are the same from the smallest of devices to the largest, use the <code class="language-plaintext highlighter-rouge">.col</code> and <code class="language-plaintext highlighter-rouge">.col-*</code> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <code class="language-plaintext highlighter-rouge">.col</code>.</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@ -903,7 +907,7 @@
|
||||
|
||||
<h3 id="stacked-to-horizontal">Stacked to horizontal</h3>
|
||||
|
||||
<p>Using a single set of <code class="highlighter-rouge">.col-sm-*</code> classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (<code class="highlighter-rouge">sm</code>).</p>
|
||||
<p>Using a single set of <code class="language-plaintext highlighter-rouge">.col-sm-*</code> classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (<code class="language-plaintext highlighter-rouge">sm</code>).</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@ -987,9 +991,9 @@
|
||||
|
||||
<h3 id="gutters">Gutters</h3>
|
||||
|
||||
<p>Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the <code class="highlighter-rouge">.row</code> and matching padding utilities on the <code class="highlighter-rouge">.col</code>s. The <code class="highlighter-rouge">.container</code> or <code class="highlighter-rouge">.container-fluid</code> parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.</p>
|
||||
<p>Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the <code class="language-plaintext highlighter-rouge">.row</code> and matching padding utilities on the <code class="language-plaintext highlighter-rouge">.col</code>s. The <code class="language-plaintext highlighter-rouge">.container</code> or <code class="language-plaintext highlighter-rouge">.container-fluid</code> parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.</p>
|
||||
|
||||
<p>Here’s an example of customizing the Bootstrap grid at the large (<code class="highlighter-rouge">lg</code>) breakpoint and above. We’ve increased the <code class="highlighter-rouge">.col</code> padding with <code class="highlighter-rouge">.px-lg-5</code>, counteracted that with <code class="highlighter-rouge">.mx-lg-n5</code> on the parent <code class="highlighter-rouge">.row</code> and then adjusted the <code class="highlighter-rouge">.container</code> wrapper with <code class="highlighter-rouge">.px-lg-5</code>.</p>
|
||||
<p>Here’s an example of customizing the Bootstrap grid at the large (<code class="language-plaintext highlighter-rouge">lg</code>) breakpoint and above. We’ve increased the <code class="language-plaintext highlighter-rouge">.col</code> padding with <code class="language-plaintext highlighter-rouge">.px-lg-5</code>, counteracted that with <code class="language-plaintext highlighter-rouge">.mx-lg-n5</code> on the parent <code class="language-plaintext highlighter-rouge">.row</code> and then adjusted the <code class="language-plaintext highlighter-rouge">.container</code> wrapper with <code class="language-plaintext highlighter-rouge">.px-lg-5</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="container px-lg-5">
|
||||
@ -1008,7 +1012,7 @@
|
||||
|
||||
<h3 id="row-columns">Row columns</h3>
|
||||
|
||||
<p>Use the responsive <code class="highlighter-rouge">.row-cols-*</code> classes to quickly set the number of columns that best render your content and layout. Whereas normal <code class="highlighter-rouge">.col-*</code> classes apply to the individual columns (e.g., <code class="highlighter-rouge">.col-md-4</code>), the row columns classes are set on the parent <code class="highlighter-rouge">.row</code> as a shortcut.</p>
|
||||
<p>Use the responsive <code class="language-plaintext highlighter-rouge">.row-cols-*</code> classes to quickly set the number of columns that best render your content and layout. Whereas normal <code class="language-plaintext highlighter-rouge">.col-*</code> classes apply to the individual columns (e.g., <code class="language-plaintext highlighter-rouge">.col-md-4</code>), the row columns classes are set on the parent <code class="language-plaintext highlighter-rouge">.row</code> as a shortcut.</p>
|
||||
|
||||
<p>Use these row columns classes to quickly create basic grid layouts or to control your card layouts.</p>
|
||||
|
||||
@ -1127,7 +1131,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<p>You can also use the accompanying Sass mixin, <code class="highlighter-rouge">row-cols()</code>:</p>
|
||||
<p>You can also use the accompanying Sass mixin, <code class="language-plaintext highlighter-rouge">row-cols()</code>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.element</span> <span class="p">{</span>
|
||||
<span class="c1">// Three columns to start</span>
|
||||
@ -1141,7 +1145,7 @@
|
||||
|
||||
<h2 id="alignment">Alignment</h2>
|
||||
|
||||
<p>Use flexbox alignment utilities to vertically and horizontally align columns. <strong>Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a <code class="highlighter-rouge">min-height</code> as shown below.</strong> <a href="https://github.com/philipwalton/flexbugs#flexbug-3">See Flexbugs #3 for more details.</a></p>
|
||||
<p>Use flexbox alignment utilities to vertically and horizontally align columns. <strong>Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a <code class="language-plaintext highlighter-rouge">min-height</code> as shown below.</strong> <a href="https://github.com/philipwalton/flexbugs#flexbug-3">See Flexbugs #3 for more details.</a></p>
|
||||
|
||||
<h3 id="vertical-alignment">Vertical alignment</h3>
|
||||
|
||||
@ -1350,11 +1354,11 @@
|
||||
|
||||
<h3 id="no-gutters">No gutters</h3>
|
||||
|
||||
<p>The gutters between columns in our predefined grid classes can be removed with <code class="highlighter-rouge">.no-gutters</code>. This removes the negative <code class="highlighter-rouge">margin</code>s from <code class="highlighter-rouge">.row</code> and the horizontal <code class="highlighter-rouge">padding</code> from all immediate children columns.</p>
|
||||
<p>The gutters between columns in our predefined grid classes can be removed with <code class="language-plaintext highlighter-rouge">.no-gutters</code>. This removes the negative <code class="language-plaintext highlighter-rouge">margin</code>s from <code class="language-plaintext highlighter-rouge">.row</code> and the horizontal <code class="language-plaintext highlighter-rouge">padding</code> from all immediate children columns.</p>
|
||||
|
||||
<p>Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a>. While this generates a more specific selector, column padding can still be further customized with <a href="/docs/4.5/utilities/spacing/">spacing utilities</a>.</p>
|
||||
|
||||
<p><strong>Need an edge-to-edge design?</strong> Drop the parent <code class="highlighter-rouge">.container</code> or <code class="highlighter-rouge">.container-fluid</code>.</p>
|
||||
<p><strong>Need an edge-to-edge design?</strong> Drop the parent <code class="language-plaintext highlighter-rouge">.container</code> or <code class="language-plaintext highlighter-rouge">.container-fluid</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="nc">.no-gutters</span> <span class="err">{</span>
|
||||
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
|
||||
@ -1411,7 +1415,7 @@
|
||||
|
||||
<h3 id="column-breaks">Column breaks</h3>
|
||||
|
||||
<p>Breaking columns to a new line in flexbox requires a small hack: add an element with <code class="highlighter-rouge">width: 100%</code> wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple <code class="highlighter-rouge">.row</code>s, but not every implementation method can account for this.</p>
|
||||
<p>Breaking columns to a new line in flexbox requires a small hack: add an element with <code class="language-plaintext highlighter-rouge">width: 100%</code> wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple <code class="language-plaintext highlighter-rouge">.row</code>s, but not every implementation method can account for this.</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@ -1481,7 +1485,7 @@
|
||||
|
||||
<h3 id="order-classes">Order classes</h3>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.order-</code> classes for controlling the <strong>visual order</strong> of your content. These classes are responsive, so you can set the <code class="highlighter-rouge">order</code> by breakpoint (e.g., <code class="highlighter-rouge">.order-1.order-md-2</code>). Includes support for <code class="highlighter-rouge">1</code> through <code class="highlighter-rouge">12</code> across all five grid tiers.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.order-</code> classes for controlling the <strong>visual order</strong> of your content. These classes are responsive, so you can set the <code class="language-plaintext highlighter-rouge">order</code> by breakpoint (e.g., <code class="language-plaintext highlighter-rouge">.order-1.order-md-2</code>). Includes support for <code class="language-plaintext highlighter-rouge">1</code> through <code class="language-plaintext highlighter-rouge">12</code> across all five grid tiers.</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@ -1516,7 +1520,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<p>There are also responsive <code class="highlighter-rouge">.order-first</code> and <code class="highlighter-rouge">.order-last</code> classes that change the <code class="highlighter-rouge">order</code> of an element by applying <code class="highlighter-rouge">order: -1</code> and <code class="highlighter-rouge">order: 13</code> (<code class="highlighter-rouge">order: $columns + 1</code>), respectively. These classes can also be intermixed with the numbered <code class="highlighter-rouge">.order-*</code> classes as needed.</p>
|
||||
<p>There are also responsive <code class="language-plaintext highlighter-rouge">.order-first</code> and <code class="language-plaintext highlighter-rouge">.order-last</code> classes that change the <code class="language-plaintext highlighter-rouge">order</code> of an element by applying <code class="language-plaintext highlighter-rouge">order: -1</code> and <code class="language-plaintext highlighter-rouge">order: 13</code> (<code class="language-plaintext highlighter-rouge">order: $columns + 1</code>), respectively. These classes can also be intermixed with the numbered <code class="language-plaintext highlighter-rouge">.order-*</code> classes as needed.</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@ -1553,11 +1557,11 @@
|
||||
|
||||
<h3 id="offsetting-columns">Offsetting columns</h3>
|
||||
|
||||
<p>You can offset grid columns in two ways: our responsive <code class="highlighter-rouge">.offset-</code> grid classes and our <a href="/docs/4.5/utilities/spacing/">margin utilities</a>. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.</p>
|
||||
<p>You can offset grid columns in two ways: our responsive <code class="language-plaintext highlighter-rouge">.offset-</code> grid classes and our <a href="/docs/4.5/utilities/spacing/">margin utilities</a>. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.</p>
|
||||
|
||||
<h4 id="offset-classes">Offset classes</h4>
|
||||
|
||||
<p>Move columns to the right using <code class="highlighter-rouge">.offset-md-*</code> classes. These classes increase the left margin of a column by <code class="highlighter-rouge">*</code> columns. For example, <code class="highlighter-rouge">.offset-md-4</code> moves <code class="highlighter-rouge">.col-md-4</code> over four columns.</p>
|
||||
<p>Move columns to the right using <code class="language-plaintext highlighter-rouge">.offset-md-*</code> classes. These classes increase the left margin of a column by <code class="language-plaintext highlighter-rouge">*</code> columns. For example, <code class="language-plaintext highlighter-rouge">.offset-md-4</code> moves <code class="language-plaintext highlighter-rouge">.col-md-4</code> over four columns.</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@ -1623,7 +1627,7 @@
|
||||
|
||||
<h4 id="margin-utilities">Margin utilities</h4>
|
||||
|
||||
<p>With the move to flexbox in v4, you can use margin utilities like <code class="highlighter-rouge">.mr-auto</code> to force sibling columns away from one another.</p>
|
||||
<p>With the move to flexbox in v4, you can use margin utilities like <code class="language-plaintext highlighter-rouge">.mr-auto</code> to force sibling columns away from one another.</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@ -1662,7 +1666,7 @@
|
||||
|
||||
<h2 id="nesting">Nesting</h2>
|
||||
|
||||
<p>To nest your content with the default grid, add a new <code class="highlighter-rouge">.row</code> and set of <code class="highlighter-rouge">.col-sm-*</code> columns within an existing <code class="highlighter-rouge">.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p>
|
||||
<p>To nest your content with the default grid, add a new <code class="language-plaintext highlighter-rouge">.row</code> and set of <code class="language-plaintext highlighter-rouge">.col-sm-*</code> columns within an existing <code class="language-plaintext highlighter-rouge">.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@ -1804,14 +1808,14 @@
|
||||
|
||||
<h3 id="columns-and-gutters">Columns and gutters</h3>
|
||||
|
||||
<p>The number of grid columns can be modified via Sass variables. <code class="highlighter-rouge">$grid-columns</code> is used to generate the widths (in percent) of each individual column while <code class="highlighter-rouge">$grid-gutter-width</code> sets the width for the column gutters.</p>
|
||||
<p>The number of grid columns can be modified via Sass variables. <code class="language-plaintext highlighter-rouge">$grid-columns</code> is used to generate the widths (in percent) of each individual column while <code class="language-plaintext highlighter-rouge">$grid-gutter-width</code> sets the width for the column gutters.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$grid-columns</span><span class="p">:</span> <span class="m">12</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$grid-gutter-width</span><span class="p">:</span> <span class="m">30px</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<h3 id="grid-tiers">Grid tiers</h3>
|
||||
|
||||
<p>Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the <code class="highlighter-rouge">$grid-breakpoints</code> and <code class="highlighter-rouge">$container-max-widths</code> to something like this:</p>
|
||||
<p>Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the <code class="language-plaintext highlighter-rouge">$grid-breakpoints</code> and <code class="language-plaintext highlighter-rouge">$container-max-widths</code> to something like this:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$grid-breakpoints</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="n">xs</span><span class="o">:</span> <span class="m">0</span><span class="o">,</span>
|
||||
@ -1826,13 +1830,13 @@
|
||||
<span class="n">lg</span><span class="o">:</span> <span class="m">960px</span>
|
||||
<span class="p">);</span></code></pre></figure>
|
||||
|
||||
<p>When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in <code class="highlighter-rouge">px</code> (not <code class="highlighter-rouge">rem</code>, <code class="highlighter-rouge">em</code>, or <code class="highlighter-rouge">%</code>).</p>
|
||||
<p>When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in <code class="language-plaintext highlighter-rouge">px</code> (not <code class="language-plaintext highlighter-rouge">rem</code>, <code class="language-plaintext highlighter-rouge">em</code>, or <code class="language-plaintext highlighter-rouge">%</code>).</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/layout/overview/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -482,7 +483,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/layout/overview.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Overview</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -493,12 +497,12 @@
|
||||
<p>Bootstrap comes with three different containers:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.container</code>, which sets a <code class="highlighter-rouge">max-width</code> at each responsive breakpoint</li>
|
||||
<li><code class="highlighter-rouge">.container-fluid</code>, which is <code class="highlighter-rouge">width: 100%</code> at all breakpoints</li>
|
||||
<li><code class="highlighter-rouge">.container-{breakpoint}</code>, which is <code class="highlighter-rouge">width: 100%</code> until the specified breakpoint</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.container</code>, which sets a <code class="language-plaintext highlighter-rouge">max-width</code> at each responsive breakpoint</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.container-fluid</code>, which is <code class="language-plaintext highlighter-rouge">width: 100%</code> at all breakpoints</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.container-{breakpoint}</code>, which is <code class="language-plaintext highlighter-rouge">width: 100%</code> until the specified breakpoint</li>
|
||||
</ul>
|
||||
|
||||
<p>The table below illustrates how each container’s <code class="highlighter-rouge">max-width</code> compares to the original <code class="highlighter-rouge">.container</code> and <code class="highlighter-rouge">.container-fluid</code> across each breakpoint.</p>
|
||||
<p>The table below illustrates how each container’s <code class="language-plaintext highlighter-rouge">max-width</code> compares to the original <code class="language-plaintext highlighter-rouge">.container</code> and <code class="language-plaintext highlighter-rouge">.container-fluid</code> across each breakpoint.</p>
|
||||
|
||||
<p>See them in action and compare them in our <a href="/docs/4.5/examples/grid/#containers">Grid example</a>.</p>
|
||||
|
||||
@ -582,7 +586,7 @@
|
||||
|
||||
<h3 id="all-in-one">All-in-one</h3>
|
||||
|
||||
<p>Our default <code class="highlighter-rouge">.container</code> class is a responsive, fixed-width container, meaning its <code class="highlighter-rouge">max-width</code> changes at each breakpoint.</p>
|
||||
<p>Our default <code class="language-plaintext highlighter-rouge">.container</code> class is a responsive, fixed-width container, meaning its <code class="language-plaintext highlighter-rouge">max-width</code> changes at each breakpoint.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Content here --></span>
|
||||
@ -590,7 +594,7 @@
|
||||
|
||||
<h3 id="fluid">Fluid</h3>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.container-fluid</code> for a full width container, spanning the entire width of the viewport.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.container-fluid</code> for a full width container, spanning the entire width of the viewport.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
|
||||
...
|
||||
@ -598,7 +602,7 @@
|
||||
|
||||
<h3 id="responsive">Responsive</h3>
|
||||
|
||||
<p>Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply <code class="highlighter-rouge">max-width</code>s for each of the higher breakpoints. For example, <code class="highlighter-rouge">.container-sm</code> is 100% wide to start until the <code class="highlighter-rouge">sm</code> breakpoint is reached, where it will scale up with <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, and <code class="highlighter-rouge">xl</code>.</p>
|
||||
<p>Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply <code class="language-plaintext highlighter-rouge">max-width</code>s for each of the higher breakpoints. For example, <code class="language-plaintext highlighter-rouge">.container-sm</code> is 100% wide to start until the <code class="language-plaintext highlighter-rouge">sm</code> breakpoint is reached, where it will scale up with <code class="language-plaintext highlighter-rouge">md</code>, <code class="language-plaintext highlighter-rouge">lg</code>, and <code class="language-plaintext highlighter-rouge">xl</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-sm"</span><span class="nt">></span>100% wide until small breakpoint<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-md"</span><span class="nt">></span>100% wide until medium breakpoint<span class="nt"></div></span>
|
||||
@ -662,7 +666,7 @@
|
||||
<span class="c1">// No media query since the extra-large breakpoint has no upper bound on its width</span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>Note that since browsers do not currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code class="highlighter-rouge">min-</code> and <code class="highlighter-rouge">max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.</p>
|
||||
<p>Note that since browsers do not currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code class="language-plaintext highlighter-rouge">min-</code> and <code class="language-plaintext highlighter-rouge">max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.</p>
|
||||
</div>
|
||||
|
||||
<p>Once again, these media queries are also available via Sass mixins:</p>
|
||||
@ -717,9 +721,9 @@
|
||||
|
||||
<h2 id="z-index">Z-index</h2>
|
||||
|
||||
<p>Several Bootstrap components utilize <code class="highlighter-rouge">z-index</code>, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
|
||||
<p>Several Bootstrap components utilize <code class="language-plaintext highlighter-rouge">z-index</code>, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
|
||||
|
||||
<p>These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used <code class="highlighter-rouge">100</code>+ or <code class="highlighter-rouge">500</code>+.</p>
|
||||
<p>These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used <code class="language-plaintext highlighter-rouge">100</code>+ or <code class="language-plaintext highlighter-rouge">500</code>+.</p>
|
||||
|
||||
<p>We don’t encourage customization of these individual values; should you change one, you likely need to change them all.</p>
|
||||
|
||||
@ -731,13 +735,13 @@
|
||||
<span class="nv">$zindex-popover</span><span class="p">:</span> <span class="m">1060</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-tooltip</span><span class="p">:</span> <span class="m">1070</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<p>To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit <code class="highlighter-rouge">z-index</code> values of <code class="highlighter-rouge">1</code>, <code class="highlighter-rouge">2</code>, and <code class="highlighter-rouge">3</code> for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher <code class="highlighter-rouge">z-index</code> value to show their border over the sibling elements.</p>
|
||||
<p>To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit <code class="language-plaintext highlighter-rouge">z-index</code> values of <code class="language-plaintext highlighter-rouge">1</code>, <code class="language-plaintext highlighter-rouge">2</code>, and <code class="language-plaintext highlighter-rouge">3</code> for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher <code class="language-plaintext highlighter-rouge">z-index</code> value to show their border over the sibling elements.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/layout/utilities-for-layout/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -477,33 +478,36 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/layout/utilities-for-layout.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Utilities for layout</h1>
|
||||
</div>
|
||||
<p class="bd-lead">For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="changing-display">Changing <code class="highlighter-rouge">display</code></h2>
|
||||
<h2 id="changing-display">Changing <code class="language-plaintext highlighter-rouge">display</code></h2>
|
||||
|
||||
<p>Use our <a href="/docs/4.5/utilities/display/">display utilities</a> for responsively toggling common values of the <code class="highlighter-rouge">display</code> property. Mix it with our grid system, content, or components to show or hide them across specific viewports.</p>
|
||||
<p>Use our <a href="/docs/4.5/utilities/display/">display utilities</a> for responsively toggling common values of the <code class="language-plaintext highlighter-rouge">display</code> property. Mix it with our grid system, content, or components to show or hide them across specific viewports.</p>
|
||||
|
||||
<h2 id="flexbox-options">Flexbox options</h2>
|
||||
|
||||
<p>Bootstrap 4 is built with flexbox, but not every element’s <code class="highlighter-rouge">display</code> has been changed to <code class="highlighter-rouge">display: flex</code> as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of <a href="/docs/4.5/components/alerts/">our components</a> are built with flexbox enabled.</p>
|
||||
<p>Bootstrap 4 is built with flexbox, but not every element’s <code class="language-plaintext highlighter-rouge">display</code> has been changed to <code class="language-plaintext highlighter-rouge">display: flex</code> as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of <a href="/docs/4.5/components/alerts/">our components</a> are built with flexbox enabled.</p>
|
||||
|
||||
<p>Should you need to add <code class="highlighter-rouge">display: flex</code> to an element, do so with <code class="highlighter-rouge">.d-flex</code> or one of the responsive variants (e.g., <code class="highlighter-rouge">.d-sm-flex</code>). You’ll need this class or <code class="highlighter-rouge">display</code> value to allow the use of our extra <a href="/docs/4.5/utilities/flex/">flexbox utilities</a> for sizing, alignment, spacing, and more.</p>
|
||||
<p>Should you need to add <code class="language-plaintext highlighter-rouge">display: flex</code> to an element, do so with <code class="language-plaintext highlighter-rouge">.d-flex</code> or one of the responsive variants (e.g., <code class="language-plaintext highlighter-rouge">.d-sm-flex</code>). You’ll need this class or <code class="language-plaintext highlighter-rouge">display</code> value to allow the use of our extra <a href="/docs/4.5/utilities/flex/">flexbox utilities</a> for sizing, alignment, spacing, and more.</p>
|
||||
|
||||
<h2 id="margin-and-padding">Margin and padding</h2>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">margin</code> and <code class="highlighter-rouge">padding</code> <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a <code class="highlighter-rouge">1rem</code> value default <code class="highlighter-rouge">$spacer</code> variable. Choose values for all viewports (e.g., <code class="highlighter-rouge">.mr-3</code> for <code class="highlighter-rouge">margin-right: 1rem</code>), or pick responsive variants to target specific viewports (e.g., <code class="highlighter-rouge">.mr-md-3</code> for <code class="highlighter-rouge">margin-right: 1rem</code> starting at the <code class="highlighter-rouge">md</code> breakpoint).</p>
|
||||
<p>Use the <code class="language-plaintext highlighter-rouge">margin</code> and <code class="language-plaintext highlighter-rouge">padding</code> <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a <code class="language-plaintext highlighter-rouge">1rem</code> value default <code class="language-plaintext highlighter-rouge">$spacer</code> variable. Choose values for all viewports (e.g., <code class="language-plaintext highlighter-rouge">.mr-3</code> for <code class="language-plaintext highlighter-rouge">margin-right: 1rem</code>), or pick responsive variants to target specific viewports (e.g., <code class="language-plaintext highlighter-rouge">.mr-md-3</code> for <code class="language-plaintext highlighter-rouge">margin-right: 1rem</code> starting at the <code class="language-plaintext highlighter-rouge">md</code> breakpoint).</p>
|
||||
|
||||
<h2 id="toggle-visibility">Toggle <code class="highlighter-rouge">visibility</code></h2>
|
||||
<h2 id="toggle-visibility">Toggle <code class="language-plaintext highlighter-rouge">visibility</code></h2>
|
||||
|
||||
<p>When toggling <code class="highlighter-rouge">display</code> isn’t needed, you can toggle the <code class="highlighter-rouge">visibility</code> of an element with our <a href="/docs/4.5/utilities/visibility/">visibility utilities</a>. Invisible elements will still affect the layout of the page, but are visually hidden from visitors.</p>
|
||||
<p>When toggling <code class="language-plaintext highlighter-rouge">display</code> isn’t needed, you can toggle the <code class="language-plaintext highlighter-rouge">visibility</code> of an element with our <a href="/docs/4.5/utilities/visibility/">visibility utilities</a>. Invisible elements will still affect the layout of the page, but are visually hidden from visitors.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/migration/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -531,7 +532,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/migration.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Migrating to v4</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -542,13 +546,13 @@
|
||||
<h3 id="printing">Printing</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Fixed broken print utilities. Previously, using a <code class="highlighter-rouge">.d-print-*</code> class would unexpectedly overrule any other <code class="highlighter-rouge">.d-*</code> class. Now, they match our other display utilities and only apply to that media (<code class="highlighter-rouge">@media print</code>).</p>
|
||||
<p>Fixed broken print utilities. Previously, using a <code class="language-plaintext highlighter-rouge">.d-print-*</code> class would unexpectedly overrule any other <code class="language-plaintext highlighter-rouge">.d-*</code> class. Now, they match our other display utilities and only apply to that media (<code class="language-plaintext highlighter-rouge">@media print</code>).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Expanded available print display utilities to match other utilities. Beta 3 and older only had <code class="highlighter-rouge">block</code>, <code class="highlighter-rouge">inline-block</code>, <code class="highlighter-rouge">inline</code>, and <code class="highlighter-rouge">none</code>. Stable v4 added <code class="highlighter-rouge">flex</code>, <code class="highlighter-rouge">inline-flex</code>, <code class="highlighter-rouge">table</code>, <code class="highlighter-rouge">table-row</code>, and <code class="highlighter-rouge">table-cell</code>.</p>
|
||||
<p>Expanded available print display utilities to match other utilities. Beta 3 and older only had <code class="language-plaintext highlighter-rouge">block</code>, <code class="language-plaintext highlighter-rouge">inline-block</code>, <code class="language-plaintext highlighter-rouge">inline</code>, and <code class="language-plaintext highlighter-rouge">none</code>. Stable v4 added <code class="language-plaintext highlighter-rouge">flex</code>, <code class="language-plaintext highlighter-rouge">inline-flex</code>, <code class="language-plaintext highlighter-rouge">table</code>, <code class="language-plaintext highlighter-rouge">table-row</code>, and <code class="language-plaintext highlighter-rouge">table-cell</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Fixed print preview rendering across browsers with new print styles that specify <code class="highlighter-rouge">@page</code> <code class="highlighter-rouge">size</code>.</p>
|
||||
<p>Fixed print preview rendering across browsers with new print styles that specify <code class="language-plaintext highlighter-rouge">@page</code> <code class="language-plaintext highlighter-rouge">size</code>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -559,28 +563,28 @@
|
||||
<h3 id="miscellaneous">Miscellaneous</h3>
|
||||
|
||||
<ul>
|
||||
<li>Removed the unused <code class="highlighter-rouge">$thumbnail-transition</code> variable. We weren’t transitioning anything, so it was just extra code.</li>
|
||||
<li>The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the <code class="highlighter-rouge">node_modules</code> folder, you should adapt your workflow.</li>
|
||||
<li>Removed the unused <code class="language-plaintext highlighter-rouge">$thumbnail-transition</code> variable. We weren’t transitioning anything, so it was just extra code.</li>
|
||||
<li>The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the <code class="language-plaintext highlighter-rouge">node_modules</code> folder, you should adapt your workflow.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="forms">Forms</h3>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Rewrote both custom and default checkboxes and radios. Now, both have matching HTML structure (outer <code class="highlighter-rouge"><div></code> with sibling <code class="highlighter-rouge"><input></code> and <code class="highlighter-rouge"><label></code>) and the same layout styles (stacked default, inline with modifier class). This allows us to style the label based on the input’s state, simplifying support for the <code class="highlighter-rouge">disabled</code> attribute (previously requiring a parent class) and better supporting our form validation.</p>
|
||||
<p>Rewrote both custom and default checkboxes and radios. Now, both have matching HTML structure (outer <code class="language-plaintext highlighter-rouge"><div></code> with sibling <code class="language-plaintext highlighter-rouge"><input></code> and <code class="language-plaintext highlighter-rouge"><label></code>) and the same layout styles (stacked default, inline with modifier class). This allows us to style the label based on the input’s state, simplifying support for the <code class="language-plaintext highlighter-rouge">disabled</code> attribute (previously requiring a parent class) and better supporting our form validation.</p>
|
||||
|
||||
<p>As part of this, we’ve changed the CSS for managing multiple <code class="highlighter-rouge">background-image</code>s on custom form checkboxes and radios. Previously, the now removed <code class="highlighter-rouge">.custom-control-indicator</code> element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have <code class="highlighter-rouge">.custom-control-label::before</code> for the fill and gradient and <code class="highlighter-rouge">.custom-control-label::after</code> handles the icon.</p>
|
||||
<p>As part of this, we’ve changed the CSS for managing multiple <code class="language-plaintext highlighter-rouge">background-image</code>s on custom form checkboxes and radios. Previously, the now removed <code class="language-plaintext highlighter-rouge">.custom-control-indicator</code> element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have <code class="language-plaintext highlighter-rouge">.custom-control-label::before</code> for the fill and gradient and <code class="language-plaintext highlighter-rouge">.custom-control-label::after</code> handles the icon.</p>
|
||||
|
||||
<p>To make a custom check inline, add <code class="highlighter-rouge">.custom-control-inline</code>.</p>
|
||||
<p>To make a custom check inline, add <code class="language-plaintext highlighter-rouge">.custom-control-inline</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Updated selector for input-based button groups. Instead of <code class="highlighter-rouge">[data-toggle="buttons"] { }</code> for style and behavior, we use the <code class="highlighter-rouge">data</code> attribute just for JS behaviors and rely on a new <code class="highlighter-rouge">.btn-group-toggle</code> class for styling.</p>
|
||||
<p>Updated selector for input-based button groups. Instead of <code class="language-plaintext highlighter-rouge">[data-toggle="buttons"] { }</code> for style and behavior, we use the <code class="language-plaintext highlighter-rouge">data</code> attribute just for JS behaviors and rely on a new <code class="language-plaintext highlighter-rouge">.btn-group-toggle</code> class for styling.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Removed <code class="highlighter-rouge">.col-form-legend</code> in favor of a slightly improved <code class="highlighter-rouge">.col-form-label</code>. This way <code class="highlighter-rouge">.col-form-label-sm</code> and <code class="highlighter-rouge">.col-form-label-lg</code> can be used on <code class="highlighter-rouge"><legend></code> elements with ease.</p>
|
||||
<p>Removed <code class="language-plaintext highlighter-rouge">.col-form-legend</code> in favor of a slightly improved <code class="language-plaintext highlighter-rouge">.col-form-label</code>. This way <code class="language-plaintext highlighter-rouge">.col-form-label-sm</code> and <code class="language-plaintext highlighter-rouge">.col-form-label-lg</code> can be used on <code class="language-plaintext highlighter-rouge"><legend></code> elements with ease.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Custom file inputs received a change to their <code class="highlighter-rouge">$custom-file-text</code> Sass variable. It’s no longer a nested Sass map and now only powers one string—the <code class="highlighter-rouge">Browse</code> button as that is now the only pseudo-element generated from our Sass. The <code class="highlighter-rouge">Choose file</code> text now comes from the <code class="highlighter-rouge">.custom-file-label</code>.</p>
|
||||
<p>Custom file inputs received a change to their <code class="language-plaintext highlighter-rouge">$custom-file-text</code> Sass variable. It’s no longer a nested Sass map and now only powers one string—the <code class="language-plaintext highlighter-rouge">Browse</code> button as that is now the only pseudo-element generated from our Sass. The <code class="language-plaintext highlighter-rouge">Choose file</code> text now comes from the <code class="language-plaintext highlighter-rouge">.custom-file-label</code>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -588,13 +592,13 @@
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Input group addons are now specific to their placement relative to an input. We’ve dropped <code class="highlighter-rouge">.input-group-addon</code> and <code class="highlighter-rouge">.input-group-btn</code> for two new classes, <code class="highlighter-rouge">.input-group-prepend</code> and <code class="highlighter-rouge">.input-group-append</code>. You must explicitly use an append or a prepend now, simplifying much of our CSS. Within an append or prepend, place your buttons as they would exist anywhere else, but wrap text in <code class="highlighter-rouge">.input-group-text</code>.</p>
|
||||
<p>Input group addons are now specific to their placement relative to an input. We’ve dropped <code class="language-plaintext highlighter-rouge">.input-group-addon</code> and <code class="language-plaintext highlighter-rouge">.input-group-btn</code> for two new classes, <code class="language-plaintext highlighter-rouge">.input-group-prepend</code> and <code class="language-plaintext highlighter-rouge">.input-group-append</code>. You must explicitly use an append or a prepend now, simplifying much of our CSS. Within an append or prepend, place your buttons as they would exist anywhere else, but wrap text in <code class="language-plaintext highlighter-rouge">.input-group-text</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Validation styles are now supported, as are multiple inputs (though you can only validate one input per group).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Sizing classes must be on the parent <code class="highlighter-rouge">.input-group</code> and not the individual form elements.</p>
|
||||
<p>Sizing classes must be on the parent <code class="language-plaintext highlighter-rouge">.input-group</code> and not the individual form elements.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -605,20 +609,20 @@
|
||||
<h3 id="breaking">Breaking</h3>
|
||||
|
||||
<ul>
|
||||
<li>Removed <code class="highlighter-rouge">$badge-color</code> variable and its usage on <code class="highlighter-rouge">.badge</code>. We use a color contrast function to pick a <code class="highlighter-rouge">color</code> based on the <code class="highlighter-rouge">background-color</code>, so the variable is unnecessary.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">grayscale()</code> function to <code class="highlighter-rouge">gray()</code> to avoid breaking conflict with the CSS native <code class="highlighter-rouge">grayscale</code> filter.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.table-inverse</code>, <code class="highlighter-rouge">.thead-inverse</code>, and <code class="highlighter-rouge">.thead-default</code> to <code class="highlighter-rouge">.*-dark</code> and <code class="highlighter-rouge">.*-light</code>, matching our color schemes used elsewhere.</li>
|
||||
<li>Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the <code class="highlighter-rouge">.table-responsive</code> you’ve been using is more like <code class="highlighter-rouge">.table-responsive-md</code>. You may now use <code class="highlighter-rouge">.table-responsive</code> or <code class="highlighter-rouge">.table-responsive-{sm,md,lg,xl}</code> as needed.</li>
|
||||
<li>Removed <code class="language-plaintext highlighter-rouge">$badge-color</code> variable and its usage on <code class="language-plaintext highlighter-rouge">.badge</code>. We use a color contrast function to pick a <code class="language-plaintext highlighter-rouge">color</code> based on the <code class="language-plaintext highlighter-rouge">background-color</code>, so the variable is unnecessary.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">grayscale()</code> function to <code class="language-plaintext highlighter-rouge">gray()</code> to avoid breaking conflict with the CSS native <code class="language-plaintext highlighter-rouge">grayscale</code> filter.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.table-inverse</code>, <code class="language-plaintext highlighter-rouge">.thead-inverse</code>, and <code class="language-plaintext highlighter-rouge">.thead-default</code> to <code class="language-plaintext highlighter-rouge">.*-dark</code> and <code class="language-plaintext highlighter-rouge">.*-light</code>, matching our color schemes used elsewhere.</li>
|
||||
<li>Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the <code class="language-plaintext highlighter-rouge">.table-responsive</code> you’ve been using is more like <code class="language-plaintext highlighter-rouge">.table-responsive-md</code>. You may now use <code class="language-plaintext highlighter-rouge">.table-responsive</code> or <code class="language-plaintext highlighter-rouge">.table-responsive-{sm,md,lg,xl}</code> as needed.</li>
|
||||
<li>Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). <a href="https://github.com/bower/bower/issues/2298">See bower/bower#2298</a> for details.</li>
|
||||
<li>Bootstrap still requires jQuery 1.9.1 or higher, but you’re advised to use version 3.x since v3.x’s supported browsers are the ones Bootstrap supports plus v3.x has some security fixes.</li>
|
||||
<li>Removed the unused <code class="highlighter-rouge">.form-control-label</code> class. If you did make use of this class, it was duplicate of the <code class="highlighter-rouge">.col-form-label</code> class that vertically centered a <code class="highlighter-rouge"><label></code> with it’s associated input in horizontal form layouts.</li>
|
||||
<li>Changed the <code class="highlighter-rouge">color-yiq</code> from a mixin that included the <code class="highlighter-rouge">color</code> property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of <code class="highlighter-rouge">color-yiq(#000)</code>, you’d write <code class="highlighter-rouge">color: color-yiq(#000);</code>.</li>
|
||||
<li>Removed the unused <code class="language-plaintext highlighter-rouge">.form-control-label</code> class. If you did make use of this class, it was duplicate of the <code class="language-plaintext highlighter-rouge">.col-form-label</code> class that vertically centered a <code class="language-plaintext highlighter-rouge"><label></code> with it’s associated input in horizontal form layouts.</li>
|
||||
<li>Changed the <code class="language-plaintext highlighter-rouge">color-yiq</code> from a mixin that included the <code class="language-plaintext highlighter-rouge">color</code> property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of <code class="language-plaintext highlighter-rouge">color-yiq(#000)</code>, you’d write <code class="language-plaintext highlighter-rouge">color: color-yiq(#000);</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="highlights">Highlights</h3>
|
||||
|
||||
<ul>
|
||||
<li>Introduced new <code class="highlighter-rouge">pointer-events</code> usage on modals. The outer <code class="highlighter-rouge">.modal-dialog</code> passes through events with <code class="highlighter-rouge">pointer-events: none</code> for custom click handling (making it possible to just listen on the <code class="highlighter-rouge">.modal-backdrop</code> for any clicks), and then counteracts it for the actual <code class="highlighter-rouge">.modal-content</code> with <code class="highlighter-rouge">pointer-events: auto</code>.</li>
|
||||
<li>Introduced new <code class="language-plaintext highlighter-rouge">pointer-events</code> usage on modals. The outer <code class="language-plaintext highlighter-rouge">.modal-dialog</code> passes through events with <code class="language-plaintext highlighter-rouge">pointer-events: none</code> for custom click handling (making it possible to just listen on the <code class="language-plaintext highlighter-rouge">.modal-backdrop</code> for any clicks), and then counteracts it for the actual <code class="language-plaintext highlighter-rouge">.modal-content</code> with <code class="language-plaintext highlighter-rouge">pointer-events: auto</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="summary">Summary</h2>
|
||||
@ -637,11 +641,11 @@
|
||||
<ul>
|
||||
<li><strong>Flexbox is enabled by default.</strong> In general this means a move away from floats and more across our components.</li>
|
||||
<li>Switched from <a href="http://lesscss.org/">Less</a> to <a href="https://sass-lang.com/">Sass</a> for our source CSS files.</li>
|
||||
<li>Switched from <code class="highlighter-rouge">px</code> to <code class="highlighter-rouge">rem</code> as our primary CSS unit, though pixels are still used for media queries and grid behavior as device viewports are not affected by type size.</li>
|
||||
<li>Global font-size increased from <code class="highlighter-rouge">14px</code> to <code class="highlighter-rouge">16px</code>.</li>
|
||||
<li>Revamped grid tiers to add a fifth option (addressing smaller devices at <code class="highlighter-rouge">576px</code> and below) and removed the <code class="highlighter-rouge">-xs</code> infix from those classes. Example: <code class="highlighter-rouge">.col-6.col-sm-4.col-md-3</code>.</li>
|
||||
<li>Replaced the separate optional theme with configurable options via SCSS variables (e.g., <code class="highlighter-rouge">$enable-gradients: true</code>).</li>
|
||||
<li>Build system overhauled to use a series of npm scripts instead of Grunt. See <code class="highlighter-rouge">package.json</code> for all scripts, or our project readme for local development needs.</li>
|
||||
<li>Switched from <code class="language-plaintext highlighter-rouge">px</code> to <code class="language-plaintext highlighter-rouge">rem</code> as our primary CSS unit, though pixels are still used for media queries and grid behavior as device viewports are not affected by type size.</li>
|
||||
<li>Global font-size increased from <code class="language-plaintext highlighter-rouge">14px</code> to <code class="language-plaintext highlighter-rouge">16px</code>.</li>
|
||||
<li>Revamped grid tiers to add a fifth option (addressing smaller devices at <code class="language-plaintext highlighter-rouge">576px</code> and below) and removed the <code class="language-plaintext highlighter-rouge">-xs</code> infix from those classes. Example: <code class="language-plaintext highlighter-rouge">.col-6.col-sm-4.col-md-3</code>.</li>
|
||||
<li>Replaced the separate optional theme with configurable options via SCSS variables (e.g., <code class="language-plaintext highlighter-rouge">$enable-gradients: true</code>).</li>
|
||||
<li>Build system overhauled to use a series of npm scripts instead of Grunt. See <code class="language-plaintext highlighter-rouge">package.json</code> for all scripts, or our project readme for local development needs.</li>
|
||||
<li>Non-responsive usage of Bootstrap is no longer supported.</li>
|
||||
<li>Dropped the online Customizer in favor of more extensive setup documentation and customized builds.</li>
|
||||
<li>Added dozens of new <a href="/docs/4.5/utilities/">utility classes</a> for common CSS property-value pairs and margin/padding spacing shortcuts.</li>
|
||||
@ -658,17 +662,17 @@
|
||||
</li>
|
||||
<li><strong>Updated grid class names and a new grid tier.</strong>
|
||||
<ul>
|
||||
<li>Added a new <code class="highlighter-rouge">sm</code> grid tier below <code class="highlighter-rouge">768px</code> for more granular control. We now have <code class="highlighter-rouge">xs</code>, <code class="highlighter-rouge">sm</code>, <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, and <code class="highlighter-rouge">xl</code>. This also means every tier has been bumped up one level (so <code class="highlighter-rouge">.col-md-6</code> in v3 is now <code class="highlighter-rouge">.col-lg-6</code> in v4).</li>
|
||||
<li><code class="highlighter-rouge">xs</code> grid classes have been modified to not require the infix to more accurately represent that they start applying styles at <code class="highlighter-rouge">min-width: 0</code> and not a set pixel value. Instead of <code class="highlighter-rouge">.col-xs-6</code>, it’s now <code class="highlighter-rouge">.col-6</code>. All other grid tiers require the infix (e.g., <code class="highlighter-rouge">sm</code>).</li>
|
||||
<li>Added a new <code class="language-plaintext highlighter-rouge">sm</code> grid tier below <code class="language-plaintext highlighter-rouge">768px</code> for more granular control. We now have <code class="language-plaintext highlighter-rouge">xs</code>, <code class="language-plaintext highlighter-rouge">sm</code>, <code class="language-plaintext highlighter-rouge">md</code>, <code class="language-plaintext highlighter-rouge">lg</code>, and <code class="language-plaintext highlighter-rouge">xl</code>. This also means every tier has been bumped up one level (so <code class="language-plaintext highlighter-rouge">.col-md-6</code> in v3 is now <code class="language-plaintext highlighter-rouge">.col-lg-6</code> in v4).</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">xs</code> grid classes have been modified to not require the infix to more accurately represent that they start applying styles at <code class="language-plaintext highlighter-rouge">min-width: 0</code> and not a set pixel value. Instead of <code class="language-plaintext highlighter-rouge">.col-xs-6</code>, it’s now <code class="language-plaintext highlighter-rouge">.col-6</code>. All other grid tiers require the infix (e.g., <code class="language-plaintext highlighter-rouge">sm</code>).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>Updated grid sizes, mixins, and variables.</strong>
|
||||
<ul>
|
||||
<li>Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.</li>
|
||||
<li>Updated grid mixins to utilize a <code class="highlighter-rouge">make-col-ready</code> prep mixin and a <code class="highlighter-rouge">make-col</code> to set the <code class="highlighter-rouge">flex</code> and <code class="highlighter-rouge">max-width</code> for individual column sizing.</li>
|
||||
<li>Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by <code class="highlighter-rouge">12</code> at their max width.</li>
|
||||
<li>Grid breakpoints and container widths are now handled via Sass maps (<code class="highlighter-rouge">$grid-breakpoints</code> and <code class="highlighter-rouge">$container-max-widths</code>) instead of a handful of separate variables. These replace the <code class="highlighter-rouge">@screen-*</code> variables entirely and allow you to fully customize the grid tiers.</li>
|
||||
<li>Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have <code class="highlighter-rouge">@include media-breakpoint-up/down/only</code>. Now, instead of writing <code class="highlighter-rouge">@media (min-width: @screen-sm-min) { ... }</code>, you can write <code class="highlighter-rouge">@include media-breakpoint-up(sm) { ... }</code>.</li>
|
||||
<li>Updated grid mixins to utilize a <code class="language-plaintext highlighter-rouge">make-col-ready</code> prep mixin and a <code class="language-plaintext highlighter-rouge">make-col</code> to set the <code class="language-plaintext highlighter-rouge">flex</code> and <code class="language-plaintext highlighter-rouge">max-width</code> for individual column sizing.</li>
|
||||
<li>Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by <code class="language-plaintext highlighter-rouge">12</code> at their max width.</li>
|
||||
<li>Grid breakpoints and container widths are now handled via Sass maps (<code class="language-plaintext highlighter-rouge">$grid-breakpoints</code> and <code class="language-plaintext highlighter-rouge">$container-max-widths</code>) instead of a handful of separate variables. These replace the <code class="language-plaintext highlighter-rouge">@screen-*</code> variables entirely and allow you to fully customize the grid tiers.</li>
|
||||
<li>Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have <code class="language-plaintext highlighter-rouge">@include media-breakpoint-up/down/only</code>. Now, instead of writing <code class="language-plaintext highlighter-rouge">@media (min-width: @screen-sm-min) { ... }</code>, you can write <code class="language-plaintext highlighter-rouge">@include media-breakpoint-up(sm) { ... }</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -687,8 +691,8 @@
|
||||
</li>
|
||||
<li><strong>Dropped the Affix jQuery plugin.</strong>
|
||||
<ul>
|
||||
<li>We recommend using <code class="highlighter-rouge">position: sticky</code> instead. <a href="https://html5please.com/#sticky">See the HTML5 Please entry</a> for details and specific polyfill recommendations. One suggestion is to use an <code class="highlighter-rouge">@supports</code> rule for implementing it (e.g., <code class="highlighter-rouge">@supports (position: sticky) { ... }</code>)</li>
|
||||
<li>If you were using Affix to apply additional, non-<code class="highlighter-rouge">position</code> styles, the polyfills might not support your use case. One option for such uses is the third-party <a href="https://github.com/acch/scrollpos-styler">ScrollPos-Styler</a> library.</li>
|
||||
<li>We recommend using <code class="language-plaintext highlighter-rouge">position: sticky</code> instead. <a href="https://html5please.com/#sticky">See the HTML5 Please entry</a> for details and specific polyfill recommendations. One suggestion is to use an <code class="language-plaintext highlighter-rouge">@supports</code> rule for implementing it (e.g., <code class="language-plaintext highlighter-rouge">@supports (position: sticky) { ... }</code>)</li>
|
||||
<li>If you were using Affix to apply additional, non-<code class="language-plaintext highlighter-rouge">position</code> styles, the polyfills might not support your use case. One option for such uses is the third-party <a href="https://github.com/acch/scrollpos-styler">ScrollPos-Styler</a> library.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>Dropped the pager component</strong> as it was essentially slightly customized buttons.</li>
|
||||
@ -701,78 +705,78 @@
|
||||
|
||||
<h3 id="reboot">Reboot</h3>
|
||||
|
||||
<p>New to Bootstrap 4 is the <a href="/docs/4.5/content/reboot/">Reboot</a>, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the <code class="highlighter-rouge">box-sizing: border-box</code> change, moving from <code class="highlighter-rouge">em</code> to <code class="highlighter-rouge">rem</code> units on many elements, link styles, and many form element resets.</p>
|
||||
<p>New to Bootstrap 4 is the <a href="/docs/4.5/content/reboot/">Reboot</a>, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the <code class="language-plaintext highlighter-rouge">box-sizing: border-box</code> change, moving from <code class="language-plaintext highlighter-rouge">em</code> to <code class="language-plaintext highlighter-rouge">rem</code> units on many elements, link styles, and many form element resets.</p>
|
||||
|
||||
<h3 id="typography">Typography</h3>
|
||||
|
||||
<ul>
|
||||
<li>Moved all <code class="highlighter-rouge">.text-</code> utilities to the <code class="highlighter-rouge">_utilities.scss</code> file.</li>
|
||||
<li>Dropped <code class="highlighter-rouge">.page-header</code> as its styles can be applied via utilities.</li>
|
||||
<li><code class="highlighter-rouge">.dl-horizontal</code> has been dropped. Instead, use <code class="highlighter-rouge">.row</code> on <code class="highlighter-rouge"><dl></code> and use grid column classes (or mixins) on its <code class="highlighter-rouge"><dt></code> and <code class="highlighter-rouge"><dd></code> children.</li>
|
||||
<li>Redesigned blockquotes, moving their styles from the <code class="highlighter-rouge"><blockquote></code> element to a single class, <code class="highlighter-rouge">.blockquote</code>. Dropped the <code class="highlighter-rouge">.blockquote-reverse</code> modifier for text utilities.</li>
|
||||
<li><code class="highlighter-rouge">.list-inline</code> now requires that its children list items have the new <code class="highlighter-rouge">.list-inline-item</code> class applied to them.</li>
|
||||
<li>Moved all <code class="language-plaintext highlighter-rouge">.text-</code> utilities to the <code class="language-plaintext highlighter-rouge">_utilities.scss</code> file.</li>
|
||||
<li>Dropped <code class="language-plaintext highlighter-rouge">.page-header</code> as its styles can be applied via utilities.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.dl-horizontal</code> has been dropped. Instead, use <code class="language-plaintext highlighter-rouge">.row</code> on <code class="language-plaintext highlighter-rouge"><dl></code> and use grid column classes (or mixins) on its <code class="language-plaintext highlighter-rouge"><dt></code> and <code class="language-plaintext highlighter-rouge"><dd></code> children.</li>
|
||||
<li>Redesigned blockquotes, moving their styles from the <code class="language-plaintext highlighter-rouge"><blockquote></code> element to a single class, <code class="language-plaintext highlighter-rouge">.blockquote</code>. Dropped the <code class="language-plaintext highlighter-rouge">.blockquote-reverse</code> modifier for text utilities.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.list-inline</code> now requires that its children list items have the new <code class="language-plaintext highlighter-rouge">.list-inline-item</code> class applied to them.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="images">Images</h3>
|
||||
|
||||
<ul>
|
||||
<li>Renamed <code class="highlighter-rouge">.img-responsive</code> to <code class="highlighter-rouge">.img-fluid</code>.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.img-rounded</code> to <code class="highlighter-rouge">.rounded</code></li>
|
||||
<li>Renamed <code class="highlighter-rouge">.img-circle</code> to <code class="highlighter-rouge">.rounded-circle</code></li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.img-responsive</code> to <code class="language-plaintext highlighter-rouge">.img-fluid</code>.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.img-rounded</code> to <code class="language-plaintext highlighter-rouge">.rounded</code></li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.img-circle</code> to <code class="language-plaintext highlighter-rouge">.rounded-circle</code></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="tables">Tables</h3>
|
||||
|
||||
<ul>
|
||||
<li>Nearly all instances of the <code class="highlighter-rouge">></code> selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.table-condensed</code> to <code class="highlighter-rouge">.table-sm</code> for consistency.</li>
|
||||
<li>Added a new <code class="highlighter-rouge">.table-inverse</code> option.</li>
|
||||
<li>Added table header modifiers: <code class="highlighter-rouge">.thead-default</code> and <code class="highlighter-rouge">.thead-inverse</code>.</li>
|
||||
<li>Renamed contextual classes to have a <code class="highlighter-rouge">.table-</code>-prefix. Hence <code class="highlighter-rouge">.active</code>, <code class="highlighter-rouge">.success</code>, <code class="highlighter-rouge">.warning</code>, <code class="highlighter-rouge">.danger</code> and <code class="highlighter-rouge">.info</code> to <code class="highlighter-rouge">.table-active</code>, <code class="highlighter-rouge">.table-success</code>, <code class="highlighter-rouge">.table-warning</code>, <code class="highlighter-rouge">.table-danger</code> and <code class="highlighter-rouge">.table-info</code>.</li>
|
||||
<li>Nearly all instances of the <code class="language-plaintext highlighter-rouge">></code> selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.table-condensed</code> to <code class="language-plaintext highlighter-rouge">.table-sm</code> for consistency.</li>
|
||||
<li>Added a new <code class="language-plaintext highlighter-rouge">.table-inverse</code> option.</li>
|
||||
<li>Added table header modifiers: <code class="language-plaintext highlighter-rouge">.thead-default</code> and <code class="language-plaintext highlighter-rouge">.thead-inverse</code>.</li>
|
||||
<li>Renamed contextual classes to have a <code class="language-plaintext highlighter-rouge">.table-</code>-prefix. Hence <code class="language-plaintext highlighter-rouge">.active</code>, <code class="language-plaintext highlighter-rouge">.success</code>, <code class="language-plaintext highlighter-rouge">.warning</code>, <code class="language-plaintext highlighter-rouge">.danger</code> and <code class="language-plaintext highlighter-rouge">.info</code> to <code class="language-plaintext highlighter-rouge">.table-active</code>, <code class="language-plaintext highlighter-rouge">.table-success</code>, <code class="language-plaintext highlighter-rouge">.table-warning</code>, <code class="language-plaintext highlighter-rouge">.table-danger</code> and <code class="language-plaintext highlighter-rouge">.table-info</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="forms-1">Forms</h3>
|
||||
|
||||
<ul>
|
||||
<li>Moved element resets to the <code class="highlighter-rouge">_reboot.scss</code> file.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.control-label</code> to <code class="highlighter-rouge">.col-form-label</code>.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.input-lg</code> and <code class="highlighter-rouge">.input-sm</code> to <code class="highlighter-rouge">.form-control-lg</code> and <code class="highlighter-rouge">.form-control-sm</code>, respectively.</li>
|
||||
<li>Dropped <code class="highlighter-rouge">.form-group-*</code> classes for simplicity’s sake. Use <code class="highlighter-rouge">.form-control-*</code> classes instead now.</li>
|
||||
<li>Dropped <code class="highlighter-rouge">.help-block</code> and replaced it with <code class="highlighter-rouge">.form-text</code> for block-level help text. For inline help text and other flexible options, use utility classes like <code class="highlighter-rouge">.text-muted</code>.</li>
|
||||
<li>Dropped <code class="highlighter-rouge">.radio-inline</code> and <code class="highlighter-rouge">.checkbox-inline</code>.</li>
|
||||
<li>Consolidated <code class="highlighter-rouge">.checkbox</code> and <code class="highlighter-rouge">.radio</code> into <code class="highlighter-rouge">.form-check</code> and the various <code class="highlighter-rouge">.form-check-*</code> classes.</li>
|
||||
<li>Moved element resets to the <code class="language-plaintext highlighter-rouge">_reboot.scss</code> file.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.control-label</code> to <code class="language-plaintext highlighter-rouge">.col-form-label</code>.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.input-lg</code> and <code class="language-plaintext highlighter-rouge">.input-sm</code> to <code class="language-plaintext highlighter-rouge">.form-control-lg</code> and <code class="language-plaintext highlighter-rouge">.form-control-sm</code>, respectively.</li>
|
||||
<li>Dropped <code class="language-plaintext highlighter-rouge">.form-group-*</code> classes for simplicity’s sake. Use <code class="language-plaintext highlighter-rouge">.form-control-*</code> classes instead now.</li>
|
||||
<li>Dropped <code class="language-plaintext highlighter-rouge">.help-block</code> and replaced it with <code class="language-plaintext highlighter-rouge">.form-text</code> for block-level help text. For inline help text and other flexible options, use utility classes like <code class="language-plaintext highlighter-rouge">.text-muted</code>.</li>
|
||||
<li>Dropped <code class="language-plaintext highlighter-rouge">.radio-inline</code> and <code class="language-plaintext highlighter-rouge">.checkbox-inline</code>.</li>
|
||||
<li>Consolidated <code class="language-plaintext highlighter-rouge">.checkbox</code> and <code class="language-plaintext highlighter-rouge">.radio</code> into <code class="language-plaintext highlighter-rouge">.form-check</code> and the various <code class="language-plaintext highlighter-rouge">.form-check-*</code> classes.</li>
|
||||
<li>Horizontal forms overhauled:
|
||||
<ul>
|
||||
<li>Dropped the <code class="highlighter-rouge">.form-horizontal</code> class requirement.</li>
|
||||
<li><code class="highlighter-rouge">.form-group</code> no longer applies styles from the <code class="highlighter-rouge">.row</code> via mixin, so <code class="highlighter-rouge">.row</code> is now required for horizontal grid layouts (e.g., <code class="highlighter-rouge"><div class="form-group row"></code>).</li>
|
||||
<li>Added new <code class="highlighter-rouge">.col-form-label</code> class to vertically center labels with <code class="highlighter-rouge">.form-control</code>s.</li>
|
||||
<li>Added new <code class="highlighter-rouge">.form-row</code> for compact form layouts with the grid classes (swap your <code class="highlighter-rouge">.row</code> for a <code class="highlighter-rouge">.form-row</code> and go).</li>
|
||||
<li>Dropped the <code class="language-plaintext highlighter-rouge">.form-horizontal</code> class requirement.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.form-group</code> no longer applies styles from the <code class="language-plaintext highlighter-rouge">.row</code> via mixin, so <code class="language-plaintext highlighter-rouge">.row</code> is now required for horizontal grid layouts (e.g., <code class="language-plaintext highlighter-rouge"><div class="form-group row"></code>).</li>
|
||||
<li>Added new <code class="language-plaintext highlighter-rouge">.col-form-label</code> class to vertically center labels with <code class="language-plaintext highlighter-rouge">.form-control</code>s.</li>
|
||||
<li>Added new <code class="language-plaintext highlighter-rouge">.form-row</code> for compact form layouts with the grid classes (swap your <code class="language-plaintext highlighter-rouge">.row</code> for a <code class="language-plaintext highlighter-rouge">.form-row</code> and go).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Added custom forms support (for checkboxes, radios, selects, and file inputs).</li>
|
||||
<li>Replaced <code class="highlighter-rouge">.has-error</code>, <code class="highlighter-rouge">.has-warning</code>, and <code class="highlighter-rouge">.has-success</code> classes with HTML5 form validation via CSS’s <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> pseudo-classes.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.form-control-static</code> to <code class="highlighter-rouge">.form-control-plaintext</code>.</li>
|
||||
<li>Replaced <code class="language-plaintext highlighter-rouge">.has-error</code>, <code class="language-plaintext highlighter-rouge">.has-warning</code>, and <code class="language-plaintext highlighter-rouge">.has-success</code> classes with HTML5 form validation via CSS’s <code class="language-plaintext highlighter-rouge">:invalid</code> and <code class="language-plaintext highlighter-rouge">:valid</code> pseudo-classes.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.form-control-static</code> to <code class="language-plaintext highlighter-rouge">.form-control-plaintext</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="buttons">Buttons</h3>
|
||||
|
||||
<ul>
|
||||
<li>Renamed <code class="highlighter-rouge">.btn-default</code> to <code class="highlighter-rouge">.btn-secondary</code>.</li>
|
||||
<li>Dropped the <code class="highlighter-rouge">.btn-xs</code> class entirely as <code class="highlighter-rouge">.btn-sm</code> is proportionally much smaller than v3’s.</li>
|
||||
<li>The <a href="https://getbootstrap.com/docs/3.3/javascript/#buttons-stateful">stateful button</a> feature of the <code class="highlighter-rouge">button.js</code> jQuery plugin has been dropped. This includes the <code class="highlighter-rouge">$().button(string)</code> and <code class="highlighter-rouge">$().button('reset')</code> methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.btn-default</code> to <code class="language-plaintext highlighter-rouge">.btn-secondary</code>.</li>
|
||||
<li>Dropped the <code class="language-plaintext highlighter-rouge">.btn-xs</code> class entirely as <code class="language-plaintext highlighter-rouge">.btn-sm</code> is proportionally much smaller than v3’s.</li>
|
||||
<li>The <a href="https://getbootstrap.com/docs/3.3/javascript/#buttons-stateful">stateful button</a> feature of the <code class="language-plaintext highlighter-rouge">button.js</code> jQuery plugin has been dropped. This includes the <code class="language-plaintext highlighter-rouge">$().button(string)</code> and <code class="language-plaintext highlighter-rouge">$().button('reset')</code> methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
||||
<ul>
|
||||
<li>Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Change buttons’ <code class="highlighter-rouge">[disabled]</code> to <code class="highlighter-rouge">:disabled</code> as IE9+ supports <code class="highlighter-rouge">:disabled</code>. However <code class="highlighter-rouge">fieldset[disabled]</code> is still necessary because <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility">native disabled fieldsets are still buggy in IE11</a>.</li>
|
||||
<li>Change buttons’ <code class="language-plaintext highlighter-rouge">[disabled]</code> to <code class="language-plaintext highlighter-rouge">:disabled</code> as IE9+ supports <code class="language-plaintext highlighter-rouge">:disabled</code>. However <code class="language-plaintext highlighter-rouge">fieldset[disabled]</code> is still necessary because <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility">native disabled fieldsets are still buggy in IE11</a>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="button-group">Button group</h3>
|
||||
|
||||
<ul>
|
||||
<li>Rewrote component with flexbox.</li>
|
||||
<li>Removed <code class="highlighter-rouge">.btn-group-justified</code>. As a replacement you can use <code class="highlighter-rouge"><div class="btn-group d-flex" role="group"></div></code> as a wrapper around elements with <code class="highlighter-rouge">.w-100</code>.</li>
|
||||
<li>Dropped the <code class="highlighter-rouge">.btn-group-xs</code> class entirely given removal of <code class="highlighter-rouge">.btn-xs</code>.</li>
|
||||
<li>Removed <code class="language-plaintext highlighter-rouge">.btn-group-justified</code>. As a replacement you can use <code class="language-plaintext highlighter-rouge"><div class="btn-group d-flex" role="group"></div></code> as a wrapper around elements with <code class="language-plaintext highlighter-rouge">.w-100</code>.</li>
|
||||
<li>Dropped the <code class="language-plaintext highlighter-rouge">.btn-group-xs</code> class entirely given removal of <code class="language-plaintext highlighter-rouge">.btn-xs</code>.</li>
|
||||
<li>Removed explicit spacing between button groups in button toolbars; use margin utilities now.</li>
|
||||
<li>Improved documentation for use with other components.</li>
|
||||
</ul>
|
||||
@ -782,19 +786,19 @@
|
||||
<ul>
|
||||
<li>Switched from parent selectors to singular classes for all components, modifiers, etc.</li>
|
||||
<li>Simplified dropdown styles to no longer ship with upward or downward facing arrows attached to the dropdown menu.</li>
|
||||
<li>Dropdowns can be built with <code class="highlighter-rouge"><div></code>s or <code class="highlighter-rouge"><ul></code>s now.</li>
|
||||
<li>Rebuilt dropdown styles and markup to provide easy, built-in support for <code class="highlighter-rouge"><a></code> and <code class="highlighter-rouge"><button></code> based dropdown items.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.divider</code> to <code class="highlighter-rouge">.dropdown-divider</code>.</li>
|
||||
<li>Dropdown items now require <code class="highlighter-rouge">.dropdown-item</code>.</li>
|
||||
<li>Dropdown toggles no longer require an explicit <code class="highlighter-rouge"><span class="caret"></span></code>; this is now provided automatically via CSS’s <code class="highlighter-rouge">::after</code> on <code class="highlighter-rouge">.dropdown-toggle</code>.</li>
|
||||
<li>Dropdowns can be built with <code class="language-plaintext highlighter-rouge"><div></code>s or <code class="language-plaintext highlighter-rouge"><ul></code>s now.</li>
|
||||
<li>Rebuilt dropdown styles and markup to provide easy, built-in support for <code class="language-plaintext highlighter-rouge"><a></code> and <code class="language-plaintext highlighter-rouge"><button></code> based dropdown items.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.divider</code> to <code class="language-plaintext highlighter-rouge">.dropdown-divider</code>.</li>
|
||||
<li>Dropdown items now require <code class="language-plaintext highlighter-rouge">.dropdown-item</code>.</li>
|
||||
<li>Dropdown toggles no longer require an explicit <code class="language-plaintext highlighter-rouge"><span class="caret"></span></code>; this is now provided automatically via CSS’s <code class="language-plaintext highlighter-rouge">::after</code> on <code class="language-plaintext highlighter-rouge">.dropdown-toggle</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="grid-system-1">Grid system</h3>
|
||||
|
||||
<ul>
|
||||
<li>Added a new <code class="highlighter-rouge">576px</code> grid breakpoint as <code class="highlighter-rouge">sm</code>, meaning there are now five total tiers (<code class="highlighter-rouge">xs</code>, <code class="highlighter-rouge">sm</code>, <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, and <code class="highlighter-rouge">xl</code>).</li>
|
||||
<li>Renamed the responsive grid modifier classes from <code class="highlighter-rouge">.col-{breakpoint}-{modifier}-{size}</code> to <code class="highlighter-rouge">.{modifier}-{breakpoint}-{size}</code> for simpler grid classes.</li>
|
||||
<li>Dropped push and pull modifier classes for the new flexbox-powered <code class="highlighter-rouge">order</code> classes. For example, instead of <code class="highlighter-rouge">.col-8.push-4</code> and <code class="highlighter-rouge">.col-4.pull-8</code>, you’d use <code class="highlighter-rouge">.col-8.order-2</code> and <code class="highlighter-rouge">.col-4.order-1</code>.</li>
|
||||
<li>Added a new <code class="language-plaintext highlighter-rouge">576px</code> grid breakpoint as <code class="language-plaintext highlighter-rouge">sm</code>, meaning there are now five total tiers (<code class="language-plaintext highlighter-rouge">xs</code>, <code class="language-plaintext highlighter-rouge">sm</code>, <code class="language-plaintext highlighter-rouge">md</code>, <code class="language-plaintext highlighter-rouge">lg</code>, and <code class="language-plaintext highlighter-rouge">xl</code>).</li>
|
||||
<li>Renamed the responsive grid modifier classes from <code class="language-plaintext highlighter-rouge">.col-{breakpoint}-{modifier}-{size}</code> to <code class="language-plaintext highlighter-rouge">.{modifier}-{breakpoint}-{size}</code> for simpler grid classes.</li>
|
||||
<li>Dropped push and pull modifier classes for the new flexbox-powered <code class="language-plaintext highlighter-rouge">order</code> classes. For example, instead of <code class="language-plaintext highlighter-rouge">.col-8.push-4</code> and <code class="language-plaintext highlighter-rouge">.col-4.pull-8</code>, you’d use <code class="language-plaintext highlighter-rouge">.col-8.order-2</code> and <code class="language-plaintext highlighter-rouge">.col-4.order-1</code>.</li>
|
||||
<li>Added flexbox utility classes for grid system and components.</li>
|
||||
</ul>
|
||||
|
||||
@ -802,8 +806,8 @@
|
||||
|
||||
<ul>
|
||||
<li>Rewrote component with flexbox.</li>
|
||||
<li>Replaced <code class="highlighter-rouge">a.list-group-item</code> with an explicit class, <code class="highlighter-rouge">.list-group-item-action</code>, for styling link and button versions of list group items.</li>
|
||||
<li>Added <code class="highlighter-rouge">.list-group-flush</code> class for use with cards.</li>
|
||||
<li>Replaced <code class="language-plaintext highlighter-rouge">a.list-group-item</code> with an explicit class, <code class="language-plaintext highlighter-rouge">.list-group-item-action</code>, for styling link and button versions of list group items.</li>
|
||||
<li>Added <code class="language-plaintext highlighter-rouge">.list-group-flush</code> class for use with cards.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="modal">Modal</h3>
|
||||
@ -811,15 +815,15 @@
|
||||
<ul>
|
||||
<li>Rewrote component with flexbox.</li>
|
||||
<li>Given the move to flexbox, alignment of dismiss icons in the header is likely broken as we’re no longer using floats. Floated content comes first, but with flexbox that’s no longer the case. Update your dismiss icons to come after modal titles to fix.</li>
|
||||
<li>The <code class="highlighter-rouge">remote</code> option (which could be used to automatically load and inject external content into a modal) and the corresponding <code class="highlighter-rouge">loaded.bs.modal</code> event were removed. We recommend instead using client-side templating or a data binding framework, or calling <a href="https://api.jquery.com/load/">jQuery.load</a> yourself.</li>
|
||||
<li>The <code class="language-plaintext highlighter-rouge">remote</code> option (which could be used to automatically load and inject external content into a modal) and the corresponding <code class="language-plaintext highlighter-rouge">loaded.bs.modal</code> event were removed. We recommend instead using client-side templating or a data binding framework, or calling <a href="https://api.jquery.com/load/">jQuery.load</a> yourself.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="navs">Navs</h3>
|
||||
|
||||
<ul>
|
||||
<li>Rewrote component with flexbox.</li>
|
||||
<li>Dropped nearly all <code class="highlighter-rouge">></code> selectors for simpler styling via un-nested classes.</li>
|
||||
<li>Instead of HTML-specific selectors like <code class="highlighter-rouge">.nav > li > a</code>, we use separate classes for <code class="highlighter-rouge">.nav</code>s, <code class="highlighter-rouge">.nav-item</code>s, and <code class="highlighter-rouge">.nav-link</code>s. This makes your HTML more flexible while bringing along increased extensibility.</li>
|
||||
<li>Dropped nearly all <code class="language-plaintext highlighter-rouge">></code> selectors for simpler styling via un-nested classes.</li>
|
||||
<li>Instead of HTML-specific selectors like <code class="language-plaintext highlighter-rouge">.nav > li > a</code>, we use separate classes for <code class="language-plaintext highlighter-rouge">.nav</code>s, <code class="language-plaintext highlighter-rouge">.nav-item</code>s, and <code class="language-plaintext highlighter-rouge">.nav-link</code>s. This makes your HTML more flexible while bringing along increased extensibility.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="navbar">Navbar</h3>
|
||||
@ -827,13 +831,13 @@
|
||||
<p>The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.</p>
|
||||
|
||||
<ul>
|
||||
<li>Responsive navbar behaviors are now applied to the <code class="highlighter-rouge">.navbar</code> class via the <strong>required</strong> <code class="highlighter-rouge">.navbar-expand-{breakpoint}</code> where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.</li>
|
||||
<li><code class="highlighter-rouge">.navbar-default</code> is now <code class="highlighter-rouge">.navbar-light</code>, though <code class="highlighter-rouge">.navbar-dark</code> remains the same. <strong>One of these is required on each navbar.</strong> However, these classes no longer set <code class="highlighter-rouge">background-color</code>s; instead they essentially only affect <code class="highlighter-rouge">color</code>.</li>
|
||||
<li>Navbars now require a background declaration of some kind. Choose from our background utilities (<code class="highlighter-rouge">.bg-*</code>) or set your own with the light/inverse classes above <a href="/docs/4.5/components/navbar/#color-schemes">for mad customization</a>.</li>
|
||||
<li>Responsive navbar behaviors are now applied to the <code class="language-plaintext highlighter-rouge">.navbar</code> class via the <strong>required</strong> <code class="language-plaintext highlighter-rouge">.navbar-expand-{breakpoint}</code> where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.navbar-default</code> is now <code class="language-plaintext highlighter-rouge">.navbar-light</code>, though <code class="language-plaintext highlighter-rouge">.navbar-dark</code> remains the same. <strong>One of these is required on each navbar.</strong> However, these classes no longer set <code class="language-plaintext highlighter-rouge">background-color</code>s; instead they essentially only affect <code class="language-plaintext highlighter-rouge">color</code>.</li>
|
||||
<li>Navbars now require a background declaration of some kind. Choose from our background utilities (<code class="language-plaintext highlighter-rouge">.bg-*</code>) or set your own with the light/inverse classes above <a href="/docs/4.5/components/navbar/#color-schemes">for mad customization</a>.</li>
|
||||
<li>Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.</li>
|
||||
<li><code class="highlighter-rouge">.navbar-toggle</code> is now <code class="highlighter-rouge">.navbar-toggler</code> and has different styles and inner markup (no more three <code class="highlighter-rouge"><span></code>s).</li>
|
||||
<li>Dropped the <code class="highlighter-rouge">.navbar-form</code> class entirely. It’s no longer necessary; instead, just use <code class="highlighter-rouge">.form-inline</code> and apply margin utilities as necessary.</li>
|
||||
<li>Navbars no longer include <code class="highlighter-rouge">margin-bottom</code> or <code class="highlighter-rouge">border-radius</code> by default. Use utilities as necessary.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.navbar-toggle</code> is now <code class="language-plaintext highlighter-rouge">.navbar-toggler</code> and has different styles and inner markup (no more three <code class="language-plaintext highlighter-rouge"><span></code>s).</li>
|
||||
<li>Dropped the <code class="language-plaintext highlighter-rouge">.navbar-form</code> class entirely. It’s no longer necessary; instead, just use <code class="language-plaintext highlighter-rouge">.form-inline</code> and apply margin utilities as necessary.</li>
|
||||
<li>Navbars no longer include <code class="language-plaintext highlighter-rouge">margin-bottom</code> or <code class="language-plaintext highlighter-rouge">border-radius</code> by default. Use utilities as necessary.</li>
|
||||
<li>All examples featuring navbars have been updated to include new markup.</li>
|
||||
</ul>
|
||||
|
||||
@ -841,23 +845,23 @@
|
||||
|
||||
<ul>
|
||||
<li>Rewrote component with flexbox.</li>
|
||||
<li>Explicit classes (<code class="highlighter-rouge">.page-item</code>, <code class="highlighter-rouge">.page-link</code>) are now required on the descendants of <code class="highlighter-rouge">.pagination</code>s</li>
|
||||
<li>Dropped the <code class="highlighter-rouge">.pager</code> component entirely as it was little more than customized outline buttons.</li>
|
||||
<li>Explicit classes (<code class="language-plaintext highlighter-rouge">.page-item</code>, <code class="language-plaintext highlighter-rouge">.page-link</code>) are now required on the descendants of <code class="language-plaintext highlighter-rouge">.pagination</code>s</li>
|
||||
<li>Dropped the <code class="language-plaintext highlighter-rouge">.pager</code> component entirely as it was little more than customized outline buttons.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="breadcrumbs">Breadcrumbs</h3>
|
||||
|
||||
<ul>
|
||||
<li>An explicit class, <code class="highlighter-rouge">.breadcrumb-item</code>, is now required on the descendants of <code class="highlighter-rouge">.breadcrumb</code>s</li>
|
||||
<li>An explicit class, <code class="language-plaintext highlighter-rouge">.breadcrumb-item</code>, is now required on the descendants of <code class="language-plaintext highlighter-rouge">.breadcrumb</code>s</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="labels-and-badges">Labels and badges</h3>
|
||||
|
||||
<ul>
|
||||
<li>Consolidated <code class="highlighter-rouge">.label</code> and <code class="highlighter-rouge">.badge</code> to disambiguate from the <code class="highlighter-rouge"><label></code> element and simplify related components.</li>
|
||||
<li>Added <code class="highlighter-rouge">.badge-pill</code> as modifier for rounded “pill” look.</li>
|
||||
<li>Consolidated <code class="language-plaintext highlighter-rouge">.label</code> and <code class="language-plaintext highlighter-rouge">.badge</code> to disambiguate from the <code class="language-plaintext highlighter-rouge"><label></code> element and simplify related components.</li>
|
||||
<li>Added <code class="language-plaintext highlighter-rouge">.badge-pill</code> as modifier for rounded “pill” look.</li>
|
||||
<li>Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.</li>
|
||||
<li><code class="highlighter-rouge">.badge-default</code> has been dropped and <code class="highlighter-rouge">.badge-secondary</code> added to match component modifier classes used elsewhere.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.badge-default</code> has been dropped and <code class="language-plaintext highlighter-rouge">.badge-secondary</code> added to match component modifier classes used elsewhere.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="panels-thumbnails-and-wells">Panels, thumbnails, and wells</h3>
|
||||
@ -867,32 +871,32 @@
|
||||
<h3 id="panels">Panels</h3>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.panel</code> to <code class="highlighter-rouge">.card</code>, now built with flexbox.</li>
|
||||
<li><code class="highlighter-rouge">.panel-default</code> removed and no replacement.</li>
|
||||
<li><code class="highlighter-rouge">.panel-group</code> removed and no replacement. <code class="highlighter-rouge">.card-group</code> is not a replacement, it is different.</li>
|
||||
<li><code class="highlighter-rouge">.panel-heading</code> to <code class="highlighter-rouge">.card-header</code></li>
|
||||
<li><code class="highlighter-rouge">.panel-title</code> to <code class="highlighter-rouge">.card-title</code>. Depending on the desired look, you may also want to use <a href="/docs/4.5/content/typography/#headings">heading elements or classes</a> (e.g. <code class="highlighter-rouge"><h3></code>, <code class="highlighter-rouge">.h3</code>) or bold elements or classes (e.g. <code class="highlighter-rouge"><strong></code>, <code class="highlighter-rouge"><b></code>, <a href="/docs/4.5/utilities/text/#font-weight-and-italics"><code class="highlighter-rouge">.font-weight-bold</code></a>). Note that <code class="highlighter-rouge">.card-title</code>, while similarly named, produces a different look than <code class="highlighter-rouge">.panel-title</code>.</li>
|
||||
<li><code class="highlighter-rouge">.panel-body</code> to <code class="highlighter-rouge">.card-body</code></li>
|
||||
<li><code class="highlighter-rouge">.panel-footer</code> to <code class="highlighter-rouge">.card-footer</code></li>
|
||||
<li><code class="highlighter-rouge">.panel-primary</code>, <code class="highlighter-rouge">.panel-success</code>, <code class="highlighter-rouge">.panel-info</code>, <code class="highlighter-rouge">.panel-warning</code>, and <code class="highlighter-rouge">.panel-danger</code> have been dropped for <code class="highlighter-rouge">.bg-</code>, <code class="highlighter-rouge">.text-</code>, and <code class="highlighter-rouge">.border</code> utilities generated from our <code class="highlighter-rouge">$theme-colors</code> Sass map.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel</code> to <code class="language-plaintext highlighter-rouge">.card</code>, now built with flexbox.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-default</code> removed and no replacement.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-group</code> removed and no replacement. <code class="language-plaintext highlighter-rouge">.card-group</code> is not a replacement, it is different.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-heading</code> to <code class="language-plaintext highlighter-rouge">.card-header</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-title</code> to <code class="language-plaintext highlighter-rouge">.card-title</code>. Depending on the desired look, you may also want to use <a href="/docs/4.5/content/typography/#headings">heading elements or classes</a> (e.g. <code class="language-plaintext highlighter-rouge"><h3></code>, <code class="language-plaintext highlighter-rouge">.h3</code>) or bold elements or classes (e.g. <code class="language-plaintext highlighter-rouge"><strong></code>, <code class="language-plaintext highlighter-rouge"><b></code>, <a href="/docs/4.5/utilities/text/#font-weight-and-italics"><code class="language-plaintext highlighter-rouge">.font-weight-bold</code></a>). Note that <code class="language-plaintext highlighter-rouge">.card-title</code>, while similarly named, produces a different look than <code class="language-plaintext highlighter-rouge">.panel-title</code>.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-body</code> to <code class="language-plaintext highlighter-rouge">.card-body</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-footer</code> to <code class="language-plaintext highlighter-rouge">.card-footer</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-primary</code>, <code class="language-plaintext highlighter-rouge">.panel-success</code>, <code class="language-plaintext highlighter-rouge">.panel-info</code>, <code class="language-plaintext highlighter-rouge">.panel-warning</code>, and <code class="language-plaintext highlighter-rouge">.panel-danger</code> have been dropped for <code class="language-plaintext highlighter-rouge">.bg-</code>, <code class="language-plaintext highlighter-rouge">.text-</code>, and <code class="language-plaintext highlighter-rouge">.border</code> utilities generated from our <code class="language-plaintext highlighter-rouge">$theme-colors</code> Sass map.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="progress">Progress</h3>
|
||||
|
||||
<ul>
|
||||
<li>Replaced contextual <code class="highlighter-rouge">.progress-bar-*</code> classes with <code class="highlighter-rouge">.bg-*</code> utilities. For example, <code class="highlighter-rouge">class="progress-bar progress-bar-danger"</code> becomes <code class="highlighter-rouge">class="progress-bar bg-danger"</code>.</li>
|
||||
<li>Replaced <code class="highlighter-rouge">.active</code> for animated progress bars with <code class="highlighter-rouge">.progress-bar-animated</code>.</li>
|
||||
<li>Replaced contextual <code class="language-plaintext highlighter-rouge">.progress-bar-*</code> classes with <code class="language-plaintext highlighter-rouge">.bg-*</code> utilities. For example, <code class="language-plaintext highlighter-rouge">class="progress-bar progress-bar-danger"</code> becomes <code class="language-plaintext highlighter-rouge">class="progress-bar bg-danger"</code>.</li>
|
||||
<li>Replaced <code class="language-plaintext highlighter-rouge">.active</code> for animated progress bars with <code class="language-plaintext highlighter-rouge">.progress-bar-animated</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="carousel">Carousel</h3>
|
||||
|
||||
<ul>
|
||||
<li>Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.</li>
|
||||
<li>All CSS has been un-nested and renamed, ensuring each class is prefixed with <code class="highlighter-rouge">.carousel-</code>.
|
||||
<li>All CSS has been un-nested and renamed, ensuring each class is prefixed with <code class="language-plaintext highlighter-rouge">.carousel-</code>.
|
||||
<ul>
|
||||
<li>For carousel items, <code class="highlighter-rouge">.next</code>, <code class="highlighter-rouge">.prev</code>, <code class="highlighter-rouge">.left</code>, and <code class="highlighter-rouge">.right</code> are now <code class="highlighter-rouge">.carousel-item-next</code>, <code class="highlighter-rouge">.carousel-item-prev</code>, <code class="highlighter-rouge">.carousel-item-left</code>, and <code class="highlighter-rouge">.carousel-item-right</code>.</li>
|
||||
<li><code class="highlighter-rouge">.item</code> is also now <code class="highlighter-rouge">.carousel-item</code>.</li>
|
||||
<li>For prev/next controls, <code class="highlighter-rouge">.carousel-control.right</code> and <code class="highlighter-rouge">.carousel-control.left</code> are now <code class="highlighter-rouge">.carousel-control-next</code> and <code class="highlighter-rouge">.carousel-control-prev</code>, meaning they no longer require a specific base class.</li>
|
||||
<li>For carousel items, <code class="language-plaintext highlighter-rouge">.next</code>, <code class="language-plaintext highlighter-rouge">.prev</code>, <code class="language-plaintext highlighter-rouge">.left</code>, and <code class="language-plaintext highlighter-rouge">.right</code> are now <code class="language-plaintext highlighter-rouge">.carousel-item-next</code>, <code class="language-plaintext highlighter-rouge">.carousel-item-prev</code>, <code class="language-plaintext highlighter-rouge">.carousel-item-left</code>, and <code class="language-plaintext highlighter-rouge">.carousel-item-right</code>.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.item</code> is also now <code class="language-plaintext highlighter-rouge">.carousel-item</code>.</li>
|
||||
<li>For prev/next controls, <code class="language-plaintext highlighter-rouge">.carousel-control.right</code> and <code class="language-plaintext highlighter-rouge">.carousel-control.left</code> are now <code class="language-plaintext highlighter-rouge">.carousel-control-next</code> and <code class="language-plaintext highlighter-rouge">.carousel-control-prev</code>, meaning they no longer require a specific base class.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.</li>
|
||||
@ -912,21 +916,21 @@
|
||||
<ul>
|
||||
<li><strong>Display, hidden, and more:</strong>
|
||||
<ul>
|
||||
<li>Made display utilities responsive (e.g., <code class="highlighter-rouge">.d-none</code> and <code class="highlighter-rouge">d-{sm,md,lg,xl}-none</code>).</li>
|
||||
<li>Dropped the bulk of <code class="highlighter-rouge">.hidden-*</code> utilities for new <a href="/docs/4.5/utilities/display/">display utilities</a>. For example, instead of <code class="highlighter-rouge">.hidden-sm-up</code>, use <code class="highlighter-rouge">.d-sm-none</code>. Renamed the <code class="highlighter-rouge">.hidden-print</code> utilities to use the display utility naming scheme. More info under the <a href="#responsive-utilities">Responsive utilities</a> section of this page.</li>
|
||||
<li>Added <code class="highlighter-rouge">.float-{sm,md,lg,xl}-{left,right,none}</code> classes for responsive floats and removed <code class="highlighter-rouge">.pull-left</code> and <code class="highlighter-rouge">.pull-right</code> since they’re redundant to <code class="highlighter-rouge">.float-left</code> and <code class="highlighter-rouge">.float-right</code>.</li>
|
||||
<li>Made display utilities responsive (e.g., <code class="language-plaintext highlighter-rouge">.d-none</code> and <code class="language-plaintext highlighter-rouge">d-{sm,md,lg,xl}-none</code>).</li>
|
||||
<li>Dropped the bulk of <code class="language-plaintext highlighter-rouge">.hidden-*</code> utilities for new <a href="/docs/4.5/utilities/display/">display utilities</a>. For example, instead of <code class="language-plaintext highlighter-rouge">.hidden-sm-up</code>, use <code class="language-plaintext highlighter-rouge">.d-sm-none</code>. Renamed the <code class="language-plaintext highlighter-rouge">.hidden-print</code> utilities to use the display utility naming scheme. More info under the <a href="#responsive-utilities">Responsive utilities</a> section of this page.</li>
|
||||
<li>Added <code class="language-plaintext highlighter-rouge">.float-{sm,md,lg,xl}-{left,right,none}</code> classes for responsive floats and removed <code class="language-plaintext highlighter-rouge">.pull-left</code> and <code class="language-plaintext highlighter-rouge">.pull-right</code> since they’re redundant to <code class="language-plaintext highlighter-rouge">.float-left</code> and <code class="language-plaintext highlighter-rouge">.float-right</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>Type:</strong>
|
||||
<ul>
|
||||
<li>Added responsive variations to our text alignment classes <code class="highlighter-rouge">.text-{sm,md,lg,xl}-{left,center,right}</code>.</li>
|
||||
<li>Added responsive variations to our text alignment classes <code class="language-plaintext highlighter-rouge">.text-{sm,md,lg,xl}-{left,center,right}</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>Alignment and spacing:</strong>
|
||||
<ul>
|
||||
<li>Added new <a href="/docs/4.5/utilities/spacing/">responsive margin and padding utilities</a> for all sides, plus vertical and horizontal shorthands.</li>
|
||||
<li>Added boatload of <a href="/docs/4.5/utilities/flex/">flexbox utilities</a>.</li>
|
||||
<li>Dropped <code class="highlighter-rouge">.center-block</code> for the new <code class="highlighter-rouge">.mx-auto</code> class.</li>
|
||||
<li>Dropped <code class="language-plaintext highlighter-rouge">.center-block</code> for the new <code class="language-plaintext highlighter-rouge">.mx-auto</code> class.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Clearfix updated to drop support for older browser versions.</li>
|
||||
@ -936,7 +940,7 @@
|
||||
|
||||
<p>Bootstrap 3’s <a href="https://www.lifewire.com/css-vendor-prefixes-3466867">vendor prefix</a> mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, they’re no longer necessary.</p>
|
||||
|
||||
<p>Removed the following mixins: <code class="highlighter-rouge">animation</code>, <code class="highlighter-rouge">animation-delay</code>, <code class="highlighter-rouge">animation-direction</code>, <code class="highlighter-rouge">animation-duration</code>, <code class="highlighter-rouge">animation-fill-mode</code>, <code class="highlighter-rouge">animation-iteration-count</code>, <code class="highlighter-rouge">animation-name</code>, <code class="highlighter-rouge">animation-timing-function</code>, <code class="highlighter-rouge">backface-visibility</code>, <code class="highlighter-rouge">box-sizing</code>, <code class="highlighter-rouge">content-columns</code>, <code class="highlighter-rouge">hyphens</code>, <code class="highlighter-rouge">opacity</code>, <code class="highlighter-rouge">perspective</code>, <code class="highlighter-rouge">perspective-origin</code>, <code class="highlighter-rouge">rotate</code>, <code class="highlighter-rouge">rotateX</code>, <code class="highlighter-rouge">rotateY</code>, <code class="highlighter-rouge">scale</code>, <code class="highlighter-rouge">scaleX</code>, <code class="highlighter-rouge">scaleY</code>, <code class="highlighter-rouge">skew</code>, <code class="highlighter-rouge">transform-origin</code>, <code class="highlighter-rouge">transition-delay</code>, <code class="highlighter-rouge">transition-duration</code>, <code class="highlighter-rouge">transition-property</code>, <code class="highlighter-rouge">transition-timing-function</code>, <code class="highlighter-rouge">transition-transform</code>, <code class="highlighter-rouge">translate</code>, <code class="highlighter-rouge">translate3d</code>, <code class="highlighter-rouge">user-select</code></p>
|
||||
<p>Removed the following mixins: <code class="language-plaintext highlighter-rouge">animation</code>, <code class="language-plaintext highlighter-rouge">animation-delay</code>, <code class="language-plaintext highlighter-rouge">animation-direction</code>, <code class="language-plaintext highlighter-rouge">animation-duration</code>, <code class="language-plaintext highlighter-rouge">animation-fill-mode</code>, <code class="language-plaintext highlighter-rouge">animation-iteration-count</code>, <code class="language-plaintext highlighter-rouge">animation-name</code>, <code class="language-plaintext highlighter-rouge">animation-timing-function</code>, <code class="language-plaintext highlighter-rouge">backface-visibility</code>, <code class="language-plaintext highlighter-rouge">box-sizing</code>, <code class="language-plaintext highlighter-rouge">content-columns</code>, <code class="language-plaintext highlighter-rouge">hyphens</code>, <code class="language-plaintext highlighter-rouge">opacity</code>, <code class="language-plaintext highlighter-rouge">perspective</code>, <code class="language-plaintext highlighter-rouge">perspective-origin</code>, <code class="language-plaintext highlighter-rouge">rotate</code>, <code class="language-plaintext highlighter-rouge">rotateX</code>, <code class="language-plaintext highlighter-rouge">rotateY</code>, <code class="language-plaintext highlighter-rouge">scale</code>, <code class="language-plaintext highlighter-rouge">scaleX</code>, <code class="language-plaintext highlighter-rouge">scaleY</code>, <code class="language-plaintext highlighter-rouge">skew</code>, <code class="language-plaintext highlighter-rouge">transform-origin</code>, <code class="language-plaintext highlighter-rouge">transition-delay</code>, <code class="language-plaintext highlighter-rouge">transition-duration</code>, <code class="language-plaintext highlighter-rouge">transition-property</code>, <code class="language-plaintext highlighter-rouge">transition-timing-function</code>, <code class="language-plaintext highlighter-rouge">transition-transform</code>, <code class="language-plaintext highlighter-rouge">translate</code>, <code class="language-plaintext highlighter-rouge">translate3d</code>, <code class="language-plaintext highlighter-rouge">user-select</code></p>
|
||||
|
||||
<h2 id="documentation">Documentation</h2>
|
||||
|
||||
@ -945,9 +949,9 @@
|
||||
<ul>
|
||||
<li>We’re still using Jekyll, but we have plugins in the mix:
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">bugify.rb</code> is used to efficiently list out the entries on our <a href="/docs/4.5/browser-bugs/">browser bugs</a> page.</li>
|
||||
<li><code class="highlighter-rouge">example.rb</code> is a custom fork of the default <code class="highlighter-rouge">highlight.rb</code> plugin, allowing for easier example-code handling.</li>
|
||||
<li><code class="highlighter-rouge">callout.rb</code> is a similar custom fork of that, but designed for our special docs callouts.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">bugify.rb</code> is used to efficiently list out the entries on our <a href="/docs/4.5/browser-bugs/">browser bugs</a> page.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">example.rb</code> is a custom fork of the default <code class="language-plaintext highlighter-rouge">highlight.rb</code> plugin, allowing for easier example-code handling.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">callout.rb</code> is a similar custom fork of that, but designed for our special docs callouts.</li>
|
||||
<li><a href="https://github.com/toshimaru/jekyll-toc">jekyll-toc</a> is used to generate our table of contents.</li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -958,27 +962,27 @@
|
||||
|
||||
<h3 id="responsive-utilities">Responsive utilities</h3>
|
||||
|
||||
<p>All <code class="highlighter-rouge">@screen-</code> variables have been removed in v4.0.0. Use the <code class="highlighter-rouge">media-breakpoint-up()</code>, <code class="highlighter-rouge">media-breakpoint-down()</code>, or <code class="highlighter-rouge">media-breakpoint-only()</code> Sass mixins or the <code class="highlighter-rouge">$grid-breakpoints</code> Sass map instead.</p>
|
||||
<p>All <code class="language-plaintext highlighter-rouge">@screen-</code> variables have been removed in v4.0.0. Use the <code class="language-plaintext highlighter-rouge">media-breakpoint-up()</code>, <code class="language-plaintext highlighter-rouge">media-breakpoint-down()</code>, or <code class="language-plaintext highlighter-rouge">media-breakpoint-only()</code> Sass mixins or the <code class="language-plaintext highlighter-rouge">$grid-breakpoints</code> Sass map instead.</p>
|
||||
|
||||
<p>Our responsive utility classes have largely been removed in favor of explicit <code class="highlighter-rouge">display</code> utilities.</p>
|
||||
<p>Our responsive utility classes have largely been removed in favor of explicit <code class="language-plaintext highlighter-rouge">display</code> utilities.</p>
|
||||
|
||||
<ul>
|
||||
<li>The <code class="highlighter-rouge">.hidden</code> and <code class="highlighter-rouge">.show</code> classes have been removed because they conflicted with jQuery’s <code class="highlighter-rouge">$(...).hide()</code> and <code class="highlighter-rouge">$(...).show()</code> methods. Instead, try toggling the <code class="highlighter-rouge">[hidden]</code> attribute or use inline styles like <code class="highlighter-rouge">style="display: none;"</code> and <code class="highlighter-rouge">style="display: block;"</code>.</li>
|
||||
<li>All <code class="highlighter-rouge">.hidden-</code> classes have been removed, save for the print utilities which have been renamed.
|
||||
<li>The <code class="language-plaintext highlighter-rouge">.hidden</code> and <code class="language-plaintext highlighter-rouge">.show</code> classes have been removed because they conflicted with jQuery’s <code class="language-plaintext highlighter-rouge">$(...).hide()</code> and <code class="language-plaintext highlighter-rouge">$(...).show()</code> methods. Instead, try toggling the <code class="language-plaintext highlighter-rouge">[hidden]</code> attribute or use inline styles like <code class="language-plaintext highlighter-rouge">style="display: none;"</code> and <code class="language-plaintext highlighter-rouge">style="display: block;"</code>.</li>
|
||||
<li>All <code class="language-plaintext highlighter-rouge">.hidden-</code> classes have been removed, save for the print utilities which have been renamed.
|
||||
<ul>
|
||||
<li>Removed from v3: <code class="highlighter-rouge">.hidden-xs</code> <code class="highlighter-rouge">.hidden-sm</code> <code class="highlighter-rouge">.hidden-md</code> <code class="highlighter-rouge">.hidden-lg</code> <code class="highlighter-rouge">.visible-xs-block</code> <code class="highlighter-rouge">.visible-xs-inline</code> <code class="highlighter-rouge">.visible-xs-inline-block</code> <code class="highlighter-rouge">.visible-sm-block</code> <code class="highlighter-rouge">.visible-sm-inline</code> <code class="highlighter-rouge">.visible-sm-inline-block</code> <code class="highlighter-rouge">.visible-md-block</code> <code class="highlighter-rouge">.visible-md-inline</code> <code class="highlighter-rouge">.visible-md-inline-block</code> <code class="highlighter-rouge">.visible-lg-block</code> <code class="highlighter-rouge">.visible-lg-inline</code> <code class="highlighter-rouge">.visible-lg-inline-block</code></li>
|
||||
<li>Removed from v4 alphas: <code class="highlighter-rouge">.hidden-xs-up</code> <code class="highlighter-rouge">.hidden-xs-down</code> <code class="highlighter-rouge">.hidden-sm-up</code> <code class="highlighter-rouge">.hidden-sm-down</code> <code class="highlighter-rouge">.hidden-md-up</code> <code class="highlighter-rouge">.hidden-md-down</code> <code class="highlighter-rouge">.hidden-lg-up</code> <code class="highlighter-rouge">.hidden-lg-down</code></li>
|
||||
<li>Removed from v3: <code class="language-plaintext highlighter-rouge">.hidden-xs</code> <code class="language-plaintext highlighter-rouge">.hidden-sm</code> <code class="language-plaintext highlighter-rouge">.hidden-md</code> <code class="language-plaintext highlighter-rouge">.hidden-lg</code> <code class="language-plaintext highlighter-rouge">.visible-xs-block</code> <code class="language-plaintext highlighter-rouge">.visible-xs-inline</code> <code class="language-plaintext highlighter-rouge">.visible-xs-inline-block</code> <code class="language-plaintext highlighter-rouge">.visible-sm-block</code> <code class="language-plaintext highlighter-rouge">.visible-sm-inline</code> <code class="language-plaintext highlighter-rouge">.visible-sm-inline-block</code> <code class="language-plaintext highlighter-rouge">.visible-md-block</code> <code class="language-plaintext highlighter-rouge">.visible-md-inline</code> <code class="language-plaintext highlighter-rouge">.visible-md-inline-block</code> <code class="language-plaintext highlighter-rouge">.visible-lg-block</code> <code class="language-plaintext highlighter-rouge">.visible-lg-inline</code> <code class="language-plaintext highlighter-rouge">.visible-lg-inline-block</code></li>
|
||||
<li>Removed from v4 alphas: <code class="language-plaintext highlighter-rouge">.hidden-xs-up</code> <code class="language-plaintext highlighter-rouge">.hidden-xs-down</code> <code class="language-plaintext highlighter-rouge">.hidden-sm-up</code> <code class="language-plaintext highlighter-rouge">.hidden-sm-down</code> <code class="language-plaintext highlighter-rouge">.hidden-md-up</code> <code class="language-plaintext highlighter-rouge">.hidden-md-down</code> <code class="language-plaintext highlighter-rouge">.hidden-lg-up</code> <code class="language-plaintext highlighter-rouge">.hidden-lg-down</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Print utilities no longer start with <code class="highlighter-rouge">.hidden-</code> or <code class="highlighter-rouge">.visible-</code>, but with <code class="highlighter-rouge">.d-print-</code>.
|
||||
<li>Print utilities no longer start with <code class="language-plaintext highlighter-rouge">.hidden-</code> or <code class="language-plaintext highlighter-rouge">.visible-</code>, but with <code class="language-plaintext highlighter-rouge">.d-print-</code>.
|
||||
<ul>
|
||||
<li>Old names: <code class="highlighter-rouge">.visible-print-block</code>, <code class="highlighter-rouge">.visible-print-inline</code>, <code class="highlighter-rouge">.visible-print-inline-block</code>, <code class="highlighter-rouge">.hidden-print</code></li>
|
||||
<li>New classes: <code class="highlighter-rouge">.d-print-block</code>, <code class="highlighter-rouge">.d-print-inline</code>, <code class="highlighter-rouge">.d-print-inline-block</code>, <code class="highlighter-rouge">.d-print-none</code></li>
|
||||
<li>Old names: <code class="language-plaintext highlighter-rouge">.visible-print-block</code>, <code class="language-plaintext highlighter-rouge">.visible-print-inline</code>, <code class="language-plaintext highlighter-rouge">.visible-print-inline-block</code>, <code class="language-plaintext highlighter-rouge">.hidden-print</code></li>
|
||||
<li>New classes: <code class="language-plaintext highlighter-rouge">.d-print-block</code>, <code class="language-plaintext highlighter-rouge">.d-print-inline</code>, <code class="language-plaintext highlighter-rouge">.d-print-inline-block</code>, <code class="language-plaintext highlighter-rouge">.d-print-none</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Rather than using explicit <code class="highlighter-rouge">.visible-*</code> classes, you make an element visible by simply not hiding it at that screen size. You can combine one <code class="highlighter-rouge">.d-*-none</code> class with one <code class="highlighter-rouge">.d-*-block</code> class to show an element only on a given interval of screen sizes (e.g. <code class="highlighter-rouge">.d-none.d-md-block.d-xl-none</code> shows the element only on medium and large devices).</p>
|
||||
<p>Rather than using explicit <code class="language-plaintext highlighter-rouge">.visible-*</code> classes, you make an element visible by simply not hiding it at that screen size. You can combine one <code class="language-plaintext highlighter-rouge">.d-*-none</code> class with one <code class="language-plaintext highlighter-rouge">.d-*-block</code> class to show an element only on a given interval of screen sizes (e.g. <code class="language-plaintext highlighter-rouge">.d-none.d-md-block.d-xl-none</code> shows the element only on medium and large devices).</p>
|
||||
|
||||
<p>Note that the changes to the grid breakpoints in v4 means that you’ll need to go one breakpoint larger to achieve the same results. The new responsive utility classes don’t attempt to accommodate less common cases where an element’s visibility can’t be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.</p>
|
||||
|
||||
@ -987,6 +991,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/borders/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -482,7 +483,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/borders.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Borders</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@ -575,7 +579,7 @@
|
||||
|
||||
<h2 id="sizes">Sizes</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.rounded-lg</code> or <code class="highlighter-rouge">.rounded-sm</code> for larger or smaller border-radius.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.rounded-lg</code> or <code class="language-plaintext highlighter-rouge">.rounded-sm</code> for larger or smaller border-radius.</p>
|
||||
|
||||
<div class="bd-example bd-example-images"><svg class="bd-placeholder-img rounded-sm" width="75" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Example small rounded image: 75x75"><title>Example small rounded image</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg><svg class="bd-placeholder-img rounded-lg" width="75" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Example large rounded image: 75x75"><title>Example large rounded image</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg></div>
|
||||
|
||||
@ -588,6 +592,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Quickly and easily clear floated content within a container by adding a clearfix utility.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/clearfix/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,17 +469,20 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/clearfix.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Clearfix</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Quickly and easily clear floated content within a container by adding a clearfix utility.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Easily clear <code class="highlighter-rouge">float</code>s by adding <code class="highlighter-rouge">.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
|
||||
<p>Easily clear <code class="language-plaintext highlighter-rouge">float</code>s by adding <code class="language-plaintext highlighter-rouge">.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"clearfix"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Mixin itself</span>
|
||||
<span class="k">@mixin</span> <span class="nf">clearfix</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="err">&</span><span class="p">:</span><span class="o">:</span><span class="n">after</span> <span class="p">{</span>
|
||||
<span class="k">&</span><span class="nd">::after</span> <span class="p">{</span>
|
||||
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
|
||||
<span class="nl">content</span><span class="p">:</span> <span class="s2">""</span><span class="p">;</span>
|
||||
<span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span>
|
||||
@ -509,6 +513,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use a generic close icon for dismissing content like modals and alerts.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/close-icon/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -468,11 +469,14 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/close-icon.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Close icon</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use a generic close icon for dismissing content like modals and alerts.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p><strong>Be sure to include text for screen readers</strong>, as we’ve done with <code class="highlighter-rouge">aria-label</code>.</p>
|
||||
<p><strong>Be sure to include text for screen readers</strong>, as we’ve done with <code class="language-plaintext highlighter-rouge">aria-label</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="close" aria-label="Close">
|
||||
@ -489,6 +493,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/colors/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@ -476,10 +477,26 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/colors.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Colors</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4 id="dealing-with-specificity">Dealing with specificity</h4>
|
||||
|
||||
<p>Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <code class="language-plaintext highlighter-rouge"><div></code> with the class.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="language-plaintext highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="color">Color</h2>
|
||||
|
||||
<div class="bd-example">
|
||||
@ -512,7 +529,7 @@
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-black-50"</span><span class="nt">></span>.text-black-50<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-white-50 bg-dark"</span><span class="nt">></span>.text-white-50<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<p>Contextual text classes also work well on anchors with the provided hover and focus states. <strong>Note that the <code class="highlighter-rouge">.text-white</code> and <code class="highlighter-rouge">.text-muted</code> class has no additional link styling beyond underline.</strong></p>
|
||||
<p>Contextual text classes also work well on anchors with the provided hover and focus states. <strong>Note that the <code class="language-plaintext highlighter-rouge">.text-white</code> and <code class="language-plaintext highlighter-rouge">.text-muted</code> class has no additional link styling beyond underline.</strong></p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -540,7 +557,7 @@
|
||||
|
||||
<h2 id="background-color">Background color</h2>
|
||||
|
||||
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities <strong>do not set <code class="highlighter-rouge">color</code></strong>, so in some cases you’ll want to use <code class="highlighter-rouge">.text-*</code> utilities.</p>
|
||||
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities <strong>do not set <code class="language-plaintext highlighter-rouge">color</code></strong>, so in some cases you’ll want to use <code class="language-plaintext highlighter-rouge">.text-*</code> utilities.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@ -568,37 +585,24 @@
|
||||
|
||||
<h2 id="background-gradient">Background gradient</h2>
|
||||
|
||||
<p>When <code class="highlighter-rouge">$enable-gradients</code> is set to <code class="highlighter-rouge">true</code> (default is <code class="highlighter-rouge">false</code>), you can use <code class="highlighter-rouge">.bg-gradient-</code> utility classes. <a href="/docs/4.5/getting-started/theming/#sass-options">Learn about our Sass options</a> to enable these classes and more.</p>
|
||||
<p>When <code class="language-plaintext highlighter-rouge">$enable-gradients</code> is set to <code class="language-plaintext highlighter-rouge">true</code> (default is <code class="language-plaintext highlighter-rouge">false</code>), you can use <code class="language-plaintext highlighter-rouge">.bg-gradient-</code> utility classes. <a href="/docs/4.5/getting-started/theming/#sass-options">Learn about our Sass options</a> to enable these classes and more.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-primary</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-secondary</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-success</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-danger</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-warning</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-info</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-light</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-dark</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-primary</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-secondary</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-success</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-danger</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-warning</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-info</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-light</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-dark</code></li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4 id="dealing-with-specificity">Dealing with specificity</h4>
|
||||
|
||||
<p>Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <code class="highlighter-rouge"><div></code> with the class.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
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