<h1>Transitions <small>transition.js</small></h1>
</div>
<h3>About transitions</h3>
- <p>For simple transition effects, include transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.</p>
+ <p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this—it's already there.</p>
<h3>Use cases</h3>
<p>A few examples of the transition plugin:</p>
<ul>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
- </div><!-- /.modal-dalog -->
+ </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div><!-- /example -->
{% highlight html %}
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
- </div><!-- /.modal-dalog -->
+ </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endhighlight %}
</div>
</div><!-- /.modal-content -->
- </div><!-- /.modal-dalog -->
+ </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="bs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div><!-- /.modal-content -->
- </div><!-- /.modal-dalog -->
+ </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endhighlight %}
<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>
+ <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>
{% highlight html %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
{% endhighlight %}
</tr>
<tr>
<td>shown</td>
- <td>This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</td>
+ <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
<td>hide</td>
</tr>
<tr>
<td>hidden</td>
- <td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
+ <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>
<td>animation</td>
<td>boolean</td>
<td>true</td>
- <td>apply a css fade transition to the tooltip</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>
+ <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>trigger</td>
<td>string</td>
<td>'hover focus'</td>
- <td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space seperated, trigger types.</td>
+ <td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space separated, trigger types.</td>
</tr>
<tr>
<td>delay</td>
<td>string | false</td>
<td>false</td>
<td>
- <p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
+ <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
</td>
</tr>
</tbody>
<td>animation</td>
<td>boolean</td>
<td>true</td>
- <td>apply a css fade transition to the tooltip</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>
+ <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>
<tr>
<td>closed</td>
- <td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
+ <td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>
<h2>Usage</h2>
<h3>Via data attributes</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>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>To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.</p>
<h3>Via JavaScript</h3>
</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>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>
<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>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>