rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Redo all our callouts with the custom callout plugin

Browse Source 
- Replaces manual use of .bd-callout with {% callout [type] %}
- Rearranged some callouts for proximity to others
- Turned long lists of callouts--like those on tooltips, plugings, etc--into a list because holy shit that's overwhelming
This commit is contained in:
Mark Otto 2015-04-16 16:56:40 -07:00
parent 801d49fb32
commit 466d36e541
24 changed files with 367 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/_plugins/callout.rb Normal file
View File

@ -0,0 +1,29 @@
# Source: http://stackoverflow.com/questions/19169849/how-to-get-markdown-processed-content-in-jekyll-tag-plugin
module Jekyll
module Tags
class CalloutTag < Liquid::Block
def initialize(tag_name, type, tokens)
super
@type = type
if type == "danger"
@type = "danger"
elsif type == "warning"
@type = "warning"
elsif type == "info"
@type = "info"
end
end
def render(context)
site = context.registers[:site]
converter = site.getConverterImpl(::Jekyll::Converters::Markdown)
output = converter.convert(super(context))
"<div class=\"bd-callout bd-callout-#{@type}\">#{output}</div>"
end
end
end
end
Liquid::Template.register_tag('callout', Jekyll::Tags::CalloutTag)

4
docs/assets/scss/_callouts.scss
View File

@ -31,6 +31,6 @@
h4 { color: $color; }
}
.bd-callout-danger { @include bs-callout-variant($bd-danger); }
.bd-callout-warning { @include bs-callout-variant($bd-warning); }
.bd-callout-info { @include bs-callout-variant($bd-info); }
.bd-callout-warning { @include bs-callout-variant($bd-warning); }
.bd-callout-danger { @include bs-callout-variant($bd-danger); }

5
docs/assets/scss/_layout.scss
View File

