@@ -168,6 +167,11 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</div>
<pclass="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <ahref="./javascript.html#buttons">our buttons plugin</a>.</p>
<divclass="bs-callout">
<h4>Tooltips & popovers in button groups require special setting</h4>
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<h3id="btn-groups-single">Basic button group</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<divclass="bs-example">
...
...
@@ -628,7 +632,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
@@ -43,7 +43,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
</ul>
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
<h3id="overview-reset">Normalize reset</h3>
<h3id="overview-normalize">Normalize reset</h3>
<p>For improved cross-browser rendering, we use <ahref="http://necolas.github.com/normalize.css/"target="_blank">Normalize</a>, a project by <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallagher</a> and <ahref="http://twitter.com/jon_neal"target="_blank">Jonathan Neal</a>.</p>
<h3id="overview-container">Centering with container</h3>
...
...
@@ -247,7 +247,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<divclass="bs-callout">
<h4>Need more examples?</h4>
<p>We dive into more grid layouts in a separte page, free of chrome and documentation to better show you the power of the grid.</p>
<p>We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.</p>
@@ -1380,21 +1380,6 @@ For example, <code><section></code> should be wrapped as inline.
</form>
{% highlight html %}
<inputid="focusedInput"type="text"value="This is focused...">
{% endhighlight %}
<h3id="forms-invalid-inputs">Invalid inputs</h3>
<p>Style inputs via default browser functionality. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
<divclass="bs-callout">
<h4>Cross-browser compatibility</h4>
<p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
@@ -1509,12 +1494,16 @@ For example, <code><section></code> should be wrapped as inline.
<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 a <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">
<h4>Cross-browser compatibility</h4>
<p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p>
</div>
<divclass="bs-callout">
<h4>Tooltips & popovers in input groups require special setting</h4>
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<formclass="bs-example bs-example-form">
<divclass="input-group col-lg-9">
...
...
@@ -1757,26 +1746,26 @@ For example, <code><section></code> should be wrapped as inline.
@@ -357,7 +357,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div>
<divclass="bs-callout">
<h4>Heads up!</h4>
<p>All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <ahref="http://jquery.com/"target="_blank">jQuery</a> to be included.</p>
<p>All checked plugins will be compiled into a single file, <code>bootstrap.js</code>. All plugins require the latest version of <ahref="http://jquery.com/"target="_blank">jQuery</a> to be included.</p>
<p>If you download the original files, you need to compile Bootstrap's LESS files into usable CSS. To do that, Bootstrap only officially supports <ahref="http://twitter.github.io/recess/">Recess</a>, Twitter's CSS hinter built on top of <ahref="http://lesscss.org">less.js</a>.</p>
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the <ahref="http://groups.google.com/group/twitter-bootstrap">mailing list</a> if you need help.</p>
</div>
</div>
...
...
@@ -75,7 +80,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<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>
...
...
@@ -118,7 +123,7 @@ $('#myModal').on('show.bs.modal', function (e) {
@@ -259,7 +264,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<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>
<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>
...
...
@@ -313,7 +318,7 @@ $('#myModal').modal({
</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>
...
...
@@ -739,9 +744,10 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
</ul>
</div><!-- /example -->
<h3>Tooltips in input groups</h3>
<p>When using tooltips and popovers with the Bootstrap input groups, you'll have to set the <code>container</code> (documented below) option to avoid unwanted side effects.</p>
<divclass="bs-callout">
<h4>Tooltips in button groups and input groups require special setting</h4>
<p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
<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>
<p>Popovers require the <ahref="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
</div>
<divclass="bs-callout">
<h4>Popovers in button groups and input groups require special setting</h4>
<p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
</div>
<h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<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>
<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>
...
...
@@ -1374,7 +1384,7 @@ $('.nav-tabs').button()
<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>
