kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

give all docs callouts IDs 

[skip sauce]
This commit is contained in:
Chris Rebert 2014-11-11 20:23:49 -08:00
parent 5660be42fa
commit ea407666ce
26 changed files with 98 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/_includes/components/alerts.html
View File

@ -6,7 +6,7 @@
<h2 id="alerts-examples">Examples</h2>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-alerts-no-default">
<h4>No default class</h4>
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
</div>
@ -34,7 +34,7 @@
<h2 id="alerts-dismissible">Dismissible alerts</h2>
<p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-alerts-dismiss-plugin">
<h4>Requires JavaScript alert plugin</h4>
<p>For fully functioning, dismissible alerts, you must use the <a href="../javascript/#alerts">alerts JavaScript plugin</a>.</p>
</div>
@ -51,7 +51,7 @@
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-alerts-dismiss-use-button">
<h4>Ensure proper behavior across all devices</h4>
<p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
</div>

2
docs/_includes/components/badges.html
View File

@ -21,7 +21,7 @@
<h4>Self collapsing</h4>
<p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-badges-ie8-empty">
<h4>Cross-browser compatibility</h4>
<p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
</div>

2
docs/_includes/components/button-dropdowns.html
View File

@ -3,7 +3,7 @@
<p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-btndropdown-dependency">
<h4>Plugin dependency</h4>
<p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
</div>

14
docs/_includes/components/button-groups.html
View File

@ -3,12 +3,12 @@
<p class="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 <a href="../javascript/#buttons">our buttons plugin</a>.</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-btn-group-tooltips">
<h4>Tooltips &amp; 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>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-btn-group-accessibility">
<h4>Ensure correct <code>role</code> and provide a label</h4>
<p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
<p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code>&lt;button&gt;</code> elements) or a dropdown.</p>
@ -190,11 +190,11 @@
<h3 id="btn-groups-justified">Justified button groups</h3>
<p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-btn-group-justified-dbl-border">
<h4>Handling borders</h4>
<p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-btn-group-ie8-border">
<h4>IE8 and borders</h4>
<p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
<p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
@ -232,9 +232,9 @@
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Links acting as buttons</h4>
<p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
<div class="bs-callout bs-callout-warning" id="callout-btn-group-anchor-btn">
<h4>Links acting as buttons</h4>
<p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
</div>
<h4>With <code>&lt;button&gt;</code> elements</h4>

4
docs/_includes/components/dropdowns.html
View File

@ -36,11 +36,11 @@
<h3 id="dropdowns-alignment">Alignment</h3>
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-dropdown-positioning">
<h4>May require additional positioning</h4>
<p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-dropdown-pull-right">
<h4>Deprecated <code>.pull-right</code> alignment</h4>
<p>As of v3.1.0, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
</div>

8
docs/_includes/components/glyphicons.html
View File

@ -17,15 +17,15 @@
<h2 id="glyphicons-how-to-use">How to use</h2>
<p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-glyphicons-dont-mix">
<h4>Don't mix with other components</h4>
<p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code>&lt;span&gt;</code> and apply the icon classes to the <code>&lt;span&gt;</code>.</p>
</div>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-glyphicons-empty-only">
<h4>Only for use on empty elements</h4>
<p>Icon classes should only be used on elements that contain no text content and have no child elements.</p>
</div>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-glyphicons-location">
<h4>Changing the icon font location</h4>
<p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p>
<ul>
@ -35,7 +35,7 @@
</ul>
<p>Use whatever option best suits your specific development setup.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-glyphicons-accessibility">
<h4>Accessible icons</h4>
<p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p>
<p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p>

6
docs/_includes/components/input-groups.html
View File

@ -3,16 +3,16 @@
<p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code>&lt;input&gt;</code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a single <code>.form-control</code>.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-inputgroup-text-input-only">
<h4>Textual <code>&lt;input&gt;</code>s only</h4>
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
<p>Avoid using <code>&lt;textarea&gt;</code> elements here as their <code>rows</code> attribute will not be respected in some cases.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-inputgroup-container-body">
<h4>Tooltips &amp; 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>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-inputgroup-dont-mix">
<h4>Don't mix with other components</h4>
<p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
</div>

2
docs/_includes/components/labels.html
View File

@ -33,7 +33,7 @@
<span class="label label-danger">Danger</span>
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-labels-inline-block">
<h4>Have tons of labels?</h4>
<p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
</div>

