mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-21 20:55:50 +02:00
4.0.0 stable
This commit is contained in:
Mark Otto
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Overview · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -426,20 +429,20 @@
|
||||
|
||||
<p>Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)
|
||||
// No media query since this is the default in Bootstrap
|
||||
</span>
|
||||
<span class="c1">// Small devices (landscape phones, 576px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">576px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)</span>
|
||||
<span class="c1">// No media query since this is the default in Bootstrap</span>
|
||||
|
||||
<span class="c1">// Medium devices (tablets, 768px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Small devices (landscape phones, 576px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">576px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Large devices (desktops, 992px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">992px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Medium devices (tablets, 768px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Extra large devices (large desktops, 1200px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">1200px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
<span class="c1">// Large devices (desktops, 992px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">992px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Extra large devices (large desktops, 1200px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">1200px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>Since we write our source CSS in Sass, all our media queries are available via Sass mixins:</p>
|
||||
|
||||
@@ -449,8 +452,8 @@
|
||||
<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">lg</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">xl</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Example usage:
|
||||
</span><span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">sm</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Example usage:</span>
|
||||
<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">sm</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nc">.some-class</span> <span class="p">{</span>
|
||||
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
@@ -458,20 +461,20 @@
|
||||
|
||||
<p>We occasionally use media queries that go in the other direction (the given screen size <em>or smaller</em>):</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">575</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">575</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Small devices (landscape phones, less than 768px)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">767</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Small devices (landscape phones, less than 768px)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">767</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Medium devices (tablets, less than 992px)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">991</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Medium devices (tablets, less than 992px)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">991</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Large devices (desktops, less than 1200px)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Large devices (desktops, less than 1200px)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Extra large devices (large desktops)
|
||||
</span><span class="o">//</span> <span class="nt">No</span> <span class="nt">media</span> <span class="nt">query</span> <span class="nt">since</span> <span class="nt">the</span> <span class="nt">extra-large</span> <span class="nt">breakpoint</span> <span class="nt">has</span> <span class="nt">no</span> <span class="nt">upper</span> <span class="nt">bound</span> <span class="nt">on</span> <span class="nt">its</span> <span class="nt">width</span></code></pre></figure>
|
||||
<span class="c1">// Extra large devices (large desktops)</span>
|
||||
<span class="c1">// No media query since the extra-large breakpoint has no upper bound on its width</span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>Note that since browsers do not currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code class="highlighter-rouge">min-</code> and <code class="highlighter-rouge">max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.</p>
|
||||
@@ -486,20 +489,20 @@
|
||||
|
||||
<p>There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">575</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">575</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Small devices (landscape phones, 576px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">576px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">767</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Small devices (landscape phones, 576px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">576px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">767</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Medium devices (tablets, 768px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">991</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Medium devices (tablets, 768px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">991</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Large devices (desktops, 992px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">992px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Large devices (desktops, 992px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">992px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Extra large devices (large desktops, 1200px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">1200px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
<span class="c1">// Extra large devices (large desktops, 1200px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">1200px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>These media queries are also available via Sass mixins:</p>
|
||||
|
||||
@@ -511,9 +514,9 @@
|
||||
|
||||
<p>Similarly, media queries may span multiple breakpoint widths:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Example
|
||||
// Apply styles starting from medium devices and up to extra large devices
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Example</span>
|
||||
<span class="c1">// Apply styles starting from medium devices and up to extra large devices</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>The Sass mixin for targeting the same screen size range would be:</p>
|
||||
|
||||
@@ -527,14 +530,13 @@
|
||||
|
||||
<p>We don’t encourage customization of these individual values; should you change one, you likely need to change them all.</p>
|
||||
|
||||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$zindex-dropdown</span><span class="p">:</span> <span class="m">1000</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$zindex-dropdown</span><span class="p">:</span> <span class="m">1000</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-sticky</span><span class="p">:</span> <span class="m">1020</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-fixed</span><span class="p">:</span> <span class="m">1030</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-modal-backdrop</span><span class="p">:</span> <span class="m">1040</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-modal</span><span class="p">:</span> <span class="m">1050</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-popover</span><span class="p">:</span> <span class="m">1060</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-tooltip</span><span class="p">:</span> <span class="m">1070</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
</code></pre></div></div>
|
||||
<span class="nv">$zindex-tooltip</span><span class="p">:</span> <span class="m">1070</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<p>To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit <code class="highlighter-rouge">z-index</code> values of <code class="highlighter-rouge">1</code>, <code class="highlighter-rouge">2</code>, and <code class="highlighter-rouge">3</code> for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher <code class="highlighter-rouge">z-index</code> value to show their border over the sibling elements.</p>
|
||||
|
||||
@@ -545,34 +547,6 @@
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user