Added readme
This commit is contained in:
Ray
parent
3418d8c8b7
commit
655dd9e6c2
36
README.md
Normal file
36
README.md
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
# BSFormControls4
|
||||||
|
|
||||||
|
> BSFormControls4 is a small collection of form controls for Bootstrap 4. This is implemented purely with CSS. Bootstrap 4 is not actually required.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Horizontal toggle switch (checkbox)
|
||||||
|
- Checkbox
|
||||||
|
|
||||||
|
## Screenshots
|
||||||
|
|
||||||
|
[](wiki/screenshot-1.png)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Releases & Builds
|
||||||
|
|
||||||
|
See [Releases](/Ray/bsformcontrols4/releases)
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
See [Usage](wiki/USAGE.md)
|
||||||
|
|
||||||
|
## Acknowledgements
|
||||||
|
|
||||||
|
This software uses a number of dependencies and assets from third-parties.
|
||||||
|
These developers and artists deserve due credit for their work and for their commitment to sharing their work freely.
|
||||||
|
Each product is released under their own particular license, for more information please visit their websites.
|
||||||
|
|
||||||
|
- [Bootstrap](https://getbootstrap.com/)
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the least restrictive terms of its dependencies, viz. MIT License.
|
||||||
101
wiki/USAGE.md
Normal file
101
wiki/USAGE.md
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
# 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>
|
||||||
|
```
|
||||||
BIN
wiki/screenshot-1-h240.png
Normal file
BIN
wiki/screenshot-1-h240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
wiki/screenshot-1.png
Normal file
BIN
wiki/screenshot-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Loading…
Reference in New Issue
Block a user