<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>
<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.
...
@@ -1051,44 +1053,46 @@ For example, <code><section></code> should be wrapped as inline.
<td>Indicates a successful or positive action</td>
</td>
</tr>
<td>Indicates a successful or positive action</td>
<tr>
</tr>
<td>
<tr>
<code>.danger</code>
<td>
</td>
<code>.danger</code>
<td>Indicates a dangerous or potentially negative action</td>
</td>
</tr>
<td>Indicates a dangerous or potentially negative action</td>
<tr>
</tr>
<td>
<tr>
<code>.warning</code>
<td>
</td>
<code>.warning</code>
<td>Indicates a warning that might need attention</td>
</td>
</tr>
<td>Indicates a warning that might need attention</td>
<tr>
</tr>
<td>
<tr>
<code>.active</code>
<td>
</td>
<code>.active</code>
<td>Applies the hover color to a particular row or cell</td>
</td>
</tr>
<td>Applies the hover color to a particular row or cell</td>
</tbody>
</tr>
</table>
</tbody>
</table>
</div>
<divclass="bs-example">
<divclass="bs-example">
<tableclass="table">
<tableclass="table">
<thead>
<thead>
...
@@ -1528,11 +1532,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1528,11 +1532,7 @@ For example, <code><section></code> should be wrapped as inline.
{% endhighlight %}
{% endhighlight %}
<h2id="forms-input-groups">Input groups</h3>
<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>
<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>
<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">
<divclass="bs-callout bs-callout-danger">
...
@@ -1545,216 +1545,239 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -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>
<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.
...
@@ -1823,7 +1846,7 @@ For example, <code><section></code> should be wrapped as inline.
</div>
</div>
{% endhighlight %}
{% endhighlight %}
<h3id="forms-help-text">Help text</h3>
<h2id="forms-help-text">Help text</h2>
<p>Block level help text for form controls.</p>
<p>Block level help text for form controls.</p>
<formclass="bs-example">
<formclass="bs-example">
<inputtype="text"class="form-control">
<inputtype="text"class="form-control">
...
@@ -2082,7 +2105,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -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>
<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>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>
<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>
<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) {
...
@@ -228,45 +228,47 @@ $('#myModal').on('show.bs.modal', function (e) {
<h3>Options</h3>
<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>
<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">
<divclass="bs-table-scrollable">
<thead>
<tableclass="table table-bordered table-striped">
<tr>
<thead>
<thstyle="width: 100px;">Name</th>
<tr>
<thstyle="width: 50px;">type</th>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">default</th>
<thstyle="width: 50px;">type</th>
<th>description</th>
<thstyle="width: 50px;">default</th>
</tr>
<th>description</th>
</thead>
</tr>
<tbody>
</thead>
<tr>
<tbody>
<td>backdrop</td>
<tr>
<td>boolean</td>
<td>backdrop</td>
<td>true</td>
<td>boolean</td>
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
<td>true</td>
</tr>
<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>
<tr>
<td>boolean</td>
<td>keyboard</td>
<td>true</td>
<td>boolean</td>
<td>Closes the modal when escape key is pressed</td>
<td>true</td>
</tr>
<td>Closes the modal when escape key is pressed</td>
<tr>
</tr>
<td>show</td>
<tr>
<td>boolean</td>
<td>show</td>
<td>true</td>
<td>boolean</td>
<td>Shows the modal when initialized.</td>
<td>true</td>
</tr>
<td>Shows the modal when initialized.</td>
<tr>
</tr>
<td>remote</td>
<tr>
<td>path</td>
<td>remote</td>
<td>false</td>
<td>path</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>
<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>
<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">
<divclass="bs-table-scrollable">
<thead>
<tableclass="table table-bordered table-striped">
<tr>
<thead>
<thstyle="width: 100px;">Name</th>
<tr>
<thstyle="width: 100px;">type</th>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">default</th>
<thstyle="width: 100px;">type</th>
<th>description</th>
<thstyle="width: 50px;">default</th>
</tr>
<th>description</th>
</thead>
</tr>
<tbody>
</thead>
<tr>
<tbody>
<td>offset</td>
<tr>
<td>number</td>
<td>offset</td>
<td>10</td>
<td>number</td>
<td>Pixels to offset from top when calculating position of scroll.</td>
<td>10</td>
</tr>
<td>Pixels to offset from top when calculating position of scroll.</td>
</tbody>
</tr>
</table>
</tbody>
</table>
</div><!-- ./bs-table-scrollable -->
<h3>Events</h3>
<h3>Events</h3>
<tableclass="table table-bordered table-striped">
<divclass="bs-table-scrollable">
<thead>
<tableclass="table table-bordered table-striped">
<tr>
<thead>
<thstyle="width: 150px;">Event Type</th>
<tr>
<th>Description</th>
<thstyle="width: 150px;">Event Type</th>
</tr>
<th>Description</th>
</thead>
</tr>
<tbody>
</thead>
<tr>
<tbody>
<td>activate</td>
<tr>
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
<td>activate</td>
</tr>
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
</tbody>
</tr>
</table>
</tbody>
</table>
</div><!-- ./bs-table-scrollable -->
{% highlight js %}
{% highlight js %}
$('#myScrollspy').on('activate.bs.scrollspy', function () {
$('#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>
<td>show</td>
</tr>
<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>
<tr>
<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>
<td>shown</td>
</tr>
<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>
</tbody>
</tr>
</table>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
{% highlight js %}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('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>
<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">
<divclass="bs-table-scrollable">
<thead>
<tableclass="table table-bordered table-striped">
<tr>
<thead>
<thstyle="width: 100px;">Name</th>
<tr>
<thstyle="width: 100px;">type</th>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">default</th>
<thstyle="width: 100px;">type</th>
<th>description</th>
<thstyle="width: 50px;">default</th>
</tr>
<th>description</th>
</thead>
</tr>
<tbody>
</thead>
<tr>
<tbody>
<td>animation</td>
<tr>
<td>boolean</td>
<td>animation</td>
<td>true</td>
<td>boolean</td>
<td>apply a CSS fade transition to the tooltip</td>
<td>true</td>
</tr>
<td>apply a CSS fade transition to the tooltip</td>
<tr>
</tr>
<td>html</td>
<tr>
<td>boolean</td>
<td>html</td>
<td>false</td>
<td>boolean</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>
<td>false</td>
</tr>
<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>
<tr>
<td>string | function</td>
<td>placement</td>
<td>'top'</td>
<td>string | function</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>
<td>'top'</td>
</tr>
<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>
<tr>
<td>string</td>
<td>selector</td>
<td>false</td>
<td>string</td>
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
<td>false</td>
</tr>
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
<tr>
</tr>
<td>title</td>
<tr>
<td>string | function</td>
<td>title</td>
<td>''</td>
<td>string | function</td>
<td>default title value if <code>title</code> tag isn't present</td>
<td>''</td>
</tr>
<td>default title value if <code>title</code> tag isn't present</td>
<tr>
</tr>
<td>trigger</td>
<tr>
<td>string</td>
<td>trigger</td>
<td>'hover focus'</td>
<td>string</td>
<td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
<td>'hover focus'</td>
</tr>
<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>
<tr>
<td>number | object</td>
<td>delay</td>
<td>0</td>
<td>number | object</td>
<td>
<td>0</td>
<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
<td>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
<p>If a number is supplied, delay is applied to both hide/show</p>
</td>
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
</tr>
</td>
<tr>
</tr>
<td>container</td>
<tr>
<td>string | false</td>
<td>container</td>
<td>false</td>
<td>string | false</td>
<td>
<td>false</td>
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
<td>
</td>
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
</tr>
</td>
</tbody>
</tr>
</table>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
<divclass="bs-callout bs-callout-info">
<divclass="bs-callout bs-callout-info">
<h4>Data attributes for individual tooltips</h4>
<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>
<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>
<td>show</td>
</tr>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
<tr>
</tr>
<td>shown</td>
<tr>
<td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
<td>shown</td>
</tr>
<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>
<tr>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
<td>hide</td>
</tr>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
<tr>
</tr>
<td>hidden</td>
<tr>
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
<td>hidden</td>
</tr>
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tbody>
</tr>
</table>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
{% highlight js %}
$('#myTooltip').on('hidden.bs.tooltip', function () {
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
// do something…
...
@@ -970,78 +984,80 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
...
@@ -970,78 +984,80 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<h3>Options</h3>
<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>
<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">
<divclass="bs-table-scrollable">
<thead>
<tableclass="table table-bordered table-striped">
<tr>
<thead>
<thstyle="width: 100px;">Name</th>
<tr>
<thstyle="width: 100px;">type</th>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">default</th>
<thstyle="width: 100px;">type</th>
<th>description</th>
<thstyle="width: 50px;">default</th>
</tr>
<th>description</th>
</thead>
</tr>
<tbody>
</thead>
<tr>
<tbody>
<td>animation</td>
<tr>
<td>boolean</td>
<td>animation</td>
<td>true</td>
<td>boolean</td>
<td>apply a CSS fade transition to the tooltip</td>
<td>true</td>
</tr>
<td>apply a CSS fade transition to the tooltip</td>
<tr>
</tr>
<td>html</td>
<tr>
<td>boolean</td>
<td>html</td>
<td>false</td>
<td>boolean</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>
<td>false</td>
</tr>
<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>
<tr>
<td>string | function</td>
<td>placement</td>
<td>'right'</td>
<td>string | function</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>
<td>'right'</td>
</tr>
<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>
<tr>
<td>string</td>
<td>selector</td>
<td>false</td>
<td>string</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>false</td>
</tr>
<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>
<td>show</td>
</tr>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
<tr>
</tr>
<td>shown</td>
<tr>
<td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
<td>shown</td>
</tr>
<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>
<tr>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
<td>hide</td>
</tr>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
<tr>
</tr>
<td>hidden</td>
<tr>
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
<td>hidden</td>
</tr>
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tbody>
</tr>
</table>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
{% highlight js %}
$('#myPopover').on('hidden.bs.popover', function () {
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
// do something…
...
@@ -1152,24 +1170,26 @@ $('#myPopover').on('hidden.bs.popover', function () {
...
@@ -1152,24 +1170,26 @@ $('#myPopover').on('hidden.bs.popover', function () {
<h3>Events</h3>
<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>
<tableclass="table table-bordered table-striped">
<divclass="bs-table-scrollable">
<thead>
<tableclass="table table-bordered table-striped">
<tr>
<thead>
<thstyle="width: 150px;">Event Type</th>
<tr>
<th>Description</th>
<thstyle="width: 150px;">Event Type</th>
</tr>
<th>Description</th>
</thead>
</tr>
<tbody>
</thead>
<tr>
<tbody>
<td>close</td>
<tr>
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
<td>close</td>
</tr>
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
<tr>
</tr>
<td>closed</td>
<tr>
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
<td>closed</td>
</tr>
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
</tbody>
</tr>
</table>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
{% highlight js %}
$('#my-alert').bind('closed.bs.alert', function () {
$('#my-alert').bind('closed.bs.alert', function () {
// do something…
// do something…
...
@@ -1444,31 +1464,32 @@ $(".collapse").collapse()
...
@@ -1444,31 +1464,32 @@ $(".collapse").collapse()
<h3>Options</h3>
<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>
<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">
<divclass="bs-table-scrollable">
<thead>
<tableclass="table table-bordered table-striped">
<tr>
<thead>
<thstyle="width: 100px;">Name</th>
<tr>
<thstyle="width: 50px;">type</th>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">default</th>
<thstyle="width: 50px;">type</th>
<th>description</th>
<thstyle="width: 50px;">default</th>
</tr>
<th>description</th>
</thead>
</tr>
<tbody>
</thead>
<tr>
<tbody>
<td>parent</td>
<tr>
<td>selector</td>
<td>parent</td>
<td>false</td>
<td>selector</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>
<td>false</td>
</tr>
<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>
<tr>
<td>boolean</td>
<td>toggle</td>
<td>true</td>
<td>boolean</td>
<td>Toggles the collapsible element on invocation</td>
<td>true</td>
</tr>
<td>Toggles the collapsible element on invocation</td>
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
<tableclass="table table-bordered table-striped">
<divclass="bs-table-scrollable">
<thead>
<tableclass="table table-bordered table-striped">
<tr>
<thead>
<thstyle="width: 150px;">Event Type</th>
<tr>
<th>Description</th>
<thstyle="width: 150px;">Event Type</th>
</tr>
<th>Description</th>
</thead>
</tr>
<tbody>
</thead>
<tr>
<tbody>
<td>show</td>
<tr>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
<td>show</td>
</tr>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
<tr>
</tr>
<td>shown</td>
<tr>
<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>shown</td>
</tr>
<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>
<tr>
<td>
<td>hide</td>
This event is fired immediately when the <code>hide</code> method has been called.
<td>
</td>
This event is fired immediately when the <code>hide</code> method has been called.
</tr>
</td>
<tr>
</tr>
<td>hidden</td>
<tr>
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
<td>hidden</td>
</tr>
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
</tbody>
</tr>
</table>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
{% highlight js %}
$('#myCollapsible').on('hidden.bs.collapse', function () {
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
// do something…
...
@@ -1661,30 +1684,32 @@ $('.carousel').carousel()
...
@@ -1661,30 +1684,32 @@ $('.carousel').carousel()
<h3>Options</h3>
<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>
<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">
<divclass="bs-table-scrollable">
<thead>
<tableclass="table table-bordered table-striped">
<tr>
<thead>
<thstyle="width: 100px;">Name</th>
<tr>
<thstyle="width: 50px;">type</th>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">default</th>
<thstyle="width: 50px;">type</th>
<th>description</th>
<thstyle="width: 50px;">default</th>
</tr>
<th>description</th>
</thead>
</tr>
<tbody>
</thead>
<tr>
<tbody>
<td>interval</td>
<tr>
<td>number</td>
<td>interval</td>
<td>5000</td>
<td>number</td>
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
<td>5000</td>
</tr>
<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>
<tr>
<td>string</td>
<td>pause</td>
<td>"hover"</td>
<td>string</td>
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
<td>"hover"</td>
</tr>
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
</tbody>
</tr>
</table>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
<h3>Methods</h3>
<h3>Methods</h3>
...
@@ -1714,24 +1739,26 @@ $('.carousel').carousel({
...
@@ -1714,24 +1739,26 @@ $('.carousel').carousel({
<h3>Events</h3>
<h3>Events</h3>
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
<tableclass="table table-bordered table-striped">
<divclass="bs-table-scrollable">
<thead>
<tableclass="table table-bordered table-striped">
<tr>
<thead>
<thstyle="width: 150px;">Event Type</th>
<tr>
<th>Description</th>
<thstyle="width: 150px;">Event Type</th>
</tr>
<th>Description</th>
</thead>
</tr>
<tbody>
</thead>
<tr>
<tbody>
<td>slide</td>
<tr>
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
<td>slide</td>
</tr>
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
<tr>
</tr>
<td>slid</td>
<tr>
<td>This event is fired when the carousel has completed its slide transition.</td>
<td>slid</td>
</tr>
<td>This event is fired when the carousel has completed its slide transition.</td>
</tbody>
</tr>
</table>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
{% highlight js %}
$('#myCarousel').on('slide.bs.carousel', function () {
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
// do something…
...
@@ -1787,22 +1814,25 @@ $('#myCarousel').on('slide.bs.carousel', function () {
...
@@ -1787,22 +1814,25 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<h3>Options</h3>
<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>
<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">
<divclass="bs-table-scrollable">
<thead>
<tableclass="table table-bordered table-striped">
<tr>
<thead>
<thstyle="width: 100px;">Name</th>
<tr>
<thstyle="width: 100px;">type</th>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">default</th>
<thstyle="width: 100px;">type</th>
<th>description</th>
<thstyle="width: 50px;">default</th>
</tr>
<th>description</th>
</thead>
</tr>
<tbody>
</thead>
<tr>
<tbody>
<td>offset</td>
<tr>
<td>number | function | object</td>
<td>offset</td>
<td>10</td>
<td>number | function | object</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>
<td>10</td>
</tr>
<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>
