change documentatiokn style

examples/index.html

@@ -36,59 +36,62 @@
 
 <div class="container">
 
-    <div class="row-fluid">
-        <div class="span12">
-            <h1>Bootstrap switch
-                <small>- by <a href="http://larentis.eu">Mattia Larentis</a> <a href="https://twitter.com/spiritualguru">(@SpiritualGuru)</a>
-                </small>
-            </h1>
-        </div>
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h1>Bootstrap switch
+            <small>- by <a href="http://larentis.eu">Mattia Larentis</a>
+                <a href="https://twitter.com/spiritualguru">(@SpiritualGuru)</a>
+            </small>
+        </h1>
     </div>
+</div>
 
-    <div class="row-fluid">
-        <div class="span8 offset2" style="text-align: center;">
-            <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true"
-                    allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-            <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true"
-                    allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-            <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&type=follow&count=true"
-                    allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-        </div>
+<div class="row-fluid">
+    <div class="span8 offset2" style="text-align: center;">
+        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true"
+                allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
+        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true"
+                allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
+        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&type=follow&count=true"
+                allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
     </div>
+</div>
 
-    <!-- SIZE -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Size</h3>
-            <div class="bs-docs-example">
-                <div class="make-switch switch-large">
-                    <input type="checkbox" checked />
-                </div>
+<!-- SIZE -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Size</h3>
 
-                <div class="make-switch">
-                    <input type="checkbox" checked />
-                </div>
+        <div class="bs-docs-example">
+            <div class="make-switch switch-large">
+                <input type="checkbox" checked />
+            </div>
 
-                <div class="make-switch switch-small">
-                    <input type="checkbox" checked />
-                </div>
+            <div class="make-switch">
+                <input type="checkbox" checked />
+            </div>
 
-                <div class="make-switch switch-mini">
-                    <input type="checkbox" checked />
-                </div>
-                <br />
-                <br />
-                <label>Dimensions can be changed too:</label>
-                <div id="dimension-switch" class="make-switch">
-                    <input type="checkbox" checked />
-                </div>
-                <br />
-                <br />
-                <button id="btn-size-large-switch" class="btn">Large</button>
-                <button id="btn-size-regular-switch" class="btn">Regular</button>
-                <button id="btn-size-small-switch" class="btn">Small</button>
-                <button id="btn-size-mini-switch" class="btn">Mini</button>
+            <div class="make-switch switch-small">
+                <input type="checkbox" checked />
             </div>
+
+            <div class="make-switch switch-mini">
+                <input type="checkbox" checked />
+            </div>
+            <br />
+            <br />
+            <label>Dimensions can be changed too:</label>
+
+            <div id="dimension-switch" class="make-switch">
+                <input type="checkbox" checked />
+            </div>
+            <br />
+            <br />
+            <button id="btn-size-large-switch" class="btn">Large</button>
+            <button id="btn-size-regular-switch" class="btn">Regular</button>
+            <button id="btn-size-small-switch" class="btn">Small</button>
+            <button id="btn-size-mini-switch" class="btn">Mini</button>
+        </div>
             <pre class="prettyprint linenums">
 &lt;div class="make-switch switch-large">
     &lt;input type="checkbox" checked />
@@ -116,47 +119,50 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');    // Set
 $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');   // Sets a small switch
 $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');   // Sets a large switch
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- COLORS -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Colors <small>javascript</small></h3>
-            <div class="bs-docs-example">
-                <div class="make-switch" data-on="primary" data-off="info">
-                    <input type="checkbox" checked />
-                </div>
-                <div class="make-switch" data-on="info" data-off="success">
-                    <input type="checkbox" checked />
-                </div>
-                <div class="make-switch" data-on="success" data-off="warning">
-                    <input type="checkbox" checked />
-                </div>
-                <div class="make-switch" data-on="warning" data-off="danger">
-                    <input type="checkbox" checked />
-                </div>
-                <div class="make-switch" data-on="danger" data-off="default">
-                    <input type="checkbox" checked />
-                </div>
-                <div class="make-switch" data-on="default" data-off="primary">
-                    <input type="checkbox" checked />
-                </div>
-                <br />
-                <br />
-                <label for="change-color-switch">Colors can be changed too</label>
-                <div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
-                    <input type="checkbox" checked />
-                </div>
-                <br />
-                <br />
-                <button id="btn-color-on-switch" class="btn">
-                    Change "On" color
-                </button>
-                <button id="btn-color-off-switch" class="btn">
-                    Change "Off" color
-                </button>
+<!-- COLORS -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Colors
+            <small>javascript</small>
+        </h3>
+        <div class="bs-docs-example">
+            <div class="make-switch" data-on="primary" data-off="info">
+                <input type="checkbox" checked />
+            </div>
+            <div class="make-switch" data-on="info" data-off="success">
+                <input type="checkbox" checked />
+            </div>
+            <div class="make-switch" data-on="success" data-off="warning">
+                <input type="checkbox" checked />
             </div>
