|
@@ -1,24 +1,25 @@
|
|
-Bootstrap-switch
|
|
|
|
|
|
+Bootstrap-switch v.1.7
|
|
========================
|
|
========================
|
|
|
|
|
|
You can now also use radio buttons and checkboxes as switches.
|
|
You can now also use radio buttons and checkboxes as switches.
|
|
|
|
|
|
|
|
|
|
-Demo
|
|
|
|
|
|
+Demo:
|
|
----
|
|
----
|
|
http://www.larentis.eu/switch/
|
|
http://www.larentis.eu/switch/
|
|
|
|
+http://bdmdesign.github.io/bootstrap-switch-BdMdesigN (uptodate)
|
|
|
|
|
|
Usage
|
|
Usage
|
|
-----
|
|
-----
|
|
Just include Twitter Bootstrap, jQuery, Bootstrap Switch CSS and Javascript
|
|
Just include Twitter Bootstrap, jQuery, Bootstrap Switch CSS and Javascript
|
|
``` html
|
|
``` html
|
|
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
|
|
-<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
|
|
|
|
|
|
+<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
|
|
<link rel="stylesheet" href="bootstrap-switch.css">
|
|
<link rel="stylesheet" href="bootstrap-switch.css">
|
|
|
|
|
|
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
|
|
|
|
|
|
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script src="bootstrap-switch.js"></script> // master
|
|
<script src="bootstrap-switch.js"></script> // master
|
|
-<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.6/bootstrap-switch.min.js"> // from cdnjs.com
|
|
|
|
|
|
+<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.7/bootstrap-switch.min.js"> // from cdnjs.com
|
|
```
|
|
```
|
|
|
|
|
|
Less
|
|
Less
|
|
@@ -37,7 +38,7 @@ Basic Example
|
|
checkboxes:
|
|
checkboxes:
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch">
|
|
|
|
|
|
+<div class="make-switch">
|
|
<input type="checkbox">
|
|
<input type="checkbox">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -45,7 +46,7 @@ checkboxes:
|
|
radioboxes:
|
|
radioboxes:
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch">
|
|
|
|
|
|
+<div class="make-switch">
|
|
<input type="radio">
|
|
<input type="radio">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -56,7 +57,7 @@ Large, small or mini
|
|
checkboxes:
|
|
checkboxes:
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch switch-large"> <!-- switch-large, switch-small or switch-mini -->
|
|
|
|
|
|
+<div class="make-switch switch-large"> <!-- switch-large, switch-small or switch-mini -->
|
|
<input type="checkbox">
|
|
<input type="checkbox">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -64,7 +65,7 @@ checkboxes:
|
|
radioboxes:
|
|
radioboxes:
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch switch-large"> <!-- switch-large, switch-small or switch-mini -->
|
|
|
|
|
|
+<div class="make-switch switch-large"> <!-- switch-large, switch-small or switch-mini -->
|
|
<input type="radio">
|
|
<input type="radio">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -75,7 +76,7 @@ Colors
|
|
checkboxes:
|
|
checkboxes:
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch" data-on="danger" data-off="warning"> <!-- primary, info, success, warning, danger and default -->
|
|
|
|
|
|
+<div class="make-switch" data-on="danger" data-off="warning"> <!-- primary, info, success, warning, danger and default -->
|
|
<input type="checkbox">
|
|
<input type="checkbox">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -83,7 +84,7 @@ checkboxes:
|
|
radioboxes:
|
|
radioboxes:
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch" data-on="danger" data-off="warning"> <!-- primary, info, success, warning, danger and default -->
|
|
|
|
|
|
+<div class="make-switch" data-on="danger" data-off="warning"> <!-- primary, info, success, warning, danger and default -->
|
|
<input type="radio">
|
|
<input type="radio">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -94,7 +95,7 @@ Animation
|
|
checkboxes:
|
|
checkboxes:
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch" data-animated="false">
|
|
|
|
|
|
+<div class="make-switch" data-animated="false">
|
|
<input type="checkbox">
|
|
<input type="checkbox">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -102,7 +103,7 @@ checkboxes:
|
|
radioboxes:
|
|
radioboxes:
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch" data-animated="false">
|
|
|
|
|
|
+<div class="make-switch" data-animated="false">
|
|
<input type="radio">
|
|
<input type="radio">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -113,7 +114,7 @@ Text
|
|
checkboxes:
|
|
checkboxes:
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch" data-on-label="SI" data-off-label="NO">
|
|
|
|
|
|
+<div class="make-switch" data-on-label="SI" data-off-label="NO">
|
|
<input type="checkbox">
|
|
<input type="checkbox">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -121,7 +122,7 @@ checkboxes:
|
|
radioboxes:
|
|
radioboxes:
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch" data-on-label="SI" data-off-label="NO">
|
|
|
|
|
|
+<div class="make-switch" data-on-label="SI" data-off-label="NO">
|
|
<input type="radio">
|
|
<input type="radio">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -132,7 +133,7 @@ HTML Text
|
|
checkboxes:
|
|
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="make-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>
|
|
```
|
|
```
|
|
@@ -140,7 +141,7 @@ checkboxes:
|
|
radioboxes:
|
|
radioboxes:
|
|
|
|
|
|
``` 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="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
<input type="radio">
|
|
<input type="radio">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -151,7 +152,7 @@ Initial values
|
|
checkboxes:
|
|
checkboxes:
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch">
|
|
|
|
|
|
+<div class="make-switch">
|
|
<input type="checkbox" checked="checked" disabled="disabled">
|
|
<input type="checkbox" checked="checked" disabled="disabled">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|
|
@@ -159,7 +160,7 @@ radioboxes:
|
|
|
|
|
|
|
|
|
|
``` html
|
|
``` html
|
|
-<div class="switch">
|
|
|
|
|
|
+<div class="make-switch">
|
|
<input type="radio" checked="checked" disabled="disabled">
|
|
<input type="radio" checked="checked" disabled="disabled">
|
|
</div>
|
|
</div>
|
|
```
|
|
```
|