Browse Source

applied bootstrap official site style to documentation

Emanuele Marchi 10 năm trước cách đây
mục cha
commit
8e3fd7c146
22 tập tin đã thay đổi với 2067 bổ sung1607 xóa
  1. 3 3
      README.md
  2. 16 9
      docs/css/main.css
  3. 266 271
      documentation-2.html
  4. 52 58
      events-3.html
  5. 108 0
      events.html
  6. 219 221
      examples.html
  7. 45 50
      index.html
  8. 19 31
      main.html
  9. 71 77
      methods-3.html
  10. 123 0
      methods.html
  11. 195 201
      options-3.html
  12. 248 0
      options.html
  13. 205 203
      src/docs/documentation-2.jade
  14. 0 37
      src/docs/events-3.jade
  15. 38 0
      src/docs/events.jade
  16. 180 172
      src/docs/examples.jade
  17. 45 40
      src/docs/index.jade
  18. 26 28
      src/docs/main.jade
  19. 0 48
      src/docs/methods-3.jade
  20. 49 0
      src/docs/methods.jade
  21. 0 158
      src/docs/options-3.jade
  22. 159 0
      src/docs/options.jade

+ 3 - 3
README.md

@@ -16,9 +16,9 @@ Many thanks.
 ## Demo and Documentation
 
 - [Examples](http://www.bootstrap-switch.org/examples.html)
-- [Options](http://www.bootstrap-switch.org/options-3.html)
-- [Methods](http://www.bootstrap-switch.org/methods-3.html)
-- [Events](http://www.bootstrap-switch.org/events-3.html)
+- [Options](http://www.bootstrap-switch.org/options.html)
+- [Methods](http://www.bootstrap-switch.org/methods.html)
+- [Events](http://www.bootstrap-switch.org/events.html)
 
 ## Getting started
 

+ 16 - 9
docs/css/main.css

@@ -1,20 +1,27 @@
 body {
-  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  padding-top: 50px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   padding-bottom: 50px;
 }
 
-.title {
-  font-size: 5em;
-  letter-spacing: -2px;
+.bs-docs-masthead,
+.bs-docs-header {
+  color: #cdbfe3;
+  text-shadow: 0 1px 0 rgba(0,0,0,.1);
+  background-color: #6f5499;
+  background-image: -webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));
+  background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);
+  background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);
+  background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);
+  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
+  background-repeat:repeat-x
 }
 
-.page-header {
-  text-align: left;
+.bs-docs-masthead h1 {
+  font-weight: 500;
 }
 
-.header {
-  text-align: center;
+.page-header {
+  text-align: left;
 }
 
 #github {

+ 266 - 271
documentation-2.html

@@ -7,10 +7,10 @@
     <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
     <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
     <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
-    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
     <link href="docs/css/bootstrap.min.css" rel="stylesheet">
     <link href="docs/css/highlight.css" rel="stylesheet">
     <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
     <link href="docs/css/main.css" rel="stylesheet">
     <script>
       var _gaq = _gaq || [];
@@ -27,30 +27,22 @@
     </script>
   </head>
   <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
-    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+    <header role="banner" class="navbar navbar-static-top bs-docs-nav">
       <div class="container">
         <div class="navbar-header">
-          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch</a>
         </div>
-        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
           <ul class="nav navbar-nav">
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3</a></li>
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
-              </ul>
-            </li>
-            <li><a href="index.html">Start</a></li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" data-toggle="dropdown">Download</a></li>
             <li><a href="examples.html">Examples</a></li>
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation <span class="caret"></span></a>
               <ul class="dropdown-menu">
-                <li class="dropdown-header">Version 3</li>
-                <li><a href="/options-3.html">Options</a></li>
-                <li><a href="/methods-3.html">Methods</a></li>
-                <li><a href="/events-3.html">Events</a></li>
-                <li class="divider"></li>
-                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
-                <li><a href="/documentation-2.html">Documentation</a></li>
+                <li><a href="/options.html">Options</a></li>
+                <li><a href="/methods.html">Methods</a></li>
+                <li><a href="/events.html">Events</a></li>
+                <li role="presentation" class="divider"></li>
+                <li><a href="/documentation-2.html">Documentation (v2.0.1)</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -58,264 +50,267 @@
         </nav>
       </div>
     </header>
-    <div class="container content">
-      <h1 class="page-header">Documentation &nbsp;<small>Version 2.0.1 (Legacy)</small></h1>
-      <div id="options-2">
-        <h2 class="page-header">Options</h2>
-        <div class="alert alert-warning">
+    <main id="content" role="main">
+      <div id="content" class="bs-docs-header">
+        <div class="container">
+          <h1>Documentation</h1>
+          <p>v2.0.1</p>
+        </div>
+      </div>
+      <div class="container">
+        <div id="options">
+          <h2 class="page-header">Options</h2>
+          <div class="alert alert-warning">
+            <p>
+              All the options are accepted only using <code>data-*</code> attributes on the element.<br>
+              <code>checked</code>, <code>disabled</code> and <code>readonly</code> are exception to the rule, being
+              default HTML input attributes.<br>
+              Therefore, there is not any way to specify the options in JavaScript during initialization.
+            </p>
+          </div>
+          <table class="table table-bordered table-striped table-responsive">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Description</th>
+                <th>Values</th>
+                <th>Default</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>state</td>
+                <td>Boolean</td>
+                <td>The checkbox state</td>
+                <td>true, false</td>
+                <td>'checked' attribute or true</td>
+              </tr>
+              <tr>
+                <td>size</td>
+                <td>String</td>
+                <td>The checkbox state</td>
+                <td>'', 'mini', 'small', 'normal', 'large'</td>
+                <td>''</td>
+              </tr>
+              <tr>
+                <td>animate</td>
+                <td>Boolean</td>
+                <td>Animate the switch</td>
+                <td>true, false</td>
+                <td>true</td>
+              </tr>
+              <tr>
+                <td>disabled</td>
+                <td>Boolean</td>
+                <td>Disable state</td>
+                <td>true, false</td>
+                <td>'disabled' attribute or false</td>
+              </tr>
+              <tr>
+                <td>readonly</td>
+                <td>Boolean</td>
+                <td>Readonly state</td>
+                <td>true, false</td>
+                <td>'readonly' attribute or false</td>
+              </tr>
+              <tr>
+                <td>on</td>
+                <td>String</td>
+                <td>Color of the left side of the switch</td>
+                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+                <td>null</td>
+              </tr>
+              <tr>
+                <td>off</td>
+                <td>String</td>
+                <td>Color of the right side of the switch</td>
+                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+                <td>null</td>
+              </tr>
+              <tr>
+                <td>on-label</td>
+                <td>String</td>
+                <td>Text of the left side of the switch</td>
+                <td>String</td>
+                <td>'ON'</td>
+              </tr>
+              <tr>
+                <td>off-label</td>
+                <td>String</td>
+                <td>Text of the right side of the switch</td>
+                <td>String</td>
+                <td>'OFF'</td>
+              </tr>
+              <tr>
+                <td>text-label</td>
+                <td>String</td>
+                <td>Text of the center handle of the switch</td>
+                <td>String</td>
+                <td>'&amp;nbsp;'</td>
+              </tr>
+              <tr>
+                <td>label-icon</td>
+                <td>String</td>
+                <td>Text of the center handle of the switch. Use to include external services icons</td>
+                <td>String</td>
+                <td>null</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div id="methods">
+          <h2 class="page-header">Methods</h2>
+          <table class="table table-bordered table-striped table-responsive">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Description</th>
+                <th>Accepted Values</th>
+                <th>Returned Values</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>state</td>
+                <td>Get checkbox state</td>
+                <td></td>
+                <td>true, false</td>
+              </tr>
+              <tr>
+                <td>setState</td>
+                <td>Set checkbox state</td>
+                <td>(value: true, false)[, skip: true, <strong>false</strong>]</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>toggleState</td>
+                <td>Toggle checkbox state</td>
+                <td>[skip: true, <strong>false</strong>]</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>toggleRadioState</td>
+                <td>Toggle radio state</td>
+                <td>[skip: true, <strong>false</strong>]</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>toggleRadioStateAllowUncheck</td>
+                <td>Toggle radio state allowing uncheck of the radio input</td>
+                <td>[uncheck: true, <strong>false</strong> | skip: true, <strong>false</strong>]</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setSizeClass</td>
+                <td>Set the size of the switch</td>
+                <td>'', 'mini', 'small', 'normal', 'large'</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setAnimated</td>
+                <td>Animate the switch</td>
+                <td>true, false</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>isDisabled</td>
+                <td>Get disabled state</td>
+                <td></td>
+                <td>true, false</td>
+              </tr>
+              <tr>
+                <td>setDisabled</td>
+                <td>Set disable state</td>
+                <td>true, false</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>toggleDisabled</td>
+                <td>Toggle disabled state</td>
+                <td></td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>isReadOnly</td>
+                <td>Get Readonly state</td>
+                <td></td>
+                <td>true, false</td>
+              </tr>
+              <tr>
+                <td>setReadOnly</td>
+                <td>Set Readonly state</td>
+                <td>true, false</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>toggleReadOnly</td>
+                <td>Toggle readonly state</td>
+                <td></td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setOnClass</td>
+                <td>Color of the left side of the switch</td>
+                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setOffClass</td>
+                <td>Color of the right side of the switch</td>
+                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setOnLabel</td>
+                <td>Text of the left side of the switch</td>
+                <td>String</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setOffLabel</td>
+                <td>Text of the right side of the switch</td>
+                <td>String</td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+              <tr>
+                <td>setTextLabel</td>
+                <td>Text of the center handle of the switch</td>
+                <td>String</td>
+                <td>null</td>
+              </tr>
+              <tr>
+                <td>setTextIcon</td>
+                <td>Text of the center handle of the switch. Use to include external services icons</td>
+                <td>String</td>
+                <td>null</td>
+              </tr>
+              <tr>
+                <td>destroy</td>
+                <td>Destroy the instance of Bootstrap Switch</td>
+                <td></td>
+                <td>jQuery Object (input element)</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div id="events">
+          <h2 class="page-header">Events</h2>
           <p>
-            All the options are accepted only using <code>data-*</code> attributes on the element.<br>
-            <code>checked</code>, <code>disabled</code> and <code>readonly</code> are exception to the rule, being
-            default HTML input attributes.<br>
-            Therefore, there is not any way to specify the options in JavaScript during initialization.
+            The only event triggered it <code>switch-change</code>. It returns two parameters: <code>event</code> and
+            <code>data</code>.<br>
+            The latter is an object that include <code>el</code> (the input DOM element) and <code>value</code> (the
+            new input state)
           </p>
         </div>
-        <table class="table table-bordered table-striped table-responsive">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Type</th>
-              <th>Description</th>
-              <th>Values</th>
-              <th>Default</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>state</td>
-              <td>Boolean</td>
-              <td>The checkbox state</td>
-              <td>true, false</td>
-              <td>'checked' attribute or true</td>
-            </tr>
-            <tr>
-              <td>size</td>
-              <td>String</td>
-              <td>The checkbox state</td>
-              <td>'', 'mini', 'small', 'normal', 'large'</td>
-              <td>''</td>
-            </tr>
-            <tr>
-              <td>animate</td>
-              <td>Boolean</td>
-              <td>Animate the switch</td>
-              <td>true, false</td>
-              <td>true</td>
-            </tr>
-            <tr>
-              <td>disabled</td>
-              <td>Boolean</td>
-              <td>Disable state</td>
-              <td>true, false</td>
-              <td>'disabled' attribute or false</td>
-            </tr>
-            <tr>
-              <td>readonly</td>
-              <td>Boolean</td>
-              <td>Readonly state</td>
-              <td>true, false</td>
-              <td>'readonly' attribute or false</td>
-            </tr>
-            <tr>
-              <td>on</td>
-              <td>String</td>
-              <td>Color of the left side of the switch</td>
-              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-              <td>null</td>
-            </tr>
-            <tr>
-              <td>off</td>
-              <td>String</td>
-              <td>Color of the right side of the switch</td>
-              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-              <td>null</td>
-            </tr>
-            <tr>
-              <td>on-label</td>
-              <td>String</td>
-              <td>Text of the left side of the switch</td>
-              <td>String</td>
-              <td>'ON'</td>
-            </tr>
-            <tr>
-              <td>off-label</td>
-              <td>String</td>
-              <td>Text of the right side of the switch</td>
-              <td>String</td>
-              <td>'OFF'</td>
-            </tr>
-            <tr>
-              <td>text-label</td>
-              <td>String</td>
-              <td>Text of the center handle of the switch</td>
-              <td>String</td>
-              <td>'&amp;nbsp;'</td>
-            </tr>
-            <tr>
-              <td>label-icon</td>
-              <td>String</td>
-              <td>Text of the center handle of the switch. Use to include external services icons</td>
-              <td>String</td>
-              <td>null</td>
-            </tr>
-          </tbody>
-        </table>
       </div>
-      <div id="methods-2">
-        <h2 class="page-header">Methods</h2>
-        <table class="table table-bordered table-striped table-responsive">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Description</th>
-              <th>Accepted Values</th>
-              <th>Returned Values</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>state</td>
-              <td>Get checkbox state</td>
-              <td></td>
-              <td>true, false</td>
-            </tr>
-            <tr>
-              <td>setState</td>
-              <td>Set checkbox state</td>
-              <td>(value: true, false)[, skip: true, <strong>false</strong>]</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>toggleState</td>
-              <td>Toggle checkbox state</td>
-              <td>[skip: true, <strong>false</strong>]</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>toggleRadioState</td>
-              <td>Toggle radio state</td>
-              <td>[skip: true, <strong>false</strong>]</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>toggleRadioStateAllowUncheck</td>
-              <td>Toggle radio state allowing uncheck of the radio input</td>
-              <td>[uncheck: true, <strong>false</strong> | skip: true, <strong>false</strong>]</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>setSizeClass</td>
-              <td>Set the size of the switch</td>
-              <td>'', 'mini', 'small', 'normal', 'large'</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>setAnimated</td>
-              <td>Animate the switch</td>
-              <td>true, false</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>isDisabled</td>
-              <td>Get disabled state</td>
-              <td></td>
-              <td>true, false</td>
-            </tr>
-            <tr>
-              <td>setDisabled</td>
-              <td>Set disable state</td>
-              <td>true, false</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>toggleDisabled</td>
-              <td>Toggle disabled state</td>
-              <td></td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>isReadOnly</td>
-              <td>Get Readonly state</td>
-              <td></td>
-              <td>true, false</td>
-            </tr>
-            <tr>
-              <td>setReadOnly</td>
-              <td>Set Readonly state</td>
-              <td>true, false</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>toggleReadOnly</td>
-              <td>Toggle readonly state</td>
-              <td></td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>setOnClass</td>
-              <td>Color of the left side of the switch</td>
-              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>setOffClass</td>
-              <td>Color of the right side of the switch</td>
-              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>setOnLabel</td>
-              <td>Text of the left side of the switch</td>
-              <td>String</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>setOffLabel</td>
-              <td>Text of the right side of the switch</td>
-              <td>String</td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-            <tr>
-              <td>setTextLabel</td>
-              <td>Text of the center handle of the switch</td>
-              <td>String</td>
-              <td>null</td>
-            </tr>
-            <tr>
-              <td>setTextIcon</td>
-              <td>Text of the center handle of the switch. Use to include external services icons</td>
-              <td>String</td>
-              <td>null</td>
-            </tr>
-            <tr>
-              <td>destroy</td>
-              <td>Destroy the instance of Bootstrap Switch</td>
-              <td></td>
-              <td>jQuery Object (input element)</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div id="events-2">
-        <h2 class="page-header">Events</h2>
-        <p>
-          The only event triggered it <code>switch-change</code>. It returns two parameters: <code>event</code> and
-          <code>data</code>.<br>
-          The latter is an object that include <code>el</code> (the input DOM element) and <code>value</code> (the
-          new input state)
+    </main>
+    <footer class="bs-docs-footer">
+      <div class="container">
+        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a><br>Created by <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a><br>Mantained by <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
         </p>
       </div>
-    </div>
-    <div class="container bottom">
-      <p>
-        Licensed under the
-        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
-        · Created by
-        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
-        · Mantained by
-        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
-      </p>
-    </div>
+    </footer>
     <script src="docs/js/jquery.min.js"></script>
     <script src="docs/js/bootstrap.min.js"></script>
     <script src="docs/js/highlight.js"></script>

+ 52 - 58
events-3.html

@@ -7,11 +7,11 @@
     <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
     <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
     <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
-    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
     <link href="docs/css/bootstrap.min.css" rel="stylesheet">
     <link href="docs/css/highlight.css" rel="stylesheet">
     <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
     <link href="docs/css/main.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
     <script>
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-43092768-1']);
@@ -27,30 +27,22 @@
     </script>
   </head>
   <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
-    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+    <header role="banner" class="navbar navbar-static-top bs-docs-nav">
       <div class="container">
         <div class="navbar-header">
-          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch</a>
         </div>
-        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
           <ul class="nav navbar-nav">
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3</a></li>
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
-              </ul>
-            </li>
-            <li><a href="index.html">Start</a></li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" data-toggle="dropdown">Download</a></li>
             <li><a href="examples.html">Examples</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
-                <li class="dropdown-header">Version 3</li>
                 <li><a href="/options-3.html">Options</a></li>
                 <li><a href="/methods-3.html">Methods</a></li>
                 <li><a href="/events-3.html">Events</a></li>
-                <li class="divider"></li>
-                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
-                <li><a href="/documentation-2.html">Documentation</a></li>
+                <li class="dropdown-divider"></li>
+                <li><a href="/documentation-2.html">Documentation (v2.0.1)</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -58,53 +50,55 @@
         </nav>
       </div>
     </header>
-    <div class="container content">
-      <h1 class="page-header">Events &nbsp;<small>Version 3</small></h1>
-      <p>
-        All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
-        attach your handlers.<br>
-        You can register to the emitted events as follow:
-      </p>
-      <pre><code>$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
+    <main id="content" role="main">
+      <div id="content" class="bs-docs-header">
+        <div class="container">
+          <h1>Events</h1>
+        </div>
+      </div>
+      <div class="container">
+        <p>
+          All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
+          attach your handlers.<br>
+          You can register to the emitted events as follow:
+        </p>
+        <pre><code>$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
   console.log(this); // DOM element
   console.log(event); // jQuery event
   console.log(state); // true | false
 });</code></pre>
-      <table class="table table-bordered table-striped table-responsive">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Description</th>
-            <th>Parameters</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>init</td>
-            <td>Triggered on initialization. 'this' refers to the DOM element.</td>
-            <td>event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)</td>
-          </tr>
-          <tr>
-            <td>switchChange</td>
-            <td>Triggered on switch state change. 'this' refers to the DOM element.</td>
-            <td>
-              event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
-              state (true | false)
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="container bottom">
-      <p>
-        Licensed under the
-        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
-        · Created by
-        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
-        · Mantained by
-        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
-      </p>
-    </div>
+        <table class="table table-bordered table-striped table-responsive">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Parameters</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>init</td>
+              <td>Triggered on initialization. 'this' refers to the DOM element.</td>
+              <td>event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)</td>
+            </tr>
+            <tr>
+              <td>switchChange</td>
+              <td>Triggered on switch state change. 'this' refers to the DOM element.</td>
+              <td>
+                event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
+                state (true | false)
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </main>
+    <footer class="bs-docs-footer">
+      <div class="container">
+        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a><br>Created by <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a><br>Mantained by <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+        </p>
+      </div>
+    </footer>
     <script src="docs/js/jquery.min.js"></script>
     <script src="docs/js/bootstrap.min.js"></script>
     <script src="docs/js/highlight.js"></script>

+ 108 - 0
events.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
+    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
+    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
+    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
+    <link href="docs/css/highlight.css" rel="stylesheet">
+    <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
+    <link href="docs/css/main.css" rel="stylesheet">
+    <script>
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-43092768-1']);
+      _gaq.push(['_trackPageview']);
+      (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+  <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <header role="banner" class="navbar navbar-static-top bs-docs-nav">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch</a>
+        </div>
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" data-toggle="dropdown">Download</a></li>
+            <li><a href="examples.html">Examples</a></li>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation <span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="/options.html">Options</a></li>
+                <li><a href="/methods.html">Methods</a></li>
+                <li><a href="/events.html">Events</a></li>
+                <li role="presentation" class="divider"></li>
+                <li><a href="/documentation-2.html">Documentation (v2.0.1)</a></li>
+              </ul>
+            </li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <main id="content" role="main">
+      <div id="content" class="bs-docs-header">
+        <div class="container">
+          <h1>Events</h1>
+        </div>
+      </div>
+      <div class="container">
+        <p>
+          All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
+          attach your handlers.<br>
+          You can register to the emitted events as follow:
+        </p>
+        <pre><code>$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
+  console.log(this); // DOM element
+  console.log(event); // jQuery event
+  console.log(state); // true | false
+});</code></pre>
+        <table class="table table-bordered table-striped table-responsive">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Parameters</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>init</td>
+              <td>Triggered on initialization. 'this' refers to the DOM element.</td>
+              <td>event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)</td>
+            </tr>
+            <tr>
+              <td>switchChange</td>
+              <td>Triggered on switch state change. 'this' refers to the DOM element.</td>
+              <td>
+                event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
+                state (true | false)
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </main>
+    <footer class="bs-docs-footer">
+      <div class="container">
+        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a><br>Created by <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a><br>Mantained by <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+        </p>
+      </div>
+    </footer>
+    <script src="docs/js/jquery.min.js"></script>
+    <script src="docs/js/bootstrap.min.js"></script>
+    <script src="docs/js/highlight.js"></script>
+    <script src="dist/js/bootstrap-switch.js"></script>
+    <script src="docs/js/main.js"></script>
+  </body>
+</html>

