An error occurred while loading the file. Please try again.
-
Jacob Thornton authored7f0a6410
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le HTML5 shim, for IE6-8 support of HTML elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Le styles --> <link href="../bootstrap.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> <!-- Le fav and touch icons --> <link rel="shortcut icon" href="images/favicon.ico"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> </head> <body> <!-- 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 class=""> <a href="./index.html">Overview</a> </li> <li class=""> <a href="./scaffolding.html">Scaffolding</a> </li> <li class=""> <a href="./base-css.html">Base CSS</a> </li> <li class=""> <a href="./components.html">Components</a> </li> <li class="active"> <a href="./javascript.html">Javascript plugins</a> </li> <li class=""> <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—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. <div class="subnav"> <ul class="nav pills"> <li><a href="./javascript.html#javascript">Overview</a></li> <li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li>7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
<li><a href="./javascript.html#tabs">Tab</a></li>
<li><a href="./javascript.html#tooltips">Tooltip</a></li>
<li><a href="./javascript.html#popovers">Popover</a></li>
<li><a href="./javascript.html#alerts">Alert</a></li>
<li><a href="./javascript.html#buttons">Button</a></li>
<li><a href="./javascript.html#collapse">Collapse</a></li>
<li><a href="./javascript.html#carousel">Carousel</a></li>
<li><a href="./javascript.html#typeahead">Typeahead</a></li>
</ul>
</div>
</header>
<!-- Using Javascript w/ Bootstrap
================================================== -->
<section id="javascript">
<div class="page-header">
<h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1>
</div>
<div class="row">
<div class="span3">
<label>
<h3><a href="./javascript.html#modals">Modals</a><input checked="true" value="bootstrap-modal.js" type="checkbox"></h3>
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#dropdowns">Dropdowns</a><input checked="true" value="bootstrap-dropdown.js" type="checkbox"></h3>
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#scrollspy">Scrollspy</a><input checked="true" value="bootstrap-scrollspy.js" type="checkbox"></h3>
<p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#tabs">Togglable tabs</a><input checked="true" value="bootstrap-tab.js" type="checkbox"></h3>
<p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
</label>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span3">
<label>
<h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small><input checked="true" value="bootstrap-popover.js" type="checkbox"></h3>
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#alerts">Alert messages</a><input checked="true" value="bootstrap-alert.js" type="checkbox"></h3>
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#buttons">Buttons</a><input checked="true" value="bootstrap-button.js" type="checkbox"></h3>
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
</label>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span3">
<label>
<h3><a href="./javascript.html#collapse">Collapse</a><input checked="true" value="bootstrap-collapse.js" type="checkbox"></h3>
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#carousel">Carousel</a><input checked="true" value="bootstrap-carousel.js" type="checkbox"></h3>
<p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#typeahead">Typeahead</a><input checked="true" value="bootstrap-typeahead.js" type="checkbox"></h3>
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
</label>
</div>
<div class="span3">
<label>
<h3>Transitions <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3>
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
<p class="muted"><strong>*</strong> Required for animation in plugins</p>
</label>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span5">
<div class="btn-group" id="javascriptBuilder">
<a id="javascriptBuild" class="btn primary large" href="#">Download Source</a>
<a class="btn primary large dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="dropdown-menu large">
<li class="active"><a href="#">Compressed</a></li>
<li><a href="#">Uncompressed</a></li>
</ul>
</div>
</div>
</div>
<hr>
<a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a>
<p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
</section>
<!-- Modal
================================================== -->
<section id="modals">
<div class="page-header">
<h1>Modals <small>bootstrap-modal.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>About modals</h3>
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
<a href="../js/bootstrap-modal.js" target="_blank" class="btn">Download file</a>
</div>
<div class="span9 columns">
<h2>Static example</h2>
<p>Below is a statically rendered modal.</p>
<div class="well" style="background-color: #888; border: none;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Save changes</a>
<a href="#" class="btn">Close</a>
</div>
</div>
</div> <!-- /well -->
<h2>Live demo</h2>
<p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" >×</a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
<h4>Tooltips in a modal</h4>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Save changes</a>
<a href="#" class="btn" data-dismiss="modal" >Close</a>
</div>
</div>
<a data-toggle="modal" href="#myModal" class="btn primary large">Launch demo modal</a>
<hr>
<h2>Using bootstrap-modal</h2>
<p>Call the modal via javascript:</p>
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
<h3>Options</h3>
<table class="table 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>backdrop</td>
<td>boolean</td>
<td>true</td>
<td>Includes a modal-backdrop element</td>
</tr>
<tr>
<td>keyboard</td>
<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>
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
<pre class="prettyprint linenums">
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
</pre>
<pre class="prettyprint linenums">
<div class="modal">
<div class="modal-header">
<a href="#" class="close js-dismiss">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Save changes</a>
<a href="#" class="btn">Close</a>
</div>
</div>
</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>.</p>
<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="table 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 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>
</div>
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
</div>
</section>
<!-- Dropdown
================================================== -->
<section id="dropdowns">
<div class="page-header">
<h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>About dropdowns</h3>
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn">Download file</a>
</div>
<div class="span9 columns">
<h2>Examples</h2>
<p>Click on the dropdown nav links in the navbar and pills below to test dropdowns.</p>
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div> <!-- /navbar-example -->
<ul class="nav pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>