From ea407666ce3c5d708b4a830fb2d00bdcb0d2d53e Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 11 Nov 2014 20:23:49 -0800 Subject: give all docs callouts IDs [skip sauce] --- docs/_includes/components/alerts.html | 6 +++--- docs/_includes/components/badges.html | 2 +- docs/_includes/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 +- 11 files changed, 36 insertions(+), 36 deletions(-) (limited to 'docs/_includes/components') diff --git a/docs/_includes/components/alerts.html b/docs/_includes/components/alerts.html index bdb88517b..4edcdd211 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 98c615491..18ee70a16 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 871370d43..9ee7c65c8 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 4a1fc86f8..a68856e17 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 6bedbc81b..e1dfc19f6 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 b5f5178df..bc563c5a6 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 31ddfd0c4..c94b60c11 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 05cf2fe81..0a9c6139f 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 0cc1faaba..0b9b42327 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 2ea20d0e8..01420a342 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 f4c1631e7..a7132e763 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.

    -- cgit v1.2.3