+ 219 - 221
examples.html

@@ -7,10 +7,10 @@
     <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
     <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
     <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
-    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
     <link href="docs/css/bootstrap.min.css" rel="stylesheet">
     <link href="docs/css/highlight.css" rel="stylesheet">
     <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
     <link href="docs/css/main.css" rel="stylesheet">
     <script>
       var _gaq = _gaq || [];
@@ -27,30 +27,22 @@
     </script>
   </head>
   <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
-    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+    <header role="banner" class="navbar navbar-static-top bs-docs-nav">
       <div class="container">
         <div class="navbar-header">
-          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch</a>
         </div>
-        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
           <ul class="nav navbar-nav">
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3</a></li>
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
-              </ul>
-            </li>
-            <li><a href="index.html">Start</a></li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" data-toggle="dropdown">Download</a></li>
             <li><a href="examples.html">Examples</a></li>
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation <span class="caret"></span></a>
               <ul class="dropdown-menu">
-                <li class="dropdown-header">Version 3</li>
-                <li><a href="/options-3.html">Options</a></li>
-                <li><a href="/methods-3.html">Methods</a></li>
-                <li><a href="/events-3.html">Events</a></li>
-                <li class="divider"></li>
-                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
-                <li><a href="/documentation-2.html">Documentation</a></li>
+                <li><a href="/options.html">Options</a></li>
+                <li><a href="/methods.html">Methods</a></li>
+                <li><a href="/events.html">Events</a></li>
+                <li role="presentation" class="divider"></li>
+                <li><a href="/documentation-2.html">Documentation (v2.0.1)</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -58,233 +50,239 @@
         </nav>
       </div>
     </header>
-    <div class="container content">
-      <h1 class="page-header">Examples</h1>
-      <div class="row">
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">State</h2>
-          <p>
-            <input id="switch-state" type="checkbox" checked>
-          </p>
-          <div class="btn-group">
-            <button type="button" data-switch-toggle="state" class="btn btn-default">Toggle</button>
-            <button type="button" data-switch-set="state" data-switch-value="true" class="btn btn-default">Set true</button>
-            <button type="button" data-switch-set="state" data-switch-value="false" class="btn btn-default">Set false</button>
-            <button type="button" data-switch-get="state" class="btn btn-default">Get</button>
-          </div>
+    <main id="content" role="main">
+      <div id="content" class="bs-docs-header">
+        <div class="container">
+          <h1>Examples</h1>
         </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Size</h2>
-          <p>
-            <input id="switch-size" type="checkbox" checked data-size="mini">
-          </p>
-          <div class="btn-group">
-            <button type="button" data-switch-set="size" data-switch-value="mini" class="btn btn-default">Mini</button>
-            <button type="button" data-switch-set="size" data-switch-value="small" class="btn btn-default">Small</button>
-            <button type="button" data-switch-set="size" data-switch-value="normal" class="btn btn-default">Normal</button>
-            <button type="button" data-switch-set="size" data-switch-value="large" class="btn btn-default">Large</button>
-            <button type="button" data-switch-get="size" class="btn btn-default">Get</button>
+      </div>
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">State</h2>
+            <p>
+              <input id="switch-state" type="checkbox" checked>
+            </p>
+            <div class="btn-group">
+              <button type="button" data-switch-toggle="state" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-set="state" data-switch-value="true" class="btn btn-default">Set true</button>
+              <button type="button" data-switch-set="state" data-switch-value="false" class="btn btn-default">Set false</button>
+              <button type="button" data-switch-get="state" class="btn btn-default">Get</button>
+            </div>
           </div>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Animate</h2>
-          <p>
-            <input id="switch-animate" type="checkbox" checked>
-          </p>
-          <p>
-            <button type="button" data-switch-toggle="animate" class="btn btn-default">Toggle</button>
-            <button type="button" data-switch-get="animate" class="btn btn-default">Get</button>
-          </p>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Disabled</h2>
-          <p>
-            <input id="switch-disabled" type="checkbox" checked disabled>
-          </p>
-          <p>
-            <button type="button" data-switch-toggle="disabled" class="btn btn-default">Toggle</button>
-            <button type="button" data-switch-get="disabled" class="btn btn-default">Get</button>
-          </p>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Readonly</h2>
-          <p>
-            <input id="switch-readonly" type="checkbox" checked readonly>
-          </p>
-          <p>
-            <button type="button" data-switch-toggle="readonly" class="btn btn-default">Toggle</button>
-            <button type="button" data-switch-get="readonly" class="btn btn-default">Get</button>
-          </p>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Indeterminate</h2>
-          <p>
-            <input id="switch-indeterminate" type="checkbox" checked data-indeterminate="true">
-          </p>
-          <p>
-            <button type="button" data-switch-toggle="indeterminate" class="btn btn-default">Toggle</button>
-            <button type="button" data-switch-get="indeterminate" class="btn btn-default">Get</button>
-          </p>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Inverse</h2>
-          <p>
-            <input id="switch-inverse" type="checkbox" checked data-inverse="true">
-          </p>
-          <p>
-            <button type="button" data-switch-toggle="inverse" class="btn btn-default">Toggle</button>
-            <button type="button" data-switch-get="inverse" class="btn btn-default">Get</button>
-          </p>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">On Color</h2>
-          <p>
-            <input id="switch-onColor" type="checkbox" checked data-on-color="info">
-          </p>
-          <p class="btn-group">
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Size</h2>
+            <p>
+              <input id="switch-size" type="checkbox" checked data-size="mini">
+            </p>
             <div class="btn-group">
