Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles
npm install bootstrap-toggleVisit http://www.bootstraptoggle.com for demos.
Warning If you are using Bootstrap v2.3.2, use bootstrap2-toggle.min.js and bootstrap2-toggle.min.css instead.
``html`
bash
bower install bootstrap-toggle
`Usage
$3
Simply add data-toggle="toggle" to convert checkboxes into toggles.`html
`$3
Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add data-toggle="toggle" to convert checkboxes into toggles.`html
`$3
Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add data-toggle="toggle" to a convert checkboxes into toggles.`html
`API
$3
Initialize toggles with id toggle-one with a single line of JavaScript.`html
`$3
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-on="Enabled".`html
`Name|Type|Default|Description|
---|---|---|---
on|string/html|"On"|Text of the on toggle
off|string/html|"Off"|Text of the off toggle
size|string|"normal"|Size of the toggle. Possible values are
large, normal, small, mini.
onstyle|string|"primary"|Style of the on toggle. Possible values are default, primary, success, info, warning, danger
offstyle|string|"default"|Style of the off toggle. Possible values are default, primary, success, info, warning, danger
style|string| |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
width|integer|null|Sets the width of the toggle. if set to null, width will be calculated.
height|integer|null|Sets the height of the toggle. if set to null, height will be calculated.$3
Methods can be used to control toggles directly.`html
`Method|Example|Description
---|---|---
initialize|$('#toggle-demo').bootstrapToggle()|Initializes the toggle plugin with options
destroy|$('#toggle-demo').bootstrapToggle('destroy')|Destroys the toggle
on|$('#toggle-demo').bootstrapToggle('on')|Sets the toggle to 'On' state
off|$('#toggle-demo').bootstrapToggle('off')|Sets the toggle to 'Off' state
toggle|$('#toggle-demo').bootstrapToggle('toggle')|Toggles the state of the toggle
enable|$('#toggle-demo').bootstrapToggle('enable')|Enables the toggle
disable|$('#toggle-demo').bootstrapToggle('disable')|Disables the toggle
Events
$3
Note All events are propagated to and from input element to the toggle.You should listen to events from the
directly rather than look for custom events.`html
`$3
This also means that using the API or Input to trigger events will work both ways.`html
``#### KnockoutJS
A binding for knockout is available here: aAXEe/knockout-bootstrap-toggle
Visit http://www.bootstraptoggle.com for demos.