mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 12:21: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

11
docs/5.0/helpers/clearfix/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>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
<p>Use in HTML:</p>
@@ -496,7 +497,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

11
docs/5.0/helpers/colored-links/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>You can use the <code>.link-*</code> classes to colorize links. Unlike the <a href="/docs/5.0/utilities/colors/"><code>.text-*</code> classes</a>, these classes have a <code>:hover</code> and <code>:focus</code> state.</p>
<div class="bd-example">
@@ -493,7 +494,7 @@ Some of the link styles use a relatively light foreground color, and should only
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/helpers/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">
@@ -405,10 +406,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="fixed-top">Fixed top</h2>
<p>Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.</p>
@@ -497,7 +498,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.0/helpers/ratio/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">
@@ -406,10 +407,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="about">About</h2>
<p>Use the ratio helper to manage the aspect ratios of external content like <code>&lt;iframe&gt;</code>s, <code>&lt;embed&gt;</code>s, <code>&lt;video&gt;</code>s, and <code>&lt;object&gt;</code>s. These helpers also can be used on any standard HTML child element (e.g., a <code>&lt;div&gt;</code> or <code>&lt;img&gt;</code>). Styles are applied from the parent <code>.ratio</code> class directly to the child.</p>
@@ -558,7 +559,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

11
docs/5.0/helpers/stretched-link/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>Add <code>.stretched-link</code> to a link to make its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block">containing block</a> clickable via a <code>::after</code> pseudo element. In most cases, this means that an element with <code>position: relative;</code> that contains a link with the <code>.stretched-link</code> class is clickable. Please note given <a href="https://www.w3.org/TR/CSS21/visuren.html#propdef-position">how CSS <code>position</code> works</a>, <code>.stretched-link</code> cannot be mixed with most table elements.</p>
<p>Cards have <code>position: relative</code> by default in Bootstrap, so in this case you can safely add the <code>.stretched-link</code> class to a link in the card without any other HTML changes.</p>
@@ -568,7 +569,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

11
docs/5.0/helpers/text-truncation/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>For longer content, you can add a <code>.text-truncate</code> class to truncate the text with an ellipsis. <strong>Requires <code>display: inline-block</code> or <code>display: block</code>.</strong></p>
<div class="bd-example">
@@ -494,7 +495,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

11
docs/5.0/helpers/visually-hidden/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>Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with <code>.visually-hidden</code>. Use <code>.visually-hidden-focusable</code> to visually hide an element by default, but to display it when it&rsquo;s focused (e.g. by a keyboard-only user). <code>.visually-hidden-focusable</code> can also be applied to a container–thanks to <code>:focus-within</code>, the container will be displayed when any child element of the container receives focus.</p>
<div class="bd-example">
@@ -488,7 +489,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>