浏览代码

change "<br>" to "<br />"

change "<br>" to "<br />"
Stein, Peter 11 年之前
父节点
当前提交
757a68cbe2
共有 1 个文件被更改,包括 146 次插入88 次删除
  1. 146 88
      examples/index.html

+ 146 - 88
examples/index.html

@@ -2,17 +2,23 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>Bootstrap switch - by Mattia Larentis, enhanced by BdMdesigN aka Peter Stein</title>
+    <title>Bootstrap switch - by Mattia Larentis, enhanced by Peter Stein aka BdMdesigN</title>
+        <meta name="description" content="Switches for radio buttons and checkboxes">
     <meta name="author" content="Mattia Larentis">
     <meta name="subauthor" content="Peter Stein">
     <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
 
-    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
-    <link rel="stylesheet" href="../static/stylesheets/bootstrap-switch.css">
-    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css">
-    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/docs.css">
-
-    <style>
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
+    <link rel="stylesheet" href="static/stylesheets/bootstrap-switch.css" />
+    <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/docs.css" />
+    <link rel="stylesheet" href="static/stylesheets/styles.css" />
+
+        <style type="text/css">
+            body {
+                padding-top: 60px;
+                padding-bottom: 40px;
+              }
         .span4, h1 {
             text-align: center;
         }
@@ -24,41 +30,81 @@
         h3 {
             margin-top: 20px;
         }
-    </style>
+        </style>
+        <!-- TODO: make sure bootstrap-responsive.min.css points to BootTheme
+        generated file -->
+        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css"
+        rel="stylesheet">
+        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
+        <!--[if lt IE 9]>
+            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+        <![endif]-->
+        <!-- Fav and touch icons -->
 </head>
-<body style="padding-top: 50px;">
-
-<a href="https://github.com/nostalgiaz/bootstrap-switch"><img
-    style="position: absolute; top: 0; right: 0; border: 0;"
-    src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
-    alt="Fork me on GitHub"></a>
+    
+    <body>
+        <div class="navbar navbar-fixed-top">
+            <div class="navbar-inner">
+            <a href="https://github.com/nostalgiaz/bootstrap-switch"><img
+            style="position: absolute; top: 0; right: 0; border: 0;"
+            src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
+            alt="Fork me on GitHub"></a>
+
+                <div class="row-fluid" style="margin-top:10px;">
+                    <div class="span12">
+                        <h1>Bootstrap switch<small> - by <a href="http://larentis.eu">Mattia Larentis</a> <a href="https://twitter.com/spiritualguru">(@SpiritualGuru)</a></small></h1>
+                    </div>
+                </div>
 
-<div class="container">
+                <div class="row-fluid">
+                    <div class="span8 offset2" style="text-align: center;">
+                        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true"
+                        allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
+                        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true"
+                        allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
+                        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&type=follow&count=true"
+                        allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
+                    </div>
+                </div>
 
-    <div class="row-fluid">
-        <div class="span12">
-            <h1>Bootstrap switch
-                <small>- by <a href="http://larentis.eu">Mattia Larentis</a> <a href="https://twitter.com/spiritualguru">(@SpiritualGuru)</a>
-                </small>
-            </h1>
+                <div class="container-fluid">
+                      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+                      </a>
+
+                      <div class="nav-collapse collapse">
+                          <p class="navbar-text pull-right" style="padding-right:15px;">Downloads:
+                              <a href="https://github.com/nostalgiaz/bootstrap-switch/zipball/master" class="navbar-link">ZIP</a>
+                              <a href="https://github.com/nostalgiaz/bootstrap-switch/tarball/master" class="navbar-link">TAR</a>
+                          </p>
+                          <ul class="nav nav-links">
+                              <li>
+                                  <a href="./index.html">Home</a>
+                              </li>
+                              <li class="active">
+                                  <a href="./examples.html">Demos</a>
+                              </li>
+                          </ul>
+                      </div>
+                      <!--/.nav-collapse -->
+                </div>
+            </div>
         </div>
-    </div>
 
-    <div class="row-fluid">
-        <div class="span8 offset2" style="text-align: center;">
-            <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true"
-                    allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-            <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true"
-                    allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-            <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&type=follow&count=true"
-                    allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-        </div>
-    </div>
+        <div id="nav-content-container">
+            <div class="container">
 
+                <div class="wrapper">
+                    <nav>
+                        <ul></ul>
+                    </nav>
+                    <section>
+
+                        <h2><a name="size" class="anchor" href="#size"><span class="octicon octicon-link"></span></a>Size</h2>
     <!-- SIZE -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Size</h3>
             <div class="bs-docs-example">
                 <div class="make-switch switch-large">
                     <input type="checkbox" checked />
@@ -75,12 +121,14 @@
                 <div class="make-switch switch-mini">
                     <input type="checkbox" checked />
                 </div>
-                <br>
-                <br>
+                <br />
+                <br />
                 <label>Dimensions can be changed too:</label>
                 <div id="dimension-switch" class="make-switch">
                     <input type="checkbox" checked />
                 </div>