+            <div class="make-switch" data-on="warning" data-off="danger">
+                <input type="checkbox" checked />
+            </div>
+            <div class="make-switch" data-on="danger" data-off="default">
+                <input type="checkbox" checked />
+            </div>
+            <div class="make-switch" data-on="default" data-off="primary">
+                <input type="checkbox" checked />
+            </div>
+            <br />
+            <br />
+            <label for="change-color-switch">Colors can be changed too</label>
+
+            <div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
+                <input type="checkbox" checked />
+            </div>
+            <br />
+            <br />
+            <button id="btn-color-on-switch" class="btn">
+                Change "On" color
+            </button>
+            <button id="btn-color-off-switch" class="btn">
+                Change "Off" color
+            </button>
+        </div>
             
             <pre class="prettyprint linenums">
 &lt;div class="make-switch" data-on="primary" data-off="info">
@@ -192,27 +198,29 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');   // Set
 $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
 $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- ANIMATION -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Animation <small>javascript</small></h3>
+<!-- ANIMATION -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Animation
+            <small>javascript</small>
+        </h3>
 
-            <div class="bs-docs-example">
-                <div id="animated-switch" class="make-switch" data-animated="false">
-                    <input type="checkbox" checked />
-                </div>
-                <br />
-                <br />
-                <button id="btn-animate-switch" class="btn">
-                    Animate
-                </button>
-                <button id="btn-dont-animate-switch" class="btn">
-                    Don't animate
-                </button>
+        <div class="bs-docs-example">
+            <div id="animated-switch" class="make-switch" data-animated="false">
+                <input type="checkbox" checked />
             </div>
+            <br />
+            <br />
+            <button id="btn-animate-switch" class="btn">
+                Animate
+            </button>
+            <button id="btn-dont-animate-switch" class="btn">
+                Don't animate
+            </button>
+        </div>
             <pre class="prettyprint linenums">
 &lt;div id="animated-switch" class="make-switch" data-animated="false">
     &lt;input type="checkbox" checked />
@@ -223,45 +231,45 @@ $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
 $('#animated-switch').bootstrapSwitch('setAnimated', true);     // Enables animation for the selected item
 $('#animated-switch').bootstrapSwitch('setAnimated', false);    // Disables animation for the selected item
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- DISABLED -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Disabled</h3>
+<!-- DISABLED -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Disabled</h3>
 
-            <div class="bs-docs-example">
-                <div class="make-switch">
-                    <input type="checkbox" checked disabled />
-                </div>
+        <div class="bs-docs-example">
+            <div class="make-switch">
+                <input type="checkbox" checked disabled />
             </div>
+        </div>
             <pre class="prettyprint linenums">
 &lt;div class="make-switch">
    &lt;input type="checkbox" checked disabled />
 &lt;/div>
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- TEXT -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Text</h3>
+<!-- TEXT -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Text</h3>
 
-            <div class="bs-docs-example">
-                <div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
-                    <input type="checkbox" checked />
-                </div>
-                <br />
-                <br />
-                <button id="btn-label-on-switch" class="btn">
-                    Change "On" label
-                </button>
-                <button id="btn-label-off-switch" class="btn">
-                    Change "Off" label
-                </button>
+        <div class="bs-docs-example">
+            <div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
+                <input type="checkbox" checked />
             </div>
