mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-25 06:21:26 +02:00
Add v4.6.2 docs (#36726)
This commit is contained in:
XhmikosR
GitHub
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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.88.1">
|
||||
<meta name="generator" content="Hugo 0.101.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.6">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
|
||||
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
|
||||
<!-- Documentation extras -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -105,10 +105,10 @@
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false">
|
||||
v4.6
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Bootstrap </span> v4.6 <span class="sr-only">(switch to other versions)</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-md-right">
|
||||
<a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/">5.1.x</a>
|
||||
@@ -231,7 +231,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
@@ -259,7 +259,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
@@ -288,25 +288,25 @@
|
||||
</ul>
|
||||
<h2 id="native-font-stack">Native font stack</h2>
|
||||
<p>The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a “native font stack” for optimum text rendering on every device and OS. Read more about <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stacks in this <em>Smashing Magazine</em> article</a>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$font-family-sans-serif</span><span class="o">:</span>
|
||||
<span class="c1">// Safari for macOS and iOS (San Francisco)</span>
|
||||
<span class="o">-</span><span class="n">apple-system</span><span class="o">,</span>
|
||||
<span class="c1">// Chrome < 56 for macOS (San Francisco)</span>
|
||||
<span class="n">BlinkMacSystemFont</span><span class="o">,</span>
|
||||
<span class="c1">// Windows</span>
|
||||
<span class="s2">"Segoe UI"</span><span class="o">,</span>
|
||||
<span class="c1">// Android</span>
|
||||
<span class="n">Roboto</span><span class="o">,</span>
|
||||
<span class="c1">// Basic web fallback</span>
|
||||
<span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span>
|
||||
<span class="c1">// Linux</span>
|
||||
<span class="s2">"Noto Sans"</span><span class="o">,</span>
|
||||
<span class="s2">"Liberation Sans"</span><span class="o">,</span>
|
||||
<span class="c1">// Sans serif fallback</span>
|
||||
<span class="ni">sans-serif</span><span class="o">,</span>
|
||||
<span class="c1">// Emoji fonts</span>
|
||||
<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>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$font-family-sans-serif</span><span class="o">:</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Safari for macOS and iOS (San Francisco)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">-</span><span class="n">apple-system</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Chrome < 56 for macOS (San Francisco)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="n">BlinkMacSystemFont</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Windows</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Segoe UI"</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Android</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="n">Roboto</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Basic web fallback</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Linux</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Noto Sans"</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Liberation Sans"</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Sans serif fallback</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="ni">sans-serif</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Emoji fonts</span>
|
||||
</span></span><span class="line"><span class="cl"> <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>
|
||||
</span></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="headings-and-paragraphs">Headings and paragraphs</h2>
|
||||
<p>All heading elements—e.g., <code><h1></code>—and <code><p></code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p>
|
||||
@@ -524,7 +524,7 @@
|
||||
<p>Reboot includes an enhancement for <code>role="button"</code> to change the default cursor to <code>pointer</code>. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <code><button></code> elements, which get their own <code>cursor</code> change.</p>
|
||||
<div class="bd-example">
|
||||
<span role="button" tabindex="0">Non-button element button</span>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">span</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span>Non-button element button<span class="p"></</span><span class="nt">span</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span>Non-button element button<span class="p"></</span><span class="nt">span</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="misc-elements">Misc elements</h2>
|
||||
<h3 id="address">Address</h3>
|
||||
<p>The <code><address></code> element is updated to reset the browser default <code>font-style</code> from <code>italic</code> to <code>normal</code>. <code>line-height</code> is also now inherited, and <code>margin-bottom: 1rem</code> has been added. <code><address></code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code><br></code>.</p>
|
||||
@@ -567,8 +567,8 @@
|
||||
</div>
|
||||
<h2 id="html5-hidden-attribute">HTML5 <code>[hidden]</code> attribute</h2>
|
||||
<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code>[hidden]</code></a>, which is styled as <code>display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code>[hidden] { display: none !important; }</code> to help prevent its <code>display</code> from getting accidentally overridden. While <code>[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="p">></span>
|
||||
</code></pre></div><div class="bd-callout bd-callout-warning">
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="p">></span>
|
||||
</span></span></code></pre></div><div class="bd-callout bd-callout-warning">
|
||||
<h5 id="jquery-incompatibility">jQuery incompatibility</h5>
|
||||
<p><code>[hidden]</code> is not compatible with jQuery’s <code>$(...).hide()</code> and <code>$(...).show()</code> methods. Therefore, we don’t currently especially endorse <code>[hidden]</code> over other techniques for managing the <code>display</code> of elements.
|
||||
</div>
|
||||
@@ -582,7 +582,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
|
||||
|
||||
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
|
||||
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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