mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 00:59:51 +02:00
Add v5.0.0 docs (#33648)
This commit is contained in:
XhmikosR
GitHub
@@ -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.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -518,14 +518,14 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
|
||||
<h2 id="line-height">Line height</h2>
|
||||
<p>Change the line height with <code>.lh-*</code> utilities.</p>
|
||||
<div class="bd-example">
|
||||
<p class="lh-1">Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. She ride me like a roller coaster. I messed around and got addicted. You just gotta ignite the light and let it shine! I'm intrigued, for a peek, heard it's fascinating. Catch her if you can. I should've told you what you meant to me 'Cause now I pay the price. Do you ever feel, feel so paper thin.</p>
|
||||
<p class="lh-sm">But you better choose carefully. Yo, shout out to all you kids, buying bottle service, with your rent money. She's sweet as pie but if you break her heart. Just own the night like the 4th of July! In another life I would be your girl. Playing ping pong all night long, everything's all neon and hazy. Shorty so bad, I’m sprung and I don’t care.</p>
|
||||
<p class="lh-base">I can feel a phoenix inside of me. Maybe a reason why all the doors are closed. We go higher and higher. Passport stamps, she's cosmopolitan. Someone said you had your tattoo removed. All my girls vintage Chanel baby. Someone said you had your tattoo removed.</p>
|
||||
<p class="lh-lg">But I will get there. This is real so take a chance and don't ever look back, don't ever look back. You could travel the world but nothing comes close to the golden coast. Of anything and everything. Venice beach and Palm Springs, summertime is everything. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. So cover your eyes, I have a surprise. So I don't have to say you were the one that got away.</p>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lh-1"</span><span class="p">></span>Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. She ride me like a roller coaster. I messed around and got addicted. You just gotta ignite the light and let it shine! I'm intrigued, for a peek, heard it's fascinating. Catch her if you can. I should've told you what you meant to me 'Cause now I pay the price. Do you ever feel, feel so paper thin.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lh-sm"</span><span class="p">></span>But you better choose carefully. Yo, shout out to all you kids, buying bottle service, with your rent money. She's sweet as pie but if you break her heart. Just own the night like the 4th of July! In another life I would be your girl. Playing ping pong all night long, everything's all neon and hazy. Shorty so bad, I’m sprung and I don’t care.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lh-base"</span><span class="p">></span>I can feel a phoenix inside of me. Maybe a reason why all the doors are closed. We go higher and higher. Passport stamps, she's cosmopolitan. Someone said you had your tattoo removed. All my girls vintage Chanel baby. Someone said you had your tattoo removed.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lh-lg"</span><span class="p">></span>But I will get there. This is real so take a chance and don't ever look back, don't ever look back. You could travel the world but nothing comes close to the golden coast. Of anything and everything. Venice beach and Palm Springs, summertime is everything. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. So cover your eyes, I have a surprise. So I don't have to say you were the one that got away.<span class="p"></</span><span class="nt">p</span><span class="p">></span></code></pre></div>
|
||||
<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>
|
||||
<p class="lh-lg">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>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lh-1"</span><span class="p">></span>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.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lh-sm"</span><span class="p">></span>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.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lh-base"</span><span class="p">></span>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.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lh-lg"</span><span class="p">></span>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.<span class="p"></</span><span class="nt">p</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="monospace">Monospace</h2>
|
||||
<p>Change a selection to our monospace font stack with <code>.font-monospace</code>.</p>
|
||||
<div class="bd-example">
|
||||
@@ -674,20 +674,65 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user