+            <br />
+            <br />
+            <button id="btn-label-on-switch" class="btn">
+                Change "On" label
+            </button>
+            <button id="btn-label-off-switch" class="btn">
+                Change "Off" label
+            </button>
+        </div>
             <pre class="prettyprint linenums">
 &lt;div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
     &lt;input type="checkbox" checked />
@@ -271,55 +279,57 @@ $('#animated-switch').bootstrapSwitch('setAnimated', false);    // Disables anim
 $('#label-switch').bootstrapSwitch('setOnLabel', 'I');
 $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- HTML TEXT -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>HTML text</h3>
+<!-- HTML TEXT -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>HTML text</h3>
 
-            <div class="bs-docs-example">
-                <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" checked />
-                </div>
+        <div class="bs-docs-example">
+            <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" checked />
             </div>
+        </div>
             <pre class="prettyprint linenums">
 &lt;div class="make-switch" data-on-label="&lt;i class='icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-remove'>&lt;/i>">
     &lt;input type="checkbox" checked />
 &lt;/div>
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- HTML TEXT MINI SWITCH -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>HTML text (mini-switch)</h3>
+<!-- HTML TEXT MINI SWITCH -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>HTML text (mini-switch)</h3>
 
-            <div class="bs-docs-example">
-                <div class="make-switch switch-mini" data-on-label="<i class='switch-mini-icons icon-ok icon-white'></i>" data-off-label="<i class='switch-mini-icons icon-remove'></i>">
-                    <input type="checkbox" checked />
-                </div>
+        <div class="bs-docs-example">
+            <div class="make-switch switch-mini" data-on-label="<i class='switch-mini-icons icon-ok icon-white'></i>" data-off-label="<i class='switch-mini-icons icon-remove'></i>">
+                <input type="checkbox" checked />
             </div>
+        </div>
             <pre class="prettyprint linenums">
 &lt;div class="make-switch switch-mini" data-on-label="&lt;i class='switch-mini-icons icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='switch-mini-icons icon-remove'>&lt;/i>">
     &lt;input type="checkbox" checked />
 &lt;/div>
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- EVENT HANDLER -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Event handler <small>javascript</small></h3>
+<!-- EVENT HANDLER -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Event handler
+            <small>javascript</small>
+        </h3>
 
-            <div class="bs-docs-example">
-                <div id="mySwitch" class="make-switch">
-                    <input type="checkbox" checked />
-                </div>
+        <div class="bs-docs-example">
+            <div id="mySwitch" class="make-switch">
+                <input type="checkbox" checked />
             </div>
