mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 04:11:39 +02:00
Code Issues Releases Wiki Activity

Add v5.3.0 docs (#38658)

Browse Source
This commit is contained in:
XhmikosR
2023-05-30 18:21:02 +03:00
committed by GitHub
parent 87498ceeb2
commit 4be8b59d15
232 changed files with 4200 additions and 3253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
docs/5.3/utilities/text/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.111.3">
<meta name="generator" content="Hugo 0.112.5">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.3">
@@ -18,7 +18,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">
@@ -531,7 +531,7 @@
<main class="bd-main order-1">
<div class="bd-intro pt-2 ps-lg-2">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/utilities/text.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
<div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/utilities/text.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
View on GitHub
</a>
</div>
@@ -567,9 +567,9 @@
<ul>
<li><a href="#sass-variables">Sass variables</a></li>
<li><a href="#sass-maps">Sass maps</a></li>
<li><a href="#sass-utilities-api">Sass utilities API</a></li>
</ul>
</li>
<li><a href="#utilities-api">Utilities API</a></li>
</ul>
</nav>
</div>
@@ -581,7 +581,7 @@
<h2 id="text-alignment">Text alignment <a class="anchor-link" href="#text-alignment" aria-label="Link to this section: Text alignment"></a></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>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
@@ -615,7 +615,7 @@ Note that we don&rsquo;t provide utility classes for justified text. While, aest
<h2 id="text-wrapping-and-overflow">Text wrapping and overflow <a class="anchor-link" href="#text-wrapping-and-overflow" aria-label="Link to this section: Text wrapping and overflow"></a></h2>
<p>Wrap text with a <code>.text-wrap</code> class.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
@@ -634,7 +634,7 @@ Note that we don&rsquo;t provide utility classes for justified text. While, aest
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<p>Prevent text from wrapping with a <code>.text-nowrap</code> class.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
This text should overflow the parent.
</div>
@@ -654,7 +654,7 @@ Note that we don&rsquo;t provide utility classes for justified text. While, aest
<h2 id="word-break">Word break <a class="anchor-link" href="#word-break" aria-label="Link to this section: Word break"></a></h2>
<p>Prevent long strings of text from breaking your components&rsquo; layout by using <code>.text-break</code> to set <code>word-wrap: break-word</code> and <code>word-break: break-word</code>. We use <code>word-wrap</code> instead of the more common <code>overflow-wrap</code> for wider browser support, and add the deprecated <code>word-break: break-word</code> to avoid issues with flex containers.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
</div><div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<small class="font-monospace text-body-secondary text-uppercase">html</small>
@@ -674,7 +674,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
<h2 id="text-transform">Text transform <a class="anchor-link" href="#text-transform" aria-label="Link to this section: Text transform"></a></h2>
<p>Transform text in components with text capitalization classes.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
@@ -695,7 +695,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
<p>Note how <code>.text-capitalize</code> only changes the first letter of each word, leaving the case of any other letters unaffected.</p>
<h2 id="font-size">Font size <a class="anchor-link" href="#font-size" aria-label="Link to this section: Font size"></a></h2>
<p>Quickly change the <code>font-size</code> of text. While our heading classes (e.g., <code>.h1</code>–<code>.h6</code>) apply <code>font-size</code>, <code>font-weight</code>, and <code>line-height</code>, these utilities <em>only</em> apply <code>font-size</code>. Sizing for these utilities matches HTML&rsquo;s heading elements, so as the number increases, their size decreases.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
@@ -722,7 +722,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
<p>Customize your available <code>font-size</code>s by modifying the <code>$font-sizes</code> Sass map.</p>
<h2 id="font-weight-and-italics">Font weight and italics <a class="anchor-link" href="#font-weight-and-italics" aria-label="Link to this section: Font weight and italics"></a></h2>
<p>Quickly change the <code>font-weight</code> or <code>font-style</code> of text with these utilities. <code>font-style</code> utilities are abbreviated as <code>.fst-*</code> and <code>font-weight</code> utilities are abbreviated as <code>.fw-*</code>.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
@@ -754,7 +754,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
<h2 id="line-height">Line height <a class="anchor-link" href="#line-height" aria-label="Link to this section: Line height"></a></h2>
<p>Change the line height with <code>.lh-*</code> utilities.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
@@ -776,7 +776,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
<h2 id="monospace">Monospace <a class="anchor-link" href="#monospace" aria-label="Link to this section: Monospace"></a></h2>
<p>Change a selection to our monospace font stack with <code>.font-monospace</code>.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<p class="font-monospace">This is in monospace</p>
</div><div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<small class="font-monospace text-body-secondary text-uppercase">html</small>
@@ -792,7 +792,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
<h2 id="reset-color">Reset color <a class="anchor-link" href="#reset-color" aria-label="Link to this section: Reset color"></a></h2>
<p>Reset a text or link&rsquo;s color with <code>.text-reset</code>, so that it inherits the color from its parent.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<p class="text-body-secondary">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
@@ -812,7 +812,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
<h2 id="text-decoration">Text decoration <a class="anchor-link" href="#text-decoration" aria-label="Link to this section: Text decoration"></a></h2>
<p>Decorate text in components with text decoration classes.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
@@ -833,9 +833,9 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
<h2 id="css">CSS <a class="anchor-link" href="#css" aria-label="Link to this section: CSS"></a></h2>
<h3 id="sass-variables">Sass variables <a class="anchor-link" href="#sass-variables" aria-label="Link to this section: Sass variables"></a></h3>
<p>Default type and font related Sass variables:</p>
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_variables.scss">scss/_variables.scss</a>
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_variables.scss">scss/_variables.scss</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -878,9 +878,9 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
</span></span></code></pre></div></div>
<h3 id="sass-maps">Sass maps <a class="anchor-link" href="#sass-maps" aria-label="Link to this section: Sass maps"></a></h3>
<p>Font-size utilities are generated from this map, in combination with our utilities API.</p>
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_variables.scss">scss/_variables.scss</a>
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_variables.scss">scss/_variables.scss</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -895,9 +895,9 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
</span></span><span class="line"><span class="cl"> <span class="na">6</span><span class="o">:</span> <span class="nv">$h6-font-size</span>
</span></span><span class="line"><span class="cl"><span class="p">);</span>
</span></span></code></pre></div></div>
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_maps.scss">scss/_maps.scss</a>
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_maps.scss">scss/_maps.scss</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -914,11 +914,11 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;dark&#34;</span><span class="o">:</span> <span class="nv">$dark-text-emphasis</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"><span class="p">);</span>
</span></span></code></pre></div></div>
<h2 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h2>
<h3 id="sass-utilities-api">Sass utilities API <a class="anchor-link" href="#sass-utilities-api" aria-label="Link to this section: Sass utilities API"></a></h3>
<p>Font and text utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.3/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_utilities.scss">scss/_utilities.scss</a>
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_utilities.scss">scss/_utilities.scss</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -1013,7 +1013,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
<ul class="list-unstyled small">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/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.3.0-alpha3.</li>
<li class="mb-2">Currently v5.3.0.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -1062,7 +1062,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
</div>
</footer>
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -1090,10 +1090,10 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">