javascript.html

      </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>Events</h3>
          <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
          <table class="bordered-table striped-table">
            <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>
          <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>