rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-12 09:54:25 +01:00
Code Issues Actions Packages Releases 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 80 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -143,31 +143,25 @@ 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>
<button type="button" class="btn btn-outline-dark">Right</button> <button type="button" class="btn btn-outline-dark">Right</button>
</div>
<br>
<div class="btn-group" role="group" aria-label="Default button group">
<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">Right</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<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">Right</button>
</div>
</div> </div>
<br>
```html <div class="btn-group" role="group" aria-label="Default button group">
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div> <button type="button" class="btn btn-outline-dark">Left</button>
<div class="btn-group" role="group" aria-label="...">...</div> <button type="button" class="btn btn-outline-dark">Middle</button>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div> <button type="button" class="btn btn-outline-dark">Right</button>
``` </div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<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">Right</button>
</div>
{{< /example >}}
## Nesting ## Nesting
@ -194,19 +188,19 @@ 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>
<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>
<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>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
@ -247,22 +241,16 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li>
</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>
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off"> <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
<label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label> <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
<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>
```