An error occurred while loading the file. Please try again.
-
Heinrich Fenkart authored12b3ba72
<!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.min.js"></script> <script type="text/javascript"> // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO $(document).ready(function() { $('.nav .active').click(function(e) { e.preventDefault(); $(this).siblings().toggle(); }); }); </script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</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> $(function () { // twipsy demo $("a[rel=twipsy]").twipsy({ live: true }) //popover demo $("a[rel=popover]") .popover({ offset: 10 }) .click(function(e) { e.preventDefault() }) }) </script> </head>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 — 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">
<a class="btn" data-toggle="modal" href="#myModal" >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">
$('#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" >×</a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
<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>Twipsy tooltips in a modal</h4>
<p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy 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 danger">
Launch Modal
</a>
</div>
</div>
</section>
<!-- Dropdown
================================================== -->
<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 generic dropdown interactions to things like navigation top bars and tabs.</p>
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span9 columns">
<h3>Using bootstrap-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> and any valid bootstrap dropdown will automatically be activated.</p>
<p><span class="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.</p>
<pre class="prettyprint linenums">
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
<li id="secondary" class="dropdown">
<a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></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="">