rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Merge branch '2.0-wip' of github.com:twitter/bootstrap into 2.0-wip

Browse Source
This commit is contained in:
Mark Otto 2012-01-24 12:28:37 -08:00
commit f32866c2fc
3 changed files with 234 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/javascript.html
View File

@ -914,7 +914,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>Closes an alert.</p>
<pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
<h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -935,7 +935,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</table>
<pre class="prettyprint linenums">
$('#my-alert').bind('closed', function () {
// do something ...
// do something…
})</pre>
</div>
</div>
@ -1024,7 +1024,7 @@ $('#my-alert').bind('closed', function () {
<h4>$().button('toggle')</h4>
<p>Toggles push state. Gives btn the look that it's been activated.</p>
<p><span class="label notice">Notice</span> You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-toggle="button" &gt;...&lt;/button&gt;</pre>
<pre class="prettyprint linenums">&lt;button class="btn" data-toggle="button" &gt;…&lt;/button&gt;</pre>
<h4>$().button('loading')</h4>
<p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
</p>
@ -1166,7 +1166,7 @@ $('#myCollapsible').collapse({
</thead>
<tbody>
<tr>
<td>show</td>
<td>show/td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
@ -1188,7 +1188,7 @@ $('#myCollapsible').collapse({
<pre class="prettyprint linenums">
$('#myCollapsible').on('hidden', function () {
// do something ...
// do something…
})</pre>
</div>
</div>
@ -1293,7 +1293,7 @@ $('.myCarousel').carousel({
<h4>.carousel('next')</h4>
<p>Cycles to the next item.</p>
<h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>

454
docs/templates/pages/javascript.mustache vendored
View File

@ -658,52 +658,52 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
</tr>
<tr>
<td>placement</td>
<td>string</td>
<td>{{_i}}placement{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>'top'</td>
<td>how to position the tooltip - top | bottom | left | right</td>
<td>{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right</td>
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>{{_i}}selector{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>false</td>
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
<td>{{_i}}If a selector is provided, tooltip objects will be delegated to the specified targets.{{/i}}</td>
</tr>
<tr>
<td>title</td>
<td>string | function</td>
<td>{{_i}}title{{/i}}</td>
<td>{{_i}}string | function{{/i}}</td>
<td>''</td>
<td>default title value if `title` tag isn't present</td>
<td>{{_i}}default title value if `title` tag isn't present{{/i}}</td>
</tr>
<tr>
<td>trigger</td>
<td>string</td>
<td>{{_i}}trigger{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>'hover'</td>
<td>how tooltip is triggered - hover | focus | manual</td>
<td>{{_i}}how tooltip is triggered{{/i}} - hover | focus | manual</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>{{_i}}delay{{/i}}</td>
<td>{{_i}}number | object{{/i}}</td>
<td>0</td>
<td>
<p>delay showing/hiding the tooltip (ms)</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>
<p>{{_i}}delay showing/hiding the tooltip (ms){{/i}}</p>
<p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
</td>
</tr>
</tbody>
</table>
<p><span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</code></p>
<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 selector option.</p>
<h3>Methods</h3>
<h4>$().tooltip(options)</h4>
<p>Attaches a tooltip handler to an element collection.</p>
<p>{{_i}}<span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</code>{{/i}}</p>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().tooltip({{_i}}options{{/i}})</h4>
<p>{{_i}}Attaches a tooltip handler to an element collection.{{/i}}</p>
<h4>.tooltip('show')</h4>
<p>Reveals an elements tooltip.</p>
<p>{{_i}}Reveals an elements tooltip.{{/i}}</p>
<pre class="prettyprint linenums">$('#element').tooltip('show')</pre>
<h4>.tooltip('hide')</h4>
<p>Hides an elements tooltip.</p>
<p>{{_i}}Hides an elements tooltip.{{/i}}</p>
<pre class="prettyprint linenums">$('#element').tooltip('hide')</pre>
</div>
</div>
@ -715,97 +715,97 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
================================================== -->
<section id="popovers">
<div class="page-header">
<h1>Popovers <small>bootstrap-popover.js</small></h1>
<h1>{{_i}}Popovers{{/i}} <small>bootstrap-popover.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>About popovers</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="#tooltip">Tooltip</a> to be included</p>
<a href="../js/bootstrap-popover.js" target="_blank" class="btn">Download file</a>
<h3>{{_i}}About popovers{{/i}}</h3>
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
<p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltip">Tooltip</a> to be included{{/i}}</p>
<a href="../js/bootstrap-popover.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
<h2>Example hover popover</h2>
<p>Hover over the button to trigger the popover.</p>
<h2>{{_i}}Example hover popover{{/i}}</h2>
<p>{{_i}}Hover over the button to trigger the popover.{{/i}}</p>
<div class="well">
<a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
<a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}hover for popover{{/i}}</a>
</div>
<hr>
<h2>Using bootstrap-popover.js</h2>
<p>Enable popovers via javascript:</p>
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
<h3>Options</h3>
<h2>{{_i}}Using bootstrap-popover.js{{/i}}</h2>
<p>{{_i}}Enable popovers via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
<h3>{{_i}}Options{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
<th style="width: 100px;">{{_i}}Name{{/i}}</th>
<th style="width: 100px;">{{_i}}type{{/i}}</th>
<th style="width: 50px;">{{_i}}default{{/i}}</th>
<th>{{_i}}description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation</td>
<td>boolean</td>
<td>{{_i}}animation{{/i}}</td>
<td>{{_i}}boolean{{/i}}</td>
<td>true</td>
<td>apply a css fade transition to the tooltip</td>
<td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
</tr>
<tr>
<td>placement</td>
<td>string</td>
<td>{{_i}}placement{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>'right'</td>
<td>how to position the popover - top | bottom | left | right</td>
<td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>{{_i}}selector{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>false</td>
<td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
<td>{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}</td>
</tr>
<tr>
<td>trigger</td>
<td>string</td>
<td>{{_i}}trigger{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>'hover'</td>
<td>how tooltip is triggered - hover | focus | manual</td>
<td>{{_i}}how tooltip is triggered{{/i}} - hover | focus | manual</td>
</tr>
<tr>
<td>title</td>
<td>string | function</td>
<td>{{_i}}title{{/i}}</td>
<td>{{_i}}string | function{{/i}}</td>
<td>''</td>
<td>default title value if `title` attribute isn't present</td>
<td>{{_i}}default title value if `title` attribute isn't present{{/i}}</td>
</tr>
<tr>
<td>content</td>
<td>string | function</td>
<td>{{_i}}content{{/i}}</td>
<td>{{_i}}string | function{{/i}}</td>
<td>''</td>
<td>default content value if `data-content` attribute isn't present</td>
<td>{{_i}}default content value if `data-content` attribute isn't present{{/i}}</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>{{_i}}delay{{/i}}</td>
<td>{{_i}}number | object{{/i}}</td>
<td>0</td>
<td>
<p>delay showing/hiding the popover (ms)</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>
<p>{{_i}}delay showing/hiding the popover (ms){{/i}}</p>
<p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
</td>
</tr>
</tbody>
</table>
<p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
<h3>Markup</h3>
<p>{{_i}}<span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code>{{/i}}</p>
<h3>{{_i}}Markup{{/i}}</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.
{{_i}}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.{{/i}}
</p>
<h3>Methods</h3>
<h4>$().popover(options)</h4>
<p>Initializes popovers for an element collection.</p>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().popover({{_i}}options{{/i}})</h4>
<p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
<h4>.popover('show')</h4>
<p>Reveals an elements popover.</p>
<p>{{_i}}Reveals an elements popover.{{/i}}</p>
<pre class="prettyprint linenums">$('#element').popover('show')</pre>
<h4>.popover('hide')</h4>
<p>Hides an elements popover.</p>
<p>{{_i}}Hides an elements popover.{{/i}}</p>
<pre class="prettyprint linenums">$('#element').popover('hide')</pre>
</div>
</div>
@ -817,65 +817,65 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
================================================== -->
<section id="alerts">
<div class="page-header">
<h1>Alert messages <small>bootstrap-alert.js</small></h1>
<h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>About alerts</h3>
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
<a href="../js/bootstrap-alerts.js" target="_blank" class="btn">Download</a>
<h3>{{_i}}About alerts{{/i}}</h3>
<p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
<a href="../js/bootstrap-alerts.js" target="_blank" class="btn">{{_i}}Download{{/i}}</a>
</div>
<div class="span9 columns">
<h2>Example alerts</h2>
<p>The alerts plugin works on regular alert messages, and block messages.</p>
<h2>{{_i}}Example alerts{{/i}}</h2>
<p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p>
<div class="alert fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
<strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you’re not looking too good.{{/i}}
</div>
<div class="alert alert-block alert-error fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
<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>
<h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
<p>{{_i}}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.{{/i}}</p>
<p>
<a class="btn danger small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
<a class="btn danger small" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn small" href="#">{{_i}}Or do this{{/i}}</a>
</p>
</div>
<hr>
<h2>Using bootstrap-alerts.js</h2>
<p>Enable dismissal of an alert via javascript:</p>
<h2>{{_i}}Using bootstrap-alerts.js{{/i}}</h2>
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$(".alert-message").alert()</pre>
<h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.{{/i}}</p>
<pre class="prettyprint linenums">&lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
<h3>Methods</h3>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().alert()</h4>
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
<p>{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.{{/i}}</p>
<h4>.alert('close')</h4>
<p>Closes an alert.</p>
<p>{{_i}}Closes an alert.{{/i}}</p>
<pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
<h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p>
<h3>{{_i}}Events{{/i}}</h3>
<p>{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
<th style="width: 150px;">{{_i}}Event{{/i}}</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>close</td>
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
<td>{{_i}}close{{/i}}</td>
<td>{{_i}}This event fires immediately when the <code>close</code> instance method is called.{{/i}}</td>
</tr>
<tr>
<td>closed</td>
<td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
<td>{{_i}}closed{{/i}}</td>
<td>{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
$('#my-alert').bind('closed', function () {
// do something ...
// {{_i}}do something…{{/i}}
})</pre>
</div>
</div>
@ -887,61 +887,61 @@ $('#my-alert').bind('closed', function () {
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>Buttons <small>bootstrap-button.js</small></h1>
<h1>{{_i}}Buttons{{/i}} <small>bootstrap-button.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>About</h3>
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
<a href="../js/bootstrap-button.js" target="_blank" class="btn">Download file</a>
<h3>{{_i}}About{{/i}}</h3>
<p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
<a href="../js/bootstrap-button.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
<h2>Example uses</h2>
<p>Use the buttons plugin for states and toggles.</p>
<h2>{{_i}}Example uses{{/i}}</h2>
<p>{{_i}}Use the buttons plugin for states and toggles.{{/i}}</p>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td>Stateful</td>
<td>{{_i}}Stateful{{/i}}</td>
<td>
<button id="fat-btn" data-loading-text="loading..." class="btn primary">
Loading State
{{_i}}Loading State{{/i}}
</button>
</td>
</tr>
<tr>
<td>Single toggle</td>
<td>{{_i}}Single toggle{{/i}}</td>
<td>
<button class="btn primary" data-toggle="button">Single Toggle</button>
<button class="btn primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
</td>
</tr>
<tr>
<td>Checkbox</td>
<td>{{_i}}Checkbox{{/i}}</td>
<td>
<div class="btn-group" data-toggle="buttons-checkbox">
<button class="btn primary">Left</button>
<button class="btn primary">Middle</button>
<button class="btn primary">Right</button>
<button class="btn primary">{{_i}}Left{{/i}}</button>
<button class="btn primary">{{_i}}Middle{{/i}}</button>
<button class="btn primary">{{_i}}Right{{/i}}</button>
</div>
</td>
</tr>
<tr>
<td>Radio</td>
<td>{{_i}}Radio{{/i}}</td>
<td>
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn primary">Left</button>
<button class="btn primary">Middle</button>
<button class="btn primary">Right</button>
<button class="btn primary">{{_i}}Left{{/i}}</button>
<button class="btn primary">{{_i}}Middle{{/i}}</button>
<button class="btn primary">{{_i}}Right{{/i}}</button>
</div>
</td>
</tr>
</tbody>
</table>
<hr>
<h2>Using bootstrap-button.js</h2>
<p>Enable buttons via javascript:</p>
<h2>{{_i}}Using bootstrap-button.js{{/i}}</h2>
<p>{{_i}}Enable buttons via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('.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>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;!-- Add data-toggle="button" to activate toggling on a single button --&gt;
&lt;button class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;
@ -960,22 +960,22 @@ $('#my-alert').bind('closed', function () {
&lt;button class="btn"&gt;Right&lt;/button&gt;
&lt;/div&gt;
</pre>
<h3>Methods</h3>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().button('toggle')</h4>
<p>Toggles push state. Gives btn the look that it's been activated.</p>
<p><span class="label notice">Notice</span> You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-toggle="button" &gt;...&lt;/button&gt;</pre>
<p>{{_i}}Toggles push state. Gives btn the look that it's been activated.{{/i}}</p>
<p>{{_i}}<span class="label notice">Notice</span> You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.{{/i}}</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-toggle="button" &gt;…&lt;/button&gt;</pre>
<h4>$().button('loading')</h4>
<p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
<p>{{_i}}Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.{{/i}}
</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-loading-text="loading stuff..." &gt;...&lt;/button&gt;</pre>
<p>
<span class="label notice">Notice</span> Firefox persists the disabled state across page loads. A workaround for this is to use: <code>autocomplete="off"</code>. More info can be found <a href="https://github.com/twitter/bootstrap/issues/793">here</a>.
{{_i}}<span class="label notice">Notice</span> Firefox persists the disabled state across page loads. A workaround for this is to use: <code>autocomplete="off"</code>. More info can be found <a href="https://github.com/twitter/bootstrap/issues/793">here</a>.{{/i}}
</p>
<h4>$().button('reset')</h4>
<p>Resets button state - swaps text to original text.</p>
<p>{{_i}}Resets button state - swaps text to original text.{{/i}}</p>
<h4>$().button(string)</h4>
<p>Resets button state - swaps text to any data defined text state.</p>
<p>{{_i}}Resets button state - swaps text to any data defined text state.{{/i}}</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
&lt;script&gt;
$('.btn').button('complete')
@ -990,23 +990,23 @@ $('#my-alert').bind('closed', function () {
================================================== -->
<section id="collapse">
<div class="page-header">
<h1>Collapse <small>bootstrap-collapse.js</small></h1>
<h1>{{_i}}Collapse{{/i}} <small>bootstrap-collapse.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>About</h3>
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
<a href="../js/bootstrap-collapse.js" target="_blank" class="btn">Download file</a>
<h3>{{_i}}About{{/i}}</h3>
<p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
<a href="../js/bootstrap-collapse.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
<h2>Example accordion</h2>
<p>Using the collapse plugin, we built a simple accordion style widget:</p>
<h2>{{_i}}Example accordion{{/i}}</h2>
<p>{{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}</p>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
{{_i}}Collapsible Group Item #1{{/i}}
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
@ -1018,7 +1018,7 @@ $('#my-alert').bind('closed', function () {
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
{{_i}}Collapsible Group Item #2{{/i}}
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
@ -1030,7 +1030,7 @@ $('#my-alert').bind('closed', function () {
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
{{_i}}Collapsible Group Item #3{{/i}}
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
@ -1043,92 +1043,92 @@ $('#my-alert').bind('closed', function () {
<hr>
<h2>Using bootstrap-collapse.js</h2>
<h2>{{_i}}Using bootstrap-collapse.js{{/i}}</h2>
<p>Enable via javascript:</p>
<pre class="prettyprint linenums">$(".collapse").collapse()</pre>
<h3>Options</h3>
<h3>{{_i}}Options{{/i}}</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>
<th style="width: 100px;">{{_i}}Name{{/i}}</th>
<th style="width: 50px;">{{_i}}type{{/i}}</th>
<th style="width: 50px;">{{_i}}default{{/i}}</th>
<th>{{_i}}description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>parent</td>
<td>selector</td>
<td>{{_i}}parent{{/i}}</td>
<td>{{_i}}selector{{/i}}</td>
<td>false</td>
<td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td>
<td>{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior){{/i}}</td>
</tr>
<tr>
<td>toggle</td>
<td>boolean</td>
<td>{{_i}}toggle{{/i}}</td>
<td>{{_i}}boolean{{/i}}</td>
<td>true</td>
<td>Toggles the collapsible element on invocation</td>
<td>{{_i}}Toggles the collapsible element on invocation{{/i}}</td>
</tr>
</tbody>
</table>
<h3>Markup</h3>
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;button class="btn danger" data-toggle="collapse" data-target="#demo"&gt;
simple collapsible
{{_i}}simple collapsible{{/i}}
&lt;/button&gt;
&lt;div id="demo" class="collapse in"&gt; … &lt;/div&gt;</pre>
<p><span class="label notice">Notice</span> To add accordion like group management to a collapsible control just add the additional data attribute <code>data-parent="#selector"</code>. Refer to the demo below to see this in action.</p>
<h3>Methods</h3>
<h4>.collapse(options)</h4>
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
<p>{{_i}}<span class="label notice">Notice</span> To add accordion like group management to a collapsible control just add the additional data attribute <code>data-parent="#selector"</code>. Refer to the demo below to see this in action.{{/i}}</p>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>.collapse({{_i}}options{{/i}})</h4>
<p>{{_i}}Activates your content as a collapsible element. Accepts an optional options <code>object</code>.{{/i}}
<pre class="prettyprint linenums">
$('#myCollapsible').collapse({
toggle: false
})</pre>
<h4>.collapse('toggle')</h4>
<p>Toggles a collapsible element to shown or hidden.</p>
<p>{{_i}}Toggles a collapsible element to shown or hidden.{{/i}}</p>
<h4>.collapse('show')</h4>
<p>Shows a collapsible element.</p>
<p>{{_i}}Shows a collapsible element.{{/i}}</p>
<h4>.collapse('hide')</h4>
<p>Hides a collapsible element.</p>
<h3>Events</h3>
<p>{{_i}}Hides a collapsible element.{{/i}}</p>
<h3>{{_i}}Events{{/i}}</h3>
<p>
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
{{_i}}Bootstrap's collapse class exposes a few events for hooking into collapse functionality.{{/i}}
</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
<th style="width: 150px;">{{_i}}Event{{/i}}</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
<td>{{_i}}show{{/i}}/td>
<td>{{_i}}This event fires immediately when the <code>show</code> instance method is called.{{/i}}</td>
</tr>
<tr>
<td>shown</td>
<td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td>
<td>{{_i}}shown{{/i}}</td>
<td>{{_i}}This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).{{/i}}</td>
</tr>
<tr>
<td>hide</td>
<td>{{_i}}hide{{/i}}</td>
<td>
This event is fired immediately when the <code>hide</code> method has been called.
{{_i}}This event is fired immediately when the <code>hide</code> method has been called.{{/i}}
</td>
</tr>
<tr>
<td>hidden</td>
<td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td>
<td>{{_i}}hidden{{/i}}</td>
<td>{{_i}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
$('#myCollapsible').on('hidden', function () {
// do something ...
// {{_i}}do something…{{/i}}
})</pre>
</div>
</div>
@ -1140,37 +1140,37 @@ $('#myCollapsible').on('hidden', function () {
================================================== -->
<section id="carousel">
<div class="page-header">
<h1>Carousel <small>bootstrap-carousel.js</small></h1>
<h1>{{_i}}Carousel{{/i}} <small>bootstrap-carousel.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>About</h3>
<p>A generic plugin for cycling through elements. A merry-go-round.</p>
<a href="../js/bootstrap-carousel.js" target="_blank" class="btn">Download file</a>
<h3>{{_i}}About{{/i}}</h3>
<p>{{_i}}A generic plugin for cycling through elements. A merry-go-round.{{/i}}</p>
<a href="../js/bootstrap-carousel.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
<h2>Example carousel</h2>
<p>Watch the slideshow below.</p>
<h2>{{_i}}Example carousel{{/i}}</h2>
<p>{{_i}}Watch the slideshow below.{{/i}}</p>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1000x500" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<h4>{{_i}}First Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1000x500" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<h4>{{_i}}Second Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1000x500" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<h4>{{_i}}Third Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
@ -1179,30 +1179,30 @@ $('#myCollapsible').on('hidden', function () {
<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
<hr>
<h2>Using bootstrap-carousel.js</h2>
<p>Call via javascript:</p>
<h2>{{_i}}Using bootstrap-carousel.js{{/i}}</h2>
<p>{{_i}}Call via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
<h3>Options</h3>
<h3>{{_i}}Options{{/i}}</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>
<th style="width: 100px;">{{_i}}Name{{/i}}</th>
<th style="width: 50px;">{{_i}}type{{/i}}</th>
<th style="width: 50px;">{{_i}}default{{/i}}</th>
<th>{{_i}}description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>interval</td>
<td>number</td>
<td>{{_i}}interval{{/i}}</td>
<td>{{_i}}number{{/i}}</td>
<td>5000</td>
<td>The amount of type to delay between automatically cycling an item.</td>
<td>{{_i}}The amount of type to delay between automatically cycling an item.{{/i}}</td>
</tr>
</tbody>
</table>
<h3>Markup</h3>
<p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="carousel"&gt;
&lt;!-- Carousel items --&gt;
@ -1214,41 +1214,41 @@ $('#myCollapsible').on('hidden', function () {
&lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
&lt;/div&gt;
</pre>
<h3>Methods</h3>
<h4>.carousel(options)</h4>
<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>.carousel({{_i}}options{{/i}})</h4>
<p>{{_i}}Initializes the carousel with an optional options <code>object</code> and starts cycling through items.{{/i}}</p>
<pre class="prettyprint linenums">
$('.myCarousel').carousel({
interval: 2000
})
</pre>
<h4>.carousel('cycle')</h4>
<p>Cycles through the carousel items from left to right.</p>
<p>{{_i}}Cycles through the carousel items from left to right.{{/i}}</p>
<h4>.carousel('pause')</h4>
<p>Stops the carousel from cycling through items.</p>
<p>{{_i}}Stops the carousel from cycling through items.{{/i}}</p>
<h4>.carousel(number)</h4>
<p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
<p>{{_i}}Cycles the carousel to a particular frame (0 based, similar to an array).{{/i}}</p>
<h4>.carousel('prev')</h4>
<p>Cycles to the previous item.</p>
<p>{{_i}}Cycles to the previous item.{{/i}}</p>
<h4>.carousel('next')</h4>
<p>Cycles to the next item.</p>
<h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
<p>{{_i}}Cycles to the next item.{{/i}}</p>
<h3>{{_i}}Events{{/i}}</h3>
<p>{{_i}}Bootstrap's modal class exposes a few events for hooking into modal functionality.{{/i}}</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
<th style="width: 150px;">{{_i}}Event{{/i}}</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>slide</td>
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
<td>{{_i}}slide{{/i}}</td>
<td>{{_i}}This event fires immediately when the <code>slide</code> instance method is invoked.{{/i}}</td>
</tr>
<tr>
<td>slid</td>
<td>This event is fired when the carousel has completed it's slide transition.</td>
<td>{{_i}}slid{{/i}}</td>
<td>{{_i}}This event is fired when the carousel has completed it's slide transition.{{/i}}</td>
</tr>
</tr>
</tbody>
@ -1263,46 +1263,46 @@ $('.myCarousel').carousel({
================================================== -->
<section id="typeahead">
<div class="page-header">
<h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
<h1>{{_i}}Typeahead{{/i}} <small>bootstrap-typeahead.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>About</h3>
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
<a href="../js/bootstrap-typeahead.js" target="_blank" class="btn">Download file</a>
<h3>{{_i}}About{{/i}}</h3>
<p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
<a href="../js/bootstrap-typeahead.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
<h2>Example</h2>
<p>Start typing in the field below to show the typeahead results.</p>
<h2>{{_i}}Example{{/i}}</h2>
<p>{{_i}}Start typing in the field below to show the typeahead results.{{/i}}</p>
<div class="well">
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-data='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
</div>
<hr>
<h2>Using bootstrap-typeahead.js</h2>
<p>Call the typeahead via javascript:</p>
<h2>{{_i}}Using bootstrap-typeahead.js{{/i}}</h2>
<p>{{_i}}Call the typeahead via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
<h3>Options</h3>
<h3>{{_i}}Options{{/i}}</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>
<th style="width: 100px;">{{_i}}Name{{/i}}</th>
<th style="width: 50px;">{{_i}}type{{/i}}</th>
<th style="width: 50px;">{{_i}}default{{/i}}</th>
<th>{{_i}}description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>items</td>
<td>number</td>
<td>{{_i}}items{{/i}}</td>
<td>{{_i}}number{{/i}}</td>
<td>8</td>
<td>The max number of items to display in the dropdown.</td>
<td>{{_i}}The max number of items to display in the dropdown.{{/i}}</td>
</tr>
</tbody>
</table>
<h3>Markup</h3>
<p>Add data attributes to register an element with typeahead functionality.</p>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Add data attributes to register an element with typeahead functionality.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;input type="text" data-provide="typeahead"&gt;
</pre>

2
js/tests/vendor/jquery.js vendored
View File

@ -1461,7 +1461,7 @@ jQuery.support = (function() {
// Check if div with explicit width and no margin-right incorrectly
// gets computed margin-right based on width of container. For more
// info see bug #3333
// Fails in WebKit before Feb 2012 nightlies
// Fails in WebKit before Feb 2011 nightlies
// WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
if ( window.getComputedStyle ) {
marginDiv = document.createElement( "div" );