+        </div>
             <pre class="prettyprint linenums">
 $('#mySwitch').on('switch-change', function (e, data) {
     var $el = $(data.el)
@@ -327,126 +337,142 @@ $('#mySwitch').on('switch-change', function (e, data) {
     console.log(e, $el, value);
 });
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- TOGGLE -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Toggle State <small>javascript</small></h3>
+<!-- TOGGLE -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Toggle State
+            <small>javascript</small>
+        </h3>
 
-            <div class="bs-docs-example">
-                <div id="toggle-state-switch" class="make-switch">
-                    <input type="checkbox" checked />
-                </div>
-                <br />
-                <br />
-                <div id="toggle-state-switch-button-status" class="btn btn-primary">Status!</div>
-                <div id="toggle-state-switch-button-on" class="btn btn-primary">ON!</div>
-                <div id="toggle-state-switch-button" class="btn btn-primary">Toggle me!</div>
-                <div id="toggle-state-switch-button-off" class="btn btn-primary">OFF!</div>
+        <div class="bs-docs-example">
+            <div id="toggle-state-switch" class="make-switch">
+                <input type="checkbox" checked />
             </div>
+            <br />
+            <br />
+
+            <div id="toggle-state-switch-button-status" class="btn btn-primary">Status!</div>
+            <div id="toggle-state-switch-button-on" class="btn btn-primary">ON!</div>
+            <div id="toggle-state-switch-button" class="btn btn-primary">Toggle me!</div>
+            <div id="toggle-state-switch-button-off" class="btn btn-primary">OFF!</div>
+        </div>
             <pre class="prettyprint linenums">
 $('#toggle-state-switch').bootstrapSwitch('status'); // true || false
 $('#toggle-state-switch').bootstrapSwitch('toggleState');
 $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- DESTROY -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Destroy <small>javascript</small></h3>
+<!-- DESTROY -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Destroy
+            <small>javascript</small>
+        </h3>
 
-            <div class="bs-docs-example">
-                <div id="destroy-switch" class="make-switch">
-                    <input type="checkbox" checked />
-                </div>
-                <br />
-                <br />
-                <button id="btn-destroy-switch" class="btn btn-danger">
-                    Destroy me!
-                </button>
+        <div class="bs-docs-example">
+            <div id="destroy-switch" class="make-switch">
+                <input type="checkbox" checked />
             </div>
+            <br />
+            <br />
+            <button id="btn-destroy-switch" class="btn btn-danger">
+                Destroy me!
+            </button>
+        </div>
             <pre class="prettyprint linenums">
 $('#destroy-switch').bootstrapSwitch('destroy');
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- CREATE -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Create <small>javascript</small></h3>
-            <div class="bs-docs-example">
-                <input id="create-switch" type="checkbox" checked />
-                <br />
-                <br />
-                <div id="btn-create" class="btn">Create</div>
-            </div>
+<!-- CREATE -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Create
+            <small>javascript</small>
+        </h3>
+        <div class="bs-docs-example">
+            <input id="create-switch" type="checkbox" checked />
+            <br />
+            <br />
+
+            <div id="btn-create" class="btn">Create</div>
+        </div>
             <pre class="prettyprint linenums">
 $('#create-switch').wrap('&lt;div class="make-switch" />').parent().bootstrapSwitch();
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- DISABLED -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Disabled <small>javascript</small></h3>
+<!-- DISABLED -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Disabled
+            <small>javascript</small>
+        </h3>
 
-            <div class="bs-docs-example">
-                <label for="disable-switch-input">amazing label</label>
-                <div id="disable-switch" class="make-switch">
-                    <input id="disable-switch-input" type="checkbox" checked />
-                </div>
-                <br />
-                <br />
-                <button id="btn-is-active-switch" class="btn">
-                    Is active?
-                </button>
-                <button id="btn-toggle-activation-switch" class="btn">
-                    Toggle activation!
-                </button>
-                <button id="btn-disable-switch" class="btn">
-                    Disable!
-                </button>
-                <button id="btn-activate-switch" class="btn">
-                    Activate!
-                </button>
+        <div class="bs-docs-example">
+            <label for="disable-switch-input">amazing label</label>
+
+            <div id="disable-switch" class="make-switch">
+                <input id="disable-switch-input" type="checkbox" checked />
             </div>
+            <br />
+            <br />
+            <button id="btn-is-active-switch" class="btn">
+                Is active?
+            </button>
+            <button id="btn-toggle-activation-switch" class="btn">
+                Toggle activation!
+            </button>
+            <button id="btn-disable-switch" class="btn">
+                Disable!
+            </button>
+            <button id="btn-activate-switch" class="btn">
+                Activate!
+            </button>
+        </div>
             <pre class="prettyprint linenums">
 $('#disable-switch').bootstrapSwitch('isActive');
 $('#disable-switch').bootstrapSwitch('toggleActivation');
 $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- RADIO -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Radio <small>javascript</small></h3>
+<!-- RADIO -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Radio
+            <small>javascript</small>
+        </h3>
 
-            <div class="bs-docs-example">
-                <div class="control-group">
-                     <div class="controls">
-                        <label class="control-label" for="option1">Option 1</label>
-                            <div id="option1" class="make-switch radio1 radio-no-uncheck">
-                                <input type="radio" name="radio1" value="option1" />
-                            </div>
-                        <label class="control-label" for="option2">Option 2</label>
-                            <div id="option2" class="make-switch radio1 radio-no-uncheck">
-                                <input type="radio" name="radio1" value="option2" />
-                            </div>
-                        <label class="control-label" for="option3">Option 3</label>
-                            <div id="option3" class="make-switch radio1 radio-no-uncheck">
-                                <input type="radio" name="radio1" value="option3" />
-                            </div>
-                     </div>
+        <div class="bs-docs-example">
+            <div class="control-group">
+                <div class="controls">
+                    <label class="control-label" for="option1">Option 1</label>
+
+                    <div id="option1" class="make-switch radio1 radio-no-uncheck">
+                        <input type="radio" name="radio1" value="option1" />
+                    </div>
+                    <label class="control-label" for="option2">Option 2</label>
+
+                    <div id="option2" class="make-switch radio1 radio-no-uncheck">
+                        <input type="radio" name="radio1" value="option2" />
+                    </div>
+                    <label class="control-label" for="option3">Option 3</label>
+
+                    <div id="option3" class="make-switch radio1 radio-no-uncheck">
+                        <input type="radio" name="radio1" value="option3" />
+                    </div>
                 </div>
             </div>
+        </div>
             <pre class="prettyprint linenums">
 &lt;div class="control-group">
     &lt;div class="controls">
@@ -480,32 +506,37 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
     });
 &lt;/script>
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- RADIO ALLOW UNCHECK -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Radio <small>javascript (allow radios uncheck)</small></h3>
+<!-- RADIO ALLOW UNCHECK -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Radio
+            <small>javascript (allow radios uncheck)</small>
+        </h3>
 