-              <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>
-              <div role="menu" class="dropdown-menu">
-                <li><a data-switch-set="onColor" data-switch-value="primary">Primary</a></li>
-                <li><a data-switch-set="onColor" data-switch-value="info">Info</a></li>
-                <li><a data-switch-set="onColor" data-switch-value="success">Success</a></li>
-                <li><a data-switch-set="onColor" data-switch-value="warning">Warning</a></li>
-                <li><a data-switch-set="onColor" data-switch-value="default">Default</a></li>
+              <button type="button" data-switch-set="size" data-switch-value="mini" class="btn btn-default">Mini</button>
+              <button type="button" data-switch-set="size" data-switch-value="small" class="btn btn-default">Small</button>
+              <button type="button" data-switch-set="size" data-switch-value="normal" class="btn btn-default">Normal</button>
+              <button type="button" data-switch-set="size" data-switch-value="large" class="btn btn-default">Large</button>
+              <button type="button" data-switch-get="size" class="btn btn-default">Get</button>
+            </div>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Animate</h2>
+            <p>
+              <input id="switch-animate" type="checkbox" checked>
+            </p>
+            <p>
+              <button type="button" data-switch-toggle="animate" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-get="animate" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Disabled</h2>
+            <p>
+              <input id="switch-disabled" type="checkbox" checked disabled>
+            </p>
+            <p>
+              <button type="button" data-switch-toggle="disabled" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-get="disabled" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Readonly</h2>
+            <p>
+              <input id="switch-readonly" type="checkbox" checked readonly>
+            </p>
+            <p>
+              <button type="button" data-switch-toggle="readonly" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-get="readonly" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Indeterminate</h2>
+            <p>
+              <input id="switch-indeterminate" type="checkbox" checked data-indeterminate="true">
+            </p>
+            <p>
+              <button type="button" data-switch-toggle="indeterminate" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-get="indeterminate" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Inverse</h2>
+            <p>
+              <input id="switch-inverse" type="checkbox" checked data-inverse="true">
+            </p>
+            <p>
+              <button type="button" data-switch-toggle="inverse" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-get="inverse" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">On Color</h2>
+            <p>
+              <input id="switch-onColor" type="checkbox" checked data-on-color="info">
+            </p>
+            <p class="btn-group">
+              <div class="btn-group">
+                <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>
+                <div role="menu" class="dropdown-menu">
+                  <li><a data-switch-set="onColor" data-switch-value="primary">Primary</a></li>
+                  <li><a data-switch-set="onColor" data-switch-value="info">Info</a></li>
+                  <li><a data-switch-set="onColor" data-switch-value="success">Success</a></li>
+                  <li><a data-switch-set="onColor" data-switch-value="warning">Warning</a></li>
+                  <li><a data-switch-set="onColor" data-switch-value="default">Default</a></li>
+                </div>
+              </div>
+              <button type="button" data-switch-get="onColor" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Off Color</h2>
+            <p>
+              <input id="switch-offColor" type="checkbox" data-off-color="warning">
+            </p>
+            <p class="btn-group">
+              <div class="btn-group">
+                <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>
+                <div role="menu" class="dropdown-menu">
+                  <li><a data-switch-set="offColor" data-switch-value="primary">Primary</a></li>
+                  <li><a data-switch-set="offColor" data-switch-value="info">Info</a></li>
+                  <li><a data-switch-set="offColor" data-switch-value="success">Success</a></li>
+                  <li><a data-switch-set="offColor" data-switch-value="warning">Warning</a></li>
+                  <li><a data-switch-set="offColor" data-switch-value="default">Default</a></li>
+                </div>
+              </div>
+              <button type="button" data-switch-get="offColor" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">On Text</h2>
+            <p>
+              <input id="switch-onText" type="checkbox" checked data-on-text="Yes">
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="text" data-switch-set-value="onText" value="Yes" class="form-control">
               </div>
             </div>
-            <button type="button" data-switch-get="onColor" class="btn btn-default">Get</button>
-          </p>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Off Color</h2>
-          <p>
-            <input id="switch-offColor" type="checkbox" data-off-color="warning">
-          </p>
-          <p class="btn-group">
-            <div class="btn-group">
-              <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>
-              <div role="menu" class="dropdown-menu">
-                <li><a data-switch-set="offColor" data-switch-value="primary">Primary</a></li>
-                <li><a data-switch-set="offColor" data-switch-value="info">Info</a></li>
-                <li><a data-switch-set="offColor" data-switch-value="success">Success</a></li>
-                <li><a data-switch-set="offColor" data-switch-value="warning">Warning</a></li>
-                <li><a data-switch-set="offColor" data-switch-value="default">Default</a></li>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Off Text</h2>
+            <p>
+              <input id="switch-offText" type="checkbox" data-off-text="No">
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="text" data-switch-set-value="offText" value="No" class="form-control">
               </div>
             </div>
-            <button type="button" data-switch-get="offColor" class="btn btn-default">Get</button>
-          </p>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">On Text</h2>
-          <p>
-            <input id="switch-onText" type="checkbox" checked data-on-text="Yes">
-          </p>
-          <div class="row">
-            <div class="col-sm-6">
-              <input type="text" data-switch-set-value="onText" value="Yes" class="form-control">
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Label Text</h2>
+            <p>
+              <input id="switch-labelText" type="checkbox" data-label-text="Label">
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="text" data-switch-set-value="labelText" class="form-control">
+              </div>
             </div>
           </div>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Off Text</h2>
-          <p>
-            <input id="switch-offText" type="checkbox" data-off-text="No">
-          </p>
-          <div class="row">
-            <div class="col-sm-6">
-              <input type="text" data-switch-set-value="offText" value="No" class="form-control">
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Handle Width</h2>
+            <p>
+              <input id="switch-handleWidth" type="checkbox" data-handle-width="100">
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="number" data-switch-set-value="handleWidth" value="100" class="form-control">
+              </div>
             </div>
           </div>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Label Text</h2>
-          <p>
-            <input id="switch-labelText" type="checkbox" data-label-text="Label">
-          </p>
-          <div class="row">
-            <div class="col-sm-6">
-              <input type="text" data-switch-set-value="labelText" class="form-control">
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Label Width</h2>
+            <p>
+              <input id="switch-labelWidth" type="checkbox" data-label-width="100">
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="number" data-switch-set-value="labelWidth" value="100" class="form-control">
+              </div>
             </div>
           </div>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Handle Width</h2>
-          <p>
-            <input id="switch-handleWidth" type="checkbox" data-handle-width="100">
-          </p>
-          <div class="row">
-            <div class="col-sm-6">
-              <input type="number" data-switch-set-value="handleWidth" value="100" class="form-control">
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Create | Destroy</h2>
+            <p>
+              <input id="switch-create-destroy" type="checkbox" checked data-switch-no-init>
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <button type="button" data-switch-create-destroy data-destroy-text="Destroy" class="btn btn-default">Create</button>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Label Width</h2>
-          <p>
-            <input id="switch-labelWidth" type="checkbox" data-label-width="100">
-          </p>
+        </div><br><br>
+        <div class="text-center">
+          <h2 class="h4">Radio All Off</h2>
           <div class="row">
             <div class="col-sm-6">
-              <input type="number" data-switch-set-value="labelWidth" value="100" class="form-control">
+              <h3 class="h5">Disabled</h3>
+              <input type="radio" name="radio1" checked class="switch-radio1">
+              <input type="radio" name="radio1" class="switch-radio1">
+              <input type="radio" name="radio1" class="switch-radio1">
             </div>
-          </div>
-        </div>
-        <div class="col-sm-6 col-lg-4">
-          <h2 class="h4">Create | Destroy</h2>
-          <p>
-            <input id="switch-create-destroy" type="checkbox" checked data-switch-no-init>
-          </p>
-          <div class="row">
             <div class="col-sm-6">
-              <button type="button" data-switch-create-destroy data-destroy-text="Destroy" class="btn btn-default">Create</button>
+              <h3 class="h5">Enabled</h3>
+              <input type="radio" name="radio2" checked data-radio-all-off="true" class="switch-radio2">
+              <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
+              <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
             </div>
-          </div>
-        </div>
-      </div><br><br>
-      <div class="text-center">
-        <h2 class="h4">Radio All Off</h2>
-        <div class="row">
-          <div class="col-sm-6">
-            <h3 class="h5">Disabled</h3>
-            <input type="radio" name="radio1" checked class="switch-radio1">
-            <input type="radio" name="radio1" class="switch-radio1">
-            <input type="radio" name="radio1" class="switch-radio1">
-          </div>
-          <div class="col-sm-6">
-            <h3 class="h5">Enabled</h3>
-            <input type="radio" name="radio2" checked data-radio-all-off="true" class="switch-radio2">
-            <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
-            <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
-          </div>
-        </div><br>
-        <hr>
-        <h2 class="h4">Inside Modals</h2>
-        <button data-toggle="modal" data-target="#modal-switch" class="btn btn-default">Open Modal</button>
-        <div id="modal-switch" tabindex="-1" role="dialog" aria-labelledby="modal-switch-label" class="modal fade">
-          <div class="modal-dialog">
-            <div class="modal-content">
-              <div class="modal-header">
-                <button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-                <div id="modal-switch-label" class="modal-title">Title</div>
-              </div>
-              <div class="modal-body">
-                <input id="switch-modal" type="checkbox" checked>
+          </div><br>
+          <hr>
+          <h2 class="h4">Inside Modals</h2>
+          <button data-toggle="modal" data-target="#modal-switch" class="btn btn-default">Open Modal</button>
+          <div id="modal-switch" tabindex="-1" role="dialog" aria-labelledby="modal-switch-label" class="modal fade">
+            <div class="modal-dialog">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                  <div id="modal-switch-label" class="modal-title">Title</div>
+                </div>
+                <div class="modal-body">
+                  <input id="switch-modal" type="checkbox" checked>
+                </div>
               </div>
             </div>
           </div>
+          <hr>
+          <p class="form-group">
+            <input type="checkbox">
+          </p>
         </div>
       </div>
-    </div>
-    <div class="container bottom">
-      <p>
-        Licensed under the
-        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
-        · Created by
-        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
-        · Mantained by
-        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
-      </p>
-    </div>
+    </main>
+    <footer class="bs-docs-footer">
+      <div class="container">
+        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a><br>Created by <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a><br>Mantained by <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+        </p>
+      </div>
+    </footer>
     <script src="docs/js/jquery.min.js"></script>
     <script src="docs/js/bootstrap.min.js"></script>
     <script src="docs/js/highlight.js"></script>

+ 45 - 50
index.html

@@ -7,10 +7,10 @@
     <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
     <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
     <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
-    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
     <link href="docs/css/bootstrap.min.css" rel="stylesheet">
     <link href="docs/css/highlight.css" rel="stylesheet">
     <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
     <link href="docs/css/main.css" rel="stylesheet">
     <script>
       var _gaq = _gaq || [];
@@ -27,30 +27,22 @@
     </script>
   </head>
   <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
-    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+    <header role="banner" class="navbar navbar-static-top bs-docs-nav">
       <div class="container">
         <div class="navbar-header">
-          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch</a>
         </div>
-        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
           <ul class="nav navbar-nav">
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3</a></li>
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
-              </ul>
-            </li>
-            <li><a href="index.html">Start</a></li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" data-toggle="dropdown">Download</a></li>
             <li><a href="examples.html">Examples</a></li>
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation <span class="caret"></span></a>
               <ul class="dropdown-menu">
-                <li class="dropdown-header">Version 3</li>
-                <li><a href="/options-3.html">Options</a></li>
-                <li><a href="/methods-3.html">Methods</a></li>
-                <li><a href="/events-3.html">Events</a></li>
-                <li class="divider"></li>
-                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
-                <li><a href="/documentation-2.html">Documentation</a></li>
+                <li><a href="/options.html">Options</a></li>
+                <li><a href="/methods.html">Methods</a></li>
+                <li><a href="/events.html">Events</a></li>
+                <li role="presentation" class="divider"></li>
+                <li><a href="/documentation-2.html">Documentation (v2.0.1)</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -58,43 +50,46 @@
         </nav>
       </div>
     </header>
-    <div class="container content">
-      <div class="header">
-        <h2 class="title">Bootstrap Switch</h2>
-        <p class="lead">Turn checkboxes &nbsp;
-          <input type="checkbox" checked data-switch-no-init>&nbsp; and and radio buttons &nbsp;
-          <input type="radio" checked data-switch-no-init>&nbsp; in toggle switches &nbsp;
-          <input type="checkbox" checked>
-        </p>
-        <p><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" class="btn btn-lg btn-primary">Download 3</a></p><br>
-        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=watch&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="184" height="30"></iframe>
-        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=fork&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="144" height="30"></iframe>
+    <main id="content" role="main">
+      <div class="bs-docs-masthead">
+        <div class="container">
+          <h1 class="title">Bootstrap Switch</h1>
+          <p class="lead">Turn checkboxes &nbsp;
+            <input type="checkbox" checked data-switch-no-init>&nbsp; and radio buttons &nbsp;
+            <input type="radio" checked data-switch-no-init>&nbsp; in toggle switches &nbsp;
+            <input type="checkbox" checked>
+          </p>
+          <p class="lead"><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" class="btn btn-outline-inverse btn-lg">Download Bootstrap Switch</a></p>
+          <p class="bs-docs-social">
+            <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=watch&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="184" height="30"></iframe>
+            <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=fork&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="144" height="30"></iframe>
+          </p><br>
+          <p class="version">Currently v3.3.0 · Compatible with Bootstrap 2 and 3</p>
+        </div>
       </div>
-      <h1 class="page-header">Getting Started</h1>
-      <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
-      <pre><code>[...]
+      <div class="container">
+        <h2 class="page-header">Getting Started</h2>
+        <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
+        <pre><code>[...]
 &lt;link href="bootstrap.css" rel="stylesheet"&gt;
 &lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
 &lt;script src="jquery.js"&gt;&lt;/script&gt;
 &lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
 [...]</code></pre>
