mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 19:31:35 +02:00
Code Issues Releases Wiki Activity

Fathom

Browse Source
This commit is contained in:
Mark Otto
2022-05-09 16:59:05 -07:00
committed by Mark Otto
parent d0c6a9e12a
commit 0d0ca30f5d
825 changed files with 5120 additions and 4302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/5.0/utilities/api/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -427,10 +428,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<p>Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you&rsquo;re unfamiliar with Sass maps, read up on the <a href="https://sass-lang.com/documentation/values/maps">official Sass docs</a> to get started.</p>
<p>The <code>$utilities</code> map contains all our utilities and is later merged with your custom <code>$utilities</code> map, if present. The utility map contains a keyed list of utility groups which accept the following options:</p>
@@ -848,7 +849,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/utilities/background/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -411,10 +412,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="background-color">Background color</h2>
<p>Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities <strong>do not set <code>color</code></strong>, so in some cases you&rsquo;ll want to use <code>.text-*</code> <a href="/docs/5.0/utilities/colors/">color utilities</a>.</p>
@@ -650,7 +651,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/utilities/borders/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -421,10 +422,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="border">Border</h2>
<p>Use border utilities to add or remove an element&rsquo;s borders. Choose from all borders or one at a time.</p>
@@ -761,7 +762,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/utilities/colors/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -410,10 +411,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="colors">Colors</h2>
<p>Colorize text with color utilities. If you want to colorize links, you can use the <a href="/docs/5.0/helpers/colored-links/"><code>.link-*</code> helper classes</a> which have <code>:hover</code> and <code>:focus</code> states.</p>
@@ -605,7 +606,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/utilities/display/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -411,10 +412,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="how-it-works">How it works</h2>
<p>Change the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code> property</a> with our responsive display utility classes. We purposely support only a subset of all possible values for <code>display</code>. Classes can be combined for various effects as you need.</p>
@@ -631,7 +632,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/utilities/flex/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -422,10 +423,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="enable-flex-behaviors">Enable flex behaviors</h2>
<p>Apply <code>display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties.</p>
@@ -1390,7 +1391,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/utilities/float/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -408,10 +409,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="overview">Overview</h2>
<p>These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">CSS <code>float</code> property</a>. <code>!important</code> is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.</p>
@@ -540,7 +541,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

11
docs/5.0/utilities/interactions/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,10 +394,10 @@
</div>
<div class="bd-content ps-lg-4">
<h2 id="text-selection">Text selection</h2>
<p>Change the way in which the content is selected when the user interacts with it.</p>
@@ -505,7 +506,7 @@ The <code>.pe-none</code> class (and the <code>pointer-events</code> CSS propert
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

11
docs/5.0/utilities/overflow/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,10 +394,10 @@
</div>
<div class="bd-content ps-lg-4">
<p>Adjust the <code>overflow</code> property on the fly with four default values and classes. These classes are not responsive by default.</p>
<div class="bd-example d-md-flex">
@@ -498,7 +499,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/utilities/position/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -411,10 +412,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="position-values">Position values</h2>
<p>Quick positioning classes are available, though they are not responsive.</p>
@@ -664,7 +665,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/utilities/shadows/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -408,10 +409,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="examples">Examples</h2>
<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code>$enable-shadows</code>, you can also quickly add or remove a shadow with our <code>box-shadow</code> utility classes. Includes support for <code>.shadow-none</code> and three default sizes (which have associated variables to match).</p>
@@ -516,7 +517,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/utilities/sizing/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -408,10 +409,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="relative-to-the-parent">Relative to the parent</h2>
<p>Width and height utilities are generated from the utility API in <code>_utilities.scss</code>. Includes support for <code>25%</code>, <code>50%</code>, <code>75%</code>, <code>100%</code>, and <code>auto</code> by default. Modify those values as you need to generate different utilities here.</p>
@@ -587,7 +588,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/utilities/spacing/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -416,10 +417,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="margin-and-padding">Margin and padding</h2>
<p>Assign responsive-friendly <code>margin</code> or <code>padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code>.25rem</code> to <code>3rem</code>.</p>
@@ -719,7 +720,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/utilities/text/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,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">
@@ -418,10 +419,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="text-alignment">Text alignment</h2>
<p>Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.</p>
@@ -740,7 +741,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

11
docs/5.0/utilities/vertical-align/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,10 +394,10 @@
</div>
<div class="bd-content ps-lg-4">
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>
<p>Choose from <code>.align-baseline</code>, <code>.align-top</code>, <code>.align-middle</code>, <code>.align-bottom</code>, <code>.align-text-bottom</code>, and <code>.align-text-top</code> as needed.</p>
@@ -522,7 +523,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

11
docs/5.0/utilities/visibility/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,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">
@@ -393,10 +394,10 @@
</div>
<div class="bd-content ps-lg-4">
<p>Set the <code>visibility</code> of elements with our visibility utilities. These utility classes do not modify the <code>display</code> value at all and do not affect layout – <code>.invisible</code> elements still take up space in the page.</p>
<div class="bd-callout bd-callout-warning">
@@ -497,7 +498,7 @@ Elements with the <code>.invisible</code> class will be hidden <em>both</em> vis
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>