<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>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>.
@@ -658,52 +658,52 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -658,52 +658,52 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
<td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
</tr>
</tr>
<tr>
<tr>
<td>placement</td>
<td>{{_i}}placement{{/i}}</td>
<td>string</td>
<td>{{_i}}string{{/i}}</td>
<td>'top'</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>
<tr>
<tr>
<td>selector</td>
<td>{{_i}}selector{{/i}}</td>
<td>string</td>
<td>{{_i}}string{{/i}}</td>
<td>false</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>
<tr>
<tr>
<td>title</td>
<td>{{_i}}title{{/i}}</td>
<td>string | function</td>
<td>{{_i}}string | function{{/i}}</td>
<td>''</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>
<tr>
<tr>
<td>trigger</td>
<td>{{_i}}trigger{{/i}}</td>
<td>string</td>
<td>{{_i}}string{{/i}}</td>
<td>'hover'</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>
<tr>
<tr>
<td>delay</td>
<td>{{_i}}delay{{/i}}</td>
<td>number | object</td>
<td>{{_i}}number | object{{/i}}</td>
<td>0</td>
<td>0</td>
<td>
<td>
<p>delay showing/hiding the tooltip (ms)</p>
<p>{{_i}}delay showing/hiding the tooltip (ms){{/i}}</p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
</td>
</td>
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
<p><spanclass="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</code></p>
<p>{{_i}}<spanclass="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</code>{{/i}}</p>
<h3>Markup</h3>
<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 selector option.</p>
<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>Methods</h3>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().tooltip(options)</h4>
<h4>$().tooltip({{_i}}options{{/i}})</h4>
<p>Attaches a tooltip handler to an element collection.</p>
<p>{{_i}}Attaches a tooltip handler to an element collection.{{/i}}</p>
<p>Hover over the button to trigger the popover.</p>
<p>{{_i}}Hover over the button to trigger the popover.{{/i}}</p>
<divclass="well">
<divclass="well">
<ahref="#"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>
<ahref="#"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>
</div>
<hr>
<hr>
<h2>Using bootstrap-popover.js</h2>
<h2>{{_i}}Using bootstrap-popover.js{{/i}}</h2>
<p>Enable popovers via javascript:</p>
<p>{{_i}}Enable popovers via javascript:{{/i}}</p>
<td>apply a css fade transition to the tooltip</td>
<td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
</tr>
</tr>
<tr>
<tr>
<td>placement</td>
<td>{{_i}}placement{{/i}}</td>
<td>string</td>
<td>{{_i}}string{{/i}}</td>
<td>'right'</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>
<tr>
<tr>
<td>selector</td>
<td>{{_i}}selector{{/i}}</td>
<td>string</td>
<td>{{_i}}string{{/i}}</td>
<td>false</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>
<tr>
<tr>
<td>trigger</td>
<td>{{_i}}trigger{{/i}}</td>
<td>string</td>
<td>{{_i}}string{{/i}}</td>
<td>'hover'</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>
<tr>
<tr>
<td>title</td>
<td>{{_i}}title{{/i}}</td>
<td>string | function</td>
<td>{{_i}}string | function{{/i}}</td>
<td>''</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>
<tr>
<tr>
<td>content</td>
<td>{{_i}}content{{/i}}</td>
<td>string | function</td>
<td>{{_i}}string | function{{/i}}</td>
<td>''</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>
<tr>
<tr>
<td>delay</td>
<td>{{_i}}delay{{/i}}</td>
<td>number | object</td>
<td>{{_i}}number | object{{/i}}</td>
<td>0</td>
<td>0</td>
<td>
<td>
<p>delay showing/hiding the popover (ms)</p>
<p>{{_i}}delay showing/hiding the popover (ms){{/i}}</p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
</td>
</td>
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
<p><spanclass="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
<p>{{_i}}<spanclass="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code>{{/i}}</p>
<h3>Markup</h3>
<h3>{{_i}}Markup{{/i}}</h3>
<p>
<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>
</p>
<h3>Methods</h3>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().popover(options)</h4>
<h4>$().popover({{_i}}options{{/i}})</h4>
<p>Initializes popovers for an element collection.</p>
<p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
<h4class="alert-heading">Oh snap! You got an error!</h4>
<h4class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</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>{{_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>
<p>
<aclass="btn danger small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
<aclass="btn danger small"href="#">{{_i}}Take this action{{/i}}</a><aclass="btn small"href="#">{{_i}}Or do this{{/i}}</a>
</p>
</p>
</div>
</div>
<hr>
<hr>
<h2>Using bootstrap-alerts.js</h2>
<h2>{{_i}}Using bootstrap-alerts.js{{/i}}</h2>
<p>Enable dismissal of an alert via javascript:</p>
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
<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>
<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}}
<spanclass="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 <ahref="https://github.com/twitter/bootstrap/issues/793">here</a>.
{{_i}}<spanclass="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 <ahref="https://github.com/twitter/bootstrap/issues/793">here</a>.{{/i}}
</p>
</p>
<h4>$().button('reset')</h4>
<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>
<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>
<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>
<tr>
<tr>
<td>toggle</td>
<td>{{_i}}toggle{{/i}}</td>
<td>boolean</td>
<td>{{_i}}boolean{{/i}}</td>
<td>true</td>
<td>true</td>
<td>Toggles the collapsible element on invocation</td>
<td>{{_i}}Toggles the collapsible element on invocation{{/i}}</td>
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
<h3>Markup</h3>
<h3>{{_i}}Markup{{/i}}</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>
<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>
<p><spanclass="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>
<p>{{_i}}<spanclass="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>Methods</h3>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>.collapse(options)</h4>
<h4>.collapse({{_i}}options{{/i}})</h4>
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
<p>{{_i}}Activates your content as a collapsible element. Accepts an optional options <code>object</code>.{{/i}}
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
$('#myCollapsible').collapse({
$('#myCollapsible').collapse({
toggle: false
toggle: false
})</pre>
})</pre>
<h4>.collapse('toggle')</h4>
<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>
<h4>.collapse('show')</h4>
<p>Shows a collapsible element.</p>
<p>{{_i}}Shows a collapsible element.{{/i}}</p>
<h4>.collapse('hide')</h4>
<h4>.collapse('hide')</h4>
<p>Hides a collapsible element.</p>
<p>{{_i}}Hides a collapsible element.{{/i}}</p>
<h3>Events</h3>
<h3>{{_i}}Events{{/i}}</h3>
<p>
<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>
</p>
<tableclass="table table-bordered table-striped">
<tableclass="table table-bordered table-striped">
<thead>
<thead>
<tr>
<tr>
<thstyle="width: 150px;">Event</th>
<thstyle="width: 150px;">{{_i}}Event{{/i}}</th>
<th>Description</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</tr>
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>show</td>
<td>{{_i}}show{{/i}}/td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
<td>{{_i}}This event fires immediately when the <code>show</code> instance method is called.{{/i}}</td>
</tr>
</tr>
<tr>
<tr>
<td>shown</td>
<td>{{_i}}shown{{/i}}</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}}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>
<tr>
<tr>
<td>hide</td>
<td>{{_i}}hide{{/i}}</td>
<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>
</td>
</tr>
</tr>
<tr>
<tr>
<td>hidden</td>
<td>{{_i}}hidden{{/i}}</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}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}</td>
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
$('#myCollapsible').on('hidden', function () {
$('#myCollapsible').on('hidden', function () {
// do something ...
// {{_i}}do something…{{/i}}
})</pre>
})</pre>
</div>
</div>
</div>
</div>
...
@@ -1140,37 +1140,37 @@ $('#myCollapsible').on('hidden', function () {
...
@@ -1140,37 +1140,37 @@ $('#myCollapsible').on('hidden', function () {
<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>
<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>
</div>
<divclass="item">
<divclass="item">
<imgsrc="http://placehold.it/1000x500"alt="">
<imgsrc="http://placehold.it/1000x500"alt="">
<divclass="carousel-caption">
<divclass="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>
<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>
</div>
<divclass="item">
<divclass="item">
<imgsrc="http://placehold.it/1000x500"alt="">
<imgsrc="http://placehold.it/1000x500"alt="">
<divclass="carousel-caption">
<divclass="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>
<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>
</div>
...
@@ -1179,30 +1179,30 @@ $('#myCollapsible').on('hidden', function () {
...
@@ -1179,30 +1179,30 @@ $('#myCollapsible').on('hidden', function () {