-      <p>Add your checkbox.</p>
-      <pre><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></pre>
-      <p>Initialize Bootstrap Switch.</p>
-      <pre><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
-      <p>Enjoy.</p>
-      <div class="text-center"><a href="examples.html" class="btn btn-lg btn-info">See Examples</a>&nbsp;<a href="options-3.html" class="btn btn-lg btn-default">Browse Documentation</a></div>
-    </div>
-    <div class="container bottom">
-      <p>
-        Licensed under the
-        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
-        · Created by
-        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
-        · Mantained by
-        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
-      </p>
-    </div>
+        <p>Add your checkbox.</p>
+        <pre><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></pre>
+        <p>Initialize Bootstrap Switch.</p>
+        <pre><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
+        <p>Enjoy.</p>
+        <div class="text-center"><a href="examples.html" class="btn btn-lg btn-primary">See Examples</a>&nbsp;<a href="options.html" class="btn btn-lg btn-outline">Browse Documentation</a></div>
+      </div>
+    </main>
+    <footer class="bs-docs-footer">
+      <div class="container">
+        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a><br>Created by <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a><br>Mantained by <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+        </p>
+      </div>
+    </footer>
     <script src="docs/js/jquery.min.js"></script>
     <script src="docs/js/bootstrap.min.js"></script>
     <script src="docs/js/highlight.js"></script>

+ 19 - 31
main.html

@@ -7,10 +7,10 @@
     <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
     <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
     <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
-    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
     <link href="docs/css/bootstrap.min.css" rel="stylesheet">
     <link href="docs/css/highlight.css" rel="stylesheet">
     <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
     <link href="docs/css/main.css" rel="stylesheet">
     <script>
       var _gaq = _gaq || [];
@@ -27,30 +27,22 @@
     </script>
   </head>
   <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
-    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+    <header role="banner" class="navbar navbar-static-top bs-docs-nav">
       <div class="container">
         <div class="navbar-header">
-          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch</a>
         </div>
-        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
           <ul class="nav navbar-nav">
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3</a></li>
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
-              </ul>
-            </li>
-            <li><a href="index.html">Start</a></li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" data-toggle="dropdown">Download</a></li>
             <li><a href="examples.html">Examples</a></li>
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation <span class="caret"></span></a>
               <ul class="dropdown-menu">
-                <li class="dropdown-header">Version 3</li>
-                <li><a href="/options-3.html">Options</a></li>
-                <li><a href="/methods-3.html">Methods</a></li>
-                <li><a href="/events-3.html">Events</a></li>
-                <li class="divider"></li>
-                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
-                <li><a href="/documentation-2.html">Documentation</a></li>
+                <li><a href="/options.html">Options</a></li>
+                <li><a href="/methods.html">Methods</a></li>
+                <li><a href="/events.html">Events</a></li>
+                <li role="presentation" class="divider"></li>
+                <li><a href="/documentation-2.html">Documentation (v2.0.1)</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -58,18 +50,14 @@
         </nav>
       </div>
     </header>
-    <div class="container content">
-    </div>
-    <div class="container bottom">
-      <p>
-        Licensed under the
-        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
-        · Created by
-        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
-        · Mantained by
-        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
-      </p>
-    </div>
+    <main id="content" role="main">
+    </main>
+    <footer class="bs-docs-footer">
+      <div class="container">
+        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a><br>Created by <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a><br>Mantained by <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+        </p>
+      </div>
+    </footer>
     <script src="docs/js/jquery.min.js"></script>
     <script src="docs/js/bootstrap.min.js"></script>
     <script src="docs/js/highlight.js"></script>

+ 71 - 77
methods-3.html

@@ -7,11 +7,11 @@
     <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
     <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
     <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
-    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
     <link href="docs/css/bootstrap.min.css" rel="stylesheet">
     <link href="docs/css/highlight.css" rel="stylesheet">
     <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
     <link href="docs/css/main.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
     <script>
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-43092768-1']);
@@ -27,30 +27,22 @@
     </script>
   </head>
   <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
-    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+    <header role="banner" class="navbar navbar-static-top bs-docs-nav">
       <div class="container">
         <div class="navbar-header">
-          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch</a>
         </div>
-        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
           <ul class="nav navbar-nav">
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3</a></li>
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
-              </ul>
-            </li>
-            <li><a href="index.html">Start</a></li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" data-toggle="dropdown">Download</a></li>
             <li><a href="examples.html">Examples</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
-                <li class="dropdown-header">Version 3</li>
                 <li><a href="/options-3.html">Options</a></li>
                 <li><a href="/methods-3.html">Methods</a></li>
                 <li><a href="/events-3.html">Events</a></li>
-                <li class="divider"></li>
-                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
-                <li><a href="/documentation-2.html">Documentation</a></li>
+                <li class="dropdown-divider"></li>
+                <li><a href="/documentation-2.html">Documentation (v2.0.1)</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -58,68 +50,70 @@
         </nav>
       </div>
     </header>
-    <div class="container content">
-      <h1 class="page-header">Methods &nbsp;<small>Version 3</small></h1>
-      <p>In Bootstrap Switch, every option is also a method.</p>
-      <p>If the second parameter is omitted, the method return the current value.</p>
-      <p>You can invoke methods as follows:</p>
-      <pre><code>$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);</code></pre>
-      <h2>Additional Methods</h2>
-      <table class="table table-bordered table-striped table-responsive">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>toggleState</td>
-            <td>Toggle the switch state</td>
-          </tr>
-          <tr>
-            <td>toggleAnimate</td>
-            <td>Toggle the animate option</td>
-          </tr>
-          <tr>
-            <td>toggleDisabled</td>
-            <td>Toggle the disabled state</td>
-          </tr>
-          <tr>
-            <td>toggleReadonly</td>
-            <td>Toggle the readonly state</td>
-          </tr>
-          <tr>
-            <td>toggleIndeterminate</td>
-            <td>Toggle the indeterminate state</td>
-          </tr>
-          <tr>
-            <td>toggleInverse</td>
-            <td>Toggle the inverse option</td>
-          </tr>
-          <tr>
-            <td>destroy</td>
-            <td>Destroy the instance of Bootstrap Switch</td>
-          </tr>
-        </tbody>
-      </table>
-      <h2>Special Behaviours</h2>
-      <ul>
-        <li>The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
-        <li>The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
-        <li>The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.</li>
-      </ul>
-    </div>
-    <div class="container bottom">
-      <p>
-        Licensed under the
-        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
-        · Created by
-        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
-        · Mantained by
-        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
-      </p>
-    </div>
+    <main id="content" role="main">
+      <div id="content" class="bs-docs-header">
+        <div class="container">
+          <h1>Options</h1>
+        </div>
+      </div>
+      <div class="container">
+        <p>In Bootstrap Switch, every option is also a method.</p>
+        <p>If the second parameter is omitted, the method return the current value.</p>
+        <p>You can invoke methods as follows:</p>
+        <pre><code>$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);</code></pre>
+        <h2>Additional Methods</h2>
+        <table class="table table-bordered table-striped table-responsive">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>toggleState</td>
+              <td>Toggle the switch state</td>
+            </tr>
+            <tr>
+              <td>toggleAnimate</td>
+              <td>Toggle the animate option</td>
+            </tr>
+            <tr>
+              <td>toggleDisabled</td>
+              <td>Toggle the disabled state</td>
+            </tr>
+            <tr>
+              <td>toggleReadonly</td>
+              <td>Toggle the readonly state</td>
+            </tr>
+            <tr>
+              <td>toggleIndeterminate</td>
+              <td>Toggle the indeterminate state</td>
+            </tr>
+            <tr>
+              <td>toggleInverse</td>
+              <td>Toggle the inverse option</td>
+            </tr>
+            <tr>
+              <td>destroy</td>
+              <td>Destroy the instance of Bootstrap Switch</td>
+            </tr>
+          </tbody>
+        </table>
+        <h2>Special Behaviours</h2>
+        <ul>
+          <li>The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
+          <li>The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
+          <li>The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.</li>
+        </ul>
+      </div>
+    </main>
+    <footer class="bs-docs-footer">
+      <div class="container">
+        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a><br>Created by <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a><br>Mantained by <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+        </p>
+      </div>
+    </footer>
     <script src="docs/js/jquery.min.js"></script>
     <script src="docs/js/bootstrap.min.js"></script>
     <script src="docs/js/highlight.js"></script>

+ 123 - 0
methods.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
+    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
+    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
+    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
+    <link href="docs/css/highlight.css" rel="stylesheet">
+    <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
+    <link href="docs/css/main.css" rel="stylesheet">
+    <script>
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-43092768-1']);
+      _gaq.push(['_trackPageview']);
+      (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+  <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <header role="banner" class="navbar navbar-static-top bs-docs-nav">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch</a>
+        </div>
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" data-toggle="dropdown">Download</a></li>
+            <li><a href="examples.html">Examples</a></li>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation <span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="/options.html">Options</a></li>
+                <li><a href="/methods.html">Methods</a></li>
+                <li><a href="/events.html">Events</a></li>
+                <li role="presentation" class="divider"></li>
+                <li><a href="/documentation-2.html">Documentation (v2.0.1)</a></li>
+              </ul>
+            </li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <main id="content" role="main">
+      <div id="content" class="bs-docs-header">
+        <div class="container">
+          <h1>Methods</h1>
+        </div>
+      </div>
+      <div class="container">
+        <p>In Bootstrap Switch, every option is also a method.</p>
+        <p>If the second parameter is omitted, the method return the current value.</p>
+        <p>You can invoke methods as follows:</p>
+        <pre><code>$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);</code></pre>
+        <h2>Additional Methods</h2>
+        <table class="table table-bordered table-striped table-responsive">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>toggleState</td>
+              <td>Toggle the switch state</td>
+            </tr>
+            <tr>
+              <td>toggleAnimate</td>
+              <td>Toggle the animate option</td>
+            </tr>
+            <tr>
+              <td>toggleDisabled</td>
+              <td>Toggle the disabled state</td>
+            </tr>
+            <tr>
+              <td>toggleReadonly</td>
+              <td>Toggle the readonly state</td>
+            </tr>
+            <tr>
+              <td>toggleIndeterminate</td>
+              <td>Toggle the indeterminate state</td>
+            </tr>
+            <tr>
+              <td>toggleInverse</td>
+              <td>Toggle the inverse option</td>
+            </tr>
+            <tr>
+              <td>destroy</td>
+              <td>Destroy the instance of Bootstrap Switch</td>
+            </tr>
+          </tbody>
+        </table>
+        <h2>Special Behaviours</h2>
+        <ul>
+          <li>The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
+          <li>The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
+          <li>The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.</li>
+        </ul>
+      </div>
+    </main>
+    <footer class="bs-docs-footer">
+      <div class="container">
+        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a><br>Created by <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a><br>Mantained by <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+        </p>
+      </div>
+    </footer>
+    <script src="docs/js/jquery.min.js"></script>
+    <script src="docs/js/bootstrap.min.js"></script>
+    <script src="docs/js/highlight.js"></script>
+    <script src="dist/js/bootstrap-switch.js"></script>
+    <script src="docs/js/main.js"></script>
+  </body>
+</html>

+ 195 - 201
options-3.html

@@ -7,11 +7,11 @@
     <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
     <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
     <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
-    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
     <link href="docs/css/bootstrap.min.css" rel="stylesheet">
     <link href="docs/css/highlight.css" rel="stylesheet">
     <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
     <link href="docs/css/main.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
     <script>
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-43092768-1']);
@@ -27,30 +27,22 @@
     </script>
   </head>
   <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
-    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+    <header role="banner" class="navbar navbar-static-top bs-docs-nav">
       <div class="container">
         <div class="navbar-header">
-          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch</a>
         </div>
-        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
           <ul class="nav navbar-nav">
-            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3</a></li>
-                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
-              </ul>
-            </li>
-            <li><a href="index.html">Start</a></li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" data-toggle="dropdown">Download</a></li>
             <li><a href="examples.html">Examples</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
-                <li class="dropdown-header">Version 3</li>
                 <li><a href="/options-3.html">Options</a></li>
                 <li><a href="/methods-3.html">Methods</a></li>
                 <li><a href="/events-3.html">Events</a></li>
-                <li class="divider"></li>
-                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
-                <li><a href="/documentation-2.html">Documentation</a></li>
+                <li class="dropdown-divider"></li>
+                <li><a href="/documentation-2.html">Documentation (v2.0.1)</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -58,193 +50,195 @@
         </nav>
       </div>
     </header>
