mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 08:39:56 +02:00
Code Issues Releases Wiki Activity

Add switch custom form control (#23004)

Browse Source
This commit is contained in:
Gijs Boddeus
2018-12-12 14:28:25 +01:00
committed by XhmikosR
parent dbadf24bb3
commit 180a06eeb7
3 changed files with 61 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
site/docs/4.1/components/forms.md
View File

@@ -1185,6 +1185,22 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
{% endcapture %}
{% include example.html content=example %}
### Switches
A switch has the markup of a custom checkbox but uses the `.custom-switch` class to render a toggle switch. Switches also support the `disabled` attribute.
{% capture example %}
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
{% endcapture %}
{% include example.html content=example %}
### Select menu
Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles. Custom styles are limited to the `<select>`'s initial appearance and cannot modify the `<option>`s due to browser limitations.