mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00
Code Issues Releases Wiki Activity

Add v4.5.1 docs (#31409)

Browse Source
This commit is contained in:
XhmikosR
2020-08-04 19:36:55 +03:00
committed by GitHub
parent 3f76a6fcd2
commit 891f87bb54
118 changed files with 2674 additions and 2372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/4.5/utilities/spacing/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.0.1">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="4.5">
@@ -15,7 +15,7 @@
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/spacing/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
@@ -62,9 +62,10 @@
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
@@ -481,52 +482,55 @@
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Spacing</h1>
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/spacing.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<h1 class="bd-title" id="content">Spacing</h1>
</div>
<p class="bd-lead">Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="how-it-works">How it works</h2>
<p>Assign responsive-friendly <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code class="highlighter-rouge">.25rem</code> to <code class="highlighter-rouge">3rem</code>.</p>
<p>Assign responsive-friendly <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code class="language-plaintext highlighter-rouge">.25rem</code> to <code class="language-plaintext highlighter-rouge">3rem</code>.</p>
<h2 id="notation">Notation</h2>
<p>Spacing utilities that apply to all breakpoints, from <code class="highlighter-rouge">xs</code> to <code class="highlighter-rouge">xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code class="highlighter-rouge">min-width: 0</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
<p>Spacing utilities that apply to all breakpoints, from <code class="language-plaintext highlighter-rouge">xs</code> to <code class="language-plaintext highlighter-rouge">xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code class="language-plaintext highlighter-rouge">min-width: 0</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
<p>The classes are named using the format <code class="highlighter-rouge">{property}{sides}-{size}</code> for <code class="highlighter-rouge">xs</code> and <code class="highlighter-rouge">{property}{sides}-{breakpoint}-{size}</code> for <code class="highlighter-rouge">sm</code>, <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, and <code class="highlighter-rouge">xl</code>.</p>
<p>The classes are named using the format <code class="language-plaintext highlighter-rouge">{property}{sides}-{size}</code> for <code class="language-plaintext highlighter-rouge">xs</code> and <code class="language-plaintext highlighter-rouge">{property}{sides}-{breakpoint}-{size}</code> for <code class="language-plaintext highlighter-rouge">sm</code>, <code class="language-plaintext highlighter-rouge">md</code>, <code class="language-plaintext highlighter-rouge">lg</code>, and <code class="language-plaintext highlighter-rouge">xl</code>.</p>
<p>Where <em>property</em> is one of:</p>
<ul>
<li><code class="highlighter-rouge">m</code> - for classes that set <code class="highlighter-rouge">margin</code></li>
<li><code class="highlighter-rouge">p</code> - for classes that set <code class="highlighter-rouge">padding</code></li>
<li><code class="language-plaintext highlighter-rouge">m</code> - for classes that set <code class="language-plaintext highlighter-rouge">margin</code></li>
<li><code class="language-plaintext highlighter-rouge">p</code> - for classes that set <code class="language-plaintext highlighter-rouge">padding</code></li>
</ul>
<p>Where <em>sides</em> is one of:</p>
<ul>
<li><code class="highlighter-rouge">t</code> - for classes that set <code class="highlighter-rouge">margin-top</code> or <code class="highlighter-rouge">padding-top</code></li>
<li><code class="highlighter-rouge">b</code> - for classes that set <code class="highlighter-rouge">margin-bottom</code> or <code class="highlighter-rouge">padding-bottom</code></li>
<li><code class="highlighter-rouge">l</code> - for classes that set <code class="highlighter-rouge">margin-left</code> or <code class="highlighter-rouge">padding-left</code></li>
<li><code class="highlighter-rouge">r</code> - for classes that set <code class="highlighter-rouge">margin-right</code> or <code class="highlighter-rouge">padding-right</code></li>
<li><code class="highlighter-rouge">x</code> - for classes that set both <code class="highlighter-rouge">*-left</code> and <code class="highlighter-rouge">*-right</code></li>
<li><code class="highlighter-rouge">y</code> - for classes that set both <code class="highlighter-rouge">*-top</code> and <code class="highlighter-rouge">*-bottom</code></li>
<li>blank - for classes that set a <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> on all 4 sides of the element</li>
<li><code class="language-plaintext highlighter-rouge">t</code> - for classes that set <code class="language-plaintext highlighter-rouge">margin-top</code> or <code class="language-plaintext highlighter-rouge">padding-top</code></li>
<li><code class="language-plaintext highlighter-rouge">b</code> - for classes that set <code class="language-plaintext highlighter-rouge">margin-bottom</code> or <code class="language-plaintext highlighter-rouge">padding-bottom</code></li>
<li><code class="language-plaintext highlighter-rouge">l</code> - for classes that set <code class="language-plaintext highlighter-rouge">margin-left</code> or <code class="language-plaintext highlighter-rouge">padding-left</code></li>
<li><code class="language-plaintext highlighter-rouge">r</code> - for classes that set <code class="language-plaintext highlighter-rouge">margin-right</code> or <code class="language-plaintext highlighter-rouge">padding-right</code></li>
<li><code class="language-plaintext highlighter-rouge">x</code> - for classes that set both <code class="language-plaintext highlighter-rouge">*-left</code> and <code class="language-plaintext highlighter-rouge">*-right</code></li>
<li><code class="language-plaintext highlighter-rouge">y</code> - for classes that set both <code class="language-plaintext highlighter-rouge">*-top</code> and <code class="language-plaintext highlighter-rouge">*-bottom</code></li>
<li>blank - for classes that set a <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> on all 4 sides of the element</li>
</ul>
<p>Where <em>size</em> is one of:</p>
<ul>
<li><code class="highlighter-rouge">0</code> - for classes that eliminate the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> by setting it to <code class="highlighter-rouge">0</code></li>
<li><code class="highlighter-rouge">1</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * .25</code></li>
<li><code class="highlighter-rouge">2</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * .5</code></li>
<li><code class="highlighter-rouge">3</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer</code></li>
<li><code class="highlighter-rouge">4</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * 1.5</code></li>
<li><code class="highlighter-rouge">5</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * 3</code></li>
<li><code class="highlighter-rouge">auto</code> - for classes that set the <code class="highlighter-rouge">margin</code> to auto</li>
<li><code class="language-plaintext highlighter-rouge">0</code> - for classes that eliminate the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> by setting it to <code class="language-plaintext highlighter-rouge">0</code></li>
<li><code class="language-plaintext highlighter-rouge">1</code> - (by default) for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> to <code class="language-plaintext highlighter-rouge">$spacer * .25</code></li>
<li><code class="language-plaintext highlighter-rouge">2</code> - (by default) for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> to <code class="language-plaintext highlighter-rouge">$spacer * .5</code></li>
<li><code class="language-plaintext highlighter-rouge">3</code> - (by default) for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> to <code class="language-plaintext highlighter-rouge">$spacer</code></li>
<li><code class="language-plaintext highlighter-rouge">4</code> - (by default) for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> to <code class="language-plaintext highlighter-rouge">$spacer * 1.5</code></li>
<li><code class="language-plaintext highlighter-rouge">5</code> - (by default) for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> to <code class="language-plaintext highlighter-rouge">$spacer * 3</code></li>
<li><code class="language-plaintext highlighter-rouge">auto</code> - for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> to auto</li>
</ul>
<p>(You can add more sizes by adding entries to the <code class="highlighter-rouge">$spacers</code> Sass map variable.)</p>
<p>(You can add more sizes by adding entries to the <code class="language-plaintext highlighter-rouge">$spacers</code> Sass map variable.)</p>
<h2 id="examples">Examples</h2>
@@ -551,7 +555,7 @@
<h3 id="horizontal-centering">Horizontal centering</h3>
<p>Additionally, Bootstrap also includes an <code class="highlighter-rouge">.mx-auto</code> class for horizontally centering fixed-width block level content—that is, content that has <code class="highlighter-rouge">display: block</code> and a <code class="highlighter-rouge">width</code> set—by setting the horizontal margins to <code class="highlighter-rouge">auto</code>.</p>
<p>Additionally, Bootstrap also includes an <code class="language-plaintext highlighter-rouge">.mx-auto</code> class for horizontally centering fixed-width block level content—that is, content that has <code class="language-plaintext highlighter-rouge">display: block</code> and a <code class="language-plaintext highlighter-rouge">width</code> set—by setting the horizontal margins to <code class="language-plaintext highlighter-rouge">auto</code>.</p>
<div class="bd-example">
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
@@ -565,15 +569,15 @@
<h3 id="negative-margin">Negative margin</h3>
<p>In CSS, <code class="highlighter-rouge">margin</code> properties can utilize negative values (<code class="highlighter-rouge">padding</code> cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., <code class="highlighter-rouge">1</code>, <code class="highlighter-rouge">2</code>, <code class="highlighter-rouge">3</code>, <code class="highlighter-rouge">4</code>, <code class="highlighter-rouge">5</code>). These utilities are ideal for customizing grid column gutters across breakpoints.</p>
<p>In CSS, <code class="language-plaintext highlighter-rouge">margin</code> properties can utilize negative values (<code class="language-plaintext highlighter-rouge">padding</code> cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., <code class="language-plaintext highlighter-rouge">1</code>, <code class="language-plaintext highlighter-rouge">2</code>, <code class="language-plaintext highlighter-rouge">3</code>, <code class="language-plaintext highlighter-rouge">4</code>, <code class="language-plaintext highlighter-rouge">5</code>). These utilities are ideal for customizing grid column gutters across breakpoints.</p>
<p>The syntax is nearly the same as the default, positive margin utilities, but with the addition of <code class="highlighter-rouge">n</code> before the requested size. Here’s an example class that’s the opposite of <code class="highlighter-rouge">.mt-1</code>:</p>
<p>The syntax is nearly the same as the default, positive margin utilities, but with the addition of <code class="language-plaintext highlighter-rouge">n</code> before the requested size. Here’s an example class that’s the opposite of <code class="language-plaintext highlighter-rouge">.mt-1</code>:</p>
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.mt-n1</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">-0</span><span class="mi">.25rem</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
<p>Here’s an example of customizing the Bootstrap grid at the medium (<code class="highlighter-rouge">md</code>) breakpoint and above. We’ve increased the <code class="highlighter-rouge">.col</code> padding with <code class="highlighter-rouge">.px-md-5</code> and then counteracted that with <code class="highlighter-rouge">.mx-md-n5</code> on the parent <code class="highlighter-rouge">.row</code>.</p>
<p>Here’s an example of customizing the Bootstrap grid at the medium (<code class="language-plaintext highlighter-rouge">md</code>) breakpoint and above. We’ve increased the <code class="language-plaintext highlighter-rouge">.col</code> padding with <code class="language-plaintext highlighter-rouge">.px-md-5</code> and then counteracted that with <code class="language-plaintext highlighter-rouge">.mx-md-n5</code> on the parent <code class="language-plaintext highlighter-rouge">.row</code>.</p>
<div class="bd-example">
<div class="row mx-md-n5">
@@ -592,6 +596,6 @@
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
</body>
</html>