</div>
<p class="lead">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.</p>
+ <h3 id="download-source">Download latest full source</h3>
+ <p>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 <code>dist/</code> directory).</p>
+ <p><a class="btn btn-lg btn-primary" href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest Bootstrap 3</a></p>
+ <!--
<h3>Download compiled CSS and JS</h3>
<p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
- <p><a class="btn btn-large btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
+ <p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
+ -->
- <hr>
-
- <h3 id="download-options">More download options</h3>
+ <h3 id="download-additional">Additional downloads</h3>
<div class="bs-docs-dl-options">
<h4>
<a href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest source code</a>
{% highlight bash %}$ bower install bootstrap{% endhighlight %}
</div>
- <hr>
-
- <h3 id="download-cdn">Use the Bootstrap CDN</h3>
+ <h3 id="download-cdn">Bootstrap CDN</h3>
<p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
{% highlight html linenos %}
<!-- Latest compiled and minified CSS -->
-<link href="{{ site.cdn_css }}">
+<link rel="stylesheet" href="{{ site.cdn_css }}">
<!-- Latest compiled and minified JavaScript -->
<script src="{{ site.cdn_js }}"></script>
│ ├── bootstrap.min.js
{% endhighlight %}
- <p>This is the most basic form of Bootstrap: compiled 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>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
+ <p>This is the most basic form of Bootstrap: compiled 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>).</p>
<div class="bs-callout bs-callout-danger">
<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>.</p>
<div class="page-header">
<h1 id="template">Basic template</h1>
</div>
- <p class="lead">Make use of a super basic HTML template, or dive into a <a href="{{ site.examples }}">few examples</a> we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
+ <p class="lead">Make use of a super basic HTML template, or dive into a <a href="../getting-started#examples">few examples</a> we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
<p>Copy and paste the HTML from below to get started with a bare bones Bootstrap document.</p>
{% highlight html %}
<body>
<h1>Hello, world!</h1>
- <!-- JavaScript plugins (requires jQuery) -->
- <script src="http://code.jquery.com/jquery.js"></script>
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+ <script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
- <!-- Optionally enable responsive features in IE8 -->
+ <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="js/respond.js"></script>
</body>
</html>
{% endhighlight %}
+ </div>
+
+
+
+ <!-- Template
+ ================================================== -->
+ <div class="bs-docs-section">
+ <div class="page-header">
+ <h1 id="examples">Examples</h1>
+ </div>
+ <p class="lead">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.</p>
+
+ <div class="row bs-examples">
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/starter-template/">
+ <img src="../examples/screenshots/starter-template.jpg" alt="">
+ </a>
+ <h4>Starter template</h4>
+ <p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/grid/">
+ <img src="../examples/screenshots/grid.jpg" alt="">
+ </a>
+ <h4>Grids</h4>
+ <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
+ </div>
+ <div class="clearfix visible-xs"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/jumbotron/">
+ <img src="../examples/screenshots/jumbotron.jpg" alt="">
+ </a>
+ <h4>Jumbotron</h4>
+ <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/jumbotron-narrow/">
+ <img src="../examples/screenshots/jumbotron-narrow.jpg" alt="">
+ </a>
+ <h4>Narrow jumbotron</h4>
+ <p>Build a more custom page by narrowing the default container and jumbotron.</p>
+ </div>
+ <div class="clearfix visible-xs"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/navbar/">
+ <img src="../examples/screenshots/navbar.jpg" alt="">
+ </a>
+ <h4>Navbar</h4>
+ <p>Super basic template that includes the navbar along with some additional content.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/navbar-static-top/">
+ <img src="../examples/screenshots/navbar-static.jpg" alt="">
+ </a>
+ <h4>Static top navbar</h4>
+ <p>Super basic template with a static top navbar along with some additional content.</p>
+ </div>
+ <div class="clearfix visible-xs"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/navbar-fixed-top/">
+ <img src="../examples/screenshots/navbar-fixed.jpg" alt="">
+ </a>
+ <h4>Fixed navbar</h4>
+ <p>Super basic template with a fixed top navbar along with some additional content.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/signin/">
+ <img src="../examples/screenshots/sign-in.jpg" alt="">
+ </a>
+ <h4>Sign-in page</h4>
+ <p>Custom form layout and design for a simple sign in form.</p>
+ </div>
+ <div class="clearfix visible-xs"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/sticky-footer/">
+ <img src="../examples/screenshots/sticky-footer.jpg" alt="">
+ </a>
+ <h4>Sticky footer</h4>
+ <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/sticky-footer-navbar/">
+ <img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="">
+ </a>
+ <h4>Sticky footer with navbar</h4>
+ <p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p>
+ </div>
+ <div class="clearfix visible-xs"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/justified-nav/">
+ <img src="../examples/screenshots/justified-nav.jpg" alt="">
+ </a>
+ <h4>Justified nav</h4>
+ <p>Expand on the default navbar and more to create justified navigation links.</p>
+ </div>
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/offcanvas/">
+ <img src="../examples/screenshots/offcanvas.jpg" alt="">
+ </a>
+ <h4>Offcanvas</h4>
+ <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
+ </div>
+ <div class="clearfix visible-xs"></div>
+
+ <div class="col-xs-6 col-md-4">
+ <a class="thumbnail" href="../examples/carousel/">
+ <img src="../examples/screenshots/carousel.jpg" alt="">
+ </a>
+ <h4>Carousel</h4>
+ <p>Customize the navbar and carousel, then add some new components.</p>
+ </div>
+
+ </div>
- <h3>Looking for more example templates?</h3>
- <p>Check out the new <a href="{{ site.examples_repo }}">Examples repository on GitHub</a>, or <a href="{{ site.examples }}">view them in your browser</a>. Included are over a dozen example templates for building with and extending Bootstrap.</p>
</div>
- <!-- Browser compatibility
+ <!-- Template
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
- <h1 id="browsers">Browser compatibility</h1>
+ <h1 id="disable-responsive">Disabling responsiveness</h1>
+ </div>
+ <p class="lead">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.</p>
+
+ <h3>Steps to disable responsive views</h3>
+ <p>To disable responsive features, follow these steps. See it in action in the modified template below.</p>
+ <ol>
+ <li>Remove (or just don't add) the viewport <code><meta></code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
+ <li>Force a single <code>max-width</code> on the <code>.container</code> (e.g., <code>.container { max-width: 940px; }</code>). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need <code>!important</code>.</li>
+ <li>For grid layouts, make use of <code>.col-xs-*</code> 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.</li>
+ </ol>
+ <p>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.</p>
+
+ <h3>Bootstrap template with disabled responsive</h3>
+ <p>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. <code><-- 1. --></code>.</p>
+{% highlight html %}
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Disabling responsiveness in Bootstrap</title>
+
+ <!-- 1. Note there is no meta tag here -->
+
+ <!-- Load default Bootstrap -->
+ <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+
+ <!-- 2. Add our custom CSS to set the container's fixed width -->
+ <style>
+ .container { max-width: 940px; }
+ </style>
+ </head>
+ <body>
+
+ <h1>Hello, world!</h1>
+
+ <!-- 3. When using grid columns, use the `.col-xs-*` classes -->
+ <div class="row">
+ <div class="col-xs-4">One third</div>
+ <div class="col-xs-4">One third</div>
+ <div class="col-xs-4">One third</div>
+ </div>
+
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+ <script src="//code.jquery.com/jquery.js"></script>
+
+ <!-- Include all compiled plugins (below), or include individual files as needed -->
+ <script src="js/bootstrap.min.js"></script>
+
+ <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
+ <script src="js/respond.js"></script>
+ </body>
+</html>
+{% endhighlight %}
+ </div>
+
+
+
+ <!-- Browser support
+ ================================================== -->
+ <div class="bs-docs-section">
+ <div class="page-header">
+ <h1 id="browsers">Browser support</h1>
</div>
<p class="lead">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.</p>
<p>In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">respond.js</a> to enable media query support.</strong></p>
<h3>IE Compatibility modes</h3>
- <p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>meta</code> tag in your pages.</p>
+ <p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>meta</code> tag in your pages:</p>
{% highlight html %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endhighlight %}
<p>See <a href="http://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>
+
+ <h3>Windows Phone 8 and Internet Explorer 10</h3>
+ <p>Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.</p>
+{% highlight css %}
+@-webkit-viewport { width: device-width; }
+@-moz-viewport { width: device-width; }
+@-ms-viewport { width: device-width; }
+@-o-viewport { width: device-width; }
+@viewport { width: device-width; }
+{% endhighlight %}
+
+{% highlight js %}
+if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
+ var msViewportStyle = document.createElement("style")
+ msViewportStyle.appendChild(
+ document.createTextNode(
+ "@-ms-viewport{width:auto!important}"
+ )
+ )
+ document.getElementsByTagName("head")[0].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>
+
+ <h3>Safari percent rounding</h3>
+ <p>In the latest Safari for Mac, its rendering engine has a little trouble with the long decimal places of our <code>.col-*-1</code> 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 (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
+ <ul>
+ <li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
+ <li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
+ </ul>
+ <p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
+
+ <h3>Modals and mobile devices</h3>
+ <p>Support for <code>overflow: hidden</code> on the <code><body></code> 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 <code><body></code> content will begin to scroll.</p>
+
+ <h3>Browser zooming</h3>
+ <p>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.</p>
+ </div>
+
+
+
+ <!-- Third party support
+ ================================================== -->
+ <div class="bs-docs-section">
+ <div class="page-header">
+ <h1 id="third-parties">Third party support</h1>
+ </div>
+ <p class="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>
+
+ <h3>Google Maps</h3>
+ <p>If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of <code>* { box-sizing: border-box; }</code>. Previously, you may have also ran into issues with the use of <code>max-width</code> on images. The following snippet should avoid all those problems.</p>
+{% 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 %}
+ </div>
+
+
+
+ <!-- Accessibility
+ ================================================== -->
+ <div class="bs-docs-section">
+ <div class="page-header">
+ <h1 id="accessibility">Accessibility</h1>
+ </div>
+ <p class="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>
+
+ <h3>Skip navigation</h3>
+ <p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to content</code> link immediately after your opening <code><body></code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
+{% highlight html %}
+<body>
+ <a href="#content" class="sr-only">Skip to content</a>
+ <div class="container" id="content">
+ The main page content.
+ </div>
+</body>
+{% endhighlight %}
+
+ <h3>Nested headers</h3>
+ <p>Another "gotcha" has to do with how you nest your <code><header></code> elements. <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">Section 508</a> states that your largest header must be an <code>h1</code>, and the next header must be an <code><h2></code>, 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.</p>
+
+ <h3>Additional resources</h3>
+ <ul>
+ <li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</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>
+ </ul>
</div>
<h4>It does not require you to:</h4>
<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 Twitter (though such feedback is encouraged)</li>
+ <li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
</ul>
</div>
</div>
projects / bootswatch / blobdiff