From a8d95d4721e714a7e1d683e14e997faa5ccddaff Mon Sep 17 00:00:00 2001 From: adamjacobbecker Date: Tue, 6 Aug 2013 21:25:36 -0700 Subject: Improve accessibility (Section 508, WCAG) This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices. What was done - Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria) - Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users. - Advised users to always use label elements. For inline forms, they can hide them with `.sr-only` - Added 'Skip navigation' link - Added "Accessibility" section to getting-started.html. What *wasn't* done - Contrast issues (twbs#3572) - Tooltips (twbs#8469) - Documentation re: usage of icons, since they now live in a separate repo Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out. --- getting-started.html | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 38b6f4ed4..fc03a7ac4 100644 --- a/getting-started.html +++ b/getting-started.html @@ -206,6 +206,39 @@ img { max-width: none; } + +
+
+

Accessibility

+
+

Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to users using assistive technology (AT). However, it's useful to take the following into consideration:

+ +

If your navigation contains many links and comes before your main content in the DOM, add a Skip to content link immediately after your opening body tag. (read why)

+ +{% highlight html %} + + Skip to content + ... +
+ The main page content. +
+ ... + +{% endhighlight %} + +

Another "gotcha" has to do with how you nest your header elements. Section 508 states that your largest header must be an h1, and the next header must be an h2, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.

+ +

Resources

+ +
+ + + -- cgit v1.2.3 From fef413f9970c6985d4f11c08056d991bd3ed3e31 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 7 Aug 2013 00:28:23 -0700 Subject: copy changes --- getting-started.html | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index fc03a7ac4..3bd6c0272 100644 --- a/getting-started.html +++ b/getting-started.html @@ -212,24 +212,23 @@ img { max-width: none; }

Accessibility

-

Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to users using assistive technology (AT). However, it's useful to take the following into consideration:

- -

If your navigation contains many links and comes before your main content in the DOM, add a Skip to content link immediately after your opening body tag. (read why)

+

Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to those using AT.

+

Skip navigation

+

If your navigation contains many links and comes before the main content in the DOM, add a Skip to content link immediately after your opening <body> tag. (read why)

{% highlight html %} Skip to content - ...
The main page content.
- ... {% endhighlight %} -

Another "gotcha" has to do with how you nest your header elements. Section 508 states that your largest header must be an h1, and the next header must be an h2, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.

+

Nested headers

+

Another "gotcha" has to do with how you nest your <header> elements. Section 508 states that your largest header must be an h1, and the next header must be an <h2>, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.

-

Resources

+

Additional resources

We'll keep an eye on this though and update our code if we have an easy solution.

+ +

Modals and mobile devices

+

Support for overflow: hidden on the <body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <body> content will begin to scroll.

-- cgit v1.2.3 From a2475f0145f0b4c2b94feed4310ebd464fbd2df5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 14:23:17 -0700 Subject: better rc2 download action --- getting-started.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 4de547416..ccdfc51e8 100644 --- a/getting-started.html +++ b/getting-started.html @@ -16,8 +16,8 @@ base_url: "../"

There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

Download latest full source

-

Until Bootstrap 3.0.0 is finalized, download the latest full source code (includes compiled and minified versions of our CSS and JavaScript under the dist/ directory).

- Download latest Bootstrap 3 +

Until Bootstrap 3.0.0 is finalized, download the latest full source code (includes compiled and minified versions of our CSS and JavaScript under the dist/ directory).

+

Download latest Bootstrap 3

+
+
+

Disabling responsiveness

+
+

Don't want your site or application to be scale on different device? With a little bit of work you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.

+ +

To disable responsive features, follow these steps. See it in action in the modified template below.

