hugh
/
bootstrap-switch


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap Switch by Mattia Larentis and Peter Stein</title>
    <meta name="description" content="Switches for radio buttons and checkboxes">
    <meta name="author" content="Mattia Larentis">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../build/css/bootstrap3/bootstrap-switch.css" />
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" />
    <!-- <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/docs.css" /> -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
    <link rel="stylesheet" href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/flat-ui-fonts.css">
    <link rel="stylesheet" href="index.css">
    <script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-43092768-1']);
    _gaq.push(['_trackPageview']);
    (function () {
      var ga = document.createElement('script');
      ga.type = 'text/javascript';
      ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);
    })();
    </script>
  </head>
  <body>
  <a href="https://github.com/nostalgiaz/bootstrap-switch">
      <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="container">
    <header class="jumbotron">
      <h1>Bootstrap switch</h1>
      <h4>by <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/spiritualguru">@SpiritualGuru</a>) and <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a></h4>
      <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="170" 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="170" 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="170" height="30"></iframe>
      <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>
    </header>
    <h2><a name="size" class="anchor" href="#size">Size</a></h2>
    <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>
      <span>Dimensions can be changed too:</span>
      <div id="dimension-switch" class="make-switch">
        <input type="checkbox" checked>
      </div>
      <br>
      <br>
      <button id="btn-size-large-switch" class="btn btn-default">Large</button>
      <button id="btn-size-regular-switch" class="btn btn-default">Regular</button>
      <button id="btn-size-small-switch" class="btn btn-default">Small</button>
      <button id="btn-size-mini-switch" class="btn btn-default">Mini</button>
      <br>
    </div>
    <pre class="prettyprint lang-html linenums">
&lt;div class="make-switch switch-large">
&lt;input type="checkbox" checked>
&lt;/div>

&lt;div class="make-switch">
&lt;input type="checkbox" checked>
&lt;/div>

&lt;div class="make-switch switch-small">
&lt;input type="checkbox" checked>
&lt;/div>

&lt;div class="make-switch switch-mini">
&lt;input type="checkbox" checked>
&lt;/div>

&lt;div id="dimension-switch" class="make-switch">
&lt;input type="checkbox" checked>
&lt;/div></pre>
    <pre class="prettyprint lang-javascript linenums">
// Resets to the regular style
$('#dimension-switch').bootstrapSwitch('setSizeClass', '');

// Sets a mini switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');

// Sets a small switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');

