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

32
docs/4.5/layout/utilities-for-layout/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="For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.">
<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/layout/utilities-for-layout/">
<!-- 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">
@@ -477,33 +478,36 @@
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Utilities for layout</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/layout/utilities-for-layout.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<h1 class="bd-title" id="content">Utilities for layout</h1>
</div>
<p class="bd-lead">For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="changing-display">Changing <code class="highlighter-rouge">display</code></h2>
<h2 id="changing-display">Changing <code class="language-plaintext highlighter-rouge">display</code></h2>
<p>Use our <a href="/docs/4.5/utilities/display/">display utilities</a> for responsively toggling common values of the <code class="highlighter-rouge">display</code> property. Mix it with our grid system, content, or components to show or hide them across specific viewports.</p>
<p>Use our <a href="/docs/4.5/utilities/display/">display utilities</a> for responsively toggling common values of the <code class="language-plaintext highlighter-rouge">display</code> property. Mix it with our grid system, content, or components to show or hide them across specific viewports.</p>
<h2 id="flexbox-options">Flexbox options</h2>
<p>Bootstrap 4 is built with flexbox, but not every element’s <code class="highlighter-rouge">display</code> has been changed to <code class="highlighter-rouge">display: flex</code> as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of <a href="/docs/4.5/components/alerts/">our components</a> are built with flexbox enabled.</p>
<p>Bootstrap 4 is built with flexbox, but not every element’s <code class="language-plaintext highlighter-rouge">display</code> has been changed to <code class="language-plaintext highlighter-rouge">display: flex</code> as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of <a href="/docs/4.5/components/alerts/">our components</a> are built with flexbox enabled.</p>
<p>Should you need to add <code class="highlighter-rouge">display: flex</code> to an element, do so with <code class="highlighter-rouge">.d-flex</code> or one of the responsive variants (e.g., <code class="highlighter-rouge">.d-sm-flex</code>). You’ll need this class or <code class="highlighter-rouge">display</code> value to allow the use of our extra <a href="/docs/4.5/utilities/flex/">flexbox utilities</a> for sizing, alignment, spacing, and more.</p>
<p>Should you need to add <code class="language-plaintext highlighter-rouge">display: flex</code> to an element, do so with <code class="language-plaintext highlighter-rouge">.d-flex</code> or one of the responsive variants (e.g., <code class="language-plaintext highlighter-rouge">.d-sm-flex</code>). You’ll need this class or <code class="language-plaintext highlighter-rouge">display</code> value to allow the use of our extra <a href="/docs/4.5/utilities/flex/">flexbox utilities</a> for sizing, alignment, spacing, and more.</p>
<h2 id="margin-and-padding">Margin and padding</h2>
<p>Use the <code class="highlighter-rouge">margin</code> and <code class="highlighter-rouge">padding</code> <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a <code class="highlighter-rouge">1rem</code> value default <code class="highlighter-rouge">$spacer</code> variable. Choose values for all viewports (e.g., <code class="highlighter-rouge">.mr-3</code> for <code class="highlighter-rouge">margin-right: 1rem</code>), or pick responsive variants to target specific viewports (e.g., <code class="highlighter-rouge">.mr-md-3</code> for <code class="highlighter-rouge">margin-right: 1rem</code> starting at the <code class="highlighter-rouge">md</code> breakpoint).</p>
<p>Use the <code class="language-plaintext highlighter-rouge">margin</code> and <code class="language-plaintext highlighter-rouge">padding</code> <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a <code class="language-plaintext highlighter-rouge">1rem</code> value default <code class="language-plaintext highlighter-rouge">$spacer</code> variable. Choose values for all viewports (e.g., <code class="language-plaintext highlighter-rouge">.mr-3</code> for <code class="language-plaintext highlighter-rouge">margin-right: 1rem</code>), or pick responsive variants to target specific viewports (e.g., <code class="language-plaintext highlighter-rouge">.mr-md-3</code> for <code class="language-plaintext highlighter-rouge">margin-right: 1rem</code> starting at the <code class="language-plaintext highlighter-rouge">md</code> breakpoint).</p>
<h2 id="toggle-visibility">Toggle <code class="highlighter-rouge">visibility</code></h2>
<h2 id="toggle-visibility">Toggle <code class="language-plaintext highlighter-rouge">visibility</code></h2>
<p>When toggling <code class="highlighter-rouge">display</code> isn’t needed, you can toggle the <code class="highlighter-rouge">visibility</code> of an element with our <a href="/docs/4.5/utilities/visibility/">visibility utilities</a>. Invisible elements will still affect the layout of the page, but are visually hidden from visitors.</p>
<p>When toggling <code class="language-plaintext highlighter-rouge">display</code> isn’t needed, you can toggle the <code class="language-plaintext highlighter-rouge">visibility</code> of an element with our <a href="/docs/4.5/utilities/visibility/">visibility utilities</a>. Invisible elements will still affect the layout of the page, but are visually hidden from visitors.</p>
</main>
</div>
</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>