rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Code Issues Actions Packages Releases Activity

regenerate docs for v3.3.4

Browse Source
This commit is contained in:
Chris Rebert 2015-03-16 08:57:29 -07:00
parent cc07218b04
commit cc95cc75b8
50 changed files with 8329 additions and 4316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
about/index.html
View File

@ -91,7 +91,7 @@
<!-- Docs page layout --> <!-- Docs page layout -->
<div class="bs-docs-header" id="content"> <div class="bs-docs-header" id="content" tabindex="-1">
<div class="container"> <div class="container">
<h1>About</h1> <h1>About</h1>
<p>Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.</p> <p>Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.</p>
@ -111,7 +111,7 @@
<p class="lead">Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p> <p class="lead">Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
<p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p> <p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
<p>Originally <a href="https://dev.twitter.com/blog/bootstrap-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p> <p>Originally <a href="https://blog.twitter.com/2011/bootstrap-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
</div> </div>
@ -332,9 +332,9 @@
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Maintained by the <a href="https://github.com/orgs/twbs/people">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> <p>Code licensed under <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links text-muted"> <ul class="bs-docs-footer-links text-muted">
<li>Currently v3.3.2</li> <li>Currently v3.3.4</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>&middot;</li> <li>&middot;</li>

4
assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

60
assets/css/src/anchor.css Normal file
View File

@ -0,0 +1,60 @@
/**
* Store the link icon as a base64 embedded icon font.
*/
@font-face {
font-family: 'anchorjs-link';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6v8yoAAAC8AAAAYGNtYXDL8RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5Zkm2oNUAAAFgAAABWGhlYWQAHd4cAAACuAAAADZoaGVhB3sECwAAAvAAAAAkaG10eAYAAEcAAAMUAAAADGxvY2EACgCsAAADIAAAAAhtYXhwAAYAcAAAAygAAAAgbmFtZUQXtNYAAANIAAABOXBvc3QAAwAAAAAEhAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACDmAAPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACDmAP//AAAAIOYA////4RoCAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAIARwAHA7kDeQA2AG0AAAEnLgEiBg8BDgEUFh8BHgMXNy4DLwEuATQ2PwE+ATIWHwEeARQGDwEeAxU3PgE0JicBLgMnBx4DHwEeARQGDwEOASImLwEuATQ2PwEuAzUHDgEUFh8BHgEyNj8BPgE0Ji8BA7kEI1ldWiPaIyQkIwQDBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMk/r4DBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMkBCNZXVoj2iMkJCMEA3UEJCMjJNojWV1aIwQDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkj/sYDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkjBCQjIyTaI1ldWiMEAAEAAAABAABR/4xQXw889QALBAAAAAAAzqNM0wAAAADOo0zTAAAAAAO5A3kAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAABHA7kAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAAEcAAAAAAAoArAABAAAAAwBuAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADAALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAABKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq/zKmNtYXAAAAFoAAAAPAAAADzL8RqdZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAVgAAAFYSbag1WhlYWQAAAMEAAAANgAAADYAHd4caGhlYQAAAzwAAAAkAAAAJAd7BAtobXR4AAADYAAAAAwAAAAMBgAAR2xvY2EAAANsAAAACAAAAAgACgCsbWF4cAAAA3QAAAAgAAAAIAAGAHBuYW1lAAADlAAAATkAAAE5RBe01nBvc3QAAATQAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAg5gADwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAg5gD//wAAACDmAP///+EaAgABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAACAEcABwO5A3kANgBtAAABJy4BIgYPAQ4BFBYfAR4DFzcuAy8BLgE0Nj8BPgEyFh8BHgEUBg8BHgMVNz4BNCYnAS4DJwceAx8BHgEUBg8BDgEiJi8BLgE0Nj8BLgM1Bw4BFBYfAR4BMjY/AT4BNCYvAQO5BCNZXVoj2iMkJCMEAwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJP6+AwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJAQjWV1aI9ojJCQjBAN1BCQjIyTaI1ldWiMEAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZI/7GAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZIwQkIyMk2iNZXVojBAABAAAAAQAAUf+MUF8PPPUACwQAAAAAAM6jTNMAAAAAzqNM0wAAAAADuQN5AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAARwO5AAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAABHAAAAAAAKAKwAAQAAAAMAbgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAwAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
font-weight: normal;
font-style: normal;
}
.anchorjs-icon {
font-family: 'anchorjs-link';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Icon Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/**
* Link placement and hover behavior.
*/
.anchorjs-link {
float: left;
width: 1em;
height: 1em;
margin-left: -1.2em;
opacity: 0;
color: inherit;
text-align: center;
}
@media (max-width: 480px) {
.anchorjs-link {
display: none;
}
}
*:hover > .anchorjs-link,
.anchorjs-link:focus {
opacity: .75;
transition: color .16s linear;
}
*:hover > .anchorjs-link:hover {
opacity: 1;
text-decoration: none;
}
.anchorjs-icon {
font-size: 60%;
vertical-align: .2em;
}
.anchorjs-icon:before {
content: "\e600";
}

33
assets/css/src/docs.css
View File

@ -28,6 +28,13 @@ body {
font-weight: normal; font-weight: normal;
} }
/* Inline code within headings retain the heading's background-color */
h2 code,
h3 code,
h4 code {
background-color: inherit;
}
/* Outline button for use within the docs */ /* Outline button for use within the docs */
.btn-outline { .btn-outline {
color: #563d7c; color: #563d7c;
@ -93,6 +100,7 @@ body {
* Fancy skip link * Fancy skip link
* *
* Make it look a bit less "bare bones" * Make it look a bit less "bare bones"
* Also includes focus suppression for the Chrome tabindex="-1" workaround
*/ */
#skippy { #skippy {
@ -108,6 +116,10 @@ body {
outline: 1px dotted; outline: 1px dotted;
} }
#content:focus {
outline: none;
}
/* /*
* Main navigation * Main navigation
@ -913,6 +925,10 @@ h1[id] {
content: "Example"; content: "Example";
} }
.bs-example-padded-bottom {
padding-bottom: 24px;
}
/* Tweak display of the code snippets when following an example */ /* Tweak display of the code snippets when following an example */
.bs-example + .highlight, .bs-example + .highlight,
.bs-example + .zero-clipboard + .highlight { .bs-example + .zero-clipboard + .highlight {
@ -1166,6 +1182,10 @@ h1[id] {
overflow: auto; overflow: auto;
} }
.bs-example > .nav-pills-stacked-example {
max-width: 300px;
}
/* Simple collapse example */ /* Simple collapse example */
#collapseExample .well { #collapseExample .well {
margin-bottom: 0; margin-bottom: 0;
@ -1177,6 +1197,19 @@ h1[id] {
white-space: nowrap; white-space: nowrap;
} }
.bs-events-table > thead > tr > th:first-child {
width: 150px;
}
.js-options-table > thead > tr > th:nth-child(1),
.js-options-table > thead > tr > th:nth-child(2) {
width: 100px;
}
.js-options-table > thead > tr > th:nth-child(3) {
width: 50px;
}
/* /*
* Code snippets * Code snippets
* *

77
assets/js/customize.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
assets/js/docs.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
assets/js/raw-files.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
assets/js/src/application.js
View File

@ -9,7 +9,7 @@
* details, see http://creativecommons.org/licenses/by/3.0/. * details, see http://creativecommons.org/licenses/by/3.0/.
*/ */
/* global ZeroClipboard */ /* global ZeroClipboard, addAnchors */
!function ($) { !function ($) {
'use strict'; 'use strict';
@ -174,3 +174,8 @@
}) })
}(jQuery) }(jQuery)
;(function () {
'use strict';
addAnchors('.bs-docs-container h1, .bs-docs-container h2, .bs-docs-container h3, .bs-docs-container h4, .bs-docs-container h5');
})();

3
assets/js/src/customizer.js
View File