18
docs/_includes/components/navbar.html
View File

@ -14,16 +14,16 @@
<li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
</ol>
</div>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-navbar-js">
<h4>Requires JavaScript plugin</h4>
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
<p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-navbar-breakpoint">
<h4>Changing the collapsed mobile navbar breakpoint</h4>
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-navbar-role">
<h4>Make navbars accessible</h4>
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
</div>
@ -201,12 +201,12 @@
</form>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-navbar-mobile-caveats">
<h4>Mobile device caveats</h4>
<p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-navbar-form-labels">
<h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
</div>
@ -236,7 +236,7 @@
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-navbar-btn-context">
<h4>Context-specific usage</h4>
<p>Like the standard <a href="../css/#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code>&lt;a&gt;</code> and <code>&lt;input&gt;</code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code>&lt;a&gt;</code> elements within <code>.navbar-nav</code>.</p>
</div>
@ -294,7 +294,7 @@
<h2 id="navbar-component-alignment">Component alignment</h2>
<p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code>&lt;ul&gt;</code> with the respective utility class applied.</p>
<p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-navbar-right-align">
<h4>Right aligning multiple components</h4>
<p>Navbars currently have a limitation with multiple <code>.navbar-right</code> classes. To properly space content, we use negative margin on the last <code>.navbar-right</code> element. When there are multiple elements using that class, these margins don't work as intended.</p>
<p>We'll revisit this when we can rewrite that component in v4.</p>
@ -335,7 +335,7 @@
</nav>
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-navbar-fixed-top-padding">
<h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight scss %}
@ -379,7 +379,7 @@ body { padding-top: 70px; }
</nav>
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-navbar-fixed-bottom-padding">
<h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight scss %}

8
docs/_includes/components/navs.html
View File

@ -3,12 +3,12 @@
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-navs-tabs-plugin">
<h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-navs-accessibility">
<h4>Make navs used as navigation accessible</h4>
<p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code>&lt;ul&gt;</code>, or wrap a <code>&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code>&lt;ul&gt;</code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
</div>
@ -65,7 +65,7 @@
<h2 id="nav-justified">Justified</h2>
<p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
<p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-navs-justified-safari">
<h4>Safari and responsive justified navs</h4>
<p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
</div>
@ -95,7 +95,7 @@
<h2 id="nav-disabled-links">Disabled links</h2>
<p>For any nav component (tabs or pills), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-navs-anchor-disabled">
<h4>Link functionality not impacted</h4>
<p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
</div>

2
docs/_includes/components/progress-bars.html
View File

@ -3,7 +3,7 @@
<p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-progress-animation-css3">
<h4>Cross-browser compatibility</h4>
<p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
</div>

12
docs/_includes/css/buttons.html
View File

@ -35,7 +35,7 @@
<button type="button" class="btn btn-link">Link</button>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-buttons-color-accessibility">
<h4>Conveying meaning to assistive technologies</h4>
<p>Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
</div>
@ -132,7 +132,7 @@
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-buttons-ie-disabled">
<h4>Cross-browser compatibility</h4>
<p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
</div>
@ -150,11 +150,11 @@
<p>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-buttons-disabled-anchor">
<h4>Link functionality caveat</h4>
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a&gt;</code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-buttons-context-usage">
<h4>Context-specific usage</h4>
<p>While button classes can be used on <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements, only <code>&lt;button&gt;</code> elements are supported within our nav and navbar components.</p>
</div>
@ -175,12 +175,12 @@
<input class="btn btn-default" type="submit" value="Submit">
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-buttons-anchor-accessibility">
<h4>Links acting as buttons</h4>
<p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-buttons-ff-height">
<h4>Cross-browser rendering</h4>
<p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
<p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox &lt;30</a> that prevents us from setting the <code>line-height</code> of <code>&lt;input&gt;</code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>

24
docs/_includes/css/forms.html
View File