+
    +
  1. Remove (or just don't add) the meta viewport mentioned in the CSS docs
    2. +
  2. Force a single max-width on the .container (e.g., .container { max-width: 940px; }). Be sure this comes after the default Bootstrap CSS otherwise you'll need !important.
    3. +
  3. For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra small device grid scales up to all resolutions, so you're set there.
    4. +
+

You'll still need respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.

+ +{% highlight html %} + + + + Disabling responsiveness in Bootstrap + + + + + + + + + + + +

Hello, world!

+ + + + + + + + + + + +{% endhighlight %} +
+ + +
-- cgit v1.2.3 From 4002ac7e6577ab7b7b3db9c4237a40a40b567360 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 10:54:32 -0700 Subject: update to include nav link and mo betta docs on that last commit --- getting-started.html | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 85d40b387..fc495aeae 100644 --- a/getting-started.html +++ b/getting-started.html @@ -133,6 +133,7 @@ bootstrap/

Don't want your site or application to be scale on different device? With a little bit of work you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.

+

Steps to disable responsive views

To disable responsive features, follow these steps. See it in action in the modified template below.

  1. Remove (or just don't add) the meta viewport mentioned in the CSS docs
    2. @@ -141,6 +142,8 @@ bootstrap/

You'll still need respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.

+

Bootstrap template with disabled responsive

+

We've taken the above steps and applied them to a basic template here. Note the steps above are called out in comments here, e.g. <-- 1. -->.

{% highlight html %} @@ -161,6 +164,13 @@ bootstrap/

Hello, world!

+ +
+
One third
+
One third
+
One third
+
+ -- cgit v1.2.3 From 5a4401ac91f456de749738eea32745ff315dfab2 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 15 Aug 2013 12:01:52 -0700 Subject: copyediting tweaks to "Disabling responsiveness" docs --- getting-started.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index fc495aeae..9c51e9574 100644 --- a/getting-started.html +++ b/getting-started.html @@ -131,14 +131,14 @@ bootstrap/

Disabling responsiveness

-

Don't want your site or application to be scale on different device? With a little bit of work you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.

+

Don't want your site or application to be scale on different device? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.

Steps to disable responsive views

To disable responsive features, follow these steps. See it in action in the modified template below.

    -
  1. Remove (or just don't add) the meta viewport mentioned in the CSS docs
    2. -
  2. Force a single max-width on the .container (e.g., .container { max-width: 940px; }). Be sure this comes after the default Bootstrap CSS otherwise you'll need !important.
    3. -
  3. For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra small device grid scales up to all resolutions, so you're set there.
    4. +
  4. Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
    5. +
  5. Force a single max-width on the .container (e.g., .container { max-width: 940px; }). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need !important.
    6. +
  6. For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.

You'll still need respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.

-- cgit v1.2.3 From 5f311790b9a71645759c956d96df1de93cd43b66 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 15 Aug 2013 12:26:37 -0700 Subject: more fixes for #9513 --- getting-started.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 9c51e9574..fdb703dd9 100644 --- a/getting-started.html +++ b/getting-started.html @@ -228,13 +228,13 @@ bootstrap/ {% highlight js %} if (navigator.userAgent.match(/IEMobile\/10\.0/)) { - var msViewportStyle = document.createElement("style"); + var msViewportStyle = document.createElement("style") msViewportStyle.appendChild( document.createTextNode( "@-ms-viewport{width:auto!important}" ) - ); - document.getElementsByTagName("head")[0].appendChild(msViewportStyle); + ) + document.getElementsByTagName("head")[0].appendChild(msViewportStyle) } {% endhighlight %}

For more information and usage guidelines, read Windows Phone 8 and Device-Width.

-- cgit v1.2.3 From 024e320e5c3cf1adce8404f87e7c0c746461b6e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 17:39:37 -0700 Subject: hella examples fixing, mostly navbars and lots of work on grids example --- getting-started.html | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 86 insertions(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index fdb703dd9..ec9913369 100644 --- a/getting-started.html +++ b/getting-started.html @@ -93,7 +93,7 @@ bootstrap/

Basic template

-

Make use of a super basic HTML template, or dive into a few examples we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.

+

Make use of a super basic HTML template, or dive into a few examples we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.

Copy and paste the HTML from below to get started with a bare bones Bootstrap document.

{% highlight html %} @@ -125,6 +125,91 @@ bootstrap/ + +
+
+

Examples

+
+

Build on the basic template above with Bootstrap's many components. Check out some of the more advanced tips for how to customize and build on top of them.

+ +
+
+ + Carousel + +
+
+ + Grids + +
+
+ +
+ + Jumbotron + +
+
+ + Narrow jumbotron + +
+
+ +
+ + Navbar + +
+
+ + Static navbar + +
+
+ +
+ + Fixed navbar + +
+
+ + Offcanvas + +
+
+ +
+ + Sign-in page + +
+
+ + Sticky footer + +
+
+ +
+ + Sticky footer with navbar + +
+
+ + Starter template + +
+
+ +
+ + +
-- cgit v1.2.3 From 7960845f50b8dcdc5b4fce29e6075f447e04318a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 18:55:20 -0700 Subject: new screenshot images and docs section --- getting-started.html | 75 ++++++++++++++++++++++++++++++++++------------------ 1 file changed, 50 insertions(+), 25 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index ec9913369..cf1afd6e1 100644 --- a/getting-started.html +++ b/getting-started.html @@ -133,77 +133,102 @@ bootstrap/

Build on the basic template above with Bootstrap's many components. Check out some of the more advanced tips for how to customize and build on top of them.

-
+
- - Carousel + + +

Starter template

+

Nothing but the basics: compiled CSS and JavaScript along with a container.

- - Grids + + +

Grids

+

Multiple examples of grid layouts with all four tiers, nesting, and more.

- - Jumbotron + + +

Jumbotron

+

Build around the jumbotron with a navbar and some basic grid columns.

- - Narrow jumbotron + + +

Narrow jumbotron

+

Build a more custom page by narrowing the default container and jumbotron.

- - Navbar + + +

Navbar

+

Super basic template that includes the navbar along with some additional content.

- - Static navbar + + +

Static top navbar

+

Super basic template with a static top navbar along with some additional content.

- - Fixed navbar + + +

Fixed navbar

+

Super basic template with a fixed top navbar along with some additional content.

- - Offcanvas + + +

Sign-in page

+

Custom form layout and design for a simple sign in form.

- - Sign-in page + + +

Sticky footer

+

Attach a footer to the bottom of the viewport when the content is shorter than it.

- - Sticky footer + + +

Sticky footer with navbar

+

Attach a footer to the bottom of the viewport along with a fixed navbar at the top.

- - Sticky footer with navbar + + +

Offcanvas

+

Build a toggleable off-canvas navigation menu for use with Bootstrap.

- - Starter template + + +

Carousel

+

Customize the navbar and carousel, then add some new components.

+
-- cgit v1.2.3 From b2f626837279bb8b0939aa6602bf9ee023e8a323 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 21:09:25 -0700 Subject: more docs updates for new examples --- getting-started.html | 3 --- 1 file changed, 3 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index cf1afd6e1..016ef4c3e 100644 --- a/getting-started.html +++ b/getting-started.html @@ -118,9 +118,6 @@ bootstrap/ {% endhighlight %} - -

Looking for more example templates?

-

Check out the new Examples repository on GitHub, or view them in your browser. Included are over a dozen example templates for building with and extending Bootstrap.

-- cgit v1.2.3 From 29fe7ed68402aee6c24949ed2509a415d179bb57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 10:58:28 -0700 Subject: fix up justified nav example --- getting-started.html | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 016ef4c3e..0c5c67c25 100644 --- a/getting-started.html +++ b/getting-started.html @@ -207,10 +207,17 @@ bootstrap/

Sticky footer with navbar

-

Attach a footer to the bottom of the viewport along with a fixed navbar at the top.

+

Attach a footer to the bottom of the viewport with a fixed navbar at the top.

+
+ + + +

Justified nav

+

Expand on the default navbar and more to create justified navigation links.

+
@@ -218,6 +225,8 @@ bootstrap/

Offcanvas

Build a toggleable off-canvas navigation menu for use with Bootstrap.

+
+
-- cgit v1.2.3 From 3c880e681d49ade20f1b9fcbfb573172d24b3b89 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 13:30:33 -0700 Subject: finish up second pass through docs nav, headings, organization, naming, etc (another run through at #9710) --- getting-started.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 0c5c67c25..d19055052 100644 --- a/getting-started.html +++ b/getting-started.html @@ -15,7 +15,7 @@ base_url: "../"

There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

-

Download latest full source

+

Download latest full source

Until Bootstrap 3.0.0 is finalized, download the latest full source code (includes compiled and minified versions of our CSS and JavaScript under the dist/ directory).

Download latest Bootstrap 3

-

More download options

+

Additional downloads

Download latest source code @@ -41,7 +41,7 @@ base_url: "../" {% highlight bash %}$ bower install bootstrap{% endhighlight %}

-

Use the Bootstrap CDN

+

Bootstrap CDN

The folks over at NetDNA have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the Bootstrap CDN links listed below.

{% highlight html linenos %} -- cgit v1.2.3 From 53c80ed9cbeff8a3c58abe0f824ff68ef56d617a Mon Sep 17 00:00:00 2001 From: fat Date: Sat, 17 Aug 2013 13:40:28 -0700 Subject: add comment addressing #9023 --- getting-started.html | 1 + 1 file changed, 1 insertion(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index d19055052..ea5f96e61 100644 --- a/getting-started.html +++ b/getting-started.html @@ -365,6 +365,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

Modals and mobile devices

Support for overflow: hidden on the <body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <body> content will begin to scroll.

+

Also, note that if you're using inputs in your modal – iOS has a rendering bug which doesn't update the position of fixed elements when the virtual keyboard is triggered. There are a few work arounds for this including transforming your elements to position absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

Browser zooming

Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.

-- cgit v1.2.3 From 6c765ac8211536e9701e996416b8a5296590d5fd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 15:02:38 -0700 Subject: add nonresponsive template to examples --- getting-started.html | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index ea5f96e61..b83ec90dd 100644 --- a/getting-started.html +++ b/getting-started.html @@ -234,6 +234,13 @@ bootstrap/

Carousel

Customize the navbar and carousel, then add some new components.

+
+ + + +

Non-responsive Bootstrap

+

Easily disable the responsiveness of Bootstrap per our docs.

+
-- cgit v1.2.3 From 4f97df8aa42d2609efd52ea21f1e84124afbe39d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 15:07:53 -0700 Subject: update non-responsive docs and example to really disable it --- getting-started.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index b83ec90dd..68dfedab4 100644 --- a/getting-started.html +++ b/getting-started.html @@ -260,7 +260,7 @@ bootstrap/

To disable responsive features, follow these steps. See it in action in the modified template below.

  1. Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
    2. -
  2. Force a single max-width on the .container (e.g., .container { max-width: 940px; }). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need !important.
    3. +
  3. Remove the max-width on the .container for all grid tiers with .container { max-width: none !important; } and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
  4. For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.

You'll still need respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.

@@ -280,7 +280,10 @@ bootstrap/ -- cgit v1.2.3 From 27424ee42287f5047345fc8d54c55eedcbc3c172 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 17 Aug 2013 17:26:54 -0700 Subject: improve grammar in "Alternate customization methods" docs --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 68dfedab4..5da537393 100644 --- a/getting-started.html +++ b/getting-started.html @@ -556,7 +556,7 @@ img { max-width: none; }

Alternate customization methods

-

While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to your own classes via mixins. For the time being, neither options are documented here.

+

While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to your own classes via mixins. For the time being, neither of those options are documented here.

Removing potential bloat

-- cgit v1.2.3