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

Add v5.3.0 docs (#38658)

Browse Source
This commit is contained in:
XhmikosR
2023-05-30 18:21:02 +03:00
committed by GitHub
parent 87498ceeb2
commit 4be8b59d15
232 changed files with 4200 additions and 3253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/5.3/components/button-group/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Group a series of buttons together on a single line or stack them in a vertical column.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.111.3">
<meta name="generator" content="Hugo 0.112.5">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.3">
@@ -18,7 +18,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">
@@ -531,7 +531,7 @@
<main class="bd-main order-1">
<div class="bd-intro pt-2 ps-lg-2">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/components/button-group.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
<div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/components/button-group.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
View on GitHub
</a>
</div>
@@ -572,7 +572,7 @@
<h2 id="basic-example">Basic example <a class="anchor-link" href="#basic-example" aria-label="Link to this section: Basic example"></a></h2>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
@@ -599,7 +599,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
</div>
<p>These classes can also be added to groups of links, as an alternative to the <a href="/docs/5.3/components/navs-tabs/"><code>.nav</code> navigation components</a>.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-group">
<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
<a href="#" class="btn btn-primary">Link</a>
@@ -622,7 +622,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<h2 id="mixed-styles">Mixed styles <a class="anchor-link" href="#mixed-styles" aria-label="Link to this section: Mixed styles"></a></h2>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
@@ -645,7 +645,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<h2 id="outlined-styles">Outlined styles <a class="anchor-link" href="#outlined-styles" aria-label="Link to this section: Outlined styles"></a></h2>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
@@ -669,7 +669,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
<h2 id="checkbox-and-radio-button-groups">Checkbox and radio button groups <a class="anchor-link" href="#checkbox-and-radio-button-groups" aria-label="Link to this section: Checkbox and radio button groups"></a></h2>
<p>Combine button-like checkbox and radio <a href="/docs/5.3/forms/checks-radios/">toggle buttons</a> into a seamless looking button group.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
@@ -701,7 +701,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-outline-primary&#34;</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;btncheck3&#34;</span><span class="p">&gt;</span>Checkbox 3<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
@@ -735,7 +735,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
<h2 id="button-toolbar">Button toolbar <a class="anchor-link" href="#button-toolbar" aria-label="Link to this section: Button toolbar"></a></h2>
<p>Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
@@ -780,7 +780,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<p>Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you&rsquo;ll likely need some utilities though to space things properly.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
@@ -844,7 +844,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
<h2 id="sizing">Sizing <a class="anchor-link" href="#sizing" aria-label="Link to this section: Sizing"></a></h2>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including each one when nesting multiple groups.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
@@ -892,7 +892,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
<h2 id="nesting">Nesting <a class="anchor-link" href="#nesting" aria-label="Link to this section: Nesting"></a></h2>
<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
@@ -934,7 +934,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
<h2 id="vertical-variation">Vertical variation <a class="anchor-link" href="#vertical-variation" aria-label="Link to this section: Vertical variation"></a></h2>
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong>Split button dropdowns are not supported here.</strong></p>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
@@ -962,7 +962,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary&#34;</span><span class="p">&gt;</span>Button<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
@@ -1058,7 +1058,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
<label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
@@ -1103,7 +1103,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
<ul class="list-unstyled small">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v5.3.0-alpha3.</li>
<li class="mb-2">Currently v5.3.0.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -1152,7 +1152,7 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
</div>
</footer>
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -1180,10 +1180,10 @@ Button groups require an appropriate <code>role</code> attribute and explicit la
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">