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

Merge branch 'master' into labels-readme

Browse Source
This commit is contained in:
Mark Otto 2014-11-11 19:25:16 -08:00
commit 1e268ddfc3
129 changed files with 18830 additions and 1478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.travis.yml
View File

@ -20,8 +20,8 @@ after_script:
- if [ "$TWBS_TEST" = validate-html ] && [ $TWBS_DO_VALIDATOR -ne 0 ]; then ./test-infra/s3_cache.py upload rubygems; fi - if [ "$TWBS_TEST" = validate-html ] && [ $TWBS_DO_VALIDATOR -ne 0 ]; then ./test-infra/s3_cache.py upload rubygems; fi
env: env:
global: global:
- JEKYLL_VERSION: 2.3.0 - JEKYLL_VERSION: 2.5.1
- ROUGE_VERSION: 1.6.2 - ROUGE_VERSION: 1.7.2
- SAUCE_USERNAME: bootstrap - SAUCE_USERNAME: bootstrap
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ=" - secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
- secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY=" - secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY="

22
CONTRIBUTING.md
View File

@ -88,6 +88,10 @@ When feasible, we aim to report such upstream bugs to the relevant browser vendo
| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://code.google.com/p/chromium/issues/list | Click the "New issue" button. | | Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://code.google.com/p/chromium/issues/list | Click the "New issue" button. |
| Microsoft | Internet Explorer | Trident | https://connect.microsoft.com/IE/feedback/LoadSubmitFeedbackForm | | | Microsoft | Internet Explorer | Trident | https://connect.microsoft.com/IE/feedback/LoadSubmitFeedbackForm | |
### Issues bots
[@twbs-lmvtfy](https://github.com/twbs-lmvtfy) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks for HTML validation errors in live examples (e.g. jsFiddles, JS Bins, Bootplys, Plunks, CodePens, etc.) posted in issue comments. If it finds any errors, it will post a follow-up comment on the issue and point out the errors. If this happens with an example you've posted, please fix the errors and post an updated live example. If you opened a bug report, please check whether the bug still occurs with your revised, valid live example. If the bug no longer occurs, it was probably due to your invalid HTML rather than something in Bootstrap and we'd appreciate it if you could close out the GitHub issue.
## Feature requests ## Feature requests
@ -112,6 +116,17 @@ Please adhere to the [coding guidelines](#code-guidelines) used throughout the
project (indentation, accurate comments, etc.) and any other requirements project (indentation, accurate comments, etc.) and any other requirements
(such as test coverage). (such as test coverage).
**Do not edit `bootstrap.css`, `bootstrap-theme.css`, or `bootstrap.js`
directly!** Those files are automatically generated. You should edit the
source files in [`/bootstrap/less/`](https://github.com/twbs/bootstrap/tree/master/less)
and/or [`/bootstrap/js/`](https://github.com/twbs/bootstrap/tree/master/js) instead.
Similarly, when contributing to Bootstrap's documentation, you should edit the
documentation source files in
[the `/bootstrap/docs/` directory of the `master` branch](https://github.com/twbs/bootstrap/tree/master/docs).
**Do not edit the `gh-pages` branch.** That branch is generated from the
documentation source files and is managed separately by the Bootstrap Core Team.
Adhering to the following process is the best way to get your work Adhering to the following process is the best way to get your work
included in the project: included in the project:
@ -165,6 +180,13 @@ included in the project:
**IMPORTANT**: By submitting a patch, you agree to allow the project owners to **IMPORTANT**: By submitting a patch, you agree to allow the project owners to
license your work under the terms of the [MIT License](LICENSE.md). license your work under the terms of the [MIT License](LICENSE.md).
### Pull request checker bot: Rorschach
[@twbs-rorschach](https://github.com/twbs-rorschach) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks all pull requests for a few simple common mistakes. It's possible that Rorschach might leave a comment on your pull request and then close it. If that happens, simply fix the problem(s) mentioned in the comment (there should be link(s) in the comment explaining the problem(s) in detail) and then either:
* Push the revised version to your pull request's branch and post a comment on the pull request saying that you've fixed the problem(s). One of the Bootstrap Core Team members will then come along and reopen your pull request.
* Or you can just open a new pull request for your revised version.
## Code guidelines ## Code guidelines

53
Gruntfile.js
View File

@ -27,6 +27,13 @@ module.exports = function (grunt) {
}; };
var generateRawFiles = require('./grunt/bs-raw-files-generator.js'); var generateRawFiles = require('./grunt/bs-raw-files-generator.js');
var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js'); var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js');
var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
Object.keys(configBridge.paths).forEach(function (key) {
configBridge.paths[key].forEach(function (val, i, arr) {
arr[i] = path.join('./docs/assets', val);
});
});
// Project configuration. // Project configuration.
grunt.initConfig({ grunt.initConfig({
@ -38,21 +45,8 @@ module.exports = function (grunt) {
' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + ' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
' * Licensed under <%= pkg.license.type %> (<%= pkg.license.url %>)\n' + ' * Licensed under <%= pkg.license.type %> (<%= pkg.license.url %>)\n' +
' */\n', ' */\n',
// NOTE: This jqueryCheck/jqueryVersionCheck code is duplicated in customizer.js; jqueryCheck: configBridge.config.jqueryCheck.join('\n'),
// if making changes here, be sure to update the other copy too. jqueryVersionCheck: configBridge.config.jqueryVersionCheck.join('\n'),
jqueryCheck: [
'if (typeof jQuery === \'undefined\') {',
' throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery\')',
'}\n'
].join('\n'),
jqueryVersionCheck: [
'+function ($) {',
' var version = $.fn.jquery.split(\' \')[0].split(\'.\')',
' if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {',
' throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery version 1.9.1 or higher\')',
' }',
'}(jQuery);\n\n'
].join('\n'),
// Task configuration. // Task configuration.
clean: { clean: {
@ -138,24 +132,11 @@ module.exports = function (grunt) {
dest: 'dist/js/<%= pkg.name %>.min.js' dest: 'dist/js/<%= pkg.name %>.min.js'
}, },
customize: { customize: {
src: [ src: configBridge.paths.customizerJs,
'docs/assets/js/vendor/less.min.js',
'docs/assets/js/vendor/jszip.min.js',
'docs/assets/js/vendor/uglify.min.js',
'docs/assets/js/vendor/Blob.js',
'docs/assets/js/vendor/FileSaver.js',
'docs/assets/js/raw-files.min.js',
'docs/assets/js/src/customizer.js'
],
dest: 'docs/assets/js/customize.min.js' dest: 'docs/assets/js/customize.min.js'
}, },
docsJs: { docsJs: {
// NOTE: This src list is duplicated in footer.html; if making changes here, be sure to update the other copy too. src: configBridge.paths.docsJs,
src: [
'docs/assets/js/vendor/holder.js',
'docs/assets/js/vendor/ZeroClipboard.min.js',
'docs/assets/js/src/application.js'
],
dest: 'docs/assets/js/docs.min.js' dest: 'docs/assets/js/docs.min.js'
} }
}, },
@ -194,16 +175,7 @@ module.exports = function (grunt) {
autoprefixer: { autoprefixer: {
options: { options: {
browsers: [ browsers: configBridge.config.autoprefixerBrowsers
'Android 2.3',
'Android >= 4',
'Chrome >= 20',
'Firefox >= 24', // Firefox 24 is the latest ESR
'Explorer >= 8',
'iOS >= 6',
'Opera >= 12',
'Safari >= 6'
]
}, },
core: { core: {
options: { options: {
@ -349,7 +321,6 @@ module.exports = function (grunt) {
failHard: true, failHard: true,
reset: true, reset: true,
relaxerror: [ relaxerror: [
'Bad value X-UA-Compatible for attribute http-equiv on element meta.',
'Element img is missing required attribute src.', 'Element img is missing required attribute src.',
'Attribute autocomplete not allowed on element input at this point.', 'Attribute autocomplete not allowed on element input at this point.',
'Attribute autocomplete not allowed on element button at this point.' 'Attribute autocomplete not allowed on element button at this point.'

4
README.md
View File

@ -25,7 +25,7 @@ To get started, check out <http://getbootstrap.com>!
Four quick start options are available: Four quick start options are available:
- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.2.0.zip). - [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.3.0.zip).
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`. - Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
- Install with [Bower](http://bower.io): `bower install bootstrap`. - Install with [Bower](http://bower.io): `bower install bootstrap`.
- Install with [npm](https://www.npmjs.org): `npm install bootstrap`. - Install with [npm](https://www.npmjs.org): `npm install bootstrap`.
@ -68,7 +68,7 @@ Bootstrap's documentation, included in this repo in the root directory, is built
### Running documentation locally ### Running documentation locally
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.3.x). 1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.5.x).
- **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems. - **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
2. Install the Ruby-based syntax highlighter, [Rouge](https://github.com/jneen/rouge), with `gem install rouge`. 2. Install the Ruby-based syntax highlighter, [Rouge](https://github.com/jneen/rouge), with `gem install rouge`.
3. From the root `/bootstrap` directory, run `jekyll serve` in the command line. 3. From the root `/bootstrap` directory, run `jekyll serve` in the command line.

14
_config.yml
View File

@ -14,19 +14,19 @@ url: http://getbootstrap.com
encoding: UTF-8 encoding: UTF-8
# Custom vars # Custom vars
current_version: 3.2.0 current_version: 3.3.0
repo: https://github.com/twbs/bootstrap repo: https://github.com/twbs/bootstrap
sass_repo: https://github.com/twbs/bootstrap-sass sass_repo: https://github.com/twbs/bootstrap-sass
download: download:
source: https://github.com/twbs/bootstrap/archive/v3.2.0.zip source: https://github.com/twbs/bootstrap/archive/v3.3.0.zip
dist: https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip dist: https://github.com/twbs/bootstrap/releases/download/v3.3.0/bootstrap-3.3.0-dist.zip
sass: https://github.com/twbs/bootstrap-sass/archive/v3.2.0.tar.gz sass: https://github.com/twbs/bootstrap-sass/archive/v3.3.0.tar.gz
blog: http://blog.getbootstrap.com blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com expo: http://expo.getbootstrap.com
cdn: cdn:
css: https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css css: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css
css_theme: https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css css_theme: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css
js: https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js js: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js

2
bower.json
View File

@ -1,7 +1,7 @@
{ {
"name": "bootstrap", "name": "bootstrap",
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.", "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
"version": "3.2.0", "version": "3.3.0",
"keywords": [ "keywords": [
"css", "css",
"js", "js",

2
composer.json
View File

@ -28,7 +28,7 @@
"license": "MIT", "license": "MIT",
"extra": { "extra": {
"branch-alias": { "branch-alias": {
"dev-master": "3.2.x-dev" "dev-master": "3.3.x-dev"
} }
}, },
"replace": { "replace": {

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

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v3.2.0 (http://getbootstrap.com) * Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
@ -69,28 +69,28 @@
background-image: none; background-image: none;
} }
.btn-primary { .btn-primary {
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%); background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%); background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#2d6ca2)); background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%); background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #2b669a; border-color: #245580;
} }
.btn-primary:hover, .btn-primary:hover,
.btn-primary:focus { .btn-primary:focus {
background-color: #2d6ca2; background-color: #265a88;
background-position: 0 -15px; background-position: 0 -15px;
} }
.btn-primary:active, .btn-primary:active,
.btn-primary.active { .btn-primary.active {
background-color: #2d6ca2; background-color: #265a88;
border-color: #2b669a; border-color: #245580;
} }
.btn-primary:disabled, .btn-primary:disabled,
.btn-primary[disabled] { .btn-primary[disabled] {
background-color: #2d6ca2; background-color: #265a88;
background-image: none; background-image: none;
} }
.btn-success { .btn-success {
@ -211,12 +211,12 @@
.dropdown-menu > .active > a, .dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { .dropdown-menu > .active > a:focus {
background-color: #357ebd; background-color: #2e6da4;
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%); background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%); background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd)); background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.navbar-default { .navbar-default {
@ -275,6 +275,19 @@
.navbar-fixed-bottom { .navbar-fixed-bottom {
border-radius: 0; border-radius: 0;
} }
@media (max-width: 767px) {
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #fff;
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
background-repeat: repeat-x;
}
}
.alert { .alert {
text-shadow: 0 1px 0 rgba(255, 255, 255, .2); text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
@ -325,11 +338,11 @@
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.progress-bar { .progress-bar {
background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%); background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #3071a9 100%); background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9)); background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%); background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.progress-bar-success { .progress-bar-success {
@ -377,14 +390,19 @@
.list-group-item.active, .list-group-item.active,
.list-group-item.active:hover, .list-group-item.active:hover,
.list-group-item.active:focus { .list-group-item.active:focus {
text-shadow: 0 -1px 0 #3071a9; text-shadow: 0 -1px 0 #286090;
background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%); background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #3278b3 100%); background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3278b3)); background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%); background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #3278b3; border-color: #2b669a;
}
.list-group-item.active .badge,
.list-group-item.active:hover .badge,
.list-group-item.active:focus .badge {
text-shadow: none;
} }
.panel { .panel {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
@ -399,11 +417,11 @@
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.panel-primary > .panel-heading { .panel-primary > .panel-heading {
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%); background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%); background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd)); background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.panel-success > .panel-heading { .panel-success > .panel-heading {

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

180
dist/css/bootstrap.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v3.2.0 (http://getbootstrap.com) * Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
@ -915,12 +915,12 @@ textarea {
line-height: inherit; line-height: inherit;
} }
a { a {
color: #428bca; color: #337ab7;
text-decoration: none; text-decoration: none;
} }
a:hover, a:hover,
a:focus { a:focus {
color: #2a6496; color: #23527c;
text-decoration: underline; text-decoration: underline;
} }
a:focus { a:focus {
@ -1153,10 +1153,10 @@ mark,
color: #777; color: #777;
} }
.text-primary { .text-primary {
color: #428bca; color: #337ab7;
} }
a.text-primary:hover { a.text-primary:hover {
color: #3071a9; color: #286090;
} }
.text-success { .text-success {
color: #3c763d; color: #3c763d;
@ -1184,10 +1184,10 @@ a.text-danger:hover {
} }
.bg-primary { .bg-primary {
color: #fff; color: #fff;
background-color: #428bca; background-color: #337ab7;
} }
a.bg-primary:hover { a.bg-primary:hover {
background-color: #3071a9; background-color: #286090;
} }
.bg-success { .bg-success {
background-color: #dff0d8; background-color: #dff0d8;
@ -2400,56 +2400,25 @@ textarea.form-control {
input[type="search"] { input[type="search"] {
-webkit-appearance: none; -webkit-appearance: none;
} }
input[type="date"], @media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="time"], input[type="date"],
input[type="datetime-local"], input[type="time"],
input[type="month"] { input[type="datetime-local"],
line-height: 34px; input[type="month"] {
line-height: 1.42857143 \0; line-height: 34px;
} }
input[type="date"].input-sm, input[type="date"].input-sm,
input[type="time"].input-sm, input[type="time"].input-sm,
input[type="datetime-local"].input-sm, input[type="datetime-local"].input-sm,
input[type="month"].input-sm { input[type="month"].input-sm {
line-height: 30px; line-height: 30px;
line-height: 1.5 \0; }
} input[type="date"].input-lg,
input[type="date"].input-lg, input[type="time"].input-lg,
input[type="time"].input-lg, input[type="datetime-local"].input-lg,
input[type="datetime-local"].input-lg, input[type="month"].input-lg {
input[type="month"].input-lg { line-height: 46px;
line-height: 46px; }
line-height: 1.33 \0;
}
_:-ms-fullscreen,
:root input[type="date"],
_:-ms-fullscreen,
:root input[type="time"],
_:-ms-fullscreen,
:root input[type="datetime-local"],
_:-ms-fullscreen,
:root input[type="month"] {
line-height: 1.42857143;
}
_:-ms-fullscreen.input-sm,
:root input[type="date"].input-sm,
_:-ms-fullscreen.input-sm,
:root input[type="time"].input-sm,
_:-ms-fullscreen.input-sm,
:root input[type="datetime-local"].input-sm,
_:-ms-fullscreen.input-sm,
:root input[type="month"].input-sm {
line-height: 1.5;
}
_:-ms-fullscreen.input-lg,
:root input[type="date"].input-lg,
_:-ms-fullscreen.input-lg,
:root input[type="time"].input-lg,
_:-ms-fullscreen.input-lg,
:root input[type="datetime-local"].input-lg,
_:-ms-fullscreen.input-lg,
:root input[type="month"].input-lg {
line-height: 1.33;
} }
.form-group { .form-group {
margin-bottom: 15px; margin-bottom: 15px;
@ -2880,8 +2849,8 @@ fieldset[disabled] .btn-default.active {
} }
.btn-primary { .btn-primary {
color: #fff; color: #fff;
background-color: #428bca; background-color: #337ab7;
border-color: #357ebd; border-color: #2e6da4;
} }
.btn-primary:hover, .btn-primary:hover,
.btn-primary:focus, .btn-primary:focus,
@ -2890,8 +2859,8 @@ fieldset[disabled] .btn-default.active {
.btn-primary.active, .btn-primary.active,
.open > .dropdown-toggle.btn-primary { .open > .dropdown-toggle.btn-primary {
color: #fff; color: #fff;
background-color: #3071a9; background-color: #286090;
border-color: #285e8e; border-color: #204d74;
} }
.btn-primary:active, .btn-primary:active,
.btn-primary.active, .btn-primary.active,
@ -2916,11 +2885,11 @@ fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active, .btn-primary.disabled.active,
.btn-primary[disabled].active, .btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active { fieldset[disabled] .btn-primary.active {
background-color: #428bca; background-color: #337ab7;
border-color: #357ebd; border-color: #2e6da4;
} }
.btn-primary .badge { .btn-primary .badge {
color: #428bca; color: #337ab7;
background-color: #fff; background-color: #fff;
} }
.btn-success { .btn-success {
@ -3105,7 +3074,7 @@ fieldset[disabled] .btn-danger.active {
} }
.btn-link { .btn-link {
font-weight: normal; font-weight: normal;
color: #428bca; color: #337ab7;
border-radius: 0; border-radius: 0;
} }
.btn-link, .btn-link,
@ -3125,7 +3094,7 @@ fieldset[disabled] .btn-link {
} }
.btn-link:hover, .btn-link:hover,
.btn-link:focus { .btn-link:focus {
color: #2a6496; color: #23527c;
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
} }
@ -3274,7 +3243,7 @@ tbody.collapse.in {
.dropdown-menu > .active > a:focus { .dropdown-menu > .active > a:focus {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
background-color: #428bca; background-color: #337ab7;
outline: 0; outline: 0;
} }
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a,
@ -3705,7 +3674,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav .open > a:hover, .nav .open > a:hover,
.nav .open > a:focus { .nav .open > a:focus {
background-color: #eee; background-color: #eee;
border-color: #428bca; border-color: #337ab7;
} }
.nav .nav-divider { .nav .nav-divider {
height: 1px; height: 1px;
@ -3798,7 +3767,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav-pills > li.active > a:hover, .nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus { .nav-pills > li.active > a:focus {
color: #fff; color: #fff;
background-color: #428bca; background-color: #337ab7;
} }
.nav-stacked > li { .nav-stacked > li {
float: none; float: none;
@ -4155,6 +4124,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
@ -4425,7 +4396,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
padding: 6px 12px; padding: 6px 12px;
margin-left: -1px; margin-left: -1px;
line-height: 1.42857143; line-height: 1.42857143;
color: #428bca; color: #337ab7;
text-decoration: none; text-decoration: none;
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -4445,7 +4416,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
.pagination > li > span:hover, .pagination > li > span:hover,
.pagination > li > a:focus, .pagination > li > a:focus,
.pagination > li > span:focus { .pagination > li > span:focus {
color: #2a6496; color: #23527c;
background-color: #eee; background-color: #eee;
border-color: #ddd; border-color: #ddd;
} }
@ -4458,8 +4429,8 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
z-index: 2; z-index: 2;
color: #fff; color: #fff;
cursor: default; cursor: default;
background-color: #428bca; background-color: #337ab7;
border-color: #428bca; border-color: #337ab7;
} }
.pagination > .disabled > span, .pagination > .disabled > span,
.pagination > .disabled > span:hover, .pagination > .disabled > span:hover,
@ -4573,11 +4544,11 @@ a.label:focus {
background-color: #5e5e5e; background-color: #5e5e5e;
} }
.label-primary { .label-primary {
background-color: #428bca; background-color: #337ab7;
} }
.label-primary[href]:hover, .label-primary[href]:hover,
.label-primary[href]:focus { .label-primary[href]:focus {
background-color: #3071a9; background-color: #286090;
} }
.label-success { .label-success {
background-color: #5cb85c; background-color: #5cb85c;
@ -4638,11 +4609,17 @@ a.badge:focus {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
a.list-group-item.active > .badge, .list-group-item.active > .badge,
.nav-pills > .active > a > .badge { .nav-pills > .active > a > .badge {
color: #428bca; color: #337ab7;
background-color: #fff; background-color: #fff;
} }
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
.nav-pills > li > a > .badge { .nav-pills > li > a > .badge {
margin-left: 3px; margin-left: 3px;
} }
@ -4675,7 +4652,8 @@ a.list-group-item.active > .badge,
.jumbotron { .jumbotron {
padding: 48px 0; padding: 48px 0;
} }
.container .jumbotron { .container .jumbotron,
.container-fluid .jumbotron {
padding-right: 60px; padding-right: 60px;
padding-left: 60px; padding-left: 60px;
} }
@ -4704,7 +4682,7 @@ a.list-group-item.active > .badge,
a.thumbnail:hover, a.thumbnail:hover,
a.thumbnail:focus, a.thumbnail:focus,
a.thumbnail.active { a.thumbnail.active {
border-color: #428bca; border-color: #337ab7;
} }
.thumbnail .caption { .thumbnail .caption {
padding: 9px; padding: 9px;
@ -4826,7 +4804,7 @@ a.thumbnail.active {
line-height: 20px; line-height: 20px;
color: #fff; color: #fff;
text-align: center; text-align: center;
background-color: #428bca; background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease; -webkit-transition: width .6s ease;
@ -4934,12 +4912,6 @@ a.thumbnail.active {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
a.list-group-item { a.list-group-item {
color: #555; color: #555;
} }
@ -4974,8 +4946,8 @@ a.list-group-item:focus {
.list-group-item.active:focus { .list-group-item.active:focus {
z-index: 2; z-index: 2;
color: #fff; color: #fff;
background-color: #428bca; background-color: #337ab7;
border-color: #428bca; border-color: #337ab7;
} }
.list-group-item.active .list-group-item-heading, .list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading, .list-group-item.active:hover .list-group-item-heading,
@ -4991,7 +4963,7 @@ a.list-group-item:focus {
.list-group-item.active .list-group-item-text, .list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text, .list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text { .list-group-item.active:focus .list-group-item-text {
color: #e1edf7; color: #c7ddef;
} }
.list-group-item-success { .list-group-item-success {
color: #3c763d; color: #3c763d;
@ -5335,22 +5307,22 @@ a.list-group-item-danger.active:focus {
border-bottom-color: #ddd; border-bottom-color: #ddd;
} }
.panel-primary { .panel-primary {
border-color: #428bca; border-color: #337ab7;
} }
.panel-primary > .panel-heading { .panel-primary > .panel-heading {
color: #fff; color: #fff;
background-color: #428bca; background-color: #337ab7;
border-color: #428bca; border-color: #337ab7;
} }
.panel-primary > .panel-heading + .panel-collapse > .panel-body { .panel-primary > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #428bca; border-top-color: #337ab7;
} }
.panel-primary > .panel-heading .badge { .panel-primary > .panel-heading .badge {
color: #428bca; color: #337ab7;
background-color: #fff; background-color: #fff;
} }
.panel-primary > .panel-footer + .panel-collapse > .panel-body { .panel-primary > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #428bca; border-bottom-color: #337ab7;
} }
.panel-success { .panel-success {
border-color: #d6e9c6; border-color: #d6e9c6;
@ -5549,10 +5521,9 @@ 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: fixed; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0;
left: 0; left: 0;
background-color: #000; background-color: #000;
} }
@ -5624,7 +5595,9 @@ button.close {
position: absolute; position: absolute;
z-index: 1070; z-index: 1070;
display: block; display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px; font-size: 12px;
font-weight: normal;
line-height: 1.4; line-height: 1.4;
visibility: visible; visibility: visible;
filter: alpha(opacity=0); filter: alpha(opacity=0);
@ -5674,14 +5647,16 @@ button.close {
border-top-color: #000; border-top-color: #000;
} }
.tooltip.top-left .tooltip-arrow { .tooltip.top-left .tooltip-arrow {
right: 5px;
bottom: 0; bottom: 0;
left: 5px; margin-bottom: -5px;
border-width: 5px 5px 0; border-width: 5px 5px 0;
border-top-color: #000; border-top-color: #000;
} }
.tooltip.top-right .tooltip-arrow { .tooltip.top-right .tooltip-arrow {
right: 5px;
bottom: 0; bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0; border-width: 5px 5px 0;
border-top-color: #000; border-top-color: #000;
} }
@ -5708,13 +5683,15 @@ button.close {
} }
.tooltip.bottom-left .tooltip-arrow { .tooltip.bottom-left .tooltip-arrow {
top: 0; top: 0;
left: 5px; right: 5px;
margin-top: -5px;
border-width: 0 5px 5px; border-width: 0 5px 5px;
border-bottom-color: #000; border-bottom-color: #000;
} }
.tooltip.bottom-right .tooltip-arrow { .tooltip.bottom-right .tooltip-arrow {
top: 0; top: 0;
right: 5px; left: 5px;
margin-top: -5px;
border-width: 0 5px 5px; border-width: 0 5px 5px;
border-bottom-color: #000; border-bottom-color: #000;
} }
@ -5726,6 +5703,7 @@ button.close {
display: none; display: none;
max-width: 276px; max-width: 276px;
padding: 1px; padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: 1.42857143; line-height: 1.42857143;

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

189
dist/js/bootstrap.js vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v3.2.0 (http://getbootstrap.com) * Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
@ -16,7 +16,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: transition.js v3.2.0 * Bootstrap: transition.js v3.3.0
* http://getbootstrap.com/javascript/#transitions * http://getbootstrap.com/javascript/#transitions
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -76,7 +76,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: alert.js v3.2.0 * Bootstrap: alert.js v3.3.0
* http://getbootstrap.com/javascript/#alerts * http://getbootstrap.com/javascript/#alerts
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -95,7 +95,7 @@ if (typeof jQuery === 'undefined') {
$(el).on('click', dismiss, this.close) $(el).on('click', dismiss, this.close)
} }
Alert.VERSION = '3.2.0' Alert.VERSION = '3.3.0'
Alert.TRANSITION_DURATION = 150 Alert.TRANSITION_DURATION = 150
@ -171,7 +171,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: button.js v3.2.0 * Bootstrap: button.js v3.3.0
* http://getbootstrap.com/javascript/#buttons * http://getbootstrap.com/javascript/#buttons
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -191,7 +191,7 @@ if (typeof jQuery === 'undefined') {
this.isLoading = false this.isLoading = false
} }
Button.VERSION = '3.2.0' Button.VERSION = '3.3.0'
Button.DEFAULTS = { Button.DEFAULTS = {
loadingText: 'loading...' loadingText: 'loading...'
@ -207,10 +207,10 @@ if (typeof jQuery === 'undefined') {
if (data.resetText == null) $el.data('resetText', $el[val]()) if (data.resetText == null) $el.data('resetText', $el[val]())
$el[val](data[state] == null ? this.options[state] : data[state])
// push to event loop to allow forms to submit // push to event loop to allow forms to submit
setTimeout($.proxy(function () { setTimeout($.proxy(function () {
$el[val](data[state] == null ? this.options[state] : data[state])
if (state == 'loadingText') { if (state == 'loadingText') {
this.isLoading = true this.isLoading = true
$el.addClass(d).attr(d, d) $el.addClass(d).attr(d, d)
@ -282,13 +282,13 @@ if (typeof jQuery === 'undefined') {
e.preventDefault() e.preventDefault()
}) })
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) { .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
$(e.target).closest('.btn').toggleClass('focus', e.type == 'focus') $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
}) })
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: carousel.js v3.2.0 * Bootstrap: carousel.js v3.3.0
* http://getbootstrap.com/javascript/#carousel * http://getbootstrap.com/javascript/#carousel
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -319,7 +319,7 @@ if (typeof jQuery === 'undefined') {
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this)) .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
} }
Carousel.VERSION = '3.2.0' Carousel.VERSION = '3.3.0'
Carousel.TRANSITION_DURATION = 600 Carousel.TRANSITION_DURATION = 600
@ -331,6 +331,7 @@ if (typeof jQuery === 'undefined') {
} }
Carousel.prototype.keydown = function (e) { Carousel.prototype.keydown = function (e) {
if (/input|textarea/i.test(e.target.tagName)) return
switch (e.which) { switch (e.which) {
case 37: this.prev(); break case 37: this.prev(); break
case 39: this.next(); break case 39: this.next(); break
@ -496,7 +497,7 @@ if (typeof jQuery === 'undefined') {
// CAROUSEL DATA-API // CAROUSEL DATA-API
// ================= // =================
$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) { var clickHandler = function (e) {
var href var href
var $this = $(this) var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7 var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
@ -512,7 +513,11 @@ if (typeof jQuery === 'undefined') {
} }
e.preventDefault() e.preventDefault()
}) }
$(document)
.on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
.on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
$(window).on('load', function () { $(window).on('load', function () {
$('[data-ride="carousel"]').each(function () { $('[data-ride="carousel"]').each(function () {
@ -524,7 +529,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: collapse.js v3.2.0 * Bootstrap: collapse.js v3.3.0
* http://getbootstrap.com/javascript/#collapse * http://getbootstrap.com/javascript/#collapse
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -541,18 +546,25 @@ 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.transitioning = null this.transitioning = null
if (this.options.parent) this.$parent = $(this.options.parent) if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle() if (this.options.toggle) this.toggle()
} }
Collapse.VERSION = '3.2.0' Collapse.VERSION = '3.3.0'
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 () {
@ -587,6 +599,10 @@ if (typeof jQuery === 'undefined') {
.addClass('collapsing')[dimension](0) .addClass('collapsing')[dimension](0)
.attr('aria-expanded', true) .attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1 this.transitioning = 1
var complete = function () { var complete = function () {
@ -623,6 +639,10 @@ if (typeof jQuery === 'undefined') {
.removeClass('collapse in') .removeClass('collapse in')
.attr('aria-expanded', false) .attr('aria-expanded', false)
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
this.transitioning = 1 this.transitioning = 1
var complete = function () { var complete = function () {
@ -645,6 +665,33 @@ if (typeof jQuery === 'undefined') {
this[this.$element.hasClass('in') ? 'hide' : 'show']() this[this.$element.hasClass('in') ? 'hide' : 'show']()
} }
Collapse.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
// COLLAPSE PLUGIN DEFINITION // COLLAPSE PLUGIN DEFINITION
// ========================== // ==========================
@ -680,22 +727,13 @@ if (typeof jQuery === 'undefined') {
// ================= // =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) { $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var href
var $this = $(this) var $this = $(this)
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
var $target = $(target)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent)
if (!data || !data.transitioning) { if (!$this.attr('data-target')) e.preventDefault()
if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed').attr('aria-expanded', false)
var isCollapsed = $target.hasClass('in') var $target = getTargetFromTrigger($this)
$this.toggleClass('collapsed', isCollapsed).attr('aria-expanded', !isCollapsed) var data = $target.data('bs.collapse')
} var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this })
Plugin.call($target, option) Plugin.call($target, option)
}) })
@ -703,7 +741,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: dropdown.js v3.2.0 * Bootstrap: dropdown.js v3.3.0
* http://getbootstrap.com/javascript/#dropdowns * http://getbootstrap.com/javascript/#dropdowns
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -723,7 +761,7 @@ if (typeof jQuery === 'undefined') {
$(element).on('click.bs.dropdown', this.toggle) $(element).on('click.bs.dropdown', this.toggle)
} }
Dropdown.VERSION = '3.2.0' Dropdown.VERSION = '3.3.0'
Dropdown.prototype.toggle = function (e) { Dropdown.prototype.toggle = function (e) {
var $this = $(this) var $this = $(this)
@ -858,12 +896,14 @@ if (typeof jQuery === 'undefined') {
.on('click.bs.dropdown.data-api', clearMenus) .on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle) .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown) .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: modal.js v3.2.0 * Bootstrap: modal.js v3.3.0
* http://getbootstrap.com/javascript/#modals * http://getbootstrap.com/javascript/#modals
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -894,7 +934,7 @@ if (typeof jQuery === 'undefined') {
} }
} }
Modal.VERSION = '3.2.0' Modal.VERSION = '3.3.0'
Modal.TRANSITION_DURATION = 300 Modal.TRANSITION_DURATION = 300
Modal.BACKDROP_TRANSITION_DURATION = 150 Modal.BACKDROP_TRANSITION_DURATION = 150
@ -920,10 +960,11 @@ if (typeof jQuery === 'undefined') {
this.isShown = true this.isShown = true
this.checkScrollbar() this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open') this.$body.addClass('modal-open')
this.setScrollbar()
this.escape() this.escape()
this.resize()
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))
@ -938,6 +979,9 @@ if (typeof jQuery === 'undefined') {
.show() .show()
.scrollTop(0) .scrollTop(0)
if (that.options.backdrop) that.adjustBackdrop()
that.adjustDialog()
if (transition) { if (transition) {
that.$element[0].offsetWidth // force reflow that.$element[0].offsetWidth // force reflow
} }
@ -972,6 +1016,7 @@ if (typeof jQuery === 'undefined') {
this.isShown = false this.isShown = false
this.escape() this.escape()
this.resize()
$(document).off('focusin.bs.modal') $(document).off('focusin.bs.modal')
@ -1007,11 +1052,20 @@ if (typeof jQuery === 'undefined') {
} }
} }
Modal.prototype.resize = function () {
if (this.isShown) {
$(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
} else {
$(window).off('resize.bs.modal')
}
}
Modal.prototype.hideModal = function () { Modal.prototype.hideModal = function () {
var that = this var that = this
this.$element.hide() this.$element.hide()
this.backdrop(function () { this.backdrop(function () {
that.$body.removeClass('modal-open') that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar() that.resetScrollbar()
that.$element.trigger('hidden.bs.modal') that.$element.trigger('hidden.bs.modal')
}) })
@ -1068,13 +1122,43 @@ if (typeof jQuery === 'undefined') {
} }
} }
// these following methods are used to handle overflowing modals
Modal.prototype.handleUpdate = function () {
if (this.options.backdrop) this.adjustBackdrop()
this.adjustDialog()
}
Modal.prototype.adjustBackdrop = function () {
this.$backdrop
.css('height', 0)
.css('height', this.$element[0].scrollHeight)
}
Modal.prototype.adjustDialog = function () {
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
})
}
Modal.prototype.resetAdjustments = function () {
this.$element.css({
paddingLeft: '',
paddingRight: ''
})
}
Modal.prototype.checkScrollbar = function () { Modal.prototype.checkScrollbar = function () {
this.bodyIsOverflowing = document.body.scrollHeight > document.documentElement.clientHeight
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)
if (this.scrollbarWidth) 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 () {
@ -1082,7 +1166,6 @@ if (typeof jQuery === 'undefined') {
} }
Modal.prototype.measureScrollbar = function () { // thx walsh Modal.prototype.measureScrollbar = function () { // thx walsh
if (document.body.clientWidth >= window.innerWidth) return 0
var scrollDiv = document.createElement('div') var scrollDiv = document.createElement('div')
scrollDiv.className = 'modal-scrollbar-measure' scrollDiv.className = 'modal-scrollbar-measure'
this.$body.append(scrollDiv) this.$body.append(scrollDiv)
@ -1145,7 +1228,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: tooltip.js v3.2.0 * Bootstrap: tooltip.js v3.3.0
* 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
* ======================================================================== * ========================================================================
@ -1171,7 +1254,7 @@ if (typeof jQuery === 'undefined') {
this.init('tooltip', element, options) this.init('tooltip', element, options)
} }
Tooltip.VERSION = '3.2.0' Tooltip.VERSION = '3.3.0'
Tooltip.TRANSITION_DURATION = 150 Tooltip.TRANSITION_DURATION = 150
@ -1624,7 +1707,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: popover.js v3.2.0 * Bootstrap: popover.js v3.3.0
* http://getbootstrap.com/javascript/#popovers * http://getbootstrap.com/javascript/#popovers
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -1644,7 +1727,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.2.0' Popover.VERSION = '3.3.0'
Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, { Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
placement: 'right', placement: 'right',
@ -1744,7 +1827,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: scrollspy.js v3.2.0 * Bootstrap: scrollspy.js v3.3.0
* http://getbootstrap.com/javascript/#scrollspy * http://getbootstrap.com/javascript/#scrollspy
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -1775,7 +1858,7 @@ if (typeof jQuery === 'undefined') {
this.process() this.process()
} }
ScrollSpy.VERSION = '3.2.0' ScrollSpy.VERSION = '3.3.0'
ScrollSpy.DEFAULTS = { ScrollSpy.DEFAULTS = {
offset: 10 offset: 10
@ -1920,7 +2003,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: tab.js v3.2.0 * Bootstrap: tab.js v3.3.0
* http://getbootstrap.com/javascript/#tabs * http://getbootstrap.com/javascript/#tabs
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -1938,7 +2021,7 @@ if (typeof jQuery === 'undefined') {
this.element = $(element) this.element = $(element)
} }
Tab.VERSION = '3.2.0' Tab.VERSION = '3.3.0'
Tab.TRANSITION_DURATION = 150 Tab.TRANSITION_DURATION = 150
@ -2062,15 +2145,19 @@ if (typeof jQuery === 'undefined') {
// TAB DATA-API // TAB DATA-API
// ============ // ============
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { var clickHandler = function (e) {
e.preventDefault() e.preventDefault()
Plugin.call($(this), 'show') Plugin.call($(this), 'show')
}) }
$(document)
.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: affix.js v3.2.0 * Bootstrap: affix.js v3.3.0
* http://getbootstrap.com/javascript/#affix * http://getbootstrap.com/javascript/#affix
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -2099,7 +2186,7 @@ if (typeof jQuery === 'undefined') {
this.checkPosition() this.checkPosition()
} }
Affix.VERSION = '3.2.0' Affix.VERSION = '3.3.0'
Affix.RESET = 'affix affix-top affix-bottom' Affix.RESET = 'affix affix-top affix-bottom'

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

File diff suppressed because one or more lines are too long

201
docs/_data/browser-bugs.yml Normal file
View File

@ -0,0 +1,201 @@
-
browser: >
Internet Explorer 11
summary: >
Hovered element still remains in `:hover` state after scrolling away.
upstream_bug: >
IE#926665
origin: >
Bootstrap#14211
-
browser: >
Internet Explorer 11
summary: >
When hovering over a `<select>` menu item, the cursor for the element underneath the menu is displayed.
upstream_bug: >
IE#963961
origin: >
Bootstrap#14528
-
browser: >
Firefox
summary: >
`.table-bordered` with an empty `<tbody>` is missing borders.
upstream_bug: >
Mozilla#1023761
origin: >
Bootstrap#13453
-
browser: >
Firefox
summary: >
`max-width: 100%;` doesn't work inside tables.
upstream_bug: >
Mozilla#975632
origin: >
Bootstrap#10690
-
browser: >
Firefox (Windows)
summary: >
Java applets that are descendants of elements with forced hardware acceleration using `translate3d(0,0,0)` are invisible.
upstream_bug: >
Mozilla#1048279
origin: >
Bootstrap#14124
-
browser: >
Firefox
summary: >
Button elements with `width: 100%` become cropped in long tables.
upstream_bug: >
Mozilla#1060131
origin: >
Bootstrap#14320
-
browser: >
Firefox
summary: >
If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.
upstream_bug: >
Mozilla#654072
origin: >
Bootstrap#793
-
browser: >
Chrome (OS X)
summary: >
Clicking above `<input type="number">` increment button flashes the decrement button.
upstream_bug: >
Chromium#419108
origin: >
Offshoot of Bootstrap#8350 & Chromium#337668
-
browser: >
Chrome
summary: >
`display: table;` within `display: block;` forces sibling content to new line.
upstream_bug: >
Chromium#309483
origin: >
Bootstrap#9950
-
browser: >
Chrome
summary: >
Incorrect viewport size used for media queries when printing.
upstream_bug: >
Chromium#273306
origin: >
Bootstrap#12078
-
browser: >
Safari (OS X)
summary: >
Scrollbar clipped in `select[multiple]` with padding.
upstream_bug: >
WebKit#128489
origin: >
Bootstrap#12536
-
browser: >
Chrome
summary: >
`display: table-cell; width: 100%;` doesn't work correctly on `<input type="date">`.
upstream_bug: >
Chromium#346051
origin: >
Bootstrap#12548
-
browser: >
Chrome
summary: >
`<input type="password">` sporadically causes bad widths on floated elements.
upstream_bug: >
Chromium#377346
origin: >
Bootstrap#13892
-
browser: >
Chrome
summary: >
CSS infinite linear animation with alpha transparency leaks memory.
upstream_bug: >
Chromium#429375
origin: >
Bootstrap#14409
-
browser: >
Safari (OS X)
summary: >
Weird button behavior with some `<input type="number">` elements.
upstream_bug: >
WebKit#137269
origin: >
Bootstrap#8350,
Normalize#283,
Chromium#337668
-
browser: >
Safari (OS X)
summary: >
`display: table-cell;` within media query renders incorrectly when resizing the window.
upstream_bug: >
WebKit#138167
origin: >
Bootstrap#9774
-
browser: >
Safari (iOS)
summary: >
`transform: translate3d(0,0,0);` rendering bug.
upstream_bug: >
WebKit#138162, Safari#18804973
origin: >
Bootstrap#14603
-
browser: >
Safari (OS X)
summary: >
Small font size when printing webpage with fixed-width `.container`.
upstream_bug: >
WebKit#138192
origin: >
Bootstrap#14868
-
browser: >
Safari (iOS)
summary: >
Text input's cursor doesn't move while scrolling the page.
upstream_bug: >
WebKit#138201, Safari#18819624
origin: >
Bootstrap#14708
-
browser: >
Chrome (Windows & Linux)
summary: >
Body content can be scrolled even though `overflow: hidden;` is applied to it.
upstream_bug: >
Chromium#429604
origin: >
Bootstrap#14972

18
docs/_data/showcase.yml
View File

@ -1,7 +1,12 @@
- name: Red Antler - name: Lyft
url: http://www.redantler.com/ url: https://www.lyft.com
expo_url: http://expo.getbootstrap.com/2014/02/24/redantler/ expo_url: http://expo.getbootstrap.com/2014/10/29/lyft/
img: redantler img: lyft
- name: Vogue
url: http://www.vogue.com
expo_url: http://expo.getbootstrap.com/2014/09/30/vogue/
img: vogue
- name: Riot Design - name: Riot Design
url: http://riotdesign.eu/en/ url: http://riotdesign.eu/en/
@ -12,8 +17,3 @@
url: http://www.newsweek.com/ url: http://www.newsweek.com/
expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/ expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
img: newsweek img: newsweek
- name: Robinhood
url: https://www.robinhood.com
expo_url: http://expo.getbootstrap.com/2014/02/26/robinhood/
img: robinhood

46
docs/_includes/components/button-dropdowns.html
View File

@ -12,7 +12,7 @@
<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"> <div class="bs-example">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -22,7 +22,7 @@
</ul> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -32,7 +32,7 @@
</ul> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -42,7 +42,7 @@
</ul> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -52,7 +52,7 @@
</ul> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -62,7 +62,7 @@
</ul> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -75,7 +75,7 @@
{% highlight html %} {% highlight html %}
<!-- Single button --> <!-- Single button -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span> Action <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
@ -93,7 +93,7 @@
<div class="bs-example"> <div class="bs-example">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
@ -107,7 +107,7 @@
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
@ -121,7 +121,7 @@
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
@ -135,7 +135,7 @@
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
@ -149,7 +149,7 @@
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
@ -163,7 +163,7 @@
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
@ -180,7 +180,7 @@
<!-- Split button --> <!-- Split button -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
@ -199,7 +199,7 @@
<div class="bs-example"> <div class="bs-example">
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button <span class="caret"></span> Large button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
@ -213,7 +213,7 @@
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button <span class="caret"></span> Small button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
@ -227,7 +227,7 @@
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Extra small button <span class="caret"></span> Extra small button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
@ -243,7 +243,7 @@
{% highlight html %} {% highlight html %}
<!-- Large button group --> <!-- Large button group -->
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button <span class="caret"></span> Large button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
@ -253,7 +253,7 @@
<!-- Small button group --> <!-- Small button group -->
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button <span class="caret"></span> Small button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
@ -263,7 +263,7 @@
<!-- Extra small button group --> <!-- Extra small button group -->
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Extra small button <span class="caret"></span> Extra small button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
@ -278,7 +278,7 @@
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
@ -292,7 +292,7 @@
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-primary">Right dropup</button> <button type="button" class="btn btn-primary">Right dropup</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
@ -309,7 +309,7 @@
{% highlight html %} {% highlight html %}
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>

143
docs/_includes/components/button-groups.html
View File

@ -8,17 +8,24 @@
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p> <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div> </div>
<div class="bs-callout bs-callout-warning">
<h4>Ensure correct <code>role</code> and provide a label</h4>
<p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
<p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code>&lt;button&gt;</code> elements) or a dropdown.</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>
<h3 id="btn-groups-single">Basic example</h3> <h3 id="btn-groups-single">Basic example</h3>
<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"> <div class="bs-example">
<div class="btn-group" style="margin: 9px 0 5px;"> <div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button> <button type="button" class="btn btn-default">Right</button>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="btn-group"> <div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button> <button type="button" class="btn btn-default">Right</button>
@ -28,79 +35,74 @@
<h3 id="btn-groups-toolbar">Button toolbar</h3> <h3 id="btn-groups-toolbar">Button toolbar</h3>
<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"> <div class="bs-example">
<div class="btn-toolbar" role="toolbar" style="margin: 0;"> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group"> <div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button> <button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button> <button type="button" class="btn btn-default">4</button>
</div> </div>
<div class="btn-group"> <div class="btn-group" role="group" aria-label="Second group">
<button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button> <button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button> <button type="button" class="btn btn-default">7</button>
</div> </div>
<div class="btn-group"> <div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-default">8</button> <button type="button" class="btn btn-default">8</button>
</div> </div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group">...</div> <div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group">...</div> <div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group">...</div> <div class="btn-group" role="group" aria-label="...">...</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="btn-groups-sizing">Sizing</h3> <h3 id="btn-groups-sizing">Sizing</h3>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p> <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-toolbar" role="toolbar"> <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div> </div>
<div class="btn-toolbar" role="toolbar"> <br>
<div class="btn-group"> <div class="btn-group" role="group" aria-label="Default button group">
<button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button> <button type="button" class="btn btn-default">Right</button>
</div>
</div> </div>
<div class="btn-toolbar" role="toolbar"> <br>
<div class="btn-group btn-group-sm"> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button> <button type="button" class="btn btn-default">Right</button>
</div>
</div> </div>
<div class="btn-toolbar" role="toolbar"> <br>
<div class="btn-group btn-group-xs"> <div class="btn-group btn-group-xs" role="group" aria-label="Extra-small button group">
<button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button> <button type="button" class="btn btn-default">Right</button>
</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="btn-group btn-group-lg">...</div> <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group">...</div> <div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs">...</div> <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
{% endhighlight %} {% endhighlight %}
<h3 id="btn-groups-nested">Nesting</h3> <h3 id="btn-groups-nested">Nesting</h3>
<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"> <div class="bs-example">
<div class="btn-group"> <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">2</button>
<div class="btn-group"> <div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -112,12 +114,12 @@
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="btn-group"> <div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">2</button>
<div class="btn-group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -132,11 +134,11 @@
<h3 id="btn-groups-vertical">Vertical variation</h3> <h3 id="btn-groups-vertical">Vertical variation</h3>
<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"> <div class="bs-example">
<div class="btn-group-vertical"> <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button>
<div class="btn-group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -147,8 +149,8 @@
</div> </div>
<button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button>
<div class="btn-group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -157,8 +159,8 @@
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -167,8 +169,8 @@
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -180,7 +182,7 @@
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="btn-group-vertical"> <div class="btn-group-vertical" role="group" aria-label="...">
... ...
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -201,17 +203,17 @@
<h4>With <code>&lt;a&gt;</code> elements</h4> <h4>With <code>&lt;a&gt;</code> elements</h4>
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p> <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<a href="#" class="btn btn-default" role="button">Left</a> <a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a> <a href="#" class="btn btn-default" role="button">Middle</a>
<a href="#" class="btn btn-default" role="button">Right</a> <a href="#" class="btn btn-default" role="button">Right</a>
</div> </div>
<br> <br>
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
<a href="#" class="btn btn-default" role="button">Left</a> <a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a> <a href="#" class="btn btn-default" role="button">Middle</a>
<div class="btn-group"> <div class="btn-group" role="group">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
@ -225,35 +227,40 @@
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified" role="group" aria-label="...">
... ...
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Links acting as buttons</h4>
<p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
</div>
<h4>With <code>&lt;button&gt;</code> elements</h4> <h4>With <code>&lt;button&gt;</code> elements</h4>
<p>To use justified button groups with <code>&lt;button&gt;</code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code>&lt;button&gt;</code> elements, but since we support button dropdowns, we can workaround that.</p> <p>To use justified button groups with <code>&lt;button&gt;</code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code>&lt;button&gt;</code> elements, but since we support button dropdowns, we can work around that.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<div class="btn-group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Left</button>
</div> </div>
<div class="btn-group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Middle</button>
</div> </div>
<div class="btn-group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button> <button type="button" class="btn btn-default">Right</button>
</div> </div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Left</button>
</div> </div>
<div class="btn-group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Middle</button>
</div> </div>
<div class="btn-group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button> <button type="button" class="btn btn-default">Right</button>
</div> </div>
</div> </div>

10
docs/_includes/components/dropdowns.html
View File

@ -7,7 +7,7 @@
<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.</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="dropdownMenu1" data-toggle="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -21,7 +21,7 @@
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -54,7 +54,7 @@
<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"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -80,7 +80,7 @@
<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">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -105,7 +105,7 @@
<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"> <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>

47
docs/_includes/components/glyphicons.html
View File

@ -7,7 +7,7 @@
<ul class="bs-glyphicons-list"> <ul class="bs-glyphicons-list">
{% for iconClassName in site.data.glyphicons %} {% for iconClassName in site.data.glyphicons %}
<li> <li>
<span class="glyphicon {{ iconClassName }}"></span> <span class="glyphicon {{ iconClassName }}" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon {{ iconClassName }}</span> <span class="glyphicon-class">glyphicon {{ iconClassName }}</span>
</li> </li>
{% endfor %} {% endfor %}
@ -35,8 +35,14 @@
</ul> </ul>
<p>Use whatever option best suits your specific development setup.</p> <p>Use whatever option best suits your specific development setup.</p>
</div> </div>
<div class="bs-callout bs-callout-warning">
<h4>Accessible icons</h4>
<p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p>
<p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p>
<p>If you're creating controls with no other text (such as a <code>&lt;button&gt;</code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p>
</div>
{% highlight html %} {% highlight html %}
<span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
{% endhighlight %} {% endhighlight %}
@ -45,22 +51,41 @@
<div class="bs-example"> <div class="bs-example">
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span> <span class="sr-only">Left Align</span></button> <button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span> <span class="sr-only">Center Align</span></button> <button type="button" class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span> <span class="sr-only">Right Align</span></button> <button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span> <span class="sr-only">Justify</span></button> <button type="button" class="btn btn-default" aria-label="Justify"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
</div> </div>
</div> </div>
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button> <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button> <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star"></span> Star</button> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg"> <button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button> </button>
{% endhighlight %}
<p>An icon used in an <a href="#alerts">alert</a> to convey that it's an error message, with additional <code>.sr-only</code> text to convey this hint to users of assistive technologies.</p>
<div class="bs-example">
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
</div>
{% highlight html %}
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
{% endhighlight %} {% endhighlight %}
</div> </div>

12
docs/_includes/components/input-groups.html
View File

@ -187,7 +187,7 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -203,7 +203,7 @@
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu"> <ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -221,7 +221,7 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -237,7 +237,7 @@
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu"> <ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -258,7 +258,7 @@
<div class="input-group"> <div class="input-group">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button> <button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
@ -278,7 +278,7 @@
<input type="text" class="form-control"> <input type="text" class="form-control">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button> <button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>

10
docs/_includes/components/media.html
View File

@ -43,16 +43,16 @@
</a> </a>
</div> </div>
<div class="media"> <div class="media">
<a class="pull-right" href="#"> <a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<a class="pull-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image"> <img data-src="holder.js/64x64" alt="Generic placeholder image">
</a> </a>
<div class="media-body"> <div class="media-body">
<h4 class="media-heading">Deprecated pull-right pull-left example</h4> <h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div> </div>
<a class="media-right" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div> </div>
</div><!-- /.bs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}

12
docs/_includes/components/navbar.html
View File

@ -40,10 +40,10 @@
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -64,7 +64,7 @@
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -95,10 +95,10 @@
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -119,7 +119,7 @@
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>

57
docs/_includes/components/navs.html
View File

@ -3,38 +3,45 @@
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p> <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
<div class="bs-callout bs-callout-info">
<h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Make navs used as navigation accessible</h4>
<p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code>&lt;ul&gt;</code>, or wrap a <code>&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code>&lt;ul&gt;</code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
</div>
<h2 id="nav-tabs">Tabs</h2> <h2 id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p> <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs">
<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>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs">
<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>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-info">
<h4>Requires JavaScript tabs plugin</h4>
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p>
</div>
<h2 id="nav-pills">Pills</h2> <h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills">
<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>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills">
<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>
@ -42,14 +49,14 @@
{% endhighlight %} {% endhighlight %}
<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"> <div class="bs-example">
<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;"> <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
<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>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills nav-stacked" role="tablist"> <ul class="nav nav-pills nav-stacked">
... ...
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -60,26 +67,26 @@
<p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p> <p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
<h4>Safari and responsive justified navs</h4> <h4>Safari and responsive justified navs</h4>
<p>As of v7.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p> <p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
</div> </div>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-tabs nav-justified" role="tablist"> <ul class="nav nav-tabs nav-justified">
<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>
</ul> </ul>
<br> <br>
<ul class="nav nav-pills nav-justified" role="tablist"> <ul class="nav nav-pills nav-justified">
<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>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs nav-justified" role="tablist"> <ul class="nav nav-tabs nav-justified">
... ...
</ul> </ul>
<ul class="nav nav-pills nav-justified" role="tablist"> <ul class="nav nav-pills nav-justified">
... ...
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -94,14 +101,14 @@
</div> </div>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills">
<li role="presentation"><a href="#">Clickable link</a></li> <li role="presentation"><a href="#">Clickable link</a></li>
<li role="presentation"><a href="#">Clickable link</a></li> <li role="presentation"><a href="#">Clickable link</a></li>
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li> <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills">
... ...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li> <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
... ...
@ -114,11 +121,11 @@
<h3>Tabs with dropdowns</h3> <h3>Tabs with dropdowns</h3>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs">
<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="#">Help</a></li> <li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown"> <li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
@ -132,10 +139,10 @@
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs">
... ...
<li role="presentation" class="dropdown"> <li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
@ -148,11 +155,11 @@
<h3>Pills with dropdowns</h3> <h3>Pills with dropdowns</h3>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills">
<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="#">Help</a></li> <li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown"> <li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
@ -166,10 +173,10 @@
</ul> </ul>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills">
... ...
<li role="presentation" class="dropdown"> <li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">

46
docs/_includes/components/pagination.html
View File

@ -8,26 +8,26 @@
<div class="bs-example"> <div class="bs-example">
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li><a href="#">&laquo;</a></li> <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li> <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li><a href="#">&laquo;</a></li> <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li> <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul> </ul>
</nav> </nav>
{% endhighlight %} {% endhighlight %}
@ -37,30 +37,30 @@
<div class="bs-example"> <div class="bs-example">
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li> <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li> <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li> <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
... ...
</ul> </ul>
</nav> </nav>
{% endhighlight %} {% endhighlight %}
<p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p> <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
{% highlight html %} {% highlight html %}
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><span>&laquo;</span></li> <li class="disabled"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li> <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
... ...
</ul> </ul>
@ -73,35 +73,35 @@
<div class="bs-example"> <div class="bs-example">
<nav> <nav>
<ul class="pagination pagination-lg"> <ul class="pagination pagination-lg">
<li><a href="#">&laquo;</a></li> <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li> <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul> </ul>
</nav> </nav>
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li><a href="#">&laquo;</a></li> <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li> <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul> </ul>
</nav> </nav>
<nav> <nav>
<ul class="pagination pagination-sm"> <ul class="pagination pagination-sm">
<li><a href="#">&laquo;</a></li> <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li> <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
@ -139,16 +139,16 @@
<div class="bs-example"> <div class="bs-example">
<nav> <nav>
<ul class="pager"> <ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li> <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li> <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav> <nav>
<ul class="pager"> <ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li> <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li> <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul> </ul>
</nav> </nav>
{% endhighlight %} {% endhighlight %}
@ -159,16 +159,16 @@
<div class="bs-example"> <div class="bs-example">
<nav> <nav>
<ul class="pager"> <ul class="pager">
<li class="previous disabled"><a href="#">&larr; Older</a></li> <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li> <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav> <nav>
<ul class="pager"> <ul class="pager">
<li class="previous disabled"><a href="#">&larr; Older</a></li> <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li> <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul> </ul>
</nav> </nav>
{% endhighlight %} {% endhighlight %}

14
docs/_includes/css/buttons.html
View File

@ -35,6 +35,11 @@
<button type="button" class="btn btn-link">Link</button> <button type="button" class="btn btn-link">Link</button>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Conveying meaning to assistive technologies</h4>
<p>Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>sr-only</code> class.</p>
</div>
<h2 id="buttons-sizes">Sizes</h2> <h2 id="buttons-sizes">Sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p> <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
<div class="bs-example"> <div class="bs-example">
@ -88,7 +93,7 @@
<h2 id="buttons-active">Active state</h2> <h2 id="buttons-active">Active state</h2>
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</code>s should you need to replicate the active state programmatically.</p> <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</code>s (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the active state programmatically.</p>
<h3>Button element</h3> <h3>Button element</h3>
<p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p> <p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
@ -147,7 +152,7 @@
</p> </p>
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
<h4>Link functionality caveat</h4> <h4>Link functionality caveat</h4>
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a&gt;</code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p> <p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a&gt;</code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
</div> </div>
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
<h4>Context-specific usage</h4> <h4>Context-specific usage</h4>
@ -170,6 +175,11 @@
<input class="btn btn-default" type="submit" value="Submit"> <input class="btn btn-default" type="submit" value="Submit">
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Links acting as buttons</h4>
<p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
</div>
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
<h4>Cross-browser rendering</h4> <h4>Cross-browser rendering</h4>
<p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p> <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>

116
docs/_includes/css/forms.html
View File

@ -63,7 +63,7 @@
</div> </div>
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
<h4>Always add labels</h4> <h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p> <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
</div> </div>
<div class="bs-example"> <div class="bs-example">
<form class="form-inline" role="form"> <form class="form-inline" role="form">
@ -91,14 +91,11 @@
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<form class="form-inline" role="form"> <form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group"> <div class="form-group">
<div class="input-group"> <div class="input-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<div class="input-group-addon">@</div> <div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -205,7 +202,7 @@
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p> <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<div class="bs-example"> <div class="bs-example">
<form role="form"> <form role="form">
<textarea class="form-control" rows="3"></textarea> <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
</form> </form>
</div><!-- /.bs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
@ -334,18 +331,18 @@
</label> </label>
{% endhighlight %} {% endhighlight %}
<h4>Checkboxes and radios without labels</h4> <h4>Checkboxes and radios without label text</h4>
<p>Should you have no text within the <code>&lt;label&gt;</code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong></p> <p>Should you have no text within the <code>&lt;label&gt;</code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong> Remember to still provide some form of label for assistive technologies (for instance, using <code>aria-label</code>).</p>
<div class="bs-example"> <div class="bs-example">
<form role="form"> <form role="form">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" id="blankCheckbox" value="option1"> <input type="checkbox" id="blankCheckbox" value="option1" aria-label="Checkbox without label text">
</label> </label>
</div> </div>
<div class="radio"> <div class="radio">
<label> <label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1"> <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="Radio button without label text">
</label> </label>
</div> </div>
</form> </form>
@ -353,12 +350,12 @@
{% highlight html %} {% highlight html %}
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" id="blankCheckbox" value="option1"> <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label> </label>
</div> </div>
<div class="radio"> <div class="radio">
<label> <label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1"> <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label> </label>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -464,7 +461,7 @@
</form> </form>
{% endhighlight %} {% endhighlight %}
<h2 id="forms-control-focus">Input focus</h2> <h2 id="forms-control-focus">Focus state</h2>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<div class="bs-example"> <div class="bs-example">
<form role="form"> <form role="form">
@ -477,7 +474,7 @@
</div> </div>
<h2 id="forms-control-disabled">Disabled inputs</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 input and trigger a slightly different look.</p>
<div class="bs-example"> <div class="bs-example">
<form role="form"> <form role="form">
@ -547,7 +544,7 @@
{% endhighlight %} {% endhighlight %}
<h2 id="forms-control-readonly">Readonly inputs</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 user input and style the input as disabled.</p>
<div class="bs-example"> <div class="bs-example">
<form role="form"> <form role="form">
@ -562,6 +559,12 @@
<h2 id="forms-control-validation">Validation states</h2> <h2 id="forms-control-validation">Validation states</h2>
<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">
<h4>Conveying validation state to assistive technologies</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>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>
</div>
<div class="bs-example"> <div class="bs-example">
<form role="form"> <form role="form">
<div class="form-group has-success"> <div class="form-group has-success">
@ -648,40 +651,51 @@
<h4>Icons, labels, and input groups</h4> <h4>Icons, labels, and input groups</h4>
<p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p> <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
</div> </div>
<div class="bs-callout bs-callout-warning">
<h4>Conveying the icon's meaning to assistive technologies</h4>
<p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>sr-only</code> class and explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code>&lt;label&gt;</code> associated with the form control.</p>
<p>Although the following examples already mention the validation state of their respective form controls in the <code>&lt;label&gt;</code> text itself, the above technique (using <code>sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
</div>
<div class="bs-example"> <div class="bs-example">
<form role="form"> <form role="form">
<div class="form-group has-success has-feedback"> <div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label> <label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2"> <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div> </div>
<div class="form-group has-warning has-feedback"> <div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label> <label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2"> <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div> </div>
<div class="form-group has-error has-feedback"> <div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label> <label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2"> <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback"></span> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div> </div>
</form> </form>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="form-group has-success has-feedback"> <div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label> <label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2"> <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div> </div>
<div class="form-group has-warning has-feedback"> <div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label> <label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2"> <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div> </div>
<div class="form-group has-error has-feedback"> <div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label> <label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2"> <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback"></span> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -691,8 +705,9 @@
<div class="form-group has-success has-feedback"> <div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label> <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3"> <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div> </div>
</div> </div>
</form> </form>
@ -702,8 +717,9 @@
<div class="form-group has-success has-feedback"> <div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label> <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3"> <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div> </div>
</div> </div>
</form> </form>
@ -713,8 +729,9 @@
<form class="form-inline" role="form"> <form class="form-inline" role="form">
<div class="form-group has-success has-feedback"> <div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label> <label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4"> <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div> </div>
</form> </form>
</div> </div>
@ -722,8 +739,9 @@
<form class="form-inline" role="form"> <form class="form-inline" role="form">
<div class="form-group has-success has-feedback"> <div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label> <label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4"> <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div> </div>
</form> </form>
{% endhighlight %} {% endhighlight %}
@ -733,15 +751,17 @@
<div class="bs-example"> <div class="bs-example">
<div class="form-group has-success has-feedback"> <div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label> <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5"> <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="form-group has-success has-feedback"> <div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label> <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5"> <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -849,13 +869,23 @@
<h2 id="forms-help-text">Help text</h2> <h2 id="forms-help-text">Help text</h2>
<p>Block level help text for form controls.</p> <p>Block level help text for form controls.</p>
<div class="bs-callout bs-callout-info">
<h4>Associating help text with form controls</h4>
<p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
</div>
<div class="bs-example"> <div class="bs-example">
<form role="form"> <form role="form">
<input type="text" class="form-control"> <div class="form-group">
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> <label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
</div>
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form> </form>
</div><!-- /.bs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> <label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %} {% endhighlight %}
</div> </div>

2
docs/_includes/css/grid.html
View File

@ -226,7 +226,7 @@
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktops</h3> <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktop</h3>
<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">

8
docs/_includes/css/helpers.html
View File

@ -23,6 +23,10 @@
<h4>Dealing with specificity</h4> <h4>Dealing with specificity</h4>
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code>&lt;span&gt;</code> with the class.</p> <p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code>&lt;span&gt;</code> with the class.</p>
</div> </div>
<div class="bs-callout bs-callout-warning">
<h4>Conveying meaning to assistive technologies</h4>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
</div>
<h3 id="helper-classes-backgrounds">Contextual backgrounds</h3> <h3 id="helper-classes-backgrounds">Contextual backgrounds</h3>
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p> <p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
@ -44,6 +48,10 @@
<h4>Dealing with specificity</h4> <h4>Dealing with specificity</h4>
<p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code>&lt;div&gt;</code> with the class.</p> <p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code>&lt;div&gt;</code> with the class.</p>
</div> </div>
<div class="bs-callout bs-callout-warning">
<h4>Conveying meaning to assistive technologies</h4>
<p>As with <a href="#helper-classes-colors">contextual colors</a>, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
</div>
<h3 id="helper-classes-close">Close icon</h3> <h3 id="helper-classes-close">Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p> <p>Use the generic close icon for dismissing content like modals and alerts.</p>

5
docs/_includes/css/tables.html
View File

@ -346,7 +346,10 @@
<td class="info">...</td> <td class="info">...</td>
</tr> </tr>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Conveying meaning to assistive technologies</h4>
<p>Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the <code>sr-only</code> class.</p>
</div>
<h2 id="tables-responsive">Responsive tables</h2> <h2 id="tables-responsive">Responsive tables</h2>
<p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p> <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>

7
docs/_includes/customizer-variables.html
View File

@ -31,7 +31,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="col-xs-4"> <div class="col-xs-4">
<label for="input-@brand-primary">@brand-primary</label> <label for="input-@brand-primary">@brand-primary</label>
<input id="input-@brand-primary" type="text" value="#428bca" data-var="@brand-primary" class="form-control"/> <input id="input-@brand-primary" type="text" value="darken(#428bca, 6.5%)" data-var="@brand-primary" class="form-control"/>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<label for="input-@brand-success">@brand-success</label> <label for="input-@brand-success">@brand-success</label>
@ -486,6 +486,11 @@
<input id="input-@input-group-addon-border-color" type="text" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/> <input id="input-@input-group-addon-border-color" type="text" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/>
<p class="help-block">Border color for textual input addons</p> <p class="help-block">Border color for textual input addons</p>
</div> </div>
<div class="col-xs-4">
<label for="input-@cursor-disabled">@cursor-disabled</label>
<input id="input-@cursor-disabled" type="text" value="not-allowed" data-var="@cursor-disabled" class="form-control"/>
<p class="help-block">Disabled cursor for form controls and buttons.</p>
</div>
</div> </div>
<h2 id="dropdowns">Dropdowns</h2> <h2 id="dropdowns">Dropdowns</h2>
<p>Dropdown menu container and contents.</p> <p>Dropdown menu container and contents.</p>

25
docs/_includes/footer.html
View File

@ -33,21 +33,32 @@
================================================== --> ================================================== -->
<!-- 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.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
{% if site.github %} {% if site.github %}
<script src="../dist/js/bootstrap.min.js"></script> <script src="../dist/js/bootstrap.min.js"></script>
{% else %} {% else %}
<script src="../dist/js/bootstrap.js"></script> <script src="../dist/js/bootstrap.js"></script>
{% endif %} {% endif %}
{% if site.github %} {% if site.github %}
<script src="../assets/js/docs.min.js"></script> <script src="../assets/js/docs.min.js"></script>
{% else %} {% else %}
<script src="../assets/js/vendor/holder.js"></script> {% for file in site.data.configBridge.paths.docsJs %}
<script src="../assets/js/vendor/ZeroClipboard.min.js"></script> <script src="{{ file }}"></script>
<script src="../assets/js/src/application.js"></script> {% endfor %}
{% endif %} {% endif %}
{% if page.slug == "customize" %} {% if page.slug == "customize" %}
<script src="../assets/js/customize.min.js"></script> <script>var __configBridge = {{ site.data.configBridge.config | jsonify }}</script>
{% if site.github %}
<script src="../assets/js/customize.min.js"></script>
{% else %}
{% for file in site.data.configBridge.paths.customizerJs %}
<script src="{{ file }}"></script>
{% endfor %}
{% endif %}
{% endif %} {% endif %}
<!-- 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>

5
docs/_includes/getting-started/accessibility.html
View File

@ -17,9 +17,14 @@
<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>
<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> <h3>Additional resources</h3>
<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="http://www.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a>
<li><a href="http://a11yproject.com/">The A11Y Project</a></li> <li><a href="http://a11yproject.com/">The A11Y Project</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
</ul> </ul>

61
docs/_includes/getting-started/browser-device-support.html
View File

@ -19,33 +19,33 @@
<tbody> <tbody>
<tr> <tr>
<th>Android</th> <th>Android</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td> <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td> <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
<td class="text-muted">N/A</td> <td class="text-muted">N/A</td>
</tr> </tr>
<tr> <tr>
<th>iOS</th> <th>iOS</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-muted">N/A</td> <td class="text-muted">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td> <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr> </tr>
<tr> <tr>
<th>Mac OS X</th> <th>Mac OS X</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr> </tr>
<tr> <tr>
<th>Windows</th> <th>Windows</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td> <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -67,26 +67,26 @@
<tbody> <tbody>
<tr> <tr>
<th scope="row"><code>border-radius</code></th> <th scope="row"><code>border-radius</code></th>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td> <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr> </tr>
<tr> <tr>
<th scope="row"><code>box-shadow</code></th> <th scope="row"><code>box-shadow</code></th>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td> <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr> </tr>
<tr> <tr>
<th scope="row"><code>transform</code></th> <th scope="row"><code>transform</code></th>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td> <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported, with <code>-ms</code> prefix</td> <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported, with <code>-ms</code> prefix</td>
</tr> </tr>
<tr> <tr>
<th scope="row"><code>transition</code></th> <th scope="row"><code>transition</code></th>
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td> <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
</tr> </tr>
<tr> <tr>
<th scope="row"><code>placeholder</code></th> <th scope="row"><code>placeholder</code></th>
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td> <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -165,13 +165,22 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<h3 id="support-browser-zooming">Browser zooming</h3> <h3 id="support-browser-zooming">Browser zooming</h3>
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p> <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">Printer viewports</h3> <h3 id="support-printing">Printing</h3>
<p>Even in some modern browsers, printing can be quirky. 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>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>
<ul> <ul>
<li>Embrace the extra-small grid and make sure your page looks acceptable under it.</li> <li>Embrace the extra-small grid and make sure your page looks acceptable under it.</li>
<li>Customize the values of the <code>@screen-*</code> Less variables so that your printer paper is considered larger than extra-small.</li> <li>Customize the values of the <code>@screen-*</code> Less variables so that your printer paper is considered larger than extra-small.</li>
<li>Add custom media queries to change the grid size breakpoints for print media only.</li> <li>Add custom media queries to change the grid size breakpoints for print media only.</li>
</ul> </ul>
<p>Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p>
{% highlight css %}
@media print {
.container {
width: auto;
}
}
{% endhighlight %}
<h3 id="support-android-stock-browser">Android stock browser</h3> <h3 id="support-android-stock-browser">Android stock browser</h3>
<p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p> <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>
@ -193,5 +202,5 @@ $(function () {
<h3 id="support-validators">Validators</h3> <h3 id="support-validators">Validators</h3>
<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 href="#support-ie-compatibility-modes">X-UA-Compatible <code>&lt;meta&gt;</code> tags</a> to avoid Internet Explorer issues and 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>
</div> </div>

19
docs/_includes/js/carousel.html
View File

@ -1,7 +1,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<h1 id="carousel" class="page-header">Carousel <small>carousel.js</small></h1> <h1 id="carousel" class="page-header">Carousel <small>carousel.js</small></h1>
<p>A slideshow component for cycling through elemnts, like a carousel. <strong>Nested carousels are not supported.</strong></p> <p>A slideshow component for cycling through elements, like a carousel. <strong>Nested carousels are not supported.</strong></p>
<h2 id="carousel-examples">Examples</h2> <h2 id="carousel-examples">Examples</h2>
<div class="bs-example"> <div class="bs-example">
@ -23,11 +23,11 @@
</div> </div>
</div> </div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
</div> </div>
@ -60,11 +60,11 @@
<!-- Controls --> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
</div> </div>
@ -75,6 +75,11 @@
<p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 &amp; 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p> <p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 &amp; 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p>
</div> </div>
<div class="bs-callout bs-callout-warning" id="callout-carousel-active">
<h4>Initial active element required</h4>
<p>The <code>.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
</div>
<h3>Optional captions</h3> <h3>Optional captions</h3>
<p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p> <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
<div class="bs-example"> <div class="bs-example">
@ -108,11 +113,11 @@
</div> </div>
</div> </div>
<a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev"> <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next"> <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
</div> </div>

18
docs/_includes/js/dropdowns.html
View File

@ -20,7 +20,7 @@
<div class="collapse navbar-collapse bs-example-js-navbar-collapse"> <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="dropdown"> <li class="dropdown">
<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</a> </a>
@ -33,7 +33,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</a> </a>
@ -48,7 +48,7 @@
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> <li id="fat-menu" class="dropdown">
<a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</a> </a>
@ -71,7 +71,7 @@
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Regular link</a></li> <li role="presentation" class="active"><a href="#">Regular link</a></li>
<li role="presentation" class="dropdown"> <li role="presentation" class="dropdown">
<a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</a> </a>
@ -84,7 +84,7 @@
</ul> </ul>
</li> </li>
<li role="presentation" class="dropdown"> <li role="presentation" class="dropdown">
<a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</a> </a>
@ -97,7 +97,7 @@
</ul> </ul>
</li> </li>
<li role="presentation" class="dropdown"> <li role="presentation" class="dropdown">
<a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</a> </a>
@ -122,9 +122,9 @@
<p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p> <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
{% highlight html %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Dropdown trigger Dropdown trigger
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
... ...
@ -134,7 +134,7 @@
<p>To keep URLs intact with link buttons, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p> <p>To keep URLs intact with link buttons, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
{% highlight html %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Dropdown trigger Dropdown trigger
<span class="caret"></span> <span class="caret"></span>
</a> </a>

82
docs/_includes/js/modal.html
View File

@ -211,6 +211,86 @@
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> <div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
... ...
</div> </div>
{% endhighlight %}
<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>
<div class="bs-example" style="padding-bottom: 24px;">
<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="@twbootstrap">Open modal for @twbootstrap</button>
...more buttons...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div><!-- /.modal -->
</div><!-- /.bs-example -->
{% highlight html %}
<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="@twbootstrap">Open modal for @twbootstrap</button>
...more buttons...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
{% endhighlight %}
{% highlight js %}
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
{% endhighlight %} {% endhighlight %}
<h2 id="modals-usage">Usage</h2> <h2 id="modals-usage">Usage</h2>
@ -262,7 +342,7 @@
<td>path</td> <td>path</td>
<td>false</td> <td>false</td>
<td> <td>
<p><span class="text-danger">This option is deprecated since v3.2.1 and will be removed in v4.</span> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p> <p><strong class="text-danger">This option is deprecated since v3.3.0 and will be removed in v4.</strong> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p>
<p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p> <p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
{% highlight html %} {% highlight html %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

6
docs/_includes/js/popovers.html
View File

@ -12,6 +12,12 @@
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Opt-in functionality</h4> <h4>Opt-in functionality</h4>
<p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p> <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
<p>One way to initialize all popovers on a page would be to select them by their <code>data-toggle</code> attribute:</p>
{% highlight js %}
$(function () {
$('[data-toggle="popover"]').popover()
})
{% endhighlight %}
</div> </div>
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
<h4>Popovers in button groups and input groups require special setting</h4> <h4>Popovers in button groups and input groups require special setting</h4>

2
docs/_includes/js/scrollspy.html
View File

@ -20,7 +20,7 @@
<li><a href="#fat">@fat</a></li> <li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li> <li><a href="#mdo">@mdo</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li><a href="#one" tabindex="-1">one</a></li> <li><a href="#one" tabindex="-1">one</a></li>
<li><a href="#two" tabindex="-1">two</a></li> <li><a href="#two" tabindex="-1">two</a></li>

40
docs/_includes/js/tabs.html
View File

@ -3,7 +3,7 @@
<h2 id="tabs-examples">Example tabs</h2> <h2 id="tabs-examples">Example tabs</h2>
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p> <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
<div class="bs-example bs-example-tabs"> <div class="bs-example bs-example-tabs" role="tabpanel">
<ul id="myTab" class="nav nav-tabs" role="tablist"> <ul id="myTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li> <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li> <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
@ -59,20 +59,24 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
<h3>Markup</h3> <h3>Markup</h3>
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p> <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
{% highlight html %} {% highlight html %}
<!-- Nav tabs --> <div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> <!-- Nav tabs -->
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
</ul> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -94,10 +98,10 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
</p> </p>
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs" role="tablist" id="myTab"> <ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">

7
docs/_includes/js/tooltips.html
View File

@ -61,6 +61,13 @@
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Opt-in functionality</h4> <h4>Opt-in functionality</h4>
<p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p> <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
<p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p>
{% highlight js %}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
{% endhighlight %}
</div> </div>
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
<h4>Tooltips in button groups and input groups require special setting</h4> <h4>Tooltips in button groups and input groups require special setting</h4>

6
docs/_includes/nav/components.html
View File

@ -10,7 +10,7 @@
<a href="#dropdowns">Dropdowns</a> <a href="#dropdowns">Dropdowns</a>
<ul class="nav"> <ul class="nav">
<li><a href="#dropdowns-example">Example</a></li> <li><a href="#dropdowns-example">Example</a></li>
<li><a href="#dropdowns-alignment">Alignment options</a></li> <li><a href="#dropdowns-alignment">Alignment</a></li>
<li><a href="#dropdowns-headers">Headers</a></li> <li><a href="#dropdowns-headers">Headers</a></li>
<li><a href="#dropdowns-divider">Divider</a></li> <li><a href="#dropdowns-divider">Divider</a></li>
<li><a href="#dropdowns-disabled">Disabled menu items</a></li> <li><a href="#dropdowns-disabled">Disabled menu items</a></li>
@ -24,7 +24,7 @@
<li><a href="#btn-groups-sizing">Sizing</a></li> <li><a href="#btn-groups-sizing">Sizing</a></li>
<li><a href="#btn-groups-nested">Nesting</a></li> <li><a href="#btn-groups-nested">Nesting</a></li>
<li><a href="#btn-groups-vertical">Vertical variation</a></li> <li><a href="#btn-groups-vertical">Vertical variation</a></li>
<li><a href="#btn-groups-justified">Justified link variation</a></li> <li><a href="#btn-groups-justified">Justified button groups</a></li>
</ul> </ul>
</li> </li>
<li> <li>
@ -52,7 +52,7 @@
<ul class="nav"> <ul class="nav">
<li><a href="#nav-tabs">Tabs</a></li> <li><a href="#nav-tabs">Tabs</a></li>
<li><a href="#nav-pills">Pills</a></li> <li><a href="#nav-pills">Pills</a></li>
<li><a href="#nav-justified">Justified nav</a></li> <li><a href="#nav-justified">Justified</a></li>
<li><a href="#nav-disabled-links">Disabled links</a></li> <li><a href="#nav-disabled-links">Disabled links</a></li>
<li><a href="#nav-dropdowns">Using dropdowns</a></li> <li><a href="#nav-dropdowns">Using dropdowns</a></li>
</ul> </ul>

12
docs/_includes/nav/css.html
View File

@ -16,8 +16,8 @@
<li><a href="#grid-options">Grid options</a></li> <li><a href="#grid-options">Grid options</a></li>
<li><a href="#grid-example-basic">Ex: Stacked-to-horizontal</a></li> <li><a href="#grid-example-basic">Ex: Stacked-to-horizontal</a></li>
<li><a href="#grid-example-fluid">Ex: Fluid container</a></li> <li><a href="#grid-example-fluid">Ex: Fluid container</a></li>
<li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li> <li><a href="#grid-example-mixed">Ex: Mobile and desktop</a></li>
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li> <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
<li><a href="#grid-example-wrapping">Ex: Column wrapping</a></li> <li><a href="#grid-example-wrapping">Ex: Column wrapping</a></li>
<li><a href="#grid-responsive-resets">Responsive column resets</a></li> <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
<li><a href="#grid-offsetting">Offsetting columns</a></li> <li><a href="#grid-offsetting">Offsetting columns</a></li>
@ -43,9 +43,9 @@
<li> <li>
<a href="#code">Code</a> <a href="#code">Code</a>
<ul class="nav"> <ul class="nav">
<li><a href="#code-inline">Inline code</a></li> <li><a href="#code-inline">Inline</a></li>
<li><a href="#code-user-input">User input</a></li> <li><a href="#code-user-input">User input</a></li>
<li><a href="#code-block">Blocks of code</a></li> <li><a href="#code-block">Basic block</a></li>
<li><a href="#code-variables">Variables</a></li> <li><a href="#code-variables">Variables</a></li>
<li><a href="#code-sample-output">Sample output</a></li> <li><a href="#code-sample-output">Sample output</a></li>
</ul> </ul>
@ -106,7 +106,7 @@
<li><a href="#helper-classes-center">Center content blocks</a></li> <li><a href="#helper-classes-center">Center content blocks</a></li>
<li><a href="#helper-classes-clearfix">Clearfix</a></li> <li><a href="#helper-classes-clearfix">Clearfix</a></li>
<li><a href="#helper-classes-show-hide">Showing and hiding content</a></li> <li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
<li><a href="#helper-classes-screen-readers">Screen reader content</a></li> <li><a href="#helper-classes-screen-readers">Screen reader and keyboard navigation content</a></li>
<li><a href="#helper-classes-image-replacement">Image replacement</a></li> <li><a href="#helper-classes-image-replacement">Image replacement</a></li>
</ul> </ul>
</li> </li>
@ -131,6 +131,6 @@
<a href="#sass">Using Sass</a> <a href="#sass">Using Sass</a>
<ul class="nav"> <ul class="nav">
<li><a href="#sass-contents">What's included</a></li> <li><a href="#sass-contents">What's included</a></li>
<li><a href="#sass-installation">Rails install</a></li> <li><a href="#sass-installation">Installation</a></li>
</ul> </ul>
</li> </li>

2
docs/_includes/nav/getting-started.html
View File

@ -56,7 +56,7 @@
<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-printing">Printer viewports</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>
</ul> </ul>

1
docs/_includes/nav/javascript.html
View File

@ -17,6 +17,7 @@
<li><a href="#modals-examples">Examples</a></li> <li><a href="#modals-examples">Examples</a></li>
<li><a href="#modals-sizes">Sizes</a></li> <li><a href="#modals-sizes">Sizes</a></li>
<li><a href="#modals-remove-animation">Remove animation</a></li> <li><a href="#modals-remove-animation">Remove animation</a></li>
<li><a href="#modals-related-target">Varying content based on trigger button</a></li>
<li><a href="#modals-usage">Usage</a></li> <li><a href="#modals-usage">Usage</a></li>
</ul> </ul>
</li> </li>

4
docs/_layouts/default.html
View File

@ -22,9 +22,10 @@
<div class="container bs-docs-container"> <div class="container bs-docs-container">
<div class="row"> <div class="row">
<div class="col-md-9" role="main"> <div class="col-md-{% if page.fullwidth == true %}12{% else %}9{% endif %}" role="main">
{{ content }} {{ content }}
</div> </div>
{% unless page.fullwidth == true %}
<div class="col-md-3"> <div class="col-md-3">
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary"> <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
<ul class="nav bs-docs-sidenav"> <ul class="nav bs-docs-sidenav">
@ -54,6 +55,7 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
{% endunless %}
</div> </div>
</div> </div>

9
docs/_plugins/bridge.rb Normal file
View File

@ -0,0 +1,9 @@
require 'yaml'
module Bridge
class Generator < Jekyll::Generator
def generate(site)
site.data["configBridge"] = YAML.load_file("./grunt/configBridge.json")
end
end
end

25
docs/_plugins/bugify.rb Normal file
View File

@ -0,0 +1,25 @@
module Jekyll
module BugFilter
def bugify(input)
upstream_map = {
"Bootstrap" => "https://github.com/twbs/bootstrap/issues/",
"IE" => ["https://connect.microsoft.com/IE/feedback/details/", "IE bug"],
"Mozilla" => ["https://bugzilla.mozilla.org/show_bug.cgi?id=", "Mozilla bug"],
"Chromium" => ["https://code.google.com/p/chromium/issues/detail?id=", "Chromium issue"],
"WebKit" => ["https://bugs.webkit.org/show_bug.cgi?id=", "WebKit bug"],
"Safari" => ["https://openradar.appspot.com/", "Apple Safari Radar"],
"Normalize" => ["https://github.com/necolas/normalize.css/issues/", "Normalize"]
}
upstream_map.each do |key, data|
url = data.is_a?(Array) ? data[0] : data
label = data.is_a?(Array) ? "#{data[1]} " : ""
input = input.gsub(/#{key}#(\d+)/, "<a href=\"#{url}\\1\">#{label}#\\1</a>")
end
return input
end
end
end
Liquid::Template.register_filter(Jekyll::BugFilter)

9
docs/about.html
View File

@ -99,15 +99,18 @@ lead: "Learn about the project's history, meet the maintaining teams, and find o
<div class="bs-brand-logos"> <div class="bs-brand-logos">
<div class="bs-brand-item"> <div class="bs-brand-item">
<h3>Bootstrap</h3> <h3>Bootstrap</h3>
<span class="glyphicon glyphicon-ok"></span> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="sr-only">(correct)</span>
</div> </div>
<div class="bs-brand-item"> <div class="bs-brand-item">
<h3 class="text-muted">BootStrap</h3> <h3 class="text-muted">BootStrap</h3>
<span class="glyphicon glyphicon-remove"></span> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<span class="sr-only">(incorrect)</span>
</div> </div>
<div class="bs-brand-item"> <div class="bs-brand-item">
<h3 class="text-muted">Twitter Bootstrap</h3> <h3 class="text-muted">Twitter Bootstrap</h3>
<span class="glyphicon glyphicon-remove"></span> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<span class="sr-only">(incorrect)</span>
</div> </div>
</div> </div>

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

File diff suppressed because one or more lines are too long

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

@ -437,7 +437,7 @@ body {
color: #333; color: #333;
} }
.bs-docs-featurette-img:hover { .bs-docs-featurette-img:hover {
color: #428bca; color: #337ab7;
text-decoration: none; text-decoration: none;
} }
.bs-docs-featurette-img img { .bs-docs-featurette-img img {
@ -638,8 +638,6 @@ body {
.bs-docs-sidebar.affix { .bs-docs-sidebar.affix {
position: fixed; /* Undo the static from mobile first approach */ position: fixed; /* Undo the static from mobile first approach */
top: 20px; top: 20px;
bottom: 20px;
overflow-y: auto;
} }
.bs-docs-sidebar.affix-bottom { .bs-docs-sidebar.affix-bottom {
position: absolute; /* Undo the static from mobile first approach */ position: absolute; /* Undo the static from mobile first approach */
@ -773,7 +771,7 @@ h1[id] {
background-color: #eee; background-color: #eee;
} }
.color-swatches .brand-primary { .color-swatches .brand-primary {
background-color: #428bca; background-color: #337ab7;
} }
.color-swatches .brand-success { .color-swatches .brand-success {
background-color: #5cb85c; background-color: #5cb85c;
@ -831,6 +829,21 @@ h1[id] {
} }
/*
* Wall of Browser Bugs
*
* Better display for the responsive table on the Wall of Browser Bugs.
*/
.bs-docs-browser-bugs td p {
margin-bottom: 0;
}
.bs-docs-browser-bugs th:first-child {
width: 18%;
}
/* /*
* Grid examples * Grid examples
* *

24
docs/assets/js/customize.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -23,4 +23,4 @@ License: http://opensource.org/licenses/MIT
* Licensed under the Creative Commons Attribution 3.0 Unported License. For * Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/. * details, see http://creativecommons.org/licenses/by/3.0/.
*/ */
!function(a){"use strict";a(function(){var b=a(window),c=a(document.body);c.scrollspy({target:".bs-docs-sidebar"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()}),setTimeout(function(){var b=a(".bs-docs-sidebar");b.affix({offset:{top:function(){var c=b.offset().top,d=parseInt(b.children(0).css("margin-top"),10),e=a(".bs-docs-nav").height();return this.top=c-e-d},bottom:function(){return this.bottom=a(".bs-docs-footer").outerHeight(!0)}}})},100),setTimeout(function(){a(".bs-top").affix()},100),function(){var b=a("#bs-theme-stylesheet"),c=a(".bs-docs-theme-toggle"),d=function(){b.attr("href",b.attr("data-href")),c.text("Disable theme preview"),localStorage.setItem("previewTheme",!0)};localStorage.getItem("previewTheme")&&d(),c.click(function(){var a=b.attr("href");a&&0!==a.indexOf("data")?(b.attr("href",""),c.text("Preview theme"),localStorage.removeItem("previewTheme")):d()})}(),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-popover").popover(),a("#loading-example-btn").on("click",function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),a(".bs-docs-activate-animated-progressbar").on("click",function(){a(this).siblings(".progress").find(".progress-bar-striped").toggleClass("active")}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';a(this).before(b)});var d=new ZeroClipboard(a(".btn-clipboard")),e=a("#global-zeroclipboard-html-bridge");d.on("load",function(){e.data("placement","top").attr("title","Copy to clipboard").tooltip()}),d.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),d.on("complete",function(){e.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),d.on("noflash wrongflash",function(){e.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery); !function(a){"use strict";a(function(){var b=a(window),c=a(document.body);c.scrollspy({target:".bs-docs-sidebar"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()}),setTimeout(function(){var b=a(".bs-docs-sidebar");b.affix({offset:{top:function(){var c=b.offset().top,d=parseInt(b.children(0).css("margin-top"),10),e=a(".bs-docs-nav").height();return this.top=c-e-d},bottom:function(){return this.bottom=a(".bs-docs-footer").outerHeight(!0)}}})},100),setTimeout(function(){a(".bs-top").affix()},100),function(){var b=a("#bs-theme-stylesheet"),c=a(".bs-docs-theme-toggle"),d=function(){b.attr("href",b.attr("data-href")),c.text("Disable theme preview"),localStorage.setItem("previewTheme",!0)};localStorage.getItem("previewTheme")&&d(),c.click(function(){var a=b.attr("href");a&&0!==a.indexOf("data")?(b.attr("href",""),c.text("Preview theme"),localStorage.removeItem("previewTheme")):d()})}(),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-popover").popover(),a("#loading-example-btn").on("click",function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),a("#exampleModal").on("show.bs.modal",function(b){var c=a(b.relatedTarget),d=c.data("whatever"),e=a(this);e.find(".modal-title").text("New message to "+d),e.find(".modal-body input").val(d)}),a(".bs-docs-activate-animated-progressbar").on("click",function(){a(this).siblings(".progress").find(".progress-bar-striped").toggleClass("active")}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';a(this).before(b)});var d=new ZeroClipboard(a(".btn-clipboard")),e=a("#global-zeroclipboard-html-bridge");d.on("load",function(){e.data("placement","top").attr("title","Copy to clipboard").tooltip()}),d.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),d.on("complete",function(){e.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),d.on("noflash wrongflash",function(){e.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery);

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

File diff suppressed because one or more lines are too long

11
docs/assets/js/src/application.js
View File

@ -109,6 +109,17 @@
}, 3000) }, 3000)
}) })
// Modal relatedTarget demo
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
// Activate animated progress bar // Activate animated progress bar
$('.bs-docs-activate-animated-progressbar').on('click', function () { $('.bs-docs-activate-animated-progressbar').on('click', function () {
$(this).siblings('.progress').find('.progress-bar-striped').toggleClass('active') $(this).siblings('.progress').find('.progress-bar-striped').toggleClass('active')

106
docs/assets/js/src/customizer.js
View File

@ -6,13 +6,13 @@
* details, see http://creativecommons.org/licenses/by/3.0/. * details, see http://creativecommons.org/licenses/by/3.0/.
*/ */
/* global JSZip, less, saveAs, UglifyJS, __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.2.0 (http://getbootstrap.com)\n' + ' * Bootstrap v3.3.0 (http://getbootstrap.com)\n' +
' * Copyright 2011-2014 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'
@ -22,8 +22,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
function showError(msg, err) { function showError(msg, err) {
$('<div id="bsCustomizerAlert" class="bs-customizer-alert">' + $('<div id="bsCustomizerAlert" class="bs-customizer-alert">' +
'<div class="container">' + '<div class="container">' +
'<a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right">&times;</a>' + '<a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right" aria-label="Close" role="button"><span aria-hidden="true">&times;</span></a>' +
'<p class="bs-customizer-alert-text"><span class="glyphicon glyphicon-warning-sign"></span>' + msg + '</p>' + '<p class="bs-customizer-alert-text"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span><span class="sr-only">Warning:</span>' + msg + '</p>' +
(err.extract ? '<pre class="bs-customizer-alert-extract">' + err.extract.join('\n') + '</pre>' : '') + (err.extract ? '<pre class="bs-customizer-alert-extract">' + err.extract.join('\n') + '</pre>' : '') +
'</div>' + '</div>' +
'</div>').appendTo('body').alert() '</div>').appendTo('body').alert()
@ -32,7 +32,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
function showSuccess(msg) { function showSuccess(msg) {
$('<div class="bs-callout bs-callout-info">' + $('<div class="bs-callout bs-callout-info">' +
'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + msg + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + msg +
'</div>').insertAfter('.bs-customize-download') '</div>').insertAfter('.bs-customize-download')
} }
@ -50,7 +50,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
} }
function showAlert(type, msg, insertAfter) { function showAlert(type, msg, insertAfter) {
$('<div class="alert alert-' + type + '">' + msg + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button></div>') $('<div class="alert alert-' + type + '">' + msg + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>')
.insertAfter(insertAfter) .insertAfter(insertAfter)
} }
@ -251,6 +251,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
} }
function compileLESS(lessSource, baseFilename, intoResult) { function compileLESS(lessSource, baseFilename, intoResult) {
var promise = $.Deferred()
var parser = new less.Parser({ var parser = new less.Parser({
paths: ['variables.less', 'mixins.less'], paths: ['variables.less', 'mixins.less'],
optimization: 0, optimization: 0,
@ -259,14 +260,18 @@ window.onload = function () { // wait for load in a dumb way because B-0
parser.parse(lessSource, function (err, tree) { parser.parse(lessSource, function (err, tree) {
if (err) { if (err) {
return showError('<strong>Ruh roh!</strong> Could not parse less files.', err) return promise.reject(err)
} }
intoResult[baseFilename + '.css'] = cw + tree.toCSS() intoResult[baseFilename + '.css'] = cw + tree.toCSS()
intoResult[baseFilename + '.min.css'] = cw + tree.toCSS({ compress: true }) intoResult[baseFilename + '.min.css'] = cw + tree.toCSS({ compress: true })
promise.resolve()
}) })
return promise.promise()
} }
function generateCSS(preamble) { function generateCSS(preamble) {
var promise = $.Deferred()
var oneChecked = false var oneChecked = false
var lessFileIncludes = {} var lessFileIncludes = {}
$('#less-section input').each(function () { $('#less-section input').each(function () {
@ -290,14 +295,22 @@ window.onload = function () { // wait for load in a dumb way because B-0
var bsLessSource = preamble + generateLESS('bootstrap.less', lessFileIncludes, vars) var bsLessSource = preamble + generateLESS('bootstrap.less', lessFileIncludes, vars)
var themeLessSource = preamble + generateLESS('theme.less', lessFileIncludes, vars) var themeLessSource = preamble + generateLESS('theme.less', lessFileIncludes, vars)
try { var prefixer = autoprefixer({ browsers: __configBridge.autoprefixerBrowsers })
compileLESS(bsLessSource, 'bootstrap', result)
compileLESS(themeLessSource, 'bootstrap-theme', result)
} catch (err) {
return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
}
return result $.when(
compileLESS(bsLessSource, 'bootstrap', result),
compileLESS(themeLessSource, 'bootstrap-theme', result)
).done(function () {
for (var key in result) {
result[key] = prefixer.process(result[key]).css
}
promise.resolve(result)
}).fail(function (err) {
showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
promise.reject()
})
return promise.promise()
} }
function uglify(js) { function uglify(js) {
@ -319,19 +332,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
function generateJS(preamble) { function generateJS(preamble) {
var $checked = $('#plugin-section input:checked') var $checked = $('#plugin-section input:checked')
var jqueryCheck = [ var jqueryCheck = __configBridge.jqueryCheck.join('\n')
'if (typeof jQuery === \'undefined\') {', var jqueryVersionCheck = __configBridge.jqueryVersionCheck.join('\n')
' throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery\')',
'}\n'
].join('\n')
var jqueryVersionCheck = [
'+function ($) {',
' var version = $.fn.jquery.split(\' \')[0].split(\'.\')',
' if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {',
' throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery version 1.9.1 or higher\')',
' }',
'}(jQuery);\n\n'
].join('\n')
if (!$checked.length) return false if (!$checked.length) return false
@ -359,32 +361,26 @@ window.onload = function () { // wait for load in a dumb way because B-0
var file = (e.originalEvent.hasOwnProperty('dataTransfer')) ? e.originalEvent.dataTransfer.files[0] : e.originalEvent.target.files[0] var file = (e.originalEvent.hasOwnProperty('dataTransfer')) ? e.originalEvent.dataTransfer.files[0] : e.originalEvent.target.files[0]
if (!file.type.match('application/json')) {
return showAlert('danger', '<strong>Ruh roh.</strong> We can only read <code>.json</code> files. Please try again.', importDropTarget)
}
var reader = new FileReader() var reader = new FileReader()
reader.onload = (function () { reader.onload = function (e) {
return function (e) { var text = e.target.result
var text = e.target.result
try { try {
var json = JSON.parse(text) var json = JSON.parse(text)
if (typeof json != 'object') { if (!$.isPlainObject(json)) {
throw new Error('JSON data from config file is not an object.') throw new Error('JSON data from config file is not an object.')
}
updateCustomizerFromJson(json)
showAlert('success', '<strong>Woohoo!</strong> Your configuration was successfully uploaded. Tweak your settings, then hit Download.', importDropTarget)
} catch (err) {
return showAlert('danger', '<strong>Shucks.</strong> We can only read valid <code>.json</code> files. Please try again.', importDropTarget)
} }
}
})(file)
reader.readAsText(file) updateCustomizerFromJson(json)
showAlert('success', '<strong>Woohoo!</strong> Your configuration was successfully uploaded. Tweak your settings, then hit Download.', importDropTarget)
} catch (err) {
return showAlert('danger', '<strong>Shucks.</strong> We can only read valid <code>.json</code> files. Please try again.', importDropTarget)
}
}
reader.readAsText(file, 'utf-8')
} }
function handleConfigDragOver(e) { function handleConfigDragOver(e) {
@ -401,7 +397,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
.on('drop', handleConfigFileSelect) .on('drop', handleConfigFileSelect)
} }
$('#import-file-select').on('select', handleConfigFileSelect) $('#import-file-select').on('change', handleConfigFileSelect)
$('#import-manual-trigger').on('click', removeImportAlerts) $('#import-manual-trigger').on('click', removeImportAlerts)
var inputsComponent = $('#less-section input') var inputsComponent = $('#less-section input')
@ -464,9 +460,15 @@ window.onload = function () { // wait for load in a dumb way because B-0
' * Config saved to config.json and ' + gistUrl + '\n' + ' * Config saved to config.json and ' + gistUrl + '\n' +
' */\n' ' */\n'
generateZip(generateCSS(preamble), generateJS(preamble), generateFonts(), configJson, function (blob) { $.when(
$compileBtn.removeAttr('disabled') generateCSS(preamble),
saveAs(blob, 'bootstrap.zip') generateJS(preamble),
generateFonts()
).done(function (css, js, fonts) {
generateZip(css, js, fonts, configJson, function (blob) {
$compileBtn.removeAttr('disabled')
setTimeout(function () { saveAs(blob, 'bootstrap.zip') }, 0)
})
}) })
}) })
}); });

16015
docs/assets/js/vendor/autoprefixer.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

97
docs/browser-bugs.html
View File

@ -3,6 +3,7 @@ layout: default
title: Wall of browser bugs title: Wall of browser bugs
slug: browser-bugs slug: browser-bugs
lead: "A list of the browser bugs that Bootstrap is currently grappling with." lead: "A list of the browser bugs that Bootstrap is currently grappling with."
fullwidth: true
--- ---
@ -13,7 +14,7 @@ lead: "A list of the browser bugs that Bootstrap is currently grappling with."
<p>We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, <a href="../getting-started/#support">see our browser compatibility docs</a>.</p> <p>We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, <a href="../getting-started/#support">see our browser compatibility docs</a>.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-hover"> <table class="bs-docs-browser-bugs table table-bordered table-hover">
<thead> <thead>
<tr> <tr>
<th>Browser(s)</th> <th>Browser(s)</th>
@ -23,96 +24,14 @@ lead: "A list of the browser bugs that Bootstrap is currently grappling with."
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for bug in site.data.browser-bugs %}
<tr> <tr>
<td>Internet Explorer 11</td> <td>{{ bug.browser }}</td>
<td>Hovered element still remains in <code>:hover</code> state after scrolling away</td> <td>{{ bug.summary | markdownify | bugify }}</td>
<td><a href="https://connect.microsoft.com/IE/feedback/details/926665/ie-11-hovering-over-an-element-and-then-scrolling-without-moving-the-mouse-pointer-leaves-the-element-in-hover-state">IE bug #926665</a></td> <td>{{ bug.upstream_bug | bugify }}</td>
<td><a href="https://github.com/twbs/bootstrap/issues/14211">#14211</a></td> <td>{{ bug.origin | bugify }}</td>
</tr>
<tr>
<td>Internet Explorer 11</td>
<td>When hovering over a <code>&lt;select&gt;</code> menu item, the cursor for the element underneath the menu is displayed</td>
<td><a href="https://connect.microsoft.com/IE/feedbackdetail/view/963961">IE bug #963961</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/14528">#14528</a></td>
</tr>
<tr>
<td>Firefox</td>
<td><code>.table-bordered</code> with an empty <code>&lt;tbody&gt;</code> is missing borders</td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/13453">#13453</a></td>
</tr>
<tr>
<td>Firefox</td>
<td><code>max-width: 100%;</code> doesn't work inside tables</td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=975632">Mozilla bug #975632</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/10690">#10690</a></td>
</tr>
<tr>
<td>Firefox</td>
<td>Java applets that are descendants of elements with forced hardware acceleration using <code>translate3d(0,0,0)</code> are invisible on Windows</td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1048279">Mozilla bug #1048279</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/14124">#14124</a></td>
</tr>
<tr>
<td>Firefox</td>
<td>Button elements with <code>width: 100%</code> become cropped in long tables.</td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1060131">Mozilla bug #1060131</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/14320">#14320</a></td>
</tr>
<tr>
<td>Firefox</td>
<td>If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.</td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/793">#793</a></td>
</tr>
<tr>
<td>Chrome</td>
<td>Clicking above <code>&lt;input type="number"&gt;</code> increment button flashes the decrement button</td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=419108"></a></td>
<td>Offshoot of <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a> &amp; <a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a></td>
</tr>
<tr>
<td>Chrome</td>
<td><code>display: table;</code> within <code>display: block;</code> forces sibling content to new line</td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=309483">Chromium issue #309483</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/9950">#9950</a></td>
</tr>
<tr>
<td>Chrome</td>
<td>Incorrect viewport size used for media queries when printing</td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=273306">Chromium issue #273306</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/12078">#12078</a></td>
</tr>
<tr>
<td>Chrome &amp; Safari</td>
<td>OS X scrollbar clipped in <code>select[multiple]</code> with padding</td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=342208">Chromium issue #342208</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=128489">WebKit bug #128489</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/12536">#12536</a></td>
</tr>
<tr>
<td>Chrome</td>
<td><code>display: table-cell; width: 100%;</code> doesn't work correctly on date <code>&lt;input&gt;</code></td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=346051">Chromium issue #346051</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/12548">#12548</a></td>
</tr>
<tr>
<td>Chrome</td>
<td><code>&lt;input type="password"&gt;</code> sporadically causes bad widths on floated elements</td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=377346">Chrome issue #377346</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/13892">#13892</a></td>
</tr>
<tr>
<td>Safari</td>
<td>Weird button behavior with some number <code>&lt;input&gt;</code>s</td>
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>, <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a></td>
</tr>
<tr>
<td>Safari</td>
<td>Justified nav rendering bug</td>
<td>(No public bug tracker)</td>
<td><a href="https://github.com/twbs/bootstrap/issues/9774">#9774</a></td>
</tr> </tr>
{% endfor %}
</tbody> </tbody>
</table> </table>
</div> </div>

86
docs/dist/css/bootstrap-theme.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v3.2.0 (http://getbootstrap.com) * Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
@ -69,28 +69,28 @@
background-image: none; background-image: none;
} }
.btn-primary { .btn-primary {
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%); background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%); background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#2d6ca2)); background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%); background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #2b669a; border-color: #245580;
} }
.btn-primary:hover, .btn-primary:hover,
.btn-primary:focus { .btn-primary:focus {
background-color: #2d6ca2; background-color: #265a88;
background-position: 0 -15px; background-position: 0 -15px;
} }
.btn-primary:active, .btn-primary:active,
.btn-primary.active { .btn-primary.active {
background-color: #2d6ca2; background-color: #265a88;
border-color: #2b669a; border-color: #245580;
} }
.btn-primary:disabled, .btn-primary:disabled,
.btn-primary[disabled] { .btn-primary[disabled] {
background-color: #2d6ca2; background-color: #265a88;
background-image: none; background-image: none;
} }
.btn-success { .btn-success {
@ -211,12 +211,12 @@
.dropdown-menu > .active > a, .dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { .dropdown-menu > .active > a:focus {
background-color: #357ebd; background-color: #2e6da4;
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%); background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%); background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd)); background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.navbar-default { .navbar-default {
@ -275,6 +275,19 @@
.navbar-fixed-bottom { .navbar-fixed-bottom {
border-radius: 0; border-radius: 0;
} }
@media (max-width: 767px) {
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #fff;
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
background-repeat: repeat-x;
}
}
.alert { .alert {
text-shadow: 0 1px 0 rgba(255, 255, 255, .2); text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
@ -325,11 +338,11 @@
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.progress-bar { .progress-bar {
background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%); background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #3071a9 100%); background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9)); background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%); background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.progress-bar-success { .progress-bar-success {
@ -377,14 +390,19 @@
.list-group-item.active, .list-group-item.active,
.list-group-item.active:hover, .list-group-item.active:hover,
.list-group-item.active:focus { .list-group-item.active:focus {
text-shadow: 0 -1px 0 #3071a9; text-shadow: 0 -1px 0 #286090;
background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%); background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #3278b3 100%); background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3278b3)); background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%); background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #3278b3; border-color: #2b669a;
}
.list-group-item.active .badge,
.list-group-item.active:hover .badge,
.list-group-item.active:focus .badge {
text-shadow: none;
} }
.panel { .panel {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
@ -399,11 +417,11 @@
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.panel-primary > .panel-heading { .panel-primary > .panel-heading {
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%); background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%); background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd)); background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.panel-success > .panel-heading { .panel-success > .panel-heading {

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

File diff suppressed because one or more lines are too long

4
docs/dist/css/bootstrap-theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

180
docs/dist/css/bootstrap.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v3.2.0 (http://getbootstrap.com) * Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
@ -915,12 +915,12 @@ textarea {
line-height: inherit; line-height: inherit;
} }
a { a {
color: #428bca; color: #337ab7;
text-decoration: none; text-decoration: none;
} }
a:hover, a:hover,
a:focus { a:focus {
color: #2a6496; color: #23527c;
text-decoration: underline; text-decoration: underline;
} }
a:focus { a:focus {
@ -1153,10 +1153,10 @@ mark,
color: #777; color: #777;
} }
.text-primary { .text-primary {
color: #428bca; color: #337ab7;
} }
a.text-primary:hover { a.text-primary:hover {
color: #3071a9; color: #286090;
} }
.text-success { .text-success {
color: #3c763d; color: #3c763d;
@ -1184,10 +1184,10 @@ a.text-danger:hover {
} }
.bg-primary { .bg-primary {
color: #fff; color: #fff;
background-color: #428bca; background-color: #337ab7;
} }
a.bg-primary:hover { a.bg-primary:hover {
background-color: #3071a9; background-color: #286090;
} }
.bg-success { .bg-success {
background-color: #dff0d8; background-color: #dff0d8;
@ -2400,56 +2400,25 @@ textarea.form-control {
input[type="search"] { input[type="search"] {
-webkit-appearance: none; -webkit-appearance: none;
} }
input[type="date"], @media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="time"], input[type="date"],
input[type="datetime-local"], input[type="time"],
input[type="month"] { input[type="datetime-local"],
line-height: 34px; input[type="month"] {
line-height: 1.42857143 \0; line-height: 34px;
} }
input[type="date"].input-sm, input[type="date"].input-sm,
input[type="time"].input-sm, input[type="time"].input-sm,
input[type="datetime-local"].input-sm, input[type="datetime-local"].input-sm,
input[type="month"].input-sm { input[type="month"].input-sm {
line-height: 30px; line-height: 30px;
line-height: 1.5 \0; }
} input[type="date"].input-lg,
input[type="date"].input-lg, input[type="time"].input-lg,
input[type="time"].input-lg, input[type="datetime-local"].input-lg,
input[type="datetime-local"].input-lg, input[type="month"].input-lg {
input[type="month"].input-lg { line-height: 46px;
line-height: 46px; }
line-height: 1.33 \0;
}
_:-ms-fullscreen,
:root input[type="date"],
_:-ms-fullscreen,
:root input[type="time"],
_:-ms-fullscreen,
:root input[type="datetime-local"],
_:-ms-fullscreen,
:root input[type="month"] {
line-height: 1.42857143;
}
_:-ms-fullscreen.input-sm,
:root input[type="date"].input-sm,
_:-ms-fullscreen.input-sm,
:root input[type="time"].input-sm,
_:-ms-fullscreen.input-sm,
:root input[type="datetime-local"].input-sm,
_:-ms-fullscreen.input-sm,
:root input[type="month"].input-sm {
line-height: 1.5;
}
_:-ms-fullscreen.input-lg,
:root input[type="date"].input-lg,
_:-ms-fullscreen.input-lg,
:root input[type="time"].input-lg,
_:-ms-fullscreen.input-lg,
:root input[type="datetime-local"].input-lg,
_:-ms-fullscreen.input-lg,
:root input[type="month"].input-lg {
line-height: 1.33;
} }
.form-group { .form-group {
margin-bottom: 15px; margin-bottom: 15px;
@ -2880,8 +2849,8 @@ fieldset[disabled] .btn-default.active {
} }
.btn-primary { .btn-primary {
color: #fff; color: #fff;
background-color: #428bca; background-color: #337ab7;
border-color: #357ebd; border-color: #2e6da4;
} }
.btn-primary:hover, .btn-primary:hover,
.btn-primary:focus, .btn-primary:focus,
@ -2890,8 +2859,8 @@ fieldset[disabled] .btn-default.active {
.btn-primary.active, .btn-primary.active,
.open > .dropdown-toggle.btn-primary { .open > .dropdown-toggle.btn-primary {
color: #fff; color: #fff;
background-color: #3071a9; background-color: #286090;
border-color: #285e8e; border-color: #204d74;
} }
.btn-primary:active, .btn-primary:active,
.btn-primary.active, .btn-primary.active,
@ -2916,11 +2885,11 @@ fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active, .btn-primary.disabled.active,
.btn-primary[disabled].active, .btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active { fieldset[disabled] .btn-primary.active {
background-color: #428bca; background-color: #337ab7;
border-color: #357ebd; border-color: #2e6da4;
} }
.btn-primary .badge { .btn-primary .badge {
color: #428bca; color: #337ab7;
background-color: #fff; background-color: #fff;
} }
.btn-success { .btn-success {
@ -3105,7 +3074,7 @@ fieldset[disabled] .btn-danger.active {
} }
.btn-link { .btn-link {
font-weight: normal; font-weight: normal;
color: #428bca; color: #337ab7;
border-radius: 0; border-radius: 0;
} }
.btn-link, .btn-link,
@ -3125,7 +3094,7 @@ fieldset[disabled] .btn-link {
} }
.btn-link:hover, .btn-link:hover,
.btn-link:focus { .btn-link:focus {
color: #2a6496; color: #23527c;
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
} }
@ -3274,7 +3243,7 @@ tbody.collapse.in {
.dropdown-menu > .active > a:focus { .dropdown-menu > .active > a:focus {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
background-color: #428bca; background-color: #337ab7;
outline: 0; outline: 0;
} }
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a,
@ -3705,7 +3674,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav .open > a:hover, .nav .open > a:hover,
.nav .open > a:focus { .nav .open > a:focus {
background-color: #eee; background-color: #eee;
border-color: #428bca; border-color: #337ab7;
} }
.nav .nav-divider { .nav .nav-divider {
height: 1px; height: 1px;
@ -3798,7 +3767,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav-pills > li.active > a:hover, .nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus { .nav-pills > li.active > a:focus {
color: #fff; color: #fff;
background-color: #428bca; background-color: #337ab7;
} }
.nav-stacked > li { .nav-stacked > li {
float: none; float: none;
@ -4155,6 +4124,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
@ -4425,7 +4396,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
padding: 6px 12px; padding: 6px 12px;
margin-left: -1px; margin-left: -1px;
line-height: 1.42857143; line-height: 1.42857143;
color: #428bca; color: #337ab7;
text-decoration: none; text-decoration: none;
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -4445,7 +4416,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
.pagination > li > span:hover, .pagination > li > span:hover,
.pagination > li > a:focus, .pagination > li > a:focus,
.pagination > li > span:focus { .pagination > li > span:focus {
color: #2a6496; color: #23527c;
background-color: #eee; background-color: #eee;
border-color: #ddd; border-color: #ddd;
} }
@ -4458,8 +4429,8 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
z-index: 2; z-index: 2;
color: #fff; color: #fff;
cursor: default; cursor: default;
background-color: #428bca; background-color: #337ab7;
border-color: #428bca; border-color: #337ab7;
} }
.pagination > .disabled > span, .pagination > .disabled > span,
.pagination > .disabled > span:hover, .pagination > .disabled > span:hover,
@ -4573,11 +4544,11 @@ a.label:focus {
background-color: #5e5e5e; background-color: #5e5e5e;
} }
.label-primary { .label-primary {
background-color: #428bca; background-color: #337ab7;
} }
.label-primary[href]:hover, .label-primary[href]:hover,
.label-primary[href]:focus { .label-primary[href]:focus {
background-color: #3071a9; background-color: #286090;
} }
.label-success { .label-success {
background-color: #5cb85c; background-color: #5cb85c;
@ -4638,11 +4609,17 @@ a.badge:focus {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
a.list-group-item.active > .badge, .list-group-item.active > .badge,
.nav-pills > .active > a > .badge { .nav-pills > .active > a > .badge {
color: #428bca; color: #337ab7;
background-color: #fff; background-color: #fff;
} }
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
.nav-pills > li > a > .badge { .nav-pills > li > a > .badge {
margin-left: 3px; margin-left: 3px;
} }
@ -4675,7 +4652,8 @@ a.list-group-item.active > .badge,
.jumbotron { .jumbotron {
padding: 48px 0; padding: 48px 0;
} }
.container .jumbotron { .container .jumbotron,
.container-fluid .jumbotron {
padding-right: 60px; padding-right: 60px;
padding-left: 60px; padding-left: 60px;
} }
@ -4704,7 +4682,7 @@ a.list-group-item.active > .badge,
a.thumbnail:hover, a.thumbnail:hover,
a.thumbnail:focus, a.thumbnail:focus,
a.thumbnail.active { a.thumbnail.active {
border-color: #428bca; border-color: #337ab7;
} }
.thumbnail .caption { .thumbnail .caption {
padding: 9px; padding: 9px;
@ -4826,7 +4804,7 @@ a.thumbnail.active {
line-height: 20px; line-height: 20px;
color: #fff; color: #fff;
text-align: center; text-align: center;
background-color: #428bca; background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease; -webkit-transition: width .6s ease;
@ -4934,12 +4912,6 @@ a.thumbnail.active {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
a.list-group-item { a.list-group-item {
color: #555; color: #555;
} }
@ -4974,8 +4946,8 @@ a.list-group-item:focus {
.list-group-item.active:focus { .list-group-item.active:focus {
z-index: 2; z-index: 2;
color: #fff; color: #fff;
background-color: #428bca; background-color: #337ab7;
border-color: #428bca; border-color: #337ab7;
} }
.list-group-item.active .list-group-item-heading, .list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading, .list-group-item.active:hover .list-group-item-heading,
@ -4991,7 +4963,7 @@ a.list-group-item:focus {
.list-group-item.active .list-group-item-text, .list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text, .list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text { .list-group-item.active:focus .list-group-item-text {
color: #e1edf7; color: #c7ddef;
} }
.list-group-item-success { .list-group-item-success {
color: #3c763d; color: #3c763d;
@ -5335,22 +5307,22 @@ a.list-group-item-danger.active:focus {
border-bottom-color: #ddd; border-bottom-color: #ddd;
} }
.panel-primary { .panel-primary {
border-color: #428bca; border-color: #337ab7;
} }
.panel-primary > .panel-heading { .panel-primary > .panel-heading {
color: #fff; color: #fff;
background-color: #428bca; background-color: #337ab7;
border-color: #428bca; border-color: #337ab7;
} }
.panel-primary > .panel-heading + .panel-collapse > .panel-body { .panel-primary > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #428bca; border-top-color: #337ab7;
} }
.panel-primary > .panel-heading .badge { .panel-primary > .panel-heading .badge {
color: #428bca; color: #337ab7;
background-color: #fff; background-color: #fff;
} }
.panel-primary > .panel-footer + .panel-collapse > .panel-body { .panel-primary > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #428bca; border-bottom-color: #337ab7;
} }
.panel-success { .panel-success {
border-color: #d6e9c6; border-color: #d6e9c6;
@ -5549,10 +5521,9 @@ 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: fixed; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0;
left: 0; left: 0;
background-color: #000; background-color: #000;
} }
@ -5624,7 +5595,9 @@ button.close {
position: absolute; position: absolute;
z-index: 1070; z-index: 1070;
display: block; display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px; font-size: 12px;
font-weight: normal;
line-height: 1.4; line-height: 1.4;
visibility: visible; visibility: visible;
filter: alpha(opacity=0); filter: alpha(opacity=0);
@ -5674,14 +5647,16 @@ button.close {
border-top-color: #000; border-top-color: #000;
} }
.tooltip.top-left .tooltip-arrow { .tooltip.top-left .tooltip-arrow {
right: 5px;
bottom: 0; bottom: 0;
left: 5px; margin-bottom: -5px;
border-width: 5px 5px 0; border-width: 5px 5px 0;
border-top-color: #000; border-top-color: #000;
} }
.tooltip.top-right .tooltip-arrow { .tooltip.top-right .tooltip-arrow {
right: 5px;
bottom: 0; bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0; border-width: 5px 5px 0;
border-top-color: #000; border-top-color: #000;
} }
@ -5708,13 +5683,15 @@ button.close {
} }
.tooltip.bottom-left .tooltip-arrow { .tooltip.bottom-left .tooltip-arrow {
top: 0; top: 0;
left: 5px; right: 5px;
margin-top: -5px;
border-width: 0 5px 5px; border-width: 0 5px 5px;
border-bottom-color: #000; border-bottom-color: #000;
} }
.tooltip.bottom-right .tooltip-arrow { .tooltip.bottom-right .tooltip-arrow {
top: 0; top: 0;
right: 5px; left: 5px;
margin-top: -5px;
border-width: 0 5px 5px; border-width: 0 5px 5px;
border-bottom-color: #000; border-bottom-color: #000;
} }
@ -5726,6 +5703,7 @@ button.close {
display: none; display: none;
max-width: 276px; max-width: 276px;
padding: 1px; padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: 1.42857143; line-height: 1.42857143;

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

189
docs/dist/js/bootstrap.js vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v3.2.0 (http://getbootstrap.com) * Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
@ -16,7 +16,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: transition.js v3.2.0 * Bootstrap: transition.js v3.3.0
* http://getbootstrap.com/javascript/#transitions * http://getbootstrap.com/javascript/#transitions
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -76,7 +76,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: alert.js v3.2.0 * Bootstrap: alert.js v3.3.0
* http://getbootstrap.com/javascript/#alerts * http://getbootstrap.com/javascript/#alerts
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -95,7 +95,7 @@ if (typeof jQuery === 'undefined') {
$(el).on('click', dismiss, this.close) $(el).on('click', dismiss, this.close)
} }
Alert.VERSION = '3.2.0' Alert.VERSION = '3.3.0'
Alert.TRANSITION_DURATION = 150 Alert.TRANSITION_DURATION = 150
@ -171,7 +171,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: button.js v3.2.0 * Bootstrap: button.js v3.3.0
* http://getbootstrap.com/javascript/#buttons * http://getbootstrap.com/javascript/#buttons
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -191,7 +191,7 @@ if (typeof jQuery === 'undefined') {
this.isLoading = false this.isLoading = false
} }
Button.VERSION = '3.2.0' Button.VERSION = '3.3.0'
Button.DEFAULTS = { Button.DEFAULTS = {
loadingText: 'loading...' loadingText: 'loading...'
@ -207,10 +207,10 @@ if (typeof jQuery === 'undefined') {
if (data.resetText == null) $el.data('resetText', $el[val]()) if (data.resetText == null) $el.data('resetText', $el[val]())
$el[val](data[state] == null ? this.options[state] : data[state])
// push to event loop to allow forms to submit // push to event loop to allow forms to submit
setTimeout($.proxy(function () { setTimeout($.proxy(function () {
$el[val](data[state] == null ? this.options[state] : data[state])
if (state == 'loadingText') { if (state == 'loadingText') {
this.isLoading = true this.isLoading = true
$el.addClass(d).attr(d, d) $el.addClass(d).attr(d, d)
@ -282,13 +282,13 @@ if (typeof jQuery === 'undefined') {
e.preventDefault() e.preventDefault()
}) })
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) { .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
$(e.target).closest('.btn').toggleClass('focus', e.type == 'focus') $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
}) })
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: carousel.js v3.2.0 * Bootstrap: carousel.js v3.3.0
* http://getbootstrap.com/javascript/#carousel * http://getbootstrap.com/javascript/#carousel
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -319,7 +319,7 @@ if (typeof jQuery === 'undefined') {
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this)) .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
} }
Carousel.VERSION = '3.2.0' Carousel.VERSION = '3.3.0'
Carousel.TRANSITION_DURATION = 600 Carousel.TRANSITION_DURATION = 600
@ -331,6 +331,7 @@ if (typeof jQuery === 'undefined') {
} }
Carousel.prototype.keydown = function (e) { Carousel.prototype.keydown = function (e) {
if (/input|textarea/i.test(e.target.tagName)) return
switch (e.which) { switch (e.which) {
case 37: this.prev(); break case 37: this.prev(); break
case 39: this.next(); break case 39: this.next(); break
@ -496,7 +497,7 @@ if (typeof jQuery === 'undefined') {
// CAROUSEL DATA-API // CAROUSEL DATA-API
// ================= // =================
$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) { var clickHandler = function (e) {
var href var href
var $this = $(this) var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7 var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
@ -512,7 +513,11 @@ if (typeof jQuery === 'undefined') {
} }
e.preventDefault() e.preventDefault()
}) }
$(document)
.on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
.on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
$(window).on('load', function () { $(window).on('load', function () {
$('[data-ride="carousel"]').each(function () { $('[data-ride="carousel"]').each(function () {
@ -524,7 +529,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: collapse.js v3.2.0 * Bootstrap: collapse.js v3.3.0
* http://getbootstrap.com/javascript/#collapse * http://getbootstrap.com/javascript/#collapse
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -541,18 +546,25 @@ 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.transitioning = null this.transitioning = null
if (this.options.parent) this.$parent = $(this.options.parent) if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle() if (this.options.toggle) this.toggle()
} }
Collapse.VERSION = '3.2.0' Collapse.VERSION = '3.3.0'
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 () {
@ -587,6 +599,10 @@ if (typeof jQuery === 'undefined') {
.addClass('collapsing')[dimension](0) .addClass('collapsing')[dimension](0)
.attr('aria-expanded', true) .attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1 this.transitioning = 1
var complete = function () { var complete = function () {
@ -623,6 +639,10 @@ if (typeof jQuery === 'undefined') {
.removeClass('collapse in') .removeClass('collapse in')
.attr('aria-expanded', false) .attr('aria-expanded', false)
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
this.transitioning = 1 this.transitioning = 1
var complete = function () { var complete = function () {
@ -645,6 +665,33 @@ if (typeof jQuery === 'undefined') {
this[this.$element.hasClass('in') ? 'hide' : 'show']() this[this.$element.hasClass('in') ? 'hide' : 'show']()
} }
Collapse.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
// COLLAPSE PLUGIN DEFINITION // COLLAPSE PLUGIN DEFINITION
// ========================== // ==========================
@ -680,22 +727,13 @@ if (typeof jQuery === 'undefined') {
// ================= // =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) { $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var href
var $this = $(this) var $this = $(this)
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
var $target = $(target)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent)
if (!data || !data.transitioning) { if (!$this.attr('data-target')) e.preventDefault()
if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed').attr('aria-expanded', false)
var isCollapsed = $target.hasClass('in') var $target = getTargetFromTrigger($this)
$this.toggleClass('collapsed', isCollapsed).attr('aria-expanded', !isCollapsed) var data = $target.data('bs.collapse')
} var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this })
Plugin.call($target, option) Plugin.call($target, option)
}) })
@ -703,7 +741,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: dropdown.js v3.2.0 * Bootstrap: dropdown.js v3.3.0
* http://getbootstrap.com/javascript/#dropdowns * http://getbootstrap.com/javascript/#dropdowns
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -723,7 +761,7 @@ if (typeof jQuery === 'undefined') {
$(element).on('click.bs.dropdown', this.toggle) $(element).on('click.bs.dropdown', this.toggle)
} }
Dropdown.VERSION = '3.2.0' Dropdown.VERSION = '3.3.0'
Dropdown.prototype.toggle = function (e) { Dropdown.prototype.toggle = function (e) {
var $this = $(this) var $this = $(this)
@ -858,12 +896,14 @@ if (typeof jQuery === 'undefined') {
.on('click.bs.dropdown.data-api', clearMenus) .on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle) .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown) .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: modal.js v3.2.0 * Bootstrap: modal.js v3.3.0
* http://getbootstrap.com/javascript/#modals * http://getbootstrap.com/javascript/#modals
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -894,7 +934,7 @@ if (typeof jQuery === 'undefined') {
} }
} }
Modal.VERSION = '3.2.0' Modal.VERSION = '3.3.0'
Modal.TRANSITION_DURATION = 300 Modal.TRANSITION_DURATION = 300
Modal.BACKDROP_TRANSITION_DURATION = 150 Modal.BACKDROP_TRANSITION_DURATION = 150
@ -920,10 +960,11 @@ if (typeof jQuery === 'undefined') {
this.isShown = true this.isShown = true
this.checkScrollbar() this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open') this.$body.addClass('modal-open')
this.setScrollbar()
this.escape() this.escape()
this.resize()
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))
@ -938,6 +979,9 @@ if (typeof jQuery === 'undefined') {
.show() .show()
.scrollTop(0) .scrollTop(0)
if (that.options.backdrop) that.adjustBackdrop()
that.adjustDialog()
if (transition) { if (transition) {
that.$element[0].offsetWidth // force reflow that.$element[0].offsetWidth // force reflow
} }
@ -972,6 +1016,7 @@ if (typeof jQuery === 'undefined') {
this.isShown = false this.isShown = false
this.escape() this.escape()
this.resize()
$(document).off('focusin.bs.modal') $(document).off('focusin.bs.modal')
@ -1007,11 +1052,20 @@ if (typeof jQuery === 'undefined') {
} }
} }
Modal.prototype.resize = function () {
if (this.isShown) {
$(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
} else {
$(window).off('resize.bs.modal')
}
}
Modal.prototype.hideModal = function () { Modal.prototype.hideModal = function () {
var that = this var that = this
this.$element.hide() this.$element.hide()
this.backdrop(function () { this.backdrop(function () {
that.$body.removeClass('modal-open') that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar() that.resetScrollbar()
that.$element.trigger('hidden.bs.modal') that.$element.trigger('hidden.bs.modal')
}) })
@ -1068,13 +1122,43 @@ if (typeof jQuery === 'undefined') {
} }
} }
// these following methods are used to handle overflowing modals
Modal.prototype.handleUpdate = function () {
if (this.options.backdrop) this.adjustBackdrop()
this.adjustDialog()
}
Modal.prototype.adjustBackdrop = function () {
this.$backdrop
.css('height', 0)
.css('height', this.$element[0].scrollHeight)
}
Modal.prototype.adjustDialog = function () {
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
})
}
Modal.prototype.resetAdjustments = function () {
this.$element.css({
paddingLeft: '',
paddingRight: ''
})
}
Modal.prototype.checkScrollbar = function () { Modal.prototype.checkScrollbar = function () {
this.bodyIsOverflowing = document.body.scrollHeight > document.documentElement.clientHeight
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)
if (this.scrollbarWidth) 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 () {
@ -1082,7 +1166,6 @@ if (typeof jQuery === 'undefined') {
} }
Modal.prototype.measureScrollbar = function () { // thx walsh Modal.prototype.measureScrollbar = function () { // thx walsh
if (document.body.clientWidth >= window.innerWidth) return 0
var scrollDiv = document.createElement('div') var scrollDiv = document.createElement('div')
scrollDiv.className = 'modal-scrollbar-measure' scrollDiv.className = 'modal-scrollbar-measure'
this.$body.append(scrollDiv) this.$body.append(scrollDiv)
@ -1145,7 +1228,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: tooltip.js v3.2.0 * Bootstrap: tooltip.js v3.3.0
* 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
* ======================================================================== * ========================================================================
@ -1171,7 +1254,7 @@ if (typeof jQuery === 'undefined') {
this.init('tooltip', element, options) this.init('tooltip', element, options)
} }
Tooltip.VERSION = '3.2.0' Tooltip.VERSION = '3.3.0'
Tooltip.TRANSITION_DURATION = 150 Tooltip.TRANSITION_DURATION = 150
@ -1624,7 +1707,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: popover.js v3.2.0 * Bootstrap: popover.js v3.3.0
* http://getbootstrap.com/javascript/#popovers * http://getbootstrap.com/javascript/#popovers
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -1644,7 +1727,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.2.0' Popover.VERSION = '3.3.0'
Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, { Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
placement: 'right', placement: 'right',
@ -1744,7 +1827,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: scrollspy.js v3.2.0 * Bootstrap: scrollspy.js v3.3.0
* http://getbootstrap.com/javascript/#scrollspy * http://getbootstrap.com/javascript/#scrollspy
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -1775,7 +1858,7 @@ if (typeof jQuery === 'undefined') {
this.process() this.process()
} }
ScrollSpy.VERSION = '3.2.0' ScrollSpy.VERSION = '3.3.0'
ScrollSpy.DEFAULTS = { ScrollSpy.DEFAULTS = {
offset: 10 offset: 10
@ -1920,7 +2003,7 @@ if (typeof jQuery === 'undefined') {
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: tab.js v3.2.0 * Bootstrap: tab.js v3.3.0
* http://getbootstrap.com/javascript/#tabs * http://getbootstrap.com/javascript/#tabs
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -1938,7 +2021,7 @@ if (typeof jQuery === 'undefined') {
this.element = $(element) this.element = $(element)
} }
Tab.VERSION = '3.2.0' Tab.VERSION = '3.3.0'
Tab.TRANSITION_DURATION = 150 Tab.TRANSITION_DURATION = 150
@ -2062,15 +2145,19 @@ if (typeof jQuery === 'undefined') {
// TAB DATA-API // TAB DATA-API
// ============ // ============
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { var clickHandler = function (e) {
e.preventDefault() e.preventDefault()
Plugin.call($(this), 'show') Plugin.call($(this), 'show')
}) }
$(document)
.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: affix.js v3.2.0 * Bootstrap: affix.js v3.3.0
* http://getbootstrap.com/javascript/#affix * http://getbootstrap.com/javascript/#affix
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -2099,7 +2186,7 @@ if (typeof jQuery === 'undefined') {
this.checkPosition() this.checkPosition()
} }
Affix.VERSION = '3.2.0' Affix.VERSION = '3.3.0'
Affix.RESET = 'affix affix-top affix-bottom' Affix.RESET = 'affix affix-top affix-bottom'

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

File diff suppressed because one or more lines are too long

4
docs/examples/blog/index.html
View File

@ -156,12 +156,12 @@
</div><!-- /.container --> </div><!-- /.container -->
<div class="blog-footer"> <footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p> <p>
<a href="#">Back to top</a> <a href="#">Back to top</a>
</p> </p>
</div> </footer>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript

6
docs/examples/carousel/index.html
View File

@ -49,7 +49,7 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -111,11 +111,11 @@
</div> </div>
</div> </div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
</div><!-- /.carousel --> </div><!-- /.carousel -->

12
docs/examples/cover/index.html
View File

@ -38,11 +38,13 @@
<div class="masthead clearfix"> <div class="masthead clearfix">
<div class="inner"> <div class="inner">
<h3 class="masthead-brand">Cover</h3> <h3 class="masthead-brand">Cover</h3>
<ul class="nav masthead-nav"> <nav>
<li class="active"><a href="#">Home</a></li> <ul class="nav masthead-nav">
<li><a href="#">Features</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li> <li><a href="#">Features</a></li>
</ul> <li><a href="#">Contact</a></li>
</ul>
</nav>
</div> </div>
</div> </div>

2
docs/examples/dashboard/index.html
View File

@ -58,7 +58,7 @@
<div class="row"> <div class="row">
<div class="col-sm-3 col-md-2 sidebar"> <div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar"> <ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li> <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li> <li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li> <li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li> <li><a href="#">Export</a></li>

16
docs/examples/jumbotron-narrow/index.html
View File

@ -31,11 +31,13 @@
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<ul class="nav nav-pills pull-right" role="tablist"> <nav>
<li role="presentation" class="active"><a href="#">Home</a></li> <ul class="nav nav-pills pull-right">
<li role="presentation"><a href="#">About</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Contact</a></li> <li role="presentation"><a href="#">About</a></li>
</ul> <li role="presentation"><a href="#">Contact</a></li>
</ul>
</nav>
<h3 class="text-muted">Project name</h3> <h3 class="text-muted">Project name</h3>
</div> </div>
@ -69,9 +71,9 @@
</div> </div>
</div> </div>
<div class="footer"> <footer class="footer">
<p>&copy; Company 2014</p> <p>&copy; Company 2014</p>
</div> </footer>
</div> <!-- /container --> </div> <!-- /container -->

24
docs/examples/justified-nav/index.html
View File

@ -33,14 +33,16 @@
<div class="masthead"> <div class="masthead">
<h3 class="text-muted">Project name</h3> <h3 class="text-muted">Project name</h3>
<ul class="nav nav-justified"> <div role="navigation">
<li class="active"><a href="#">Home</a></li> <ul class="nav nav-justified">
<li><a href="#">Projects</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li> <li><a href="#">Projects</a></li>
<li><a href="#">Downloads</a></li> <li><a href="#">Services</a></li>
<li><a href="#">About</a></li> <li><a href="#">Downloads</a></li>
<li><a href="#">Contact</a></li> <li><a href="#">About</a></li>
</ul> <li><a href="#">Contact</a></li>
</ul>
</div>
</div> </div>
<!-- Jumbotron --> <!-- Jumbotron -->
@ -54,7 +56,7 @@
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<h2>Safari bug warning!</h2> <h2>Safari bug warning!</h2>
<p class="text-danger">As of v7.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p> <p class="text-danger">As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p> <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div> </div>
@ -71,9 +73,9 @@
</div> </div>
<!-- Site footer --> <!-- Site footer -->
<div class="footer"> <footer class="footer">
<p>&copy; Company 2014</p> <p>&copy; Company 2014</p>
</div> </footer>
</div> <!-- /container --> </div> <!-- /container -->

4
docs/examples/navbar-fixed-top/index.html
View File

@ -47,7 +47,7 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -62,7 +62,7 @@
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li> <li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li> <li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li> <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul> </ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>

4
docs/examples/navbar-static-top/index.html
View File

@ -47,7 +47,7 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -61,7 +61,7 @@
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li> <li><a href="../navbar/">Default</a></li>
<li class="active"><a href="./">Static top</a></li> <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li> <li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul> </ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->

10
docs/examples/navbar/index.html
View File

@ -45,11 +45,11 @@
</div> </div>
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">About</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -62,7 +62,7 @@
</li> </li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default</a></li> <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li> <li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li> <li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul> </ul>

2
docs/examples/non-responsive/index.html
View File

@ -49,7 +49,7 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>

6
docs/examples/signin/index.html
View File

@ -33,8 +33,10 @@
<form class="form-signin" role="form"> <form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2> <h2 class="form-signin-heading">Please sign in</h2>
<input type="email" class="form-control" placeholder="Email address" required autofocus> <label for="inputEmail" class="sr-only">Email address</label>
<input type="password" class="form-control" placeholder="Password" required> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Email address</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" value="remember-me"> Remember me <input type="checkbox" value="remember-me"> Remember me

6
docs/examples/sticky-footer-navbar/index.html
View File

@ -47,7 +47,7 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -72,11 +72,11 @@
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div> </div>
<div class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<p class="text-muted">Place sticky footer content here.</p> <p class="text-muted">Place sticky footer content here.</p>
</div> </div>
</div> </footer>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript

4
docs/examples/sticky-footer/index.html
View File

@ -38,11 +38,11 @@
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div> </div>
<div class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<p class="text-muted">Place sticky footer content here.</p> <p class="text-muted">Place sticky footer content here.</p>
</div> </div>
</div> </footer>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

12
docs/examples/theme/index.html
View File

@ -49,7 +49,7 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -341,7 +341,7 @@
<h1>Dropdown menus</h1> <h1>Dropdown menus</h1>
</div> </div>
<div class="dropdown theme-dropdown clearfix"> <div class="dropdown theme-dropdown clearfix">
<a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a id="dropdownMenu1" href="#" class="sr-only dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li class="active" 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>
@ -388,7 +388,7 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -421,7 +421,7 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -616,11 +616,11 @@
</div> </div>
</div> </div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
</div> </div>

44
grunt/configBridge.json Normal file
View File

@ -0,0 +1,44 @@
{
"paths": {
"customizerJs": [
"../assets/js/vendor/autoprefixer.js",
"../assets/js/vendor/less.min.js",
"../assets/js/vendor/jszip.min.js",
"../assets/js/vendor/uglify.min.js",
"../assets/js/vendor/Blob.js",
"../assets/js/vendor/FileSaver.js",
"../assets/js/raw-files.min.js",
"../assets/js/src/customizer.js"
],
"docsJs": [
"../assets/js/vendor/holder.js",
"../assets/js/vendor/ZeroClipboard.min.js",
"../assets/js/src/application.js"
]
},
"config": {
"autoprefixerBrowsers": [
"Android 2.3",
"Android >= 4",
"Chrome >= 20",
"Firefox >= 24",
"Explorer >= 8",
"iOS >= 6",
"Opera >= 12",
"Safari >= 6"
],
"jqueryCheck": [
"if (typeof jQuery === 'undefined') {",
" throw new Error('Bootstrap\\'s JavaScript requires jQuery')",
"}\n"
],
"jqueryVersionCheck": [
"+function ($) {",
" var version = $.fn.jquery.split(' ')[0].split('.')",
" if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {",
" throw new Error('Bootstrap\\'s JavaScript requires jQuery version 1.9.1 or higher')",
" }",
"}(jQuery);\n\n"
]
}
}

4
js/affix.js
View File

@ -1,5 +1,5 @@
/* ======================================================================== /* ========================================================================
* Bootstrap: affix.js v3.2.0 * Bootstrap: affix.js v3.3.0
* http://getbootstrap.com/javascript/#affix * http://getbootstrap.com/javascript/#affix
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -28,7 +28,7 @@
this.checkPosition() this.checkPosition()
} }
Affix.VERSION = '3.2.0' Affix.VERSION = '3.3.0'
Affix.RESET = 'affix affix-top affix-bottom' Affix.RESET = 'affix affix-top affix-bottom'

4
js/alert.js
View File

@ -1,5 +1,5 @@
/* ======================================================================== /* ========================================================================
* Bootstrap: alert.js v3.2.0 * Bootstrap: alert.js v3.3.0
* http://getbootstrap.com/javascript/#alerts * http://getbootstrap.com/javascript/#alerts
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -18,7 +18,7 @@
$(el).on('click', dismiss, this.close) $(el).on('click', dismiss, this.close)
} }
Alert.VERSION = '3.2.0' Alert.VERSION = '3.3.0'
Alert.TRANSITION_DURATION = 150 Alert.TRANSITION_DURATION = 150

10
js/button.js
View File

@ -1,5 +1,5 @@
/* ======================================================================== /* ========================================================================
* Bootstrap: button.js v3.2.0 * Bootstrap: button.js v3.3.0
* http://getbootstrap.com/javascript/#buttons * http://getbootstrap.com/javascript/#buttons
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -19,7 +19,7 @@
this.isLoading = false this.isLoading = false
} }
Button.VERSION = '3.2.0' Button.VERSION = '3.3.0'
Button.DEFAULTS = { Button.DEFAULTS = {
loadingText: 'loading...' loadingText: 'loading...'
@ -35,10 +35,10 @@
if (data.resetText == null) $el.data('resetText', $el[val]()) if (data.resetText == null) $el.data('resetText', $el[val]())
$el[val](data[state] == null ? this.options[state] : data[state])
// push to event loop to allow forms to submit // push to event loop to allow forms to submit
setTimeout($.proxy(function () { setTimeout($.proxy(function () {
$el[val](data[state] == null ? this.options[state] : data[state])
if (state == 'loadingText') { if (state == 'loadingText') {
this.isLoading = true this.isLoading = true
$el.addClass(d).attr(d, d) $el.addClass(d).attr(d, d)
@ -110,7 +110,7 @@
e.preventDefault() e.preventDefault()
}) })
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) { .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
$(e.target).closest('.btn').toggleClass('focus', e.type == 'focus') $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
}) })
}(jQuery); }(jQuery);

13
js/carousel.js
View File

@ -1,5 +1,5 @@
/* ======================================================================== /* ========================================================================
* Bootstrap: carousel.js v3.2.0 * Bootstrap: carousel.js v3.3.0
* http://getbootstrap.com/javascript/#carousel * http://getbootstrap.com/javascript/#carousel
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -30,7 +30,7 @@
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this)) .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
} }
Carousel.VERSION = '3.2.0' Carousel.VERSION = '3.3.0'
Carousel.TRANSITION_DURATION = 600 Carousel.TRANSITION_DURATION = 600
@ -42,6 +42,7 @@
} }
Carousel.prototype.keydown = function (e) { Carousel.prototype.keydown = function (e) {
if (/input|textarea/i.test(e.target.tagName)) return
switch (e.which) { switch (e.which) {
case 37: this.prev(); break case 37: this.prev(); break
case 39: this.next(); break case 39: this.next(); break
@ -207,7 +208,7 @@
// CAROUSEL DATA-API // CAROUSEL DATA-API
// ================= // =================
$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) { var clickHandler = function (e) {
var href var href
var $this = $(this) var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7 var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
@ -223,7 +224,11 @@
} }
e.preventDefault() e.preventDefault()
}) }
$(document)
.on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
.on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
$(window).on('load', function () { $(window).on('load', function () {
$('[data-ride="carousel"]').each(function () { $('[data-ride="carousel"]').each(function () {

69
js/collapse.js
View File

@ -1,5 +1,5 @@
/* ======================================================================== /* ========================================================================
* Bootstrap: collapse.js v3.2.0 * Bootstrap: collapse.js v3.3.0
* http://getbootstrap.com/javascript/#collapse * http://getbootstrap.com/javascript/#collapse
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -16,18 +16,25 @@
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.transitioning = null this.transitioning = null
if (this.options.parent) this.$parent = $(this.options.parent) if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle() if (this.options.toggle) this.toggle()
} }
Collapse.VERSION = '3.2.0' Collapse.VERSION = '3.3.0'
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 () {
@ -62,6 +69,10 @@
.addClass('collapsing')[dimension](0) .addClass('collapsing')[dimension](0)
.attr('aria-expanded', true) .attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1 this.transitioning = 1
var complete = function () { var complete = function () {
@ -98,6 +109,10 @@
.removeClass('collapse in') .removeClass('collapse in')
.attr('aria-expanded', false) .attr('aria-expanded', false)
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
this.transitioning = 1 this.transitioning = 1
var complete = function () { var complete = function () {
@ -120,6 +135,33 @@
this[this.$element.hasClass('in') ? 'hide' : 'show']() this[this.$element.hasClass('in') ? 'hide' : 'show']()
} }
Collapse.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
// COLLAPSE PLUGIN DEFINITION // COLLAPSE PLUGIN DEFINITION
// ========================== // ==========================
@ -155,22 +197,13 @@
// ================= // =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) { $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var href
var $this = $(this) var $this = $(this)
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
var $target = $(target)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent)
if (!data || !data.transitioning) { if (!$this.attr('data-target')) e.preventDefault()
if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed').attr('aria-expanded', false)
var isCollapsed = $target.hasClass('in') var $target = getTargetFromTrigger($this)
$this.toggleClass('collapsed', isCollapsed).attr('aria-expanded', !isCollapsed) var data = $target.data('bs.collapse')
} var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this })
Plugin.call($target, option) Plugin.call($target, option)
}) })

10
js/dropdown.js
View File

@ -1,5 +1,5 @@
/* ======================================================================== /* ========================================================================
* Bootstrap: dropdown.js v3.2.0 * Bootstrap: dropdown.js v3.3.0
* http://getbootstrap.com/javascript/#dropdowns * http://getbootstrap.com/javascript/#dropdowns
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -19,7 +19,7 @@
$(element).on('click.bs.dropdown', this.toggle) $(element).on('click.bs.dropdown', this.toggle)
} }
Dropdown.VERSION = '3.2.0' Dropdown.VERSION = '3.3.0'
Dropdown.prototype.toggle = function (e) { Dropdown.prototype.toggle = function (e) {
var $this = $(this) var $this = $(this)
@ -55,7 +55,7 @@
} }
Dropdown.prototype.keydown = function (e) { Dropdown.prototype.keydown = function (e) {
if (!/(38|40|27|32)/.test(e.which)) return if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
var $this = $(this) var $this = $(this)
@ -154,6 +154,8 @@
.on('click.bs.dropdown.data-api', clearMenus) .on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle) .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown) .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
}(jQuery); }(jQuery);

53
js/modal.js
View File

@ -1,5 +1,5 @@
/* ======================================================================== /* ========================================================================
* Bootstrap: modal.js v3.2.0 * Bootstrap: modal.js v3.3.0
* http://getbootstrap.com/javascript/#modals * http://getbootstrap.com/javascript/#modals
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -30,7 +30,7 @@
} }
} }
Modal.VERSION = '3.2.0' Modal.VERSION = '3.3.0'
Modal.TRANSITION_DURATION = 300 Modal.TRANSITION_DURATION = 300
Modal.BACKDROP_TRANSITION_DURATION = 150 Modal.BACKDROP_TRANSITION_DURATION = 150
@ -56,10 +56,11 @@
this.isShown = true this.isShown = true
this.checkScrollbar() this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open') this.$body.addClass('modal-open')
this.setScrollbar()
this.escape() this.escape()
this.resize()
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))
@ -74,6 +75,9 @@
.show() .show()
.scrollTop(0) .scrollTop(0)
if (that.options.backdrop) that.adjustBackdrop()
that.adjustDialog()
if (transition) { if (transition) {
that.$element[0].offsetWidth // force reflow that.$element[0].offsetWidth // force reflow
} }
@ -108,6 +112,7 @@
this.isShown = false this.isShown = false
this.escape() this.escape()
this.resize()
$(document).off('focusin.bs.modal') $(document).off('focusin.bs.modal')
@ -143,11 +148,20 @@
} }
} }
Modal.prototype.resize = function () {
if (this.isShown) {
$(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
} else {
$(window).off('resize.bs.modal')
}
}
Modal.prototype.hideModal = function () { Modal.prototype.hideModal = function () {
var that = this var that = this
this.$element.hide() this.$element.hide()
this.backdrop(function () { this.backdrop(function () {
that.$body.removeClass('modal-open') that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar() that.resetScrollbar()
that.$element.trigger('hidden.bs.modal') that.$element.trigger('hidden.bs.modal')
}) })
@ -204,13 +218,43 @@
} }
} }
// these following methods are used to handle overflowing modals
Modal.prototype.handleUpdate = function () {
if (this.options.backdrop) this.adjustBackdrop()
this.adjustDialog()
}
Modal.prototype.adjustBackdrop = function () {
this.$backdrop
.css('height', 0)
.css('height', this.$element[0].scrollHeight)
}
Modal.prototype.adjustDialog = function () {
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
})
}
Modal.prototype.resetAdjustments = function () {
this.$element.css({
paddingLeft: '',
paddingRight: ''
})
}
Modal.prototype.checkScrollbar = function () { Modal.prototype.checkScrollbar = function () {
this.bodyIsOverflowing = document.body.scrollHeight > document.documentElement.clientHeight
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)
if (this.scrollbarWidth) 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 () {
@ -218,7 +262,6 @@
} }
Modal.prototype.measureScrollbar = function () { // thx walsh Modal.prototype.measureScrollbar = function () { // thx walsh
if (document.body.clientWidth >= window.innerWidth) return 0
var scrollDiv = document.createElement('div') var scrollDiv = document.createElement('div')
scrollDiv.className = 'modal-scrollbar-measure' scrollDiv.className = 'modal-scrollbar-measure'
this.$body.append(scrollDiv) this.$body.append(scrollDiv)

4
js/popover.js
View File

@ -1,5 +1,5 @@
/* ======================================================================== /* ========================================================================
* Bootstrap: popover.js v3.2.0 * Bootstrap: popover.js v3.3.0
* http://getbootstrap.com/javascript/#popovers * http://getbootstrap.com/javascript/#popovers
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -19,7 +19,7 @@
if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js') if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
Popover.VERSION = '3.2.0' Popover.VERSION = '3.3.0'
Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, { Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
placement: 'right', placement: 'right',

4
js/scrollspy.js
View File

@ -1,5 +1,5 @@
/* ======================================================================== /* ========================================================================
* Bootstrap: scrollspy.js v3.2.0 * Bootstrap: scrollspy.js v3.3.0
* http://getbootstrap.com/javascript/#scrollspy * http://getbootstrap.com/javascript/#scrollspy
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -30,7 +30,7 @@
this.process() this.process()
} }
ScrollSpy.VERSION = '3.2.0' ScrollSpy.VERSION = '3.3.0'
ScrollSpy.DEFAULTS = { ScrollSpy.DEFAULTS = {
offset: 10 offset: 10

12
js/tab.js
View File

@ -1,5 +1,5 @@
/* ======================================================================== /* ========================================================================
* Bootstrap: tab.js v3.2.0 * Bootstrap: tab.js v3.3.0
* http://getbootstrap.com/javascript/#tabs * http://getbootstrap.com/javascript/#tabs
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -17,7 +17,7 @@
this.element = $(element) this.element = $(element)
} }
Tab.VERSION = '3.2.0' Tab.VERSION = '3.3.0'
Tab.TRANSITION_DURATION = 150 Tab.TRANSITION_DURATION = 150
@ -141,9 +141,13 @@
// TAB DATA-API // TAB DATA-API
// ============ // ============
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { var clickHandler = function (e) {
e.preventDefault() e.preventDefault()
Plugin.call($(this), 'show') Plugin.call($(this), 'show')
}) }
$(document)
.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)
}(jQuery); }(jQuery);

9
js/tests/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Bootstrap Plugin Test Suite</title> <title>Bootstrap Plugin Test Suite</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery --> <!-- jQuery -->
<script src="vendor/jquery.min.js"></script> <script src="vendor/jquery.min.js"></script>
@ -12,7 +13,12 @@
<script src="vendor/qunit.js"></script> <script src="vendor/qunit.js"></script>
<style> <style>
#qunit-tests > li.pass { #qunit-tests > li.pass {
display: none;/* Make it easier to see failing tests is Sauce screencasts */ display: none;/* Make it easier to see failing tests in Sauce screencasts */
}
#qunit-fixture {
top: 0;
left: 0;
} }
</style> </style>
<script> <script>
@ -36,6 +42,7 @@
}) })
QUnit.testStart(function (testDetails) { QUnit.testStart(function (testDetails) {
$(window).scrollTop(0)
QUnit.log = function (details) { QUnit.log = function (details) {
if (!details.result) { if (!details.result) {
details.name = testDetails.name details.name = testDetails.name

10
js/tests/unit/button.js
View File

@ -33,9 +33,9 @@ $(function () {
var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>') var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal($btn.html(), 'mdo', 'btn text equals mdo') equal($btn.html(), 'mdo', 'btn text equals mdo')
$btn.bootstrapButton('loading') $btn.bootstrapButton('loading')
equal($btn.html(), 'fat', 'btn text equals fat')
stop() stop()
setTimeout(function () { setTimeout(function () {
equal($btn.html(), 'fat', 'btn text equals fat')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled') ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class') ok($btn.hasClass('disabled'), 'btn has disabled class')
start() start()
@ -46,16 +46,16 @@ $(function () {
var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>') var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal($btn.html(), 'mdo', 'btn text equals mdo') equal($btn.html(), 'mdo', 'btn text equals mdo')
$btn.bootstrapButton('loading') $btn.bootstrapButton('loading')
equal($btn.html(), 'fat', 'btn text equals fat')
stop() stop()
setTimeout(function () { setTimeout(function () {
equal($btn.html(), 'fat', 'btn text equals fat')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled') ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class') ok($btn.hasClass('disabled'), 'btn has disabled class')
start() start()
stop() stop()
$btn.bootstrapButton('reset') $btn.bootstrapButton('reset')
equal($btn.html(), 'mdo', 'btn text equals mdo')
setTimeout(function () { setTimeout(function () {
equal($btn.html(), 'mdo', 'btn text equals mdo')
ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled') ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
ok(!$btn.hasClass('disabled'), 'btn does not have disabled class') ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
start() start()
@ -67,16 +67,16 @@ $(function () {
var $btn = $('<button class="btn" data-loading-text="fat"/>') var $btn = $('<button class="btn" data-loading-text="fat"/>')
equal($btn.html(), '', 'btn text equals ""') equal($btn.html(), '', 'btn text equals ""')
$btn.bootstrapButton('loading') $btn.bootstrapButton('loading')
equal($btn.html(), 'fat', 'btn text equals fat')
stop() stop()
setTimeout(function () { setTimeout(function () {
equal($btn.html(), 'fat', 'btn text equals fat')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled') ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class') ok($btn.hasClass('disabled'), 'btn has disabled class')
start() start()
stop() stop()
$btn.bootstrapButton('reset') $btn.bootstrapButton('reset')
equal($btn.html(), '', 'btn text equals ""')
setTimeout(function () { setTimeout(function () {
equal($btn.html(), '', 'btn text equals ""')
ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled') ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
ok(!$btn.hasClass('disabled'), 'btn does not have disabled class') ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
start() start()

42
js/tests/unit/carousel.js
View File

@ -478,6 +478,48 @@ $(function () {
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press') strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
}) })
test('should ignore keyboard events within <input>s and <textarea>s', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
+ '<div class="carousel-inner">'
+ '<div id="first" class="item active">'
+ '<img alt="">'
+ '<input type="text" id="in-put">'
+ '<textarea id="text-area"></textarea>'
+ '</div>'
+ '<div id="second" class="item">'
+ '<img alt="">'
+ '</div>'
+ '<div id="third" class="item">'
+ '<img alt="">'
+ '</div>'
+ '</div>'
+ '</div>'
var $template = $(templateHTML)
var $input = $template.find('#in-put')
var $textarea = $template.find('#text-area')
strictEqual($input.length, 1, 'found <input>')
strictEqual($textarea.length, 1, 'found <textarea>')
$template.bootstrapCarousel()
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
$input.trigger($.Event('keydown', { which: 39 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>')
$input.trigger($.Event('keydown', { which: 37 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>')
$textarea.trigger($.Event('keydown', { which: 39 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>')
$textarea.trigger($.Event('keydown', { which: 37 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>')
})
test('should only add mouseenter and mouseleave listeners when not on mobile', function () { test('should only add mouseenter and mouseleave listeners when not on mobile', function () {
var isMobile = 'ontouchstart' in document.documentElement var isMobile = 'ontouchstart' in document.documentElement
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">' var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">'

72
js/tests/unit/collapse.js
View File

@ -79,7 +79,7 @@ $(function () {
$('<div id="test1"/>') $('<div id="test1"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.on('show.bs.collapse', function () { .on('shown.bs.collapse', function () {
ok(!$target.hasClass('collapsed')) ok(!$target.hasClass('collapsed'))
start() start()
}) })
@ -94,7 +94,7 @@ $(function () {
$('<div id="test1" class="in"/>') $('<div id="test1" class="in"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.on('hide.bs.collapse', function () { .on('hidden.bs.collapse', function () {
ok($target.hasClass('collapsed')) ok($target.hasClass('collapsed'))
start() start()
}) })
@ -137,12 +137,12 @@ $(function () {
test('should remove "collapsed" class from active accordion target', function () { test('should remove "collapsed" class from active accordion target', function () {
stop() stop()
var accordionHTML = '<div id="accordion">' var accordionHTML = '<div class="panel-group" id="accordion">'
+ '<div class="accordion-group"/>' + '<div class="panel"/>'
+ '<div class="accordion-group"/>' + '<div class="panel"/>'
+ '<div class="accordion-group"/>' + '<div class="panel"/>'
+ '</div>' + '</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group') var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0)) var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
@ -156,7 +156,7 @@ $(function () {
$('<div id="body3"/>') $('<div id="body3"/>')
.appendTo($groups.eq(2)) .appendTo($groups.eq(2))
.on('show.bs.collapse', function () { .on('shown.bs.collapse', function () {
ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"') ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"') ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"') ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
@ -170,12 +170,12 @@ $(function () {
test('should allow dots in data-parent', function () { test('should allow dots in data-parent', function () {
stop() stop()
var accordionHTML = '<div class="accordion">' var accordionHTML = '<div class="panel-group accordion">'
+ '<div class="accordion-group"/>' + '<div class="panel"/>'
+ '<div class="accordion-group"/>' + '<div class="panel"/>'
+ '<div class="accordion-group"/>' + '<div class="panel"/>'
+ '</div>' + '</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group') var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0)) var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
@ -189,7 +189,7 @@ $(function () {
$('<div id="body3"/>') $('<div id="body3"/>')
.appendTo($groups.eq(2)) .appendTo($groups.eq(2))
.on('show.bs.collapse', function () { .on('shown.bs.collapse', function () {
ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"') ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"') ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"') ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
@ -207,7 +207,7 @@ $(function () {
$('<div id="test1"/>') $('<div id="test1"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.on('show.bs.collapse', function () { .on('shown.bs.collapse', function () {
equal($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"') equal($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"')
start() start()
}) })
@ -222,7 +222,7 @@ $(function () {
$('<div id="test1" class="in"/>') $('<div id="test1" class="in"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.on('hide.bs.collapse', function () { .on('hidden.bs.collapse', function () {
equal($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"') equal($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
start() start()
}) })
@ -233,12 +233,12 @@ $(function () {
test('should change aria-expanded from active accordion target to "false" and set the newly active one to "true"', function () { test('should change aria-expanded from active accordion target to "false" and set the newly active one to "true"', function () {
stop() stop()
var accordionHTML = '<div id="accordion">' var accordionHTML = '<div class="panel-group" id="accordion">'
+ '<div class="accordion-group"/>' + '<div class="panel"/>'
+ '<div class="accordion-group"/>' + '<div class="panel"/>'
+ '<div class="accordion-group"/>' + '<div class="panel"/>'
+ '</div>' + '</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group') var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0)) var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
@ -252,7 +252,7 @@ $(function () {
$('<div id="body3" aria-expanded="false"/>') $('<div id="body3" aria-expanded="false"/>')
.appendTo($groups.eq(2)) .appendTo($groups.eq(2))
.on('show.bs.collapse', function () { .on('shown.bs.collapse', function () {
equal($target1.attr('aria-expanded'), 'false', 'inactive target 1 has aria-expanded="false"') equal($target1.attr('aria-expanded'), 'false', 'inactive target 1 has aria-expanded="false"')
equal($target2.attr('aria-expanded'), 'false', 'inactive target 2 has aria-expanded="false"') equal($target2.attr('aria-expanded'), 'false', 'inactive target 2 has aria-expanded="false"')
equal($target3.attr('aria-expanded'), 'true', 'active target 3 has aria-expanded="false"') equal($target3.attr('aria-expanded'), 'true', 'active target 3 has aria-expanded="false"')
@ -298,4 +298,32 @@ $(function () {
}, 1) }, 1)
}) })
test('should add "collapsed" class to target when collapse is hidden via manual invocation', function () {
stop()
var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
$('<div id="test1" class="in"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
ok($target.hasClass('collapsed'))
start()
})
.bootstrapCollapse('hide')
})
test('should remove "collapsed" class from target when collapse is shown via manual invocation', function () {
stop()
var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
$('<div id="test1"/>')
.appendTo('#qunit-fixture')
.on('shown.bs.collapse', function () {
ok(!$target.hasClass('collapsed'))
start()
})
.bootstrapCollapse('show')
})
}) })

41
js/tests/unit/dropdown.js
View File

@ -224,4 +224,45 @@ $(function () {
$(document.body).click() $(document.body).click()
}) })
test('should ignore keyboard events within <input>s and <textarea>s', function () {
stop()
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu" role="menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"/>'
+ '<li><a href="#">Another link</a></li>'
+ '<li><input type="text" id="input"></li>'
+ '<li><textarea id="textarea"/></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
var $input = $('#input')
var $textarea = $('#textarea')
$dropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
ok(true, 'shown was fired')
$input.focus().trigger($.Event('keydown', { which: 38 }))
ok($(document.activeElement).is($input), 'input still focused')
$textarea.focus().trigger($.Event('keydown', { which: 38 }))
ok($(document.activeElement).is($textarea), 'textarea still focused')
start()
})
$dropdown.click()
})
}) })

12
js/tests/visual/affix.html
View File

@ -1,8 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Affix</title> <title>Affix</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<style> <style>
/* Test Styles */ /* Test Styles */
@ -37,6 +40,13 @@
background-color: #85144B; background-color: #85144B;
} }
</style> </style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head> </head>
<body> <body>

12
js/tests/visual/alert.html
View File

@ -1,8 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alert</title> <title>Alert</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head> </head>
<body> <body>

12
js/tests/visual/button.html
View File

@ -1,8 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Button</title> <title>Button</title>
<link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head> </head>
<body> <body>

Some files were not shown because too many files have changed in this diff Show More