mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-30 15:24:08 +03:00
Use https, fix broken links and unneeded redirects.
This commit is contained in:
XhmikosR
@@ -3,9 +3,9 @@
|
||||
<p class="lead">Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>
|
||||
|
||||
<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 <a href="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>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 <a href="https://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>
|
||||
<div class="bs-callout bs-callout-danger" id="callout-skiplinks">
|
||||
<p>Due to long-standing shortcomings/bugs in Chrome (see <a href="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 <a href="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>
|
||||
<p>Due to long-standing shortcomings/bugs in Chrome (see <a href="https://bugs.chromium.org/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 <a href="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>
|
||||
<p>In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with <code>tabindex="-1"</code> when they are clicked with the mouse) with <code>#content:focus { outline: none; }</code>.</p>
|
||||
<p>Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.</p>
|
||||
</div>
|
||||
@@ -21,17 +21,17 @@
|
||||
|
||||
<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 <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p>
|
||||
<p>Learn more at <a href="https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="http://accessibility.psu.edu/headings/">Penn State's AccessAbility</a>.</p>
|
||||
|
||||
<h2>Color contrast</h2>
|
||||
<p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href="{{ site.baseurl }}/css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="{{ site.baseurl }}/css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="{{ site.baseurl }}/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 <a href="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>
|
||||
<p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href="{{ site.baseurl }}/css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="{{ site.baseurl }}/css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="{{ site.baseurl }}/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 <a href="https://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>
|
||||
|
||||
<h2>Additional resources</h2>
|
||||
<ul>
|
||||
<li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
|
||||
<li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome's Accessibility Developer Tools extension</a></li>
|
||||
<li><a href="http://www.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a></li>
|
||||
<li><a href="http://a11yproject.com/">The A11Y Project</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
|
||||
<li><a href="https://developer.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a></li>
|
||||
<li><a href="https://a11yproject.com/">The A11Y Project</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
|
||||
<p>On Windows, <strong>we support Internet Explorer 8-11</strong>.</p>
|
||||
|
||||
<p>For Firefox, in addition to the latest normal stable release, we also support the latest <a href="https://www.mozilla.org/en-US/firefox/organizations/faq/">Extended Support Release (ESR)</a> version of Firefox.</p>
|
||||
<p>For Firefox, in addition to the latest normal stable release, we also support the latest <a href="https://www.mozilla.org/en-US/firefox/organizations/">Extended Support Release (ESR)</a> version of Firefox.</p>
|
||||
|
||||
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, though they are not officially supported.</p>
|
||||
<p>For a list of some of the browser bugs that Bootstrap has to grapple with, see our <a href="{{ site.baseurl }}/browser-bugs/">Wall of browser bugs</a>.</p>
|
||||
@@ -119,7 +119,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>Visit <a href="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
|
||||
<p>Visit <a href="https://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
|
||||
|
||||
<h2 id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h2>
|
||||
<p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
|
||||
@@ -143,14 +143,14 @@
|
||||
{% endhighlight %}
|
||||
<p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
|
||||
<p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
|
||||
<p>See <a href="https://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
|
||||
<p>See <a href="https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do">this StackOverflow question</a> for more information.</p>
|
||||
|
||||
<h2 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h2>
|
||||
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
|
||||
{% highlight scss %}
|
||||
@-ms-viewport { width: device-width; }
|
||||
{% endhighlight %}
|
||||
<p>However, this doesn't work for devices running Windows Phone 8 versions older than <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p>
|
||||
<p>However, this doesn't work for devices running Windows Phone 8 versions older than <a href="https://blogs.windows.com/buildingapps/2013/10/14/introducing-windows-phone-preview-for-developers/">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p>
|
||||
{% highlight scss %}
|
||||
@-ms-viewport { width: device-width; }
|
||||
@-o-viewport { width: device-width; }
|
||||
@@ -170,7 +170,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
||||
document.querySelector('head').appendChild(msViewportStyle)
|
||||
}
|
||||
{% endhighlight %}
|
||||
<p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
|
||||
<p>For more information and usage guidelines, read <a href="https://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
|
||||
<p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p>
|
||||
|
||||
<h2 id="support-safari-percentages">Safari percent rounding</h2>
|
||||
@@ -228,7 +228,7 @@ $(function () {
|
||||
})
|
||||
</script>
|
||||
{% endhighlight %}
|
||||
<p>Want to see an example? <a href="http://jsbin.com/kuvoz/1">Check out this JS Bin demo.</a></p>
|
||||
<p>Want to see an example? <a href="http://output.jsbin.com/kuvoz/1">Check out this JS Bin demo.</a></p>
|
||||
|
||||
<h2 id="support-validators">Validators</h2>
|
||||
<p>In order to provide the best possible experience to old and buggy browsers, Bootstrap uses <a href="http://browserhacks.com">CSS browser hacks</a> in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.</p>
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
|
||||
<p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
|
||||
<ul>
|
||||
<li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
|
||||
<li>Read and subscribe to <a href="https://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
|
||||
<li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/%23bootstrap">##bootstrap channel</a>.</li>
|
||||
<li>For help using Bootstrap, ask on <a href="https://stackoverflow.com/questions/tagged/twitter-bootstrap-3">StackOverflow using the tag <code>twitter-bootstrap-3</code></a>.</li>
|
||||
<li>Developers should use the keyword <code>bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/browse/keyword/bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
|
||||
<li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
|
||||
<li>Developers should use the keyword <code>bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
|
||||
<li>Find inspiring examples of people building with Bootstrap at the <a href="https://expo.getbootstrap.com/">Bootstrap Expo</a>.</li>
|
||||
</ul>
|
||||
<p>You can also follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
|
||||
</div>
|
||||
|
||||
@@ -41,23 +41,23 @@
|
||||
{% endhighlight %}
|
||||
|
||||
<h2 id="download-bower">Install with Bower</h2>
|
||||
<p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="http://bower.io">Bower</a>:</p>
|
||||
<p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="https://bower.io/">Bower</a>:</p>
|
||||
{% highlight bash %}bower install bootstrap{% endhighlight %}
|
||||
|
||||
<h2 id="download-npm">Install with npm</h2>
|
||||
<p>You can also install Bootstrap using <a href="https://www.npmjs.com">npm</a>:</p>
|
||||
<p>You can also install Bootstrap using <a href="https://www.npmjs.com/">npm</a>:</p>
|
||||
{% highlight bash %}npm install bootstrap@3{% endhighlight %}
|
||||
<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>
|
||||
<p>Bootstrap's <code>package.json</code> contains some additional metadata under the following keys:</p>
|
||||
<ul>
|
||||
<li><code>less</code> - path to Bootstrap's main <a href="http://lesscss.org">Less</a> source file</li>
|
||||
<li><code>less</code> - path to Bootstrap's main <a href="http://lesscss.org/">Less</a> source file</li>
|
||||
<li><code>style</code> - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="download-composer">Install with Composer</h2>
|
||||
<p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="https://getcomposer.org">Composer</a>:</p>
|
||||
<p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="https://getcomposer.org/">Composer</a>:</p>
|
||||
{% highlight bash %}composer require twbs/bootstrap{% endhighlight %}
|
||||
|
||||
<h2 id="download-autoprefixer">Autoprefixer required for Less/Sass</h2>
|
||||
<p>Bootstrap uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> to deal with <a href="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>
|
||||
<p>Bootstrap uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> to deal with <a href="https://www.lifewire.com/css-vendor-prefixes-3466867">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>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="grunt" class="page-header">Compiling CSS and JavaScript</h1>
|
||||
|
||||
<p class="lead">Bootstrap uses <a href="http://gruntjs.com">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p>
|
||||
<p class="lead">Bootstrap uses <a href="https://gruntjs.com/">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p>
|
||||
|
||||
<h2 id="grunt-installing">Installing Grunt</h2>
|
||||
<p>To install Grunt, you must <strong>first <a href="https://nodejs.org/download/">download and install node.js</a></strong> (which includes npm). npm stands for <a href="https://www.npmjs.com/">node packaged modules</a> and is a way to manage development dependencies through node.js.</p>
|
||||
@@ -22,13 +22,13 @@
|
||||
<p>Watches the Less source files and automatically recompiles them to CSS whenever you save a change.</p>
|
||||
|
||||
<h3><code>grunt test</code> (Run tests)</h3>
|
||||
<p>Runs <a href="http://jshint.com">JSHint</a> and runs the <a href="http://qunitjs.com">QUnit</a> tests in real browsers thanks to <a href="https://karma-runner.github.io/2.0/index.html">Karma</a>.</p>
|
||||
<p>Runs <a href="http://jshint.com/">JSHint</a> and runs the <a href="https://qunitjs.com/">QUnit</a> tests in real browsers thanks to <a href="https://karma-runner.github.io/2.0/index.html">Karma</a>.</p>
|
||||
|
||||
<h3><code>grunt docs</code> (Build & test the docs assets)</h3>
|
||||
<p>Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via <code>bundle exec jekyll serve</code>.</p>
|
||||
|
||||
<h3><code>grunt</code> (Build absolutely everything and run tests)</h3>
|
||||
<p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires <a href="http://jekyllrb.com/docs/installation/">Jekyll</a>. Usually only necessary if you're hacking on Bootstrap itself.</p>
|
||||
<p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires <a href="https://jekyllrb.com/docs/installation/">Jekyll</a>. Usually only necessary if you're hacking on Bootstrap itself.</p>
|
||||
|
||||
<h2 id="grunt-troubleshooting">Troubleshooting</h2>
|
||||
<p>Should you encounter problems with installing dependencies or running Grunt commands, first delete the <code>/node_modules/</code> directory generated by npm. Then, rerun <code>npm install</code>.</p>
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
<h1 id="tools" class="page-header">Tools</h1>
|
||||
|
||||
<h2 id="tools-bootlint">Bootlint</h2>
|
||||
<p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> is the official Bootstrap HTML <a href="http://en.wikipedia.org/wiki/Lint_(software)">linter</a> tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p>
|
||||
<p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> is the official Bootstrap HTML <a href="https://en.wikipedia.org/wiki/Lint_(software)">linter</a> tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="jquery-required">
|
||||
<h4>jQuery required</h4>
|
||||
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/master/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="whats-included-precompiled">Precompiled Bootstrap</h2>
|
||||
@@ -35,7 +35,7 @@ bootstrap/
|
||||
{% endhighlight %}
|
||||
<!-- NOTE: This info is intentionally duplicated in the README.
|
||||
Copy any changes made here over to the README too. -->
|
||||
<p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). CSS <a href="https://developer.chrome.com/devtools/docs/css-preprocessors">source maps</a> (<code>bootstrap.*.map</code>) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
|
||||
<p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). CSS <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps">source maps</a> (<code>bootstrap.*.map</code>) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
|
||||
|
||||
<h2 id="whats-included-source">Bootstrap source code</h2>
|
||||
<p>The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more:</p>
|
||||
|
||||
Reference in New Issue
Block a user