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:
committed by
Mark Otto
parent
1b2ea5efb1
commit
1a0a0858ef
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user