+                <br />
+                <br />
                 <button id="btn-size-large-switch" class="btn">Large</button>
                 <button id="btn-size-regular-switch" class="btn">Regular</button>
                 <button id="btn-size-small-switch" class="btn">Small</button>
@@ -116,10 +164,10 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');   // Set
         </div>
     </div>
 
+                        <h2><a name="colors" class="anchor" href="#colors"><span class="octicon octicon-link"></span></a>Colors</h2>
     <!-- COLORS -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Colors <small>javascript</small></h3>
             <div class="bs-docs-example">
                 <div class="make-switch" data-on="primary" data-off="info">
                     <input type="checkbox" checked />
@@ -139,14 +187,14 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');   // Set
                 <div class="make-switch" data-on="default" data-off="primary">
                     <input type="checkbox" checked />
                 </div>
-                <br>
-                <br>
+                <br />
+                <br />
                 <label for="change-color-switch">Colors can be changed too</label>
                 <div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
                     <input type="checkbox" checked />
                 </div>
-                <br>
-                <br>
+                <br />
+                <br />
                 <button id="btn-color-on-switch" class="btn">
                     Change "On" color
                 </button>
@@ -192,17 +240,16 @@ $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
         </div>
     </div>
 
+                        <h2><a name="animation" class="anchor" href="#animation"><span class="octicon octicon-link"></span></a>Animation <small>javascript</small></h2>
     <!-- ANIMATION -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Animation <small>javascript</small></h3>
-
             <div class="bs-docs-example">
                 <div id="animated-switch" class="make-switch" data-animated="false">
                     <input type="checkbox" checked />
                 </div>
-                <br>
-                <br>
+                <br />
+                <br />
                 <button id="btn-animate-switch" class="btn">
                     Animate
                 </button>
@@ -223,11 +270,10 @@ $('#animated-switch').bootstrapSwitch('setAnimated', false);    // Disables anim
         </div>
     </div>
 
+                        <h2><a name="disabled" class="anchor" href="#disabled"><span class="octicon octicon-link"></span></a>Disabled</h2>
     <!-- DISABLED -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Disabled</h3>
-
             <div class="bs-docs-example">
                 <div class="make-switch">
                     <input type="checkbox" checked disabled />
@@ -241,17 +287,16 @@ $('#animated-switch').bootstrapSwitch('setAnimated', false);    // Disables anim
         </div>
     </div>
 
+                        <h2><a name="text" class="anchor" href="#text"><span class="octicon octicon-link"></span></a>Text</h2>
     <!-- TEXT -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Text</h3>
-
             <div class="bs-docs-example">
                 <div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
                     <input type="checkbox" checked />
                 </div>
-                <br>
-                <br>
+                <br />
+                <br />
                 <button id="btn-label-on-switch" class="btn">
                     Change "On" label
                 </button>
@@ -271,11 +316,10 @@ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
         </div>
     </div>
 
+                        <h2><a name="html-text" class="anchor" href="#html-text"><span class="octicon octicon-link"></span></a>HTML text</h2>
     <!-- HTML TEXT -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>HTML text</h3>
-
             <div class="bs-docs-example">
                 <div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
                     <input type="checkbox" checked />
@@ -289,11 +333,10 @@ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
         </div>
     </div>
 
+                        <h2><a name="html-text-mini-switch" class="anchor" href="#html-text-mini-switch"><span class="octicon octicon-link"></span></a>HTML text (mini-switch)</h2>
     <!-- HTML TEXT MINI SWITCH -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>HTML text (mini-switch)</h3>
-
             <div class="bs-docs-example">
                 <div class="make-switch switch-mini" data-on-label="<i class='switch-mini-icons icon-ok icon-white'></i>" data-off-label="<i class='switch-mini-icons icon-remove'></i>">
                     <input type="checkbox" checked />
@@ -307,11 +350,10 @@ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
         </div>
     </div>
 
+                        <h2><a name="event-handler" class="anchor" href="#event-handler"><span class="octicon octicon-link"></span></a>Event handler <small>javascript</small></h2>
     <!-- EVENT HANDLER -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Event handler <small>javascript</small></h3>
-
             <div class="bs-docs-example">
                 <div id="mySwitch" class="make-switch">
                     <input type="checkbox" checked />
