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/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 ++-- 6 files changed, 30 insertions(+), 30 deletions(-) (limited to 'docs/_includes/css') diff --git a/docs/_includes/css/buttons.html b/docs/_includes/css/buttons.html index 560c7d2e0..db404dc69 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 efd2d348c..5df36e282 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 a661ded22..0068b159e 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 4f3687ea6..711608912 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 ab7049611..aba4a3af8 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 6eca026de..d0c1daeef 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.

-- cgit v1.2.3