-    <div class="container content">
-      <h1 class="page-header">Options &nbsp;<small>Version 3</small></h1>
-      <table class="table table-bordered table-striped table-responsive">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Description</th>
-            <th>Values</th>
-            <th>Default</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>state</td>
-            <td>checked</td>
-            <td>Boolean</td>
-            <td>The checkbox state</td>
-            <td>true, false</td>
-            <td>true</td>
-          </tr>
-          <tr>
-            <td>size</td>
-            <td>data-size</td>
-            <td>String</td>
-            <td>The checkbox size</td>
-            <td>null, 'mini', 'small', 'normal', 'large'</td>
-            <td>null</td>
-          </tr>
-          <tr>
-            <td>animate</td>
-            <td>data-animate</td>
-            <td>Boolean</td>
-            <td>Animate the switch</td>
-            <td>true, false</td>
-            <td>true</td>
-          </tr>
-          <tr>
-            <td>disabled</td>
-            <td>disabled</td>
-            <td>Boolean</td>
-            <td>Disable state</td>
-            <td>true, false</td>
-            <td>false</td>
-          </tr>
-          <tr>
-            <td>readonly</td>
-            <td>readonly</td>
-            <td>Boolean</td>
-            <td>Readonly state</td>
-            <td>true, false</td>
-            <td>false</td>
-          </tr>
-          <tr>
-            <td>indeterminate</td>
-            <td>data-indeterminate</td>
-            <td>Boolean</td>
-            <td>Indeterminate state</td>
-            <td>true, false</td>
-            <td>false</td>
-          </tr>
-          <tr>
-            <td>inverse</td>
-            <td>data-inverse</td>
-            <td>Boolean</td>
-            <td>Inverse switch direction</td>
-            <td>true, false</td>
-            <td>false</td>
-          </tr>
-          <tr>
-            <td>radioAllOff</td>
-            <td>data-radio-all-off</td>
-            <td>Boolean</td>
-            <td>Allow this radio button to be unchecked by the user</td>
-            <td>true, false</td>
-            <td>false</td>
-          </tr>
-          <tr>
-            <td>onColor</td>
-            <td>data-on-color</td>
-            <td>String</td>
-            <td>Color of the left side of the switch</td>
-            <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-            <td>'primary'</td>
-          </tr>
-          <tr>
-            <td>offColor</td>
-            <td>data-off-color</td>
-            <td>String</td>
-            <td>Color of the right side of the switch</td>
-            <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-            <td>'default'</td>
-          </tr>
-          <tr>
-            <td>onText</td>
-            <td>data-on-text</td>
-            <td>String</td>
-            <td>Text of the left side of the switch</td>
-            <td>String</td>
-            <td>'ON'</td>
-          </tr>
-          <tr>
-            <td>offText</td>
-            <td>data-off-text</td>
-            <td>String</td>
-            <td>Text of the right side of the switch</td>
-            <td>String</td>
-            <td>'OFF'</td>
-          </tr>
-          <tr>
-            <td>labelText</td>
-            <td>data-label-text</td>
-            <td>String</td>
-            <td>Text of the center handle of the switch</td>
-            <td>String</td>
-            <td>'&amp;nbsp;'</td>
-          </tr>
-          <tr>
-            <td>handleWidth</td>
-            <td>data-handle-width</td>
-            <td>String | Number</td>
-            <td>Width of the left and right sides in pixels</td>
-            <td>'auto' or Number</td>
-            <td>'auto'</td>
-          </tr>
-          <tr>
-            <td>labelWidth</td>
-            <td>data-label-width</td>
-            <td>String | Number</td>
-            <td>Width of the center handle in pixels</td>
-            <td>'auto' or Number</td>
-            <td>'auto'</td>
-          </tr>
-          <tr>
-            <td>baseClass</td>
-            <td>data-base-class</td>
-            <td>String</td>
-            <td>Global class prefix</td>
-            <td>String</td>
-            <td>'bootstrap-switch'</td>
-          </tr>
-          <tr>
-            <td>wrapperClass</td>
-            <td>data-wrapper-class</td>
-            <td>String | Array</td>
-            <td>Container element class(es)</td>
-            <td>String | Array</td>
-            <td>'wrapper'</td>
-          </tr>
-          <tr>
-            <td>onInit</td>
-            <td></td>
-            <td>Function</td>
-            <td>Callback function to execute on initialization</td>
-            <td>Function</td>
-            <td>
-              <pre><code class="javascript">function(event, state) {}</code></pre>
-            </td>
-          </tr>
-          <tr>
-            <td>onSwitchChange</td>
-            <td></td>
-            <td>Function</td>
-            <td>Callback function to execute on switch state change</td>
-            <td>Function</td>
-            <td>
-              <pre><code class="javascript">function(event, state) {}</code></pre>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <h2>Global Defaults Overriding</h2>
-      <p>Follow the jQuery convention to override the default options of the library. For instance:</p>
-      <pre><code>$.fn.bootstrapSwitch.defaults.size = 'large';
+    <main id="content" role="main">
+      <div id="content" class="bs-docs-header">
+        <div class="container">
+          <h1>Options</h1>
+        </div>
+      </div>
+      <div class="container">
+        <table class="table table-bordered table-striped table-responsive">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Attribute</th>
+              <th>Type</th>
+              <th>Description</th>
+              <th>Values</th>
+              <th>Default</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>state</td>
+              <td>checked</td>
+              <td>Boolean</td>
+              <td>The checkbox state</td>
+              <td>true, false</td>
+              <td>true</td>
+            </tr>
+            <tr>
+              <td>size</td>
+              <td>data-size</td>
+              <td>String</td>
+              <td>The checkbox size</td>
+              <td>null, 'mini', 'small', 'normal', 'large'</td>
+              <td>null</td>
+            </tr>
+            <tr>
+              <td>animate</td>
+              <td>data-animate</td>
+              <td>Boolean</td>
+              <td>Animate the switch</td>
+              <td>true, false</td>
+              <td>true</td>
+            </tr>
+            <tr>
+              <td>disabled</td>
+              <td>disabled</td>
+              <td>Boolean</td>
+              <td>Disable state</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>readonly</td>
+              <td>readonly</td>
+              <td>Boolean</td>
+              <td>Readonly state</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>indeterminate</td>
+              <td>data-indeterminate</td>
+              <td>Boolean</td>
+              <td>Indeterminate state</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>inverse</td>
+              <td>data-inverse</td>
+              <td>Boolean</td>
+              <td>Inverse switch direction</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>radioAllOff</td>
+              <td>data-radio-all-off</td>
+              <td>Boolean</td>
+              <td>Allow this radio button to be unchecked by the user</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>onColor</td>
+              <td>data-on-color</td>
+              <td>String</td>
+              <td>Color of the left side of the switch</td>
+              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+              <td>'primary'</td>
+            </tr>
+            <tr>
+              <td>offColor</td>
+              <td>data-off-color</td>
+              <td>String</td>
+              <td>Color of the right side of the switch</td>
+              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+              <td>'default'</td>
+            </tr>
+            <tr>
+              <td>onText</td>
+              <td>data-on-text</td>
+              <td>String</td>
+              <td>Text of the left side of the switch</td>
+              <td>String</td>
+              <td>'ON'</td>
+            </tr>
+            <tr>
+              <td>offText</td>
+              <td>data-off-text</td>
+              <td>String</td>
+              <td>Text of the right side of the switch</td>
+              <td>String</td>
+              <td>'OFF'</td>
+            </tr>
+            <tr>
+              <td>labelText</td>
+              <td>data-label-text</td>
+              <td>String</td>
+              <td>Text of the center handle of the switch</td>
+              <td>String</td>
+              <td>'&amp;nbsp;'</td>
+            </tr>
+            <tr>
+              <td>handleWidth</td>
+              <td>data-handle-width</td>
+              <td>String | Number</td>
+              <td>Width of the left and right sides in pixels</td>
+              <td>'auto' or Number</td>
+              <td>'auto'</td>
+            </tr>
+            <tr>
+              <td>labelWidth</td>
+              <td>data-label-width</td>
+              <td>String | Number</td>
+              <td>Width of the center handle in pixels</td>
+              <td>'auto' or Number</td>
+              <td>'auto'</td>
+            </tr>
+            <tr>
+              <td>baseClass</td>
+              <td>data-base-class</td>
+              <td>String</td>
+              <td>Global class prefix</td>
+              <td>String</td>
+              <td>'bootstrap-switch'</td>
+            </tr>
+            <tr>
+              <td>wrapperClass</td>
+              <td>data-wrapper-class</td>
+              <td>String | Array</td>
+              <td>Container element class(es)</td>
+              <td>String | Array</td>
+              <td>'wrapper'</td>
+            </tr>
+            <tr>
+              <td>onInit</td>
+              <td></td>
+              <td>Function</td>
+              <td>Callback function to execute on initialization</td>
+              <td>Function</td>
+              <td>
+                <pre><code class="javascript">function(event, state) {}</code></pre>
+              </td>
+            </tr>
+            <tr>
+              <td>onSwitchChange</td>
+              <td></td>
+              <td>Function</td>
+              <td>Callback function to execute on switch state change</td>
+              <td>Function</td>
+              <td>
+                <pre><code class="javascript">function(event, state) {}</code></pre>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <h2>Global Defaults Overriding</h2>
+        <p>Follow the jQuery convention to override the default options of the library. For instance:</p>
+        <pre><code>$.fn.bootstrapSwitch.defaults.size = 'large';
 $.fn.bootstrapSwitch.defaults.onColor = 'success';</code></pre>
-    </div>
-    <div class="container bottom">
-      <p>
-        Licensed under the
-        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
-        · Created by
-        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
-        · Mantained by
-        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
-      </p>
-    </div>
+      </div>
+    </main>
+    <footer class="bs-docs-footer">
+      <div class="container">
+        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a><br>Created by <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a><br>Mantained by <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+        </p>
+      </div>
+    </footer>
     <script src="docs/js/jquery.min.js"></script>
     <script src="docs/js/bootstrap.min.js"></script>
     <script src="docs/js/highlight.js"></script>

+ 248 - 0
options.html

