home/bootstrap
2
0
Fork 0
mirror of https://github.com/wahyd4/bootstrap.git synced 2026-08-21 18:56:47 +10:00
Code Issues Packages Projects Releases Wiki Activity

2.0.2->2.0.3

Browse Source
This commit is contained in:
Jacob Thornton
2012-04-24 02:23:57 -07:00
parent 5b98a646a7
commit 1c695c22a1
44 changed files with 3840 additions and 1878 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript.html
+71 -21
View File
@@ -20,6 +20,7 @@
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
<span class="icon-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
@@ -205,9 +206,9 @@
<h2>Static example</h2>
<p>Below is a statically rendered modal.</p>
<div class="well modal-example" 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" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">&times;</a>
<button class="close" data-dismiss="modal">&times;</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
@@ -225,7 +226,7 @@
<!-- sample modal content -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal" >&times;</a>
<button class="close" data-dismiss="modal">&times;</button>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
@@ -302,7 +303,7 @@
<pre class="prettyprint linenums">
&lt;div class="modal" id="myModal"&gt;
&lt;div class="modal-header"&gt;
&lt;a class="close" data-dismiss="modal"&gt;&times;&lt;/a&gt;
&lt;button class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
&lt;h3&gt;Modal header&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="modal-body"&gt;
@@ -492,6 +493,20 @@ $('#myModal').on('hidden', function () {
&lt;/li&gt;
...
&lt;/ul&gt;</pre>
<p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt;
&lt;li class="dropdown"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
Dropdown
&lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Methods</h3>
<h4>$().dropdown()</h4>
<p>A programatic api for activating menus for a given navbar or tabbed navigation.</p>
@@ -570,6 +585,14 @@ $('#myModal').on('hidden', function () {
<strong>Heads up!</strong>
Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
</div>
<h3>Methods</h3>
<h4>.scrollspy('refresh')</h4>
<p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
<pre class="prettyprint linenums">
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
</pre>
<h3>Options</h3>
<table class="table table-bordered table-striped">
<thead>
@@ -589,6 +612,21 @@ $('#myModal').on('hidden', function () {
</tr>
</tbody>
</table>
<h3>Events</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>activate</td>
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
@@ -609,7 +647,7 @@ $('#myModal').on('hidden', function () {
<div class="span9 columns">
<h2>Example tabs</h2>
<p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p>
<ul id="tab" class="nav nav-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li class="dropdown">
@@ -636,10 +674,21 @@ $('#myModal').on('hidden', function () {
</div>
<hr>
<h2>Using bootstrap-tab.js</h2>
<p>Enable tabbable tabs via javascript:</p>
<pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
<p>Enable tabbable tabs via javascript (each tab needs to be activated individually):</p>
<pre class="prettyprint linenums">
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})</pre>
<p>You can activate individual tabs in several ways:</p>
<pre class="prettyprint linenums">
$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
</pre>
<h3>Markup</h3>
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the bootstrap tab styling.</p>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs"&gt;
&lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
@@ -650,10 +699,10 @@ $('#myModal').on('hidden', function () {
<h3>Methods</h3>
<h4>$().tab</h4>
<p>
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.
Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
</p>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs"&gt;
&lt;ul class="nav nav-tabs" id="myTab"&gt;
&lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#messages"&gt;Messages&lt;/a&gt;&lt;/li&gt;
@@ -669,7 +718,7 @@ $('#myModal').on('hidden', function () {
&lt;script&gt;
$(function () {
$('.tabs a:last').tab('show')
$('#myTab a:last').tab('show');
})
&lt;/script&gt;</pre>
<h3>Events</h3>
@@ -718,7 +767,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h2>Example use of Tooltips</h2>
<p>Hover over the links below to see tooltips:</p>
<div class="tooltip-demo well">
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div>
<hr>
@@ -771,7 +820,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<td>number | object</td>
<td>0</td>
<td>
<p>delay showing and hiding the tooltip (ms)</p>
<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
</td>
@@ -880,7 +929,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<td>number | object</td>
<td>0</td>
<td>
<p>delay showing and hiding the popover (ms)</p>
<p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
</td>
@@ -893,7 +942,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</div>
<h3>Markup</h3>
<p>
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
</p>
<h3>Methods</h3>
<h4>$().popover(options)</h4>
@@ -929,11 +978,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h2>Example alerts</h2>
<p>The alerts plugin works on regular alert messages, and block messages.</p>
<div class="alert fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
<button class="close" data-dismiss="alert">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-block alert-error fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
<button class="close" data-dismiss="alert">&times;</button>
<h4 class="alert-heading">Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
@@ -1039,7 +1088,7 @@ $('#my-alert').bind('closed', function () {
<hr>
<h2>Using bootstrap-button.js</h2>
<p>Enable buttons via javascript:</p>
<pre class="prettyprint linenums">$('.tabs').button()</pre>
<pre class="prettyprint linenums">$('.nav-tabs').button()</pre>
<h3>Markup</h3>
<p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
<pre class="prettyprint linenums">
@@ -1101,7 +1150,8 @@ $('#my-alert').bind('closed', function () {
<h3>About</h3>
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
<a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">Download file</a>
</div>
<p class="muted"><strong>*</strong> Requires the Transitions plugin to be included.</p>
</div>
<div class="span9 columns">
<h2>Example accordion</h2>
<p>Using the collapse plugin, we built a simple accordion style widget:</p>
@@ -1308,7 +1358,7 @@ $('#myCollapsible').on('hidden', function () {
<td>interval</td>
<td>number</td>
<td>5000</td>
<td>The amount of time to delay between automatically cycling an item.</td>
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
</tr>
<tr>
<td>pause</td>