-            <div class="bs-docs-example">
-                <div class="control-group">
-                     <div class="controls">
-                        <label class="control-label" for="option1">Option 1</label>
-                            <div id="option1" class="make-switch radio2">
-                                <input type="radio" name="radio2" value="option1" />
-                            </div>
-                        <label class="control-label" for="option2">Option 2</label>
-                            <div id="option2" class="make-switch radio2">
-                                <input type="radio" name="radio2" value="option2" checked="checked" />
-                            </div>
-                        <label class="control-label" for="option3">Option 3</label>
-                            <div id="option3" class="make-switch radio2">
-                                <input type="radio" name="radio2" value="option3" />
-                            </div>
-                     </div>
+        <div class="bs-docs-example">
+            <div class="control-group">
+                <div class="controls">
+                    <label class="control-label" for="option1">Option 1</label>
+
+                    <div id="option1" class="make-switch radio2">
+                        <input type="radio" name="radio2" value="option1" />
+                    </div>
+                    <label class="control-label" for="option2">Option 2</label>
+
+                    <div id="option2" class="make-switch radio2">
+                        <input type="radio" name="radio2" value="option2" checked="checked" />
+                    </div>
+                    <label class="control-label" for="option3">Option 3</label>
+
+                    <div id="option3" class="make-switch radio2">
+                        <input type="radio" name="radio2" value="option3" />
+                    </div>
                 </div>
             </div>
+        </div>
             <pre class="prettyprint linenums">
 &lt;div class="control-group">
     &lt;div class="controls">
@@ -531,48 +562,51 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
     });
 &lt;/script>
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- FORM -->
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Form <small>- try to use tab, space and reset button</small></h3>
-
-            <div class="bs-docs-example">
-                <form class="form-horizontal span8 offset2">
-                    <div class="control-group">
-                        <label class="control-label" for="inputEmail">Email</label>
-                        <div class="controls">
-                            <input type="text" id="inputEmail" placeholder="Email">
-                        </div>
+<!-- FORM -->
+<div class="row-fluid">
+    <div class="span8 offset2">
+        <h3>Form
+            <small>- try to use tab, space and reset button</small>
+        </h3>
+
+        <div class="bs-docs-example">
+            <form class="form-horizontal span8 offset2">
+                <div class="control-group">
+                    <label class="control-label" for="inputEmail">Email</label>
+
+                    <div class="controls">
+                        <input type="text" id="inputEmail" placeholder="Email">
                     </div>
+                </div>
 
-                    <div class="control-group">
-                        <label class="control-label" for="notification1">Notification 1</label>
+                <div class="control-group">
+                    <label class="control-label" for="notification1">Notification 1</label>
 
-                        <div class="controls">
-                            <div class="make-switch" tabindex="0">
-                                <input id="notification1" type="checkbox" />
-                            </div>
+                    <div class="controls">
+                        <div class="make-switch" tabindex="0">
+                            <input id="notification1" type="checkbox" />
                         </div>
                     </div>
-                    <div class="control-group">
-                        <label class="control-label" for="notification2">Notification 2</label>
+                </div>
+                <div class="control-group">
+                    <label class="control-label" for="notification2">Notification 2</label>
 
