首頁 探索 說明
登入
hugh
/
bootstrap-switch
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

updated docs

Emanuele Marchi 11 年之前
父節點
d28fa72169
當前提交
77d10e3eff
共有 6 個文件被更改，包括 176 次插入 和 135 次删除
分割檢視 顯示文件統計
  1. 11 7
      docs/index.css
  2. 0 0
      docs/lib/bootstrap.min.js
  3. 0 0
      docs/lib/jquery.min.js
  4. 0 0
      docs/lib/prism.css
  5. 0 0
      docs/lib/prism.js
  6. 165 128
      index.html

+ 11 - 7
docs/index.css
查看文件 

@@ -1,7 +1,6 @@
 
 body {
 
-  padding-top: 20px;
 
-  padding-bottom: 20px;
 
-  text-align: center;
 
+  padding-top: 60px;
 
+  padding-bottom: 60px;
 
 }
 
 
 h1 {
 
@@ -9,9 +8,6 @@ h1 {
 
   letter-spacing: -2px;
 
 }
 
 
-.header {
 
-}
 
-
 
 .people {
 
   font-size: 18px;
 
 }
 
@@ -20,6 +16,14 @@ h1 {
 
   text-align: left;
 
 }
 
 
+#main {
 
+  text-align: center;
 
+}
 
+
 
+.section {
 
+  padding-top: 20px;
 
+}
 
+
 
 #github {
 
   display: block;
 
   position: fixed;
 