@ -62,6 +62,11 @@
> h3 {
margin-top: 1.5rem;
}
> ul li,
> ol li {
margin-bottom: .25rem;
}
}
.bd-title {

18
docs/components/alerts.md
View File

@ -7,10 +7,11 @@ Provide contextual feedback messages for typical user actions with the handful o
Wrap any text and an optional dismiss button in `.alert` and one of the four contextual classes (e.g., `.alert-success`) for basic alert messages.
<div class="bd-callout bd-callout-info">
<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>
{% callout info %}
#### No default class
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.
{% endcallout %}
{% example html %}
<div class="alert alert-success" role="alert">
@ -41,10 +42,11 @@ Build on any alert by adding an optional `.alert-dismissible` and [close button]
</div>
{% endexample %}
<div class="bd-callout bd-callout-warning">
<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>
{% callout warning %}
#### Ensure proper behavior across all devices
Be sure to use the `<button>` element with the `data-dismiss="alert"` data attribute.
{% endcallout %}
### Link color

9
docs/components/button-dropdown.md
View File

@ -5,10 +5,11 @@ title: Button dropdown
Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup.
<div class="bd-callout bd-callout-danger">
<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>
{% callout danger %}
#### Plugin dependency
Button dropdowns require the [dropdown plugin](../javascript/#dropdowns) to be included in your version of Bootstrap.
{% endcallout %}
### Single button dropdowns

21
docs/components/button-group.md
View File

@ -5,16 +5,19 @@ title: Button group
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons).
<div class="bd-callout bd-callout-warning">
<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>
{% callout warning %}
#### Tooltips & popovers in button groups require special setting
<div class="bd-callout bd-callout-warning">
<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>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
</div>
When using tooltips or popovers on elements within a `.btn-group`, you'll have to specify the option `container: 'body'` to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
{% endcallout %}
{% callout warning %}
#### Ensure correct `role` and provide a label
In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct `role` attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
{% endcallout %}
### Basic example

27
docs/components/carousel.md
View File

@ -36,15 +36,17 @@ A slideshow component for cycling through elements—images or slides of text—
</div>
{% endexample %}
<div class="bd-callout bd-callout-warning" id="callout-carousel-transitions">
<h4>Transition animations not supported in Internet Explorer 9</h4>
<p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 doesn't support the necessary CSS properties. Thus, there are no slide transition animations when using that browser. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p>
</div>
{% callout warning %}
#### Transition animations not supported in Internet Explorer 9
<div class="bd-callout bd-callout-warning" id="callout-carousel-active">
<h4>Initial active element required</h4>
<p>The <code>.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
</div>
Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 doesn't support the necessary CSS properties. Thus, there are no slide transition animations when using that browser. We have intentionally decided not to include jQuery-based fallbacks for the transitions.
{% endcallout %}
{% callout warning %}
#### Initial active element required
The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
{% endcallout %}
### Optional captions
@ -101,10 +103,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div>
{% endhighlight %}
<div class="bd-callout bd-callout-danger">
<h4>Accessibility issue</h4>
<p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
</div>
{% callout danger %}
#### Accessibility issue
The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
{% endcallout %}
## Usage

19
docs/components/collapse.md
View File

@ -5,10 +5,11 @@ title: Collapse
Flexible plugin that utilizes a handful of classes for easy toggle behavior.
<div class="bd-callout bd-callout-danger">
<h4>Plugin dependency</h4>
<p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
</div>
{% callout danger %}
#### Plugin dependency
Collapse requires the [transitions plugin](#transitions) to be included in your version of Bootstrap.
{% endcallout %}
## Example
@ -87,11 +88,11 @@ Extend the default collapse behavior to create an accordion with the panel compo
</div>
{% endexample %}
<div class="bd-callout bd-callout-warning">
<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>
</div>
## Accessibility
Be sure to add `aria-expanded` 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 `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `in` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.
Additionally, if your control element is targetting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you may add an additional `aria-controls` attribute to the control element, containing the `id` 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.
## Usage

18
docs/components/dropdowns.md
View File

@ -32,10 +32,11 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
<div class="bd-callout bd-callout-warning">
<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>
{% callout warning %}
#### May require additional positioning
Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain `overflow` properties or appear out of bounds of the viewport. Address these issues on your own as they arise.
{% endcallout %}
{% highlight html %}
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
@ -146,10 +147,11 @@ Call the dropdowns via JavaScript:
$('.dropdown-toggle').dropdown()
{% endhighlight %}
<div class="bd-callout bd-callout-info">
<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>
{% callout info %}
#### `data-toggle="dropdown"` still required
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
{% endcallout %}
### Options

37
docs/components/helpers.md
View File

@ -16,14 +16,17 @@ Convey meaning through color with a handful of emphasis utility classes. These m
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
{% endexample %}
<div class="bd-callout bd-callout-info">
<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="bd-callout bd-callout-warning">
<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>
{% callout info %}
#### Dealing with specificity
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 `<span>` with the class.
{% endcallout %}
{% callout warning %}
#### Conveying meaning to assistive technologies
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 `.sr-only` class.
{% endcallout %}
### Contextual backgrounds
@ -37,15 +40,17 @@ Similar to the contextual text color classes, easily set the background of an el
<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
{% endexample %}
<div class="bd-callout bd-callout-info">
<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>
{% callout info %}
#### Dealing with specificity
<div class="bd-callout bd-callout-warning">
<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>
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 `<div>` with the class.
{% endcallout %}
{% callout warning %}
#### Conveying meaning to assistive technologies
As with [contextual colors](#helper-classes-colors), ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.
{% endcallout %}
### Close icon

50
docs/components/modal.md
View File

@ -13,18 +13,23 @@ $('#myModal').on('shown.bs.modal', function () {
})
{% endhighlight %}
<div class="bd-callout bd-callout-warning" id="callout-stacked-modals">
<h4>Overlapping modals not supported</h4>
<p>Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.</p>
</div>
<div class="bd-callout bd-callout-warning" id="callout-modal-markup-placement">
<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="bd-callout bd-callout-warning">
<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>
{% callout warning %}
#### Overlapping modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
{% endcallout %}
{% callout warning %}
#### Modal markup placement
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.
{% endcallout %}
{% callout warning %}
#### Mobile device caveats
There are some caveats regarding using modals on mobile devices. [See our browser support docs](../getting-started/#support-fixed-position-keyboards) for details.
{% endcallout %}
### Static example
@ -158,16 +163,19 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
</div>
{% endhighlight %}
<div class="bd-callout bd-callout-warning">
<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>
{% callout warning %}
#### Make modals accessible
<div class="bd-callout bd-callout-info">
<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>
Be sure to add `role="dialog"` to `.modal`, `aria-labelledby="myModalLabel"` attribute to reference the modal title, and `aria-hidden="true"` to tell assistive technologies to skip the modal's DOM elements.
Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
{% endcallout %}
{% callout info %}
#### Embedding YouTube videos
Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
{% endcallout %}
## Optional sizes

79
docs/components/popovers.md
View File

@ -3,42 +3,41 @@ layout: page
title: Popovers
---
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
Add small overlays of content, like those found in iOS, to any element for housing secondary information.
Popovers whose both title and content are zero-length are never displayed.
## Overview
Things to know when using the popover plugin:
- Popovers require the [tooltip plugin](/components/tooltips) as a dependency.
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
- Zero-length `title` and `content` values will never show a popover.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
- Triggering popovers on hidden elements will not work.
- Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element.
- When triggered from hyperlinks that span multiple lines, popovers will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
## Example: Enable popovers everywhere
One way to initialize all popovers on a page would be to select them by their `data-toggle` attribute:
<div class="bd-callout bd-callout-danger">
<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="bd-callout bd-callout-danger">
<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>
{% highlight js %}
$(function () {
$('[data-toggle="popover"]').popover()
})
{% endhighlight %}
</div>
<div class="bd-callout bd-callout-warning">
<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="bd-callout bd-callout-warning">
<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="bd-callout bd-callout-info">
<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="bd-callout bd-callout-info">
<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>
### Static popover
## Example: Using the `container` option
{% highlight js %}
$(function () {
$('.example-popover').popover(
container: 'body'
)
})
{% endhighlight %}
## Static popover
Four options are available: top, right, bottom, and left aligned.
@ -79,13 +78,13 @@ Four options are available: top, right, bottom, and left aligned.
<div class="clearfix"></div>
</div>
### Live demo
## Live demo
{% example html %}
<button type="button" class="btn btn-lg btn-danger bd-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
{% endexample %}
#### Four directions
### Four directions
<div class="bd-example popover-demo">
<div class="bd-example-popovers">
@ -123,14 +122,15 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
</button>
{% endhighlight %}
#### Dismiss on next click
### Dismiss on next click
Use the `focus` trigger to dismiss popovers on the next click that the user makes.
<div class="bd-callout bd-callout-danger">
<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>
{% callout danger %}
#### Specific markup required for dismiss-on-next-click
For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex) attribute.
{% endcallout %}
{% example html %}
<a tabindex="0" class="btn btn-lg btn-danger bd-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
@ -258,10 +258,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</table>
</div>
<div class="bd-callout bd-callout-info">
<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>
{% callout info %}
#### Data attributes for individual popovers
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
{% endcallout %}
### Methods

18
docs/components/scrollspy.md
View File

@ -93,15 +93,17 @@ After adding `position: relative;` in your CSS, call the scrollspy via JavaScrip
$('body').scrollspy({ target: '#navbar-example' })
{% endhighlight %}
<div class="bd-callout bd-callout-danger">
<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>
{% callout danger %}
#### Resolvable ID targets required
<div class="bd-callout bd-callout-info">
<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>
Navbar links must have resolvable id targets. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`.
{% endcallout %}
{% callout info %}
#### Non-`:visible` target elements ignored
Target elements that are not [`:visible` according to jQuery](http://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
{% endcallout %}
### Methods

62
docs/components/tooltips.md
View File

@ -3,11 +3,30 @@ layout: page
title: Tooltips
---
## Examples
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
Tooltips with zero-length titles are never displayed.
## Overview
Things to know when using the popover plugin:
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
- Tooltips with zero-length titles are never displayed.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
- Triggering tooltips on hidden elements will not work.
- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
## Example: Enable popovers everywhere
One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute:
{% highlight js %}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
{% endhighlight %}
## Examples
Hover over the links below to see tooltips:
@ -75,29 +94,6 @@ Hover over the buttons below to see their tooltips.
</button>
{% endhighlight %}
<div class="bd-callout bd-callout-danger">
<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>
{% highlight js %}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
{% endhighlight %}
</div>
<div class="bd-callout bd-callout-warning">
<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="bd-callout bd-callout-warning">
<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="bd-callout bd-callout-info">
<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>
## Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
@ -112,11 +108,6 @@ $('#example').tooltip(options)
The required markup for a tooltip is only a `data` attribute and `title` 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 `top` by the plugin).
<div class="bd-callout bd-callout-warning">
<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>
{% highlight html %}
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
@ -228,10 +219,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</table>
</div>
<div class="bd-callout bd-callout-info">
<h4>Data attributes for individual tooltips</h4>
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
</div>
{% callout info %}
#### Data attributes for individual tooltips
Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
{% endcallout %}
### Methods

54
docs/content/buttons.md
View File

@ -29,10 +29,11 @@ Bootstrap includes six predefined button styles, each serving its own semantic p
<button type="button" class="btn btn-link">Link</button>
{% endexample %}
<div class="bd-callout bd-callout-warning">
<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>
{% callout warning %}
#### Conveying meaning to assistive technologies
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 `.sr-only` class.
{% endcallout %}
## Button tags
@ -45,15 +46,17 @@ Use the button classes on an `<a>`, `<button>`, or `<input>` element.
<input class="btn btn-secondary" type="submit" value="Submit">
{% endexample %}
<div class="bd-callout bd-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>
{% callout warning %}
#### Links acting as buttons
<div class="bd-callout bd-callout-warning">
<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>
</div>
If the `<a>` 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 `role="button"`.
{% endcallout %}
{% callout warning %}
#### Cross-browser rendering
As a best practice, **we highly recommend using the `<button>` element whenever possible** to ensure matching cross-browser rendering.
{% endcallout %}
## Sizes
@ -106,17 +109,20 @@ As `<a>` elements don't support the `disabled` attribute, you must add the `.dis
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
{% endexample %}
<div class="bd-callout bd-callout-warning">
<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>
{% callout warning %}
#### Cross-browser compatibility
<div class="bd-callout bd-callout-warning">
<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>
If you add the `disabled` attribute to a `<button>`, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.
{% endcallout %}
<div class="bd-callout bd-callout-warning">
<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>
{% callout warning %}
#### Link functionality caveat
This class uses `pointer-events: none` to try to disable the link functionality of `<a>`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 `pointer-events: none`, 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.
{% endcallout %}
{% callout warning %}
#### Context-specific usage
While button classes can be used on `<a>` and `<button>` elements, only `<button>` elements are supported within our nav and navbar components.
{% endcallout %}

91
docs/content/forms.md
View File

@ -9,6 +9,8 @@ Bootstrap normalizes common HTML5 form elements and adds a number of layout opti
Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
**Do not mix form groups directly with [input groups](/components/#input-groups).** Instead, nest the input group inside of the form group.
{% example html %}
<form>
<div class="form-group">
@ -33,23 +35,11 @@ Individual form controls automatically receive some global styling. All textual
</form>
{% endexample %}
<div class="bd-callout bd-callout-warning">
<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>
## Inline forms
Add `.form-inline` to your `<form>` or a parent element for left-aligned and inline-block controls. **This only applies to form controls within viewports that are at least 768px wide.**
Add `.form-inline` to your `<form>` or a parent element for left-aligned and inline-block controls. Inputs and selects are set to `width: auto;` in inline forms. Depending on your layout, additional custom widths may be required. As shown below, you should alwys include a `<label>` with each form control.
<div class="bd-callout bd-callout-danger">
<h4>May require custom widths</h4>
<p>Inputs and selects have `width: 100%;` applied by default in Bootstrap. Within inline forms, we reset that to `width: auto;` so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
</div>
<div class="bd-callout bd-callout-warning">
<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 `.sr-only` class.</p>
</div>
**Inline forms only appear inline in viewports that are at least 768px wide.**
### Visible labels
@ -145,22 +135,29 @@ Examples of standard form controls supported in an example form layout.
### Inputs
Most common form control, text-based input fields. Includes support for all HTML5 types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`.
The most common form control, text-based input fields. Includes support for all HTML5 types:
<div class="bd-callout bd-callout-danger">
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their `type` is properly declared.</p>
</div>
- `text`
- `password`
- `datetime`
- `datetime-local`
- `date`
- `month`
- `time`
- `week`
- `number`
- `email`
- `url`
- `search`
- `tel`
- `color`
Since Bootstrap requires the HTML5 doctype, **all inputs must have a `type` attribute.**
{% example html %}
<input type="text" class="form-control" placeholder="Text input">
{% endexample %}
<div class="bd-callout bd-callout-info">
<h4>Input groups</h4>
<p>To add integrated text or buttons before and/or after any text-based `&lt;input&gt;`, <a href="../components/#input-groups">check out the input group component</a>.</p>
</div>
### Textarea
Form control which supports multiple lines of text. Change `rows` attribute as necessary.
@ -321,7 +318,7 @@ When you need to place plain text next to a form label within a form, use the `.
## Focus state
We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`.
We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`. Shown below is a custom input that only **demonstrates** the `:focus` state on an `<input>` with `.form-control`.
<div class="bd-example">
<form>
@ -329,11 +326,6 @@ We remove the default `outline` styles on some form controls and apply a `box-sh
</form>
</div>
<div class="bd-callout bd-callout-info">
<h4>Demo `:focus` state</h4>
<p>The above example input uses custom styles in our documentation to demonstrate the `:focus` state on a `.form-control`.</p>
</div>
## Disabled states
Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor.
@ -367,15 +359,17 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
</form>
{% endexample %}
<div class="bd-callout bd-callout-warning">
<h4>Caveat about link functionality of `&lt;a&gt;`</h4>
<p>By default, browsers will treat all native form controls (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code> and <code>&lt;button&gt;</code> elements) inside a <code>&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code>&lt;a ... class="btn btn-*"&gt;</code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
</div>
{% callout warning %}
#### Caveat about link functionality of `<a>`
<div class="bd-callout bd-callout-danger">
<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>
By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons](#buttons-disabled) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
{% endcallout %}
{% callout danger %}
#### Cross-browser compatibility
While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the `disabled` attribute on a `<fieldset>`. Use custom JavaScript to disable the fieldset in these browsers.
{% endcallout %}
## Readonly inputs
@ -389,11 +383,13 @@ Add the `readonly` boolean attribute on an input to prevent modification of the
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
<div class="bd-callout bd-callout-warning" id="callout-form-validation-state-accessibility">
<h4>Conveying validation state to assistive technologies and colorblind users</h4>
<p>Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.</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), include a <a href="../components/#glyphicons">Glyphicon</a> (with appropriate alternative text using the <code>.sr-only</code> class - see the <a href="../components/#glyphicons-examples">Glyphicon examples</a>), or by providing an additional <a href="#forms-help-text">help text</a> block. Specifically for assistive technologies, invalid form controls can also be assigned an <code>aria-invalid="true"</code> attribute.</p>
</div>
{% callout warning %}
#### Conveying validation state to assistive technologies and colorblind users
Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon](../components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples](../components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
{% endcallout %}
{% example html %}
<div class="form-group has-success">
@ -436,10 +432,11 @@ Bootstrap includes validation styles for error, warning, and success states on f
You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.
<div class="bd-callout bd-callout-warning">
<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 `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.</p>
</div>
{% callout warning %}
#### Icons, labels, and input groups
Manual positioning of feedback icons is required for inputs without a label and for [input groups](../components#input-groups) 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 `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.
{% endcallout %}
{% example html %}
<div class="form-group has-success has-feedback">

9
docs/content/images.md
View File

@ -17,10 +17,11 @@ Images in Bootstrap are responsive by default. `max-width: 100%;` and `height: a
<img src="..." class="img-responsive" alt="Responsive image">
{% endhighlight %}
<div class="bd-callout bd-callout-warning">
<h4>SVG images and IE 9-10</h4>
<p>In Internet Explorer 9-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>
{% callout warning %}
#### SVG images and IE 9-10
In Internet Explorer 9-10, SVG images with `.img-responsive` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
{% endcallout %}
## Image shapes

22
docs/content/tables.md
View File

@ -433,21 +433,25 @@ Use contextual classes to color table rows or individual cells.
Create responsive tables by wrapping any `.table` in `.table-responsive` 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.
<div class="bd-callout bd-callout-warning" id="callout-tables-responsive-overflow">
<h4>Vertical clipping/truncation</h4>
<p>Responsive tables make use of <code>overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
</div>
{% callout warning %}
#### Vertical clipping/truncation
Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
{% endcallout %}
{% callout warning %}
#### Firefox and fieldsets
Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we **don't** provide in Bootstrap:
<div class="bd-callout bd-callout-warning">
<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 %}
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
{% endhighlight %}
<p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
</div>
For more information, read [this Stack Overflow answer](http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
{% endcallout %}
<div class="bd-example">
<div class="table-responsive">

5
docs/content/typography.md
View File

@ -131,10 +131,7 @@ Styling for common inline HTML5 elements.
<p><em>This line rendered as italicized text.</em></p>
{% endexample %}
<div class="bd-callout bd-callout-info">
<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>
While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance while `<i>` is mostly for voice, technical terms, etc.
## Alignment classes

12
docs/getting-started/accessibility.md
View File

@ -9,11 +9,13 @@ Bootstrap follows common web standards and—with minimal extra effort—can be
If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
<div class="bd-callout bd-callout-danger" id="callout-skiplinks">
<p>Due to long-standing shortcomings/bugs in Chrome (see <a href="https://code.google.com/p/chromium/issues/detail?id=262171" title="Chromium bug tracker - Issue 262171: Focus should cycle from named anchor">issue 262171 in the Chromium bug tracker</a>) and Internet Explorer (see this article on <a href="http://accessibleculture.org/articles/2010/05/in-page-links/">in-page links and focus order</a>), you will need to make sure that the target of your skip link is at least programmatically focusable by adding <code>tabindex="-1"</code>.</p>
<p>In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with <code>tabindex="-1"</code> when they are clicked with the mouse) with <code>#content:focus { outline: none; }</code>.</p>
<p>Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.</p>
</div>
{% callout danger %}
Due to long-standing shortcomings/bugs in Chrome (see [issue 262171 in the Chromium bug tracker](https://code.google.com/p/chromium/issues/detail?id=262171 "Chromium bug tracker - Issue 262171: Focus should cycle from named anchor")) and Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with `tabindex="-1"` when they are clicked with the mouse) with `#content:focus { outline: none; }`.
Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.
{% endcallout %}
{% highlight html %}
<body>

9
docs/getting-started/contents.md
View File

@ -5,10 +5,11 @@ title: Contents
Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each form's contents and structure below.
<div class="bd-callout bd-callout-warning" id="jquery-required">
<h4>jQuery required</h4>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="../quick-start">starter template</a>. <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>
{% callout warning %}
#### jQuery required
Please note that **all JavaScript plugins require jQuery** to be included, as shown in the [starter template](../quick-start). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported.
{% endcallout %}
### Precompiled Bootstrap

9
docs/getting-started/javascript.md
View File

@ -87,10 +87,11 @@ $.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}"
Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
<div class="bd-callout bd-callout-warning" id="callout-third-party-libs">
<h4>Third-party libraries</h4>
<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.</p>
</div>
{% callout warning %}
#### Third-party libraries
**Bootstrap does not officially support third-party JavaScript libraries** like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own.
{% endcallout %}
## Transitions

47
docs/javascript/buttons.md
View File

@ -6,19 +6,22 @@ title: Buttons
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
<div class="bd-callout bd-callout-danger">
<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>
{% callout danger %}
#### Cross-browser compatibility
[Firefox persists form control states (disabledness and checkedness) across page loads](https://github.com/twbs/bootstrap/issues/793). A workaround for this is to use `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
{% endcallout %}
## Stateful
Add `data-loading-text="Loading..."` to use a loading state on a button.
<div class="bd-callout bd-callout-info">
<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>
{% callout info %}
#### Use whichever state you like!
For the sake of this demonstration, we are using `data-loading-text` and `$().button('loading')`, but that's not the only state you can use. [See more on this below in the `$().button(string)` documentation](#buttons-methods).
{% endcallout %}
{% example html %}
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
@ -43,23 +46,27 @@ Add `data-toggle="button"` to activate toggling on a single button.
</button>
{% endexample %}
<div class="bd-callout bd-callout-warning">
<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>
{% callout warning %}
#### Pre-toggled buttons need `.active` and `aria-pressed="true"`
For pre-toggled buttons, you must add the `.active` class and the `aria-pressed="true"` attribute to the `button` yourself.
{% endcallout %}
## Checkbox and radio
Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles.
<div class="bd-callout bd-callout-warning">
<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="bd-callout bd-callout-warning">
<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>
{% callout warning %}
#### Preselected options need `.active`
For preselected options, you must add the `.active` class to the input's `label` yourself.
{% endcallout %}
{% callout warning %}
#### Visual checked state only updated on click
If the checked state of a checkbox button is updated without firing a `click` event on the button (e.g. via `<input type="reset">` or via setting the `checked` property of the input), you will need to toggle the `.active` class on the input's `label` yourself.
{% endcallout %}
{% example html %}
<div class="bd-example">

9
docs/javascript/tabs.md
View File

@ -42,10 +42,11 @@ Add quick, dynamic tab functionality to transition through panes of local conten
</div>
</div>
<div class="bd-callout bd-callout-info">
<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>
{% callout info %}
#### Extends tabbed navigation
This plugin extends the [tabbed navigation component](../components/#nav-tabs) to add tabbable areas.
{% endcallout %}
## Usage