// Sets a large switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');</pre>
    <h2><a name="colors" class="anchor" href="#colors">Colors</a></h2>
    <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>
      <span>Colors can be changed too:</span>
      <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 btn-success">Change ON color</button>
      <button id="btn-color-off-switch" class="btn btn-danger">Change OFF color</button>
    </div>
    <pre class="prettyprint lang-html linenums">
  &lt;div class="make-switch" data-on="primary" data-off="info">
  &lt;input type="checkbox" checked>
  &lt;/div>

  &lt;div class="make-switch" data-on="info" data-off="success">
  &lt;input type="checkbox" checked>
  &lt;/div>

  &lt;div class="make-switch" data-on="success" data-off="warning">
  &lt;input type="checkbox" checked>
  &lt;/div>

  &lt;div class="make-switch" data-on="warning" data-off="danger">
  &lt;input type="checkbox" checked>
  &lt;/div>

  &lt;div class="make-switch" data-on="danger" data-off="default">
  &lt;input type="checkbox" checked>
  &lt;/div>

  &lt;div class="make-switch" data-on="default" data-off="primary">
  &lt;input type="checkbox" checked>
  &lt;/div>

  &lt;div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
  &lt;input type="checkbox" checked>
  &lt;/div></pre>
      <pre class="prettyprint lang-javascript linenums">
    $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
    $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');</pre>
      <h2><a name="animation" class="anchor" href="#animation">Animation <small>javascript</small></a></h2>
      <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 btn-default">Animate</button>
        <button id="btn-dont-animate-switch" class="btn btn-default">Don't animate</button>
      </div>
      <pre class="prettyprint lang-html linenums">
  &lt;div id="animated-switch" class="make-switch" data-animated="false">
  &lt;input type="checkbox" checked>
  &lt;/div></pre>
      <pre class="prettyprint lang-javascript linenums">
  // Enables animation for the selected item
  $('#animated-switch').bootstrapSwitch('setAnimated', true);

  // Disables animation for the selected item
  $('#animated-switch').bootstrapSwitch('setAnimated', false);</pre>
      <h2><a name="disabled" class="anchor" href="#disabled">Disabled</a></h2>
      <div class="bs-docs-example">
        <div class="make-switch">
          <input type="checkbox" checked disabled>
        </div>
      </div>
      <pre class="prettyprint lang-html linenums">
  &lt;div class="make-switch">
  &lt;input type="checkbox" checked disabled>
  &lt;/div></pre>
      <h2><a name="text" class="anchor" href="#text">Text</a></h2>
      <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 btn-default">Change "On" label</button>
        <button id="btn-label-off-switch" class="btn btn-default">Change "Off" label</button>
      </div>
      <pre class="prettyprint lang-html linenums">
  &lt;div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
  &lt;input type="checkbox" checked>
  &lt;/div></pre>
      <pre class="prettyprint lang-javascript linenums">
  $('#label-switch').bootstrapSwitch('setOnLabel', 'I');
  $('#label-switch').bootstrapSwitch('setOffLabel', 'O');</pre>
      <h2><a name="label-text" class="anchor" href="#label-text">Label Text</a></h2>
      <div class="bs-docs-example">
      <div class="make-switch" data-text-label="TV">
        <input type="checkbox" checked>
      </div>
      </div>
      <pre class="prettyprint lang-html linenums">
  &lt;div class="make-switch" data-text-label="TV">
  &lt;input type="checkbox" checked>
  &lt;/div></pre>
      <h2><a name="html-text" class="anchor" href="#html-text">HTML text</a></h2>
      <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 lang-html linenums">
  &lt;div class="make-switch" data-on-label="&lt;i class='icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-remove'>&lt;/i>">
  &lt;input type="checkbox" checked />
  &lt;/div></pre>
      <h2><a name="html-text-label-icon" class="anchor" href="#html-text-label-icon">HTML text Label Icon</a></h2>
      <div class="bs-docs-example">
        <h5>Standard</h5>
        <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>
        <h5>Font Awesome</h5>
        <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>
        <h5>Flat UI</h5>
        <div class="make-switch switch-large" 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>
      <pre class="prettyprint lang-html linenums">
  &lt;div class="make-switch switch-large" data-label-icon="icon-fullscreen" data-on-label="&lt;i class='icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-remove'>&lt;/i>">
  &lt;input type="checkbox" checked>
  &lt;/div>

  &lt;div class="make-switch switch-large" data-label-icon="icon-youtube icon-large" data-on-label="&lt;i class='icon-thumbs-up icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-thumbs-down'>&lt;/i>">
  &lt;input type="checkbox" checked>
  &lt;/div>

  &lt;div class="make-switch" data-label-icon="fui-video" data-on-label="&lt;i class='fui-check icon-white'>&lt;/i>" data-off-label="&lt;i class='fui-cross'>&lt;/i>">
  &lt;input type="checkbox" checked>
  &lt;/div></pre>
      <h2><a name="event-handler-javascript" class="anchor" href="#event-handler-javascript">Event handler <small>jav</small></a></h2>
      <div class="bs-docs-example">
        <div id="mySwitch" class="make-switch">
          <input type="checkbox" checked>
        </div>
      </div>
      <pre class="prettyprint lang-javascript linenums">
  $('#mySwitch').on('switch-change', function (e, data) {
  var $el = $(data.el)
    , value = data.value;
  console.log(e, $el, value);
  });</pre>
      <h2><a name="label-event-handler-javascript" class="anchor" href="#label-event-handler-javascript">Label Event h<small>javascript</small></a></h2>
      <div class="bs-docs-example">
        <h5>Label 1</h5>
        <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>
        <h5>Label 2</h5>
        <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>
      <pre class="prettyprint lang-html linenums">
  &lt;label id="label-toggle-switch">Click on this Text to change the switch state&lt;/label>
  &lt;div class="label-toggle-switch make-switch">
      &lt;input type="checkbox" checked />
  &lt;/div>
  &lt;script>
  $('#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);
  });
  &lt;/script>

  &lt;div id="label2-toggle-switch">
  &lt;label class="label-change-switch">Click on this Text to change the switch state
  &lt;div class="label2-toggle-switch make-switch">
      &lt;input type="checkbox" checked />
  &lt;/div>
  &lt;/label>
  &lt;/div>
  &lt;script>
  $('#label2-toggle-switch').on('switch-change', function(e, data) {
      alert(data.value);
  });
  &lt;/script></pre>
      <h2><a name="toggle-state" class="anchor" href="#toggle-state">Toggle State <small>javascript</small></a></h2>
      <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="btny">Status!</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 me!</div>
        <div id="toggle-state-switch-button-off" class="btn btn-default">OFF!</div>
      </div>
      <pre class="prettyprint lang-javascript linenums">
  $('#toggle-state-switch').bootstrapSwitch('status'); // true || false
  $('#toggle-state-switch').bootstrapSwitch('toggleState');
  $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</pre>
      <h2><a name="destroy" class="anchor" href="#destroy">Destroy <small>javascript</small></a></h2>
          <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-default">Destroy me!</button>
          </div>
          <pre class="prettyprint lang-javascript linenums">
  $('#destroy-switch').bootstrapSwitch('destroy');</pre>
      <h2><a name="create" class="anchor" href="#create">Create <small>javascript</small></a></h2>
          <div class="bs-docs-example">
              <input id="create-switch" type="checkbox" checked>

              <br />
              <br />

              <div id="btn-create" class="btn btn-default">Create</div>
          </div>
          <pre class="prettyprint lang-javascript linenums">
  $('#create-switch').wrap('&lt;div class="make-switch" />').parent().bootstrapSwitch();</pre>
      <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript">Disabled <small>javascript</small></a></h2>
          <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 btn-default">Is active?</button>
              <button id="btn-toggle-activation-switch" class="btn btn-default">Toggle activation!</button>
              <button id="btn-disable-switch" class="btn btn-default">Disable!</button>
              <button id="btn-activate-switch" class="btn btn-default">Activate!</button>
          </div>
          <pre class="prettyprint lang-javascript linenums">
  $('#disable-switch').bootstrapSwitch('isActive');
  $('#disable-switch').bootstrapSwitch('toggleActivation');
  $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre>
      <h2><a name="radio-javascript" class="anchor" href="#radio-javascript">Radio <small>javascript</small></a></h2>
          <div class="bs-docs-example">
              <div class="control-group">
                   <div class="controls">
                      <label for="option1">Option 1</label>
                      <div class="make-switch radio1 radio-no-uncheck">
                          <input id="option1" type="radio" name="radio1" value="option1">
                      </div>
                      <label for="option2">Option 2</label>
                      <div class="make-switch radio1 radio-no-uncheck">
                          <input id="option2" type="radio" name="radio1" value="option2">
                      </div>
                      <label for="option3">Option 3</label>
                      <div class="make-switch radio1 radio-no-uncheck">
                          <input id="option3" type="radio" name="radio1" value="option3">
                      </div>
                   </div>
              </div>
          </div>
          <pre class="prettyprint lang-html linenums">
  &lt;div class="control-group">
  &lt;div class="controls">
      &lt;label for="option1">Option 1&lt;/label>
      &lt;div class="make-switch radio1 radio-no-uncheck">
          &lt;input id="option1" type="radio" name="radio1" value="option1">
      &lt;/div>
      &lt;label for="option2">Option 2&lt;/label>
      &lt;div class="make-switch radio1 radio-no-uncheck">
          &lt;input id="option2" type="radio" name="radio1" value="option2">
      &lt;/div>
      &lt;label for="option3">Option 3&lt;/label>
      &lt;div class="make-switch radio1 radio-no-uncheck">
          &lt;input id="option3" type="radio" name="radio1" value="option3">
      &lt;/div>
  &lt;/div>
  &lt;/div>
  &lt;script>
  $('.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);
  });
  &lt;/script></pre>
      <h2><a name="radio-javascript-allow-uncheck" class="anchor" href="#radio-javascript-allow-uncheck"><small>javascript (allow radios uncheck)</small></a>
      </h2>
          <div class="bs-docs-example">
              <div class="control-group">
                   <div class="controls">
                      <label for="option11">Option 1</label>
                      <div class="make-switch radio2">
                          <input id="option11" type="radio" name="radio2" value="option11">
                      </div>
                      <label for="option12">Option 2</label>
                      <div class="make-switch radio2">
                          <input id="option12" type="radio" name="radio2" value="option12" checked="checked">
                      </div>
                      <label for="option13">Option 3</label>
                      <div class="make-switch radio2">
                          <input id="option13" type="radio" name="radio2" value="option13">
                      </div>
                   </div>
              </div>
          </div>
          <pre class="prettyprint lang-html linenums">
  &lt;div class="control-group">
  &lt;div class="controls">
      &lt;label for="option11">Option 1&lt;/label>
      &lt;div class="make-switch radio2">
          &lt;input id="option11" type="radio" name="radio2" value="option1">
      &lt;/div>
      &lt;label for="option12">Option 2&lt;/label>
      &lt;div class="make-switch radio2">
          &lt;input id="option12" type="radio" name="radio2" value="option2" checked="checked">
      &lt;/div>
      &lt;label for="option13">Option 3&lt;/label>
      &lt;div class="make-switch radio2">
          &lt;input id="option13" type="radio" name="radio2" value="option3">
      &lt;/div>
  &lt;/div>
  &lt;/div>
  &lt;script>
  $('.radio2').on('switch-change', function () {
      $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
  });
  &lt;/script></pre>
      <h2><a name="form" class="anchor" href="#form">Form <small>- try to use tab, space and reset button</small></a></h2>
          <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 lang-html linenums">
  &lt;form class="form-horizontal">
  &lt;div class="control-group">
      &lt;label class="control-label" for="inputEmail">Email&lt;/label>
      &lt;div class="controls">
          &lt;input type="text" id="inputEmail" placeholder="Email">
      &lt;/div>
  &lt;/div>
  &lt;div class="control-group">
      &lt;label class="control-label" for="notification1">Notification 1&lt;/label>
      &lt;div class="controls">
          &lt;div class="make-switch" tabindex="0">
              &lt;input id="notification1" type="checkbox">
          &lt;/div>
      &lt;/div>
  &lt;/div>
  &lt;div class="control-group">
      &lt;label class="control-label" for="notification2">Notification 2&lt;/label>
      &lt;div class="controls">
          &lt;div class="make-switch" tabindex="0">
              &lt;input id="notification2" type="checkbox">
          &lt;/div>
      &lt;/div>
  &lt;/div>
  &lt;div class="form-actions">
      &lt;button type="reset" class="btn btn-inverse">Reset&lt;/button>
  &lt;/div>
  &lt;/form></pre>
    <h2><a name="modal" class="anchor" href="#modal">Modal</a></h2>
    <div class="bs-docs-example">
      <a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>
    </div>
    <pre class="prettyprint lang-html linenums">
&lt;a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal&lt;/a>

&lt;div class="modal-body">
    &lt;div class="make-switch">
        &lt;input type="checkbox" checked>
    &lt;/div>
&lt;/div></pre>
  </div>
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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 btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
  <footer>
    <div class="container">
      <p>&copy; by <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/SpiritualGuru">@SpiritualGuru</a>) and <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a></p>
    </div>
  </footer>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script src="../build/js/bootstrap-switch.js"></script>
  <script src="index.js"></script>
  </body>
</html>