|
@@ -1,6 +1,9 @@
|
|
Bootstrap-switch
|
|
Bootstrap-switch
|
|
========================
|
|
========================
|
|
|
|
|
|
|
|
+You can now also use radio buttons as switches.
|
|
|
|
+
|
|
|
|
+
|
|
Demo
|
|
Demo
|
|
----
|
|
----
|
|
http://www.larentis.eu/switch/
|
|
http://www.larentis.eu/switch/
|
|
@@ -27,59 +30,136 @@ lessc static/less/bootstrapSwitch.less static/stylesheets/bootstrapSwitch.css
|
|
|
|
|
|
Basic Example
|
|
Basic Example
|
|
-------------
|
|
-------------
|
|
|
|
+checkboxes:
|
|
|
|
+
|
|
``` html
|
|
``` html
|
|
<div class="switch">
|
|
<div class="switch">
|
|
<input type="checkbox">
|
|
<input type="checkbox">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
|
|
|
|
|
|
+radioboxes:
|
|
|
|
+
|
|
|
|
+``` html
|
|
|
|
+<div class="switch">
|
|
|
|
+ <input type="radio">
|
|
|
|
+</div>
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+
|
|
Large, small or mini
|
|
Large, small or mini
|
|
--------------------
|
|
--------------------
|
|
|
|
+checkboxes:
|
|
|
|
+
|
|
``` html
|
|
``` html
|
|
<div class="switch switch-large"> <!-- switch-large, switch-small or switch-mini -->
|
|
<div class="switch switch-large"> <!-- switch-large, switch-small or switch-mini -->
|
|
<input type="checkbox">
|
|
<input type="checkbox">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
|
|
|
|
|
|
+radioboxes:
|
|
|
|
+
|
|
|
|
+``` html
|
|
|
|
+<div class="switch switch-large"> <!-- switch-large, switch-small or switch-mini -->
|
|
|
|
+ <input type="radio">
|
|
|
|
+</div>
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+
|
|
Colors
|
|
Colors
|
|
------
|
|
------
|
|
|
|
+checkboxes:
|
|
|
|
+
|
|
``` html
|
|
``` html
|
|
<div class="switch" data-on="danger" data-off="warning"> <!-- primary, info, success, warning and danger -->
|
|
<div class="switch" data-on="danger" data-off="warning"> <!-- primary, info, success, warning and danger -->
|
|
<input type="checkbox">
|
|
<input type="checkbox">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
|
|
|
|
|
|
+radioboxes:
|
|
|
|
+
|
|
|
|
+``` html
|
|
|
|
+<div class="switch" data-on="danger" data-off="warning"> <!-- primary, info, success, warning and danger -->
|
|
|
|
+ <input type="radio">
|
|
|
|
+</div>
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+
|
|
Animation
|
|
Animation
|
|
---------
|
|
---------
|
|
|
|
+checkboxes:
|
|
|
|
+
|
|
``` html
|
|
``` html
|
|
<div class="switch" data-animated="false">
|
|
<div class="switch" data-animated="false">
|
|
<input type="checkbox">
|
|
<input type="checkbox">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
|
|
|
|
|
|
+radioboxes:
|
|
|
|
+
|
|
|
|
+``` html
|
|
|
|
+<div class="switch" data-animated="false">
|
|
|
|
+ <input type="radio">
|
|
|
|
+</div>
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+
|
|
Text
|
|
Text
|
|
-----
|
|
-----
|
|
|
|
+checkboxes:
|
|
|
|
+
|
|
``` html
|
|
``` html
|
|
<div class="switch" data-on-label="SI" data-off-label="NO">
|
|
<div class="switch" data-on-label="SI" data-off-label="NO">
|
|
<input type="checkbox">
|
|
<input type="checkbox">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
|
|
|
|
|
|
+radioboxes:
|
|
|
|
+
|
|
|
|
+``` html
|
|
|
|
+<div class="switch" data-on-label="SI" data-off-label="NO">
|
|
|
|
+ <input type="radio">
|
|
|
|
+</div>
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+
|
|
HTML Text
|
|
HTML Text
|
|
----------
|
|
----------
|
|
|
|
+checkboxes:
|
|
|
|
+
|
|
``` html
|
|
``` html
|
|
<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
<input type="checkbox">
|
|
<input type="checkbox">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
|
|
|
|
|
|
+radioboxes:
|
|
|
|
+
|
|
|
|
+``` html
|
|
|
|
+<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
|
|
+ <input type="radio">
|
|
|
|
+</div>
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+
|
|
Initial values
|
|
Initial values
|
|
--------------
|
|
--------------
|
|
|
|
+checkboxes:
|
|
|
|
+
|
|
``` html
|
|
``` html
|
|
<div class="switch">
|
|
<div class="switch">
|
|
<input type="checkbox" checked="checked" disabled="disabled">
|
|
<input type="checkbox" checked="checked" disabled="disabled">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
|
|
+radioboxes:
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+``` html
|
|
|
|
+<div class="switch">
|
|
|
|
+ <input type="radio" checked="checked" disabled="disabled">
|
|
|
|
+</div>
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
|
|
Event handler
|
|
Event handler
|
|
-------------
|
|
-------------
|