diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2020-06-04 16:59:24 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2020-06-16 05:04:19 +0300 |
commit | 8b7b234fd1c840a23ac2ca2ba69a3a2a2abf3100 (patch) | |
tree | 7aaadebf416a6a281c2c53fdf192e6725ce7be64 /site | |
parent | 1a0a0858efa0e1e3c6bebd38058df8ad39ca27a5 (diff) |
Switch to btn-check
Diffstat (limited to 'site')
-rw-r--r-- | site/content/docs/5.0/components/buttons.md | 2 | ||||
-rw-r--r-- | site/content/docs/5.0/forms/checks.md | 28 | ||||
-rw-r--r-- | site/content/docs/5.0/migration.md | 2 |
3 files changed, 16 insertions, 16 deletions
diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md index cc0887487e..fbd9600dcd 100644 --- a/site/content/docs/5.0/components/buttons.md +++ b/site/content/docs/5.0/components/buttons.md @@ -103,7 +103,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun ## Button plugin -Do more with buttons. Control button states or create groups of buttons for more components like toolbars. +The button plugin allows you to create simple on/off toggle buttons. ### Toggle states diff --git a/site/content/docs/5.0/forms/checks.md b/site/content/docs/5.0/forms/checks.md index fec40b962b..a8b3666258 100644 --- a/site/content/docs/5.0/forms/checks.md +++ b/site/content/docs/5.0/forms/checks.md @@ -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 >}} diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 7edc898191..e018990eb7 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -150,7 +150,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be ### Buttons -- The checkbox/radio toggle is removed from the button plugin in favour of a CSS only solution, which is documented in the [form checks]({{< docsref "/forms/checks#toggle-buttons" >}}) docs. The `.btn-toggle` class can be added to inputs, any label with `.btn` and modifier class can be used to theme the labels. [See #30650](https://github.com/twbs/bootstrap/pull/30650). +- The checkbox/radio toggle is removed from the button plugin in favour of a CSS only solution, which is documented in the [form checks]({{< docsref "/forms/checks#toggle-buttons" >}}) docs. The `.btn-check` class can be added to inputs, any label with `.btn` and modifier class can be used to theme the labels. [See #30650](https://github.com/twbs/bootstrap/pull/30650). ### Cards |