-                        <div class="controls">
-                            <div class="make-switch" tabindex="0">
-                                <input id="notification2" type="checkbox" />
-                            </div>
+                    <div class="controls">
+                        <div class="make-switch" tabindex="0">
+                            <input id="notification2" type="checkbox" />
                         </div>
                     </div>
+                </div>
 
-                    <div class="form-actions">
-                        <button type="reset" class="btn btn-inverse">Reset</button>
-                    </div>
-                </form>
-                <div class="clearfix"></div>
-            </div>
+                <div class="form-actions">
+                    <button type="reset" class="btn btn-inverse">Reset</button>
+                </div>
+            </form>
+            <div class="clearfix"></div>
+        </div>
             
             <pre class="prettyprint linenums">
 &lt;form class="form-horizontal">
@@ -603,12 +637,12 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
     &lt;/div>
 &lt;/form>
             </pre>
-        </div>
     </div>
+</div>
 
-    <!-- MODAL -->
-    <div class="row-fluid">
-    <div class="span12">
+<!-- MODAL -->
+<div class="row-fluid">
+    <div class="span8 offset2">
         <h3>Modal</h3>
 
         <div class="bs-docs-example">
@@ -652,100 +686,100 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
 <script src="../static/js/bootstrap-switch.js"></script>
 
 <script>