@ -49,7 +49,7 @@
<button type="submit" class="btn btn-default">Submit</button>
</form>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-formgroup-inputgroup">
<h4>Don't mix form groups with input groups</h4>
<p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
</div>
@ -57,11 +57,11 @@
<h2 id="forms-inline">Inline form</h2>
<p>Add <code>.form-inline</code> to your <code>&lt;form&gt;</code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-inline-form-width">
<h4>Requires custom widths</h4>
<p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-inline-form-labels">
<h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
</div>
@ -186,7 +186,7 @@
<h3>Inputs</h3>
<p>Most common form control, text-based input fields. Includes support for all HTML5 types: <code>text</code>, <code>password</code>, <code>datetime</code>, <code>datetime-local</code>, <code>date</code>, <code>month</code>, <code>time</code>, <code>week</code>, <code>number</code>, <code>email</code>, <code>url</code>, <code>search</code>, <code>tel</code>, and <code>color</code>.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-input-needs-type">
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div>
@ -198,7 +198,7 @@
{% highlight html %}
<input type="text" class="form-control" placeholder="Text input">
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-xref-input-group">
<h4>Input groups</h4>
<p>To add integrated text or buttons before and/or after any text-based <code>&lt;input&gt;</code>, <a href="../components/#input-groups">check out the input group component</a>.</p>
</div>
@ -473,7 +473,7 @@
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
</form>
</div>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-focus-demo">
<h4>Demo <code>:focus</code> state</h4>
<p>The above example input uses custom styles in our documentation to demonstrate the <code>:focus</code> state on a <code>.form-control</code>.</p>
</div>
@ -493,12 +493,12 @@
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
<p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once.</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-fieldset-disabled-pointer-events">
<h4>Caveat about link functionality of <code>&lt;a&gt;</code></h4>
<p>Our styles use <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a class="btn btn-*"&gt;</code> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p>
</div>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-fieldset-disabled-ie">
<h4>Cross-browser compatibility</h4>
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
@ -564,7 +564,7 @@
<h2 id="forms-control-validation">Validation states</h2>
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-form-validation-state-accessibility">
<h4>Conveying validation state to assistive technologies</h4>
<p>Using these validation styles to denote the state of a form control only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.</p>
<p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code>&lt;label&gt;</code> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using <code>aria-describedby</code> (see the example in the following section). In the case of an error, you could also use the <code>aria-invalid="true"</code> attribute on the form control.</p>
@ -652,11 +652,11 @@
<h3>With optional icons</h3>
<p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p>
<p><strong class="text-danger">Feedback icons only work with textual <code>&lt;input class="form-control"&gt;</code> elements.</strong></p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-has-feedback-icon-positioning">
<h4>Icons, labels, and input groups</h4>
<p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>.sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-has-feedback-icon-accessibility">
<h4>Conveying the icon's meaning to assistive technologies</h4>
<p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>.sr-only</code> class and explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code>&lt;label&gt;</code> associated with the form control.</p>
<p>Although the following examples already mention the validation state of their respective form controls in the <code>&lt;label&gt;</code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
@ -874,7 +874,7 @@
<h2 id="forms-help-text">Help text</h2>
<p>Block level help text for form controls.</p>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-help-text-accessibility">
<h4>Associating help text with form controls</h4>
<p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
</div>

10
docs/_includes/css/helpers.html
View File

@ -19,11 +19,11 @@
<p class="text-warning">...</p>
<p class="text-danger">...</p>
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-helper-context-color-specificity">
<h4>Dealing with specificity</h4>
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code>&lt;span&gt;</code> with the class.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-helper-context-color-accessibility">
<h4>Conveying meaning to assistive technologies</h4>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
</div>
@ -44,11 +44,11 @@
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-helper-bg-specificity">
<h4>Dealing with specificity</h4>
<p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code>&lt;div&gt;</code> with the class.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-helper-bg-accessibility">
<h4>Conveying meaning to assistive technologies</h4>
<p>As with <a href="#helper-classes-colors">contextual colors</a>, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
</div>
@ -97,7 +97,7 @@
}
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-helper-pull-navbar">
<h4>Not for use in navbars</h4>
<p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
</div>

4
docs/_includes/css/images.html
View File

@ -3,7 +3,7 @@
<h2 id="images-responsive">Responsive images</h2>
<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-images-ie-svg">
<h4>SVG images and IE 8-10</h4>
<p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
</div>
@ -13,7 +13,7 @@
<h2 id="images-shapes">Image shapes</h2>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-images-ie-rounded-corners">
<h4>Cross-browser compatibility</h4>
<p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
</div>

6
docs/_includes/css/tables.html
View File