@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
+    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
+    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
+    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
+    <link href="docs/css/highlight.css" rel="stylesheet">
+    <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
+    <link href="docs/css/main.css" rel="stylesheet">
+    <script>
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-43092768-1']);
+      _gaq.push(['_trackPageview']);
+      (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+  <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <header role="banner" class="navbar navbar-static-top bs-docs-nav">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch</a>
+        </div>
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" data-toggle="dropdown">Download</a></li>
+            <li><a href="examples.html">Examples</a></li>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation <span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="/options.html">Options</a></li>
+                <li><a href="/methods.html">Methods</a></li>
+                <li><a href="/events.html">Events</a></li>
+                <li role="presentation" class="divider"></li>
+                <li><a href="/documentation-2.html">Documentation (v2.0.1)</a></li>
+              </ul>
+            </li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <main id="content" role="main">
+      <div id="content" class="bs-docs-header">
+        <div class="container">
+          <h1>Options</h1>
+        </div>
+      </div>
+      <div class="container">
+        <table class="table table-bordered table-striped table-responsive">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Attribute</th>
+              <th>Type</th>
+              <th>Description</th>
+              <th>Values</th>
+              <th>Default</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>state</td>
+              <td>checked</td>
+              <td>Boolean</td>
+              <td>The checkbox state</td>
+              <td>true, false</td>
+              <td>true</td>
+            </tr>
+            <tr>
+              <td>size</td>
+              <td>data-size</td>
+              <td>String</td>
+              <td>The checkbox size</td>
+              <td>null, 'mini', 'small', 'normal', 'large'</td>
+              <td>null</td>
+            </tr>
+            <tr>
+              <td>animate</td>
+              <td>data-animate</td>
+              <td>Boolean</td>
+              <td>Animate the switch</td>
+              <td>true, false</td>
+              <td>true</td>
+            </tr>
+            <tr>
+              <td>disabled</td>
+              <td>disabled</td>
+              <td>Boolean</td>
+              <td>Disable state</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>readonly</td>
+              <td>readonly</td>
+              <td>Boolean</td>
+              <td>Readonly state</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>indeterminate</td>
+              <td>data-indeterminate</td>
+              <td>Boolean</td>
+              <td>Indeterminate state</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>inverse</td>
+              <td>data-inverse</td>
+              <td>Boolean</td>
+              <td>Inverse switch direction</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>radioAllOff</td>
+              <td>data-radio-all-off</td>
+              <td>Boolean</td>
+              <td>Allow this radio button to be unchecked by the user</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>onColor</td>
+              <td>data-on-color</td>
+              <td>String</td>
+              <td>Color of the left side of the switch</td>
+              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+              <td>'primary'</td>
+            </tr>
+            <tr>
+              <td>offColor</td>
+              <td>data-off-color</td>
+              <td>String</td>
+              <td>Color of the right side of the switch</td>
+              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+              <td>'default'</td>
+            </tr>
+            <tr>
+              <td>onText</td>
+              <td>data-on-text</td>
+              <td>String</td>
+              <td>Text of the left side of the switch</td>
+              <td>String</td>
+              <td>'ON'</td>
+            </tr>
+            <tr>
+              <td>offText</td>
+              <td>data-off-text</td>
+              <td>String</td>
+              <td>Text of the right side of the switch</td>
+              <td>String</td>
+              <td>'OFF'</td>
+            </tr>
+            <tr>
+              <td>labelText</td>
+              <td>data-label-text</td>
+              <td>String</td>
+              <td>Text of the center handle of the switch</td>
+              <td>String</td>
+              <td>'&amp;nbsp;'</td>
+            </tr>
+            <tr>
+              <td>handleWidth</td>
+              <td>data-handle-width</td>
+              <td>String | Number</td>
+              <td>Width of the left and right sides in pixels</td>
+              <td>'auto' or Number</td>
+              <td>'auto'</td>
+            </tr>
+            <tr>
+              <td>labelWidth</td>
+              <td>data-label-width</td>
+              <td>String | Number</td>
+              <td>Width of the center handle in pixels</td>
+              <td>'auto' or Number</td>
+              <td>'auto'</td>
+            </tr>
+            <tr>
+              <td>baseClass</td>
+              <td>data-base-class</td>
+              <td>String</td>
+              <td>Global class prefix</td>
+              <td>String</td>
+              <td>'bootstrap-switch'</td>
+            </tr>
+            <tr>
+              <td>wrapperClass</td>
+              <td>data-wrapper-class</td>
+              <td>String | Array</td>
+              <td>Container element class(es)</td>
+              <td>String | Array</td>
+              <td>'wrapper'</td>
+            </tr>
+            <tr>
+              <td>onInit</td>
+              <td></td>
+              <td>Function</td>
+              <td>Callback function to execute on initialization</td>
+              <td>Function</td>
+              <td>
+                <pre><code class="javascript">function(event, state) {}</code></pre>
+              </td>
+            </tr>
+            <tr>
+              <td>onSwitchChange</td>
+              <td></td>
+              <td>Function</td>
+              <td>Callback function to execute on switch state change</td>
+              <td>Function</td>
+              <td>
+                <pre><code class="javascript">function(event, state) {}</code></pre>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <h2>Global Defaults Overriding</h2>
+        <p>Follow the jQuery convention to override the default options of the library. For instance:</p>
+        <pre><code>$.fn.bootstrapSwitch.defaults.size = 'large';
+$.fn.bootstrapSwitch.defaults.onColor = 'success';</code></pre>
+      </div>
+    </main>
+    <footer class="bs-docs-footer">
+      <div class="container">
+        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a><br>Created by <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a><br>Mantained by <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+        </p>
+      </div>
+    </footer>
+    <script src="docs/js/jquery.min.js"></script>
+    <script src="docs/js/bootstrap.min.js"></script>
+    <script src="docs/js/highlight.js"></script>
+    <script src="dist/js/bootstrap-switch.js"></script>
+    <script src="docs/js/main.js"></script>
+  </body>
+</html>

+ 205 - 203
src/docs/documentation-2.jade

@@ -1,213 +1,215 @@
 extends main
 
 block content
-  h1.page-header
-    | Documentation &nbsp;
-    small Version 2.0.1 (Legacy)
+  #content.bs-docs-header
+    .container
+      h1 Documentation
+      p v2.0.1
 
-  #options-2
-    h2.page-header Options
+  .container
+    #options
+      h2.page-header Options
 
-    .alert.alert-warning
-      p
-        | All the options are accepted only using <code>data-*</code> attributes on the element.<br>
-        | <code>checked</code>, <code>disabled</code> and <code>readonly</code> are exception to the rule, being
-        | default HTML input attributes.<br>
-        | Therefore, there is not any way to specify the options in JavaScript during initialization.
+      .alert.alert-warning
+        p
+          | All the options are accepted only using <code>data-*</code> attributes on the element.<br>
+          | <code>checked</code>, <code>disabled</code> and <code>readonly</code> are exception to the rule, being
+          | default HTML input attributes.<br>
+          | Therefore, there is not any way to specify the options in JavaScript during initialization.
 
-    table.table.table-bordered.table-striped.table-responsive
-      thead
-        tr
-          th Name
-          th Type
-          th Description
-          th Values
-          th Default
-      tbody
-        tr
-          td state
-          td Boolean
-          td The checkbox state
-          td true, false
-          td 'checked' attribute or true
-        tr
-          td size
-          td String
-          td The checkbox state
-          td '', 'mini', 'small', 'normal', 'large'
-          td ''
-        tr
-          td animate
-          td Boolean
-          td Animate the switch
-          td true, false
-          td true
-        tr
-          td disabled
-          td Boolean
-          td Disable state
-          td true, false
-          td 'disabled' attribute or false
-        tr
-          td readonly
-          td Boolean
-          td Readonly state
-          td true, false
-          td 'readonly' attribute or false
-        tr
-          td on
-          td String
-          td Color of the left side of the switch
-          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-          td null
-        tr
-          td off
-          td String
-          td Color of the right side of the switch
-          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-          td null
-        tr
-          td on-label
-          td String
-          td Text of the left side of the switch
-          td String
-          td 'ON'
-        tr
-          td off-label
-          td String
-          td Text of the right side of the switch
-          td String
-          td 'OFF'
-        tr
-          td text-label
-          td String
-          td Text of the center handle of the switch
-          td String
-          td '&amp;nbsp;'
-        tr
-          td label-icon
-          td String
-          td Text of the center handle of the switch. Use to include external services icons
-          td String
-          td null
+      table.table.table-bordered.table-striped.table-responsive
+        thead
+          tr
+            th Name
+            th Type
+            th Description
+            th Values
+            th Default
+        tbody
+          tr
+            td state
+            td Boolean
+            td The checkbox state
+            td true, false
+            td 'checked' attribute or true
+          tr
+            td size
+            td String
+            td The checkbox state
+            td '', 'mini', 'small', 'normal', 'large'
+            td ''
+          tr
+            td animate
+            td Boolean
+            td Animate the switch
+            td true, false
+            td true
+          tr
+            td disabled
+            td Boolean
+            td Disable state
+            td true, false
+            td 'disabled' attribute or false
+          tr
+            td readonly
+            td Boolean
+            td Readonly state
+            td true, false
+            td 'readonly' attribute or false
+          tr
+            td on
+            td String
+            td Color of the left side of the switch
+            td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+            td null
+          tr
+            td off
+            td String
+            td Color of the right side of the switch
+            td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+            td null
+          tr
+            td on-label
+            td String
+            td Text of the left side of the switch
+            td String
+            td 'ON'
+          tr
+            td off-label
+            td String
+            td Text of the right side of the switch
+            td String
+            td 'OFF'
+          tr
+            td text-label
+            td String
+            td Text of the center handle of the switch
+            td String
+            td '&amp;nbsp;'
+          tr
+            td label-icon
+            td String
+            td Text of the center handle of the switch. Use to include external services icons
+            td String
+            td null
 
-  #methods-2
-    h2.page-header Methods
+    #methods
+      h2.page-header Methods
 
-    table.table.table-bordered.table-striped.table-responsive
-      thead
-        tr
-          th Name
-          th Description
-          th Accepted Values
-          th Returned Values
-      tbody
-        tr
-          td state
-          td Get checkbox state
-          td
-          td true, false
-        tr
-          td setState
-          td Set checkbox state
-          td (value: true, false)[, skip: true, <strong>false</strong>]
-          td jQuery Object (input element)
-        tr
-          td toggleState
-          td Toggle checkbox state
-          td [skip: true, <strong>false</strong>]
-          td jQuery Object (input element)
-        tr
-          td toggleRadioState
-          td Toggle radio state
-          td [skip: true, <strong>false</strong>]
-          td jQuery Object (input element)
-        tr
-          td toggleRadioStateAllowUncheck
-          td Toggle radio state allowing uncheck of the radio input
-          td [uncheck: true, <strong>false</strong> | skip: true, <strong>false</strong>]
-          td jQuery Object (input element)
-        tr
-          td setSizeClass
-          td Set the size of the switch
-          td '', 'mini', 'small', 'normal', 'large'
-          td jQuery Object (input element)
-        tr
-          td setAnimated
-          td Animate the switch
-          td true, false
-          td jQuery Object (input element)
-        tr
-          td isDisabled
-          td Get disabled state
-          td
-          td true, false
-        tr
-          td setDisabled
-          td Set disable state
-          td true, false
-          td jQuery Object (input element)
-        tr
-          td toggleDisabled
-          td Toggle disabled state
-          td
-          td jQuery Object (input element)
-        tr
-          td isReadOnly
-          td Get Readonly state
-          td
-          td true, false
-        tr
-          td setReadOnly
-          td Set Readonly state
-          td true, false
-          td jQuery Object (input element)
-        tr
-          td toggleReadOnly
-          td Toggle readonly state
-          td
-          td jQuery Object (input element)
-        tr
-          td setOnClass
-          td Color of the left side of the switch
-          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-          td jQuery Object (input element)
-        tr
-          td setOffClass
-          td Color of the right side of the switch
-          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-          td jQuery Object (input element)
-        tr
-          td setOnLabel
-          td Text of the left side of the switch
-          td String
-          td jQuery Object (input element)
-        tr
-          td setOffLabel
-          td Text of the right side of the switch
-          td String
-          td jQuery Object (input element)
-        tr
-          td setTextLabel
-          td Text of the center handle of the switch
-          td String
-          td null
-        tr
-          td setTextIcon
-          td Text of the center handle of the switch. Use to include external services icons
-          td String
-          td null
-        tr
-          td destroy
-          td Destroy the instance of Bootstrap Switch
-          td
-          td jQuery Object (input element)
+      table.table.table-bordered.table-striped.table-responsive
+        thead
+          tr
+            th Name
+            th Description
+            th Accepted Values
+            th Returned Values
+        tbody
+          tr
+            td state
+            td Get checkbox state
+            td
+            td true, false
+          tr
+            td setState
+            td Set checkbox state
+            td (value: true, false)[, skip: true, <strong>false</strong>]
+            td jQuery Object (input element)
+          tr
+            td toggleState
+            td Toggle checkbox state
+            td [skip: true, <strong>false</strong>]
+            td jQuery Object (input element)
+          tr
+            td toggleRadioState
+            td Toggle radio state
+            td [skip: true, <strong>false</strong>]
+            td jQuery Object (input element)
+          tr
+            td toggleRadioStateAllowUncheck
+            td Toggle radio state allowing uncheck of the radio input
+            td [uncheck: true, <strong>false</strong> | skip: true, <strong>false</strong>]
+            td jQuery Object (input element)
+          tr
+            td setSizeClass
+            td Set the size of the switch
+            td '', 'mini', 'small', 'normal', 'large'
+            td jQuery Object (input element)
+          tr
+            td setAnimated
+            td Animate the switch
+            td true, false
+            td jQuery Object (input element)
+          tr
+            td isDisabled
+            td Get disabled state
+            td
+            td true, false
+          tr
+            td setDisabled
+            td Set disable state
+            td true, false
+            td jQuery Object (input element)
+          tr
+            td toggleDisabled
+            td Toggle disabled state
+            td
+            td jQuery Object (input element)
+          tr
+            td isReadOnly
+            td Get Readonly state
+            td
+            td true, false
+          tr
+            td setReadOnly
+            td Set Readonly state
+            td true, false
+            td jQuery Object (input element)
+          tr
+            td toggleReadOnly
+            td Toggle readonly state
+            td
+            td jQuery Object (input element)
+          tr
+            td setOnClass
+            td Color of the left side of the switch
+            td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+            td jQuery Object (input element)
+          tr
+            td setOffClass
+            td Color of the right side of the switch
+            td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+            td jQuery Object (input element)
+          tr
+            td setOnLabel
+            td Text of the left side of the switch
+            td String
+            td jQuery Object (input element)
+          tr
+            td setOffLabel
+            td Text of the right side of the switch
+            td String
+            td jQuery Object (input element)
+          tr
+            td setTextLabel
+            td Text of the center handle of the switch
+            td String
+            td null
+          tr
+            td setTextIcon
+            td Text of the center handle of the switch. Use to include external services icons
+            td String
+            td null
+          tr
+            td destroy
+            td Destroy the instance of Bootstrap Switch
+            td
+            td jQuery Object (input element)
 
-  #events-2
-    h2.page-header Events
+    #events
+      h2.page-header Events
 
-    p
-      | The only event triggered it <code>switch-change</code>. It returns two parameters: <code>event</code> and
-      | <code>data</code>.<br>
-      | The latter is an object that include <code>el</code> (the input DOM element) and <code>value</code> (the
-      | new input state)
+      p
+        | The only event triggered it <code>switch-change</code>. It returns two parameters: <code>event</code> and
+        | <code>data</code>.<br>
+        | The latter is an object that include <code>el</code> (the input DOM element) and <code>value</code> (the
+        | new input state)

+ 0 - 37
src/docs/events-3.jade

@@ -1,37 +0,0 @@
-extends main
-
-block content
-  h1.page-header
-    | Events &nbsp;
-    small Version 3
-
-  p
-    | All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
-    | attach your handlers.<br>
-    | You can register to the emitted events as follow:
-
-  pre: code
-    | $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
-    |   console.log(this); // DOM element
-    |   console.log(event); // jQuery event
-    |   console.log(state); // true | false
-    | });
-
-  table.table.table-bordered.table-striped.table-responsive
-    thead
-      tr
-        th Name
-        th Description
-        th Parameters
-    tbody
-      tr
-        td init
-        td Triggered on initialization. 'this' refers to the DOM element.
-        td
-          | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)
-      tr
-        td switchChange
-        td Triggered on switch state change. 'this' refers to the DOM element.
-        td
-          | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
-          | state (true | false)

+ 38 - 0
src/docs/events.jade

@@ -0,0 +1,38 @@
+extends main
+
+block content
+  #content.bs-docs-header
+    .container
+      h1 Events
+
+  .container
+    p
+      | All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
+      | attach your handlers.<br>
+      | You can register to the emitted events as follow:
+
+    pre: code
+      | $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
+      |   console.log(this); // DOM element
+      |   console.log(event); // jQuery event
+      |   console.log(state); // true | false
+      | });
+
+    table.table.table-bordered.table-striped.table-responsive
+      thead
+        tr
+          th Name
+          th Description
+          th Parameters
+      tbody
+        tr
+          td init
+          td Triggered on initialization. 'this' refers to the DOM element.
+          td
+            | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)
+        tr
+          td switchChange
+          td Triggered on switch state change. 'this' refers to the DOM element.
+          td
+            | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
+            | state (true | false)

+ 180 - 172
src/docs/examples.jade

@@ -1,182 +1,190 @@
 extends main
 
 block content
