hugh
/
bootstrap-switch


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
							<!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="viewport" content="width=device-width, initial-scale=1.0">
        <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;" />
        <!-- Le styles -->
        <!-- TODO: make sure bootstrap.min.css points to BootTheme generated file
        -->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
        <link href="static/stylesheets/styles.css" rel="stylesheet" type="text/css" />
        <link href="static/stylesheets/pygment_trac.css" rel="stylesheet" type="text/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 -->
        <!-- 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 class="active">
                                  <a href="./index.html">Home</a>
                              </li>
                              <li>
                                  <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>
                        <h1><a name="bootstrap-switch" class="anchor" href="#bootstrap-switch"><span class="octicon octicon-link"></span></a>Bootstrap-switch v1.8 (preview)</h1>

                        <p>You can now also use radio buttons and checkboxes as switches.</p>

                        <h2><a name="usage" class="anchor" href="#usage"><span class="octicon octicon-link"></span></a>Usage</h2>

                        <p>Just include Twitter Bootstrap, jQuery, Bootstrap Switch CSS and Javascript</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=9; IE=8;"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"bootstrap-switch.css"</span><span class="nt">&gt;</span>

<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"bootstrap-switch.js"</span><span class="nt">&gt;&lt;/script&gt;</span>  // master
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.7/bootstrap-switch.min.js"</span><span class="nt">&gt;</span><span class="err">  // from cdnjs.com</span>
                            </pre>
                        </div>

                        <h2><a name="less" class="anchor" href="#less"><span class="octicon octicon-link"></span></a>Less</h2>

                        <p>If you want to use your bootstrap vars edit bootstrapSwitch.less and then compile the less file</p>

                        <div class="highlight">
                            <pre>
<span class="nt">lessc static/less/bootstrap-switch.less static/stylesheets/bootstrap-switch.css</span>
                            </pre>
                        </div>

                        <h2><a name="supported-browsers" class="anchor" href="#supported-browsers"><span class="octicon octicon-link"></span></a>Supported browsers</h2>

                        <p>I'm not going to support ancient browsers! (it works on IE8+)</p>

                        <h2><a name="basic-example" class="anchor" href="#basic-example"><span class="octicon octicon-link"></span></a>Basic Example</h2>

                        <p>checkboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <p>radioboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <h2><a name="large-small-or-mini" class="anchor" href="#large-small-or-mini"><span class="octicon octicon-link"></span></a>Large, small or mini</h2>

                        <p>checkboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch switch-large"</span><span class="nt">&gt;</span>  <span class="c">&lt;!-- switch-large, switch-small or switch-mini --&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <p>radioboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch switch-large"</span><span class="nt">&gt;</span>  <span class="c">&lt;!-- switch-large, switch-small or switch-mini --&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <h2><a name="colors" class="anchor" href="#colors"><span class="octicon octicon-link"></span></a>Colors</h2>

                        <p>checkboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on=</span><span class="s">"danger"</span> <span class="na">data-off=</span><span class="s">"warning"</span><span class="nt">&gt;</span>  <span class="c">&lt;!-- primary, info, success, warning, danger and default --&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <p>radioboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on=</span><span class="s">"danger"</span> <span class="na">data-off=</span><span class="s">"warning"</span><span class="nt">&gt;</span>  <span class="c">&lt;!-- primary, info, success, warning, danger and default --&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <h2><a name="animation" class="anchor" href="#animation"><span class="octicon octicon-link"></span></a>Animation</h2>

                        <p>checkboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-animated=</span><span class="s">"false"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <p>radioboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-animated=</span><span class="s">"false"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <h2><a name="text" class="anchor" href="#text"><span class="octicon octicon-link"></span></a>Text</h2>

                        <p>checkboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"SI"</span> <span class="na">data-off-label=</span><span class="s">"NO"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <p>radioboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"SI"</span> <span class="na">data-off-label=</span><span class="s">"NO"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <h2><a name="text-label" class="anchor" href="#text-label"><span class="octicon octicon-link"></span></a>Text Label</h2>

                        <p>checkboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-text-label=</span><span class="s">"My Slider Text"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <p>radioboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-text-label=</span><span class="s">"My Slider Text"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <h2><a name="html-text" class="anchor" href="#html-text"><span class="octicon octicon-link"></span></a>HTML Text</h2>

                        <p>checkboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"&lt;i class='icon-ok icon-white'&gt;&lt;/i&gt;"</span> <span class="na">data-off-label=</span><span class="s">"&lt;i class='icon-remove'&gt;&lt;/i&gt;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <p>radioboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"&lt;i class='icon-ok icon-white'&gt;&lt;/i&gt;"</span> <span class="na">data-off-label=</span><span class="s">"&lt;i class='icon-remove'&gt;&lt;/i&gt;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <h2><a name="initial-values" class="anchor" href="#initial-values"><span class="octicon octicon-link"></span></a>Initial values</h2>

                        <p>checkboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked=</span><span class="s">"checked"</span> <span class="na">disabled=</span><span class="s">"disabled"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <p>radioboxes:</p>

                        <div class="highlight">
                            <pre>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">checked=</span><span class="s">"checked"</span> <span class="na">disabled=</span><span class="s">"disabled"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
                            </pre>
                        </div>

                        <h2><a name="event-handler" class="anchor" href="#event-handler"><span class="octicon octicon-link"></span></a>Event handler</h2>

                        <div class="highlight">
                            <pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'switch-change'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span>
      <span class="p">,</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">$el</span><span class="p">,</span> <span class="nx">value</span><span class="p">);</span>