@@ -27,7 +31,7 @@ h1 {
 
   height: 150px;
 
   top: 0;
 
   right: 0;
 
-  z-index: 150;
 
+  z-index: 2000;
 
 }
 
 
 .footer {

+ 0 - 0
docs/vendor/bootstrap.min.js → docs/lib/bootstrap.min.js
查看文件


+ 0 - 0
docs/vendor/jquery.min.js → docs/lib/jquery.min.js
查看文件


+ 0 - 0
docs/vendor/prism.css → docs/lib/prism.css
查看文件


+ 0 - 0
docs/vendor/prism.js → docs/lib/prism.js
查看文件


+ 165 - 128
index.html
查看文件 

@@ -2,16 +2,16 @@
 
 <html lang="en">
 
   <head>
 
     <meta charset="utf-8">
 
-    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches.</title>
 
-    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
 
-    <meta name="author" content="Mattia Larentis">
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+    <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 rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
 
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
 
     <link rel="stylesheet" href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/flat-ui-fonts.css">
 
     <link rel="stylesheet" href="build/css/bootstrap3/bootstrap-switch.css" />
 
-    <link rel="stylesheet" href="docs/vendor/prism.css">
 
+    <link rel="stylesheet" href="docs/lib/prism.css">
 
     <link rel="stylesheet" href="docs/index.css">
 
     <script>
 
     var _gaq = _gaq || [];
 
@@ -30,11 +30,50 @@
 
   <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 class="header">
 
+    <header class="navbar navbar-default navbar-fixed-top header" role="banner">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#collapse">
 
+            <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" class="collapse navbar-collapse" role="navigation">
 
+          <ul class="nav navbar-nav">
 
+            <li><a href="#getting-started">Getting started</a></li>
 
+            <li class="dropdown">
 
+              <a href="#documentation" data-toggle="dropdown">Documentation <span class="caret"></span></a>
 
+              <ul class="dropdown-menu">
 
+                <li><a href="#sizes">Sizes</a></li>
 
+                <li><a href="#colors">Colors</a></li>
 
+                <li><a href="#animation">Animation</a></li>
 
+                <li><a href="#disabled">Disabled / Readonly</a></li>
 
+                <li><a href="#text">Text</a></li>
 
+                <li><a href="#label-text">Label Text</a></li>
 
+                <li><a href="#icon-label-text">Icon Label Text</a></li>
 
+                <li><a href="#event-handler">Event Handler</a></li>
 
+                <li><a href="#label-event-handler">Label Event Handler</a></li>
 
+                <li><a href="#state">State</a></li>
 
+                <li><a href="#destroy">Destroy</a></li>
 
+                <li><a href="#disable">Disable / Readonly</a></li>
 
+                <li><a href="#radio">Radio</a></li>
 
+                <li><a href="#form">Form</a></li>
 
+                <li><a href="#modal">Modal</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+      </div>
 
+    </header>
 
+    <main id="main" role="main">
 
       <div class="container">
 
         <h1>Bootstrap Switch <span class="small">3.0.0</span></h1>
 
-        <h2>Turn checkboxes and radio buttons in toggle switches.</h2>
 
+        <p class="lead">Turn checkboxes and radio buttons in toggle switches.</p>
 
         <br>
 
+        <a href="#">Download Bootstrap Switch</a>
 
         <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="30"></iframe>
 
         <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="30"></iframe>
 
         <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="190" height="30"></iframe>
 
@@ -42,18 +81,38 @@
 
         <iframe src="http://ghbtns.com/github-btn.html?user=BdMdesigN&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
 
         <br>
 
         <br>
 
-        <p class="people">
 
+        <p class="lead people">
 
           <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> · <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> · <a href="http://www.lostcrew.it" target="_blank">Emanuele Marchi</a>
 
         </p>
 
+        </div>
 
       </div>
 
-    </header>
 
-    <hr>
 
+    </main>
 
     <div class="container">
 
     <div class="row">
 
       <div class="col-sm-10 col-sm-offset-1">
 
-        <section id="sizes">
 
+        <section id="getting-started" class="section">
 
           <div class="page-header">
 
-            <h2><a href="#sizes">Sizes</a></h2>
 
+            <h2><a href="#getting-started">Getting started</a></h2>
 
+          </div>
 
+          <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
 
+          <pre class="language-markup"><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 class="language-markup"><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></pre>
 
+          <p>Initialize Bootstrap Switch.</p>
 
+          <pre class="language-javascript"><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
 
+          <p>Enjoy.</p>
 
+        </section>
 
+        <div class="page-header">
 
+          <h2><a href="#documentation">Documentation</a></h2>
 
+        </div>
 
+        <section id="sizes" class="section">
 
+          <div class="page-header">
 
+            <h3><a href="#sizes">Sizes</a></h3>
 
           </div>
 
           <input type="checkbox" checked data-size="large">
 
           <input type="checkbox" checked>
 
@@ -87,9 +146,9 @@ $('#dimension-switch').bootstrapSwitch('size', 'small');
 
 // Sets a large switch
 
 $('#dimension-switch').bootstrapSwitch('size', 'large');</code></pre>
 
         </section>
 
-        <section id="colors">
 
+        <section id="colors" class="section">
 
           <div class="page-header">
 
-            <h2><a href="#colors">Colors</a></h2>
 
+            <h3><a href="#colors">Colors</a></h3>
 
           </div>
 
           <input type="checkbox" checked data-on-color="primary" data-off-color="info">
 
           <input type="checkbox" checked data-on-color="info" data-off-color="success">
 
@@ -115,9 +174,9 @@ $('#dimension-switch').bootstrapSwitch('size', 'large');</code></pre>
 
           <pre class="language-javascript"><code>$('#change-color-switch').bootstrapSwitch('onColor', 'success');
 
 $('#change-color-switch').bootstrapSwitch('offColor', 'danger');</code></pre>
 
         </section>
 
-        <section id="animation">
 
+        <section id="animation" class="section">
 
           <div class="page-header">
 
-            <h2><a name="animation" class="anchor" href="#animation">Animation <small>JavaScript</small></a></h2>
 
+            <h3><a name="animation" class="anchor" href="#animation">Animation <small>JavaScript</small></a></h3>
 
           </div>
 
           <input type="checkbox" id="animated-switch" checked data-animated="false">
 
           <br>
 
@@ -131,18 +190,18 @@ $('#animated-switch').bootstrapSwitch('animate', true);
 
 // Disables animation for the selected item
 
 $('#animated-switch').bootstrapSwitch('animate', false);</code></pre>
 
         </section>
 
-        <section id="disabled">
 
+        <section id="disabled" class="section">
 
           <div class="page-header">
 
-            <h2><a name="disabled" class="anchor" href="#disabled">Disabled / Readonly</a></h2>
 
+            <h3><a name="disabled" class="anchor" href="#disabled">Disabled / Readonly</a></h3>
 
           </div>
 
           <input type="checkbox" checked disabled>
 
           <input type="checkbox" checked readonly>
 
           <pre class="language-markup"><code>&lt;input type="checkbox" checked disabled>
 
 &lt;input type="checkbox" checked readonly></code></pre>
 
         </section>
 
-        <section id="text">
 
+        <section id="text" class="section">
 
           <div class="page-header">
 
-            <h2><a name="text" class="anchor" href="#text">Text</a></h2>
 
+            <h3><a name="text" class="anchor" href="#text">Text</a></h3>
 
           </div>
 
           <input type="checkbox" id="label-switch" checked data-on-text="SI" data-off-text="NO">
 
           <br>
 
@@ -153,16 +212,16 @@ $('#animated-switch').bootstrapSwitch('animate', false);</code></pre>
 
           <pre class="language-javascript"><code>$('#label-switch').bootstrapSwitch('onText', 'I');
 
 $('#label-switch').bootstrapSwitch('offText', 'O');</code></pre>
 
         </section>
 
-        <section id="label-text">
 
+        <section id="label-text" class="section">
 
           <div class="page-header">
 
-            <h2><a href="#label-text">Label Text</a></h2>
 
+            <h3><a href="#label-text">Label Text</a></h3>
 
           </div>
 
           <input type="checkbox" checked data-label-text="TV">
 
           <pre class="language-markup"><code>&lt;input type="checkbox" checked data-label-text="TV"></code></pre>
 
         </section>
 
-        <section id="icon-label-text">
 
+        <section id="icon-label-text" class="section">
 
           <div class="page-header">
 
-            <h2><a name="icon-label-text" class="anchor" href="#html-text-label-icon">Icon Label Text</a></h2>
 
+            <h3><a name="icon-label-text" class="anchor" href="#html-text-label-icon">Icon Label Text</a></h3>
 
           </div>
 
 
           Standard <input type="checkbox" checked data-size="large" data-label-text="<span class='glyphicon glyphicon-fullscreen'></span>" data-on-text="<span class='glyphicon glyphicon-ok'></span>" data-off-text="<span class='glyphicon glyphicon-remove'></span>"> &nbsp;&nbsp;
 
@@ -175,25 +234,24 @@ $('#label-switch').bootstrapSwitch('offText', 'O');</code></pre>
 
 &lt;input type="checkbox" checked data-size="large" data-label-text="&lt;span class='fa fa-youtube fa-lg'>&lt;/span>" data-on-text="&lt;span class='fa fa-thumbs-up fa-lg'>&lt;/span>" data-off-text="&lt;span class='fa fa-thumbs-down fa-lg'>&lt;/span>">
 
 &lt;input type="checkbox" data-size="large" checked data-label-text="&lt;span class='fui-video'>&lt;/span>" data-on-text="&lt;span class='fui-check'>&lt;/span>" data-off-text="&lt;span class='fui-cross'>&lt;/span>"></code></pre>
 
         </section>
 
+        <section id="event-handler" class="section">
 
           <div class="page-header">
 
-            <h2><a name="event-handler-javascript" class="anchor" href="#event-handler-javascript">Event Handler <small>JavaScript</small></a></h2>
 
-          </div>
 
-          <div class="bs-docs-example">
 
-            <input type="checkbox" id="switch-change" checked>
 
+            <h3><a name="event-handler" class="anchor" href="#event-handler">Event Handler <small>JavaScript</small></a></h3>
 
           </div>
 
+          <input type="checkbox" id="switch-change" checked>
 
           <pre class="language-javascript"><code>$('#switch-change').on('switchChange', function (e, data) {
 
   var $element = $(data.el),
 
       value = data.value;
 
 
   console.log(e, $element, value);
 
 });</code></pre>
 
+        </section>
 
+        <section id="label-event-handler" class="section">
 
           <div class="page-header">
 
-            <h2><a name="label-event-handler-javascript" class="anchor" href="#label-event-handler-javascript">Label Event Handler <small>JavaScript</small></a></h2>
 
-          </div>
 
-          <div class="bs-docs-example">
 
-            <label id="label-toggle-switch">Click on this Text to change the switch state</label>
 
-            <input type="checkbox" checked class="label-toggle-switch">
 
+            <h3><a name="label-event-handler" class="anchor" href="#label-event-handler">Label Event Handler <small>JavaScript</small></a></h3>
 
           </div>
 
+          <label id="label-toggle-switch">Click on this Text to change the switch state</label>
 
+          <input type="checkbox" checked class="label-toggle-switch">
 
           <pre class="language-markup"><code>&lt;label id="label-toggle-switch">Click on this Text to change the switch state&lt;/label>
 
 &lt;input type="checkbox" checked></code></pre>
 
           <pre class="language-javascript"><code>$('#label-toggle-switch').on('click', function(e, data) {
 
@@ -202,54 +260,54 @@ $('#label-switch').bootstrapSwitch('offText', 'O');</code></pre>
 
 $('.label-toggle-switch').on('switch-change', function (e, data) {
 
     alert(data.value);
 
 });</code></pre>
 
+        </section>
 
+        <section id="state" class="section">
 
           <div class="page-header">
 
-            <h2><a name="toggle-state" class="anchor" href="#toggle-state">Toggle State <small>JavaScript</small></a></h2>
 
-          </div>
 
-          <div class="bs-docs-example">
 
-            <input type="checkbox" id="toggle-state-switch" checked>
 
-            <br>
 
-            <br>
 
-            <div id="toggle-state-switch-button-state" class="btn btn-default">State!</div>
 
-            <div id="toggle-state-switch-button-on" class="btn btn-default">On</div>
 
-            <div id="toggle-state-switch-button" class="btn btn-default">Toggle</div>
 
-            <div id="toggle-state-switch-button-off" class="btn btn-default">Off</div>
 
+            <h3><a name="state" class="anchor" href="#state">State <small>JavaScript</small></a></h3>
 
           </div>
 
+          <input type="checkbox" id="toggle-state-switch" checked>
 
+          <br>
 
+          <br>
 
+          <div id="toggle-state-switch-button-state" class="btn btn-default">State!</div>
 
+          <div id="toggle-state-switch-button-on" class="btn btn-default">On</div>
 
+          <div id="toggle-state-switch-button" class="btn btn-default">Toggle</div>
 
+          <div id="toggle-state-switch-button-off" class="btn btn-default">Off</div>
 
           <pre class="language-javascript"><code>$('#toggle-state-switch').bootstrapSwitch('state'); // true || false
 
 $('#toggle-state-switch').bootstrapSwitch('toggleState');
 
 $('#toggle-state-switch').bootstrapSwitch('state', false); // true || false</code></pre>
 
+        </section>
 
+        <section id="destroy" class="section">
 
           <div class="page-header">
 
-            <h2><a name="destroy" class="anchor" href="#destroy">Destroy <small>JavaScript</small></a></h2>
 
-          </div>
 
-          <div class="bs-docs-example">
 
-            <input type="checkbox" id="destroy-switch" checked >
 
-            <br>
 
-            <br>
 
-            <button id="btn-destroy-switch" class="btn btn-default">Destroy me!</button>
 
+            <h3><a name="destroy" class="anchor" href="#destroy">Destroy <small>JavaScript</small></a></h3>
 
           </div>
 
+          <input type="checkbox" id="destroy-switch" checked>
 
+          <br>
 
+          <br>
 
+          <button id="btn-destroy-switch" class="btn btn-default">Destroy me!</button>
 
           <pre class="language-javascript"><code>$('#destroy-switch').bootstrapSwitch('destroy');</code></pre>
 
+        </section>
 
+        <section id="disable" class="section">
 
           <div class="page-header">
 
-            <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript">Disable / Readonly <small>JavaScript</small></a></h2>
 
-          </div>
 
-          <div class="bs-docs-example">
 
-            <label for="disable-switch">Disable controls</label>
 
-            <input type="checkbox" id="disable-switch" checked>
 
-            <br>
 
-            <br>
 
-            <button id="btn-disable-is" class="btn btn-default">Is disabled?</button>
 
-            <button id="btn-disable-toggle" class="btn btn-default">Toggle Disable</button>
 
-            <button id="btn-disable-set" class="btn btn-default">Set Disable</button>
 
-            <button id="btn-disable-remove" class="btn btn-default">Remove Disable</button>
 
-            <br>
 
-            <br>
 
-            <label for="readonly-switch">Readonly controls</label>
 
-            <input type="checkbox" id="readonly-switch" checked>
 
-            <br>
 
-            <br>
 
-            <button id="btn-readonly-is" class="btn btn-default">Is readonly?</button>
 
-            <button id="btn-readonly-toggle" class="btn btn-default">Toggle readonly</button>
 
-            <button id="btn-readonly-set" class="btn btn-default">Set readonly</button>
 
-            <button id="btn-readonly-remove" class="btn btn-default">Remove readonly</button>
 
+            <h3><a name="disable" class="anchor" href="#disable">Disable / Readonly <small>JavaScript</small></a></h3>
 
           </div>
 
+          <label for="disable-switch">Disable controls</label>
 
+          <input type="checkbox" id="disable-switch" checked>
 
+          <br>
 
+          <br>
 
+          <button id="btn-disable-is" class="btn btn-default">Is disabled?</button>
 
+          <button id="btn-disable-toggle" class="btn btn-default">Toggle Disable</button>
 
+          <button id="btn-disable-set" class="btn btn-default">Set Disable</button>
 
+          <button id="btn-disable-remove" class="btn btn-default">Remove Disable</button>
 
+          <br>
 
+          <br>
 
+          <label for="readonly-switch">Readonly controls</label>
 
+          <input type="checkbox" id="readonly-switch" checked>
 
+          <br>
 
+          <br>
 
+          <button id="btn-readonly-is" class="btn btn-default">Is readonly?</button>
 
+          <button id="btn-readonly-toggle" class="btn btn-default">Toggle readonly</button>
 
+          <button id="btn-readonly-set" class="btn btn-default">Set readonly</button>
 
+          <button id="btn-readonly-remove" class="btn btn-default">Remove readonly</button>
 
           <pre class="language-javascript"><code>$('#disable-switch').bootstrapSwitch('disabled');
 
 $('#disable-switch').bootstrapSwitch('toggleDisabled');
 
 $('#disable-switch').bootstrapSwitch('disabled', true);  // true || false
 
@@ -257,18 +315,18 @@ $('#disable-switch').bootstrapSwitch('disabled', true);  // true || false
 
 $('#readonly-switch').bootstrapSwitch('readonly');
 
 $('#readonly-switch').bootstrapSwitch('toggleReadonly');
 
 $('#readonly-switch').bootstrapSwitch('readonly', true);  // true || false</code></pre>
 
+        </section>
 
+        <section id="radio" class="section">
 
           <div class="page-header">
 
-            <h2><a name="radio-javascript" class="anchor" href="#radio-javascript">Radio <small>JavaScript</small></a></h2>
 
+            <h3><a name="radio" class="anchor" href="#radio">Radio <small>JavaScript</small></a></h3>
 
           </div>
 
-          <div class="bs-docs-example">
 
-            <div class="form-group">
 
-              <label for="option1">Option 1</label>
 
-              <input id="option1" type="radio" name="radio1" value="option1" class="radio1 radio-no-uncheck"> &nbsp;&nbsp;
 
-              <label for="option2">Option 2</label>
 
-              <input id="option2" type="radio" name="radio1" value="option2" class="radio1 radio-no-uncheck"> &nbsp;&nbsp;
 
-              <label for="option3">Option 3</label>
 
-              <input id="option3" type="radio" name="radio1" value="option3" class="radio1 radio-no-uncheck">
 
-            </div>
 
+          <div class="form-group">
 
+            <label for="option1">Option 1</label>
 
+            <input id="option1" type="radio" name="radio1" value="option1"> &nbsp;&nbsp;
 
+            <label for="option2">Option 2</label>
 
+            <input id="option2" type="radio" name="radio1" value="option2"> &nbsp;&nbsp;
 
+            <label for="option3">Option 3</label>
 
+            <input id="option3" type="radio" name="radio1" value="option3">
 
           </div>
 
           <pre class="language-markup"><code>&lt;div class="form-group">
 
   &lt;label for="option1">Option 1&lt;/label>
 
@@ -278,50 +336,28 @@ $('#readonly-switch').bootstrapSwitch('readonly', true);  // true || false</code
 
   &lt;label for="option3">Option 3&lt;/label>
 
   &lt;input id="option3" type="radio" name="radio1" value="option3">
 
 &lt;/div></code></pre>
 
+        </section>
 
+        <section id="form" class="section">
 
           <div class="page-header">
 
-            <h2><a name="radio-javascript-allow-uncheck" class="anchor" href="#radio-javascript-allow-uncheck">Radio + uncheck <small>JavaScript</small></a></h2>
 
+            <h3><a name="form" class="anchor" href="#form">Form</a></h3>
 
           </div>
 
-          <div class="bs-docs-example">
 
+          <form class="clearfix" role="form">
 
             <div class="form-group">
 
-              <label for="option11">Option 1</label>
 
-              <input id="option11" type="radio" name="radio2" value="option11" class="radio2">
 
-              <label for="option12">Option 2</label>
 
-              <input id="option12" type="radio" name="radio2" value="option12" checked="checked" class="radio2">
 
-              <label for="option13">Option 3</label>
 
-              <input id="option13" type="radio" name="radio2" value="option13" class="radio2">
 
+              <label class="control-label" for="inputEmail">Email</label>
 
+              <input type="text" id="inputEmail" placeholder="Email" class="form-control">
 
             </div>
 
-          </div>
 
-          <pre class="language-markup"><code>&lt;div class="form-group">
 
-  &lt;label for="option11">Option 1&lt;/label>
 
-  &lt;input id="option11" type="radio" name="radio2" value="option1">
 
-  &lt;label for="option12">Option 2&lt;/label>
 
-  &lt;input id="option12" type="radio" name="radio2" value="option2" checked="checked">
 
-  &lt;label for="option13">Option 3&lt;/label>
 
-  &lt;input id="option13" type="radio" name="radio2" value="option3">
 
-&lt;/div></code></pre>
 
-          <div class="page-header">
 
-            <h2><a name="form" class="anchor" href="#form">Form</a></h2>
 
-          </div>
 
-          <div class="bs-docs-example">
 
-            <form class="clearfix" role="form">
 
-              <div class="form-group">
 
-                <label class="control-label" for="inputEmail">Email</label>
 
-                <input type="text" id="inputEmail" placeholder="Email" class="form-control">
 
-              </div>
 
-              <div class="form-group">
 
-                <label class="control-label" for="notification1">Notification 1</label>
 
-                <input id="notification1" type="checkbox">
 
-              </div>
 
-              <div class="form-group">
 
-                <label class="control-label" for="notification2">Notification 2</label>
 
-                <input id="notification2" type="checkbox">
 
-              </div>
 
-              <div class="form-actions">
 
-                <button type="reset" class="btn btn-default btn-warning">Reset</button>
 
-              </div>
 
-            </form>
 
-            <div ></div>
 
-          </div>
 
+            <div class="form-group">
 
+              <label class="control-label" for="notification1">Notification 1</label>
 
+              <input id="notification1" type="checkbox">
 
+            </div>
 
+            <div class="form-group">
 
+              <label class="control-label" for="notification2">Notification 2</label>
 
+              <input id="notification2" type="checkbox">
 
+            </div>
 
+            <div class="form-actions">
 
+              <button type="reset" class="btn btn-default btn-warning">Reset</button>
 
+            </div>
 
+          </form>
 
           <pre class="language-markup"><code>&lt;form class="form-horizontal">
 
   &lt;div class="form-group">
 
     &lt;label class="control-label" for="inputEmail">Email&lt;/label>
 
@@ -339,17 +375,18 @@ $('#readonly-switch').bootstrapSwitch('readonly', true);  // true || false</code
 
     &lt;button type="reset" class="btn btn-inverse">Reset&lt;/button>
 
   &lt;/div>
 
 &lt;/form></code></pre>
 
-        <div class="page-header">
 
-          <h2><a name="modal" class="anchor" href="#modal">Modal</a></h2>
 
-        </div>
 
-        <div class="bs-docs-example">
 
+        </section>
 
+        <section id="modal" class="section">
 
+          <div class="page-header">
 
+            <h3><a name="modal" class="anchor" href="#modal">Modal</a></h3>
 
+          </div>
 
           <a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>
 
-        </div>
 
-        <pre class="language-markup"><code>&lt;a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal&lt;/a>
 
+          <pre class="language-markup"><code>&lt;a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal&lt;/a>
 
 
 &lt;div class="modal-body">
 
   &lt;input type="checkbox" checked>
 
 &lt;/div></code></pre>
 
+        </section>
 
         <footer class="footer">
 
           <p>&copy; by <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/SpiritualGuru">@SpiritualGuru</a>), <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> and <a href="http://www.lostcrew.it/" target="_blank">Emanuele Marchi</a></p>
 
         </footer>
 
@@ -375,7 +412,7 @@ $('#readonly-switch').bootstrapSwitch('readonly', true);  // true || false</code
 
   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 
   <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 
   <script src="build/js/bootstrap-switch.js"></script>
 
-  <script src="docs/vendor/prism.js"></script>
 
+  <script src="docs/lib/prism.js"></script>
 
   <script src="docs/index.js"></script>
 
   </body>
 
 </html>