An error occurred while loading the file. Please try again.
-
Christopher Chedeau authored003d9e7b
<!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"> <!-- Le javascript --> <!-- placed up here so that the inline demos can be next to their markup --> <script src="http://code.jquery.com/jquery-1.7.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> <script src="../js/bootstrap-transitions.js"></script> <script src="../js/bootstrap-alerts.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-tabs.js"></script> <script src="../js/bootstrap-twipsy.js"></script> <script src="../js/bootstrap-popover.js"></script> <script src="../js/bootstrap-buttons.js"></script> <script> $(function () { // twipsy demo $("a[rel=twipsy]").twipsy({ live: true }) //popover demo $("a[rel=popover]") .popover({ offset: 10 }) .click(function(e) { e.preventDefault() }) }) </script> </head> <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>7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<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 with custom plugins for <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a></p>
</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 new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
<table class="striped-table">
<thead>
<tr>
<th style="width: 150px;">File</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="./javascript.html#modal">bootstrap-modal.js</a></td>
<td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td>
</tr>
<tr>
<td><a href="./javascript.html#alerts">bootstrap-alerts.js</a></td>
<td>The alert plugin is a super tiny class for adding close functionality to alerts.</td>
</tr>
<tr>
<td><a href="./javascript.html#dropdown">bootstrap-dropdown.js</a></td>
<td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td>
</tr>
<tr>
<td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
<td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td>
</tr>
<tr>
<td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
<td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
</tr>
<tr>
<td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
<td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</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">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
</tr>
<tr>
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
<td><a href="./javascript.html#buttons">bootstrap-buttons.js</a></td>
<td>This plugin offers additional functionality for managing button state.</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>
<p>For more information and to see some live demos, please refer to our <a href="./javascript.html">plugin documentation page</a>.</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">$('#my-modal').modal(options)</pre>
<h3>Options</h3>
<table class="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>
<td>boolean</td>
<td>true</td>
<td>Closes the modal when escape key is pressed</td>
</tr>
<tr>
<td>show</td>
<td>boolean</td>
<td>true</td>
<td>Opens modal on class initialization</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> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p>
<pre class="prettyprint linenums">
<a class="btn" data-toggle="modal" data-target="my-modal" >Launch Modal</a>
</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">
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
$('#my-modal').modal({
keyboard: false
})</pre>
<h4>.modal('toggle')</h4>
<p>Manually toggles a modal.</p>
<pre class="prettyprint linenums">$('#my-modal').modal('toggle')</pre>
<h4>.modal('show')</h4>
<p>Manually opens a modal.</p>
<pre class="prettyprint linenums">$('#my-modal').modal('show')</pre>
<h4>.modal('hide')</h4>
<p>Manually hides a modal.</p>
<pre class="prettyprint linenums">$('#my-modal').modal('hide')</pre>
<h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
<table class="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">
$('#my-modal').bind('hidden', function () {
// do something ...
})</pre>
<h3>Demo</h3>
<!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-modal-dismiss="true" >×</a>
<h3>Modal Heading</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" data-modal-dismiss="true" >Close</a>
</div>
</div>
<button data-toggle="modal" data-target="modal-from-dom" class="btn danger">
Launch Modal
</button>
</div>
</div>
</section>
<!-- Dropdown
================================================== -->
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
<section id="dropdown">
<div class="page-header">
<h1>Dropdown <small>bootstrap-dropdown.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<p>This plugin is for adding dropdown interaction to the Bootstrap navbar or tabbed navigations.</p>
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span9 columns">
<h3>Using boostrap-dropdown.js</h3>
<pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
<h3>Markup</h3>
<p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code>. Any valid bootstrap dropdown will automatically be activated.</p>
<pre class="prettyprint linenums">
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul></pre>
<h3>Methods</h3>
<h4>$().dropdown()</h4>
<p>
A programatic api for activating menus for a given navbar or tabbed navigation.
</p>
<h3>Demo</h3>
<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><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form class="form-search navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>