102 lines
3.0 KiB
Markdown
102 lines
3.0 KiB
Markdown
# Usage: v1.0.0.066
|
|
|
|
This is the usage guide for [BSFormControls4](/bootstrap-bsformcontrols4), version 1.0.0.066.
|
|
|
|
## Usage
|
|
|
|
### Horizontal toggle switch
|
|
|
|
This horizontally-oriented toggle switch is actually just a checkbox. You can apply stock BS4 colours to the on and off positions using the classes below.
|
|
|
|
#### Colour Options
|
|
|
|
CSS class for colour in the off position: **switch-off-primary**, **switch-off-success**, **switch-off-info**, **switch-off-warning**, **switch-off-danger** and **switch-off-muted**.
|
|
|
|
CSS class for colour in the on position: **switch-primary**, **switch-success**, **switch-info**, **switch-warning**, **switch-danger** and **switch-muted**.
|
|
|
|
#### Size Options
|
|
|
|
We have the standard set of size options: **switch-sm**, **switch-md** and **switch-lg**.
|
|
|
|
#### Example
|
|
|
|
```html
|
|
<div class="mb-3 row">
|
|
<label for="switch6" class="col-sm-4 col-form-label-sm">Toggle Switch</label>
|
|
<div class="col-sm-8">
|
|
<label class="switch switch-sm switch-primary">
|
|
<input id="switch6" type="checkbox" />
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3 row">
|
|
<label for="switch2" class="col-sm-4 col-form-label">Toggle Switch</label>
|
|
<div class="col-sm-8">
|
|
<label class="switch switch-primary">
|
|
<input id="switch2" type="checkbox" />
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3 row">
|
|
<label for="switch1" class="col-sm-4 col-form-label-lg">Toggle Switch</label>
|
|
<div class="col-sm-8">
|
|
<label class="switch switch-lg switch-primary">
|
|
<input id="switch1" type="checkbox" />
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Checkbox
|
|
|
|
This a style consistent checkbox.
|
|
|
|
#### Colour Options
|
|
|
|
CSS class for colour in the off position: **chxbox-off-primary**, **chxbox-off-success**, **chxbox-off-info**, **chxbox-off-warning**, **chxbox-off-danger** and **chxbox-off-muted**.
|
|
|
|
CSS class for colour in the off position: **chxbox-primary**, **chxbox-success**, **chxbox-info**, **chxbox-warning**, **chxbox-danger** and **chxbox-muted**.
|
|
|
|
#### Size Options
|
|
|
|
We have the standard set of size options: **chxbox-sm**, **chxbox-md** and **chxbox-lg**.
|
|
|
|
#### Example
|
|
|
|
```html
|
|
<div class="mb-3 row">
|
|
<label for="checkbox1" class="col-sm-4 col-form-label-sm">Toggle Checkbox</label>
|
|
<div class="col-sm-8">
|
|
<label class="chxbox chxbox-sm">
|
|
<input id="checkbox1" type="checkbox" />
|
|
<span class="chxbox-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3 row">
|
|
<label for="checkbox2" class="col-sm-4 col-form-label">Toggle Checkbox</label>
|
|
<div class="col-sm-8">
|
|
<label class="chxbox">
|
|
<input id="checkbox2" type="checkbox" />
|
|
<span class="chxbox-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3 row">
|
|
<label for="checkbox3" class="col-sm-4 col-form-label-lg">Toggle Checkbox</label>
|
|
<div class="col-sm-8">
|
|
<label class="chxbox chxbox-lg">
|
|
<input id="checkbox3" type="checkbox" />
|
|
<span class="chxbox-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
```
|