@ -6,12 +6,13 @@
* details, see http://creativecommons.org/licenses/by/3.0/. * details, see http://creativecommons.org/licenses/by/3.0/.
*/ */
/* jshint es3:false */
/* global JSZip, less, autoprefixer, saveAs, UglifyJS, __configBridge, __js, __less, __fonts */ /* global JSZip, less, autoprefixer, saveAs, UglifyJS, __configBridge, __js, __less, __fonts */
window.onload = function () { // wait for load in a dumb way because B-0 window.onload = function () { // wait for load in a dumb way because B-0
'use strict'; 'use strict';
var cw = '/*!\n' + var cw = '/*!\n' +
' * Bootstrap v3.3.2 (http://getbootstrap.com)\n' + ' * Bootstrap v3.3.4 (http://getbootstrap.com)\n' +
' * Copyright 2011-' + new Date().getFullYear() + ' Twitter, Inc.\n' + ' * Copyright 2011-' + new Date().getFullYear() + ' Twitter, Inc.\n' +
' * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n' + ' * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n' +
' */\n\n' ' */\n\n'

13
assets/js/vendor/FileSaver.js vendored
View File

@ -1,6 +1,6 @@
/* FileSaver.js /* FileSaver.js
* A saveAs() FileSaver implementation. * A saveAs() FileSaver implementation.
* 2014-08-29 * 2015-01-04
* *
* By Eli Grey, http://eligrey.com * By Eli Grey, http://eligrey.com
* License: X11/MIT * License: X11/MIT
@ -49,9 +49,10 @@ var saveAs = saveAs
} }
, force_saveable_type = "application/octet-stream" , force_saveable_type = "application/octet-stream"
, fs_min_size = 0 , fs_min_size = 0
// See https://code.google.com/p/chromium/issues/detail?id=375297#c7 for // See https://code.google.com/p/chromium/issues/detail?id=375297#c7 and
// the reasoning behind the timeout and revocation flow // https://github.com/eligrey/FileSaver.js/commit/485930a#commitcomment-8768047
, arbitrary_revoke_timeout = 10 // for the reasoning behind the timeout and revocation flow
, arbitrary_revoke_timeout = 500 // in ms
, revoke = function(file) { , revoke = function(file) {
var revoker = function() { var revoker = function() {
if (typeof file === "string") { // file is an object URL if (typeof file === "string") { // file is an object URL
@ -234,8 +235,8 @@ var saveAs = saveAs
// while `this` is nsIContentFrameMessageManager // while `this` is nsIContentFrameMessageManager
// with an attribute `content` that corresponds to the window // with an attribute `content` that corresponds to the window
if (typeof module !== "undefined" && module !== null) { if (typeof module !== "undefined" && module.exports) {
module.exports = saveAs; module.exports.saveAs = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) { } else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
define([], function() { define([], function() {
return saveAs; return saveAs;

48
assets/js/vendor/anchor.js vendored Normal file
View File

@ -0,0 +1,48 @@
/*!
* AnchorJS - v0.1.0 - 2014-08-17
* https://github.com/bryanbraun/anchorjs
* Copyright (c) 2014 Bryan Braun; Licensed MIT
*/
function addAnchors(selector) {
'use strict';
// Sensible default selector, if none is provided.
if (!selector) {
selector = 'h1, h2, h3, h4, h5, h6';
} else if (typeof selector !== 'string') {
throw new Error('AnchorJS accepts only strings; you used a ' + typeof selector);
}
// Select any elements that match the provided selector.
var elements = document.querySelectorAll(selector);
// Loop through the selected elements.
for (var i = 0; i < elements.length; i++) {
var elementID;
if (elements[i].hasAttribute('id')) {
elementID = elements[i].getAttribute('id');
} else {
// We need to create an ID on our element. First, we find which text selection method is available to the browser.
var textMethod = document.body.textContent ? 'textContent' : 'innerText';
// Get the text inside our element
var roughText = elements[i][textMethod];
// Refine it so it makes a good ID. Makes all lowercase and hyphen separated.
// Ex. Hello World > hello-world
var tidyText = roughText.replace(/\s+/g, '-').toLowerCase();
// Assign it to our element.
// Currently the setAttribute element is only supported in IE9 and above.
elements[i].setAttribute('id', tidyText);
// Grab it for use in our anchor.
elementID = tidyText;
}
var anchor = '<a class="anchorjs-link" href="#' + elementID + '"><span class="anchorjs-icon"></span></a>';
elements[i].innerHTML += anchor;
}
}

8912
assets/js/vendor/autoprefixer.js vendored
View File

File diff suppressed because one or more lines are too long

9
assets/js/vendor/uglify.min.js vendored
View File

File diff suppressed because one or more lines are too long

15
browser-bugs/index.html
View File

@ -254,6 +254,17 @@
</td> </td>
</tr> </tr>
<tr>
<td>Chrome
</td>
<td><p><code>:focus</code> <code>outline</code> style causes cursor to not be displayed when toggling a <code>readonly</code> <code>&lt;input&gt;</code> to read-write.</p>
</td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=465274">Chromium issue #465274</a>
</td>
<td><a href="https://github.com/twbs/bootstrap/issues/16022">#16022</a>
</td>
</tr>
<tr> <tr>
<td>Chrome (Windows & Linux) <td>Chrome (Windows & Linux)
</td> </td>
@ -398,9 +409,9 @@
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Maintained by the <a href="https://github.com/orgs/twbs/people">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> <p>Code licensed under <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links text-muted"> <ul class="bs-docs-footer-links text-muted">
<li>Currently v3.3.2</li> <li>Currently v3.3.4</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>&middot;</li> <li>&middot;</li>

156
components/index.html
View File

@ -96,7 +96,7 @@
<!-- Docs page layout --> <!-- Docs page layout -->
<div class="bs-docs-header" id="content"> <div class="bs-docs-header" id="content" tabindex="-1">
<div class="container"> <div class="container">
<h1>Components</h1> <h1>Components</h1>
<p>Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.</p> <p>Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.</p>
@ -113,7 +113,7 @@
<h1 id="glyphicons" class="page-header">Glyphicons</h1> <h1 id="glyphicons" class="page-header">Glyphicons</h1>
<h2 id="glyphicons-glyphs">Available glyphs</h2> <h2 id="glyphicons-glyphs">Available glyphs</h2>
<p>Includes 260 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p> <p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
<div class="bs-glyphicons"> <div class="bs-glyphicons">
<ul class="bs-glyphicons-list"> <ul class="bs-glyphicons-list">
@ -1247,16 +1247,36 @@
<span class="glyphicon-class">glyphicon glyphicon-bitcoin</span> <span class="glyphicon-class">glyphicon glyphicon-bitcoin</span>
</li> </li>
<li>
<span class="glyphicon glyphicon-btc" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-btc</span>
</li>
<li>
<span class="glyphicon glyphicon-xbt" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-xbt</span>
</li>
<li> <li>
<span class="glyphicon glyphicon-yen" aria-hidden="true"></span> <span class="glyphicon glyphicon-yen" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-yen</span> <span class="glyphicon-class">glyphicon glyphicon-yen</span>
</li> </li>
<li>
<span class="glyphicon glyphicon-jpy" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-jpy</span>
</li>
<li> <li>
<span class="glyphicon glyphicon-ruble" aria-hidden="true"></span> <span class="glyphicon glyphicon-ruble" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-ruble</span> <span class="glyphicon-class">glyphicon glyphicon-ruble</span>
</li> </li>
<li>
<span class="glyphicon glyphicon-rub" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-rub</span>
</li>
<li> <li>
<span class="glyphicon glyphicon-scale" aria-hidden="true"></span> <span class="glyphicon glyphicon-scale" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-scale</span> <span class="glyphicon-class">glyphicon glyphicon-scale</span>
@ -1490,8 +1510,8 @@
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p> <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
<h3 id="dropdowns-example">Example</h3> <h2 id="dropdowns-example">Example</h2>
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p> <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML. Dropdown menus can be changed to expand upwards (instead of downwards) by adding <code>.dropup</code> to the parent.</p>
<div class="bs-example" data-example-id="static-dropdown"> <div class="bs-example" data-example-id="static-dropdown">
<div class="dropdown clearfix"> <div class="dropdown clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
@ -1502,7 +1522,17 @@
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul>
</div>
<div class="dropup clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
</ul> </ul>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
@ -1517,9 +1547,21 @@
<span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Separated link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Separated link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span> <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropup"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenu2"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span><span class="nt">&gt;</span>
Dropdown
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenu2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Separated link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="dropdowns-alignment">Alignment</h3> <h2 id="dropdowns-alignment">Alignment</h2>
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> <p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
<div class="bs-callout bs-callout-warning" id="callout-dropdown-positioning"> <div class="bs-callout bs-callout-warning" id="callout-dropdown-positioning">
<h4>May require additional positioning</h4> <h4>May require additional positioning</h4>
@ -1533,15 +1575,15 @@
... ...
<span class="nt">&lt;/ul&gt;</span></code></pre></div> <span class="nt">&lt;/ul&gt;</span></code></pre></div>
<h3 id="dropdowns-headers">Headers</h3> <h2 id="dropdowns-headers">Headers</h2>
<p>Add a header to label sections of actions in any dropdown menu.</p> <p>Add a header to label sections of actions in any dropdown menu.</p>
<div class="bs-example"> <div class="bs-example">
<div class="dropdown clearfix"> <div class="dropdown clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
@ -1551,13 +1593,13 @@
</ul> </ul>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenu2"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenu3"</span><span class="nt">&gt;</span>
... ...
<span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"dropdown-header"</span><span class="nt">&gt;</span>Dropdown header<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"dropdown-header"</span><span class="nt">&gt;</span>Dropdown header<span class="nt">&lt;/li&gt;</span>
... ...
<span class="nt">&lt;/ul&gt;</span></code></pre></div> <span class="nt">&lt;/ul&gt;</span></code></pre></div>
<h3 id="dropdowns-divider">Divider</h3> <h2 id="dropdowns-divider">Divider</h2>
<p>Add a divider to separate series of links in a dropdown menu.</p> <p>Add a divider to separate series of links in a dropdown menu.</p>
<div class="bs-example"> <div class="bs-example">
<div class="dropdown clearfix"> <div class="dropdown clearfix">
@ -1580,22 +1622,22 @@
... ...
<span class="nt">&lt;/ul&gt;</span></code></pre></div> <span class="nt">&lt;/ul&gt;</span></code></pre></div>
<h3 id="dropdowns-disabled">Disabled menu items</h3> <h2 id="dropdowns-disabled">Disabled menu items</h2>
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p> <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
<div class="bs-example"> <div class="bs-example">
<div class="dropdown clearfix"> <div class="dropdown clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-expanded="true">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul> </ul>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenu3"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenu4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Regular link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Regular link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Disabled link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Disabled link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;a</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
@ -1619,7 +1661,7 @@
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p> <p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
</div> </div>
<h3 id="btn-groups-single">Basic example</h3> <h2 id="btn-groups-single">Basic example</h2>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p> <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bs-example" data-example-id="simple-button-group"> <div class="bs-example" data-example-id="simple-button-group">
<div class="btn-group" role="group" aria-label="Basic example"> <div class="btn-group" role="group" aria-label="Basic example">
@ -1634,7 +1676,7 @@
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Right<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Right<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="btn-groups-toolbar">Button toolbar</h3> <h2 id="btn-groups-toolbar">Button toolbar</h2>
<p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p> <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
<div class="bs-example" data-example-id="simple-button-toolbar"> <div class="bs-example" data-example-id="simple-button-toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
@ -1660,7 +1702,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="btn-groups-sizing">Sizing</h3> <h2 id="btn-groups-sizing">Sizing</h2>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including when nesting multiple groups.</p> <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including when nesting multiple groups.</p>
<div class="bs-example" data-example-id="button-group-sizing"> <div class="bs-example" data-example-id="button-group-sizing">
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group"> <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
@ -1692,7 +1734,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-sm"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-sm"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-xs"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-xs"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="btn-groups-nested">Nesting</h3> <h2 id="btn-groups-nested">Nesting</h2>
<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p> <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
<div class="bs-example" data-example-id="button-group-nesting"> <div class="bs-example" data-example-id="button-group-nesting">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
@ -1727,7 +1769,7 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="btn-groups-vertical">Vertical variation</h3> <h2 id="btn-groups-vertical">Vertical variation</h2>
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p> <p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
<div class="bs-example" data-example-id="vertical-button-group"> <div class="bs-example" data-example-id="vertical-button-group">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
@ -1781,7 +1823,7 @@
... ...
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="btn-groups-justified">Justified button groups</h3> <h2 id="btn-groups-justified">Justified button groups</h2>
<p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p> <p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
<div class="bs-callout bs-callout-warning" id="callout-btn-group-justified-dbl-border"> <div class="bs-callout bs-callout-warning" id="callout-btn-group-justified-dbl-border">
@ -1867,7 +1909,7 @@
<p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p> <p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
</div> </div>
<h3 id="btn-dropdowns-single">Single button dropdowns</h3> <h2 id="btn-dropdowns-single">Single button dropdowns</h2>
<p>Turn a button into a dropdown toggle with some basic markup changes.</p> <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
<div class="bs-example" data-example-id="single-button-dropdown"> <div class="bs-example" data-example-id="single-button-dropdown">
<div class="btn-group"> <div class="btn-group">
@ -1945,7 +1987,7 @@
<span class="nt">&lt;/ul&gt;</span> <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="btn-dropdowns-split">Split button dropdowns</h3> <h2 id="btn-dropdowns-split">Split button dropdowns</h2>
<p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p> <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
<div class="bs-example" data-example-id="split-button-dropdown"> <div class="bs-example" data-example-id="split-button-dropdown">
<div class="btn-group"> <div class="btn-group">
@ -2049,7 +2091,7 @@
<span class="nt">&lt;/ul&gt;</span> <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="btn-dropdowns-sizing">Sizing</h3> <h2 id="btn-dropdowns-sizing">Sizing</h2>
<p>Button dropdowns work with buttons of all sizes.</p> <p>Button dropdowns work with buttons of all sizes.</p>
<div class="bs-example" data-example-id="button-dropdown-sizing"> <div class="bs-example" data-example-id="button-dropdown-sizing">
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
@ -2125,7 +2167,7 @@
<span class="nt">&lt;/ul&gt;</span> <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="btn-dropdowns-dropup">Dropup variation</h3> <h2 id="btn-dropdowns-dropup">Dropup variation</h2>
<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p> <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
<div class="bs-example" data-example-id="button-dropdown-dropup"> <div class="bs-example" data-example-id="button-dropdown-dropup">
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
@ -2523,7 +2565,7 @@
<span class="nt">&lt;/ul&gt;</span></code></pre></div> <span class="nt">&lt;/ul&gt;</span></code></pre></div>
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p> <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-example" data-example-id="simple-nav-stacked"> <div class="bs-example" data-example-id="simple-nav-stacked">
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> <ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
<li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li> <li role="presentation"><a href="#">Messages</a></li>
@ -3103,7 +3145,7 @@
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li class="active">Library</li> <li class="active">Library</li>
</ol> </ol>
<ol class="breadcrumb" style="margin-bottom: 5px;"> <ol class="breadcrumb">
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="#">Library</a></li> <li><a href="#">Library</a></li>
<li class="active">Data</li> <li class="active">Data</li>
@ -3303,7 +3345,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<h1 id="labels" class="page-header">Labels</h1> <h1 id="labels" class="page-header">Labels</h1>
<h3>Example</h3> <h2>Example</h2>
<div class="bs-example" data-example-id="labels-in-headings"> <div class="bs-example" data-example-id="labels-in-headings">
<h1>Example heading <span class="label label-default">New</span></h1> <h1>Example heading <span class="label label-default">New</span></h1>
<h2>Example heading <span class="label label-default">New</span></h2> <h2>Example heading <span class="label label-default">New</span></h2>
@ -3314,7 +3356,7 @@
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h3&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-default"</span><span class="nt">&gt;</span>New<span class="nt">&lt;/span&gt;&lt;/h3&gt;</span></code></pre></div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h3&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-default"</span><span class="nt">&gt;</span>New<span class="nt">&lt;/span&gt;&lt;/h3&gt;</span></code></pre></div>
<h3>Available variations</h3> <h2>Available variations</h2>
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p> <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
<div class="bs-example" data-example-id="label-variants"> <div class="bs-example" data-example-id="label-variants">
<span class="label label-default">Default</span> <span class="label label-default">Default</span>
@ -3423,7 +3465,7 @@
<p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p> <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
<p>If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as <a href="http://masonry.desandro.com">Masonry</a>, <a href="http://isotope.metafizzy.co">Isotope</a>, or <a href="http://salvattore.com">Salvattore</a>.</p> <p>If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as <a href="http://masonry.desandro.com">Masonry</a>, <a href="http://isotope.metafizzy.co">Isotope</a>, or <a href="http://salvattore.com">Salvattore</a>.</p>
<h3 id="thumbnails-default">Default example</h3> <h2 id="thumbnails-default">Default example</h2>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="bs-example" data-example-id="simple-thumbnails"> <div class="bs-example" data-example-id="simple-thumbnails">
<div class="row"> <div class="row">
@ -3458,7 +3500,7 @@
... ...
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="thumbnails-custom-content">Custom content</h3> <h2 id="thumbnails-custom-content">Custom content</h2>
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<div class="bs-example" data-example-id="thumbnails-with-custom-content"> <div class="bs-example" data-example-id="thumbnails-with-custom-content">
<div class="row"> <div class="row">
@ -3602,7 +3644,7 @@
<p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p> <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
</div> </div>
<h3 id="progress-basic">Basic example</h3> <h2 id="progress-basic">Basic example</h2>
<p>Default progress bar.</p> <p>Default progress bar.</p>
<div class="bs-example" data-example-id="simple-progress-bar"> <div class="bs-example" data-example-id="simple-progress-bar">
<div class="progress"> <div class="progress">
@ -3617,7 +3659,7 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="progress-label">With label</h3> <h2 id="progress-label">With label</h2>
<p>Remove the <code>&lt;span&gt;</code> with <code>.sr-only</code> class from within the progress bar to show a visible percentage.</p> <p>Remove the <code>&lt;span&gt;</code> with <code>.sr-only</code> class from within the progress bar to show a visible percentage.</p>
<div class="bs-example" data-example-id="progress-bar-with-label"> <div class="bs-example" data-example-id="progress-bar-with-label">
<div class="progress"> <div class="progress">
@ -3656,7 +3698,7 @@
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="progress-alternatives">Contextual alternatives</h3> <h2 id="progress-alternatives">Contextual alternatives</h2>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p> <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-example" data-example-id="contextual-progress-bar"> <div class="bs-example" data-example-id="contextual-progress-bar">
<div class="progress"> <div class="progress">
@ -3701,8 +3743,8 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="progress-striped">Striped</h3> <h2 id="progress-striped">Striped</h2>
<p>Uses a gradient to create a striped effect. Not available in IE8.</p> <p>Uses a gradient to create a striped effect. Not available in IE9 and below.</p>
<div class="bs-example" data-example-id="striped-progress-bar"> <div class="bs-example" data-example-id="striped-progress-bar">
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
@ -3746,7 +3788,7 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="progress-animated">Animated</h3> <h2 id="progress-animated">Animated</h2>
<p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p> <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
<div class="bs-example" data-example-id="animated-progress-bar"> <div class="bs-example" data-example-id="animated-progress-bar">
<div class="progress"> <div class="progress">
@ -3760,7 +3802,7 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="progress-stacked">Stacked</h3> <h2 id="progress-stacked">Stacked</h2>
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p> <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-example" data-example-id="stacked-progress-bar"> <div class="bs-example" data-example-id="stacked-progress-bar">
<div class="progress"> <div class="progress">
@ -3793,7 +3835,7 @@
<p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p> <p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
<h3 id="media-default">Default media</h3> <h2 id="media-default">Default media</h2>
<p>The default media displays a media object (images, video, audio) to the left or right of a content block.</p> <p>The default media displays a media object (images, video, audio) to the left or right of a content block.</p>
<div class="bs-example" data-example-id="default-media"> <div class="bs-example" data-example-id="default-media">
<div class="media"> <div class="media">
@ -3870,7 +3912,7 @@
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<p>The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.</p> <p>The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.</p>
<h3 id="media-alignment">Media alignment</h3> <h2 id="media-alignment">Media alignment</h2>
<p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p> <p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p>
<div class="bs-example" data-example-id="media-alignment"> <div class="bs-example" data-example-id="media-alignment">
<div class="media"> <div class="media">
@ -3922,7 +3964,7 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="media-list">Media list</h3> <h2 id="media-list">Media list</h2>
<p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p> <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
<div class="bs-example" data-example-id="media-list"> <div class="bs-example" data-example-id="media-list">
<ul class="media-list"> <ul class="media-list">
@ -3995,7 +4037,7 @@
<p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p> <p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
<h3 id="list-group-basic">Basic example</h3> <h2 id="list-group-basic">Basic example</h2>
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p> <p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
<div class="bs-example" data-example-id="simple-list-group"> <div class="bs-example" data-example-id="simple-list-group">
<ul class="list-group"> <ul class="list-group">
@ -4014,7 +4056,7 @@
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div> <span class="nt">&lt;/ul&gt;</span></code></pre></div>
<h3 id="list-group-badges">Badges</h3> <h2 id="list-group-badges">Badges</h2>
<p>Add the badges component to any list group item and it will automatically be positioned on the right.</p> <p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
<div class="bs-example" data-example-id="list-group-badges"> <div class="bs-example" data-example-id="list-group-badges">
<ul class="list-group"> <ul class="list-group">
@ -4039,7 +4081,7 @@
<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div> <span class="nt">&lt;/ul&gt;</span></code></pre></div>
<h3 id="list-group-linked">Linked items</h3> <h2 id="list-group-linked">Linked items</h2>
<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p> <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p>
<div class="bs-example" data-example-id="list-group-anchors"> <div class="bs-example" data-example-id="list-group-anchors">
<div class="list-group"> <div class="list-group">
@ -4062,7 +4104,7 @@
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="list-group-disabled">Disabled items</h3> <h2 id="list-group-disabled">Disabled items</h2>
<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p> <p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
<div class="bs-example" data-example-id="list-group-disabled"> <div class="bs-example" data-example-id="list-group-disabled">
<div class="list-group"> <div class="list-group">
@ -4085,7 +4127,7 @@
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="list-group-contextual-classes">Contextual classes</h3> <h2 id="list-group-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p> <p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p>
<div class="bs-example" data-example-id="list-group-variants"> <div class="bs-example" data-example-id="list-group-variants">
<div class="row"> <div class="row">
@ -4120,7 +4162,7 @@
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-danger"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-danger"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="list-group-custom-content">Custom content</h3> <h2 id="list-group-custom-content">Custom content</h2>
<p>Add nearly any HTML within, even for linked list groups like the one below.</p> <p>Add nearly any HTML within, even for linked list groups like the one below.</p>
<div class="bs-example" data-example-id="list-group-custom-content"> <div class="bs-example" data-example-id="list-group-custom-content">
<div class="list-group"> <div class="list-group">
@ -4151,7 +4193,7 @@
<p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p> <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
<h3 id="panels-basic">Basic example</h3> <h2 id="panels-basic">Basic example</h2>
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p> <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-example" data-example-id="simple-panel"> <div class="bs-example" data-example-id="simple-panel">
<div class="panel panel-default"> <div class="panel panel-default">
@ -4166,7 +4208,7 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="panels-heading">Panel with heading</h3> <h2 id="panels-heading">Panel with heading</h2>
<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p> <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
<p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p> <p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
<div class="bs-example" data-example-id="panel-with-heading"> <div class="bs-example" data-example-id="panel-with-heading">
@ -4201,7 +4243,7 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="panels-footer">Panel with footer</h3> <h2 id="panels-footer">Panel with footer</h2>
<p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p> <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
<div class="bs-example" data-example-id="panel-with-footer"> <div class="bs-example" data-example-id="panel-with-footer">
<div class="panel panel-default"> <div class="panel panel-default">
@ -4218,7 +4260,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-footer"</span><span class="nt">&gt;</span>Panel footer<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-footer"</span><span class="nt">&gt;</span>Panel footer<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="panels-alternatives">Contextual alternatives</h3> <h2 id="panels-alternatives">Contextual alternatives</h2>
<p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p> <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
<div class="bs-example" data-example-id="contextual-panels"> <div class="bs-example" data-example-id="contextual-panels">
<div class="panel panel-primary"> <div class="panel panel-primary">
@ -4268,7 +4310,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel panel-warning"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel panel-warning"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel panel-danger"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel panel-danger"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="panels-tables">With tables</h3> <h2 id="panels-tables">With tables</h2>
<p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p> <p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
<div class="bs-example" data-example-id="table-within-panel"> <div class="bs-example" data-example-id="table-within-panel">
<div class="panel panel-default"> <div class="panel panel-default">
@ -4374,7 +4416,7 @@
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="panels-list-group">With list groups</h3> <h2 id="panels-list-group">With list groups</h2>
<p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p> <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
<div class="bs-example" data-example-id="panel-with-list-group"> <div class="bs-example" data-example-id="panel-with-list-group">
<div class="panel panel-default"> <div class="panel panel-default">
@ -4437,7 +4479,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<h1 id="wells" class="page-header">Wells</h1> <h1 id="wells" class="page-header">Wells</h1>
<h3>Default well</h3> <h2>Default well</h2>
<p>Use the well as a simple effect on an element to give it an inset effect.</p> <p>Use the well as a simple effect on an element to give it an inset effect.</p>
<div class="bs-example" data-example-id="default-well"> <div class="bs-example" data-example-id="default-well">
<div class="well"> <div class="well">
@ -4445,7 +4487,7 @@
</div> </div>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"well"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"well"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3>Optional classes</h3> <h2>Optional classes</h2>
<p>Control padding and rounded corners with two optional modifier classes.</p> <p>Control padding and rounded corners with two optional modifier classes.</p>
<div class="bs-example" data-example-id="large-well"> <div class="bs-example" data-example-id="large-well">
<div class="well well-lg"> <div class="well well-lg">
@ -4653,9 +4695,9 @@
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Maintained by the <a href="https://github.com/orgs/twbs/people">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> <p>Code licensed under <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links text-muted"> <ul class="bs-docs-footer-links text-muted">
<li>Currently v3.3.2</li> <li>Currently v3.3.4</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>&middot;</li> <li>&middot;</li>

81
css/index.html
View File

@ -96,7 +96,7 @@
<!-- Docs page layout --> <!-- Docs page layout -->
<div class="bs-docs-header" id="content"> <div class="bs-docs-header" id="content" tabindex="-1">
<div class="container"> <div class="container">
<h1>CSS</h1> <h1>CSS</h1>
<p>Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.</p> <p>Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.</p>
@ -114,21 +114,21 @@
<p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p> <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h3 id="overview-doctype">HTML5 doctype</h3> <h2 id="overview-doctype">HTML5 doctype</h2>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p> <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
... ...
<span class="nt">&lt;/html&gt;</span></code></pre></div> <span class="nt">&lt;/html&gt;</span></code></pre></div>
<h3 id="overview-mobile">Mobile first</h3> <h2 id="overview-mobile">Mobile first</h2>
<p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p> <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p> <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">&gt;</span></code></pre></div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">&gt;</span></code></pre></div>
<p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!</p> <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"</span><span class="nt">&gt;</span></code></pre></div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"</span><span class="nt">&gt;</span></code></pre></div>
<h3 id="overview-type-links">Typography and links</h3> <h2 id="overview-type-links">Typography and links</h2>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p> <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul> <ul>
<li>Set <code>background-color: #fff;</code> on the <code>body</code></li> <li>Set <code>background-color: #fff;</code> on the <code>body</code></li>
@ -137,10 +137,10 @@
</ul> </ul>
<p>These styles can be found within <code>scaffolding.less</code>.</p> <p>These styles can be found within <code>scaffolding.less</code>.</p>
<h3 id="overview-normalize">Normalize.css</h3> <h2 id="overview-normalize">Normalize.css</h2>
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="https://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p> <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="https://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
<h3 id="overview-container">Containers</h3> <h2 id="overview-container">Containers</h2>
<p>Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to <code>padding</code> and more, neither container is nestable.</p> <p>Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to <code>padding</code> and more, neither container is nestable.</p>
<p>Use <code>.container</code> for a responsive fixed width container.</p> <p>Use <code>.container</code> for a responsive fixed width container.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
@ -157,7 +157,7 @@
<p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p> <p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3 id="grid-intro">Introduction</h3> <h2 id="grid-intro">Introduction</h2>
<p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p> <p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>
<ul> <ul>
<li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width) for proper alignment and padding.</li> <li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width) for proper alignment and padding.</li>
@ -172,7 +172,7 @@
</ul> </ul>
<p>Look to the examples for applying these principles to your code.</p> <p>Look to the examples for applying these principles to your code.</p>
<h3 id="grid-media-queries">Media queries</h3> <h2 id="grid-media-queries">Media queries</h2>
<p>We use the following media queries in our Less files to create the key breakpoints in our grid system.</p> <p>We use the following media queries in our Less files to create the key breakpoints in our grid system.</p>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="cm">/* Extra small devices (phones, less than 768px) */</span> <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="cm">/* Extra small devices (phones, less than 768px) */</span>
<span class="cm">/* No media query since this is the default in Bootstrap */</span> <span class="cm">/* No media query since this is the default in Bootstrap */</span>
@ -191,7 +191,7 @@
<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-md-min</span><span class="o">)</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">max-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-md-max</span><span class="o">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span> <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-md-min</span><span class="o">)</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">max-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-md-max</span><span class="o">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-lg-min</span><span class="o">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></div> <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-lg-min</span><span class="o">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></div>
<h3 id="grid-options">Grid options</h3> <h2 id="grid-options">Grid options</h2>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p> <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
@ -267,7 +267,7 @@
</table> </table>
</div> </div>
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3> <h2 id="grid-example-basic">Example: Stacked-to-horizontal</h2>
<p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p> <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
@ -326,7 +326,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>.col-md-6<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>.col-md-6<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="grid-example-fluid">Example: Fluid container</h3> <h2 id="grid-example-fluid">Example: Fluid container</h2>
<p>Turn any fixed-width grid layout into a full-width layout by changing your outermost <code>.container</code> to <code>.container-fluid</code>.</p> <p>Turn any fixed-width grid layout into a full-width layout by changing your outermost <code>.container</code> to <code>.container-fluid</code>.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
@ -334,7 +334,7 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="grid-example-mixed">Example: Mobile and desktop</h3> <h2 id="grid-example-mixed">Example: Mobile and desktop</h2>
<p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p> <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
@ -370,7 +370,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">&gt;</span>.col-xs-6<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">&gt;</span>.col-xs-6<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktop</h3> <h2 id="grid-example-mixed-complete">Example: Mobile, tablet, desktop</h2>
<p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p> <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
@ -397,7 +397,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-4<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-4<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="grid-example-wrapping">Example: Column wrapping</h3> <h2 id="grid-example-wrapping">Example: Column wrapping</h2>
<p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p> <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
@ -412,7 +412,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">&gt;</span>.col-xs-6<span class="nt">&lt;br&gt;</span>Subsequent columns continue along the new line.<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">&gt;</span>.col-xs-6<span class="nt">&lt;br&gt;</span>Subsequent columns continue along the new line.<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="grid-responsive-resets">Responsive column resets</h3> <h2 id="grid-responsive-resets">Responsive column resets</h2>
<p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="#responsive-utilities">responsive utility classes</a>.</p> <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="#responsive-utilities">responsive utility classes</a>.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
@ -452,7 +452,7 @@
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="grid-offsetting">Offsetting columns</h3> <h2 id="grid-offsetting">Offsetting columns</h2>
<p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p> <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
@ -480,7 +480,7 @@
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="grid-nesting">Nesting columns</h3> <h2 id="grid-nesting">Nesting columns</h2>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p> <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-sm-9"> <div class="col-sm-9">
@ -509,7 +509,7 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="grid-column-ordering">Column ordering</h3> <h2 id="grid-column-ordering">Column ordering</h2>
<p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p> <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
@ -521,16 +521,16 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3 col-md-pull-9"</span><span class="nt">&gt;</span>.col-md-3 .col-md-pull-9<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3 col-md-pull-9"</span><span class="nt">&gt;</span>.col-md-3 .col-md-pull-9<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="grid-less">Less mixins and variables</h3> <h2 id="grid-less">Less mixins and variables</h2>
<p>In addition to <a href="#grid-example-basic">prebuilt grid classes</a> for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.</p> <p>In addition to <a href="#grid-example-basic">prebuilt grid classes</a> for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.</p>
<h4>Variables</h4> <h3>Variables</h3>
<p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p> <p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@grid-columns</span><span class="nd">:</span> <span class="nt">12</span><span class="p">;</span> <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@grid-columns</span><span class="nd">:</span> <span class="nt">12</span><span class="p">;</span>
<span class="k">@grid-gutter-width</span><span class="nd">:</span> <span class="nt">30px</span><span class="p">;</span> <span class="k">@grid-gutter-width</span><span class="nd">:</span> <span class="nt">30px</span><span class="p">;</span>
<span class="k">@grid-float-breakpoint</span><span class="nd">:</span> <span class="nt">768px</span><span class="p">;</span></code></pre></div> <span class="k">@grid-float-breakpoint</span><span class="nd">:</span> <span class="nt">768px</span><span class="p">;</span></code></pre></div>
<h4>Mixins</h4> <h3>Mixins</h3>
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p> <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Creates a wrapper for a series of columns <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Creates a wrapper for a series of columns
</span><span class="err">.</span><span class="na">make-row</span><span class="err">(@</span><span class="na">gutter</span><span class="p">:</span> <span class="o">@</span><span class="n">grid-gutter-width</span><span class="p">)</span> <span class="p">{</span> </span><span class="err">.</span><span class="na">make-row</span><span class="err">(@</span><span class="na">gutter</span><span class="p">:</span> <span class="o">@</span><span class="n">grid-gutter-width</span><span class="p">)</span> <span class="p">{</span>
@ -664,7 +664,7 @@
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span></code></pre></div> <span class="p">}</span></code></pre></div>
<h4>Example usage</h4> <h3>Example usage</h3>
<p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p> <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.wrapper</span> <span class="p">{</span> <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.wrapper</span> <span class="p">{</span>
<span class="nc">.make-row</span><span class="o">()</span><span class="p">;</span> <span class="nc">.make-row</span><span class="o">()</span><span class="p">;</span>
@ -2089,7 +2089,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<h2 id="forms-control-disabled">Disabled state</h2> <h2 id="forms-control-disabled">Disabled state</h2>
<p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p> <p>Add the <code>disabled</code> boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a <code>not-allowed</code> cursor.</p>
<div class="bs-example" data-example-id="text-form-control-disabled"> <div class="bs-example" data-example-id="text-form-control-disabled">
<form> <form>
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
@ -2155,7 +2155,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<h2 id="forms-control-readonly">Readonly state</h2> <h2 id="forms-control-readonly">Readonly state</h2>
<p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p> <p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
<div class="bs-example" data-example-id="readonly-text-form-control"> <div class="bs-example" data-example-id="readonly-text-form-control">
<form> <form>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly> <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
@ -2168,9 +2168,9 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p> <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
<div class="bs-callout bs-callout-warning" id="callout-form-validation-state-accessibility"> <div class="bs-callout bs-callout-warning" id="callout-form-validation-state-accessibility">
<h4>Conveying validation state to assistive technologies</h4> <h4>Conveying validation state to assistive technologies and colorblind users</h4>
<p>Using these validation styles to denote the state of a form control only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.</p> <p>Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.</p>
<p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code>&lt;label&gt;</code> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using <code>aria-describedby</code> (see the example in the following section). In the case of an error, you could also use the <code>aria-invalid="true"</code> attribute on the form control.</p> <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code>&lt;label&gt;</code> text itself (as is the case in the following code example), include a <a href="../components/#glyphicons">Glyphicon</a> (with appropriate alternative text using the <code>.sr-only</code> class - see the <a href="../components/#glyphicons-examples">Glyphicon examples</a>), or by providing an additional <a href="#forms-help-text">help text</a> block. Specifically for assistive technologies, invalid form controls can also be assigned an <code>aria-invalid="true"</code> attribute.</p>
</div> </div>
<div class="bs-example" data-example-id="form-validation-states"> <div class="bs-example" data-example-id="form-validation-states">
@ -2669,7 +2669,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p> <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
<div class="bs-example" data-example-id="block-btns"> <div class="bs-example" data-example-id="block-btns">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;"> <div class="well center-block" style="max-width: 400px;">
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</div> </div>
@ -2739,7 +2739,8 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<h1 id="images" class="page-header">Images</h1> <h1 id="images" class="page-header">Images</h1>
<h2 id="images-responsive">Responsive images</h2> <h2 id="images-responsive">Responsive images</h2>
<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p> <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code>, <code>height: auto;</code> and <code>display: block;</code> to the image so that it scales nicely to the parent element.</p>
<p>To center images which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <a href="../css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p>
<div class="bs-callout bs-callout-warning" id="callout-images-ie-svg"> <div class="bs-callout bs-callout-warning" id="callout-images-ie-svg">
<h4>SVG images and IE 8-10</h4> <h4>SVG images and IE 8-10</h4>
<p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p> <p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
@ -2858,14 +2859,14 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<h3 id="helper-classes-center">Center content blocks</h3> <h3 id="helper-classes-center">Center content blocks</h3>
<p>Set an element to <code>display: block</code> and center via <code>margin</code>. Available as a mixin and class.</p> <p>Set an element to <code>display: block</code> and center via <code>margin</code>. Available as a mixin and class.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"center-block"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"center-block"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></div>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Classes <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Class
</span><span class="nc">.center-block</span> <span class="p">{</span> </span><span class="nc">.center-block</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">margin-right</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span> <span class="p">}</span>
<span class="c1">// Usage as mixins <span class="c1">// Usage as a mixin
</span><span class="nc">.element</span> <span class="p">{</span> </span><span class="nc">.element</span> <span class="p">{</span>
<span class="nc">.center-block</span><span class="o">()</span><span class="p">;</span> <span class="nc">.center-block</span><span class="o">()</span><span class="p">;</span>
<span class="p">}</span></code></pre></div> <span class="p">}</span></code></pre></div>
@ -2887,7 +2888,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span> <span class="p">}</span>
<span class="c1">// Usage as a Mixin <span class="c1">// Usage as a mixin
</span><span class="nc">.element</span> <span class="p">{</span> </span><span class="nc">.element</span> <span class="p">{</span>
<span class="nc">.clearfix</span><span class="o">()</span><span class="p">;</span> <span class="nc">.clearfix</span><span class="o">()</span><span class="p">;</span>
<span class="p">}</span></code></pre></div> <span class="p">}</span></code></pre></div>
@ -2923,7 +2924,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<h3 id="helper-classes-screen-readers">Screen reader and keyboard navigation content</h3> <h3 id="helper-classes-screen-readers">Screen reader and keyboard navigation content</h3>
<p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p> <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"sr-only sr-only-focusable"</span> <span class="na">href=</span><span class="s">"#content"</span><span class="nt">&gt;</span>Skip to main content<span class="nt">&lt;/a&gt;</span></code></pre></div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"sr-only sr-only-focusable"</span> <span class="na">href=</span><span class="s">"#content"</span><span class="nt">&gt;</span>Skip to main content<span class="nt">&lt;/a&gt;</span></code></pre></div>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Usage as a Mixin <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Usage as a mixin
</span><span class="nc">.skip-navigation</span> <span class="p">{</span> </span><span class="nc">.skip-navigation</span> <span class="p">{</span>
<span class="nc">.sr-only</span><span class="o">()</span><span class="p">;</span> <span class="nc">.sr-only</span><span class="o">()</span><span class="p">;</span>
<span class="nc">.sr-only-focusable</span><span class="o">()</span><span class="p">;</span> <span class="nc">.sr-only-focusable</span><span class="o">()</span><span class="p">;</span>
@ -2933,7 +2934,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<h3 id="helper-classes-image-replacement">Image replacement</h3> <h3 id="helper-classes-image-replacement">Image replacement</h3>
<p>Utilize the <code>.text-hide</code> class or mixin to help replace an element's text content with a background image.</p> <p>Utilize the <code>.text-hide</code> class or mixin to help replace an element's text content with a background image.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"text-hide"</span><span class="nt">&gt;</span>Custom heading<span class="nt">&lt;/h1&gt;</span></code></pre></div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"text-hide"</span><span class="nt">&gt;</span>Custom heading<span class="nt">&lt;/h1&gt;</span></code></pre></div>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Usage as a Mixin <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Usage as a mixin
</span><span class="nc">.heading</span> <span class="p">{</span> </span><span class="nc">.heading</span> <span class="p">{</span>
<span class="nc">.text-hide</span><span class="o">()</span><span class="p">;</span> <span class="nc">.text-hide</span><span class="o">()</span><span class="p">;</span>
<span class="p">}</span></code></pre></div> <span class="p">}</span></code></pre></div>
@ -3346,7 +3347,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<h3 id="less-mixins-box-sizing">Box-sizing</h3> <h3 id="less-mixins-box-sizing">Box-sizing</h3>
<p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p> <p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p>
<p>The mixin is <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p> <p>The mixin is <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.box-sizing</span><span class="o">(@</span><span class="nt">box-model</span><span class="o">)</span> <span class="p">{</span> <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.box-sizing</span><span class="o">(@</span><span class="nt">box-model</span><span class="o">)</span> <span class="p">{</span>
<span class="na">-webkit-box-sizing</span><span class="p">:</span> <span class="o">@</span><span class="n">box-model</span><span class="p">;</span> <span class="c1">// Safari &lt;= 5 <span class="na">-webkit-box-sizing</span><span class="p">:</span> <span class="o">@</span><span class="n">box-model</span><span class="p">;</span> <span class="c1">// Safari &lt;= 5
</span> <span class="na">-moz-box-sizing</span><span class="p">:</span> <span class="o">@</span><span class="n">box-model</span><span class="p">;</span> <span class="c1">// Firefox &lt;= 19 </span> <span class="na">-moz-box-sizing</span><span class="p">:</span> <span class="o">@</span><span class="n">box-model</span><span class="p">;</span> <span class="c1">// Firefox &lt;= 19
@ -3383,7 +3384,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<h3 id="less-mixins-transitions">Transitions</h3> <h3 id="less-mixins-transitions">Transitions</h3>
<p>Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p> <p>Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p> <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.transition</span><span class="o">(@</span><span class="nt">transition</span><span class="o">)</span> <span class="p">{</span> <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.transition</span><span class="o">(@</span><span class="nt">transition</span><span class="o">)</span> <span class="p">{</span>
<span class="na">-webkit-transition</span><span class="p">:</span> <span class="o">@</span><span class="n">transition</span><span class="p">;</span> <span class="na">-webkit-transition</span><span class="p">:</span> <span class="o">@</span><span class="n">transition</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="o">@</span><span class="n">transition</span><span class="p">;</span> <span class="nl">transition</span><span class="p">:</span> <span class="o">@</span><span class="n">transition</span><span class="p">;</span>
@ -3413,7 +3414,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<h3 id="less-mixins-transformations">Transformations</h3> <h3 id="less-mixins-transformations">Transformations</h3>
<p>Rotate, scale, translate (move), or skew any object.</p> <p>Rotate, scale, translate (move), or skew any object.</p>
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p> <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.rotate</span><span class="o">(@</span><span class="nt">degrees</span><span class="o">)</span> <span class="p">{</span> <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.rotate</span><span class="o">(@</span><span class="nt">degrees</span><span class="o">)</span> <span class="p">{</span>
<span class="na">-webkit-transform</span><span class="p">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="o">@</span><span class="n">degrees</span><span class="p">);</span> <span class="na">-webkit-transform</span><span class="p">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="o">@</span><span class="n">degrees</span><span class="p">);</span>
<span class="na">-ms-transform</span><span class="p">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="o">@</span><span class="n">degrees</span><span class="p">);</span> <span class="c1">// IE9 only <span class="na">-ms-transform</span><span class="p">:</span> <span class="nf">rotate</span><span class="p">(</span><span class="o">@</span><span class="n">degrees</span><span class="p">);</span> <span class="c1">// IE9 only
@ -3468,7 +3469,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<h3 id="less-mixins-animations">Animations</h3> <h3 id="less-mixins-animations">Animations</h3>
<p>A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.</p> <p>A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.</p>
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p> <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.animation</span><span class="o">(@</span><span class="nt">animation</span><span class="o">)</span> <span class="p">{</span> <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.animation</span><span class="o">(@</span><span class="nt">animation</span><span class="o">)</span> <span class="p">{</span>
<span class="na">-webkit-animation</span><span class="p">:</span> <span class="o">@</span><span class="n">animation</span><span class="p">;</span> <span class="na">-webkit-animation</span><span class="p">:</span> <span class="o">@</span><span class="n">animation</span><span class="p">;</span>
<span class="nl">animation</span><span class="p">:</span> <span class="o">@</span><span class="n">animation</span><span class="p">;</span> <span class="nl">animation</span><span class="p">:</span> <span class="o">@</span><span class="n">animation</span><span class="p">;</span>
@ -3881,9 +3882,9 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Maintained by the <a href="https://github.com/orgs/twbs/people">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> <p>Code licensed under <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links text-muted"> <ul class="bs-docs-footer-links text-muted">
<li>Currently v3.3.2</li> <li>Currently v3.3.4</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>&middot;</li> <li>&middot;</li>

13
customize/index.html
View File

@ -91,7 +91,7 @@
<!-- Docs page layout --> <!-- Docs page layout -->
<div class="bs-docs-header" id="content"> <div class="bs-docs-header" id="content" tabindex="-1">
<div class="container"> <div class="container">
<h1>Customize and download</h1> <h1>Customize and download</h1>
<p>Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.</p> <p>Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.</p>
@ -937,6 +937,11 @@
<p id="help-block-@input-height-small" class="help-block">Small <code>.form-control</code> height</p> <p id="help-block-@input-height-small" class="help-block">Small <code>.form-control</code> height</p>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@form-group-margin-bottom">@form-group-margin-bottom</label>
<input id="input-@form-group-margin-bottom" type="text" aria-describedby="help-block-@form-group-margin-bottom" value="15px" data-var="@form-group-margin-bottom" class="form-control"/>
<p id="help-block-@form-group-margin-bottom" class="help-block"><code>.form-group</code> margin</p>
</div>
<div class="col-xs-4"> <div class="col-xs-4">
<label for="input-@legend-color">@legend-color</label> <label for="input-@legend-color">@legend-color</label>
<input id="input-@legend-color" type="text" value="@gray-dark" data-var="@legend-color" class="form-control"/> <input id="input-@legend-color" type="text" value="@gray-dark" data-var="@legend-color" class="form-control"/>
@ -945,12 +950,12 @@
<label for="input-@legend-border-color">@legend-border-color</label> <label for="input-@legend-border-color">@legend-border-color</label>
<input id="input-@legend-border-color" type="text" value="#e5e5e5" data-var="@legend-border-color" class="form-control"/> <input id="input-@legend-border-color" type="text" value="#e5e5e5" data-var="@legend-border-color" class="form-control"/>
</div> </div>
<div class="clearfix"></div>
<div class="col-xs-4"> <div class="col-xs-4">
<label for="input-@input-group-addon-bg">@input-group-addon-bg</label> <label for="input-@input-group-addon-bg">@input-group-addon-bg</label>
<input id="input-@input-group-addon-bg" type="text" aria-describedby="help-block-@input-group-addon-bg" value="@gray-lighter" data-var="@input-group-addon-bg" class="form-control"/> <input id="input-@input-group-addon-bg" type="text" aria-describedby="help-block-@input-group-addon-bg" value="@gray-lighter" data-var="@input-group-addon-bg" class="form-control"/>
<p id="help-block-@input-group-addon-bg" class="help-block">Background color for textual input addons</p> <p id="help-block-@input-group-addon-bg" class="help-block">Background color for textual input addons</p>
</div> </div>
<div class="clearfix"></div>
<div class="col-xs-4"> <div class="col-xs-4">
<label for="input-@input-group-addon-border-color">@input-group-addon-border-color</label> <label for="input-@input-group-addon-border-color">@input-group-addon-border-color</label>
<input id="input-@input-group-addon-border-color" type="text" aria-describedby="help-block-@input-group-addon-border-color" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/> <input id="input-@input-group-addon-border-color" type="text" aria-describedby="help-block-@input-group-addon-border-color" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/>
@ -2436,9 +2441,9 @@
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Maintained by the <a href="https://github.com/orgs/twbs/people">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> <p>Code licensed under <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links text-muted"> <ul class="bs-docs-footer-links text-muted">
<li>Currently v3.3.2</li> <li>Currently v3.3.4</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>&middot;</li> <li>&middot;</li>

2
dist/css/bootstrap-theme.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v3.3.2 (http://getbootstrap.com) * Bootstrap v3.3.4 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */

2
dist/css/bootstrap-theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

48
dist/css/bootstrap.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v3.3.2 (http://getbootstrap.com) * Bootstrap v3.3.4 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
@ -958,12 +958,24 @@ th {
.glyphicon-bitcoin:before { .glyphicon-bitcoin:before {
content: "\e227"; content: "\e227";
} }
.glyphicon-btc:before {
content: "\e227";
}
.glyphicon-xbt:before {
content: "\e227";
}
.glyphicon-yen:before { .glyphicon-yen:before {
content: "\00a5"; content: "\00a5";
} }
.glyphicon-jpy:before {
content: "\00a5";
}
.glyphicon-ruble:before { .glyphicon-ruble:before {
content: "\20bd"; content: "\20bd";
} }
.glyphicon-rub:before {
content: "\20bd";
}
.glyphicon-scale:before { .glyphicon-scale:before {
content: "\e230"; content: "\e230";
} }
@ -1161,6 +1173,9 @@ hr {
overflow: visible; overflow: visible;
clip: auto; clip: auto;
} }
[role="button"] {
cursor: pointer;
}
h1, h1,
h2, h2,
h3, h3,
@ -2564,10 +2579,13 @@ output {
.form-control[disabled], .form-control[disabled],
.form-control[readonly], .form-control[readonly],
fieldset[disabled] .form-control { fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee; background-color: #eee;
opacity: 1; opacity: 1;
} }
.form-control[disabled],
fieldset[disabled] .form-control {
cursor: not-allowed;
}
textarea.form-control { textarea.form-control {
height: auto; height: auto;
} }
@ -2634,6 +2652,7 @@ input[type="search"] {
} }
.radio-inline, .radio-inline,
.checkbox-inline { .checkbox-inline {
position: relative;
display: inline-block; display: inline-block;
padding-left: 20px; padding-left: 20px;
margin-bottom: 0; margin-bottom: 0;
@ -2667,6 +2686,7 @@ fieldset[disabled] .checkbox label {
cursor: not-allowed; cursor: not-allowed;
} }
.form-control-static { .form-control-static {
min-height: 34px;
padding-top: 7px; padding-top: 7px;
padding-bottom: 7px; padding-bottom: 7px;
margin-bottom: 0; margin-bottom: 0;
@ -2708,6 +2728,7 @@ select[multiple].form-group-sm .form-control {
} }
.form-group-sm .form-control-static { .form-group-sm .form-control-static {
height: 30px; height: 30px;
min-height: 32px;
padding: 5px 10px; padding: 5px 10px;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
@ -2744,6 +2765,7 @@ select[multiple].form-group-lg .form-control {
} }
.form-group-lg .form-control-static { .form-group-lg .form-control-static {
height: 46px; height: 46px;
min-height: 38px;
padding: 10px 16px; padding: 10px 16px;
font-size: 18px; font-size: 18px;
line-height: 1.3333333; line-height: 1.3333333;
@ -3365,11 +3387,9 @@ input[type="button"].btn-block {
} }
.collapse { .collapse {
display: none; display: none;
visibility: hidden;
} }
.collapse.in { .collapse.in {
display: block; display: block;
visibility: visible;
} }
tr.collapse.in { tr.collapse.in {
display: table-row; display: table-row;
@ -3397,7 +3417,7 @@ tbody.collapse.in {
height: 0; height: 0;
margin-left: 2px; margin-left: 2px;
vertical-align: middle; vertical-align: middle;
border-top: 4px solid; border-top: 4px dashed;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-left: 4px solid transparent; border-left: 4px solid transparent;
} }
@ -4037,11 +4057,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
} }
.tab-content > .tab-pane { .tab-content > .tab-pane {
display: none; display: none;
visibility: hidden;
} }
.tab-content > .active { .tab-content > .active {
display: block; display: block;
visibility: visible;
} }
.nav-tabs .dropdown-menu { .nav-tabs .dropdown-menu {
margin-top: -1px; margin-top: -1px;
@ -4088,7 +4106,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
height: auto !important; height: auto !important;
padding-bottom: 0; padding-bottom: 0;
overflow: visible !important; overflow: visible !important;
visibility: visible !important;
} }
.navbar-collapse.in { .navbar-collapse.in {
overflow-y: visible; overflow-y: visible;
@ -4813,7 +4830,8 @@ a.label:focus {
position: relative; position: relative;
top: -1px; top: -1px;
} }
.btn-xs .badge { .btn-xs .badge,
.btn-group-xs > .btn .badge {
top: 0; top: 0;
padding: 1px 5px; padding: 1px 5px;
} }
@ -5645,10 +5663,10 @@ a.list-group-item-danger.active:focus {
height: 100%; height: 100%;
border: 0; border: 0;
} }
.embed-responsive.embed-responsive-16by9 { .embed-responsive-16by9 {
padding-bottom: 56.25%; padding-bottom: 56.25%;
} }
.embed-responsive.embed-responsive-4by3 { .embed-responsive-4by3 {
padding-bottom: 75%; padding-bottom: 75%;
} }
.well { .well {
@ -5707,7 +5725,7 @@ button.close {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1040; z-index: 1050;
display: none; display: none;
overflow: hidden; overflow: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -5750,10 +5768,12 @@ button.close {
box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
} }
.modal-backdrop { .modal-backdrop {
position: absolute; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0;
left: 0; left: 0;
z-index: 1040;
background-color: #000; background-color: #000;
} }
.modal-backdrop.fade { .modal-backdrop.fade {
@ -5828,7 +5848,6 @@ button.close {
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
line-height: 1.4; line-height: 1.4;
visibility: visible;
filter: alpha(opacity=0); filter: alpha(opacity=0);
opacity: 0; opacity: 0;
} }
@ -6348,7 +6367,6 @@ button.close {
} }
.hidden { .hidden {
display: none !important; display: none !important;
visibility: hidden !important;
} }
.affix { .affix {
position: fixed; position: fixed;

2
dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

4
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

181
dist/js/bootstrap.js vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v3.3.2 (http://getbootstrap.com) * Bootstrap v3.3.4 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
@ -17,7 +17,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: transition.js v3.3.2 * Bootstrap: transition.js v3.3.4
* http://getbootstrap.com/javascript/#transitions * http://getbootstrap.com/javascript/#transitions
* ======================================================================== * ========================================================================
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
@ -77,7 +77,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: alert.js v3.3.2 * Bootstrap: alert.js v3.3.4
* http://getbootstrap.com/javascript/#alerts * http://getbootstrap.com/javascript/#alerts
* ======================================================================== * ========================================================================
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
@ -96,7 +96,7 @@ if (typeof jQuery === 'undefined') {
$(el).on('click', dismiss, this.close) $(el).on('click', dismiss, this.close)
} }
Alert.VERSION = '3.3.2' Alert.VERSION = '3.3.4'
Alert.TRANSITION_DURATION = 150 Alert.TRANSITION_DURATION = 150
@ -172,7 +172,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: button.js v3.3.2 * Bootstrap: button.js v3.3.4
* http://getbootstrap.com/javascript/#buttons * http://getbootstrap.com/javascript/#buttons
* ======================================================================== * ========================================================================
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
@ -192,7 +192,7 @@ if (typeof jQuery === 'undefined') {
this.isLoading = false this.isLoading = false
} }
Button.VERSION = '3.3.2' Button.VERSION = '3.3.4'
Button.DEFAULTS = { Button.DEFAULTS = {
loadingText: 'loading...' loadingText: 'loading...'
@ -289,7 +289,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: carousel.js v3.3.2 * Bootstrap: carousel.js v3.3.4
* http://getbootstrap.com/javascript/#carousel * http://getbootstrap.com/javascript/#carousel
* ======================================================================== * ========================================================================
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
@ -307,10 +307,10 @@ if (typeof jQuery === 'undefined') {
this.$element = $(element) this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators') this.$indicators = this.$element.find('.carousel-indicators')
this.options = options this.options = options
this.paused = this.paused = null
this.sliding = this.sliding = null
this.interval = this.interval = null
this.$active = this.$active = null
this.$items = null this.$items = null
this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this)) this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))
@ -320,7 +320,7 @@ if (typeof jQuery === 'undefined') {
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this)) .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
} }
Carousel.VERSION = '3.3.2' Carousel.VERSION = '3.3.4'
Carousel.TRANSITION_DURATION = 600 Carousel.TRANSITION_DURATION = 600
@ -527,7 +527,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: collapse.js v3.3.2 * Bootstrap: collapse.js v3.3.4
* http://getbootstrap.com/javascript/#collapse * http://getbootstrap.com/javascript/#collapse
* ======================================================================== * ========================================================================
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
@ -544,7 +544,8 @@ if (typeof jQuery === 'undefined') {
var Collapse = function (element, options) { var Collapse = function (element, options) {
this.$element = $(element) this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options) this.options = $.extend({}, Collapse.DEFAULTS, options)
this.$trigger = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]') this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
'[data-toggle="collapse"][data-target="#' + element.id + '"]')
this.transitioning = null this.transitioning = null
if (this.options.parent) { if (this.options.parent) {
@ -556,13 +557,12 @@ if (typeof jQuery === 'undefined') {
if (this.options.toggle) this.toggle() if (this.options.toggle) this.toggle()
} }
Collapse.VERSION = '3.3.2' Collapse.VERSION = '3.3.4'
Collapse.TRANSITION_DURATION = 350 Collapse.TRANSITION_DURATION = 350
Collapse.DEFAULTS = { Collapse.DEFAULTS = {
toggle: true, toggle: true
trigger: '[data-toggle="collapse"]'
} }
Collapse.prototype.dimension = function () { Collapse.prototype.dimension = function () {
@ -700,7 +700,7 @@ if (typeof jQuery === 'undefined') {
var data = $this.data('bs.collapse') var data = $this.data('bs.collapse')
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option) var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data && options.toggle && option == 'show') options.toggle = false if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options))) if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]() if (typeof option == 'string') data[option]()
}) })
@ -731,7 +731,7 @@ if (typeof jQuery === 'undefined') {
var $target = getTargetFromTrigger($this) var $target = getTargetFromTrigger($this)
var data = $target.data('bs.collapse') var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this }) var option = data ? 'toggle' : $this.data()
Plugin.call($target, option) Plugin.call($target, option)
}) })
@ -739,7 +739,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: dropdown.js v3.3.2 * Bootstrap: dropdown.js v3.3.4
* http://getbootstrap.com/javascript/#dropdowns * http://getbootstrap.com/javascript/#dropdowns
* ======================================================================== * ========================================================================
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
@ -759,7 +759,7 @@ if (typeof jQuery === 'undefined') {
$(element).on('click.bs.dropdown', this.toggle) $(element).on('click.bs.dropdown', this.toggle)
} }
Dropdown.VERSION = '3.3.2' Dropdown.VERSION = '3.3.4'
Dropdown.prototype.toggle = function (e) { Dropdown.prototype.toggle = function (e) {
var $this = $(this) var $this = $(this)
@ -812,7 +812,7 @@ if (typeof jQuery === 'undefined') {
return $this.trigger('click') return $this.trigger('click')
} }
var desc = ' li:not(.divider):visible a' var desc = ' li:not(.disabled):visible a'
var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc) var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
if (!$items.length) return if (!$items.length) return
@ -901,7 +901,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: modal.js v3.3.2 * Bootstrap: modal.js v3.3.4
* http://getbootstrap.com/javascript/#modals * http://getbootstrap.com/javascript/#modals
* ======================================================================== * ========================================================================
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
@ -919,9 +919,12 @@ if (typeof jQuery === 'undefined') {
this.options = options this.options = options
this.$body = $(document.body) this.$body = $(document.body)
this.$element = $(element) this.$element = $(element)
this.$backdrop = this.$dialog = this.$element.find('.modal-dialog')
this.$backdrop = null
this.isShown = null this.isShown = null
this.originalBodyPad = null
this.scrollbarWidth = 0 this.scrollbarWidth = 0
this.ignoreBackdropClick = false
if (this.options.remote) { if (this.options.remote) {
this.$element this.$element
@ -932,7 +935,7 @@ if (typeof jQuery === 'undefined') {
} }
} }
Modal.VERSION = '3.3.2' Modal.VERSION = '3.3.4'
Modal.TRANSITION_DURATION = 300 Modal.TRANSITION_DURATION = 300
Modal.BACKDROP_TRANSITION_DURATION = 150 Modal.BACKDROP_TRANSITION_DURATION = 150
@ -966,6 +969,12 @@ if (typeof jQuery === 'undefined') {
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.$dialog.on('mousedown.dismiss.bs.modal', function () {
that.$element.one('mouseup.dismiss.bs.modal', function (e) {
if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true
})
})
this.backdrop(function () { this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade') var transition = $.support.transition && that.$element.hasClass('fade')
@ -977,7 +986,6 @@ if (typeof jQuery === 'undefined') {
.show() .show()
.scrollTop(0) .scrollTop(0)
if (that.options.backdrop) that.adjustBackdrop()
that.adjustDialog() that.adjustDialog()
if (transition) { if (transition) {
@ -993,7 +1001,7 @@ if (typeof jQuery === 'undefined') {
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ? transition ?
that.$element.find('.modal-dialog') // wait for modal to slide in that.$dialog // wait for modal to slide in
.one('bsTransitionEnd', function () { .one('bsTransitionEnd', function () {
that.$element.trigger('focus').trigger(e) that.$element.trigger('focus').trigger(e)
}) })
@ -1022,6 +1030,9 @@ if (typeof jQuery === 'undefined') {
.removeClass('in') .removeClass('in')
.attr('aria-hidden', true) .attr('aria-hidden', true)
.off('click.dismiss.bs.modal') .off('click.dismiss.bs.modal')
.off('mouseup.dismiss.bs.modal')
this.$dialog.off('mousedown.dismiss.bs.modal')
$.support.transition && this.$element.hasClass('fade') ? $.support.transition && this.$element.hasClass('fade') ?
this.$element this.$element
@ -1082,12 +1093,17 @@ if (typeof jQuery === 'undefined') {
var doAnimate = $.support.transition && animate var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.prependTo(this.$element) .appendTo(this.$body)
.on('click.dismiss.bs.modal', $.proxy(function (e) {
this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
if (this.ignoreBackdropClick) {
this.ignoreBackdropClick = false
return
}
if (e.target !== e.currentTarget) return if (e.target !== e.currentTarget) return
this.options.backdrop == 'static' this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0]) ? this.$element[0].focus()
: this.hide.call(this) : this.hide()
}, this)) }, this))
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
@ -1123,16 +1139,9 @@ if (typeof jQuery === 'undefined') {
// these following methods are used to handle overflowing modals // these following methods are used to handle overflowing modals
Modal.prototype.handleUpdate = function () { Modal.prototype.handleUpdate = function () {
if (this.options.backdrop) this.adjustBackdrop()
this.adjustDialog() this.adjustDialog()
} }
Modal.prototype.adjustBackdrop = function () {
this.$backdrop
.css('height', 0)
.css('height', this.$element[0].scrollHeight)
}
Modal.prototype.adjustDialog = function () { Modal.prototype.adjustDialog = function () {
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
@ -1150,17 +1159,23 @@ if (typeof jQuery === 'undefined') {
} }
Modal.prototype.checkScrollbar = function () { Modal.prototype.checkScrollbar = function () {
this.bodyIsOverflowing = document.body.scrollHeight > document.documentElement.clientHeight var fullWindowWidth = window.innerWidth
if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
var documentElementRect = document.documentElement.getBoundingClientRect()
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
}
this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
this.scrollbarWidth = this.measureScrollbar() this.scrollbarWidth = this.measureScrollbar()
} }
Modal.prototype.setScrollbar = function () { Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10) var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
this.originalBodyPad = document.body.style.paddingRight || ''
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth) if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
} }
Modal.prototype.resetScrollbar = function () { Modal.prototype.resetScrollbar = function () {
this.$body.css('padding-right', '') this.$body.css('padding-right', this.originalBodyPad)
} }
Modal.prototype.measureScrollbar = function () { // thx walsh Modal.prototype.measureScrollbar = function () { // thx walsh
@ -1226,7 +1241,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: tooltip.js v3.3.2 * Bootstrap: tooltip.js v3.3.4
* http://getbootstrap.com/javascript/#tooltip * http://getbootstrap.com/javascript/#tooltip
* Inspired by the original jQuery.tipsy by Jason Frame * Inspired by the original jQuery.tipsy by Jason Frame
* ======================================================================== * ========================================================================
@ -1242,17 +1257,17 @@ if (typeof jQuery === 'undefined') {
// =============================== // ===============================
var Tooltip = function (element, options) { var Tooltip = function (element, options) {
this.type = this.type = null
this.options = this.options = null
this.enabled = this.enabled = null
this.timeout = this.timeout = null
this.hoverState = this.hoverState = null
this.$element = null this.$element = null
this.init('tooltip', element, options) this.init('tooltip', element, options)
} }
Tooltip.VERSION = '3.3.2' Tooltip.VERSION = '3.3.4'
Tooltip.TRANSITION_DURATION = 150 Tooltip.TRANSITION_DURATION = 150
@ -1279,6 +1294,10 @@ if (typeof jQuery === 'undefined') {
this.options = this.getOptions(options) this.options = this.getOptions(options)
this.$viewport = this.options.viewport && $(this.options.viewport.selector || this.options.viewport) this.$viewport = this.options.viewport && $(this.options.viewport.selector || this.options.viewport)
if (this.$element[0] instanceof document.constructor && !this.options.selector) {
throw new Error('`selector` option must be specified when initializing ' + this.type + ' on the window.document object!')
}
var triggers = this.options.trigger.split(' ') var triggers = this.options.trigger.split(' ')
for (var i = triggers.length; i--;) { for (var i = triggers.length; i--;) {
@ -1499,10 +1518,10 @@ if (typeof jQuery === 'undefined') {
this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], isVertical) this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], isVertical)
} }
Tooltip.prototype.replaceArrow = function (delta, dimension, isHorizontal) { Tooltip.prototype.replaceArrow = function (delta, dimension, isVertical) {
this.arrow() this.arrow()
.css(isHorizontal ? 'left' : 'top', 50 * (1 - delta / dimension) + '%') .css(isVertical ? 'left' : 'top', 50 * (1 - delta / dimension) + '%')
.css(isHorizontal ? 'top' : 'left', '') .css(isVertical ? 'top' : 'left', '')
} }
Tooltip.prototype.setContent = function () { Tooltip.prototype.setContent = function () {
@ -1515,7 +1534,7 @@ if (typeof jQuery === 'undefined') {
Tooltip.prototype.hide = function (callback) { Tooltip.prototype.hide = function (callback) {
var that = this var that = this
var $tip = this.tip() var $tip = $(this.$tip)
var e = $.Event('hide.bs.' + this.type) var e = $.Event('hide.bs.' + this.type)
function complete() { function complete() {
@ -1532,7 +1551,7 @@ if (typeof jQuery === 'undefined') {
$tip.removeClass('in') $tip.removeClass('in')
$.support.transition && this.$tip.hasClass('fade') ? $.support.transition && $tip.hasClass('fade') ?
$tip $tip
.one('bsTransitionEnd', complete) .one('bsTransitionEnd', complete)
.emulateTransitionEnd(Tooltip.TRANSITION_DURATION) : .emulateTransitionEnd(Tooltip.TRANSITION_DURATION) :
@ -1676,7 +1695,7 @@ if (typeof jQuery === 'undefined') {
var data = $this.data('bs.tooltip') var data = $this.data('bs.tooltip')
var options = typeof option == 'object' && option var options = typeof option == 'object' && option
if (!data && option == 'destroy') return if (!data && /destroy|hide/.test(option)) return
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options))) if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
if (typeof option == 'string') data[option]() if (typeof option == 'string') data[option]()
}) })
@ -1699,7 +1718,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: popover.js v3.3.2 * Bootstrap: popover.js v3.3.4
* http://getbootstrap.com/javascript/#popovers * http://getbootstrap.com/javascript/#popovers
* ======================================================================== * ========================================================================
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
@ -1719,7 +1738,7 @@ if (typeof jQuery === 'undefined') {
if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js') if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
Popover.VERSION = '3.3.2' Popover.VERSION = '3.3.4'
Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, { Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
placement: 'right', placement: 'right',
@ -1775,11 +1794,6 @@ if (typeof jQuery === 'undefined') {
return (this.$arrow = this.$arrow || this.tip().find('.arrow')) return (this.$arrow = this.$arrow || this.tip().find('.arrow'))
} }
Popover.prototype.tip = function () {
if (!this.$tip) this.$tip = $(this.options.template)
return this.$tip
}
// POPOVER PLUGIN DEFINITION // POPOVER PLUGIN DEFINITION
// ========================= // =========================
@ -1790,7 +1804,7 @@ if (typeof jQuery === 'undefined') {
var data = $this.data('bs.popover') var data = $this.data('bs.popover')
var options = typeof option == 'object' && option var options = typeof option == 'object' && option
if (!data && option == 'destroy') return if (!data && /destroy|hide/.test(option)) return
if (!data) $this.data('bs.popover', (data = new Popover(this, options))) if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
if (typeof option == 'string') data[option]() if (typeof option == 'string') data[option]()
}) })
@ -1813,7 +1827,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: scrollspy.js v3.3.2 * Bootstrap: scrollspy.js v3.3.4
* http://getbootstrap.com/javascript/#scrollspy * http://getbootstrap.com/javascript/#scrollspy
* ======================================================================== * ========================================================================
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
@ -1828,10 +1842,8 @@ if (typeof jQuery === 'undefined') {
// ========================== // ==========================
function ScrollSpy(element, options) { function ScrollSpy(element, options) {
var process = $.proxy(this.process, this) this.$body = $(document.body)
this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
this.$body = $('body')
this.$scrollElement = $(element).is('body') ? $(window) : $(element)
this.options = $.extend({}, ScrollSpy.DEFAULTS, options) this.options = $.extend({}, ScrollSpy.DEFAULTS, options)
this.selector = (this.options.target || '') + ' .nav li > a' this.selector = (this.options.target || '') + ' .nav li > a'
this.offsets = [] this.offsets = []
@ -1839,12 +1851,12 @@ if (typeof jQuery === 'undefined') {
this.activeTarget = null this.activeTarget = null
this.scrollHeight = 0 this.scrollHeight = 0
this.$scrollElement.on('scroll.bs.scrollspy', process) this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
this.refresh() this.refresh()
this.process() this.process()
} }
ScrollSpy.VERSION = '3.3.2' ScrollSpy.VERSION = '3.3.4'
ScrollSpy.DEFAULTS = { ScrollSpy.DEFAULTS = {
offset: 10 offset: 10
@ -1855,19 +1867,18 @@ if (typeof jQuery === 'undefined') {
} }
ScrollSpy.prototype.refresh = function () { ScrollSpy.prototype.refresh = function () {
var that = this
var offsetMethod = 'offset' var offsetMethod = 'offset'
var offsetBase = 0 var offsetBase = 0
if (!$.isWindow(this.$scrollElement[0])) {
offsetMethod = 'position'
offsetBase = this.$scrollElement.scrollTop()
}
this.offsets = [] this.offsets = []
this.targets = [] this.targets = []
this.scrollHeight = this.getScrollHeight() this.scrollHeight = this.getScrollHeight()
var self = this if (!$.isWindow(this.$scrollElement[0])) {
offsetMethod = 'position'
offsetBase = this.$scrollElement.scrollTop()
}
this.$body this.$body
.find(this.selector) .find(this.selector)
@ -1883,8 +1894,8 @@ if (typeof jQuery === 'undefined') {
}) })
.sort(function (a, b) { return a[0] - b[0] }) .sort(function (a, b) { return a[0] - b[0] })
.each(function () { .each(function () {
self.offsets.push(this[0]) that.offsets.push(this[0])
self.targets.push(this[1]) that.targets.push(this[1])
}) })
} }
@ -1913,7 +1924,7 @@ if (typeof jQuery === 'undefined') {
for (i = offsets.length; i--;) { for (i = offsets.length; i--;) {
activeTarget != targets[i] activeTarget != targets[i]
&& scrollTop >= offsets[i] && scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1]) && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])
&& this.activate(targets[i]) && this.activate(targets[i])
} }
} }
@ -1989,7 +2000,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: tab.js v3.3.2 * Bootstrap: tab.js v3.3.4
* http://getbootstrap.com/javascript/#tabs * http://getbootstrap.com/javascript/#tabs
* ======================================================================== * ========================================================================
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
@ -2007,7 +2018,7 @@ if (typeof jQuery === 'undefined') {
this.element = $(element) this.element = $(element)
} }
Tab.VERSION = '3.3.2' Tab.VERSION = '3.3.4'
Tab.TRANSITION_DURATION = 150 Tab.TRANSITION_DURATION = 150
@ -2078,7 +2089,7 @@ if (typeof jQuery === 'undefined') {
element.removeClass('fade') element.removeClass('fade')
} }
if (element.parent('.dropdown-menu')) { if (element.parent('.dropdown-menu').length) {
element element
.closest('li.dropdown') .closest('li.dropdown')
.addClass('active') .addClass('active')
@ -2143,7 +2154,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: affix.js v3.3.2 * Bootstrap: affix.js v3.3.4
* http://getbootstrap.com/javascript/#affix * http://getbootstrap.com/javascript/#affix
* ======================================================================== * ========================================================================
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
@ -2165,14 +2176,14 @@ if (typeof jQuery === 'undefined') {
.on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this)) .on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this))
this.$element = $(element) this.$element = $(element)
this.affixed = this.affixed = null
this.unpin = this.unpin = null
this.pinnedOffset = null this.pinnedOffset = null
this.checkPosition() this.checkPosition()
} }
Affix.VERSION = '3.3.2' Affix.VERSION = '3.3.4'
Affix.RESET = 'affix affix-top affix-bottom' Affix.RESET = 'affix affix-top affix-bottom'
@ -2222,7 +2233,7 @@ if (typeof jQuery === 'undefined') {
var offset = this.options.offset var offset = this.options.offset
var offsetTop = offset.top var offsetTop = offset.top
var offsetBottom = offset.bottom var offsetBottom = offset.bottom
var scrollHeight = $('body').height() var scrollHeight = $(document.body).height()
if (typeof offset != 'object') offsetBottom = offsetTop = offset if (typeof offset != 'object') offsetBottom = offsetTop = offset
if (typeof offsetTop == 'function') offsetTop = offset.top(this.$element) if (typeof offsetTop == 'function') offsetTop = offset.top(this.$element)

6
dist/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
examples/blog/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">
@ -169,7 +170,6 @@
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body> </body>

28
examples/carousel/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">
@ -80,7 +81,7 @@
</ol> </ol>
<div class="carousel-inner" role="listbox"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>Example headline.</h1> <h1>Example headline.</h1>
@ -90,7 +91,7 @@
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>Another example headline.</h1> <h1>Another example headline.</h1>
@ -100,7 +101,7 @@
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>One more for good measure.</h1> <h1>One more for good measure.</h1>
@ -130,19 +131,19 @@
<!-- Three columns of text below the carousel --> <!-- Three columns of text below the carousel -->
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;"> <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col-lg-4"> <div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;"> <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2> <h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col-lg-4"> <div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;"> <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
@ -160,20 +161,20 @@
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div> </div>
</div> </div>
<hr class="featurette-divider"> <hr class="featurette-divider">
<div class="row featurette"> <div class="row featurette">
<div class="col-md-5"> <div class="col-md-7 col-md-push-5">
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="col-md-7">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<div class="col-md-5 col-md-pull-7">
<img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div> </div>
<hr class="featurette-divider"> <hr class="featurette-divider">
@ -184,7 +185,7 @@
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div> </div>
</div> </div>
@ -207,7 +208,8 @@
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script> <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../../assets/js/vendor/holder.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body> </body>

2
examples/cover/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">
@ -73,7 +74,6 @@
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body> </body>

4
examples/dashboard/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">
@ -239,7 +240,8 @@
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script> <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../../assets/js/vendor/holder.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body> </body>

1
examples/grid/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">

3
examples/jumbotron-narrow/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">
@ -30,7 +31,7 @@
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header clearfix">
<nav> <nav>
<ul class="nav nav-pills pull-right"> <ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>

2
examples/jumbotron-narrow/jumbotron-narrow.css
View File

@ -14,11 +14,11 @@ body {
/* Custom page header */ /* Custom page header */
.header { .header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
/* Make the masthead heading the same height as the navigation */ /* Make the masthead heading the same height as the navigation */
.header h3 { .header h3 {
padding-bottom: 19px;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
line-height: 40px; line-height: 40px;

1
examples/jumbotron/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">

3
examples/justified-nav/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">
@ -31,6 +32,8 @@
<div class="container"> <div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<div class="masthead"> <div class="masthead">
<h3 class="text-muted">Project name</h3> <h3 class="text-muted">Project name</h3>
<nav> <nav>

1
examples/navbar-fixed-top/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">

1
examples/navbar-static-top/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">

1
examples/navbar/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">

13
examples/non-responsive/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- The above 2 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@ -35,15 +36,11 @@
<nav class="navbar navbar-default navbar-fixed-top"> <nav class="navbar navbar-default navbar-fixed-top">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <!-- The mobile navbar-toggle button can be safely removed since you do not need it in a non-responsive implementation -->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
</div> </div>
<div id="navbar" class="navbar-collapse collapse"> <!-- Note that the .navbar-collapse and .collapse classes have been removed from the #navbar -->
<div id="navbar">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
@ -84,7 +81,7 @@
</div> </div>
<h3>What changes</h3> <h3>What changes</h3>
<p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.</p> <p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and changed the navbar to prevent collapsing, and are basically good to go.</p>
<h3>Regarding navbars</h3> <h3>Regarding navbars</h3>
<p>As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar.</p> <p>As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar.</p>

2
examples/non-responsive/non-responsive.css
View File

@ -32,7 +32,7 @@ body,
/* Non-responsive overrides /* Non-responsive overrides
* *
* Utilitze the following CSS to disable the responsive-ness of the container, * Utilize the following CSS to disable the responsive-ness of the container,
* grid system, and navbar. * grid system, and navbar.
*/ */

1
examples/offcanvas/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">

1
examples/signin/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">

1
examples/starter-template/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">

1
examples/sticky-footer-navbar/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">

1
examples/sticky-footer/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">

3
examples/theme/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">
@ -206,7 +207,7 @@
<tr> <tr>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>@getbootstrap</td> <td>@TwBootstrap</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>

1
examples/tooltip-viewport/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico"> <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

145
getting-started/index.html
View File

@ -107,48 +107,48 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<h1 id="download" class="page-header">Download</h1> <h1 id="download" class="page-header">Download</h1>
<p class="lead">Bootstrap (currently v3.3.2) 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.3.4) 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"> <div class="row bs-downloads">
<div class="col-sm-4"> <div class="col-sm-4">
<h3 id="download-bootstrap">Bootstrap</h3> <h3 id="download-bootstrap">Bootstrap</h3>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<p> <p>
<a href="https://github.com/twbs/bootstrap/releases/download/v3.3.2/bootstrap-3.3.2-dist.zip" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a> <a href="https://github.com/twbs/bootstrap/releases/download/v3.3.4/bootstrap-3.3.4-dist.zip" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
</p> </p>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h3 id="download-source">Source code</h3> <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="#grunt">some setup.</a></strong></p> <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> <p>
<a href="https://github.com/twbs/bootstrap/archive/v3.3.2.zip" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a> <a href="https://github.com/twbs/bootstrap/archive/v3.3.4.zip" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
</p> </p>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h3 id="download-sass">Sass</h3> <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> <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>
<p> <p>
<a href="https://github.com/twbs/bootstrap-sass/archive/v3.3.3.tar.gz" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a> <a href="https://github.com/twbs/bootstrap-sass/archive/v3.3.4.tar.gz" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a>
</p> </p>
</div> </div>
</div> </div>
<h3 id="download-cdn">Bootstrap CDN</h3> <h2 id="download-cdn">Bootstrap CDN</h2>
<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> <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="language-html" data-lang="html"><span class="c">&lt;!-- Latest compiled and minified CSS --&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="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">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</span><span class="nt">&gt;</span> <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Optional theme --&gt;</span> <span class="c">&lt;!-- Optional theme --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"</span><span class="nt">&gt;</span> <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Latest compiled and minified JavaScript --&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">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"</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">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></div>
<h3 id="download-bower">Install with Bower</h3> <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="http://bower.io">Bower</a>:</p>
<div class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">$ </span>bower install bootstrap</code></pre></div> <div class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">$ </span>bower install bootstrap</code></pre></div>
<h3 id="download-npm">Install with npm</h3> <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>
<div class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">$ </span>npm install bootstrap</code></pre></div> <div class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">$ </span>npm install bootstrap</code></pre></div>
<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><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>
@ -158,7 +158,7 @@
<li><code>style</code> - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)</li> <li><code>style</code> - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)</li>
</ul> </ul>
<h3 id="download-autoprefixer">Autoprefixer required for Less/Sass</h3> <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="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>
</div> </div>
@ -169,7 +169,7 @@
<div class="bs-callout bs-callout-warning" id="jquery-required"> <div class="bs-callout bs-callout-warning" id="jquery-required">
<h4>jQuery required</h4> <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.3.2/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.3.4/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
</div> </div>
<h2 id="whats-included-precompiled">Precompiled Bootstrap</h2> <h2 id="whats-included-precompiled">Precompiled Bootstrap</h2>
@ -289,20 +289,20 @@ Copy any changes made here over to the README too. -->
<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> <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> <h2 id="examples-framework">Using the framework</h2>
<div class="row bs-examples"> <div class="row bs-examples">
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/starter-template/"> <a class="thumbnail" href="../examples/starter-template/">
<img src="../examples/screenshots/starter-template.jpg" alt="Starter template example"> <img src="../examples/screenshots/starter-template.jpg" alt="Starter template example">
</a> </a>
<h4>Starter template</h4> <h3>Starter template</h3>
<p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p> <p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
</div> </div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/theme/"> <a class="thumbnail" href="../examples/theme/">
<img src="../examples/screenshots/theme.jpg" alt="Bootstrap theme example"> <img src="../examples/screenshots/theme.jpg" alt="Bootstrap theme example">
</a> </a>
<h4>Bootstrap theme</h4> <h3>Bootstrap theme</h3>
<p>Load the optional Bootstrap theme for a visually enhanced experience.</p> <p>Load the optional Bootstrap theme for a visually enhanced experience.</p>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs"></div>
@ -311,14 +311,14 @@ Copy any changes made here over to the README too. -->
<a class="thumbnail" href="../examples/grid/"> <a class="thumbnail" href="../examples/grid/">
<img src="../examples/screenshots/grid.jpg" alt="Multiple grids example"> <img src="../examples/screenshots/grid.jpg" alt="Multiple grids example">
</a> </a>
<h4>Grids</h4> <h3>Grids</h3>
<p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p> <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div> </div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/jumbotron/"> <a class="thumbnail" href="../examples/jumbotron/">
<img src="../examples/screenshots/jumbotron.jpg" alt="Jumbotron example"> <img src="../examples/screenshots/jumbotron.jpg" alt="Jumbotron example">
</a> </a>
<h4>Jumbotron</h4> <h3>Jumbotron</h3>
<p>Build around the jumbotron with a navbar and some basic grid columns.</p> <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs"></div>
@ -327,25 +327,25 @@ Copy any changes made here over to the README too. -->
<a class="thumbnail" href="../examples/jumbotron-narrow/"> <a class="thumbnail" href="../examples/jumbotron-narrow/">
<img src="../examples/screenshots/jumbotron-narrow.jpg" alt="Narrow jumbotron example"> <img src="../examples/screenshots/jumbotron-narrow.jpg" alt="Narrow jumbotron example">
</a> </a>
<h4>Narrow jumbotron</h4> <h3>Narrow jumbotron</h3>
<p>Build a more custom page by narrowing the default container and jumbotron.</p> <p>Build a more custom page by narrowing the default container and jumbotron.</p>
</div> </div>
</div> </div>
<h3 id="examples-navbars">Navbars in action</h3> <h2 id="examples-navbars">Navbars in action</h2>
<div class="row bs-examples"> <div class="row bs-examples">
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/navbar/"> <a class="thumbnail" href="../examples/navbar/">
<img src="../examples/screenshots/navbar.jpg" alt="Navbar example"> <img src="../examples/screenshots/navbar.jpg" alt="Navbar example">
</a> </a>
<h4>Navbar</h4> <h3>Navbar</h3>
<p>Super basic template that includes the navbar along with some additional content.</p> <p>Super basic template that includes the navbar along with some additional content.</p>
</div> </div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/navbar-static-top/"> <a class="thumbnail" href="../examples/navbar-static-top/">
<img src="../examples/screenshots/navbar-static.jpg" alt="Static top navbar example"> <img src="../examples/screenshots/navbar-static.jpg" alt="Static top navbar example">
</a> </a>
<h4>Static top navbar</h4> <h3>Static top navbar</h3>
<p>Super basic template with a static top navbar along with some additional content.</p> <p>Super basic template with a static top navbar along with some additional content.</p>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs"></div>
@ -354,25 +354,25 @@ Copy any changes made here over to the README too. -->
<a class="thumbnail" href="../examples/navbar-fixed-top/"> <a class="thumbnail" href="../examples/navbar-fixed-top/">
<img src="../examples/screenshots/navbar-fixed.jpg" alt="Fixed navbar example"> <img src="../examples/screenshots/navbar-fixed.jpg" alt="Fixed navbar example">
</a> </a>
<h4>Fixed navbar</h4> <h3>Fixed navbar</h3>
<p>Super basic template with a fixed top navbar along with some additional content.</p> <p>Super basic template with a fixed top navbar along with some additional content.</p>
</div> </div>
</div> </div>
<h3 id="examples-custom">Custom components</h3> <h2 id="examples-custom">Custom components</h2>
<div class="row bs-examples"> <div class="row bs-examples">
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/cover/"> <a class="thumbnail" href="../examples/cover/">
<img src="../examples/screenshots/cover.jpg" alt="A one-page template example"> <img src="../examples/screenshots/cover.jpg" alt="A one-page template example">
</a> </a>
<h4>Cover</h4> <h3>Cover</h3>
<p>A one-page template for building simple and beautiful home pages.</p> <p>A one-page template for building simple and beautiful home pages.</p>
</div> </div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/carousel/"> <a class="thumbnail" href="../examples/carousel/">
<img src="../examples/screenshots/carousel.jpg" alt="Carousel example"> <img src="../examples/screenshots/carousel.jpg" alt="Carousel example">
</a> </a>
<h4>Carousel</h4> <h3>Carousel</h3>
<p>Customize the navbar and carousel, then add some new components.</p> <p>Customize the navbar and carousel, then add some new components.</p>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs"></div>
@ -381,14 +381,14 @@ Copy any changes made here over to the README too. -->
<a class="thumbnail" href="../examples/blog/"> <a class="thumbnail" href="../examples/blog/">
<img src="../examples/screenshots/blog.jpg" alt="Blog layout example"> <img src="../examples/screenshots/blog.jpg" alt="Blog layout example">
</a> </a>
<h4>Blog</h4> <h3>Blog</h3>
<p>Simple two-column blog layout with custom navigation, header, and type.</p> <p>Simple two-column blog layout with custom navigation, header, and type.</p>
</div> </div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/dashboard/"> <a class="thumbnail" href="../examples/dashboard/">
<img src="../examples/screenshots/dashboard.jpg" alt="Dashboard example"> <img src="../examples/screenshots/dashboard.jpg" alt="Dashboard example">
</a> </a>
<h4>Dashboard</h4> <h3>Dashboard</h3>
<p>Basic structure for an admin dashboard with fixed sidebar and navbar.</p> <p>Basic structure for an admin dashboard with fixed sidebar and navbar.</p>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs"></div>
@ -397,14 +397,14 @@ Copy any changes made here over to the README too. -->
<a class="thumbnail" href="../examples/signin/"> <a class="thumbnail" href="../examples/signin/">
<img src="../examples/screenshots/sign-in.jpg" alt="Sign-in page example"> <img src="../examples/screenshots/sign-in.jpg" alt="Sign-in page example">
</a> </a>
<h4>Sign-in page</h4> <h3>Sign-in page</h3>
<p>Custom form layout and design for a simple sign in form.</p> <p>Custom form layout and design for a simple sign in form.</p>
</div> </div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/justified-nav/"> <a class="thumbnail" href="../examples/justified-nav/">
<img src="../examples/screenshots/justified-nav.jpg" alt="Justified nav example"> <img src="../examples/screenshots/justified-nav.jpg" alt="Justified nav example">
</a> </a>
<h4>Justified nav</h4> <h3>Justified nav</h3>
<p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too Safari 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>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs"></div>
@ -413,32 +413,32 @@ Copy any changes made here over to the README too. -->
<a class="thumbnail" href="../examples/sticky-footer/"> <a class="thumbnail" href="../examples/sticky-footer/">
<img src="../examples/screenshots/sticky-footer.jpg" alt="Sticky footer example"> <img src="../examples/screenshots/sticky-footer.jpg" alt="Sticky footer example">
</a> </a>
<h4>Sticky footer</h4> <h3>Sticky footer</h3>
<p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p> <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
</div> </div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/sticky-footer-navbar/"> <a class="thumbnail" href="../examples/sticky-footer-navbar/">
<img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="Sticky footer with navbar example"> <img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="Sticky footer with navbar example">
</a> </a>
<h4>Sticky footer with navbar</h4> <h3>Sticky footer with navbar</h3>
<p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p> <p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p>
</div> </div>
</div> </div>
<h3 id="examples-experiments">Experiments</h3> <h2 id="examples-experiments">Experiments</h2>
<div class="row bs-examples"> <div class="row bs-examples">
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/non-responsive/"> <a class="thumbnail" href="../examples/non-responsive/">
<img src="../examples/screenshots/non-responsive.jpg" alt="Non-responsive example"> <img src="../examples/screenshots/non-responsive.jpg" alt="Non-responsive example">
</a> </a>
<h4>Non-responsive Bootstrap</h4> <h3>Non-responsive Bootstrap</h3>
<p>Easily disable the responsiveness of Bootstrap <a href="#disable-responsive">per our docs</a>.</p> <p>Easily disable the responsiveness of Bootstrap <a href="#disable-responsive">per our docs</a>.</p>
</div> </div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/offcanvas/"> <a class="thumbnail" href="../examples/offcanvas/">
<img src="../examples/screenshots/offcanvas.jpg" alt="Off-canvas navigation example"> <img src="../examples/screenshots/offcanvas.jpg" alt="Off-canvas navigation example">
</a> </a>
<h4>Offcanvas</h4> <h3>Off-canvas</h3>
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p> <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
</div> </div>
</div> </div>
@ -471,7 +471,7 @@ Copy any changes made here over to the README too. -->
<p class="lead">Bootstrap automatically adapts your pages for various screen sizes. <p class="lead">Bootstrap automatically adapts your pages for various screen sizes.
Here's how to disable this feature so your page works like <a href="../examples/non-responsive/">this non-responsive example</a>.</p> Here's how to disable this feature so your page works like <a href="../examples/non-responsive/">this non-responsive example</a>.</p>
<h3>Steps to disable page responsiveness</h3> <h2>Steps to disable page responsiveness</h2>
<ol> <ol>
<li>Omit the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li> <li>Omit the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../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> <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>
@ -481,7 +481,7 @@ Copy any changes made here over to the README too. -->
<p>You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). <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> 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>We've applied these steps to an example. Read its source code to see the specific changes implemented.</p>
<p> <p>
<a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a> <a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a>
@ -499,7 +499,7 @@ Copy any changes made here over to the README too. -->
<h1 id="support" class="page-header">Browser and device support</h1> <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> <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>
<h3 id="support-browsers">Supported browsers</h3> <h2 id="support-browsers">Supported browsers</h2>
<p>Specifically, we support the <strong>latest versions</strong> of the following browsers and platforms. On Windows, <strong>we support Internet Explorer 8-11</strong>. More specific support information is provided below.</p> <p>Specifically, we support the <strong>latest versions</strong> of the following browsers and platforms. On Windows, <strong>we support Internet Explorer 8-11</strong>. More specific support information is provided below.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
@ -550,7 +550,7 @@ Copy any changes made here over to the README too. -->
<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>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> <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> <h2 id="support-ie8-ie9">Internet Explorer 8 and 9</h2>
<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> <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>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
@ -591,29 +591,29 @@ Copy any changes made here over to the README too. -->
<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="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
<h3 id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h3> <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> <p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
<h4 id="respond-js-x-domain">Respond.js and cross-domain CSS</h4> <h3 id="respond-js-x-domain">Respond.js and cross-domain CSS</h3>
<p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p> <p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
<h4 id="respond-file-proto">Respond.js and <code>file://</code></h4> <h3 id="respond-file-proto">Respond.js and <code>file://</code></h3>
<p>Due to browser security rules, Respond.js doesn't work with pages viewed via the <code>file://</code> protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p> <p>Due to browser security rules, Respond.js doesn't work with pages viewed via the <code>file://</code> protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
<h4 id="respond-import">Respond.js and <code>@import</code></h4> <h3 id="respond-import">Respond.js and <code>@import</code></h3>
<p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p> <p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
<h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3> <h2 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h2>
<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> <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> <h2 id="support-ie8-font-face">Internet Explorer 8 and @font-face</h2>
<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> <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> <h2 id="support-ie-compatibility-modes">IE Compatibility modes</h2>
<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> <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="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">&gt;</span></code></pre></div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</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>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>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> <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> <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> <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="language-scss" data-lang="scss"><span class="k">@-ms-viewport</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span></code></pre></div> <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@-ms-viewport</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</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> <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>
@ -635,25 +635,28 @@ Copy any changes made here over to the README too. -->
<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="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 all of Bootstrap's documentation and examples as a demonstration.</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> <h2 id="support-safari-percentages">Safari percent rounding</h2>
<p>The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:</p> <p>The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:</p>
<ul> <ul>
<li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li> <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> <li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
</ul> </ul>
<h3 id="support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</h3> <h2 id="support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</h2>
<h4>Overflow and scrolling</h4> <h3>Overflow and scrolling</h3>
<p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</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>&lt;body&gt;</code> content will begin to scroll.</p> <p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</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>&lt;body&gt;</code> content will begin to scroll.</p>
<h4>Virtual keyboards</h4> <h3>Virtual keyboards</h3>
<p>Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p> <p>Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
<h4>Navbar Dropdowns</h4> <h3>Navbar Dropdowns</h3>
<p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or <a href="https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile">any other element which will fire a click event in iOS</a>).</p> <p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or <a href="https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile">any other element which will fire a click event in iOS</a>).</p>
<h3 id="support-browser-zooming">Browser zooming</h3> <h2 id="support-browser-zooming">Browser zooming</h2>
<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> <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>
<h3 id="support-printing">Printing</h3> <h2 id="support-sticky-hover-mobile">Sticky <code>:hover</code>/<code>:focus</code> on mobile</h2>
<p>Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make <code>:hover</code> "sticky". In other words, <code>:hover</code> styles start applying after tapping an element and only stop applying after the user taps some other element. This can cause Bootstrap's <code>:hover</code> states to become unwantedly "stuck" on such browsers. Some mobile browsers also make <code>:focus</code> similarly sticky. There is currently no simple workaround for these issues other than removing such styles entirely.</p>
<h2 id="support-printing">Printing</h2>
<p>Even in some modern browsers, printing can be quirky.</p> <p>Even in some modern browsers, printing can be quirky.</p>
<p>In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p> <p>In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p>
<ul> <ul>
@ -668,9 +671,9 @@ Copy any changes made here over to the README too. -->
<span class="p">}</span> <span class="p">}</span>
<span class="p">}</span></code></pre></div> <span class="p">}</span></code></pre></div>
<h3 id="support-android-stock-browser">Android stock browser</h3> <h2 id="support-android-stock-browser">Android stock browser</h2>
<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> <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> <h3>Select menus</h3>
<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> <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="language-html" data-lang="html"><span class="nt">&lt;script&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script&gt;</span>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
@ -683,7 +686,7 @@ Copy any changes made here over to the README too. -->
<span class="nt">&lt;/script&gt;</span></code></pre></div> <span class="nt">&lt;/script&gt;</span></code></pre></div>
<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://jsbin.com/kuvoz/1">Check out this JS Bin demo.</a></p>
<h3 id="support-validators">Validators</h3> <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> <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>
<p>These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.</p> <p>These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.</p>
<p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p> <p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p>
@ -693,7 +696,7 @@ Copy any changes made here over to the README too. -->
<h1 id="third-parties" class="page-header">Third party support</h1> <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> <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 id="third-box-sizing">Box-sizing</h3> <h2 id="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 <a href="http://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p> <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 <a href="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> <p>Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).</p>
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="cm">/* Box-sizing resets <div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="cm">/* Box-sizing resets
@ -743,24 +746,29 @@ Copy any changes made here over to the README too. -->
<h1 id="accessibility" class="page-header">Accessibility</h1> <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> <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>
<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 <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</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="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>
<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>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>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;body&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#content"</span> <span class="na">class=</span><span class="s">"sr-only sr-only-focusable"</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">"#content"</span> <span class="na">class=</span><span class="s">"sr-only sr-only-focusable"</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">"container"</span> <span class="na">id=</span><span class="s">"content"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span> <span class="na">id=</span><span class="s">"content"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- The main page content --&gt;</span> <span class="c">&lt;!-- The main page content --&gt;</span>
<span class="nt">&lt;/div&gt;</span> <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> <h2>Nested headings</h2>
<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> <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>
<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="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>
<h3>Color contrast</h3> <h2>Color contrast</h2>
<p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href="../css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="../css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="../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="../css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="../css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="../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>
<h3>Additional resources</h3> <h2>Additional resources</h2>
<ul> <ul>
<li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li> <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="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome's Accessibility Developer Tools extension</a></li>
@ -774,12 +782,12 @@ Copy any changes made here over to the README too. -->
<h1 id="license-faqs" class="page-header">License FAQs</h1> <h1 id="license-faqs" class="page-header">License FAQs</h1>
<p class="lead">Bootstrap is released under the MIT license and is copyright 2015 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p> <p class="lead">Bootstrap is released under the MIT license and is copyright 2015 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> <ul>
<li>Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works</li> <li>Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works</li>
</ul> </ul>
<h4>It permits you to:</h4> <h2>It permits you to:</h2>
<ul> <ul>
<li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li> <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> <li>Use Bootstrap in packages or distributions that you create</li>
@ -787,7 +795,7 @@ Copy any changes made here over to the README too. -->
<li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li> <li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li>
</ul> </ul>
<h4>It forbids you to:</h4> <h2>It forbids you to:</h2>
<ul> <ul>
<li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li> <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> <li>Hold the creators or copyright holders of Bootstrap liable</li>
@ -796,7 +804,7 @@ Copy any changes made here over to the README too. -->
<li>Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question</li> <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> </ul>
<h4>It does not require you to:</h4> <h2>It does not require you to:</h2>
<ul> <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>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> <li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
@ -901,6 +909,7 @@ Copy any changes made here over to the README too. -->
<li><a href="#support-safari-percentages">Safari percent rounding</a></li> <li><a href="#support-safari-percentages">Safari percent rounding</a></li>
<li><a href="#support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</a></li> <li><a href="#support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</a></li>
<li><a href="#support-browser-zooming">Browser zooming</a></li> <li><a href="#support-browser-zooming">Browser zooming</a></li>
<li><a href="#support-sticky-hover-mobile">Sticky :hover/:focus on mobile</a></li>
<li><a href="#support-printing">Printing</a></li> <li><a href="#support-printing">Printing</a></li>
<li><a href="#support-android-stock-browser">Android stock browser</a></li> <li><a href="#support-android-stock-browser">Android stock browser</a></li>
<li><a href="#support-validators">Validators</a></li> <li><a href="#support-validators">Validators</a></li>
@ -957,7 +966,7 @@ Copy any changes made here over to the README too. -->
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Maintained by the <a href="https://github.com/orgs/twbs/people">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 rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p> <p>Code licensed under <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links text-muted"> <ul class="bs-docs-footer-links text-muted">
<li>Currently v3.3.2</li> <li>Currently v3.3.4</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>&middot;</li> <li>&middot;</li>

10
index.html
View File

@ -91,14 +91,14 @@
<!-- Page content of course! --> <!-- Page content of course! -->
<main class="bs-docs-masthead" id="content" role="main"> <main class="bs-docs-masthead" id="content" role="main" tabindex="-1">
<div class="container"> <div class="container">
<span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span> <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p> <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
<p class="lead"> <p class="lead">
<a href="getting-started#download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download 3.3.2');">Download Bootstrap</a> <a href="getting-started#download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download 3.3.4');">Download Bootstrap</a>
</p> </p>
<p class="version">Currently v3.3.2</p> <p class="version">Currently v3.3.4</p>
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div> </div>
@ -203,9 +203,9 @@
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Maintained by the <a href="https://github.com/orgs/twbs/people">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> <p>Code licensed under <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links text-muted"> <ul class="bs-docs-footer-links text-muted">
<li>Currently v3.3.2</li> <li>Currently v3.3.4</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>&middot;</li> <li>&middot;</li>

298
javascript/index.html
View File

@ -96,7 +96,7 @@
<!-- Docs page layout --> <!-- Docs page layout -->
<div class="bs-docs-header" id="content"> <div class="bs-docs-header" id="content" tabindex="-1">
<div class="container"> <div class="container">
<h1>JavaScript</h1> <h1>JavaScript</h1>
<p>Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p> <p>Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p>
@ -112,7 +112,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<h1 id="js-overview" class="page-header">Overview</h1> <h1 id="js-overview" class="page-header">Overview</h1>
<h3 id="js-individual-compiled">Individual or compiled</h3> <h2 id="js-individual-compiled">Individual or compiled</h2>
<p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p> <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p>
<div class="bs-callout bs-callout-danger" id="callout-overview-not-both"> <div class="bs-callout bs-callout-danger" id="callout-overview-not-both">
@ -122,10 +122,10 @@
<div class="bs-callout bs-callout-danger" id="callout-overview-dependencies"> <div class="bs-callout bs-callout-danger" id="callout-overview-dependencies">
<h4>Plugin dependencies</h4> <h4>Plugin dependencies</h4>
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v3.3.2/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p> <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v3.3.4/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
</div> </div>
<h3 id="js-data-attrs">Data attributes</h3> <h2 id="js-data-attrs">Data attributes</h2>
<p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p> <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:</p> <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:</p>
@ -139,7 +139,7 @@
<p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p> <p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p>
</div> </div>
<h3 id="js-programmatic-api">Programmatic API</h3> <h2 id="js-programmatic-api">Programmatic API</h2>
<p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p> <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.btn.danger'</span><span class="p">).</span><span class="nx">button</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'fat'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.btn.danger'</span><span class="p">).</span><span class="nx">button</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'fat'</span><span class="p">)</span></code></pre></div>
@ -151,15 +151,15 @@
<p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p> <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p>
<h4>Default settings</h4> <h4>Default settings</h4>
<p>You can change the default settings for a plugin by modifying the plugin's <code>Constructor.DEFAULTS</code> object:<p> <p>You can change the default settings for a plugin by modifying the plugin's <code>Constructor.DEFAULTS</code> object:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">modal</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">DEFAULTS</span><span class="p">.</span><span class="nx">keyboard</span> <span class="o">=</span> <span class="kc">false</span> <span class="c1">// changes default for the modal plugin's `keyboard` option to false</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">modal</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">DEFAULTS</span><span class="p">.</span><span class="nx">keyboard</span> <span class="o">=</span> <span class="kc">false</span> <span class="c1">// changes default for the modal plugin's `keyboard` option to false</span></code></pre></div>
<h3 id="js-noconflict">No conflict</h3> <h2 id="js-noconflict">No conflict</h2>
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p> <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">bootstrapButton</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">button</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">()</span> <span class="c1">// return $.fn.button to previously assigned value</span> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">bootstrapButton</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">button</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">()</span> <span class="c1">// return $.fn.button to previously assigned value</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapBtn</span> <span class="o">=</span> <span class="nx">bootstrapButton</span> <span class="c1">// give $().bootstrapBtn the Bootstrap functionality</span></code></pre></div> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapBtn</span> <span class="o">=</span> <span class="nx">bootstrapButton</span> <span class="c1">// give $().bootstrapBtn the Bootstrap functionality</span></code></pre></div>
<h3 id="js-events">Events</h3> <h2 id="js-events">Events</h2>
<p>Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is triggered on the completion of an action.</p> <p>Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is triggered on the completion of an action.</p>
<p>As of 3.0.0, all Bootstrap events are namespaced.</p> <p>As of 3.0.0, all Bootstrap events are namespaced.</p>
<p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p> <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
@ -167,11 +167,11 @@
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span> <span class="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="c1">// stops modal from being shown</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span> <span class="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="c1">// stops modal from being shown</span>
<span class="p">})</span></code></pre></div> <span class="p">})</span></code></pre></div>
<h3 id="js-version-nums">Version numbers</h3> <h2 id="js-version-nums">Version numbers</h2>
<p>The version of each of Bootstrap's jQuery plugins can be accessed via the <code>VERSION</code> property of the plugin's constructor. For example, for the tooltip plugin:</p> <p>The version of each of Bootstrap's jQuery plugins can be accessed via the <code>VERSION</code> property of the plugin's constructor. For example, for the tooltip plugin:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">VERSION</span> <span class="c1">// =&gt; "3.3.2"</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">VERSION</span> <span class="c1">// =&gt; "3.3.4"</span></code></pre></div>
<h3 id="js-disabled">No special fallbacks when JavaScript is disabled</h3> <h2 id="js-disabled">No special fallbacks when JavaScript is disabled</h2>
<p>Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code>&lt;noscript&gt;</code></a> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.</p> <p>Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code>&lt;noscript&gt;</code></a> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.</p>
<div class="bs-callout bs-callout-warning" id="callout-third-party-libs"> <div class="bs-callout bs-callout-warning" id="callout-third-party-libs">
@ -183,9 +183,9 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<h1 id="transitions" class="page-header">Transitions <small>transition.js</small></h1> <h1 id="transitions" class="page-header">Transitions <small>transition.js</small></h1>
<h3>About transitions</h3> <h2>About transitions</h2>
<p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this&mdash;it's already there.</p> <p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this&mdash;it's already there.</p>
<h3>What's inside</h3> <h2>What's inside</h2>
<p>Transition.js is a basic helper for <code>transitionEnd</code> events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.</p> <p>Transition.js is a basic helper for <code>transitionEnd</code> events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.</p>
</div> </div>
@ -295,7 +295,7 @@
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
</div><!-- /.modal --> </div><!-- /.modal -->
<div class="bs-example" style="padding-bottom: 24px;"> <div class="bs-example bs-example-padded-bottom">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal Launch demo modal
</button> </button>
@ -399,9 +399,102 @@
... ...
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h2 id="modals-grid-system">Using the grid system</h2>
<p>To take advantage of the Bootstrap grid system within a modal, just nest <code>.container-fluid</code> within the <code>.modal-body</code> and then use the normal grid system classes within this container.</p>
<!-- sample modal content -->
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="gridModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="bs-example bs-example-padded-bottom">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
Launch demo modal
</button>
</div><!-- /example -->
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"gridSystemModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"gridSystemModalLabel"</span><span class="nt">&gt;</span>Modal title<span class="nt">&lt;/h4&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4 col-md-offset-4"</span><span class="nt">&gt;</span>.col-md-4 .col-md-offset-4<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3 col-md-offset-3"</span><span class="nt">&gt;</span>.col-md-3 .col-md-offset-3<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-2 col-md-offset-4"</span><span class="nt">&gt;</span>.col-md-2 .col-md-offset-4<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6 col-md-offset-3"</span><span class="nt">&gt;</span>.col-md-6 .col-md-offset-3<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>
Level 1: .col-sm-9
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-8 col-sm-6"</span><span class="nt">&gt;</span>
Level 2: .col-xs-8 .col-sm-6
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-4 col-sm-6"</span><span class="nt">&gt;</span>
Level 2: .col-xs-4 .col-sm-6
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- /.modal-content --&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- /.modal-dialog --&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- /.modal --&gt;</span></code></pre></div>
<h2 id="modals-related-target">Varying modal content based on trigger button</h2> <h2 id="modals-related-target">Varying modal content based on trigger button</h2>
<p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p> <p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
<div class="bs-example" style="padding-bottom: 24px;"> <div class="bs-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
@ -489,12 +582,12 @@
<h3 id="modals-options">Options</h3> <h3 id="modals-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped js-options-table">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th>Name</th>
<th style="width: 50px;">type</th> <th>type</th>
<th style="width: 50px;">default</th> <th>default</th>
<th>description</th> <th>description</th>
</tr> </tr>
</thead> </thead>
@ -533,31 +626,37 @@
<h3 id="modals-methods">Methods</h3> <h3 id="modals-methods">Methods</h3>
<h4>.modal(options)</h4> <h4><code>.modal(options)</code></h4>
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p> <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span>
<span class="na">keyboard</span><span class="p">:</span> <span class="kc">false</span> <span class="na">keyboard</span><span class="p">:</span> <span class="kc">false</span>
<span class="p">})</span></code></pre></div> <span class="p">})</span></code></pre></div>
<h4>.modal('toggle')</h4> <h4><code>.modal('toggle')</code></h4>
<p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p> <p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre></div>
<h4>.modal('show')</h4> <h4><code>.modal('show')</code></h4>
<p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p> <p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></div>
<h4>.modal('hide')</h4> <h4><code>.modal('hide')</code></h4>
<p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p> <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre></div>
<h4>.modal('handleUpdate')</h4>
<p>Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.</p>
<p>Only needed when the height of the modal changes while it is open.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'handleUpdate'</span><span class="p">)</span></code></pre></div>
<h3 id="modals-events">Events</h3> <h3 id="modals-events">Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
<p>All modal events are fired at the modal itself (i.e. at the <code>&lt;div class="modal"&gt;</code>).</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped bs-events-table"> <table class="table table-bordered table-striped bs-events-table">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th>Event Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -745,7 +844,7 @@
<p><em>None</em></p> <p><em>None</em></p>
<h3 id="dropdowns-methods">Methods</h3> <h3 id="dropdowns-methods">Methods</h3>
<h4>$().dropdown('toggle')</h4> <h4><code>$().dropdown('toggle')</code></h4>
<p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p> <p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
<h3 id="dropdowns-events">Events</h3> <h3 id="dropdowns-events">Events</h3>
@ -755,7 +854,7 @@
<table class="table table-bordered table-striped bs-events-table"> <table class="table table-bordered table-striped bs-events-table">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th>Event Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -858,9 +957,9 @@
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span> <div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
<span class="p">}</span></code></pre></div> <span class="p">}</span></code></pre></div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;body</span> <span class="na">data-spy=</span><span class="s">"scroll"</span> <span class="na">data-target=</span><span class="s">".navbar-example"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;body</span> <span class="na">data-spy=</span><span class="s">"scroll"</span> <span class="na">data-target=</span><span class="s">"#navbar-example"</span><span class="nt">&gt;</span>
... ...
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-example"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"navbar-example"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span> <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
... ...
<span class="nt">&lt;/ul&gt;</span> <span class="nt">&lt;/ul&gt;</span>
@ -870,11 +969,11 @@
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p> <p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">({</span> <span class="na">target</span><span class="p">:</span> <span class="s1">'.navbar-example'</span> <span class="p">})</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">({</span> <span class="na">target</span><span class="p">:</span> <span class="s1">'#navbar-example'</span> <span class="p">})</span></code></pre></div>
<h3 id="scrollspy-methods">Methods</h3> <h3 id="scrollspy-methods">Methods</h3>
<h4>.scrollspy('refresh')</h4> <h4><code>.scrollspy('refresh')</code></h4>
<p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p> <p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'[data-spy="scroll"]'</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'[data-spy="scroll"]'</span><span class="p">).</span><span class="nx">each</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">$spy</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">)</span> <span class="kd">var</span> <span class="nx">$spy</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">)</span>
@ -884,12 +983,12 @@
<h3 id="scrollspy-options">Options</h3> <h3 id="scrollspy-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped js-options-table">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th>Name</th>
<th style="width: 100px;">type</th> <th>type</th>
<th style="width: 50px;">default</th> <th>default</th>
<th>description</th> <th>description</th>
</tr> </tr>
</thead> </thead>
@ -909,7 +1008,7 @@
<table class="table table-bordered table-striped bs-events-table"> <table class="table table-bordered table-striped bs-events-table">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th>Event Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -1012,7 +1111,7 @@
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="tabs-methods">Methods</h3> <h3 id="tabs-methods">Methods</h3>
<h4>$().tab</h4> <h4><code>$().tab</code></h4>
<p> <p>
Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM. Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
</p> </p>
@ -1049,7 +1148,7 @@
<table class="table table-bordered table-striped bs-events-table"> <table class="table table-bordered table-striped bs-events-table">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th>Event Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -1183,12 +1282,12 @@
<h3 id="tooltips-options">Options</h3> <h3 id="tooltips-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped js-options-table">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th>Name</th>
<th style="width: 100px;">Type</th> <th>Type</th>
<th style="width: 50px;">Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -1282,23 +1381,23 @@
<h3 id="tooltips-methods">Methods</h3> <h3 id="tooltips-methods">Methods</h3>
<h4>$().tooltip(options)</h4> <h4><code>$().tooltip(options)</code></h4>
<p>Attaches a tooltip handler to an element collection.</p> <p>Attaches a tooltip handler to an element collection.</p>
<h4>.tooltip('show')</h4> <h4><code>.tooltip('show')</code></h4>
<p>Reveals an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown</strong> (i.e. before the <code>shown.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.</p> <p>Reveals an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown</strong> (i.e. before the <code>shown.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></div>
<h4>.tooltip('hide')</h4> <h4><code>.tooltip('hide')</code></h4>
<p>Hides an element's tooltip. <strong>Returns to the caller before the tooltip has actually been hidden</strong> (i.e. before the <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip.</p> <p>Hides an element's tooltip. <strong>Returns to the caller before the tooltip has actually been hidden</strong> (i.e. before the <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre></div>
<h4>.tooltip('toggle')</h4> <h4><code>.tooltip('toggle')</code></h4>
<p>Toggles an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.tooltip</code> or <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip.</p> <p>Toggles an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.tooltip</code> or <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre></div>
<h4>.tooltip('destroy')</h4> <h4><code>.tooltip('destroy')</code></h4>
<p>Hides and destroys an element's tooltip.</p> <p>Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using <a href="#tooltips-options">the <code>selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">)</span></code></pre></div>
<h3 id="tooltips-events">Events</h3> <h3 id="tooltips-events">Events</h3>
@ -1306,7 +1405,7 @@
<table class="table table-bordered table-striped bs-events-table"> <table class="table table-bordered table-striped bs-events-table">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th>Event Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -1411,7 +1510,7 @@
</div> </div>
<h3>Live demo</h3> <h3>Live demo</h3>
<div class="bs-example" style="padding-bottom: 24px;"> <div class="bs-example bs-example-padded-bottom">
<button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-danger"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">title=</span><span class="s">"Popover title"</span> <span class="na">data-content=</span><span class="s">"And here's some amazing content. It's very engaging. Right?"</span><span class="nt">&gt;</span>Click to toggle popover<span class="nt">&lt;/button&gt;</span></code></pre></div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-danger"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">title=</span><span class="s">"Popover title"</span> <span class="na">data-content=</span><span class="s">"And here's some amazing content. It's very engaging. Right?"</span><span class="nt">&gt;</span>Click to toggle popover<span class="nt">&lt;/button&gt;</span></code></pre></div>
@ -1454,9 +1553,9 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<p>Use the <code>focus</code> trigger to dismiss popovers on the next click that the user makes.</p> <p>Use the <code>focus</code> trigger to dismiss popovers on the next click that the user makes.</p>
<div class="bs-callout bs-callout-danger" id="callout-popover-dismiss-click"> <div class="bs-callout bs-callout-danger" id="callout-popover-dismiss-click">
<h4>Specific markup required for dismiss-on-next-click</h4> <h4>Specific markup required for dismiss-on-next-click</h4>
<p>For proper cross-browser and cross-platform behavior, you must use the <code>&lt;a&gt;</code> tag, <i>not</i> the <code>&lt;button&gt;</code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attribute.</p> <p>For proper cross-browser and cross-platform behavior, you must use the <code>&lt;a&gt;</code> tag, <i>not</i> the <code>&lt;button&gt;</code> tag, and you also must include the <code>role="button"</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attributes.</p>
</div> </div>
<div class="bs-example" style="padding-bottom: 24px;"> <div class="bs-example bs-example-padded-bottom">
<a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> <a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">tabindex=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-danger"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-trigger=</span><span class="s">"focus"</span> <span class="na">title=</span><span class="s">"Dismissible popover"</span> <span class="na">data-content=</span><span class="s">"And here's some amazing content. It's very engaging. Right?"</span><span class="nt">&gt;</span>Dismissible popover<span class="nt">&lt;/a&gt;</span></code></pre></div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">tabindex=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-danger"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-trigger=</span><span class="s">"focus"</span> <span class="na">title=</span><span class="s">"Dismissible popover"</span> <span class="na">data-content=</span><span class="s">"And here's some amazing content. It's very engaging. Right?"</span><span class="nt">&gt;</span>Dismissible popover<span class="nt">&lt;/a&gt;</span></code></pre></div>
@ -1469,12 +1568,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<h3 id="popovers-options">Options</h3> <h3 id="popovers-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped js-options-table js-options-table">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th>Name</th>
<th style="width: 100px;">Type</th> <th>Type</th>
<th style="width: 50px;">Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -1577,23 +1676,23 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
</div> </div>
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().popover(options)</h4> <h4><code>$().popover(options)</code></h4>
<p>Initializes popovers for an element collection.</p> <p>Initializes popovers for an element collection.</p>
<h4>.popover('show')</h4> <h4><code>.popover('show')</code></h4>
<p>Reveals an element's popover. <strong>Returns to the caller before the popover has actually been shown</strong> (i.e. before the <code>shown.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.</p> <p>Reveals an element's popover. <strong>Returns to the caller before the popover has actually been shown</strong> (i.e. before the <code>shown.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></div>
<h4>.popover('hide')</h4> <h4><code>.popover('hide')</code></h4>
<p>Hides an element's popover. <strong>Returns to the caller before the popover has actually been hidden</strong> (i.e. before the <code>hidden.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover.</p> <p>Hides an element's popover. <strong>Returns to the caller before the popover has actually been hidden</strong> (i.e. before the <code>hidden.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre></div>
<h4>.popover('toggle')</h4> <h4><code>.popover('toggle')</code></h4>
<p>Toggles an element's popover. <strong>Returns to the caller before the popover has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.popover</code> or <code>hidden.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover.</p> <p>Toggles an element's popover. <strong>Returns to the caller before the popover has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.popover</code> or <code>hidden.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre></div>
<h4>.popover('destroy')</h4> <h4><code>.popover('destroy')</code></h4>
<p>Hides and destroys an element's popover.</p> <p>Hides and destroys an element's popover. Popovers that use delegation (which are created using <a href="#popovers-options">the <code>selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">)</span></code></pre></div> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">)</span></code></pre></div>
<h3 id="popovers-events">Events</h3> <h3 id="popovers-events">Events</h3>
@ -1601,7 +1700,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<table class="table table-bordered table-striped bs-events-table"> <table class="table table-bordered table-striped bs-events-table">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th>Event Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -1666,10 +1765,10 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<h3 id="alerts-methods">Methods</h3> <h3 id="alerts-methods">Methods</h3>
<h4>$().alert()</h4> <h4><code>$().alert()</code></h4>
<p>Makes an alert listen for click events on descendant elements which have the <code>data-dismiss="alert"</code> attribute. (Not necessary when using the data-api's auto-initialization.)</p> <p>Makes an alert listen for click events on descendant elements which have the <code>data-dismiss="alert"</code> attribute. (Not necessary when using the data-api's auto-initialization.)</p>
<h4>$().alert('close')</h4> <h4><code>$().alert('close')</code></h4>
<p>Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.in</code> classes are present on the element, the alert will fade out before it is removed.</p> <p>Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.in</code> classes are present on the element, the alert will fade out before it is removed.</p>
@ -1679,7 +1778,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<table class="table table-bordered table-striped bs-events-table"> <table class="table table-bordered table-striped bs-events-table">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th>Event Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -1809,15 +1908,15 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<h2 id="buttons-methods">Methods</h2> <h2 id="buttons-methods">Methods</h2>
<h4><code>$().button('toggle')</code></h4>
<h4>$().button('toggle')</h4>
<p>Toggles push state. Gives the button the appearance that it has been activated.</p> <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
<h4>$().button('reset')</h4> <h4><code>$().button('reset')</code></h4>
<p>Resets button state - swaps text to original text.</p> <p>Resets button state - swaps text to original text.</p>
<h4>$().button(string)</h4> <h4><code>$().button(string)</code></h4>
<p>Swaps text to any data defined text state.</p> <p>Swaps text to any data defined text state.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"myStateButton"</span> <span class="na">data-complete-text=</span><span class="s">"finished!"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"myStateButton"</span> <span class="na">data-complete-text=</span><span class="s">"finished!"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span>
... ...
<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/button&gt;</span>
@ -2017,12 +2116,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<h3 id="collapse-options">Options</h3> <h3 id="collapse-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped js-options-table">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th>Name</th>
<th style="width: 50px;">type</th> <th>type</th>
<th style="width: 50px;">default</th> <th>default</th>
<th>description</th> <th>description</th>
</tr> </tr>
</thead> </thead>
@ -2045,19 +2144,19 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<h3 id="collapse-methods">Methods</h3> <h3 id="collapse-methods">Methods</h3>
<h4>.collapse(options)</h4> <h4><code>.collapse(options)</code></h4>
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>. <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCollapsible'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">({</span> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCollapsible'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">({</span>
<span class="na">toggle</span><span class="p">:</span> <span class="kc">false</span> <span class="na">toggle</span><span class="p">:</span> <span class="kc">false</span>
<span class="p">})</span></code></pre></div> <span class="p">})</span></code></pre></div>
<h4>.collapse('toggle')</h4> <h4><code>.collapse('toggle')</code></h4>
<p>Toggles a collapsible element to shown or hidden.</p> <p>Toggles a collapsible element to shown or hidden.</p>
<h4>.collapse('show')</h4> <h4><code>.collapse('show')</code></h4>
<p>Shows a collapsible element.</p> <p>Shows a collapsible element.</p>
<h4>.collapse('hide')</h4> <h4><code>.collapse('hide')</code></h4>
<p>Hides a collapsible element.</p> <p>Hides a collapsible element.</p>
<h3 id="collapse-events">Events</h3> <h3 id="collapse-events">Events</h3>
@ -2066,7 +2165,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<table class="table table-bordered table-striped bs-events-table"> <table class="table table-bordered table-striped bs-events-table">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th>Event Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -2248,12 +2347,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<h3 id="carousel-options">Options</h3> <h3 id="carousel-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped js-options-table">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th>Name</th>
<th style="width: 50px;">type</th> <th>type</th>
<th style="width: 50px;">default</th> <th>default</th>
<th>description</th> <th>description</th>
</tr> </tr>
</thead> </thead>
@ -2288,26 +2387,26 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<h3 id="carousel-methods">Methods</h3> <h3 id="carousel-methods">Methods</h3>
<h4>.carousel(options)</h4> <h4><code>.carousel(options)</code></h4>
<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p> <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.carousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">({</span> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.carousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">({</span>
<span class="na">interval</span><span class="p">:</span> <span class="mi">2000</span> <span class="na">interval</span><span class="p">:</span> <span class="mi">2000</span>
<span class="p">})</span></code></pre></div> <span class="p">})</span></code></pre></div>
<h4>.carousel('cycle')</h4> <h4><code>.carousel('cycle')</code></h4>
<p>Cycles through the carousel items from left to right.</p> <p>Cycles through the carousel items from left to right.</p>
<h4>.carousel('pause')</h4> <h4><code>.carousel('pause')</code></h4>
<p>Stops the carousel from cycling through items.</p> <p>Stops the carousel from cycling through items.</p>
<h4>.carousel(number)</h4> <h4><code>.carousel(number)</code></h4>
<p>Cycles the carousel to a particular frame (0 based, similar to an array).</p> <p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
<h4>.carousel('prev')</h4> <h4><code>.carousel('prev')</code></h4>
<p>Cycles to the previous item.</p> <p>Cycles to the previous item.</p>
<h4>.carousel('next')</h4> <h4><code>.carousel('next')</code></h4>
<p>Cycles to the next item.</p> <p>Cycles to the next item.</p>
<h3 id="carousel-events">Events</h3> <h3 id="carousel-events">Events</h3>
@ -2317,11 +2416,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<li><code>direction</code>: The direction in which the carousel is sliding (either <code>"left"</code> or <code>"right"</code>).</li> <li><code>direction</code>: The direction in which the carousel is sliding (either <code>"left"</code> or <code>"right"</code>).</li>
<li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li> <li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
</ul> </ul>
<p>All carousel events are fired at the carousel itself (i.e. at the <code>&lt;div class="carousel"&gt;</code>).</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped bs-events-table"> <table class="table table-bordered table-striped bs-events-table">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th>Event Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -2346,7 +2446,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<h1 id="affix" class="page-header">Affix <small>affix.js</small></h1> <h1 id="affix" class="page-header">Affix <small>affix.js</small></h1>
<h2 id="affix-examples">Example</h2> <h2 id="affix-examples">Example</h2>
<p>The subnavigation on the right is a live demo of the affix plugin.</p> <p>The affix plugin toggles <code>position: fixed;</code> on and off, emulating the effect found with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning"><code>position: sticky;</code></a>. The subnavigation on the right is a live demo of the affix plugin.</p>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
@ -2354,7 +2454,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed content.</strong></p> <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed content.</strong></p>
<h3>Positioning via CSS</h3> <h3>Positioning via CSS</h3>
<p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p> <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles, with the exception of <code>position: fixed;</code> on <code>.affix</code>, for these classes yourself (independent of this plugin) to handle the actual positions.</p>
<p>Here's how the affix plugin works:</p> <p>Here's how the affix plugin works:</p>
<ol> <ol>
<li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li> <li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li>
@ -2386,12 +2486,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped js-options-table">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th>Name</th>
<th style="width: 100px;">type</th> <th>type</th>
<th style="width: 50px;">default</th> <th>default</th>
<th>description</th> <th>description</th>
</tr> </tr>
</thead> </thead>
@ -2420,7 +2520,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<table class="table table-bordered table-striped bs-events-table"> <table class="table table-bordered table-striped bs-events-table">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th>Event Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
@ -2624,9 +2724,9 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Maintained by the <a href="https://github.com/orgs/twbs/people">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> <p>Code licensed under <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links text-muted"> <ul class="bs-docs-footer-links text-muted">
<li>Currently v3.3.2</li> <li>Currently v3.3.4</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>&middot;</li> <li>&middot;</li>

6
migration/index.html
View File

@ -91,7 +91,7 @@
<!-- Docs page layout --> <!-- Docs page layout -->
<div class="bs-docs-header" id="content"> <div class="bs-docs-header" id="content" tabindex="-1">
<div class="container"> <div class="container">
<h1>Migrating to v3.x</h1> <h1>Migrating to v3.x</h1>
<p>Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.</p> <p>Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.</p>
@ -593,9 +593,9 @@
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Maintained by the <a href="https://github.com/orgs/twbs/people">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> <p>Code licensed under <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links text-muted"> <ul class="bs-docs-footer-links text-muted">
<li>Currently v3.3.2</li> <li>Currently v3.3.4</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>&middot;</li> <li>&middot;</li>

18
sitemap.xml
View File

@ -2,7 +2,7 @@
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url> <url>
<loc>http://getbootstrap.com/</loc> <loc>http://getbootstrap.com/</loc>
<lastmod>2015-01-19T09:03:49-08:00</lastmod> <lastmod>2015-03-16T08:45:40-07:00</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
@ -10,7 +10,7 @@
<url> <url>
<loc>http://getbootstrap.com/about/</loc> <loc>http://getbootstrap.com/about/</loc>
<lastmod>2015-01-19T09:03:49-08:00</lastmod> <lastmod>2015-03-16T08:45:40-07:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
@ -19,7 +19,7 @@
<url> <url>
<loc>http://getbootstrap.com/browser-bugs/</loc> <loc>http://getbootstrap.com/browser-bugs/</loc>
<lastmod>2015-01-19T09:03:49-08:00</lastmod> <lastmod>2015-03-16T08:45:40-07:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
@ -28,7 +28,7 @@
<url> <url>
<loc>http://getbootstrap.com/components/</loc> <loc>http://getbootstrap.com/components/</loc>
<lastmod>2015-01-19T09:03:49-08:00</lastmod> <lastmod>2015-03-16T08:45:40-07:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
@ -37,7 +37,7 @@
<url> <url>
<loc>http://getbootstrap.com/css/</loc> <loc>http://getbootstrap.com/css/</loc>
<lastmod>2015-01-19T09:03:49-08:00</lastmod> <lastmod>2015-03-16T08:45:40-07:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
@ -46,7 +46,7 @@
<url> <url>
<loc>http://getbootstrap.com/customize/</loc> <loc>http://getbootstrap.com/customize/</loc>
<lastmod>2015-01-19T09:03:49-08:00</lastmod> <lastmod>2015-03-16T08:45:40-07:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
@ -55,7 +55,7 @@
<url> <url>
<loc>http://getbootstrap.com/getting-started/</loc> <loc>http://getbootstrap.com/getting-started/</loc>
<lastmod>2015-01-19T09:03:49-08:00</lastmod> <lastmod>2015-03-16T08:45:40-07:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
@ -66,7 +66,7 @@
<url> <url>
<loc>http://getbootstrap.com/javascript/</loc> <loc>http://getbootstrap.com/javascript/</loc>
<lastmod>2015-01-19T09:03:49-08:00</lastmod> <lastmod>2015-03-16T08:45:40-07:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
@ -75,7 +75,7 @@
<url> <url>
<loc>http://getbootstrap.com/migration/</loc> <loc>http://getbootstrap.com/migration/</loc>
<lastmod>2015-01-19T09:03:49-08:00</lastmod> <lastmod>2015-03-16T08:45:40-07:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>