mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-10 15:44:51 +02:00
Code Issues Releases Wiki Activity

merge in v3.2.0 changes; nuke a dupe _gh_pages dir

Browse Source
This commit is contained in:
Mark Otto
2014-06-26 09:46:59 -07:00
parent ed14e5132b
commit 2c3d8ce134
73 changed files with 2979 additions and 11634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
getting-started/index.html
View File

@@ -10,42 +10,44 @@
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<title>
Getting started &middot; Bootstrap
</title>
<!-- Bootstrap core CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="../assets/css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
<link rel="icon" href="/favicon.ico">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-146052-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('send', 'pageview');
</script>
</head>
<body>
<a class="sr-only" href="#content">Skip to main content</a>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<!-- Docs master nav -->
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
@@ -78,8 +80,8 @@
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://expo.getbootstrap.com" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Expo']);">Expo</a></li>
<li><a href="http://blog.getbootstrap.com" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Blog']);">Blog</a></li>
<li><a href="http://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="http://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</nav>
</div>
@@ -100,54 +102,51 @@
<div class="row">
<div class="col-md-9" role="main">
<!-- Getting started
================================================== -->
<div class="bs-docs-section">
<div class="bs-docs-section">
<h1 id="download" class="page-header">Download</h1>
<p class="lead">Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<p class="lead">Bootstrap (currently v3.2.0) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<div class="row bs-downloads" style="margin-bottom: 20px;">
<div class="row bs-downloads">
<div class="col-sm-4">
<h3 id="download-bootstrap">Bootstrap</h3>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<a href="https://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a>
<p>
<a href="https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
</p>
</div>
<div class="col-sm-4">
<h3 id="download-source">Source code</h3>
<p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="https://github.com/twbs/bootstrap#compiling-css-and-javascript">some setup.</a></strong></p>
<a href="https://github.com/twbs/bootstrap/archive/v3.1.1.zip" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source</a>
<p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="#grunt">some setup.</a></strong></p>
<p>
<a href="https://github.com/twbs/bootstrap/archive/v3.2.0.zip" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
</p>
</div>
<div class="col-sm-4">
<h3 id="download-sass">Sass</h3>
<p><a href="https://github.com/twbs/bootstrap-sass">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p>
<a href="https://github.com/twbs/bootstrap-sass/archive/v3.1.1.tar.gz" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download Sass']);">Download Sass</a>
<p>
<a href="https://github.com/twbs/bootstrap-sass/archive/v3.2.0.tar.gz" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a>
</p>
</div>
</div>
<p class="muted">Currently v3.1.1.</p>
<h3 id="download-cdn">Bootstrap CDN</h3>
<p>The folks over at <a href="http://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p>
<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- Latest compiled and minified CSS --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Optional theme --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Latest compiled and minified JavaScript --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></div>
<h3 id="download-bower">Install with Bower</h3>
<p>Install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="http://bower.io">Bower</a>.</p>
<div class="highlight"><pre><code class="bash"><span class="nv">$ </span>bower install bootstrap
</code></pre></div>
<div class="highlight"><pre><code class="bash"><span class="nv">$ </span>bower install bootstrap</code></pre></div>
</div>
<!-- File structure
================================================== -->
<div class="bs-docs-section">
<h1 id="whats-included" class="page-header">What's included</h1>
@@ -155,7 +154,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="https://github.com/twbs/bootstrap/blob/v3.1.1/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="https://github.com/twbs/bootstrap/blob/v3.2.0/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>
@@ -175,8 +174,7 @@ Copy any changes made here over to the README too. -->
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
</code></pre></div>
└── glyphicons-halflings-regular.woff</code></pre></div>
<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>). Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
@@ -191,15 +189,43 @@ Copy any changes made here over to the README too. -->
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
</code></pre></div>
└── examples/</code></pre></div>
<p>The <code>less/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
</div>
<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>
<h2 id="grunt-installing">Installing Grunt</h2>
<p>To install Grunt, you must <strong>first <a href="http://nodejs.org/download/">download and install node.js</a></strong> (which includes npm). npm stands for <a href="http://npmjs.org/">node packaged modules</a> and is a way to manage development dependencies through node.js.</p>
Then, from the command line:
<ol>
<li>Install <code>grunt-cli</code> globally with <code>npm install -g grunt-cli</code>.</li>
<li>Navigate to the root <code>/bootstrap/</code> directory, then run <code>npm install</code>. npm will look at the <a href="https://github.com/twbs/bootstrap/blob/master/package.json"><code>package.json</code></a> file and automatically install the necessary local dependencies listed there.</li>
</ol>
<p>When completed, you'll be able to run the various Grunt commands provided from the command line.</p>
<h2 id="grunt-commands">Available Grunt commands</h2>
<h3><code>grunt dist</code> (Just compile CSS and JavaScript)</h3>
<p>Regenerates the <code>/dist/</code> directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.</p>
<h3><code>grunt watch</code> (Watch)</h3>
<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 headlessly in <a href="http://phantomjs.org">PhantomJS</a>.</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. 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>
</div>
<!-- Template
================================================== -->
<div class="bs-docs-section">
<h1 id="template" class="page-header">Basic template</h1>
@@ -220,30 +246,25 @@ Copy any changes made here over to the README too. -->
<span class="c">&lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;</span>
<span class="c">&lt;!-- WARNING: Respond.js doesn&#39;t work if you view the page via file:// --&gt;</span>
<span class="c">&lt;!--[if lt IE 9]&gt;</span>
<span class="c"> &lt;script src=&quot;https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js&quot;&gt;&lt;/script&gt;</span>
<span class="c"> &lt;script src=&quot;https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt;</span>
<span class="c"> &lt;script src=&quot;https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js&quot;&gt;&lt;/script&gt;</span>
<span class="c"> &lt;script src=&quot;https://oss.maxcdn.com/respond/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt;</span>
<span class="c"> &lt;![endif]--&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;h1&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>
<span class="c">&lt;!-- jQuery (necessary for Bootstrap&#39;s JavaScript plugins) --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="c">&lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/bootstrap.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>
<span class="nt">&lt;/html&gt;</span></code></pre></div>
</div>
<!-- Examples
================================================== -->
<div class="bs-docs-section">
<h1 id="examples" class="page-header">Examples</h1>
<p class="lead">Build on the basic template above with Bootstrap's many components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p>
<p class="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>
<h3 id="examples-framework">Using the framework</h3>
<div class="row bs-examples">
@@ -361,7 +382,7 @@ Copy any changes made here over to the README too. -->
<img src="../examples/screenshots/justified-nav.jpg" alt="">
</a>
<h4>Justified nav</h4>
<p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too WebKit friendly.</a></p>
<p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too Safari friendly.</a></p>
</div>
<div class="clearfix visible-xs"></div>
@@ -400,10 +421,6 @@ Copy any changes made here over to the README too. -->
</div>
</div>
<!-- Community
================================================== -->
<div class="bs-docs-section">
<h1 id="community" class="page-header">Community</h1>
@@ -417,10 +434,6 @@ Copy any changes made here over to the README too. -->
<p>You can also follow <a href="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
</div>
<!-- Disabling responsiveness
================================================== -->
<div class="bs-docs-section">
<h1 id="disable-responsive" class="page-header">Disabling responsiveness</h1>
@@ -445,17 +458,12 @@ Copy any changes made here over to the README too. -->
</div>
<!-- Cross link to new migration page -->
<div class="bs-callout bs-callout-info" id="migration">
<h4>Migrating from v2.x to v3.x</h4>
<p>Looking to migrate from an older version of Bootstrap to v3.x? Check out <a href="../migration">our migration guide</a>.</p>
</div>
<!-- Browser support
================================================== -->
<div class="bs-docs-section">
<h1 id="support" class="page-header">Browser and device support</h1>
<p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>
@@ -478,7 +486,7 @@ Copy any changes made here over to the README too. -->
<tr>
<th>Android</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
<td class="text-muted">N/A</td>
@@ -509,6 +517,7 @@ Copy any changes made here over to the README too. -->
</table>
</div>
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, 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="../browser-bugs/">Wall of browser bugs</a>.</p>
<h3 id="support-ie8-ie9">Internet Explorer 8 and 9</h3>
<p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. 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>
@@ -541,8 +550,6 @@ Copy any changes made here over to the README too. -->
<th scope="row"><code>transition</code></th>
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row"><code>placeholder</code></th>
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
@@ -565,25 +572,25 @@ Copy any changes made here over to the README too. -->
<h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3>
<p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
<h3 id="support-ie8-font-face">Internet Explorer 8 and @font-face</h3>
<p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <a href="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p>
<h3 id="support-ie-compatibility-modes">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>&lt;meta&gt;</code> tag in your pages:</p>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">&quot;X-UA-Compatible&quot;</span> <span class="na">content=</span><span class="s">&quot;IE=edge&quot;</span><span class="nt">&gt;</span>
</code></pre></div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">&quot;X-UA-Compatible&quot;</span> <span class="na">content=</span><span class="s">&quot;IE=edge&quot;</span><span class="nt">&gt;</span></code></pre></div>
<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 Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</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="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 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
<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>
<div class="highlight"><pre><code class="scss"><span class="k">@-ms-viewport</span> <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
</code></pre></div>
<div class="highlight"><pre><code class="scss"><span class="k">@-ms-viewport</span> <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span></code></pre></div>
<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>
<div class="highlight"><pre><code class="scss"><span class="k">@-webkit-viewport</span> <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
<span class="k">@-moz-viewport</span> <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
<span class="k">@-ms-viewport</span> <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
<span class="k">@-o-viewport</span> <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
<span class="k">@viewport</span> <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
</code></pre></div>
<span class="k">@viewport</span> <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span></code></pre></div>
<div class="highlight"><pre><code class="js"><span class="k">if</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/IEMobile\/10\.0/</span><span class="p">))</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">msViewportStyle</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;style&#39;</span><span class="p">)</span>
@@ -593,13 +600,12 @@ Copy any changes made here over to the README too. -->
<span class="p">)</span>
<span class="p">)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;head&#39;</span><span class="p">).</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">msViewportStyle</span><span class="p">)</span>
<span class="p">}</span>
</code></pre></div>
<span class="p">}</span></code></pre></div>
<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>As a heads up, we include this in the Bootstrap docs as an example.</p>
<p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p>
<h3 id="support-safari-percentages">Safari percent rounding</h3>
<p>As of Safari v6.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
<p>As of Safari v7.0.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much 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>
@@ -628,22 +634,19 @@ Copy any changes made here over to the README too. -->
<h3 id="support-android-stock-browser">Android stock browser</h3>
<p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
<h4>Select menus</h4>
<p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
<p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <a href="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;script&gt;</span>
<span class="kd">var</span> <span class="nx">nua</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span>
<span class="kd">var</span> <span class="nx">isAndroid</span> <span class="o">=</span> <span class="p">(</span><span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;Mozilla/5.0&#39;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;Android &#39;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;AppleWebKit&#39;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;Chrome&#39;</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isAndroid</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;select.form-control&#39;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">&#39;form-control&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">,</span> <span class="s1">&#39;100%&#39;</span><span class="p">)</span>
<span class="p">}</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">nua</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span>
<span class="kd">var</span> <span class="nx">isAndroid</span> <span class="o">=</span> <span class="p">(</span><span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;Mozilla/5.0&#39;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;Android &#39;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;AppleWebKit&#39;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;Chrome&#39;</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isAndroid</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;select.form-control&#39;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">&#39;form-control&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">,</span> <span class="s1">&#39;100%&#39;</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">})</span>
<span class="nt">&lt;/script&gt;</span></code></pre></div>
<p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p>
</div>
<!-- Third party support
================================================== -->
<div class="bs-docs-section">
<h1 id="third-parties" class="page-header">Third party support</h1>
<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>
@@ -691,14 +694,9 @@ Copy any changes made here over to the README too. -->
<span class="p">}</span>
<span class="nc">.element</span> <span class="p">{</span>
<span class="nc">.reset-box-sizing</span><span class="o">();</span>
<span class="p">}</span>
</code></pre></div>
<span class="p">}</span></code></pre></div>
</div>
<!-- Accessibility
================================================== -->
<div class="bs-docs-section">
<h1 id="accessibility" class="page-header">Accessibility</h1>
<p class="lead">Bootstrap follows common web standards and&mdash;with minimal extra effort&mdash;can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>
@@ -706,12 +704,11 @@ Copy any changes made here over to the README too. -->
<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 main content</code> link immediately after your opening <code>&lt;body&gt;</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#content&quot;</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Skip to main content<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#content&quot;</span> <span class="na">class=</span><span class="s">&quot;sr-only sr-only-focusable&quot;</span><span class="nt">&gt;</span>Skip to main content<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span> <span class="na">id=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>
The main page content.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div>
<span class="nt">&lt;/body&gt;</span></code></pre></div>
<h3>Nested headings</h3>
<p>When nesting headings (<code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code>), your primary document header should be an <code>&lt;h1&gt;</code>. Subsequent headings should make logical use of <code>&lt;h2&gt;</code> - <code>&lt;h6&gt;</code> such that screen readers can construct a table of contents for your pages.</p>
@@ -725,10 +722,6 @@ Copy any changes made here over to the README too. -->
</ul>
</div>
<!-- License FAQs
================================================== -->
<div class="bs-docs-section">
<h1 id="license-faqs" class="page-header">License FAQs</h1>
<p class="lead">Bootstrap is released under the MIT license and is copyright 2014 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
@@ -762,107 +755,41 @@ Copy any changes made here over to the README too. -->
</ul>
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE">in the project repository</a> for more information.</p>
</div><!-- /.bs-docs-section -->
<div class="bs-docs-section">
<h1 id="customizing" class="page-header">Customizing Bootstrap</h1>
<p class="lead">Bootstrap is best maintained when you treat it as a separate and independently-versioned dependency in your development environment. Doing this makes upgrading Bootstrap easier in the future.</p>
<p>Once you've downloaded and included Bootstrap's styles and scripts, you can customize its components. Just create a new stylesheet (Less, if you like, or just plain CSS) to house your customizations.</p>
<div class="bs-callout bs-callout-info">
<h4>Compiled or minified?</h4>
<p>Unless you plan on reading the CSS, go with minified stylesheets. It's the same code, just compacted. Minified styles use less bandwidth, which is good, especially in production environments.</p>
</div>
<p>From there, include whatever Bootstrap components and HTML content you need to create templates for your site's pages.</p>
<h3>Customizing components</h3>
<p>You can customize components to varying degrees, but most fall into two camps: <em>light customizations</em> and <em>overhauls</em>. Plenty examples of both are available from third parties.</p>
<p>We define <em>light customizations</em> as superficial changes, for example, color and font changes to existing Bootstrap components. A light customization example is the <a href="http://translate.twitter.com">Twitter Translation Center</a> (coded by <a href="https://twitter.com/mdo">@mdo</a>). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p>
<p>The stock Bootstrap buttons require just one class, <code>.btn</code>, to start. Here we extend the <code>.btn</code> style with a new modifier class, <code>.btn-ttc</code>, that we will create. This gives us a distinct custom look with minimal effort.</p>
<p>Our customized button will be coded like this:</p>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-ttc&quot;</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/button&gt;</span>
</code></pre></div>
<p>Note how <code>.btn-ttc</code> is added to the standard <code>.btn</code> class.</p>
<p>To implement this, in the custom stylesheet, add the following CSS:</p>
<div class="highlight"><pre><code class="scss"><span class="cm">/* Custom button</span>
<span class="cm">-------------------------------------------------- */</span>
<span class="cm">/* Override base .btn styles */</span>
<span class="cm">/* Apply text and background changes to three key states: default, hover, and active (click). */</span>
<span class="nc">.btn-ttc</span><span class="o">,</span>
<span class="nc">.btn-ttc</span><span class="nd">:hover</span><span class="o">,</span>
<span class="nc">.btn-ttc</span><span class="nd">:active</span> <span class="p">{</span>
<span class="na">color</span><span class="o">:</span> <span class="nb">white</span><span class="p">;</span>
<span class="na">text-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-1</span><span class="kt">px</span> <span class="mi">0</span> <span class="nf">rgba</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">0</span><span class="o">,</span> <span class="mi">0</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.25</span><span class="p">);</span>
<span class="na">background-color</span><span class="o">:</span> <span class="mh">#007da7</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* Apply the custom-colored gradients */</span>
<span class="cm">/* Note: you&#39;ll need to include all the appropriate gradients for various browsers and standards. */</span>
<span class="nc">.btn-ttc</span> <span class="p">{</span>
<span class="na">background-repeat</span><span class="o">:</span> <span class="no">repeat-x</span><span class="p">;</span>
<span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="no">top</span><span class="o">,</span> <span class="mh">#009ED2</span> <span class="mi">0</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#007DA7</span> <span class="mi">100</span><span class="kt">%</span><span class="p">);</span>
<span class="nc">...</span>
<span class="p">}</span>
<span class="cm">/* Set the hover state */</span>
<span class="cm">/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */</span>
<span class="nc">.btn-ttc</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="na">background-position</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">-15</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>In short: Look to the style source and duplicate the selectors you need for your modifications.</p>
<p><strong>In summary, here's the basic workflow:</strong></p>
<ul>
<li>For each element you want to customize, find its code in the compiled Bootstrap CSS.</li>
<li>Copy the component's selector and styles and paste them in your custom stylesheet. For instance, to customize the navbar background, just copy the <code>.navbar</code> style specification.</li>
<li>In your custom stylesheet, edit the CSS you just copied from the Bootstrap source. No need for prepending additional classes, or appending <code>!important</code> here. Keep it simple.</li>
<li>Rinse and repeat until you're happy with your customizations.</li>
</ul>
<p>Once you are comfortable performing light customizations, visual overhauls are just as straightforward. For a site like <a href="http://yourkarma.com">Karma</a>, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved. But the same principle applies: include Bootstrap's default stylesheet first, then apply your custom stylesheet.</p>
<div class="bs-callout bs-callout-info">
<h4>Alternate customization methods</h4>
<p>While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source <code>.less</code> files (making upgrades super difficult), and the second is mapping source Less code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither of those options are documented here.</p>
</div>
<h3>Removing potential bloat</h3>
<p>Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where optimizing bandwidth is an issue. We encourage you to remove whatever is unused with our <a href="../customize/">Customizer</a>.</p>
<p>Using the Customizer, simply uncheck any component, feature, or asset you don't need. Hit download and swap out the default Bootstrap files with these newly customized ones. You'll get vanilla Bootstrap, but without the features *you* deem unnecessary. All custom builds include compiled and minified versions, so use whichever works for you.</p>
</div>
<!-- Translations
================================================== -->
<div class="bs-docs-section">
<h1 id="translations" class="page-header">Translations</h1>
<p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.</p>
<ul>
<li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/fr">Bootstrap en Français (French)</a></li>
<li><a href="http://holdirbootstrap.de/">Bootstrap auf Deutsch (German)</a></li>
<li><a href="http://bootstrapk.com/BS3/">Bootstrap 한국어 (Korean)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
<li><a href="http://twbs.site-konstruktor.com.ua">Bootstrap ua Українською (Ukrainian)</a></li>
<li><a href="http://v3.bootcss.com/" hreflang="zh">Bootstrap 中文文档 (Chinese)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/fr" hreflang="fr">Bootstrap en Français (French)</a></li>
<li><a href="http://holdirbootstrap.de/" hreflang="de">Bootstrap auf Deutsch (German)</a></li>
<li><a href="http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/" hreflang="it">Bootstrap in Italiano (Italian)</a></li>
<li><a href="http://bootstrapk.com/BS3/" hreflang="ko">Bootstrap 한국어 (Korean)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/ru" hreflang="ru">Bootstrap по-русски (Russian)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/es" hreflang="es">Bootstrap en Español (Spanish)</a></li>
<li><a href="http://twbs.site-konstruktor.com.ua" hreflang="uk">Bootstrap ua Українською (Ukrainian)</a></li>
</ul>
<p><strong class="text-danger">We don't help organize or host translations, we just link to them.</strong></p>
<p>Finished a new or better translation? Open a pull request to add it to our list.</p>
</div>
</div>
<div class="col-md-3">
<div class="bs-docs-sidebar hidden-print" role="complementary">
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
<ul class="nav bs-docs-sidenav">
<li>
<a href="#download">Download</a>
</li>
@@ -873,6 +800,14 @@ Copy any changes made here over to the README too. -->
<li><a href="#whats-included-source">Source code</a></li>
</ul>
</li>
<li>
<a href="#grunt">Compiling CSS and JavaScript</a>
<ul class="nav">
<li><a href="#grunt-installing">Installing Grunt</a></li>
<li><a href="#grunt-commands">Available Grunt commands</a></li>
<li><a href="#grunt-troubleshooting">Troubleshooting</a></li>
</ul>
</li>
<li>
<a href="#template">Basic template</a>
</li>
@@ -901,6 +836,7 @@ Copy any changes made here over to the README too. -->
<li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li>
<li><a href="#support-ie8-respondjs">IE8 and Respond.js</a></li>
<li><a href="#support-ie8-box-sizing">IE8 and box-sizing</a></li>
<li><a href="#support-ie8-font-face">IE8 and @font-face</a></li>
<li><a href="#support-ie-compatibility-modes">IE Compatibility modes</a></li>
<li><a href="#support-ie10-width">IE10 and Windows (Phone) 8</a></li>
<li><a href="#support-safari-percentages">Safari percent rounding</a></li>
@@ -919,22 +855,19 @@ Copy any changes made here over to the README too. -->
<li>
<a href="#license-faqs">License FAQs</a>
</li>
<li>
<a href="#customizing">Customizing Bootstrap</a>
</li>
<li>
<a href="#translations">Translations</a>
</li>
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
</div>
</div>
</div>
</div>
<!-- Footer
@@ -963,7 +896,7 @@ Copy any changes made here over to the README too. -->
<p>Maintained by the <a href="https://github.com/twbs?tab=members">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links muted">
<li>Currently v3.1.1</li>
<li>Currently v3.2.0</li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>&middot;</li>
@@ -987,7 +920,7 @@ Copy any changes made here over to the README too. -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
<script src="../assets/js/docs.min.js"></script>