mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Docs: separate button group out of checks/radios, expand button groups page (#31201)

Browse Source 
* Keep checks/radio toggle buttons on topic

- give examples of the pure toggle checks and radios, without the button group class. show that these work fine without `.btn-group`, but still cross-reference it
- move the explanation from "Checkbox toggle buttons" directly to "Toggle buttons", as the mention of using button classes applies equally to the subsequent "Radio toggle buttons" and "Outlined styles" subsections.

* Expand button group description

as it's not just single line, but vertical as well

* Expand button group examples

- add more colour ... `.btn-secondary` is just dull and uninspiring
- new section to showcase "Checkbox and radio button groups"
- add a mixed styles example
- add an example of vertical radio button group
This commit is contained in:
Patrick H. Lauke
2020-07-06 08:52:43 +01:00
committed by GitHub
parent 277915299f
commit 828366de89
2 changed files with 115 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/forms/checks-radios.md
+14 -18
View File
@@ -213,9 +213,9 @@ Omit the wrapping `.form-check` for checkboxes and radios that have no label tex
## Toggle buttons
### Checkbox toggle buttons
Create button-like checkboxes and radio buttons by using `.btn` styles rather than `.form-check-label` on the `<label>` elements. These toggle buttons can further be grouped in a [button group]({{< docsref "/components/button-group" >}}) if needed.
Bootstrap's `.btn` styles can be applied to `<label>`s, to provide checkbox style button toggling. Add an input with a `.btn-check` class as previous sibling to toggle the input state.
### Checkbox toggle buttons
{{< example >}}
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
@@ -233,23 +233,21 @@ Visually, these checkbox toggle buttons are identical to the [button plugin togg
### Radio toggle buttons
Toggle buttons can be grouped in a [button group]({{< docsref "/components/button-group" >}}) if needed.
{{< example >}}
<div class="btn-group">
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
<label class="btn btn-secondary" for="option3">Radio</label>
</div>
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
<label class="btn btn-secondary" for="option3">Radio</label>
{{< /example >}}
### Outlined styles
Different variants of `.btn`, such at the various outlined styles, are supported.
{{< example >}}
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>
@@ -257,11 +255,9 @@ Toggle buttons can be grouped in a [button group]({{< docsref "/components/butto
<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>
<div class="btn-group">
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
</div>
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
{{< /example >}}