From ea407666ce3c5d708b4a830fb2d00bdcb0d2d53e Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 11 Nov 2014 20:23:49 -0800 Subject: [PATCH] give all docs callouts IDs [skip sauce] --- docs/_includes/components/alerts.html | 6 ++--- docs/_includes/components/badges.html | 2 +- .../components/button-dropdowns.html | 2 +- docs/_includes/components/button-groups.html | 14 +++++------ docs/_includes/components/dropdowns.html | 4 ++-- docs/_includes/components/glyphicons.html | 8 +++---- docs/_includes/components/input-groups.html | 6 ++--- docs/_includes/components/labels.html | 2 +- docs/_includes/components/navbar.html | 18 +++++++------- docs/_includes/components/navs.html | 8 +++---- docs/_includes/components/progress-bars.html | 2 +- docs/_includes/css/buttons.html | 12 +++++----- docs/_includes/css/forms.html | 24 +++++++++---------- docs/_includes/css/helpers.html | 10 ++++---- docs/_includes/css/images.html | 4 ++-- docs/_includes/css/tables.html | 6 ++--- docs/_includes/css/type.html | 4 ++-- docs/_includes/js/buttons.html | 10 ++++---- docs/_includes/js/collapse.html | 4 ++-- docs/_includes/js/dropdowns.html | 2 +- docs/_includes/js/modal.html | 6 ++--- docs/_includes/js/overview.html | 6 ++--- docs/_includes/js/popovers.html | 16 ++++++------- docs/_includes/js/scrollspy.html | 6 ++--- docs/_includes/js/tabs.html | 2 +- docs/_includes/js/tooltips.html | 12 +++++----- 26 files changed, 98 insertions(+), 98 deletions(-) diff --git a/docs/_includes/components/alerts.html b/docs/_includes/components/alerts.html index bdb88517bd..4edcdd2113 100644 --- a/docs/_includes/components/alerts.html +++ b/docs/_includes/components/alerts.html @@ -6,7 +6,7 @@

Examples

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.

-
+

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.

@@ -34,7 +34,7 @@

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button.

-
+

Requires JavaScript alert plugin

For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin.

@@ -51,7 +51,7 @@
{% endhighlight %} -
+

Ensure proper behavior across all devices

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

diff --git a/docs/_includes/components/badges.html b/docs/_includes/components/badges.html index 98c6154914..18ee70a16a 100644 --- a/docs/_includes/components/badges.html +++ b/docs/_includes/components/badges.html @@ -21,7 +21,7 @@

Self collapsing

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

-
+

Cross-browser compatibility

Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.

diff --git a/docs/_includes/components/button-dropdowns.html b/docs/_includes/components/button-dropdowns.html index 871370d431..9ee7c65c87 100644 --- a/docs/_includes/components/button-dropdowns.html +++ b/docs/_includes/components/button-dropdowns.html @@ -3,7 +3,7 @@

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

-
+

Plugin dependency

Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.

diff --git a/docs/_includes/components/button-groups.html b/docs/_includes/components/button-groups.html index 4a1fc86f82..a68856e173 100644 --- a/docs/_includes/components/button-groups.html +++ b/docs/_includes/components/button-groups.html @@ -3,12 +3,12 @@

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.

-
+

Tooltips & popovers in button groups require special setting

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).

-
+

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".

One exception are groups which only contain a single control (for instance the justified button groups with <button> elements) or a dropdown.

@@ -190,11 +190,11 @@

Justified button groups

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.

-
+

Handling borders

Due to the specific HTML and CSS used to justify buttons (namely display: table-cell), the borders between them are doubled. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them. However, margin doesn't work with display: table-cell. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.

-
+

IE8 and borders

Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <a> or <button> elements. To get around that, wrap each button in another .btn-group.

See #12476 for more information.

@@ -232,9 +232,9 @@
{% endhighlight %} -
-

Links acting as buttons