@ -45,7 +45,7 @@
<h2 id="tables-striped">Striped rows</h2>
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-tables-striped-ie8">
<h4>Cross-browser compatibility</h4>
<p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
</div>
@ -346,7 +346,7 @@
<td class="info">...</td>
</tr>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-tables-context-accessibility">
<h4>Conveying meaning to assistive technologies</h4>
<p>Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
</div>
@ -354,7 +354,7 @@
<h2 id="tables-responsive">Responsive tables</h2>
<p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-tables-responsive-ff-fieldset">
<h4>Firefox and fieldsets</h4>
<p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
{% highlight css %}

4
docs/_includes/css/type.html
View File

@ -183,7 +183,7 @@ You can use the mark tag to <mark>highlight</mark> text.
<em>rendered as italicized text</em>
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-type-b-i-elems">
<h4>Alternate elements</h4>
<p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
</div>
@ -455,7 +455,7 @@ You can use the mark tag to <mark>highlight</mark> text.
</dl>
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-type-dl-truncate">
<h4>Auto-truncating</h4>
<p>Horizontal description lists will truncate terms that are too long to fit in the left column with <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.</p>
</div>

10
docs/_includes/js/buttons.html
View File

@ -3,14 +3,14 @@
<p class="lead">Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-buttons-ff-autocomplete">
<h4>Cross-browser compatibility</h4>
<p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a>.</p>
</div>
<h2 id="buttons-stateful">Stateful</h2>
<p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-buttons-state-names">
<h4>Use whichever state you like!</h4>
<p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p>
</div>
@ -35,7 +35,7 @@
<h2 id="buttons-single-toggle">Single toggle</h2>
<p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-buttons-single-pretoggled">
<h4>Pre-toggled buttons need <code>.active</code> and <code>aria-pressed="true"</code></h4>
<p>For pre-toggled buttons, you must add the <code>.active</code> class and the <code>aria-pressed="true"</code> attribute to the <code>button</code> yourself.</p>
</div>
@ -52,11 +52,11 @@
<h2 id="buttons-checkbox-radio">Checkbox / Radio</h2>
<p>Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing checkbox or radio inputs to enable toggling in their respective styles.</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-buttons-multi-preselected">
<h4>Preselected options need <code>.active</code></h4>
<p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-buttons-only-click">
<h4>Visual checked state only updated on click</h4>
<p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code>&lt;input type="reset"&gt;</code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
</div>

4
docs/_includes/js/collapse.html
View File

@ -4,7 +4,7 @@
<h3>About</h3>
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-collapse-dependency">
<h4>Plugin dependency</h4>
<p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
</div>
@ -136,7 +136,7 @@
<div id="demo" class="collapse in">...</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-collapse-accessibility">
<h4>Make expand/collapse controls accessible</h4>
<p>Be sure to add <code>aria-expanded</code> to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of <code>aria-expanded="false"</code>. If you've set the collapsible element to be open by default using the <code>in</code> class, set <code>aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.</p>
<p>Additionally, if your control element is targetting a single collapsible element – i.e. the <code>data-target</code> attribute is pointing to an <code>id</code> selector – you may add an additional <code>aria-controls</code> attribute to the control element, containing the <code>id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>

2
docs/_includes/js/dropdowns.html
View File

@ -150,7 +150,7 @@
{% highlight js %}
$('.dropdown-toggle').dropdown()
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-dropdowns-data-required">
<h4><code>data-toggle="dropdown"</code> still required</h4>
<p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code>data-toggle="dropdown"</code> is always required to be present on the dropdown's trigger element.</p>
</div>

6
docs/_includes/js/modal.html
View File

@ -10,7 +10,7 @@
<h4>Modal markup placement</h4>
<p>Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.</p>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-modal-mobile-caveats">
<h4>Mobile device caveats</h4>
<p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div>
@ -134,13 +134,13 @@
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-modal-accessibility">
<h4>Make modals accessible</h4>
<p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
<p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
</div>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-modal-youtube">
<h4>Embedding YouTube videos</h4>
<p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p>
</div>

6
docs/_includes/js/overview.html
View File

