mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 04:11:39 +02:00
Code Issues Releases Wiki Activity

Docs: Use example shortcode for all Button groups (#36450)

Browse Source
This commit is contained in:
Julien Déramond
2022-05-30 07:27:48 +02:00
committed by GitHub
parent 651dae6d0f
commit ef3ecaf997
1 changed files with 80 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
site/content/docs/5.2/components/button-group.md
View File

@@ -143,7 +143,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups. Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
<div class="bd-example"> {{< example >}}
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group"> <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-dark">Left</button> <button type="button" class="btn btn-outline-dark">Left</button>
<button type="button" class="btn btn-outline-dark">Middle</button> <button type="button" class="btn btn-outline-dark">Middle</button>
@@ -161,13 +161,7 @@ Instead of applying button sizing classes to every button in a group, just add `
<button type="button" class="btn btn-outline-dark">Middle</button> <button type="button" class="btn btn-outline-dark">Middle</button>
<button type="button" class="btn btn-outline-dark">Right</button> <button type="button" class="btn btn-outline-dark">Right</button>
</div> </div>
</div> {{< /example >}}
```html
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
```
## Nesting ## Nesting
@@ -194,7 +188,7 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.** Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
<div class="bd-example"> {{< example >}}
<div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-dark">Button</button> <button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-dark">Button</button> <button type="button" class="btn btn-dark">Button</button>
@@ -203,9 +197,9 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-dark">Button</button> <button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-dark">Button</button> <button type="button" class="btn btn-dark">Button</button>
</div> </div>
</div> {{< /example >}}
<div class="bd-example"> {{< example >}}
<div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <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>
<button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-primary">Button</button>
@@ -248,9 +242,9 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
</ul> </ul>
</div> </div>
</div> </div>
</div> {{< /example >}}
<div class="bd-example"> {{< example >}}
<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group"> <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> <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> <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
@@ -259,10 +253,4 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off"> <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
<label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label> <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div> </div>
</div> {{< /example >}}
```html
<div class="btn-group-vertical">
...
</div>
```