mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 10:34:07 +02:00
Code Issues Releases Wiki Activity

Add v5.0.1 docs. (#33973)

Browse Source
This commit is contained in:
XhmikosR
2021-05-13 19:28:44 +03:00
committed by GitHub
parent 41889eed8d
commit f6a0f70ad1
175 changed files with 2406 additions and 2553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -55,7 +55,7 @@
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
<script defer src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF"></script>
</head>
@@ -138,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -394,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -413,47 +413,47 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="theme-colors">Theme colors</h2>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap&rsquo;s <code>scss/_variables.scss</code> file.</p>
<div class="row">
<div class="col-md-4">
<div class="p-3 mb-3 bg-primary text-white">Primary</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-success text-white">Success</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-danger text-white">Danger</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-warning text-dark">Warning</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-info text-dark">Info</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-light text-dark">Light</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-dark text-white">Dark</div>
</div>
</div>
<p>All these colors are available as a Sass map, <code>$theme-colors</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span>
@@ -472,265 +472,265 @@
<p>All Bootstrap colors are available as Sass variables and a Sass map in <code>scss/_variables.scss</code> file. To avoid increased file sizes, we don&rsquo;t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a <a href="#theme-colors">theme palette</a>.</p>
<p>Be sure to monitor contrast ratios as you customize colors. As shown below, we&rsquo;ve added three contrast ratios to each of the main colors—one for the swatch&rsquo;s current colors, one for against white, and one for against black.</p>
<div class="row font-monospace">
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-blue">
<strong class="d-block">$blue</strong>
#0d6efd
</div>
<div class="p-3 bd-blue-100">$blue-100</div>
<div class="p-3 bd-blue-200">$blue-200</div>
<div class="p-3 bd-blue-300">$blue-300</div>
<div class="p-3 bd-blue-400">$blue-400</div>
<div class="p-3 bd-blue-500">$blue-500</div>
<div class="p-3 bd-blue-600">$blue-600</div>
<div class="p-3 bd-blue-700">$blue-700</div>
<div class="p-3 bd-blue-800">$blue-800</div>
<div class="p-3 bd-blue-900">$blue-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-indigo">
<strong class="d-block">$indigo</strong>
#6610f2
</div>
<div class="p-3 bd-indigo-100">$indigo-100</div>
<div class="p-3 bd-indigo-200">$indigo-200</div>
<div class="p-3 bd-indigo-300">$indigo-300</div>
<div class="p-3 bd-indigo-400">$indigo-400</div>
<div class="p-3 bd-indigo-500">$indigo-500</div>
<div class="p-3 bd-indigo-600">$indigo-600</div>
<div class="p-3 bd-indigo-700">$indigo-700</div>
<div class="p-3 bd-indigo-800">$indigo-800</div>
<div class="p-3 bd-indigo-900">$indigo-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-purple">
<strong class="d-block">$purple</strong>
#6f42c1
</div>
<div class="p-3 bd-purple-100">$purple-100</div>
<div class="p-3 bd-purple-200">$purple-200</div>
<div class="p-3 bd-purple-300">$purple-300</div>
<div class="p-3 bd-purple-400">$purple-400</div>
<div class="p-3 bd-purple-500">$purple-500</div>
<div class="p-3 bd-purple-600">$purple-600</div>
<div class="p-3 bd-purple-700">$purple-700</div>
<div class="p-3 bd-purple-800">$purple-800</div>
<div class="p-3 bd-purple-900">$purple-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-pink">
<strong class="d-block">$pink</strong>
#d63384
</div>
<div class="p-3 bd-pink-100">$pink-100</div>
<div class="p-3 bd-pink-200">$pink-200</div>
<div class="p-3 bd-pink-300">$pink-300</div>
<div class="p-3 bd-pink-400">$pink-400</div>
<div class="p-3 bd-pink-500">$pink-500</div>
<div class="p-3 bd-pink-600">$pink-600</div>
<div class="p-3 bd-pink-700">$pink-700</div>
<div class="p-3 bd-pink-800">$pink-800</div>
<div class="p-3 bd-pink-900">$pink-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-red">
<strong class="d-block">$red</strong>
#dc3545
</div>
<div class="p-3 bd-red-100">$red-100</div>
<div class="p-3 bd-red-200">$red-200</div>
<div class="p-3 bd-red-300">$red-300</div>
<div class="p-3 bd-red-400">$red-400</div>
<div class="p-3 bd-red-500">$red-500</div>
<div class="p-3 bd-red-600">$red-600</div>
<div class="p-3 bd-red-700">$red-700</div>
<div class="p-3 bd-red-800">$red-800</div>
<div class="p-3 bd-red-900">$red-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-orange">
<strong class="d-block">$orange</strong>
#fd7e14
</div>
<div class="p-3 bd-orange-100">$orange-100</div>
<div class="p-3 bd-orange-200">$orange-200</div>
<div class="p-3 bd-orange-300">$orange-300</div>
<div class="p-3 bd-orange-400">$orange-400</div>
<div class="p-3 bd-orange-500">$orange-500</div>
<div class="p-3 bd-orange-600">$orange-600</div>
<div class="p-3 bd-orange-700">$orange-700</div>
<div class="p-3 bd-orange-800">$orange-800</div>
<div class="p-3 bd-orange-900">$orange-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-yellow">
<strong class="d-block">$yellow</strong>
#ffc107
</div>
<div class="p-3 bd-yellow-100">$yellow-100</div>
<div class="p-3 bd-yellow-200">$yellow-200</div>
<div class="p-3 bd-yellow-300">$yellow-300</div>
<div class="p-3 bd-yellow-400">$yellow-400</div>
<div class="p-3 bd-yellow-500">$yellow-500</div>
<div class="p-3 bd-yellow-600">$yellow-600</div>
<div class="p-3 bd-yellow-700">$yellow-700</div>
<div class="p-3 bd-yellow-800">$yellow-800</div>
<div class="p-3 bd-yellow-900">$yellow-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-green">
<strong class="d-block">$green</strong>
#198754
</div>
<div class="p-3 bd-green-100">$green-100</div>
<div class="p-3 bd-green-200">$green-200</div>
<div class="p-3 bd-green-300">$green-300</div>
<div class="p-3 bd-green-400">$green-400</div>
<div class="p-3 bd-green-500">$green-500</div>
<div class="p-3 bd-green-600">$green-600</div>
<div class="p-3 bd-green-700">$green-700</div>
<div class="p-3 bd-green-800">$green-800</div>
<div class="p-3 bd-green-900">$green-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-teal">
<strong class="d-block">$teal</strong>
#20c997
</div>
<div class="p-3 bd-teal-100">$teal-100</div>
<div class="p-3 bd-teal-200">$teal-200</div>
<div class="p-3 bd-teal-300">$teal-300</div>
<div class="p-3 bd-teal-400">$teal-400</div>
<div class="p-3 bd-teal-500">$teal-500</div>
<div class="p-3 bd-teal-600">$teal-600</div>
<div class="p-3 bd-teal-700">$teal-700</div>
<div class="p-3 bd-teal-800">$teal-800</div>
<div class="p-3 bd-teal-900">$teal-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-cyan">
<strong class="d-block">$cyan</strong>
#0dcaf0
</div>
<div class="p-3 bd-cyan-100">$cyan-100</div>
<div class="p-3 bd-cyan-200">$cyan-200</div>
<div class="p-3 bd-cyan-300">$cyan-300</div>
<div class="p-3 bd-cyan-400">$cyan-400</div>
<div class="p-3 bd-cyan-500">$cyan-500</div>
<div class="p-3 bd-cyan-600">$cyan-600</div>
<div class="p-3 bd-cyan-700">$cyan-700</div>
<div class="p-3 bd-cyan-800">$cyan-800</div>
<div class="p-3 bd-cyan-900">$cyan-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-gray-500">
@@ -738,24 +738,24 @@
#adb5bd
</div>
<div class="p-3 bd-gray-100">$gray-100</div>
<div class="p-3 bd-gray-200">$gray-200</div>
<div class="p-3 bd-gray-300">$gray-300</div>
<div class="p-3 bd-gray-400">$gray-400</div>
<div class="p-3 bd-gray-500">$gray-500</div>
<div class="p-3 bd-gray-600">$gray-600</div>
<div class="p-3 bd-gray-700">$gray-700</div>
<div class="p-3 bd-gray-800">$gray-800</div>
<div class="p-3 bd-gray-900">$gray-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 bd-black text-white">
<strong class="d-block">$black</strong>
@@ -821,7 +821,7 @@
<ul class="list-unstyled small text-muted">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v5.0.0.</li>
<li class="mb-2">Currently v5.0.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -868,7 +868,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -876,7 +876,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

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

@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -55,7 +55,7 @@
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
<script defer src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF"></script>
</head>
@@ -138,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -394,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -406,10 +406,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="base-classes">Base classes</h2>
<p>Bootstrap&rsquo;s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like <code>.btn</code>, and then group individual styles for each variant into modifier classes, like <code>.btn-primary</code> or <code>.btn-success</code>.</p>
@@ -438,13 +438,13 @@
</span><span class="c1">// Organizationally, this must come after the `:hover` states.
</span><span class="c1"></span>
<span class="k">@each</span> <span class="err">$</span><span class="nt">state</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
<span class="nv">$list-group-background</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-bg-scale</span><span class="p">);</span>
<span class="nv">$list-group-color</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-color-scale</span><span class="p">);</span>
<span class="k">@if</span> <span class="p">(</span><span class="nf">contrast-ratio</span><span class="p">(</span><span class="nv">$list-group-background</span><span class="o">,</span> <span class="nv">$list-group-color</span><span class="p">)</span> <span class="o">&lt;</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</span> <span class="p">{</span>
<span class="nv">$list-group-color</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$list-group-background</span><span class="p">)</span><span class="o">,</span> <span class="nf">abs</span><span class="p">(</span><span class="nv">$list-group-item-color-scale</span><span class="p">));</span>
<span class="nv">$list-group-variant-bg</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-bg-scale</span><span class="p">);</span>
<span class="nv">$list-group-variant-color</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-color-scale</span><span class="p">);</span>
<span class="k">@if</span> <span class="p">(</span><span class="nf">contrast-ratio</span><span class="p">(</span><span class="nv">$list-group-variant-bg</span><span class="o">,</span> <span class="nv">$list-group-variant-color</span><span class="p">)</span> <span class="o">&lt;</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</span> <span class="p">{</span>
<span class="nv">$list-group-variant-color</span><span class="o">:</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$list-group-variant-bg</span><span class="p">)</span><span class="o">,</span> <span class="nf">abs</span><span class="p">(</span><span class="nv">$list-group-item-color-scale</span><span class="p">));</span>
<span class="p">}</span>
<span class="k">@include</span><span class="nd"> list-group-item-variant</span><span class="p">(</span><span class="nv">$state</span><span class="o">,</span> <span class="nv">$list-group-background</span><span class="o">,</span> <span class="nv">$list-group-color</span><span class="p">);</span>
<span class="k">@include</span><span class="nd"> list-group-item-variant</span><span class="p">(</span><span class="nv">$state</span><span class="o">,</span> <span class="nv">$list-group-variant-bg</span><span class="o">,</span> <span class="nv">$list-group-variant-color</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="responsive">Responsive</h2>
@@ -533,7 +533,7 @@
<ul class="list-unstyled small text-muted">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v5.0.0.</li>
<li class="mb-2">Currently v5.0.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -580,7 +580,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -588,7 +588,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

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

@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -55,7 +55,7 @@
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
<script defer src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF"></script>
</head>
@@ -138,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -394,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -405,10 +405,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<p>Bootstrap includes around two dozen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS custom properties (variables)</a> in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser&rsquo;s inspector, a code sandbox, or general prototyping.</p>
<p><strong>All our custom properties are prefixed with <code>bs-</code></strong> to avoid conflicts with third party CSS.</p>
@@ -469,7 +469,7 @@
<ul class="list-unstyled small text-muted">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v5.0.0.</li>
<li class="mb-2">Currently v5.0.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -516,7 +516,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -524,7 +524,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

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

@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -55,7 +55,7 @@
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
<script defer src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF"></script>
</head>
@@ -138,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -394,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -409,10 +409,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="lean-sass-imports">Lean Sass imports</h2>
<p>When using Sass in your asset pipeline, make sure you optimize Bootstrap by only <code>@import</code>ing the components you need. Your largest optimizations will likely come from the <code>Layout &amp; Components</code> section of our <code>bootstrap.scss</code>.</p>
@@ -529,7 +529,7 @@
<ul class="list-unstyled small text-muted">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v5.0.0.</li>
<li class="mb-2">Currently v5.0.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -576,7 +576,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -584,7 +584,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

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

@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -55,7 +55,7 @@
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
<script defer src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF"></script>
</head>
@@ -138,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -394,10 +394,10 @@
</div>
<div class="bd-content ps-lg-4">
<p>Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new <code>$enable-*</code> Sass variables. Override a variable&rsquo;s value and recompile with <code>npm run test</code> as needed.</p>
<p>You can find and customize these variables for key global options in Bootstrap&rsquo;s <code>scss/_variables.scss</code> file.</p>
@@ -500,7 +500,7 @@
<ul class="list-unstyled small text-muted">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v5.0.0.</li>
<li class="mb-2">Currently v5.0.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -547,7 +547,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -555,7 +555,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

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

@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -55,7 +55,7 @@
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
<script defer src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF"></script>
</head>
@@ -138,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -394,56 +394,56 @@
</div>
<div class="bd-content ps-lg-4">
<div class="row g-3">
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../sass/">
<strong class="d-block h5 mb-0">Sass</strong>
<span class="text-secondary">Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../options/">
<strong class="d-block h5 mb-0">Options</strong>
<span class="text-secondary">Customize Bootstrap with built-in variables to easily toggle global CSS preferences.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../color/">
<strong class="d-block h5 mb-0">Color</strong>
<span class="text-secondary">Learn about and customize the color systems that support the entire toolkit.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../components/">
<strong class="d-block h5 mb-0">Components</strong>
<span class="text-secondary">Learn how we build nearly all our components responsively and with base and modifier classes.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../css-variables/">
<strong class="d-block h5 mb-0">CSS variables</strong>
<span class="text-secondary">Use Bootstrap&#39;s CSS custom properties for fast and forward-looking design and development.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../optimize/">
<strong class="d-block h5 mb-0">Optimize</strong>
<span class="text-secondary">Keep your projects lean, responsive, and maintainable so you can deliver the best experience.</span>
</a>
</div>
</div>
<h2 id="overview">Overview</h2>
<p>There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you&rsquo;re using, browser support, and more.</p>
@@ -485,7 +485,7 @@
<ul class="list-unstyled small text-muted">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v5.0.0.</li>
<li class="mb-2">Currently v5.0.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -532,7 +532,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -540,7 +540,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

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

@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -55,7 +55,7 @@
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
<script defer src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF"></script>
</head>
@@ -138,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -394,7 +394,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -426,10 +426,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p>
<h2 id="file-structure">File structure</h2>
@@ -660,7 +660,7 @@
<ul class="list-unstyled small text-muted">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v5.0.0.</li>
<li class="mb-2">Currently v5.0.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -707,7 +707,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -715,7 +715,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>