javascript.html

                    <button class="btn primary">Right</button>
                  </div>
               </td>
             </tr>
             <tr>
               <td>Radio</td>
               <td>
                  <div class="btn-group" data-toggle="buttons-radio">
                    <button class="btn primary">Left</button>
                    <button class="btn primary">Middle</button>
                    <button class="btn primary">Right</button>
                  </div>
               </td>
             </tr>
            </tbody>
          </table>
          <hr>
          <h2>Using bootstrap-button.js</h2>
          <p>Enable buttons via javascript:</p>
          <pre class="prettyprint linenums">$('.tabs').button()</pre>
            <h3>Markup</h3>
          <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
<pre class="prettyprint linenums">
&lt;!-- Add data-toggle="button" to activate toggling on a single button --&gt;
&lt;button class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;

&lt;!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --&gt;
&lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
  &lt;button class="btn"&gt;Left&lt;/button&gt;
  &lt;button class="btn"&gt;Middle&lt;/button&gt;
  &lt;button class="btn"&gt;Right&lt;/button&gt;
&lt;/div&gt;

&lt;!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group --&gt;
&lt;div class="btn-group" data-toggle="buttons-radio"&gt;
  &lt;button class="btn"&gt;Left&lt;/button&gt;
  &lt;button class="btn"&gt;Middle&lt;/button&gt;
  &lt;button class="btn"&gt;Right&lt;/button&gt;
&lt;/div&gt;
</pre>
          <h3>Methods</h3>
          <h4>$().button('toggle')</h4>
          <p>Toggles push state. Gives btn the look that it's been activated.</p>
          <p><span class="label notice">Notice</span> You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
          <pre class="prettyprint linenums">&lt;button class="btn" data-toggle="button" &gt;...&lt;/button&gt;</pre>
          <h4>$().button('loading')</h4>
          <p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
          </p>
           <pre class="prettyprint linenums">&lt;button class="btn" data-loading-text="loading stuff..." &gt;...&lt;/button&gt;</pre>
          <p>
            <span class="label notice">Notice</span> Firefox persists the disabled state across page loads. A workaround for this is to use: <code>autocomplete="off"</code>. More info can be found <a href="https://github.com/twitter/bootstrap/issues/793">here</a>.
          </p>
           <h4>$().button('reset')</h4>
           <p>Resets button state - swaps text to original text.</p>
           <h4>$().button(string)</h4>
           <p>Resets button state - swaps text to any data defined text state.</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
&lt;script&gt;
  $('.btn').button('complete')
&lt;/script&gt;</pre>
        </div>
      </div>
    </section>



    <!-- Collapse
    ================================================== -->
    <section id="collapse">
      <div class="page-header">
        <h1>Collapse <small>bootstrap-collapse.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>About</h3>
          <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
          <a href="../js/bootstrap-collapse.js" target="_blank" class="btn">Download file</a>
        </div>
        <div class="span9 columns">
          <h2>Example accordion</h2>
          <p>Using the collapse plugin, we built a simple accordion style widget:</p>

          <div class="accordion">
            <div class="accordion-group">
              <a class="accordion-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Collapsible group #1
              </a>
              <div class="accordion-body collapse in" id="collapseOne">
                <h5>Lorem ipsum</h5>
                <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
                <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
                <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
              </div>
            </div>
            <div class="accordion-group">
              <a class="accordion-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Collapsible group #2
              </a>
              <div class="accordion-body collapse" id="collapseTwo">
                <h5>Lorem ipsum</h5>
                <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
                <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
                <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
              </div>
            </div>
            <div class="accordion-group">
              <a class="accordion-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                Collapsible group #3
              </a>
              <div class="accordion-body collapse" id="collapseThree">
                <h5>Lorem ipsum</h5>
                <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
                <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
                <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
              </div>
            </div>
          </div>

          <hr>
          <h2>Using bootstrap-collapse.js</h2>
          <p>Enable via javascript:</p>
          <pre class="prettyprint linenums">$(".collapse").collapse()</pre>
          <h3>Options</h3>
          <table class="table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 100px;">Name</th>
               <th style="width: 50px;">type</th>
               <th style="width: 50px;">default</th>
               <th>description</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>parent</td>
               <td>selector</td>
               <td>false</td>
               <td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td>
             </tr>
             <tr>
               <td>toggle</td>
               <td>boolean</td>
               <td>true</td>
               <td>Toggles the collapsible element on invocation</td>
             </tr>
            </tbody>
          </table>
          <h3>Markup</h3>
          <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
          <pre class="prettyprint linenums">
&lt;button class="btn danger" data-toggle="collapse" data-target="#demo"&gt;
  simple collapsible
&lt;/button&gt;

&lt;div id="demo" class="collapse in"&gt; … &lt;/div&gt;</pre>
         <p><span class="label notice">Notice</span> To add accordion like group management to a collapsible control just add the additional data attribute <code>data-parent="#selector"</code>. Refer to the demo below to see this in action.</p>
          <h3>Methods</h3>
          <h4>.collapse(options)</h4>
          <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
<pre class="prettyprint linenums">
$('#myCollapsible').collapse({
  toggle: false
})</pre>
          <h4>.collapse('toggle')</h4>
          <p>Toggles a collapsible element to shown or hidden.</p>
          <h4>.collapse('show')</h4>
          <p>Shows a collapsible element.</p>
          <h4>.collapse('hide')</h4>
          <p>Hides a collapsible element.</p>
          <h3>Events</h3>
          <p>
            Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
          </p>
          <table class="table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 150px;">Event</th>
               <th>Description</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>show</td>
               <td>This event fires immediately when the <code>show</code> instance method is called.</td>
             </tr>
             <tr>
               <td>shown</td>
               <td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td>
             </tr>
             <tr>
               <td>hide</td>
               <td>
                This event is fired immediately when the <code>hide</code> method has been called.
               </td>
             </tr>
             <tr>
               <td>hidden</td>
               <td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td>
             </tr>
            </tbody>
          </table>