-

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".

+
+

Links acting as buttons

+

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".

With <button> elements

diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html index 6bedbc81b5..e1dfc19f6e 100644 --- a/docs/_includes/components/dropdowns.html +++ b/docs/_includes/components/dropdowns.html @@ -36,11 +36,11 @@

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.

-
+

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.

-
+

Deprecated .pull-right alignment

As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

diff --git a/docs/_includes/components/glyphicons.html b/docs/_includes/components/glyphicons.html index b5f5178df3..bc563c5a6d 100644 --- a/docs/_includes/components/glyphicons.html +++ b/docs/_includes/components/glyphicons.html @@ -17,15 +17,15 @@

How to use

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.

-
+

Don't mix with other components

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 <span> and apply the icon classes to the <span>.

-
+

Only for use on empty elements

Icon classes should only be used on elements that contain no text content and have no child elements.

-
+

Changing the icon font location

Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:

    @@ -35,7 +35,7 @@

Use whatever option best suits your specific development setup.

-
+

Accessible icons

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 aria-hidden="true" attribute.

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 .sr-only class.

diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index 31ddfd0c4c..c94b60c115 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -3,16 +3,16 @@

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.

-
+

Textual <input>s only

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.

-
+

Tooltips & popovers in input groups require special setting

When using tooltips or popovers on elements within an .input-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).

-
+

Don't mix with other components

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.

diff --git a/docs/_includes/components/labels.html b/docs/_includes/components/labels.html index 05cf2fe81d..0a9c6139f7 100644 --- a/docs/_includes/components/labels.html +++ b/docs/_includes/components/labels.html @@ -33,7 +33,7 @@ Danger {% endhighlight %} -
+

Have tons of labels?

Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219.

diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html index 0cc1faaba7..0b9b423277 100644 --- a/docs/_includes/components/navbar.html +++ b/docs/_includes/components/navbar.html @@ -14,16 +14,16 @@
  • Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.
    • -
    +

    Requires JavaScript plugin

    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 .navbar-collapse.

    The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

    -
    +

    Changing the collapsed mobile navbar breakpoint

    The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

    -
    +

    Make navbars accessible

    Be sure to add a role="navigation" to every navbar to help with accessibility.

    @@ -201,12 +201,12 @@ {% endhighlight %} -
    +

    Mobile device caveats

    There are some caveats regarding using form controls within fixed elements on mobile devices. See our browser support docs for details.

    -
    +

    Always add labels

    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 .sr-only class.

    @@ -236,7 +236,7 @@ {% endhighlight %} -
    +

    Context-specific usage

    Like the standard button classes, .navbar-btn can be used on <a> and <input> elements. However, neither .navbar-btn nor the standard button classes should be used on <a> elements within .navbar-nav.

    @@ -294,7 +294,7 @@

    Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.

    These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

    -
    +

    Right aligning multiple components

    Navbars currently have a limitation with multiple .navbar-right classes. To properly space content, we use negative margin on the last .navbar-right element. When there are multiple elements using that class, these margins don't work as intended.

    We'll revisit this when we can rewrite that component in v4.

    @@ -335,7 +335,7 @@ {% endhighlight %} -
    +

    Body padding required

    The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

    {% highlight scss %} @@ -379,7 +379,7 @@ body { padding-top: 70px; } {% endhighlight %} -
    +

    Body padding required

    The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

    {% highlight scss %} diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html index 2ea20d0e82..01420a3426 100644 --- a/docs/_includes/components/navs.html +++ b/docs/_includes/components/navs.html @@ -3,12 +3,12 @@

    Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

    -
    +

    Using navs for tab panels requires JavaScript tabs plugin

    For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.

    -
    +

    Make navs used as navigation accessible

    If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

    @@ -65,7 +65,7 @@

    Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

    Justified navbar nav links are currently not supported.

    -
    +

    Safari and responsive justified navs

    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 justified nav example.

    @@ -95,7 +95,7 @@

    For any nav component (tabs or pills), add .disabled for gray links and no hover effects.

    -
    +

    Link functionality not impacted

    This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

    diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html index f4c1631e7f..a7132e763f 100644 --- a/docs/_includes/components/progress-bars.html +++ b/docs/_includes/components/progress-bars.html @@ -3,7 +3,7 @@

    Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

    -
    +

    Cross-browser compatibility

    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.

    diff --git a/docs/_includes/css/buttons.html b/docs/_includes/css/buttons.html index 560c7d2e0c..db404dc69b 100644 --- a/docs/_includes/css/buttons.html +++ b/docs/_includes/css/buttons.html @@ -35,7 +35,7 @@ {% endhighlight %} -
    +

    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.

    @@ -132,7 +132,7 @@ {% endhighlight %} -
    +

    Cross-browser compatibility

    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.

    @@ -150,11 +150,11 @@

    We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

    -
    +

    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.

    -
    +

    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.

    @@ -175,12 +175,12 @@ {% endhighlight %} -
    +

    Links acting as buttons

    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".

    -
    +

    Cross-browser rendering

    As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

    Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

    diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index efd2d348cf..5df36e2820 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -49,7 +49,7 @@ {% endhighlight %} -
    +

    Don't mix form groups with input groups

    Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

    @@ -57,11 +57,11 @@

    Inline form

    Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

    -
    +

    Requires custom widths

    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.

    -
    +

    Always add labels

    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. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute. If none of these is present, screen readers may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised.

    @@ -186,7 +186,7 @@

    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.

    -
    +

    Type declaration required

    Inputs will only be fully styled if their type is properly declared.

    @@ -198,7 +198,7 @@ {% highlight html %} {% endhighlight %} -
    +

    Input groups

    To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

    @@ -473,7 +473,7 @@
    -
    +

    Demo :focus state

    The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.

    @@ -493,12 +493,12 @@

    Disabled fieldsets

    Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

    -
    +

    Caveat about link functionality of <a>

    Our styles use pointer-events: none to try to disable the link functionality of <a class="btn btn-*"> 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.

    -
    +

    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.

    @@ -564,7 +564,7 @@

    Validation states

    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.

    -
    +

    Conveying validation state to assistive technologies

    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.

    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), or associate an additional element with textual information about the validation state with the form control using aria-describedby (see the example in the following section). In the case of an error, you could also use the aria-invalid="true" attribute on the form control.

    @@ -652,11 +652,11 @@

    With optional icons

    You can also add optional feedback icons with the addition of .has-feedback and the right icon.

    Feedback icons only work with textual <input class="form-control"> elements.

    -
    +

    Icons, labels, and input groups

    Manual positioning of feedback icons is required for inputs without a label and for 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.

    -
    +

    Conveying the icon's meaning to assistive technologies

    To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the .sr-only class and explicitly associated with the form control it relates to using aria-describedby. 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 <label> associated with the form control.

    Although the following examples already mention the validation state of their respective form controls in the <label> text itself, the above technique (using .sr-only text and aria-describedby) has been included for illustrative purposes.

    @@ -874,7 +874,7 @@

    Help text

    Block level help text for form controls.

    -
    +

    Associating help text with form controls

    Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.

    diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html index a661ded225..0068b159e3 100644 --- a/docs/_includes/css/helpers.html +++ b/docs/_includes/css/helpers.html @@ -19,11 +19,11 @@

    ...

    ...

    {% endhighlight %} -
    +

    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.

    -
    +

    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.

    @@ -44,11 +44,11 @@

    ...

    ...

    {% endhighlight %} -
    +

    Dealing with specificity

    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.

    -
    +

    Conveying meaning to assistive technologies

    As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.

    @@ -97,7 +97,7 @@ } {% endhighlight %} -
    +

    Not for use in navbars

    To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

    diff --git a/docs/_includes/css/images.html b/docs/_includes/css/images.html index 4f3687ea64..7116089128 100644 --- a/docs/_includes/css/images.html +++ b/docs/_includes/css/images.html @@ -3,7 +3,7 @@

    Responsive images

    Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

    -
    +

    SVG images and IE 8-10

    In Internet Explorer 8-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.

    @@ -13,7 +13,7 @@

    Image shapes

    Add classes to an <img> element to easily style images in any project.

    -
    +

    Cross-browser compatibility

    Keep in mind that Internet Explorer 8 lacks support for rounded corners.

    diff --git a/docs/_includes/css/tables.html b/docs/_includes/css/tables.html index ab70496119..aba4a3af82 100644 --- a/docs/_includes/css/tables.html +++ b/docs/_includes/css/tables.html @@ -45,7 +45,7 @@

    Striped rows

    Use .table-striped to add zebra-striping to any table row within the <tbody>.

    -
    +

    Cross-browser compatibility

    Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

    @@ -346,7 +346,7 @@ ... {% endhighlight %} -
    +

    Conveying meaning to assistive technologies

    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 .sr-only class.

    @@ -354,7 +354,7 @@

    Responsive tables

    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.

    -
    +

    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:

    {% highlight css %} diff --git a/docs/_includes/css/type.html b/docs/_includes/css/type.html index 6eca026de5..d0c1daeef5 100644 --- a/docs/_includes/css/type.html +++ b/docs/_includes/css/type.html @@ -183,7 +183,7 @@ You can use the mark tag to highlight text. rendered as italicized text {% endhighlight %} -
    +

    Alternate elements

    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.

    @@ -455,7 +455,7 @@ You can use the mark tag to highlight text. {% endhighlight %} -
    +

    Auto-truncating

    Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. In narrower viewports, they will change to the default stacked layout.

    diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html index 5303a91ac3..44588b5b35 100644 --- a/docs/_includes/js/buttons.html +++ b/docs/_includes/js/buttons.html @@ -3,14 +3,14 @@

    Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

    -
    +

    Cross-browser compatibility

    Firefox persists form control states (disabledness and checkedness) across page loads. A workaround for this is to use autocomplete="off". See Mozilla bug #654072.

    Stateful

    Add data-loading-text="Loading..." to use a loading state on a button.

    -
    +

    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.

    @@ -35,7 +35,7 @@

    Single toggle

    Add data-toggle="button" to activate toggling on a single button.

    -
    +

    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.

    @@ -52,11 +52,11 @@

    Checkbox / Radio

    Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.

    -
    +

    Preselected options need .active

    For preselected options, you must add the .active class to the input's label yourself.

    -
    +

    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.

    diff --git a/docs/_includes/js/collapse.html b/docs/_includes/js/collapse.html index 44d05e5366..196eadff32 100644 --- a/docs/_includes/js/collapse.html +++ b/docs/_includes/js/collapse.html @@ -4,7 +4,7 @@

    About

    Get base styles and flexible support for collapsible components like accordions and navigation.

    -
    +

    Plugin dependency

    Collapse requires the transitions plugin to be included in your version of Bootstrap.

    @@ -136,7 +136,7 @@
    ...
    {% endhighlight %} -
    +

    Make expand/collapse controls accessible

    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.

    diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html index 28b5993092..2268b57800 100644 --- a/docs/_includes/js/dropdowns.html +++ b/docs/_includes/js/dropdowns.html @@ -150,7 +150,7 @@ {% highlight js %} $('.dropdown-toggle').dropdown() {% endhighlight %} -
    +

    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.

    diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html index 4c0d46e9b0..993b72103d 100644 --- a/docs/_includes/js/modal.html +++ b/docs/_includes/js/modal.html @@ -10,7 +10,7 @@

    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.

    -
    +

    Mobile device caveats

    There are some caveats regarding using modals on mobile devices. See our browser support docs for details.

    @@ -134,13 +134,13 @@
    {% endhighlight %} -
    +

    Make modals accessible

    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.

    -
    +

    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 for more information.

    diff --git a/docs/_includes/js/overview.html b/docs/_includes/js/overview.html index 4e4faa4a94..b95bb6c5ff 100644 --- a/docs/_includes/js/overview.html +++ b/docs/_includes/js/overview.html @@ -4,12 +4,12 @@

    Individual or compiled

    Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).

    -
    +

    Using the compiled JavaScript

    Both bootstrap.js and bootstrap.min.js contain all plugins in a single file. Include only one.

    -
    +

    Plugin dependencies

    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 before the plugin files). Consult our bower.json to see which versions of jQuery are supported.

    @@ -27,7 +27,7 @@ $(document).off('.data-api') $(document).off('.alert.data-api') {% endhighlight %} -
    +

    Only one plugin per element via data attributes

    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.

    diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index a03c8d9a8d..4e0c263730 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -4,11 +4,11 @@

    Add small overlays of content, like those on the iPad, to any element for housing secondary information.

    Popovers whose both title and content are zero-length are never displayed.

    -
    +

    Plugin dependency

    Popovers require the tooltip plugin to be included in your version of Bootstrap.

    -
    +

    Opt-in functionality

    For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

    One way to initialize all popovers on a page would be to select them by their data-toggle attribute:

    @@ -18,19 +18,19 @@ $(function () { }) {% endhighlight %}
    -
    +

    Popovers in button groups and input groups require special setting

    When using popovers on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).

    -
    +

    Don't try to show popovers on hidden elements

    Invoking $(...).popover('show') when the target element is display: none; will cause the popover to be incorrectly positioned.

    -
    +

    Popovers on disabled elements require wrapper elements

    To add a popover to a disabled or .disabled element, put the element inside of a <div> and apply the popover to that <div> instead.

    -
    +

    Multiple-line links

    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 white-space: nowrap; to your anchors to avoid this.

    @@ -121,7 +121,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">

    Dismiss on next click

    Use the focus trigger to dismiss popovers on the next click that the user makes.

    -
    +

    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 attribute.

    @@ -242,7 +242,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
    -
    +

    Data attributes for individual popovers

    Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

    diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html index d58ddbe5aa..4f660b40e6 100644 --- a/docs/_includes/js/scrollspy.html +++ b/docs/_includes/js/scrollspy.html @@ -51,15 +51,15 @@

    Usage

    -
    +

    Requires Bootstrap nav

    Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

    -
    +

    Resolvable ID targets required

    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>.

    -
    +

    Non-:visible target elements ignored

    Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

    diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html index 9de511b9a6..018d45d0e2 100644 --- a/docs/_includes/js/tabs.html +++ b/docs/_includes/js/tabs.html @@ -31,7 +31,7 @@
    -
    +

    Extends tabbed navigation

    This plugin extends the tabbed navigation component to add tabbable areas.

    diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index f349d08d3e..12ffbb72e1 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -58,7 +58,7 @@ {% endhighlight %} -
    +

    Opt-in functionality

    For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

    One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

    @@ -69,15 +69,15 @@ $(function () { {% endhighlight %}
    -
    +

    Tooltips in button groups and input groups require special setting

    When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

    -
    +

    Don't try to show tooltips on hidden elements

    Invoking $(...).tooltip('show') when the target element is display: none; will cause the tooltip to be incorrectly positioned.

    -
    +

    Tooltips on disabled elements require wrapper elements

    To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.

    @@ -91,7 +91,7 @@ $('#example').tooltip(options)

    Markup

    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).

    -
    +

    Multiple-line links

    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 white-space: nowrap; to your anchors to avoid this.

    @@ -203,7 +203,7 @@ $('#example').tooltip(options)
    -
    +

    Data attributes for individual tooltips

    Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.