-$(document).ready(function() {
-    window.prettyPrint && prettyPrint();
-    $('#mySwitch').on('switch-change', function (e, data) {
-        var $el = $(data.el)
-            , value = data.value;
-        console.log(e, $el, value);
-    });
-    
-    // DIMENSION
-    $('#btn-size-regular-switch').on('click', function () {
-        $('#dimension-switch').bootstrapSwitch('setSizeClass', '');
-    });
-    $('#btn-size-mini-switch').on('click', function () {
-        $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
-    });
-    $('#btn-size-small-switch').on('click', function () {
-        $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
-    });
-    $('#btn-size-large-switch').on('click', function () {
-        $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');
-    });
+    $(document).ready(function () {
+        window.prettyPrint && prettyPrint();
+        $('#mySwitch').on('switch-change', function (e, data) {
+            var $el = $(data.el)
+                , value = data.value;
+            console.log(e, $el, value);
+        });
 
-    // STATE
-    $('#toggle-state-switch-button').on('click', function () {
-        $('#toggle-state-switch').bootstrapSwitch('toggleState');
-    });
-    $('#toggle-state-switch-button-on').on('click', function () {
-        $('#toggle-state-switch').bootstrapSwitch('setState', true);
-    });
-    $('#toggle-state-switch-button-off').on('click', function () {
-        $('#toggle-state-switch').bootstrapSwitch('setState', false);
-    });
-    $('#toggle-state-switch-button-status').on('click', function () {
-        alert($('#toggle-state-switch').bootstrapSwitch('status'));
-    });    
-
-    // DESTROY
-    $('#btn-destroy-switch').on('click', function () {
-        $('#destroy-switch').bootstrapSwitch('destroy');
-        $(this).remove();
-    });
-    // CREATE
-    $('#btn-create').on('click', function () {
-        $('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();
-        $(this).remove()
-    });
+        // DIMENSION
+        $('#btn-size-regular-switch').on('click', function () {
+            $('#dimension-switch').bootstrapSwitch('setSizeClass', '');
+        });
+        $('#btn-size-mini-switch').on('click', function () {
+            $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
+        });
+        $('#btn-size-small-switch').on('click', function () {
+            $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
+        });
+        $('#btn-size-large-switch').on('click', function () {
+            $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');
+        });
 
-    // ACTIVATION
-    $('#btn-is-active-switch').on('click', function () {
-        alert($('#disable-switch').bootstrapSwitch('isActive'));
-    });
-    $('#btn-toggle-activation-switch').on('click', function () {
-        $('#disable-switch').bootstrapSwitch('toggleActivation');
-    });
-    $('#btn-disable-switch').on('click', function () {
-        $('#disable-switch').bootstrapSwitch('setActive', false);
-    });
-    $('#btn-activate-switch').on('click', function () {
-        $('#disable-switch').bootstrapSwitch('setActive', true);
-    });
-    
-    // LABEL
-    $('#btn-label-on-switch').on('click', function() {
-        $('#label-switch').bootstrapSwitch('setOnLabel', 'I');
-    });
-    $('#btn-label-off-switch').on('click', function() {
-        $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
-    });
-    
-    // COLOR
-    $('#btn-color-on-switch').on('click', function() {
-        $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
-    });
-    $('#btn-color-off-switch').on('click', function() {
-        $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
-    });
-    
-    // ANIMATION
-    $('#btn-animate-switch').on('click', function() {
-        $('#animated-switch').bootstrapSwitch('setAnimated', true);
-    });
-    $('#btn-dont-animate-switch').on('click', function() {
-        $('#animated-switch').bootstrapSwitch('setAnimated', false);
-    });    
-    
-    // RADIO
-    $('.radio1').on('switch-change', function () {
-        $('.radio1').bootstrapSwitch('toggleRadioState');
-    });
-    $('.radio2').on('switch-change', function () {
-        $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
-    });
+        // STATE
+        $('#toggle-state-switch-button').on('click', function () {
+            $('#toggle-state-switch').bootstrapSwitch('toggleState');
+        });
+        $('#toggle-state-switch-button-on').on('click', function () {
+            $('#toggle-state-switch').bootstrapSwitch('setState', true);
+        });
+        $('#toggle-state-switch-button-off').on('click', function () {
+            $('#toggle-state-switch').bootstrapSwitch('setState', false);
+        });
+        $('#toggle-state-switch-button-status').on('click', function () {
+            alert($('#toggle-state-switch').bootstrapSwitch('status'));
+        });
 
-});
+        // DESTROY
+        $('#btn-destroy-switch').on('click', function () {
+            $('#destroy-switch').bootstrapSwitch('destroy');
+            $(this).remove();
+        });
+        // CREATE
+        $('#btn-create').on('click', function () {
+            $('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();
+            $(this).remove()
+        });
+
+        // ACTIVATION
+        $('#btn-is-active-switch').on('click', function () {
+            alert($('#disable-switch').bootstrapSwitch('isActive'));
+        });
+        $('#btn-toggle-activation-switch').on('click', function () {
+            $('#disable-switch').bootstrapSwitch('toggleActivation');
+        });
+        $('#btn-disable-switch').on('click', function () {
+            $('#disable-switch').bootstrapSwitch('setActive', false);
+        });
+        $('#btn-activate-switch').on('click', function () {
+            $('#disable-switch').bootstrapSwitch('setActive', true);
+        });
+
+        // LABEL
+        $('#btn-label-on-switch').on('click', function () {
+            $('#label-switch').bootstrapSwitch('setOnLabel', 'I');
+        });
+        $('#btn-label-off-switch').on('click', function () {
+            $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
+        });
+
+        // COLOR
+        $('#btn-color-on-switch').on('click', function () {
+            $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
+        });
+        $('#btn-color-off-switch').on('click', function () {
+            $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
+        });
+
+        // ANIMATION
+        $('#btn-animate-switch').on('click', function () {
+            $('#animated-switch').bootstrapSwitch('setAnimated', true);
+        });
+        $('#btn-dont-animate-switch').on('click', function () {
+            $('#animated-switch').bootstrapSwitch('setAnimated', false);
+        });
+
+        // RADIO
+        $('.radio1').on('switch-change', function () {
+            $('.radio1').bootstrapSwitch('toggleRadioState');
+        });
+        $('.radio2').on('switch-change', function () {
+            $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
+        });
+
+    });
 </script>
 
 </body>

static/js/bootstrap-switch.js

@@ -1,5 +1,5 @@
 /*! ============================================================
- * bootstrapSwitch v1.7 by Larentis Mattia @SpiritualGuru
+ * bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru
  * http://www.larentis.eu/
  * 
  * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
@@ -32,7 +32,8 @@
               , moving
               , onLabel = "ON"
               , offLabel = "OFF"
-              , icon = false;
+              , icon = false
+              , textLabel = false;
 
             $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
               if (classes.indexOf(el) >= 0)
@@ -53,6 +54,9 @@
             if ($element.data('label-icon') !== undefined)
               icon = $element.data('label-icon');
 
+            if ($element.data('text-label') !== undefined)
+              textLabel = $element.data('text-label');
+
             $switchLeft = $('<span>')
               .addClass("switch-left")
               .addClass(myClasses)
@@ -78,6 +82,10 @@
               $label.html('<i class="icon ' + icon + '"></i>');
             }
 
+            if (textLabel) {
+              $label.html('' + textLabel + '');
+            }
+
             $div = $element.find(inputSelector).wrap($('<div>')).parent().data('animated', false);
 
             if ($element.data('animated') !== false)
@@ -96,7 +104,11 @@
               $(this).addClass('deactivate');
 
             var changeStatus = function ($this) {
-              $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
+              if ($element.parent('label').is('.label-change-switch')) {
+
+              } else {
+                $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
+              }
             };
 
             $element.on('keydown', function (e) {
@@ -152,7 +164,7 @@
 
               if ($this.closest('.has-switch').is('.deactivate')) {
                 $this.unbind('click');
-              } else if ( $this.closest('.switch-on').parent().is('.radio-no-uncheck') ) {
+              } else if ($this.closest('.switch-on').parent().is('.radio-no-uncheck')) {
                 $this.unbind('click');
               } else {
                 $this.on('mousemove touchmove', function (e) {
@@ -255,7 +267,7 @@
       },
       toggleRadioState: function (skipOnChange) {
         var $radioinput = $(this).find(':radio');
-          $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange);
+        $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange);
       },
       toggleRadioStateAllowUncheck: function (uncheck, skipOnChange) {
         var $radioinput = $(this).find(':radio');
@@ -269,15 +281,15 @@
       setState: function (value, skipOnChange) {
         $(this).find(inputSelector).prop('checked', value).trigger('change', skipOnChange);
       },
-      setOnLabel: function(value) {
+      setOnLabel: function (value) {
         var $switchLeft = $(this).find(".switch-left");
         $switchLeft.html(value);
       },
-      setOffLabel: function(value) {
+      setOffLabel: function (value) {
         var $switchRight = $(this).find(".switch-right");
         $switchRight.html(value);
       },
-      setOnClass: function(value) {
+      setOnClass: function (value) {
         var $switchLeft = $(this).find(".switch-left");
         var color = '';
         if (value !== undefined) {
@@ -289,7 +301,7 @@
           $switchLeft.addClass(color);
         }
       },
-      setOffClass: function(value) {
+      setOffClass: function (value) {
         var $switchRight = $(this).find(".switch-right");
         var color = '';
         if (value !== undefined) {
@@ -301,8 +313,8 @@
           $switchRight.addClass(color);
         }
       },
-      setAnimated: function(value) {
-        var $element = $(this).find('inputSelector').parent();
+      setAnimated: function (value) {
+        var $element = $(this).find(inputSelector).parent();
         if (value === undefined) value = false;
         $element.data('animated', value);
         $element.attr('data-animated', value);
@@ -313,14 +325,14 @@
           $element.removeClass("switch-animate");
         }
       },
-      setSizeClass: function(value) {
+      setSizeClass: function (value) {
         var $element = $(this);
         var $switchLeft = $element.find(".switch-left");
         var $switchRight = $element.find(".switch-right");
         var $label = $element.find("label");
         $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
           if (el !== value) {
-            $switchLeft.removeClass(el);
+            $switchLeft.removeClass(el)
             $switchRight.removeClass(el);
             $label.removeClass(el);
           } else {
@@ -364,8 +376,8 @@
   };
 }(jQuery);
 
-(function($) {  // creates scope for $ sign assigned to jQuery
-    $(function () { // on dom ready
-        $('.make-switch')['bootstrapSwitch'](); // attach bootstrapswitch
-    });
-})(jQuery);
+(function ($) {
+  $(function () {
+    $('.make-switch')['bootstrapSwitch']();
+  });
+})(jQuery);

static/stylesheets/bootstrap-switch.css

@@ -28,6 +28,7 @@
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
+  vertical-align: middle;
   min-width: 100px;
 }
 .has-switch.switch-mini {
@@ -42,9 +43,6 @@
   margin-top: -1px;
   margin-bottom: -1px;
 }
-.has-switch.switch-mini i.switch-mini-font-icons {
-  line-height: 9px;
-}
 .has-switch.switch-small {
   min-width: 80px;
 }