-  h1.page-header Examples
-
-  .row
-    .col-sm-6.col-lg-4
-      h2.h4 State
-      p
-        input#switch-state(type='checkbox', checked)
-      .btn-group
-        button.btn.btn-default(type='button' data-switch-toggle='state') Toggle
-        button.btn.btn-default(type='button', data-switch-set='state', data-switch-value='true') Set true
-        button.btn.btn-default(type='button', data-switch-set='state', data-switch-value='false') Set false
-        button.btn.btn-default(type='button', data-switch-get='state') Get
-
-    .col-sm-6.col-lg-4
-      h2.h4 Size
-      p
-        input#switch-size(type='checkbox', checked, data-size='mini')
-      .btn-group
-        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='mini') Mini
-        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='small') Small
-        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='normal') Normal
-        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='large') Large
-        button.btn.btn-default(type='button', data-switch-get='size') Get
-
-    .col-sm-6.col-lg-4
-      h2.h4 Animate
-      p
-        input#switch-animate(type='checkbox', checked)
-      p
-        button.btn.btn-default(type='button', data-switch-toggle='animate') Toggle
-        button.btn.btn-default(type='button', data-switch-get='animate') Get
-
-    .col-sm-6.col-lg-4
-      h2.h4 Disabled
-      p
-        input#switch-disabled(type='checkbox', checked, disabled)
-      p
-        button.btn.btn-default(type='button', data-switch-toggle='disabled') Toggle
-        button.btn.btn-default(type='button', data-switch-get='disabled') Get
-
-    .col-sm-6.col-lg-4
-      h2.h4 Readonly
-      p
-        input#switch-readonly(type='checkbox', checked, readonly)
-      p
-        button.btn.btn-default(type='button', data-switch-toggle='readonly') Toggle
-        button.btn.btn-default(type='button', data-switch-get='readonly') Get
-
-    .col-sm-6.col-lg-4
-      h2.h4 Indeterminate
-      p
-        input#switch-indeterminate(type='checkbox', checked, data-indeterminate='true')
-      p
-        button.btn.btn-default(type='button', data-switch-toggle='indeterminate') Toggle
-        button.btn.btn-default(type='button', data-switch-get='indeterminate') Get
-
-    .col-sm-6.col-lg-4
-      h2.h4 Inverse
-      p
-        input#switch-inverse(type='checkbox', checked, data-inverse='true')
-      p
-        button.btn.btn-default(type='button', data-switch-toggle='inverse') Toggle
-        button.btn.btn-default(type='button', data-switch-get='inverse') Get
-
-    .col-sm-6.col-lg-4
-      h2.h4 On Color
-      p
-        input#switch-onColor(type='checkbox', checked, data-on-color='info')
-      p.btn-group
+  #content.bs-docs-header
+    .container
+      h1 Examples
+
+  .container
+    .row
+      .col-sm-6.col-lg-4
+        h2.h4 State
+        p
+          input#switch-state(type='checkbox', checked)
         .btn-group
-          button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
-            | Set &nbsp;
-            span.caret
-          .dropdown-menu(role='menu')
-            li: a(data-switch-set='onColor', data-switch-value='primary') Primary
-            li: a(data-switch-set='onColor', data-switch-value='info') Info
-            li: a(data-switch-set='onColor', data-switch-value='success') Success
-            li: a(data-switch-set='onColor', data-switch-value='warning') Warning
-            li: a(data-switch-set='onColor', data-switch-value='default') Default
-        button.btn.btn-default(type='button', data-switch-get='onColor') Get
-
-    .col-sm-6.col-lg-4
-      h2.h4 Off Color
-      p
-        input#switch-offColor(type='checkbox', data-off-color='warning')
-      p.btn-group
+          button.btn.btn-default(type='button' data-switch-toggle='state') Toggle
+          button.btn.btn-default(type='button', data-switch-set='state', data-switch-value='true') Set true
+          button.btn.btn-default(type='button', data-switch-set='state', data-switch-value='false') Set false
+          button.btn.btn-default(type='button', data-switch-get='state') Get
+
+      .col-sm-6.col-lg-4
+        h2.h4 Size
+        p
+          input#switch-size(type='checkbox', checked, data-size='mini')
         .btn-group
-          button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
-            | Set &nbsp;
-            span.caret
-          .dropdown-menu(role='menu')
-            li: a(data-switch-set='offColor', data-switch-value='primary') Primary
-            li: a(data-switch-set='offColor', data-switch-value='info') Info
-            li: a(data-switch-set='offColor', data-switch-value='success') Success
-            li: a(data-switch-set='offColor', data-switch-value='warning') Warning
-            li: a(data-switch-set='offColor', data-switch-value='default') Default
-        button.btn.btn-default(type='button', data-switch-get='offColor') Get
-
-    .col-sm-6.col-lg-4
-      h2.h4 On Text
-      p
-        input#switch-onText(type='checkbox', checked, data-on-text='Yes')
-      .row
-        .col-sm-6
-          input.form-control(type='text', data-switch-set-value='onText', value='Yes')
+          button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='mini') Mini
+          button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='small') Small
+          button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='normal') Normal
+          button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='large') Large
+          button.btn.btn-default(type='button', data-switch-get='size') Get
+
+      .col-sm-6.col-lg-4
+        h2.h4 Animate
+        p
+          input#switch-animate(type='checkbox', checked)
+        p
+          button.btn.btn-default(type='button', data-switch-toggle='animate') Toggle
+          button.btn.btn-default(type='button', data-switch-get='animate') Get
+
+      .col-sm-6.col-lg-4
+        h2.h4 Disabled
+        p
+          input#switch-disabled(type='checkbox', checked, disabled)
+        p
+          button.btn.btn-default(type='button', data-switch-toggle='disabled') Toggle
+          button.btn.btn-default(type='button', data-switch-get='disabled') Get
+
+      .col-sm-6.col-lg-4
+        h2.h4 Readonly
+        p
+          input#switch-readonly(type='checkbox', checked, readonly)
+        p
+          button.btn.btn-default(type='button', data-switch-toggle='readonly') Toggle
+          button.btn.btn-default(type='button', data-switch-get='readonly') Get
+
+      .col-sm-6.col-lg-4
+        h2.h4 Indeterminate
+        p
+          input#switch-indeterminate(type='checkbox', checked, data-indeterminate='true')
+        p
+          button.btn.btn-default(type='button', data-switch-toggle='indeterminate') Toggle
+          button.btn.btn-default(type='button', data-switch-get='indeterminate') Get
+
+      .col-sm-6.col-lg-4
+        h2.h4 Inverse
+        p
+          input#switch-inverse(type='checkbox', checked, data-inverse='true')
+        p
+          button.btn.btn-default(type='button', data-switch-toggle='inverse') Toggle
+          button.btn.btn-default(type='button', data-switch-get='inverse') Get
+
+      .col-sm-6.col-lg-4
+        h2.h4 On Color
+        p
+          input#switch-onColor(type='checkbox', checked, data-on-color='info')
+        p.btn-group
+          .btn-group
+            button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
+              | Set &nbsp;
+              span.caret
+            .dropdown-menu(role='menu')
+              li: a(data-switch-set='onColor', data-switch-value='primary') Primary
+              li: a(data-switch-set='onColor', data-switch-value='info') Info
+              li: a(data-switch-set='onColor', data-switch-value='success') Success
+              li: a(data-switch-set='onColor', data-switch-value='warning') Warning
+              li: a(data-switch-set='onColor', data-switch-value='default') Default
+          button.btn.btn-default(type='button', data-switch-get='onColor') Get
+
+      .col-sm-6.col-lg-4
+        h2.h4 Off Color
+        p
+          input#switch-offColor(type='checkbox', data-off-color='warning')
+        p.btn-group
+          .btn-group
+            button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
+              | Set &nbsp;
+              span.caret
+            .dropdown-menu(role='menu')
+              li: a(data-switch-set='offColor', data-switch-value='primary') Primary
+              li: a(data-switch-set='offColor', data-switch-value='info') Info
+              li: a(data-switch-set='offColor', data-switch-value='success') Success
+              li: a(data-switch-set='offColor', data-switch-value='warning') Warning
+              li: a(data-switch-set='offColor', data-switch-value='default') Default
+          button.btn.btn-default(type='button', data-switch-get='offColor') Get
+
+      .col-sm-6.col-lg-4
+        h2.h4 On Text
+        p
+          input#switch-onText(type='checkbox', checked, data-on-text='Yes')
+        .row
+          .col-sm-6
+            input.form-control(type='text', data-switch-set-value='onText', value='Yes')
+
+      .col-sm-6.col-lg-4
+        h2.h4 Off Text
+        p
+          input#switch-offText(type='checkbox', data-off-text='No')
+        .row
+          .col-sm-6
+            input.form-control(type='text', data-switch-set-value='offText', value='No')
+
+      .col-sm-6.col-lg-4
+        h2.h4 Label Text
+        p
+          input#switch-labelText(type='checkbox', data-label-text='Label')
+        .row
+          .col-sm-6
+            input.form-control(type='text', data-switch-set-value='labelText')
+
+      .col-sm-6.col-lg-4
+        h2.h4 Handle Width
+        p
+          input#switch-handleWidth(type='checkbox', data-handle-width='100')
+        .row
+          .col-sm-6
+            input.form-control(type='number', data-switch-set-value='handleWidth', value='100')
+
+      .col-sm-6.col-lg-4
+        h2.h4 Label Width
+        p
+          input#switch-labelWidth(type='checkbox', data-label-width='100')
+        .row
+          .col-sm-6
+            input.form-control(type='number', data-switch-set-value='labelWidth', value='100')
+
+      .col-sm-6.col-lg-4
+        h2.h4 Create | Destroy
+        p
+          input#switch-create-destroy(type='checkbox', checked, data-switch-no-init)
+        .row
+          .col-sm-6
+            button.btn.btn-default(type='button', data-switch-create-destroy, data-destroy-text="Destroy") Create
 
-    .col-sm-6.col-lg-4
-      h2.h4 Off Text
-      p
-        input#switch-offText(type='checkbox', data-off-text='No')
-      .row
-        .col-sm-6
-          input.form-control(type='text', data-switch-set-value='offText', value='No')
-
-    .col-sm-6.col-lg-4
-      h2.h4 Label Text
-      p
-        input#switch-labelText(type='checkbox', data-label-text='Label')
-      .row
-        .col-sm-6
-          input.form-control(type='text', data-switch-set-value='labelText')
-
-    .col-sm-6.col-lg-4
-      h2.h4 Handle Width
-      p
-        input#switch-handleWidth(type='checkbox', data-handle-width='100')
-      .row
-        .col-sm-6
-          input.form-control(type='number', data-switch-set-value='handleWidth', value='100')
+    br
+    br
 
-    .col-sm-6.col-lg-4
-      h2.h4 Label Width
-      p
-        input#switch-labelWidth(type='checkbox', data-label-width='100')
+    .text-center
+      h2.h4 Radio All Off
       .row
         .col-sm-6
-          input.form-control(type='number', data-switch-set-value='labelWidth', value='100')
-
-    .col-sm-6.col-lg-4
-      h2.h4 Create | Destroy
-      p
-        input#switch-create-destroy(type='checkbox', checked, data-switch-no-init)
-      .row
+          h3.h5 Disabled
+          input.switch-radio1(type='radio', name='radio1', checked)
+          input.switch-radio1(type='radio', name='radio1')
+          input.switch-radio1(type='radio', name='radio1')
         .col-sm-6
-          button.btn.btn-default(type='button', data-switch-create-destroy, data-destroy-text="Destroy") Create
-
-  br
-  br
-
-  .text-center
-    h2.h4 Radio All Off
-    .row
-      .col-sm-6
-        h3.h5 Disabled
-        input.switch-radio1(type='radio', name='radio1', checked)
-        input.switch-radio1(type='radio', name='radio1')
-        input.switch-radio1(type='radio', name='radio1')
-      .col-sm-6
-        h3.h5 Enabled
-        input.switch-radio2(type='radio', name='radio2', checked, data-radio-all-off='true')
-        input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true')
-        input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true')
-
-    br
-    hr
-
-
-    h2.h4 Inside Modals
-    button.btn.btn-default(data-toggle='modal', data-target='#modal-switch') Open Modal
-    .modal.fade#modal-switch(tabindex='-1', role='dialog', aria-labelledby='modal-switch-label')
-      .modal-dialog
-        .modal-content
-          .modal-header
-            button.close(type='button', data-dismiss='modal')
-              span(aria-hidden='true') &times;
-              span.sr-only Close
-            .modal-title#modal-switch-label Title
-          .modal-body
-            input#switch-modal(type='checkbox', checked)
+          h3.h5 Enabled
+          input.switch-radio2(type='radio', name='radio2', checked, data-radio-all-off='true')
+          input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true')
+          input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true')
+
+      br
+      hr
+
+
+      h2.h4 Inside Modals
+      button.btn.btn-default(data-toggle='modal', data-target='#modal-switch') Open Modal
+      .modal.fade#modal-switch(tabindex='-1', role='dialog', aria-labelledby='modal-switch-label')
+        .modal-dialog
+          .modal-content
+            .modal-header
+              button.close(type='button', data-dismiss='modal')
+                span(aria-hidden='true') &times;
+                span.sr-only Close
+              .modal-title#modal-switch-label Title
+            .modal-body
+              input#switch-modal(type='checkbox', checked)
+
+      hr
+
+      p.form-group
+        input(type="checkbox")

+ 45 - 40
src/docs/index.jade

@@ -1,44 +1,49 @@
 extends main
 
 block content
-  .header
-    h2.title Bootstrap Switch
-
-    p.lead
-      | Turn checkboxes &nbsp;
-      input(type='checkbox', checked, data-switch-no-init)
-      | &nbsp; and and radio buttons &nbsp;
-      input(type='radio', checked, data-switch-no-init)
-      | &nbsp; in toggle switches &nbsp;
-      input(type='checkbox', checked)
-
-    p
-      a.btn.btn-lg.btn-primary(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') Download 3
-    br
-    iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='184', height='30')
-    iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='144', height='30')
-
-  h1.page-header Getting Started
-
-  p Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
-  pre: code
-    | [...]
-    | &lt;link href="bootstrap.css" rel="stylesheet"&gt;
-    | &lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
-    | &lt;script src="jquery.js"&gt;&lt;/script&gt;
-    | &lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
-    | [...]
-
-  p Add your checkbox.
-  pre: code &lt;input type="checkbox" name="my-checkbox" checked&gt;
-
-  p Initialize Bootstrap Switch.
-  pre: code $("[name='my-checkbox']").bootstrapSwitch();
-
-  p Enjoy.
-
-  .text-center
-    a.btn.btn-lg.btn-info(href='examples.html') See Examples
-    | &nbsp;
-    a.btn.btn-lg.btn-default(href='options-3.html') Browse Documentation
+  .bs-docs-masthead
+    .container
+      h1.title Bootstrap Switch
+
+      p.lead
+        | Turn checkboxes &nbsp;
+        input(type='checkbox', checked, data-switch-no-init)
+        | &nbsp; and radio buttons &nbsp;
+        input(type='radio', checked, data-switch-no-init)
+        | &nbsp; in toggle switches &nbsp;
+        input(type='checkbox', checked)
+
+      p.lead
+        a.btn.btn-outline-inverse.btn-lg(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') Download Bootstrap Switch
+      p.bs-docs-social
+        iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='184', height='30')
+        iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='144', height='30')
+      br
+      p.version
+        | Currently v3.3.0 · Compatible with Bootstrap 2 and 3
+
+  .container
+    h2.page-header Getting Started
+
+    p Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
+    pre: code
+      | [...]
+      | &lt;link href="bootstrap.css" rel="stylesheet"&gt;
+      | &lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
+      | &lt;script src="jquery.js"&gt;&lt;/script&gt;
+      | &lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
+      | [...]
+
+    p Add your checkbox.
+    pre: code &lt;input type="checkbox" name="my-checkbox" checked&gt;
+
+    p Initialize Bootstrap Switch.
+    pre: code $("[name='my-checkbox']").bootstrapSwitch();
+
+    p Enjoy.
+
+    .text-center
+      a.btn.btn-lg.btn-primary(href='examples.html') See Examples
+      | &nbsp;
+      a.btn.btn-lg.btn-outline(href='options.html') Browse Documentation
 

