Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
javascript.html 59.59 KiB
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
  <head>
4 
    <meta charset="utf-8">
5 
    <title>Bootstrap, from Twitter</title>
6 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 
    <meta name="description" content="">
8 
    <meta name="author" content="">
9
10 
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
11 
    <!--[if lt IE 9]>
12 
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
13 
    <![endif]-->
14
15 
    <!-- Le styles -->
16 
    <link href="../bootstrap.css" rel="stylesheet">
17 
    <link href="assets/css/docs.css" rel="stylesheet">
18 
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
19
20 
    <!-- Le fav and touch icons -->
21 
    <link rel="shortcut icon" href="images/favicon.ico">
22 
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
23 
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
24 
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
25
26 
    <!-- Le javascript -->
27 
    <!-- placed up here so that the inline demos can be next to their markup -->
28 
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
29
30 
    <script type="text/javascript">
31 
      // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
32 
      $(document).ready(function() {
33 
        $('.nav .active').click(function(e) {
34 
          e.preventDefault();
35 
          $(this).siblings().toggle();
36 
        });
37 
      });
38 
    </script>
39
40 
    <script src="assets/js/google-code-prettify/prettify.js"></script>
41 
    <script>$(function () { prettyPrint() })</script>
42 
    <script src="../js/bootstrap-transition.js"></script>
43 
    <script src="../js/bootstrap-alert.js"></script>
44 
    <script src="../js/bootstrap-modal.js"></script>
45 
    <script src="../js/bootstrap-dropdown.js"></script>
46 
    <script src="../js/bootstrap-scrollspy.js"></script>
47 
    <script src="../js/bootstrap-tab.js"></script>
48 
    <script src="../js/bootstrap-twipsy.js"></script>
49 
    <script src="../js/bootstrap-popover.js"></script>
50 
    <script src="../js/bootstrap-button.js"></script>
51 
    <script>
52 
      $(function () {
53 
        // twipsy demo
54 
        $("a[rel=twipsy]").twipsy({
55 
          live: true
56 
        })
57
58 
        //popover demo
59 
        $("a[rel=popover]")
60 
          .popover({
61 
            offset: 10
62 
          })
63 
          .click(function(e) {
64 
            e.preventDefault()
65 
          })
66 
      })
67 
    </script>
68
69 
  </head>
70
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<body id="bootstrap-js"> <!-- Navbar ================================================== --> <div class="navbar navbar-fixed"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li><a href="./index.html">Overview</a></li> <li><a href="./scaffolding.html">Scaffolding</a></li> <li><a href="./base-css.html">Base CSS</a></li> <li><a href="./components.html">Components</a></li> <li class="active"><a href="./javascript.html">Javascript plugins</a></li> <li><a href="./less.html">Using LESS</a></li> </ul> </div> </div> </div> <div class="container"> <!-- Masthead ================================================== --> <header class="jumbotron subhead" id="overview"> <h1>Javascript for Bootstrap</h1> <p class="lead">Bring Bootstrap's components to life &mdash; now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. </header> <!-- Using Javascript w/ Bootstrap ================================================== --> <section id="javascript"> <div class="page-header"> <h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1> </div> <div class="row"> <div class="span3"> <h2>Getting started</h2> <p>Integrating javascript with the Bootstrap library is super easy. Here we go over the basics and provide you with some awesome plugins to get you started!</p> </div> <div class="span9"> <h3>What's included</h3> <p>Bring some of Bootstrap's primary components to life with custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. We encourage you to extend and modify them to fit your specific development needs.</p> <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">File</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="./javascript.html#transition">bootstrap-transition.js</a></td> <td>The transition plugin is required for adding animation to other bootstrap plugins. Include this plugin (only once) when sliding in modals or fading out alerts.</td> </tr> <tr> <td><a href="./javascript.html#modal">bootstrap-modal.js</a></td> <td>Our Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require here at twitter.</td> </tr> <tr> <td><a href="./javascript.html#dropdown">bootstrap-dropdown.js</a></td> <td>This plugin is for adding generic dropdown interactions to things like navigation top bars and tabs.</td> </tr> <tr> <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td> <td>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</td> </tr> <tr> <td><a href="./javascript.html#tab">bootstrap-tab.js</a></td>
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
<td>This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.</td> <tr> <td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td> <td>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!</td> </tr> <tr> <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td> <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> </tr> </tr> <tr> <td><a href="./javascript.html#alert">bootstrap-alert.js</a></td> <td>The alert plugin is a tiny class for adding close functionality to alerts.</td> </tr> <tr> <td><a href="./javascript.html#button">bootstrap-button.js</a></td> <td>This plugin offers additional functionality for managing button state in single buttons and button sets.</td> </tr> <tr> <td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td> <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td> </tr> <tr> <td><a href="./javascript.html#carousel">bootstrap-carousel.js</a></td> <td>A plugin for rotating through elements. A merry-go-round.</td> </tr> </tbody> </table> <h3>Is javascript necessary?</h3> <p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p> <p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p> </div> </div> </section> <!-- Modal ================================================== --> <section id="modal"> <div class="page-header"> <h1>Modals <small>bootstrap-modal.js</small></h1> </div> <div class="row"> <div class="span3 columns"> <p>Our Modal plugin is a super slim take on the traditional modal js plugin, taking special care to include only the bare functionality that we require here at twitter.</p> <a href="../js/bootstrap-modal.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> <h3>Using bootstrap-modal</h3> <pre class="prettyprint linenums">$('#myModal').modal(options)</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>backdrop</td> <td>boolean</td> <td>true</td> <td>Includes a modal-backdrop element</td> </tr> <tr> <td>keyboard</td>
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
<td>boolean</td> <td>true</td> <td>Closes the modal when escape key is pressed</td> </tr> </tbody> </table> <h3>Markup</h3> <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p> <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.</p> <pre class="prettyprint linenums"> &lt;a class="btn" data-toggle="modal" href="#myModal" &gt;Launch Modal&lt;/a&gt; </pre> <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p> <h3>Methods</h3> <h4>.modal(options)</h4> <p>Activates your content as a modal. Accepts an optional options <code>object</code>. <pre class="prettyprint linenums"> $('#myModal').modal({ keyboard: false })</pre> <h4>.modal('toggle')</h4> <p>Manually toggles a modal.</p> <pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre> <h4>.modal('show')</h4> <p>Manually opens a modal.</p> <pre class="prettyprint linenums">$('#myModal').modal('show')</pre> <h4>.modal('hide')</h4> <p>Manually hides a modal.</p> <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre> <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>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 the modal 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> instance method has been called.</td> </tr> <tr> <td>hidden</td> <td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td> </tr> </tbody> </table> <pre class="prettyprint linenums"> $('#myModal').on('hidden', function () { // do something ... })</pre> <h3>Demo</h3> <!-- sample modal content --> <div id="myModal" class="modal hide fade"> <div class="modal-header"> <a href="#" class="close" data-dismiss="modal" >&times;</a> <h3>Modal Heading</h3> </div> <div class="modal-body">