mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-18 11:21:23 +02:00
Add v5.1.1 docs (#34870)
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.87.0">
|
||||
<meta name="generator" content="Hugo 0.88.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.1">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
|
||||
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.1/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
<span class="d-none d-lg-inline">Bootstrap</span> v5.1
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.1/">Latest (5.0.x)</a></li>
|
||||
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.1/">Latest (5.1.x)</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
@@ -404,9 +404,10 @@
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#approach">Approach</a></li>
|
||||
<li><a href="#css-variables">CSS variables</a></li>
|
||||
<li><a href="#page-defaults">Page defaults</a></li>
|
||||
<li><a href="#native-font-stack">Native font stack</a></li>
|
||||
<li><a href="#css-variables">CSS variables</a></li>
|
||||
<li><a href="#css-variables-1">CSS variables</a></li>
|
||||
<li><a href="#headings-and-paragraphs">Headings and paragraphs</a></li>
|
||||
<li><a href="#lists">Lists</a></li>
|
||||
<li><a href="#inline-code">Inline code</a></li>
|
||||
@@ -446,6 +447,9 @@
|
||||
<li>For easier scaling across device sizes, block elements should use <code>rem</code>s for <code>margin</code>s.</li>
|
||||
<li>Keep declarations of <code>font</code>-related properties to a minimum, using <code>inherit</code> whenever possible.</li>
|
||||
</ul>
|
||||
<h2 id="css-variables">CSS variables</h2>
|
||||
<p><small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.1</small></p>
|
||||
<p>With v5.1.1, we standardized our required <code>@import</code>s across all our CSS bundles (including <code>bootstrap.css</code>, <code>bootstrap-reboot.css</code>, and <code>bootstrap-grid.css</code> to include <code>_root.scss</code> . This adds <code>:root</code> level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more CSS variables added over time.</p>
|
||||
<h2 id="page-defaults">Page defaults</h2>
|
||||
<p>The <code><html></code> and <code><body></code> elements are updated to provide better page-wide defaults. More specifically:</p>
|
||||
<ul>
|
||||
@@ -479,7 +483,7 @@
|
||||
<span class="s2">"Apple Color Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Symbol"</span><span class="o">,</span> <span class="s2">"Noto Color Emoji"</span> <span class="k">!default</span><span class="p">;</span>
|
||||
</code></pre></div><p>Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform’s native emoji font, and they won’t be affected by any CSS <code>color</code> styles.</p>
|
||||
<p>This <code>font-family</code> is applied to the <code><body></code> and automatically inherited globally throughout Bootstrap. To switch the global <code>font-family</code>, update <code>$font-family-base</code> and recompile Bootstrap.</p>
|
||||
<h2 id="css-variables">CSS variables</h2>
|
||||
<h2 id="css-variables-1">CSS variables</h2>
|
||||
<p>As Bootstrap 5 continues to mature, more and more styles will be built with <a href="/docs/5.1/customize/css-variables/">CSS variables</a> as a means to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don’t use CSS variables, you still have all the power of Sass. <strong>This is still in-progress and will take time to fully implement.</strong></p>
|
||||
<p>For example, consider these <code>:root</code> CSS variables for common <code><body></code> styles:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"> <span class="k">@if</span> <span class="nv">$font-size-root</span> <span class="o">!=</span> <span class="n">null</span> <span class="p">{</span>
|
||||
@@ -871,7 +875,7 @@ To edit settings, press <span class="p"><</span><span class="nt">kbd</span><s
|
||||
<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.1/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.1.0.</li>
|
||||
<li class="mb-2">Currently v5.1.1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -918,7 +922,7 @@ To edit settings, press <span class="p"><</span><span class="nt">kbd</span><s
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" 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