<span class="p">});</span>
                            </pre>
                        </div>

                        <h2><a name="methods" class="anchor" href="#methods"><span class="octicon octicon-link"></span></a>Methods</h2>

                        <div class="highlight">
                            <pre>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleActivation'</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'isActive'</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setActive'</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setActive'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleState'</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioState'</span><span class="p">);</span> <span class="c1">// the radiobuttons need a class not a ID, don't allow uncheck radio switch</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioStateAllowUncheck'</span><span class="p">);</span> <span class="c1">// don't allow uncheck radio switch</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioStateAllowUncheck'</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span> <span class="c1">// don't allow uncheck radio switch</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioStateAllowUncheck'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span> <span class="c1">// allow uncheck radio switch</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setState'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOnLabel'</span><span class="p">,</span> <span class="kc">onValue</span><span class="p">);</span> <span class="c1">// sets the text of the "on" label</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOffLabel'</span><span class="p">,</span> <span class="kc">offValue</span><span class="p">);</span> <span class="c1">// sets the text of the "off" label</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOnClass'</span><span class="p">,</span> <span class="kc">onClass</span><span class="p">);</span> <span class="c1">// sets the left color class</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOffClass'</span><span class="p">,</span> <span class="kc">offClass</span><span class="p">);</span> <span class="c1">// sets the right color class</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setAnimated'</span><span class="p">,</span> <span class="kc">animated</span><span class="p">);</span> <span class="c1">// sets true or false for animation</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setSizeClass'</span><span class="p">,</span> <span class="kc">size</span><span class="p">);</span> <span class="c1">// sets 'switch-mini', 'switch-small' or 'switch-large'</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'status'</span><span class="p">);</span>  <span class="c1">// returns true or false</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">);</span>
                            </pre>
                        </div>

                        <h2><a name="license" class="anchor" href="#license"><span class="octicon octicon-link"></span></a>License</h2>

                        <p>Licensed under the Apache License, Version 2.0<a href="http://www.apache.org/licenses/LICENSE-2.0"> http://www.apache.org/licenses/LICENSE-2.0</a></p>
                    </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://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
        <script src="static/js/main.js"></script>
  </body>

</html>