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

Switch to btn-check

Browse Source
This commit is contained in:
Martijn Cuppens
2020-06-04 15:59:24 +02:00
committed by Mark Otto
parent 1a0a0858ef
commit 8b7b234fd1
7 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/forms/checks.md
+14 -14
View File
@@ -214,16 +214,16 @@ Omit the wrapping `.form-check` for checkboxes and radios that have no label tex
### Checkbox toggle buttons
Bootstrap's `.btn` styles can be applied to `<label>`s, to provide checkbox style button toggling. Add an input with a `.btn-toggle` class as previous sibling to toggle the input state.
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.
{{< example >}}
<input type="checkbox" class="btn-toggle" id="btn-toggle" autocomplete="off">
<label class="btn btn-primary" for="btn-toggle">Single toggle</label>
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
{{< /example >}}
{{< example >}}
<input type="checkbox" class="btn-toggle" id="btn-toggle-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-toggle-2">Checked</label>
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
{{< /example >}}
### Radio toggle buttons
@@ -232,13 +232,13 @@ Toggle buttons can be grouped in a [button group]({{< docsref "/components/butto
{{< example >}}
<div class="btn-group">
<input type="radio" class="btn-toggle" name="options" id="option1" autocomplete="off" checked>
<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-toggle" name="options" id="option2" autocomplete="off">
<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-toggle" name="options" id="option3" autocomplete="off">
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
<label class="btn btn-secondary" for="option3">Radio</label>
</div>
{{< /example >}}
@@ -246,17 +246,17 @@ Toggle buttons can be grouped in a [button group]({{< docsref "/components/butto
### Outlined styles
{{< example >}}
<input type="checkbox" class="btn-toggle" id="btn-toggle-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-toggle-outlined">Single toggle</label><br>
<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>
<input type="checkbox" class="btn-toggle" id="btn-toggle-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-toggle-2-outlined">Checked</label><br>
<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-toggle" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<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-toggle" name="options-outlined" id="danger-outlined" autocomplete="off">
<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>
{{< /example >}}