<p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p>
...
...
@@ -1051,44 +1053,46 @@ For example, <code><section></code> should be wrapped as inline.
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td>
<code>.danger</code>
</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td>
<code>.warning</code>
</td>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<td>
<code>.active</code>
</td>
<td>Applies the hover color to a particular row or cell</td>
</tr>
</tbody>
</table>
</div>
<divclass="bs-example">
<tableclass="table">
<thead>
...
...
@@ -1528,11 +1532,7 @@ For example, <code><section></code> should be wrapped as inline.
{% endhighlight %}
<h2id="forms-extending">Extending form controls</h2>
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
<h3id="forms-input-groups">Input groups</h3>
<h2id="forms-input-groups">Input groups</h3>
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p>
<divclass="bs-callout bs-callout-danger">
...
...
@@ -1545,216 +1545,239 @@ For example, <code><section></code> should be wrapped as inline.
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
@@ -1823,7 +1846,7 @@ For example, <code><section></code> should be wrapped as inline.
</div>
{% endhighlight %}
<h3id="forms-help-text">Help text</h3>
<h2id="forms-help-text">Help text</h2>
<p>Block level help text for form controls.</p>
<formclass="bs-example">
<inputtype="text"class="form-control">
...
...
@@ -2082,7 +2105,7 @@ For example, <code><section></code> should be wrapped as inline.
<pclass="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
<p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>
<p>In addition, <strong>Internet Explorer 8 requires the use of <ahref="https://github.com/scottjehl/Respond">respond.js</a> to enable media query support.</strong></p>
<h3>IE Compatibility modes</h3>
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including <code><meta http-equiv="X-UA-Compatible" content="IE=edge"></code> in your pages. See <ahref="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>meta</code> tag in your pages.</p>
<p>See <ahref="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
@@ -228,45 +228,47 @@ $('#myModal').on('show.bs.modal', function (e) {
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">type</th>
<thstyle="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. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</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>Shows the modal when initialized.</td>
</tr>
<tr>
<td>remote</td>
<td>path</td>
<td>false</td>
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">type</th>
<thstyle="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. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</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>Shows the modal when initialized.</td>
</tr>
<tr>
<td>remote</td>
<td>path</td>
<td>false</td>
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 100px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>offset</td>
<td>number</td>
<td>10</td>
<td>Pixels to offset from top when calculating position of scroll.</td>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 100px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>offset</td>
<td>number</td>
<td>10</td>
<td>Pixels to offset from top when calculating position of scroll.</td>
</tr>
</tbody>
</table>
</div><!-- ./bs-table-scrollable -->
<h3>Events</h3>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 150px;">Event Type</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>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 150px;">Event Type</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><!-- ./bs-table-scrollable -->
{% highlight js %}
$('#myScrollspy').on('activate.bs.scrollspy', function () {
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
<td>shown</td>
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
<td>shown</td>
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 100px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation</td>
<td>boolean</td>
<td>true</td>
<td>apply a CSS fade transition to the tooltip</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td>placement</td>
<td>string | function</td>
<td>'top'</td>
<td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>false</td>
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
</tr>
<tr>
<td>title</td>
<td>string | function</td>
<td>''</td>
<td>default title value if <code>title</code> tag isn't present</td>
</tr>
<tr>
<td>trigger</td>
<td>string</td>
<td>'hover focus'</td>
<td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<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>
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
</td>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 100px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation</td>
<td>boolean</td>
<td>true</td>
<td>apply a CSS fade transition to the tooltip</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td>placement</td>
<td>string | function</td>
<td>'top'</td>
<td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>false</td>
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
</tr>
<tr>
<td>title</td>
<td>string | function</td>
<td>''</td>
<td>default title value if <code>title</code> tag isn't present</td>
</tr>
<tr>
<td>trigger</td>
<td>string</td>
<td>'hover focus'</td>
<td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<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>
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
</td>
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
<divclass="bs-callout bs-callout-info">
<h4>Data attributes for individual tooltips</h4>
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
<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 tooltip 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 tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 150px;">Event Type</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 tooltip 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 tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
...
...
@@ -970,78 +984,80 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 100px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation</td>
<td>boolean</td>
<td>true</td>
<td>apply a CSS fade transition to the tooltip</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td>placement</td>
<td>string | function</td>
<td>'right'</td>
<td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>false</td>
<td>if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See <ahref="https://github.com/twbs/bootstrap/issues/4215">this</a> and <ahref="http://jsfiddle.net/KPeKS/4/">an informative example</a>.</td>
<td>default title value if <code>title</code> attribute isn't present</td>
</tr>
<tr>
<td>content</td>
<td>string | function</td>
<td>''</td>
<td>default content value if <code>data-content</code> attribute isn't present</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<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>
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code></p>
</td>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 100px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation</td>
<td>boolean</td>
<td>true</td>
<td>apply a CSS fade transition to the tooltip</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td>placement</td>
<td>string | function</td>
<td>'right'</td>
<td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>false</td>
<td>if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See <ahref="https://github.com/twbs/bootstrap/issues/4215">this</a> and <ahref="http://jsfiddle.net/KPeKS/4/">an informative example</a>.</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 popover 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 popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 150px;">Event Type</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 popover 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 popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
...
...
@@ -1152,24 +1170,26 @@ $('#myPopover').on('hidden.bs.popover', function () {
<h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>close</td>
<td>This event fires immediately when the <code>close</code> instance method is called.</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>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>close</td>
<td>This event fires immediately when the <code>close</code> instance method is called.</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>
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
$('#my-alert').bind('closed.bs.alert', function () {
// do something…
...
...
@@ -1444,31 +1464,32 @@ $(".collapse").collapse()
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>parent</td>
<td>selector</td>
<td>false</td>
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
</tr>
<tr>
<td>toggle</td>
<td>boolean</td>
<td>true</td>
<td>Toggles the collapsible element on invocation</td>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>parent</td>
<td>selector</td>
<td>false</td>
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
</tr>
<tr>
<td>toggle</td>
<td>boolean</td>
<td>true</td>
<td>Toggles the collapsible element on invocation</td>
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 150px;">Event Type</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 a collapse element 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> method has been called.
</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>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 150px;">Event Type</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 a collapse element 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> method has been called.
</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>
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
...
...
@@ -1661,30 +1684,32 @@ $('.carousel').carousel()
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>interval</td>
<td>number</td>
<td>5000</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>
<td>string</td>
<td>"hover"</td>
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>interval</td>
<td>number</td>
<td>5000</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>
<td>string</td>
<td>"hover"</td>
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
<h3>Methods</h3>
...
...
@@ -1714,24 +1739,26 @@ $('.carousel').carousel({
<h3>Events</h3>
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>slide</td>
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
</tr>
<tr>
<td>slid</td>
<td>This event is fired when the carousel has completed its slide transition.</td>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>slide</td>
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
</tr>
<tr>
<td>slid</td>
<td>This event is fired when the carousel has completed its slide transition.</td>
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
...
...
@@ -1787,22 +1814,25 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 100px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>offset</td>
<td>number | function | object</td>
<td>10</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
</tr>
</tbody>
</table>
<divclass="bs-table-scrollable">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 100px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>offset</td>
<td>number | function | object</td>
<td>10</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
