2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00

Remove checkbox/radio toggle from button plugin in favor of a CSS only solution

This commit is contained in:
Martijn Cuppens
2020-05-02 11:11:24 +02:00
committed by Mark Otto
parent 1b2ea5efb1
commit 1a0a0858ef
10 changed files with 122 additions and 317 deletions
@@ -1,14 +1,14 @@
---
layout: docs
title: Button group
description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
description: Group a series of buttons together on a single line with the button group.
group: components
toc: true
---
## Basic example
Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{< docsref "/components/buttons#button-plugin" >}}).
Wrap a series of buttons with `.btn` in `.btn-group`.
{{< example >}}
<div class="btn-group" role="group" aria-label="Basic example">
@@ -26,6 +26,26 @@ In order for assistive technologies (such as screen readers) to convey that a se
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
{{< /callout >}}
These classes can also be added to links. Use the `.active` class to highlight a link.
{{< example >}}
<div class="btn-group">
<a href="#" class="btn btn-secondary active">Active link</a>
<a href="#" class="btn btn-secondary">Link</a>
<a href="#" class="btn btn-secondary">Link</a>
</div>
{{< /example >}}
## Outlined styles
{{< example >}}
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
{{< /example >}}
## Button toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.