mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 11:51:23 +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.
<div class="bd-example">
{{< example >}}
<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">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">Right</button>
</div>
</div>
```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>
```
{{< /example >}}
## 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.**
<div class="bd-example">
{{< example >}}
<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>
@@ -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>
</div>
</div>
{{< /example >}}
<div class="bd-example">
{{< example >}}
<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>
@@ -248,9 +242,9 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
</ul>
</div>
</div>
</div>
{{< /example >}}
<div class="bd-example">
{{< example >}}
<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>
@@ -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">
<label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>
</div>
```html
<div class="btn-group-vertical">
...
</div>
```
{{< /example >}}