Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older and less advanced browsers might receive a less stylized, though fully functional, version of certain components.

@@ -153,6 +153,37 @@ bootstrap/ + +

+ +

While we don't officially support any third party plugins or add-ons, we do offer some helpful advice to help avoid some potential issues in your projects.

+ +

Google Maps

If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of * { box-sizing: border-box; }. Previously, you may have also ran into issues with the use of max-width on images. The following snippet should avoid all those problems.

+{% highlight css %} +/* Fix Google Maps canvas + * + * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's + * global `box-sizing` changes. You may optionally need to reset the `max-width` + * on images in case you've applied that anywhere else. (That shouldn't be as + * necessary with Bootstrap 3 though as that behavior is relegated to the + * `.img-responsive` class.) + */ + +.google-map-canvas, +.google-map-canvas * { .box-sizing(content-box); } + +/* Optional responsive image override */ +img { max-width: none; } +{% endhighlight %} +

+ + + +

-- cgit v1.2.3 From dbde90ec0dc28aea7d9bdb337fd8f621011f2054 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 6 Aug 2013 17:46:40 -0700 Subject: some copy editing --- 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 480931f3b..38b6f4ed4 100644 --- a/getting-started.html +++ b/getting-started.html @@ -182,7 +182,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { -

While we don't officially support any third party plugins or add-ons, we do offer some helpful advice to help avoid some potential issues in your projects.

While we don't officially support any third party plugins or add-ons, we do offer some helpful advice to help avoid potential issues in your projects.

Google Maps

-- cgit v1.2.3 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; } + +

+ +

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 %} + + + ... +

+ 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; } -

- -

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

The main page content.

- ... {% endhighlight %} -

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

"HTML Codesniffer" bookmarklet for identifying accessibility issues
The A11Y Project

-- cgit v1.2.3 From b2b44a53b7196084c0d4ba80db84c2f83171a42b Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 9 Aug 2013 17:48:29 -0700 Subject: getting-started docs: rephrase to avoid "helpful...help" --- 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 3bd6c0272..8e2c6632a 100644 --- a/getting-started.html +++ b/getting-started.html @@ -182,7 +182,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { -

While we don't officially support any third party plugins or add-ons, we do offer some helpful advice to help avoid potential issues in your projects.

While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.

Google Maps

-- cgit v1.2.3 From d48387aa4d7ba3e6b94947b22c2d7e9afc486f0b Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 9 Aug 2013 17:55:12 -0700 Subject: Fixes #9260 --- 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 8e2c6632a..4db392ad5 100644 --- a/getting-started.html +++ b/getting-started.html @@ -103,7 +103,7 @@ bootstrap/

Hello, world!

- + -- cgit v1.2.3 From da417c3e7e1c621973348954a5a80c8db319789e Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 9 Aug 2013 18:01:11 -0700 Subject: Use protocol-relative URL in example --- 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 4db392ad5..f9245e5f8 100644 --- a/getting-started.html +++ b/getting-started.html @@ -104,7 +104,7 @@ bootstrap/

Hello, world!

- + -- cgit v1.2.3 From 38d6e7179a03c5830030d96e2ab3190760a60695 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 12 Aug 2013 12:32:32 -0700 Subject: don't show download_dist in favor of site.download; addresses #9138 & its many dupes --- getting-started.html | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index f9245e5f8..c326734b2 100644 --- a/getting-started.html +++ b/getting-started.html @@ -15,9 +15,14 @@ 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

More download options

-- cgit v1.2.3 From 3f2408f9e8cbdf359fdc587a8b463c06860162f4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 15:13:38 -0700 Subject: mention #9282 in docs browser section --- getting-started.html | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index f9245e5f8..fc4c59d46 100644 --- a/getting-started.html +++ b/getting-started.html @@ -172,6 +172,14 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { } {% endhighlight %}

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

+ +

Safari percent rounding

In the latest Safari for Mac, it's rendering engine has a little trouble with the long decimal places of our .col-*-1 grid classes, meaning if you have 12 individual columns you'll notice they come up short compared to other rows of columns. There's not much we can do here (see #9282) but you do have some options:

Add .pull-right to your last grid column to get the hard-right alignment
Tweak your percentages manually to get the perfect rounding for Webkit (more difficult than the first option)

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

Date: Mon, 12 Aug 2013 15:25:41 -0700 Subject: fix typo; fix caps --- 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 fc4c59d46..4de9a0fa9 100644 --- a/getting-started.html +++ b/getting-started.html @@ -174,10 +174,10 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

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

Safari percent rounding

In the latest Safari for Mac, its rendering engine has a little trouble with the long decimal places of our .col-*-1 grid classes, meaning if you have 12 individual columns you'll notice they come up short compared to other rows of columns. There's not much we can do here (see #9282) but you do have some options:

Add .pull-right to your last grid column to get the hard-right alignment
Tweak your percentages manually to get the perfect rounding for Webkit (more difficult than the first option)
Tweak your percentages manually to get the perfect rounding for WebKit (more difficult than the first option)

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

-- cgit v1.2.3 From 55c36f86d04381eea18d581ebe87d91d57ffe454 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 15:44:01 -0700 Subject: safari not webkit --- 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 4de9a0fa9..b6588e7f6 100644 --- a/getting-started.html +++ b/getting-started.html @@ -177,7 +177,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

Add .pull-right to your last grid column to get the hard-right alignment
Tweak your percentages manually to get the perfect rounding for WebKit (more difficult than the first option)
Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)

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

Hello, world!

One third

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

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.

Remove (or just don't add) the meta viewport mentioned in the CSS docs
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.
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.
Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
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.
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/ -

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/ + +

+ +

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

Download compiled CSS and JS

jQuery required

More download options

@@ -38,8 +36,6 @@ base_url: "../" {% highlight bash %}$ bower install bootstrap{% endhighlight %}

Use the Bootstrap CDN

Windows Phone 8 and Internet Explorer 10

Browser compatibility

Browser support

Third party support

Google Maps

Third party support

Google Maps

Accessibility

Resources

Accessibility

Skip navigation

Nested headers

Resources

Additional resources

Third party support

Google Maps

Hello, world!

Hello, world!

Download latest full source

More download options

Safari percent rounding

Safari percent rounding

Modals and mobile devices

Download latest full source

Disabling responsiveness

Hello, world!

Steps to disable responsive views

Bootstrap template with disabled responsive

Hello, world!

Disabling responsiveness

Steps to disable responsive views

Basic template

Examples

Starter template

Grids

Jumbotron

Narrow jumbotron

Navbar

Static top navbar

Fixed navbar

Sign-in page

Sticky footer

Sticky footer with navbar

Offcanvas

Carousel

Looking for more example templates?