@@ -327,17 +369,16 @@ $('#mySwitch').on('switch-change', function (e, data) {
         </div>
     </div>
 
+                        <h2><a name="toggle-state " class="anchor" href="#toggle-state"><span class="octicon octicon-link"></span></a>Toggle State <small>javascript</small></h2>
     <!-- TOGGLE -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Toggle State <small>javascript</small></h3>
-
             <div class="bs-docs-example">
                 <div id="toggle-state-switch" class="make-switch">
                     <input type="checkbox" checked />
                 </div>
-                <br>
-                <br>
+                <br />
+                <br />
                 <div id="toggle-state-switch-button-status" class="btn btn-primary">Status!</div>
                 <div id="toggle-state-switch-button-on" class="btn btn-primary">ON!</div>
                 <div id="toggle-state-switch-button" class="btn btn-primary">Toggle me!</div>
@@ -351,17 +392,16 @@ $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
         </div>
     </div>
 
+                        <h2><a name="destroy" class="anchor" href="#destroy"><span class="octicon octicon-link"></span></a>Destroy <small>javascript</small></h2>
     <!-- DESTROY -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Destroy <small>javascript</small></h3>
-
             <div class="bs-docs-example">
                 <div id="destroy-switch" class="make-switch">
                     <input type="checkbox" checked />
                 </div>
-                <br>
-                <br>
+                <br />
+                <br />
                 <button id="btn-destroy-switch" class="btn btn-danger">
                     Destroy me!
                 </button>
@@ -372,14 +412,14 @@ $('#destroy-switch').bootstrapSwitch('destroy');
         </div>
     </div>
 
+                        <h2><a name="create" class="anchor" href="#create"><span class="octicon octicon-link"></span></a>Create <small>javascript</small></h2>
     <!-- CREATE -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Create <small>javascript</small></h3>
             <div class="bs-docs-example">
                 <input id="create-switch" type="checkbox" checked />
-                <br>
-                <br>
+                <br />
+                <br />
                 <div id="btn-create" class="btn">Create</div>
             </div>
             <pre class="prettyprint linenums">
@@ -388,18 +428,17 @@ $('#create-switch').wrap('&lt;div class="make-switch" />').parent().bootstrapSwi
         </div>
     </div>
 
+                        <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript"><span class="octicon octicon-link"></span></a>Disabled <small>javascript</small></h2>
     <!-- DISABLED -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Disabled <small>javascript</small></h3>
-
             <div class="bs-docs-example">
                 <label for="disable-switch-input">amazing label</label>
                 <div id="disable-switch" class="make-switch">
                     <input id="disable-switch-input" type="checkbox" checked />
                 </div>
-                <br>
-                <br>
+                <br />
+                <br />
                 <button id="btn-is-active-switch" class="btn">
                     Is active?
                 </button>
@@ -421,11 +460,10 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
         </div>
     </div>
 
+                        <h2><a name="radio-javascript" class="anchor" href="#radio-javascript"><span class="octicon octicon-link"></span></a>Radio <small>javascript</small></h2>
     <!-- RADIO -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Radio <small>javascript</small></h3>
-
             <div class="bs-docs-example">
                 <div class="control-group">
                      <div class="controls">
@@ -480,11 +518,10 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
         </div>
     </div>
 
+                        <h2><a name="radio-javascript-allow-uncheck" class="anchor" href="#radio-javascript-allow-uncheck"><span class="octicon octicon-link"></span></a>Radio <small>javascript (allow radios uncheck)</small></h2>
     <!-- RADIO ALLOW UNCHECK -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Radio <small>javascript (allow radios uncheck)</small></h3>
-
             <div class="bs-docs-example">
                 <div class="control-group">
                      <div class="controls">
@@ -531,11 +568,10 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
         </div>
     </div>
 
+                        <h2><a name="form" class="anchor" href="#form"><span class="octicon octicon-link"></span></a>Form <small>- try to use tab, space and reset button</small></h2>
     <!-- FORM -->
     <div class="row-fluid">
         <div class="span12">
-            <h3>Form <small>- try to use tab, space and reset button</small></h3>
-
             <div class="bs-docs-example">
                 <form class="form-horizontal span8 offset2">
                     <div class="control-group">
@@ -603,11 +639,10 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
         </div>
     </div>
 
+                        <h2><a name="modal" class="anchor" href="#modal"><span class="octicon octicon-link"></span></a>Modal</h2>
     <!-- MODAL -->
     <div class="row-fluid">
     <div class="span12">
-        <h3>Modal</h3>
-
         <div class="bs-docs-example">
             <a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
         </div>
@@ -621,11 +656,6 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
 &lt;/div></pre>
     </div>
 </div>
-
-<p class="pull-right">
-    <a href="https://twitter.com/SpiritualGuru">follow me</a> -
-    <a href="http://www.larentis.eu">my site</a>
-</p>
 </div>
 
 <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
@@ -644,9 +674,6 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
 </div>
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
-<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
-<script src="../static/js/bootstrap-switch.js"></script>
 
 <script>
 $(document).ready(function() {
@@ -744,6 +771,37 @@ $(document).ready(function() {
 
 });
 </script>
+                    </section>
+                </div>
+            </div>
+
+        </div>
+
+        <footer>
+            <div class="navbar navbar-fixed-bottom" style="height:30px;">
+
+                <div class="navbar-inner">
+                    <div class="container-fluid">
+                        <p style="float:left; padding-top: 5px;">
+                            &copy; by 
+                        
+                        Mattia Larentis 2012 - 2013, enhanced by Peter Stein (BdMdesigN) 
+                            <i class="icon-asterisk"> </i> design by BdMdesigN
+                        </p>
+                        <p class="pull-right" style="padding-top: 5px;">
+                            <a href="https://twitter.com/SpiritualGuru">follow me</a> -
+                            <a href="http://www.larentis.eu">my site</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+        <script src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
+        <script src="static/js/bootstrap-switch.js"></script>
+        <script src="static/js/main.js"></script>
+  </body>
 
-</body>
 </html>