<pclass="lead">Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using <abbrtitle="Assistive Technology"class="initialism">AT</abbr>.</p>
<h3>Skip navigation</h3>
<h2>Skip navigation</h2>
<p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link before the navigation (for a simple explanation, see this <ahref="http://a11yproject.com/posts/skip-nav-links/">A11Y Project article on skip navigation links</a>). Using the <code>.sr-only</code> class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).</p>
<p>Due to long-standing shortcomings/bugs in Chrome (see <ahref="https://code.google.com/p/chromium/issues/detail?id=262171"title="Chromium bug tracker - Issue 262171: Focus should cycle from named anchor">issue 262171 in the Chromium bug tracker</a>) and Internet Explorer (see this article on <ahref="http://accessibleculture.org/articles/2010/05/in-page-links/">in-page links and focus order</a>), you will need to make sure that the target of your skip link is at least programmatically focusable by adding <code>tabindex="-1"</code>.</p>
...
...
@@ -19,14 +19,14 @@
</body>
{% endhighlight %}
<h3>Nested headings</h3>
<h2>Nested headings</h2>
<p>When nesting headings (<code><h1></code> - <code><h6></code>), your primary document header should be an <code><h1></code>. Subsequent headings should make logical use of <code><h2></code> - <code><h6></code> such that screen readers can construct a table of contents for your pages.</p>
<p>Learn more at <ahref="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <ahref="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p>
<h3>Color contrast</h3>
<h2>Color contrast</h2>
<p>Currently, some of the default color combinations available in Bootstrap (such as the various <ahref="../css/#buttons">styled button</a> classes, some of the code highlighting colors used for <ahref="../css/#code-block">basic code blocks</a>, the <code>.bg-primary</code><ahref="../css/#helper-classes-backgrounds">contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <ahref="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p>
<h3>Additional resources</h3>
<h2>Additional resources</h2>
<ul>
<li><ahref="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
<pclass="lead">Bootstrap automatically adapts your pages for various screen sizes.
Here's how to disable this feature so your page works like <ahref="../examples/non-responsive/">this non-responsive example</a>.</p>
<h3>Steps to disable page responsiveness</h3>
<h2>Steps to disable page responsiveness</h2>
<ol>
<li>Omit the viewport <code><meta></code> mentioned in <ahref="../css/#overview-mobile">the CSS docs</a></li>
<li>Override the <code>width</code> on the <code>.container</code> for each grid tier with a single width, for example <code>width: 970px !important;</code> Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
...
...
@@ -14,7 +14,7 @@
<p>You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed).
This disables the "mobile site" aspects of Bootstrap.</p>
<h3>Bootstrap template with responsiveness disabled</h3>
<h2>Bootstrap template with responsiveness disabled</h2>
<p>We've applied these steps to an example. Read its source code to see the specific changes implemented.</p>
<p>The folks over at <ahref="http://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <ahref="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p>
{% highlight html %}
<!-- Latest compiled and minified CSS -->
...
...
@@ -40,11 +40,11 @@
<script src="{{ site.cdn.js }}"></script>
{% endhighlight %}
<h3id="download-bower">Install with Bower</h3>
<h2id="download-bower">Install with Bower</h2>
<p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <ahref="http://bower.io">Bower</a>:</p>
<p><code>require('bootstrap')</code> will load all of Bootstrap's jQuery plugins onto the jQuery object. The <code>bootstrap</code> module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the <code>/js/*.js</code> files under the package's top-level directory.</p>
...
...
@@ -54,6 +54,6 @@
<li><code>style</code> - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)</li>
</ul>
<h3id="download-autoprefixer">Autoprefixer required for Less/Sass</h3>
<h2id="download-autoprefixer">Autoprefixer required for Less/Sass</h2>
<p>Bootstrap uses <ahref="https://github.com/postcss/autoprefixer">Autoprefixer</a> to deal with <ahref="http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm">CSS vendor prefixes</a>. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.</p>
<pclass="lead">Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.</p>
<h3id="examples-framework">Using the framework</h3>
<h2id="examples-framework">Using the framework</h2>
<pclass="lead">Bootstrap is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
<h4>It requires you to:</h4>
<h2>It requires you to:</h2>
<ul>
<li>Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works</li>
</ul>
<h4>It permits you to:</h4>
<h2>It permits you to:</h2>
<ul>
<li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li>
<li>Use Bootstrap in packages or distributions that you create</li>
...
...
@@ -15,7 +15,7 @@
<li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li>
</ul>
<h4>It forbids you to:</h4>
<h2>It forbids you to:</h2>
<ul>
<li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li>
<li>Hold the creators or copyright holders of Bootstrap liable</li>
...
...
@@ -24,7 +24,7 @@
<li>Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question</li>
</ul>
<h4>It does not require you to:</h4>
<h2>It does not require you to:</h2>
<ul>
<li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li>
<li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
<h1id="third-parties"class="page-header">Third party support</h1>
<pclass="lead">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.</p>
<h3id="third-box-sizing">Box-sizing</h3>
<h2id="third-box-sizing">Box-sizing</h2>
<p>Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to <code>* { box-sizing: border-box; }</code>, a rule which makes it so <code>padding</code> does not affect the final computed width of an element. Learn more about <ahref="http://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
<p>Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).</p>