<pre class="prettyprint linenums">
$('#myCollapsible').on('hidden', function () {
  // do something ...
})</pre>
        </div>
      </div>
    </section>



     <!-- Carousel
    ================================================== -->
    <section id="carousel">
      <div class="page-header">
        <h1>Carousel <small>bootstrap-carousel.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>About</h3>
          <p>A generic plugin for cycling through elements. A merry-go-round.</p>
          <a href="../js/bootstrap-carousel.js" target="_blank" class="btn">Download file</a>
        </div>
        <div class="span9 columns">
          <h2>Example carousel</h2>
          <p>Watch the slideshow below.</p>
          <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="http://placehold.it/1000x500" alt="">
                <div class="carousel-caption">
                  <h4>First Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              <div class="item">
                <img src="http://placehold.it/1000x500" alt="">
                <div class="carousel-caption">
                  <h4>Second Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              <div class="item">
                <img src="http://placehold.it/1000x500" alt="">
                <div class="carousel-caption">
                  <h4>Third Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
          </div>
          <hr>
          <h2>Using bootstrap-carousel.js</h2>
          <p>Call via javascript:</p>
          <pre class="prettyprint linenums">$('.carousel').carousel()</pre>
          <h3>Options</h3>
          <table class="table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 100px;">Name</th>
               <th style="width: 50px;">type</th>
               <th style="width: 50px;">default</th>
               <th>description</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>interval</td>
               <td>number</td>
               <td>5000</td>
               <td>The amount of type to delay between automatically cycling an item.</td>
             </tr>
            </tbody>
          </table>
          <h3>Markup</h3>
          <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
<pre class="prettyprint linenums">
&lt;div class="carousel"&gt;
  &lt;!-- Carousel items --&gt;
  &lt;div class="carousel-inner"&gt;
    ...
  &lt;/div&gt;
  &lt;!-- Carousel nav --&gt;
  &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
  &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
&lt;/div&gt;
</pre>
          <h3>Methods</h3>
          <h4>.carousel(options)</h4>
          <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
<pre class="prettyprint linenums">
$('.myCarousel').carousel({
  interval: 2000
})
</pre>
          <h4>.carousel('cycle')</h4>
          <p>Cycles through the carousel items from left to right.</p>
          <h4>.carousel('pause')</h4>
          <p>Stops the carousel from cycling through items.</p>
          <h4>.carousel('prev')</h4>
          <p>Cycles to the previous item.</p>
          <h4>.carousel('next')</h4>
          <p>Cycles to the next item.</p>
          <h3>Events</h3>
          <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
          <table class="table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 150px;">Event</th>
               <th>Description</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>slide</td>
               <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
             </tr>
             <tr>
               <td>slid</td>
               <td>This event is fired when the carousel has completed it's slide transition.</td>
             </tr>
             </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>



    <!-- Typeahead
    ================================================== -->
    <section id="typeahead">
      <div class="page-header">
        <h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <h3>About</h3>
          <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
          <a href="../js/bootstrap-typeahead.js" target="_blank" class="btn">Download file</a>
        </div>
        <div class="span9 columns">
          <h2>Example</h2>
          <p>Start typing in the field below to show the typeahead results.</p>
          <div class="well">
            <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-data='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
          </div>
          <hr>
          <h2>Using bootstrap-typeahead.js</h2>
          <p>Call the typeahead via javascript:</p>
          <pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
          <h3>Options</h3>
          <table class="table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 100px;">Name</th>
               <th style="width: 50px;">type</th>
               <th style="width: 50px;">default</th>
               <th>description</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>items</td>
               <td>number</td>
               <td>8</td>
               <td>The max number of items to display in the dropdown.</td>
             </tr>
            </tbody>
          </table>

          <h3>Markup</h3>
          <p>Add data attributes to register an element with typeahead functionality.</p>
<pre class="prettyprint linenums">
&lt;input type="text" data-provide="typeahead"&gt;
</pre>
        </div>
      </div>
    </section>



      <!-- Footer
      ================================================== -->
      <footer class="footer">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
      </footer>
    </div><!-- /container -->


    <!-- Le javascript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
    <script src="../js/tests/vendor/jquery.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="../js/bootstrap-transition.js"></script>
    <script src="../js/bootstrap-alert.js"></script>
    <script src="../js/bootstrap-modal.js"></script>
    <script src="../js/bootstrap-dropdown.js"></script>
    <script src="../js/bootstrap-scrollspy.js"></script>
    <script src="../js/bootstrap-tab.js"></script>
    <script src="../js/bootstrap-tooltip.js"></script>
    <script src="../js/bootstrap-popover.js"></script>
    <script src="../js/bootstrap-button.js"></script>
    <script src="../js/bootstrap-collapse.js"></script>
    <script src="../js/bootstrap-carousel.js"></script>
    <script src="../js/bootstrap-typeahead.js"></script>
    <script src="assets/js/application.js"></script>
    <script>
      $(function () {
        // tooltip demo
        $('.tooltip-demo.well').tooltip({
          selector: "a[rel=tooltip]"
        })
        $('.tooltip-test').tooltip()

        // popover demo
        $("a[rel=popover]")
          .popover()
          .click(function(e) {
            e.preventDefault()
          })

        // button state demo
        $('#fat-btn')
          .click(function () {
            var btn = $(this)
            btn.button('loading')
            setTimeout(function () {
              btn.button('reset')
            }, 3000)
          })

        // carousel demo
        $('#myCarousel').carousel()
      })
    </script>
  </body>
</html>