@ -4,12 +4,12 @@
<h3 id="js-individual-compiled">Individual or compiled</h3>
<p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-overview-not-both">
<h4>Using the compiled JavaScript</h4>
<p>Both <code>bootstrap.js</code> and <code>bootstrap.min.js</code> contain all plugins in a single file. Include only one.</p>
</div>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-overview-dependencies">
<h4>Plugin dependencies</h4>
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
</div>
@ -27,7 +27,7 @@ $(document).off('.data-api')
$(document).off('.alert.data-api')
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-overview-single-data">
<h4>Only one plugin per element via data attributes</h4>
<p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p>
</div>

16
docs/_includes/js/popovers.html
View File

@ -4,11 +4,11 @@
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
<p>Popovers whose both title and content are zero-length are never displayed.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-popover-needs-tooltip">
<h4>Plugin dependency</h4>
<p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
</div>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-popover-opt-in">
<h4>Opt-in functionality</h4>
<p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
<p>One way to initialize all popovers on a page would be to select them by their <code>data-toggle</code> attribute:</p>
@ -18,19 +18,19 @@ $(function () {
})
{% endhighlight %}
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-popover-groups">
<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>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-popover-hidden">
<h4>Don't try to show popovers on hidden elements</h4>
<p>Invoking <code>$(...).popover('show')</code> when the target element is <code>display: none;</code> will cause the popover to be incorrectly positioned.</p>
</div>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-popover-disabled">
<h4>Popovers on disabled elements require wrapper elements</h4>
<p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the popover to that <code>&lt;div&gt;</code> instead.</p>
</div>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-popover-multiline">
<h4>Multiple-line links</h4>
<p>Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
</div>
@ -121,7 +121,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
<h4>Dismiss on next click</h4>
<p>Use the <code>focus</code> trigger to dismiss popovers on the next click that the user makes.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-popover-dismiss-click">
<h4>Specific markup required for dismiss-on-next-click</h4>
<p>For proper cross-browser and cross-platform behavior, you must use the <code>&lt;a&gt;</code> tag, <i>not</i> the <code>&lt;button&gt;</code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attribute.</p>
</div>
@ -242,7 +242,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
</tbody>
</table>
</div><!-- /.table-responsive -->
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-popover-data">
<h4>Data attributes for individual popovers</h4>
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
</div>

6
docs/_includes/js/scrollspy.html
View File

@ -51,15 +51,15 @@
<h2 id="scrollspy-usage">Usage</h2>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-scrollspy-needs-nav">
<h4>Requires Bootstrap nav</h4>
<p>Scrollspy currently requires the use of a <a href="../components/#nav">Bootstrap nav component</a> for proper highlighting of active links.</p>
</div>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-scrollspy-target-ids">
<h4>Resolvable ID targets required</h4>
<p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the DOM like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p>
</div>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-scrollspy-invisible-targets">
<h4>Non-<code>:visible</code> target elements ignored</h4>
<p>Target elements that are not <a href="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
</div>

2
docs/_includes/js/tabs.html
View File

@ -31,7 +31,7 @@
</div>
</div><!-- /example -->
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-tabs-extends-component">
<h4>Extends tabbed navigation</h4>
<p>This plugin extends the <a href="../components/#nav-tabs">tabbed navigation component</a> to add tabbable areas.</p>
</div>

12
docs/_includes/js/tooltips.html
View File

@ -58,7 +58,7 @@
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger" id="callout-tooltip-opt-in">
<h4>Opt-in functionality</h4>
<p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
<p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p>
@ -69,15 +69,15 @@ $(function () {
{% endhighlight %}
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-tooltip-groups">
<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>
</div>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-tooltip-hidden">
<h4>Don't try to show tooltips on hidden elements</h4>
<p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p>
</div>
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-tooltip-disabled">
<h4>Tooltips on disabled elements require wrapper elements</h4>
<p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the tooltip to that <code>&lt;div&gt;</code> instead.</p>
</div>
@ -91,7 +91,7 @@ $('#example').tooltip(options)
<h3>Markup</h3>
<p>The required markup for a tooltip is only a <code>data</code> attribute and <code>title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
<div class="bs-callout bs-callout-warning">
<div class="bs-callout bs-callout-warning" id="callout-tooltip-multiline">
<h4>Multiple-line links</h4>
<p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
</div>
@ -203,7 +203,7 @@ $('#example').tooltip(options)
</tbody>
</table>
</div><!-- /.table-responsive -->
<div class="bs-callout bs-callout-info">
<div class="bs-callout bs-callout-info" id="callout-tooltip-data">
<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>
</div>