javascript.html

                </dt>
                <dd id="collapseThree" class="collapse">
                  <p>
                  Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY.
                  </p>
                </dd>
              </dl>
            </div>
        </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">
          <p>A generic plugin for cycling through elements. A merry-go-round.</p>
          <a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a>
        </div>
        <div class="span9 columns">
          <h3>Using bootstrap-carousel.js</h3>
          <pre class="prettyprint linenums">$('.carousel').carousel()</pre>
          <h3>Options</h3>
          <table class="bordered-table striped-table">
            <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="thumbnail carousel"&gt;

  &lt;!-- items --&gt;
  &lt;div class="carousel-inner"&gt;…&lt;/div&gt;

  &lt;!-- navigation --&gt;
  &lt;a class="nav" href="#myCarousel" data-slide="next"&gt;&amp;lt;&lt;/a&gt;
  &lt;a class="nav" href="#myCarousel" data-slide="prev"&gt;&amp;gt;&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>Demo</h3>

          <!-- carousel -->

          <div id="myCarousel" class="thumbnail carousel slide">

            <div class="carousel-inner">
              <div class="item active">
                <img src="http://placehold.it/1100x400" alt="">
                <div class="caption">
                  <h5>First Thumbnail label</h5>
                  <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/1100x400" alt="">
                <div class="caption">
                  <h5>Second Thumbnail label</h5>
                  <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/1100x400" alt="">
                <div class="caption">
                  <h5>Third Thumbnail label</h5>
                  <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 nav" href="#myCarousel" data-slide="prev">&laquo;</a>
            <a class="right nav" href="#myCarousel" data-slide="next">&raquo;</a>

          </div>

        </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">
          <p>A basic, easily extended plugin for quickly creating elegant typeaheads.</p>
          <a href="../js/bootstrap-typeahead.js" target="_blank" class="btn primary">Download</a>
        </div>
        <div class="span9 columns">
          <h3>Using bootstrap-typeahead.js</h3>
          <pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>

          <h3>Options</h3>
          <table class="bordered-table striped-table">
            <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>
          <h3>Demo</h3>
          <input type="text" 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>
      </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-twipsy.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 () {
        // twipsy demo
        $('.twipsy-demo.well').twipsy({
          selector: "a[rel=twipsy]"
        })
        $('.twipsy-test').twipsy()

        // 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>