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

58
docs/4.5/components/buttons/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="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
<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/components/buttons/">
<!-- 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">
@@ -487,7 +488,10 @@
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Buttons</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/components/buttons.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<h1 class="bd-title" id="content">Buttons</h1>
</div>
<p class="bd-lead">Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
@@ -522,18 +526,18 @@
<div class="bd-callout bd-callout-warning">
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="language-plaintext highlighter-rouge">.sr-only</code> class.</p>
</div>
<h2 id="disable-text-wrapping">Disable text wrapping</h2>
<p>If you don’t want the button text to wrap, you can add the <code class="highlighter-rouge">.text-nowrap</code> class to the button. In Sass, you can set <code class="highlighter-rouge">$btn-white-space: nowrap</code> to disable text wrapping for each button.</p>
<p>If you don’t want the button text to wrap, you can add the <code class="language-plaintext highlighter-rouge">.text-nowrap</code> class to the button. In Sass, you can set <code class="language-plaintext highlighter-rouge">$btn-white-space: nowrap</code> to disable text wrapping for each button.</p>
<h2 id="button-tags">Button tags</h2>
<p>The <code class="highlighter-rouge">.btn</code> classes are designed to be used with the <code class="highlighter-rouge">&lt;button&gt;</code> element. However, you can also use these classes on <code class="highlighter-rouge">&lt;a&gt;</code> or <code class="highlighter-rouge">&lt;input&gt;</code> elements (though some browsers may apply a slightly different rendering).</p>
<p>The <code class="language-plaintext highlighter-rouge">.btn</code> classes are designed to be used with the <code class="language-plaintext highlighter-rouge">&lt;button&gt;</code> element. However, you can also use these classes on <code class="language-plaintext highlighter-rouge">&lt;a&gt;</code> or <code class="language-plaintext highlighter-rouge">&lt;input&gt;</code> elements (though some browsers may apply a slightly different rendering).</p>
<p>When using button classes on <code class="highlighter-rouge">&lt;a&gt;</code> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a <code class="highlighter-rouge">role="button"</code> to appropriately convey their purpose to assistive technologies such as screen readers.</p>
<p>When using button classes on <code class="language-plaintext highlighter-rouge">&lt;a&gt;</code> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a <code class="language-plaintext highlighter-rouge">role="button"</code> to appropriately convey their purpose to assistive technologies such as screen readers.</p>
<div class="bd-example">
<a class="btn btn-primary" href="#" role="button">Link</a>
@@ -550,7 +554,7 @@
<h2 id="outline-buttons">Outline buttons</h2>
<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code class="highlighter-rouge">.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code class="language-plaintext highlighter-rouge">.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
<div class="bd-example">
@@ -574,7 +578,7 @@
<h2 id="sizes">Sizes</h2>
<p>Fancy larger or smaller buttons? Add <code class="highlighter-rouge">.btn-lg</code> or <code class="highlighter-rouge">.btn-sm</code> for additional sizes.</p>
<p>Fancy larger or smaller buttons? Add <code class="language-plaintext highlighter-rouge">.btn-lg</code> or <code class="language-plaintext highlighter-rouge">.btn-sm</code> for additional sizes.</p>
<div class="bd-example">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
@@ -590,7 +594,7 @@
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span></code></pre></figure>
<p>Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">.btn-block</code>.</p>
<p>Create block level buttons—those that span the full width of a parent—by adding <code class="language-plaintext highlighter-rouge">.btn-block</code>.</p>
<div class="bd-example">
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
@@ -601,7 +605,7 @@
<h2 id="active-state">Active state</h2>
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. <strong>There’s no need to add a class to <code class="highlighter-rouge">&lt;button&gt;</code>s as they use a pseudo-class</strong>. However, you can still force the same active appearance with <code class="highlighter-rouge">.active</code> (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.</p>
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. <strong>There’s no need to add a class to <code class="language-plaintext highlighter-rouge">&lt;button&gt;</code>s as they use a pseudo-class</strong>. However, you can still force the same active appearance with <code class="language-plaintext highlighter-rouge">.active</code> (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.</p>
<div class="bd-example">
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
@@ -612,7 +616,7 @@
<h2 id="disabled-state">Disabled state</h2>
<p>Make buttons look inactive by adding the <code class="highlighter-rouge">disabled</code> boolean attribute to any <code class="highlighter-rouge">&lt;button&gt;</code> element.</p>
<p>Make buttons look inactive by adding the <code class="language-plaintext highlighter-rouge">disabled</code> boolean attribute to any <code class="language-plaintext highlighter-rouge">&lt;button&gt;</code> element.</p>
<div class="bd-example">
<button type="button" class="btn btn-lg btn-primary" disabled="">Primary button</button>
@@ -621,12 +625,12 @@
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-primary"</span> <span class="na">disabled</span><span class="nt">&gt;</span>Primary button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span> <span class="na">disabled</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></code></pre></figure>
<p>Disabled buttons using the <code class="highlighter-rouge">&lt;a&gt;</code> element behave a bit different:</p>
<p>Disabled buttons using the <code class="language-plaintext highlighter-rouge">&lt;a&gt;</code> element behave a bit different:</p>
<ul>
<li><code class="highlighter-rouge">&lt;a&gt;</code>s don’t support the <code class="highlighter-rouge">disabled</code> attribute, so you must add the <code class="highlighter-rouge">.disabled</code> class to make it visually appear disabled.</li>
<li>Some future-friendly styles are included to disable all <code class="highlighter-rouge">pointer-events</code> on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.</li>
<li>Disabled buttons should include the <code class="highlighter-rouge">aria-disabled="true"</code> attribute to indicate the state of the element to assistive technologies.</li>
<li><code class="language-plaintext highlighter-rouge">&lt;a&gt;</code>s don’t support the <code class="language-plaintext highlighter-rouge">disabled</code> attribute, so you must add the <code class="language-plaintext highlighter-rouge">.disabled</code> class to make it visually appear disabled.</li>
<li>Some future-friendly styles are included to disable all <code class="language-plaintext highlighter-rouge">pointer-events</code> on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.</li>
<li>Disabled buttons should include the <code class="language-plaintext highlighter-rouge">aria-disabled="true"</code> attribute to indicate the state of the element to assistive technologies.</li>
</ul>
<div class="bd-example">
@@ -639,7 +643,7 @@
<div class="bd-callout bd-callout-warning">
<h5 id="link-functionality-caveat">Link functionality caveat</h5>
<p>The <code class="highlighter-rouge">.disabled</code> class uses <code class="highlighter-rouge">pointer-events: none</code> to try to disable the link functionality of <code class="highlighter-rouge">&lt;a&gt;</code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code class="highlighter-rouge">pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a <code class="highlighter-rouge">tabindex="-1"</code> attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p>
<p>The <code class="language-plaintext highlighter-rouge">.disabled</code> class uses <code class="language-plaintext highlighter-rouge">pointer-events: none</code> to try to disable the link functionality of <code class="language-plaintext highlighter-rouge">&lt;a&gt;</code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code class="language-plaintext highlighter-rouge">pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a <code class="language-plaintext highlighter-rouge">tabindex="-1"</code> attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p>
</div>
<h2 id="button-plugin">Button plugin</h2>
@@ -648,7 +652,7 @@
<h3 id="toggle-states">Toggle states</h3>
<p>Add <code class="highlighter-rouge">data-toggle="button"</code> to toggle a button’s <code class="highlighter-rouge">active</code> state. If you’re pre-toggling a button, you must manually add the <code class="highlighter-rouge">.active</code> class <strong>and</strong> <code class="highlighter-rouge">aria-pressed="true"</code> to the <code class="highlighter-rouge">&lt;button&gt;</code>.</p>
<p>Add <code class="language-plaintext highlighter-rouge">data-toggle="button"</code> to toggle a button’s <code class="language-plaintext highlighter-rouge">active</code> state. If you’re pre-toggling a button, you must manually add the <code class="language-plaintext highlighter-rouge">.active</code> class <strong>and</strong> <code class="language-plaintext highlighter-rouge">aria-pressed="true"</code> to the <code class="language-plaintext highlighter-rouge">&lt;button&gt;</code>.</p>
<div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
@@ -661,11 +665,11 @@
<h3 id="checkbox-and-radio-buttons">Checkbox and radio buttons</h3>
<p>Bootstrap’s <code class="highlighter-rouge">.button</code> styles can be applied to other elements, such as <code class="highlighter-rouge">&lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add <code class="highlighter-rouge">data-toggle="buttons"</code> to a <code class="highlighter-rouge">.btn-group</code> containing those modified buttons to enable their toggling behavior via JavaScript and add <code class="highlighter-rouge">.btn-group-toggle</code> to style the <code class="highlighter-rouge">&lt;input&gt;</code>s within your buttons. <strong>Note that you can create single input-powered buttons or groups of them.</strong></p>
<p>Bootstrap’s <code class="language-plaintext highlighter-rouge">.button</code> styles can be applied to other elements, such as <code class="language-plaintext highlighter-rouge">&lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add <code class="language-plaintext highlighter-rouge">data-toggle="buttons"</code> to a <code class="language-plaintext highlighter-rouge">.btn-group</code> containing those modified buttons to enable their toggling behavior via JavaScript and add <code class="language-plaintext highlighter-rouge">.btn-group-toggle</code> to style the <code class="language-plaintext highlighter-rouge">&lt;input&gt;</code>s within your buttons. <strong>Note that you can create single input-powered buttons or groups of them.</strong></p>
<p>The checked state for these buttons is <strong>only updated via <code class="highlighter-rouge">click</code> event</strong> on the button. If you use another method to update the input—e.g., with <code class="highlighter-rouge">&lt;input type="reset"&gt;</code> or by manually applying the input’s <code class="highlighter-rouge">checked</code> property—you’ll need to toggle <code class="highlighter-rouge">.active</code> on the <code class="highlighter-rouge">&lt;label&gt;</code> manually.</p>
<p>The checked state for these buttons is <strong>only updated via <code class="language-plaintext highlighter-rouge">click</code> event</strong> on the button. If you use another method to update the input—e.g., with <code class="language-plaintext highlighter-rouge">&lt;input type="reset"&gt;</code> or by manually applying the input’s <code class="language-plaintext highlighter-rouge">checked</code> property—you’ll need to toggle <code class="language-plaintext highlighter-rouge">.active</code> on the <code class="language-plaintext highlighter-rouge">&lt;label&gt;</code> manually.</p>
<p>Note that pre-checked buttons require you to manually add the <code class="highlighter-rouge">.active</code> class to the input’s <code class="highlighter-rouge">&lt;label&gt;</code>.</p>
<p>Note that pre-checked buttons require you to manually add the <code class="language-plaintext highlighter-rouge">.active</code> class to the input’s <code class="language-plaintext highlighter-rouge">&lt;label&gt;</code>.</p>
<div class="bd-example">
<div class="btn-group-toggle" data-toggle="buttons">
@@ -716,11 +720,11 @@
</thead>
<tbody>
<tr>
<td><code class="highlighter-rouge">$().button('toggle')</code></td>
<td><code class="language-plaintext highlighter-rouge">$().button('toggle')</code></td>
<td>Toggles push state. Gives the button the appearance that it has been activated.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">$().button('dispose')</code></td>
<td><code class="language-plaintext highlighter-rouge">$().button('dispose')</code></td>
<td>Destroys an element’s button.</td>
</tr>
</tbody>
@@ -731,6 +735,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>