+ 26 - 28
src/docs/main.jade

@@ -7,10 +7,10 @@ html(lang='en')
     meta(name='description', content='Turn checkboxes and radio buttons in toggle switches.')
     meta(name='author', content='Mattia Larentis, Emanuele Marchi and Peter Stein')
     title Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches
-    link(href='http://fonts.googleapis.com/css?family=Roboto:400,700', rel='stylesheet')
     link(href='docs/css/bootstrap.min.css', rel='stylesheet')
     link(href='docs/css/highlight.css', rel='stylesheet')
     link(href='dist/css/bootstrap3/bootstrap-switch.css', rel='stylesheet')
+    link(href='http://getbootstrap.com/assets/css/docs.min.css', rel='stylesheet')
     link(href='docs/css/main.css', rel='stylesheet')
     script.
       var _gaq = _gaq || [];
@@ -28,7 +28,7 @@ html(lang='en')
     a(href='https://github.com/nostalgiaz/bootstrap-switch', id='github')
       img(src='https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png', alt='Fork me on GitHub')
 
-    header.navbar.navbar-default.navbar-fixed-top.top(role='banner')
+    header.navbar.navbar-static-top.bs-docs-nav(role='banner')
       .container
         .navbar-header
           button.navbar-toggle(type='button', data-toggle='collapse', data-target='#collapse')
@@ -36,43 +36,41 @@ html(lang='en')
             span.icon-bar
             span.icon-bar
             span.icon-bar
-          a.navbar-brand(href='../') Bootstrap Switch <strong>3</strong>
-        nav#collapse.collapse.navbar-collapse(role='navigation')
+          a.navbar-brand(href='../') Bootstrap Switch
+        nav#collapse.collapse.navbar-collapse.bs-navbar-collapse(role='navigation')
           ul.nav.navbar-nav
-            li.dropdown
-              a(href='#', data-toggle='dropdown')
-                | Download
-                span.caret
-              ul.dropdown-menu
-                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') 3
-                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip') 2.0.1 (Legacy)
-            li: a(href='index.html') Start
+            li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', data-toggle='dropdown') Download
             li: a(href='examples.html') Examples
             li.dropdown
               a(href='#', data-toggle='dropdown')
                 | Documentation
+                = ' '
                 span.caret
               ul.dropdown-menu
-                li.dropdown-header Version 3
-                li: a(href='/options-3.html') Options
-                li: a(href='/methods-3.html') Methods
-                li: a(href='/events-3.html') Events
-                li.divider
-                li.dropdown-header Version 2.0.1 (Legacy)
-                li: a(href='/documentation-2.html') Documentation
+                li: a(href='/options.html') Options
+                li: a(href='/methods.html') Methods
+                li: a(href='/events.html') Events
+                li.divider(role='presentation')
+                li: a(href='/documentation-2.html') Documentation (v2.0.1)
             li: a(href='https://github.com/nostalgiaz/bootstrap-switch/issues') Bug reports
 
-    .container.content
+    main#content(role='main')
       block content
 
-    .container.bottom
-      p
-        | Licensed under the
-        | <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
-        | · Created by
-        | <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
-        | · Mantained by
-        | <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+    footer.bs-docs-footer
+      .container
+        p
+          | Code licensed under
+          = ' '
+          a(href='http://www.apache.org/licenses/LICENSE-2.0', target='_blank') Apache License, Version 2.0
+          br
+          | Created by
+          = ' '
+          a(href='https://github.com/nostalgiaz', target='_blank') Mattia Larentis
+          br
+          | Mantained by
+          = ' '
+          a(href='https://github.com/lostcrew', target='_blank') Emanuele Marchi
 
     script(src='docs/js/jquery.min.js')
     script(src='docs/js/bootstrap.min.js')

+ 0 - 48
src/docs/methods-3.jade

@@ -1,48 +0,0 @@
-extends main
-
-block content
-  h1.page-header
-    | Methods &nbsp;
-    small Version 3
-
-  p In Bootstrap Switch, every option is also a method.
-  p If the second parameter is omitted, the method return the current value.
-  p You can invoke methods as follows:
-  pre: code $('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);
-
-  h2 Additional Methods
-
-  table.table.table-bordered.table-striped.table-responsive
-    thead
-      tr
-        th Name
-        th Description
-    tbody
-      tr
-        td toggleState
-        td Toggle the switch state
-      tr
-        td toggleAnimate
-        td Toggle the animate option
-      tr
-        td toggleDisabled
-        td Toggle the disabled state
-      tr
-        td toggleReadonly
-        td Toggle the readonly state
-      tr
-        td toggleIndeterminate
-        td Toggle the indeterminate state
-      tr
-        td toggleInverse
-        td Toggle the inverse option
-      tr
-        td destroy
-        td Destroy the instance of Bootstrap Switch
-
-  h2 Special Behaviours
-
-  ul
-    li The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
-    li The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
-    li The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.

+ 49 - 0
src/docs/methods.jade

@@ -0,0 +1,49 @@
+extends main
+
+block content
+  #content.bs-docs-header
+    .container
+      h1 Methods
+
+  .container
+    p In Bootstrap Switch, every option is also a method.
+    p If the second parameter is omitted, the method return the current value.
+    p You can invoke methods as follows:
+    pre: code $('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);
+
+    h2 Additional Methods
+
+    table.table.table-bordered.table-striped.table-responsive
+      thead
+        tr
+          th Name
+          th Description
+      tbody
+        tr
+          td toggleState
+          td Toggle the switch state
+        tr
+          td toggleAnimate
+          td Toggle the animate option
+        tr
+          td toggleDisabled
+          td Toggle the disabled state
+        tr
+          td toggleReadonly
+          td Toggle the readonly state
+        tr
+          td toggleIndeterminate
+          td Toggle the indeterminate state
+        tr
+          td toggleInverse
+          td Toggle the inverse option
+        tr
+          td destroy
+          td Destroy the instance of Bootstrap Switch
+
+    h2 Special Behaviours
+
+    ul
+      li The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
+      li The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
+      li The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.

+ 0 - 158
src/docs/options-3.jade

@@ -1,158 +0,0 @@
-extends main
-
-block content
-  h1.page-header
-    | Options &nbsp;
-    small Version 3
-
-  table.table.table-bordered.table-striped.table-responsive
-    thead
-      tr
-        th Name
-        th Attribute
-        th Type
-        th Description
-        th Values
-        th Default
-    tbody
-      tr
-        td state
-        td checked
-        td Boolean
-        td The checkbox state
-        td true, false
-        td true
-      tr
-        td size
-        td data-size
-        td String
-        td The checkbox size
-        td null, 'mini', 'small', 'normal', 'large'
-        td null
-      tr
-        td animate
-        td data-animate
-        td Boolean
-        td Animate the switch
-        td true, false
-        td true
-      tr
-        td disabled
-        td disabled
-        td Boolean
-        td Disable state
-        td true, false
-        td false
-      tr
-        td readonly
-        td readonly
-        td Boolean
-        td Readonly state
-        td true, false
-        td false
-      tr
-        td indeterminate
-        td data-indeterminate
-        td Boolean
-        td Indeterminate state
-        td true, false
-        td false
-      tr
-        td inverse
-        td data-inverse
-        td Boolean
-        td Inverse switch direction
-        td true, false
-        td false
-      tr
-        td radioAllOff
-        td data-radio-all-off
-        td Boolean
-        td Allow this radio button to be unchecked by the user
-        td true, false
-        td false
-      tr
-        td onColor
-        td data-on-color
-        td String
-        td Color of the left side of the switch
-        td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-        td 'primary'
-      tr
-        td offColor
-        td data-off-color
-        td String
-        td Color of the right side of the switch
-        td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-        td 'default'
-      tr
-        td onText
-        td data-on-text
-        td String
-        td Text of the left side of the switch
-        td String
-        td 'ON'
-      tr
-        td offText
-        td data-off-text
-        td String
-        td Text of the right side of the switch
-        td String
-        td 'OFF'
-      tr
-        td labelText
-        td data-label-text
-        td String
-        td Text of the center handle of the switch
-        td String
-        td '&amp;nbsp;'
-      tr
-        td handleWidth
-        td data-handle-width
-        td String | Number
-        td Width of the left and right sides in pixels
-        td 'auto' or Number
-        td 'auto'
-      tr
-        td labelWidth
-        td data-label-width
-        td String | Number
-        td Width of the center handle in pixels
-        td 'auto' or Number
-        td 'auto'
-      tr
-        td baseClass
-        td data-base-class
-        td String
-        td Global class prefix
-        td String
-        td 'bootstrap-switch'
-      tr
-        td wrapperClass
-        td data-wrapper-class
-        td String | Array
-        td Container element class(es)
-        td String | Array
-        td 'wrapper'
-      tr
-        td onInit
-        td
-        td Function
-        td Callback function to execute on initialization
-        td Function
-        td: pre: code.javascript function(event, state) {}
-      tr
-        td onSwitchChange
-        td
-        td Function
-        td Callback function to execute on switch state change
-        td Function
-        td: pre: code.javascript function(event, state) {}
-
-  h2 Global Defaults Overriding
-
-  p Follow the jQuery convention to override the default options of the library. For instance:
-  pre
-    code
-      | $.fn.bootstrapSwitch.defaults.size = 'large';
-      | $.fn.bootstrapSwitch.defaults.onColor = 'success';

+ 159 - 0
src/docs/options.jade

@@ -0,0 +1,159 @@
+extends main
+
+block content
+  #content.bs-docs-header
+    .container
+      h1 Options
+
+  .container
+    table.table.table-bordered.table-striped.table-responsive
+      thead
+        tr
+          th Name
+          th Attribute
+          th Type
+          th Description
+          th Values
+          th Default
+      tbody
+        tr
+          td state
+          td checked
+          td Boolean
+          td The checkbox state
+          td true, false
+          td true
+        tr
+          td size
+          td data-size
+          td String
+          td The checkbox size
+          td null, 'mini', 'small', 'normal', 'large'
+          td null
+        tr
+          td animate
+          td data-animate
+          td Boolean
+          td Animate the switch
+          td true, false
+          td true
+        tr
+          td disabled
+          td disabled
+          td Boolean
+          td Disable state
+          td true, false
+          td false
+        tr
+          td readonly
+          td readonly
+          td Boolean
+          td Readonly state
+          td true, false
+          td false
+        tr
+          td indeterminate
+          td data-indeterminate
+          td Boolean
+          td Indeterminate state
+          td true, false
+          td false
+        tr
+          td inverse
+          td data-inverse
+          td Boolean
+          td Inverse switch direction
+          td true, false
+          td false
+        tr
+          td radioAllOff
+          td data-radio-all-off
+          td Boolean
+          td Allow this radio button to be unchecked by the user
+          td true, false
+          td false
+        tr
+          td onColor
+          td data-on-color
+          td String
+          td Color of the left side of the switch
+          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+          td 'primary'
+        tr
+          td offColor
+          td data-off-color
+          td String
+          td Color of the right side of the switch
+          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+          td 'default'
+        tr
+          td onText
+          td data-on-text
+          td String
+          td Text of the left side of the switch
+          td String
+          td 'ON'
+        tr
+          td offText
+          td data-off-text
+          td String
+          td Text of the right side of the switch
+          td String
+          td 'OFF'
+        tr
+          td labelText
+          td data-label-text
+          td String
+          td Text of the center handle of the switch
+          td String
+          td '&amp;nbsp;'
+        tr
+          td handleWidth
+          td data-handle-width
+          td String | Number
+          td Width of the left and right sides in pixels
+          td 'auto' or Number
+          td 'auto'
+        tr
+          td labelWidth
+          td data-label-width
+          td String | Number
+          td Width of the center handle in pixels
+          td 'auto' or Number
+          td 'auto'
+        tr
+          td baseClass
+          td data-base-class
+          td String
+          td Global class prefix
+          td String
+          td 'bootstrap-switch'
+        tr
+          td wrapperClass
+          td data-wrapper-class
+          td String | Array
+          td Container element class(es)
+          td String | Array
+          td 'wrapper'
+        tr
+          td onInit
+          td
+          td Function
+          td Callback function to execute on initialization
+          td Function
+          td: pre: code.javascript function(event, state) {}
+        tr
+          td onSwitchChange
+          td
+          td Function
+          td Callback function to execute on switch state change
+          td Function
+          td: pre: code.javascript function(event, state) {}
+
+    h2 Global Defaults Overriding
+
+    p Follow the jQuery convention to override the default options of the library. For instance:
+    pre
+      code
+        | $.fn.bootstrapSwitch.defaults.size = 'large';
+        | $.fn.bootstrapSwitch.defaults.onColor = 'success';