|
|
@@ -0,0 +1,959 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <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://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" />
|
|
|
+ <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
|
|
|
+ <link rel="stylesheet" href="static/stylesheets/flat-ui-fonts.css">
|
|
|
+
|
|
|
+ <style type="text/css">
|
|
|
+ body {
|
|
|
+ padding-top: 60px;
|
|
|
+ padding-bottom: 40px;
|
|
|
+ }
|
|
|
+ .span4, h1 {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ </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>
|
|
|
+ <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="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="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 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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div class="make-switch switch-large">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="make-switch switch-small">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="make-switch switch-mini">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <label>Dimensions can be changed too:</label>
|
|
|
+ <div id="dimension-switch" class="make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button id="btn-size-large-switch" class="btn">Large</button>
|
|
|
+ <button id="btn-size-regular-switch" class="btn">Regular</button>
|
|
|
+ <button id="btn-size-small-switch" class="btn">Small</button>
|
|
|
+ <button id="btn-size-mini-switch" class="btn">Mini</button>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="make-switch switch-large">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="make-switch switch-small">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="make-switch switch-mini">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="dimension-switch" class="make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+$('#dimension-switch').bootstrapSwitch('setSizeClass', ''); // Resets to the regular style
|
|
|
+$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini'); // Sets a mini switch
|
|
|
+$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small'); // Sets a small switch
|
|
|
+$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large'); // Sets a large switch
|
|
|
+ </pre>
|
|
|
+ </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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div class="make-switch" data-on="primary" data-off="info">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <div class="make-switch" data-on="info" data-off="success">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <div class="make-switch" data-on="success" data-off="warning">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <div class="make-switch" data-on="warning" data-off="danger">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <div class="make-switch" data-on="danger" data-off="default">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <div class="make-switch" data-on="default" data-off="primary">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <label for="change-color-switch">Colors can be changed too</label>
|
|
|
+ <div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button id="btn-color-on-switch" class="btn">
|
|
|
+ Change "On" color
|
|
|
+ </button>
|
|
|
+ <button id="btn-color-off-switch" class="btn">
|
|
|
+ Change "Off" color
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="make-switch" data-on="primary" data-off="info">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="make-switch" data-on="info" data-off="success">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="make-switch" data-on="success" data-off="warning">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="make-switch" data-on="warning" data-off="danger">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="make-switch" data-on="danger" data-off="default">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="make-switch" data-on="default" data-off="primary">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
|
|
|
+$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
|
|
|
+ </pre>
|
|
|
+ </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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div id="animated-switch" class="make-switch" data-animated="false">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button id="btn-animate-switch" class="btn">
|
|
|
+ Animate
|
|
|
+ </button>
|
|
|
+ <button id="btn-dont-animate-switch" class="btn">
|
|
|
+ Don't animate
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div id="animated-switch" class="make-switch" data-animated="false">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+$('#animated-switch').bootstrapSwitch('setAnimated', true); // Enables animation for the selected item
|
|
|
+$('#animated-switch').bootstrapSwitch('setAnimated', false); // Disables animation for the selected item
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div class="make-switch">
|
|
|
+ <input type="checkbox" checked disabled />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="make-switch">
|
|
|
+ <input type="checkbox" checked disabled />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+ </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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button id="btn-label-on-switch" class="btn">
|
|
|
+ Change "On" label
|
|
|
+ </button>
|
|
|
+ <button id="btn-label-off-switch" class="btn">
|
|
|
+ Change "Off" label
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
|
|
|
+$('#label-switch').bootstrapSwitch('setOffLabel', 'O');
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="label-text" class="anchor" href="#label-text"><span class="octicon octicon-link"></span></a>Label Text</h2>
|
|
|
+ <!-- LABEL TEXT -->
|
|
|
+ <div class="row-fluid">
|
|
|
+ <div class="span12">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div class="make-switch" data-text-label="My TV">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="make-switch" data-text-label="My TV">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+ </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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="html-text-label-icon" class="anchor" href="#html-text-label-icon"><span class="octicon octicon-link"></span></a>HTML text Label Icon</h2>
|
|
|
+ <!-- HTML TEXT LABEL ICON STANDARD -->
|
|
|
+ <div class="row-fluid">
|
|
|
+ <div class="span12">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <h3>Standard</h3>
|
|
|
+ <div class="make-switch switch-large" data-label-icon="icon-fullscreen" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <!-- HTML TEXT LABEL ICON FONT AWESOME -->
|
|
|
+ <h3>Font Awesome</h3>
|
|
|
+ <div class="make-switch switch-large" data-label-icon="icon-youtube icon-large" data-on-label="<i class='icon-thumbs-up icon-white'></i>" data-off-label="<i class='icon-thumbs-down'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <!-- HTML TEXT LABEL ICON FLAT UI -->
|
|
|
+ <h3>Flat UI</h3>
|
|
|
+ <div class="make-switch" data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- HTML TEXT LABEL ICON STANDARD -->
|
|
|
+ <h3>Standard</h3>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="make-switch switch-large" data-label-icon="icon-fullscreen" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+ <!-- HTML TEXT LABEL ICON FONT AWESOME -->
|
|
|
+ <h3>Font Awesome</h3>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="make-switch switch-large" data-label-icon="icon-youtube icon-large" data-on-label="<i class='icon-thumbs-up icon-white'></i>" data-off-label="<i class='icon-thumbs-down'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+ <!-- HTML TEXT LABEL ICON FLAT UI -->
|
|
|
+ <h3>Flat UI</h3>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="make-switch" data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+ </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 STANDARD -->
|
|
|
+ <div class="row-fluid">
|
|
|
+ <div class="span12">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <h3>Standard</h3>
|
|
|
+ <div class="make-switch switch-mini" data-on-label="<i class='switch-mini-icons icon-ok icon-white'></i>" data-off-label="<i class='switch-mini-icons icon-remove'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <!-- HTML TEXT MINI SWITCH FONT AWESOME -->
|
|
|
+ <h3>Font Awesome</h3>
|
|
|
+ <div class="make-switch switch-mini" data-on-label="<i class='switch-mini-font-icons icon-thumbs-up icon-white'></i>" data-off-label="<i class='switch-mini-font-icons icon-thumbs-down'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <!-- HTML TEXT MINI SWITCH FLAT UI -->
|
|
|
+ <h3>Flat UI</h3>
|
|
|
+ <div class="make-switch switch-mini" data-on-label="<i class='switch-mini-font-icons fui-check icon-white'></i>" data-off-label="<i class='switch-mini-font-icons fui-cross'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <h3>Standard</h3>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="make-switch switch-mini" data-on-label="<i class='switch-mini-icons icon-ok icon-white'></i>" data-off-label="<i class='switch-mini-icons icon-remove'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+ <!-- HTML TEXT MINI SWITCH FONT AWESOME -->
|
|
|
+ <h3>Font Awesome</h3>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="make-switch switch-mini" data-on-label="<i class='switch-mini-font-icons icon-thumbs-up icon-white'></i>" data-off-label="<i class='switch-mini-font-icons icon-thumbs-down'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+ <!-- HTML TEXT MINI SWITCH FLAT UI -->
|
|
|
+ <h3>Flat UI</h3>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="make-switch switch-mini" data-on-label="<i class='switch-mini-font-icons fui-check icon-white'></i>" data-off-label="<i class='switch-mini-font-icons fui-cross'></i>">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+</div>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="event-handler-javascript" class="anchor" href="#event-handler-javascript"><span class="octicon octicon-link"></span></a>Event handler <small>javascript</small></h2>
|
|
|
+ <!-- EVENT HANDLER -->
|
|
|
+ <div class="row-fluid">
|
|
|
+ <div class="span12">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div id="mySwitch" class="make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+$('#mySwitch').on('switch-change', function (e, data) {
|
|
|
+ var $el = $(data.el)
|
|
|
+ , value = data.value;
|
|
|
+ console.log(e, $el, value);
|
|
|
+});
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="label-event-handler-javascript" class="anchor" href="#label-event-handler-javascript"><span class="octicon octicon-link"></span></a>Label Event handler <small>javascript</small></h2>
|
|
|
+ <!-- LABEL EVENT HANDLER -->
|
|
|
+ <div class="row-fluid">
|
|
|
+ <div class="span12">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <h3>Label 1</h3>
|
|
|
+ <label id="label-toggle-switch">Click on this Text to change the switch state</label>
|
|
|
+ <div class="label-toggle-switch make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <h3>Label 2</h3>
|
|
|
+ <div id="label2-toggle-switch">
|
|
|
+ <label class="label-change-switch">Click on this Text to change the switch state
|
|
|
+ <div class="label2-toggle-switch make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <h3>Label 1</h3>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<label id="label-toggle-switch">Click on this Text to change the switch state</label>
|
|
|
+ <div class="label-toggle-switch make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+<script>
|
|
|
+ $(document).ready(function() {
|
|
|
+ $('#label-toggle-switch').on('click', function(e, data) {
|
|
|
+ $('.label-toggle-switch').bootstrapSwitch('toggleState');
|
|
|
+ });
|
|
|
+ $('.label-toggle-switch').on('switch-change', function (e, data) {
|
|
|
+ alert(data.value);
|
|
|
+ });
|
|
|
+ });
|
|
|
+</script>
|
|
|
+ </pre>
|
|
|
+ <h3>Label 2</h3>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div id="label2-toggle-switch">
|
|
|
+ <label class="label-change-switch">Click on this Text to change the switch state
|
|
|
+ <div class="label2-toggle-switch make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ </label>
|
|
|
+</div>
|
|
|
+<script>
|
|
|
+ $(document).ready(function() {
|
|
|
+ $('#label2-toggle-switch').on('switch-change', function(e, data) {
|
|
|
+ alert(data.value);
|
|
|
+ });
|
|
|
+ });
|
|
|
+</script>
|
|
|
+ </pre>
|
|
|
+ </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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div id="toggle-state-switch" class="make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <div id="toggle-state-switch-button-status" class="btn btn-primary">Status!</div>
|
|
|
+ <div id="toggle-state-switch-button-on" class="btn btn-primary">ON!</div>
|
|
|
+ <div id="toggle-state-switch-button" class="btn btn-primary">Toggle me!</div>
|
|
|
+ <div id="toggle-state-switch-button-off" class="btn btn-primary">OFF!</div>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+$('#toggle-state-switch').bootstrapSwitch('status'); // true || false
|
|
|
+$('#toggle-state-switch').bootstrapSwitch('toggleState');
|
|
|
+$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div id="destroy-switch" class="make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button id="btn-destroy-switch" class="btn btn-danger">
|
|
|
+ Destroy me!
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+$('#destroy-switch').bootstrapSwitch('destroy');</pre>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+ <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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <input id="create-switch" type="checkbox" checked />
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <div id="btn-create" class="btn">Create</div>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+$('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();
|
|
|
+ </pre>
|
|
|
+ </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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <label for="disable-switch-input">amazing label</label>
|
|
|
+ <div id="disable-switch" class="make-switch">
|
|
|
+ <input id="disable-switch-input" type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <button id="btn-is-active-switch" class="btn">
|
|
|
+ Is active?
|
|
|
+ </button>
|
|
|
+ <button id="btn-toggle-activation-switch" class="btn">
|
|
|
+ Toggle activation!
|
|
|
+ </button>
|
|
|
+ <button id="btn-disable-switch" class="btn">
|
|
|
+ Disable!
|
|
|
+ </button>
|
|
|
+ <button id="btn-activate-switch" class="btn">
|
|
|
+ Activate!
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+$('#disable-switch').bootstrapSwitch('isActive');
|
|
|
+$('#disable-switch').bootstrapSwitch('toggleActivation');
|
|
|
+$('#disable-switch').bootstrapSwitch('setActive', false); // true || false
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div class="control-group">
|
|
|
+ <div class="controls">
|
|
|
+ <label class="control-label" for="option1">Option 1</label>
|
|
|
+ <div id="option1" class="make-switch radio1 radio-no-uncheck">
|
|
|
+ <input type="radio" name="radio1" value="option1" />
|
|
|
+ </div>
|
|
|
+ <label class="control-label" for="option2">Option 2</label>
|
|
|
+ <div id="option2" class="make-switch radio1 radio-no-uncheck">
|
|
|
+ <input type="radio" name="radio1" value="option2" />
|
|
|
+ </div>
|
|
|
+ <label class="control-label" for="option3">Option 3</label>
|
|
|
+ <div id="option3" class="make-switch radio1 radio-no-uncheck">
|
|
|
+ <input type="radio" name="radio1" value="option3" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="control-group">
|
|
|
+ <div class="controls">
|
|
|
+ <label class="control-label" for="option1">Option 1</label>
|
|
|
+ <div id="option1" class="make-switch radio1 radio-no-uncheck">
|
|
|
+ <input type="radio" name="radio1" value="option1" />
|
|
|
+ </div>
|
|
|
+ <label class="control-label" for="option2">Option 2</label>
|
|
|
+ <div id="option2" class="make-switch radio1 radio-no-uncheck">
|
|
|
+ <input type="radio" name="radio1" value="option2" />
|
|
|
+ </div>
|
|
|
+ <label class="control-label" for="option3">Option 3</label>
|
|
|
+ <div id="option3" class="make-switch radio1 radio-no-uncheck">
|
|
|
+ <input type="radio" name="radio1" value="option3" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script>
|
|
|
+ $(document).ready(function() {
|
|
|
+ $('.radio1').on('switch-change', function () {
|
|
|
+ $('.radio1').bootstrapSwitch('toggleRadioState');
|
|
|
+ });
|
|
|
+// or
|
|
|
+ $('.radio1').on('switch-change', function () {
|
|
|
+ $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
|
|
|
+ });
|
|
|
+// or
|
|
|
+ $('.radio1').on('switch-change', function () {
|
|
|
+ $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
|
|
|
+ });
|
|
|
+ });
|
|
|
+</script>
|
|
|
+ </pre>
|
|
|
+ </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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <div class="control-group">
|
|
|
+ <div class="controls">
|
|
|
+ <label class="control-label" for="option1">Option 1</label>
|
|
|
+ <div id="option1" class="make-switch radio2">
|
|
|
+ <input type="radio" name="radio2" value="option1" />
|
|
|
+ </div>
|
|
|
+ <label class="control-label" for="option2">Option 2</label>
|
|
|
+ <div id="option2" class="make-switch radio2">
|
|
|
+ <input type="radio" name="radio2" value="option2" checked="checked" />
|
|
|
+ </div>
|
|
|
+ <label class="control-label" for="option3">Option 3</label>
|
|
|
+ <div id="option3" class="make-switch radio2">
|
|
|
+ <input type="radio" name="radio2" value="option3" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<div class="control-group">
|
|
|
+ <div class="controls">
|
|
|
+ <label class="control-label" for="option1">Option 1</label>
|
|
|
+ <div id="option1" class="make-switch radio2">
|
|
|
+ <input type="radio" name="radio2" value="option1" />
|
|
|
+ </div>
|
|
|
+ <label class="control-label" for="option2">Option 2</label>
|
|
|
+ <div id="option2" class="make-switch radio2">
|
|
|
+ <input type="radio" name="radio2" value="option2" checked="checked" />
|
|
|
+ </div>
|
|
|
+ <label class="control-label" for="option3">Option 3</label>
|
|
|
+ <div id="option3" class="make-switch radio2">
|
|
|
+ <input type="radio" name="radio2" value="option3" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script>
|
|
|
+ $(document).ready(function() {
|
|
|
+ $('.radio2').on('switch-change', function () {
|
|
|
+ $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
|
|
|
+ });
|
|
|
+ });
|
|
|
+</script>
|
|
|
+ </pre>
|
|
|
+ </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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <form class="form-horizontal span8 offset2">
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label" for="inputEmail">Email</label>
|
|
|
+ <div class="controls">
|
|
|
+ <input type="text" id="inputEmail" placeholder="Email">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label" for="notification1">Notification 1</label>
|
|
|
+
|
|
|
+ <div class="controls">
|
|
|
+ <div class="make-switch" tabindex="0">
|
|
|
+ <input id="notification1" type="checkbox" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label" for="notification2">Notification 2</label>
|
|
|
+
|
|
|
+ <div class="controls">
|
|
|
+ <div class="make-switch" tabindex="0">
|
|
|
+ <input id="notification2" type="checkbox" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-actions">
|
|
|
+ <button type="reset" class="btn btn-inverse">Reset</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <div class="clearfix"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<form class="form-horizontal">
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label" for="inputEmail">Email</label>
|
|
|
+ <div class="controls">
|
|
|
+ <input type="text" id="inputEmail" placeholder="Email">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label" for="notification1">Notification 1</label>
|
|
|
+ <div class="controls">
|
|
|
+ <div class="make-switch" tabindex="0">
|
|
|
+ <input id="notification1" type="checkbox" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label" for="notification2">Notification 2</label>
|
|
|
+ <div class="controls">
|
|
|
+ <div class="make-switch" tabindex="0">
|
|
|
+ <input id="notification2" type="checkbox" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-actions">
|
|
|
+ <button type="reset" class="btn btn-inverse">Reset</button>
|
|
|
+ </div>
|
|
|
+</form>
|
|
|
+ </pre>
|
|
|
+ </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">
|
|
|
+ <div class="bs-docs-example">
|
|
|
+ <a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
|
|
|
+ </div>
|
|
|
+ <pre class="prettyprint linenums">
|
|
|
+<a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
|
|
|
+-----
|
|
|
+<div class="modal-body">
|
|
|
+ <div class="make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+</div></pre>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
|
+ <div class="modal-header">
|
|
|
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
|
+ <h3>Modal</h3>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <div class="make-switch">
|
|
|
+ <input type="checkbox" checked />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
|
+
|
|
|
+<script>
|
|
|
+$(document).ready(function() {
|
|
|
+ window.prettyPrint && prettyPrint();
|
|
|
+ $('#mySwitch').on('switch-change', function (e, data) {
|
|
|
+ var $el = $(data.el)
|
|
|
+ , value = data.value;
|
|
|
+ console.log(e, $el, value);
|
|
|
+ });
|
|
|
+
|
|
|
+ // DIMENSION
|
|
|
+ $('#btn-size-regular-switch').on('click', function () {
|
|
|
+ $('#dimension-switch').bootstrapSwitch('setSizeClass', '');
|
|
|
+ });
|
|
|
+ $('#btn-size-mini-switch').on('click', function () {
|
|
|
+ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
|
|
|
+ });
|
|
|
+ $('#btn-size-small-switch').on('click', function () {
|
|
|
+ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
|
|
|
+ });
|
|
|
+ $('#btn-size-large-switch').on('click', function () {
|
|
|
+ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');
|
|
|
+ });
|
|
|
+
|
|
|
+ // STATE
|
|
|
+ $('#toggle-state-switch-button').on('click', function () {
|
|
|
+ $('#toggle-state-switch').bootstrapSwitch('toggleState');
|
|
|
+ });
|
|
|
+ $('#toggle-state-switch-button-on').on('click', function () {
|
|
|
+ $('#toggle-state-switch').bootstrapSwitch('setState', true);
|
|
|
+ });
|
|
|
+ $('#toggle-state-switch-button-off').on('click', function () {
|
|
|
+ $('#toggle-state-switch').bootstrapSwitch('setState', false);
|
|
|
+ });
|
|
|
+ $('#toggle-state-switch-button-status').on('click', function () {
|
|
|
+ alert($('#toggle-state-switch').bootstrapSwitch('status'));
|
|
|
+ });
|
|
|
+
|
|
|
+ // DESTROY
|
|
|
+ $('#btn-destroy-switch').on('click', function () {
|
|
|
+ $('#destroy-switch').bootstrapSwitch('destroy');
|
|
|
+ $(this).remove();
|
|
|
+ });
|
|
|
+ // CREATE
|
|
|
+ $('#btn-create').on('click', function () {
|
|
|
+ $('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();
|
|
|
+ $(this).remove()
|
|
|
+ });
|
|
|
+
|
|
|
+ // ACTIVATION
|
|
|
+ $('#btn-is-active-switch').on('click', function () {
|
|
|
+ alert($('#disable-switch').bootstrapSwitch('isActive'));
|
|
|
+ });
|
|
|
+ $('#btn-toggle-activation-switch').on('click', function () {
|
|
|
+ $('#disable-switch').bootstrapSwitch('toggleActivation');
|
|
|
+ });
|
|
|
+ $('#btn-disable-switch').on('click', function () {
|
|
|
+ $('#disable-switch').bootstrapSwitch('setActive', false);
|
|
|
+ });
|
|
|
+ $('#btn-activate-switch').on('click', function () {
|
|
|
+ $('#disable-switch').bootstrapSwitch('setActive', true);
|
|
|
+ });
|
|
|
+
|
|
|
+ // LABEL
|
|
|
+ $('#btn-label-on-switch').on('click', function() {
|
|
|
+ $('#label-switch').bootstrapSwitch('setOnLabel', 'I');
|
|
|
+ });
|
|
|
+ $('#btn-label-off-switch').on('click', function() {
|
|
|
+ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
|
|
|
+ });
|
|
|
+
|
|
|
+ $('#label-toggle-switch').on('click', function(e, data) {
|
|
|
+ $('.label-toggle-switch').bootstrapSwitch('toggleState');
|
|
|
+ });
|
|
|
+ $('.label-toggle-switch').on('switch-change', function(e, data) {
|
|
|
+ alert(data.value);
|
|
|
+ });
|
|
|
+ $('#label2-toggle-switch').on('switch-change', function(e, data) {
|
|
|
+ alert(data.value);
|
|
|
+ });
|
|
|
+
|
|
|
+ // COLOR
|
|
|
+ $('#btn-color-on-switch').on('click', function() {
|
|
|
+ $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
|
|
|
+ });
|
|
|
+ $('#btn-color-off-switch').on('click', function() {
|
|
|
+ $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
|
|
|
+ });
|
|
|
+
|
|
|
+ // ANIMATION
|
|
|
+ $('#btn-animate-switch').on('click', function() {
|
|
|
+ $('#animated-switch').bootstrapSwitch('setAnimated', true);
|
|
|
+ });
|
|
|
+ $('#btn-dont-animate-switch').on('click', function() {
|
|
|
+ $('#animated-switch').bootstrapSwitch('setAnimated', false);
|
|
|
+ });
|
|
|
+
|
|
|
+ // RADIO
|
|
|
+ $('.radio1').on('switch-change', function () {
|
|
|
+ $('.radio1').bootstrapSwitch('toggleRadioState');
|
|
|
+ });
|
|
|
+ $('.radio2').on('switch-change', function () {
|
|
|
+ $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
|
|
|
+ });
|
|
|
+});
|
|
|
+</script>
|
|
|
+ </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;">
|
|
|
+ © 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>
|
|
|
+
|
|
|
+</html>
|
Stein, Peter