rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'master' into derp

Browse Source 
Conflicts:
	docs/_layouts/default.html
	docs/assets/css/docs.min.css
	docs/assets/css/src/docs.css
	docs/assets/js/docs.min.js
	docs/assets/js/src/application.js
This commit is contained in:
Mark Otto 2014-07-07 22:10:22 -07:00
commit 81b59d3536
230 changed files with 14222 additions and 5624 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.travis.yml
View File

@ -2,19 +2,23 @@ language: node_js
node_js: node_js:
- "0.10" - "0.10"
before_install: before_install:
- time sudo pip install --use-mirrors -r test-infra/requirements.txt - time travis_retry sudo pip install -r test-infra/requirements.txt
- rvm use 1.9.3 --fuzzy - rvm use 1.9.3 --fuzzy
- if [ "$TWBS_TEST" = validate-html ]; then echo "ruby=$(basename $(rvm gemdir)) jekyll=$JEKYLL_VERSION" > pseudo_Gemfile.lock; fi - export GEMDIR=$(rvm gemdir)
- if [ "$TWBS_TEST" = validate-html ]; then echo "ruby=$(basename $GEMDIR) jekyll=$JEKYLL_VERSION" > pseudo_Gemfile.lock; fi
- "export TRAVIS_COMMIT_MSG=\"$(git log --format=%B --no-merges -n 1)\""
- echo "$TRAVIS_COMMIT_MSG" | grep '\[skip validator\]'; export TWBS_DO_VALIDATOR=$?; true
- echo "$TRAVIS_COMMIT_MSG" | grep '\[skip sauce\]'; export TWBS_DO_SAUCE=$?; true
install: install:
- time npm install -g grunt-cli - time npm install -g grunt-cli
- time ./test-infra/s3_cache.py download 'npm packages' test-infra/npm-shrinkwrap.canonical.json ./node_modules || time ./test-infra/uncached-npm-install.sh - ./test-infra/s3_cache.py download npm-modules
- if [ "$TWBS_TEST" = validate-html ]; then time ./test-infra/s3_cache.py download rubygems pseudo_Gemfile.lock $(rvm gemdir) || gem install -N jekyll -v $JEKYLL_VERSION; fi - if [ "$TWBS_TEST" = validate-html ] && [ $TWBS_DO_VALIDATOR -ne 0 ]; then ./test-infra/s3_cache.py download rubygems; fi
after_script: after_script:
- if [ "$TWBS_TEST" = core ]; then time ./test-infra/s3_cache.py upload 'npm packages' test-infra/npm-shrinkwrap.canonical.json ./node_modules; fi - if [ "$TWBS_TEST" = core ]; then ./test-infra/s3_cache.py upload npm-modules; fi
- if [ "$TWBS_TEST" = validate-html ]; then time ./test-infra/s3_cache.py upload rubygems pseudo_Gemfile.lock $(rvm gemdir); 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: 1.4.2 - JEKYLL_VERSION: 2.1.0
- 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="
@ -26,3 +30,5 @@ env:
- TWBS_TEST=sauce-js-unit - TWBS_TEST=sauce-js-unit
matrix: matrix:
fast_finish: true fast_finish: true
notifications:
slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH

131
Gruntfile.js
View File

@ -17,10 +17,9 @@ module.exports = function (grunt) {
var fs = require('fs'); var fs = require('fs');
var path = require('path'); var path = require('path');
var generateGlyphiconsData = require('./grunt/bs-glyphicons-data-generator.js'); var npmShrinkwrap = require('npm-shrinkwrap');
var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js'); var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js');
var generateRawFiles = require('./grunt/bs-raw-files-generator.js'); var generateRawFiles = require('./grunt/bs-raw-files-generator.js');
var updateShrinkwrap = require('./grunt/shrinkwrap.js');
// Project configuration. // Project configuration.
grunt.initConfig({ grunt.initConfig({
@ -32,6 +31,7 @@ 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 code is duplicated in customizer.js; if making changes here, be sure to update the other copy too.
jqueryCheck: 'if (typeof jQuery === \'undefined\') { throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery\') }\n\n', jqueryCheck: 'if (typeof jQuery === \'undefined\') { throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery\') }\n\n',
// Task configuration. // Task configuration.
@ -53,10 +53,13 @@ module.exports = function (grunt) {
src: 'js/*.js' src: 'js/*.js'
}, },
test: { test: {
options: {
jshintrc: 'js/tests/unit/.jshintrc'
},
src: 'js/tests/unit/*.js' src: 'js/tests/unit/*.js'
}, },
assets: { assets: {
src: 'docs/assets/js/src/*.js' src: ['docs/assets/js/src/*.js', 'docs/assets/js/*.js', '!docs/assets/js/*.min.js']
} }
}, },
@ -65,10 +68,6 @@ module.exports = function (grunt) {
config: 'js/.jscsrc' config: 'js/.jscsrc'
}, },
grunt: { grunt: {
options: {
requireCamelCaseOrUpperCaseIdentifiers: null,
requireParenthesesAroundIIFE: true
},
src: '<%= jshint.grunt.src %>' src: '<%= jshint.grunt.src %>'
}, },
src: { src: {
@ -78,6 +77,9 @@ module.exports = function (grunt) {
src: '<%= jshint.test.src %>' src: '<%= jshint.test.src %>'
}, },
assets: { assets: {
options: {
requireCamelCaseOrUpperCaseIdentifiers: null
},
src: '<%= jshint.assets.src %>' src: '<%= jshint.assets.src %>'
} }
}, },
@ -108,19 +110,13 @@ module.exports = function (grunt) {
uglify: { uglify: {
options: { options: {
report: 'min' preserveComments: 'some'
}, },
bootstrap: { bootstrap: {
options: {
banner: '<%= banner %>'
},
src: '<%= concat.bootstrap.dest %>', src: '<%= concat.bootstrap.dest %>',
dest: 'dist/js/<%= pkg.name %>.min.js' dest: 'dist/js/<%= pkg.name %>.min.js'
}, },
customize: { customize: {
options: {
preserveComments: 'some'
},
src: [ src: [
'docs/assets/js/vendor/less.min.js', 'docs/assets/js/vendor/less.min.js',
'docs/assets/js/vendor/jszip.min.js', 'docs/assets/js/vendor/jszip.min.js',
@ -133,11 +129,10 @@ module.exports = function (grunt) {
dest: 'docs/assets/js/customize.min.js' dest: 'docs/assets/js/customize.min.js'
}, },
docsJs: { docsJs: {
options: { // NOTE: This src list is duplicated in footer.html; if making changes here, be sure to update the other copy too.
preserveComments: 'some'
},
src: [ src: [
'docs/assets/js/vendor/holder.js', 'docs/assets/js/vendor/holder.js',
'docs/assets/js/vendor/ZeroClipboard.min.js',
'docs/assets/js/src/application.js' 'docs/assets/js/src/application.js'
], ],
dest: 'docs/assets/js/docs.min.js' dest: 'docs/assets/js/docs.min.js'
@ -175,23 +170,21 @@ module.exports = function (grunt) {
files: { files: {
'dist/css/<%= pkg.name %>-theme.css': 'less/theme.less' 'dist/css/<%= pkg.name %>-theme.css': 'less/theme.less'
} }
},
minify: {
options: {
cleancss: true,
report: 'min'
},
files: {
'dist/css/<%= pkg.name %>.min.css': 'dist/css/<%= pkg.name %>.css',
'dist/css/<%= pkg.name %>-rtl.min.css': 'dist/css/<%= pkg.name %>-rtl.css',
'dist/css/<%= pkg.name %>-theme.min.css': 'dist/css/<%= pkg.name %>-theme.css'
}
} }
}, },
autoprefixer: { autoprefixer: {
options: { options: {
browsers: ['last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12'] browsers: [
'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: {
@ -216,14 +209,6 @@ module.exports = function (grunt) {
} }
}, },
cssflip: {
rtl: {
files: {
'dist/css/<%= pkg.name %>-rtl.css': 'dist/css/<%= pkg.name %>.css'
}
}
},
csslint: { csslint: {
options: { options: {
csslintrc: 'less/.csslintrc' csslintrc: 'less/.csslintrc'
@ -246,10 +231,15 @@ module.exports = function (grunt) {
cssmin: { cssmin: {
options: { options: {
compatibility: 'ie8',
keepSpecialComments: '*', keepSpecialComments: '*',
noAdvanced: true, // turn advanced optimizations off until the issue is fixed in clean-css noAdvanced: true
report: 'min', },
compatibility: 'ie8' core: {
files: {
'dist/css/<%= pkg.name %>.min.css': 'dist/css/<%= pkg.name %>.css',
'dist/css/<%= pkg.name %>-theme.min.css': 'dist/css/<%= pkg.name %>-theme.css'
}
}, },
docs: { docs: {
src: [ src: [
@ -303,8 +293,8 @@ module.exports = function (grunt) {
expand: true, expand: true,
cwd: './dist', cwd: './dist',
src: [ src: [
'{css,js}/*.min.*', 'css/*',
'css/*.map', 'js/*',
'fonts/*' 'fonts/*'
], ],
dest: 'docs/dist' dest: 'docs/dist'
@ -330,14 +320,14 @@ module.exports = function (grunt) {
pretty: true, pretty: true,
data: function () { data: function () {
var filePath = path.join(__dirname, 'less/variables.less'); var filePath = path.join(__dirname, 'less/variables.less');
var fileContent = fs.readFileSync(filePath, {encoding: 'utf8'}); var fileContent = fs.readFileSync(filePath, { encoding: 'utf8' });
var parser = new BsLessdocParser(fileContent); var parser = new BsLessdocParser(fileContent);
return {sections: parser.parseFile()}; return { sections: parser.parseFile() };
} }
}, },
files: { files: {
'docs/_includes/customizer-variables.html': 'docs/jade/customizer-variables.jade', 'docs/_includes/customizer-variables.html': 'docs/_jade/customizer-variables.jade',
'docs/_includes/nav/customize.html': 'docs/jade/customizer-nav.jade' 'docs/_includes/nav/customize.html': 'docs/_jade/customizer-nav.jade'
} }
} }
}, },
@ -389,6 +379,7 @@ module.exports = function (grunt) {
options: { options: {
build: process.env.TRAVIS_JOB_ID, build: process.env.TRAVIS_JOB_ID,
concurrency: 10, concurrency: 10,
maxRetries: 3,
urls: ['http://127.0.0.1:3000/js/tests/index.html'], urls: ['http://127.0.0.1:3000/js/tests/index.html'],
browsers: grunt.file.readYAML('grunt/sauce_browsers.yml') browsers: grunt.file.readYAML('grunt/sauce_browsers.yml')
} }
@ -398,35 +389,43 @@ module.exports = function (grunt) {
exec: { exec: {
npmUpdate: { npmUpdate: {
command: 'npm update' command: 'npm update'
},
npmShrinkWrap: {
command: 'npm shrinkwrap --dev'
} }
} }
}); });
// These plugins provide necessary tasks. // These plugins provide necessary tasks.
require('load-grunt-tasks')(grunt, {scope: 'devDependencies'}); require('load-grunt-tasks')(grunt, { scope: 'devDependencies' });
require('time-grunt')(grunt); require('time-grunt')(grunt);
// Docs HTML validation task // Docs HTML validation task
grunt.registerTask('validate-html', ['jekyll', 'validation']); grunt.registerTask('validate-html', ['jekyll', 'validation']);
var runSubset = function (subset) {
return !process.env.TWBS_TEST || process.env.TWBS_TEST === subset;
};
var isUndefOrNonZero = function (val) {
return val === undefined || val !== '0';
};
// Test task. // Test task.
var testSubtasks = []; var testSubtasks = [];
// Skip core tests if running a different subset of the test suite // Skip core tests if running a different subset of the test suite
if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'core') { if (runSubset('core')) {
testSubtasks = testSubtasks.concat(['dist-css', 'csslint', 'jshint', 'jscs', 'qunit', 'build-customizer-html']); testSubtasks = testSubtasks.concat(['dist-css', 'csslint', 'jshint', 'jscs', 'qunit', 'build-customizer-html']);
} }
// Skip HTML validation if running a different subset of the test suite // Skip HTML validation if running a different subset of the test suite
if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'validate-html') { if (runSubset('validate-html') &&
// Skip HTML5 validator on Travis when [skip validator] is in the commit message
isUndefOrNonZero(process.env.TWBS_DO_VALIDATOR)) {
testSubtasks.push('validate-html'); testSubtasks.push('validate-html');
} }
// Only run Sauce Labs tests if there's a Sauce access key // Only run Sauce Labs tests if there's a Sauce access key
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined' && if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined' &&
// Skip Sauce if running a different subset of the test suite // Skip Sauce if running a different subset of the test suite
(!process.env.TWBS_TEST || process.env.TWBS_TEST === 'sauce-js-unit')) { runSubset('sauce-js-unit') &&
// Skip Sauce on Travis when [skip sauce] is in the commit message
isUndefOrNonZero(process.env.TWBS_DO_SAUCE)) {
testSubtasks.push('connect'); testSubtasks.push('connect');
testSubtasks.push('saucelabs-qunit'); testSubtasks.push('saucelabs-qunit');
} }
@ -437,7 +436,7 @@ module.exports = function (grunt) {
// CSS distribution task. // CSS distribution task.
grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']); grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);
grunt.registerTask('dist-css', ['less-compile', 'autoprefixer', 'cssflip', 'usebanner', 'csscomb', 'less:minify', 'cssmin']); grunt.registerTask('dist-css', ['less-compile', 'autoprefixer', 'usebanner', 'csscomb', 'cssmin']);
// Docs distribution task. // Docs distribution task.
grunt.registerTask('dist-docs', 'copy:docs'); grunt.registerTask('dist-docs', 'copy:docs');
@ -446,24 +445,34 @@ module.exports = function (grunt) {
grunt.registerTask('dist', ['clean', 'dist-css', 'copy:fonts', 'dist-js', 'dist-docs']); grunt.registerTask('dist', ['clean', 'dist-css', 'copy:fonts', 'dist-js', 'dist-docs']);
// Default task. // Default task.
grunt.registerTask('default', ['test', 'dist', 'build-glyphicons-data', 'build-customizer', 'update-shrinkwrap']); grunt.registerTask('default', ['test', 'dist', 'build-customizer']);
// Version numbering task. // Version numbering task.
// grunt change-version-number --oldver=A.B.C --newver=X.Y.Z // grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
// This can be overzealous, so its changes should always be manually reviewed! // This can be overzealous, so its changes should always be manually reviewed!
grunt.registerTask('change-version-number', 'sed'); grunt.registerTask('change-version-number', 'sed');
grunt.registerTask('build-glyphicons-data', generateGlyphiconsData);
// task for building customizer // task for building customizer
grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']); grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
grunt.registerTask('build-customizer-html', 'jade'); grunt.registerTask('build-customizer-html', 'jade');
grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () { grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
var banner = grunt.template.process('<%= banner %>'); var banner = grunt.template.process('<%= banner %>');
generateRawFiles(banner); generateRawFiles(grunt, banner);
}); });
// Task for updating the npm packages used by the Travis build. // Task for updating the cached npm packages used by the Travis build (which are controlled by test-infra/npm-shrinkwrap.json).
grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', 'exec:npmShrinkWrap', '_update-shrinkwrap']); // This task should be run and the updated file should be committed whenever Bootstrap's dependencies change.
grunt.registerTask('_update-shrinkwrap', function () { updateShrinkwrap.call(this, grunt); }); grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', '_update-shrinkwrap']);
grunt.registerTask('_update-shrinkwrap', function () {
var done = this.async();
npmShrinkwrap({ dev: true, dirname: __dirname }, function (err) {
if (err) {
grunt.fail.warn(err)
}
var dest = 'test-infra/npm-shrinkwrap.json';
fs.renameSync('npm-shrinkwrap.json', dest);
grunt.log.writeln('File ' + dest.cyan + ' updated.');
done();
});
});
}; };

69
README.md
View File

@ -1,4 +1,8 @@
# [Bootstrap](http://getbootstrap.com) [![Bower version](https://badge.fury.io/bo/bootstrap.png)](http://badge.fury.io/bo/bootstrap) [![Build Status](https://secure.travis-ci.org/twbs/bootstrap.png)](http://travis-ci.org/twbs/bootstrap) [![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/bootstrap#info=devDependencies) # [Bootstrap](http://getbootstrap.com)
[![Bower version](https://badge.fury.io/bo/bootstrap.svg)](http://badge.fury.io/bo/bootstrap)
[![NPM version](https://badge.fury.io/js/bootstrap.svg)](http://badge.fury.io/js/bootstrap)
[![Build Status](https://secure.travis-ci.org/twbs/bootstrap.svg?branch=master)](http://travis-ci.org/twbs/bootstrap)
[![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.svg)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
[![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap) [![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat), and maintained by the [core team](https://github.com/twbs?tab=members) with the massive support and involvement of the community. Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat), and maintained by the [core team](https://github.com/twbs?tab=members) with the massive support and involvement of the community.
@ -10,18 +14,17 @@ To get started, check out <http://getbootstrap.com>!
- [Quick start](#quick-start) - [Quick start](#quick-start)
- [Bugs and feature requests](#bugs-and-feature-requests) - [Bugs and feature requests](#bugs-and-feature-requests)
- [Documentation](#documentation) - [Documentation](#documentation)
- [Compiling CSS and JavaScript](#compiling-css-and-javascript)
- [Contributing](#contributing) - [Contributing](#contributing)
- [Community](#community) - [Community](#community)
- [Versioning](#versioning) - [Versioning](#versioning)
- [Authors](#authors) - [Creators](#creators)
- [Copyright and license](#copyright-and-license) - [Copyright and license](#copyright-and-license)
## Quick start ## Quick start
Three quick start options are available: Three quick start options are available:
- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.1.1.zip). - [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.2.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`.
@ -63,10 +66,10 @@ 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 v1.x). 1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.1.x).
- **Windows users:** Read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems. We use Pygments for syntax highlighting, so make sure to read the sections on installing Python and Pygments. - **Windows users:** Read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) 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. From the root `/bootstrap` directory, run `jekyll serve` in the command line. 2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
- **Windows users:** While we use Jekyll's `encoding` setting, you might still need to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors. For Ruby 2.0.0, run `chcp 65001` first. For Ruby 1.9.3, you can alternatively do `SET LANG=en_EN.UTF-8`.
3. Open <http://localhost:9001> in your browser, and voilà. 3. Open <http://localhost:9001> in your browser, and voilà.
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/). Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
@ -79,41 +82,6 @@ Documentation for v2.3.2 has been made available for the time being at <http://g
## Compiling CSS and JavaScript
Bootstrap uses [Grunt](http://gruntjs.com/) with convenient methods for working with the framework. It's how we compile our code, run tests, and more. To use it, install the required dependencies as directed and then run some Grunt commands.
### Install Grunt
From the command line:
1. Install `grunt-cli` globally with `npm install -g grunt-cli`.
2. Navigate to the root `/bootstrap` directory, then run `npm install`. npm will look at [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) and automatically install the necessary local dependencies listed there.
When completed, you'll be able to run the various Grunt commands provided from the command line.
**Unfamiliar with `npm`? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.org/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding.
### Available Grunt commands
#### Build - `grunt`
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Less](http://lesscss.org/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
#### Only compile CSS and JavaScript - `grunt dist`
`grunt dist` creates the `/dist` directory with compiled files. **Uses [Less](http://lesscss.org/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
#### Tests - `grunt test`
Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI).
#### Watch - `grunt watch`
This is a convenience method for watching just Less files and automatically building them whenever you save.
### Troubleshooting dependencies
Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
## Contributing ## Contributing
Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development. Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
@ -135,26 +103,13 @@ Keep track of development and community news.
## Versioning ## Versioning
For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible. For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
Releases will be numbered with the following format:
`<major>.<minor>.<patch>`
And constructed with the following guidelines:
- Breaking backward compatibility **bumps the major** while resetting minor and patch
- New additions without breaking backward compatibility **bumps the minor** while resetting the patch
- Bug fixes and misc changes **bumps only the patch**
For more information on SemVer, please visit <http://semver.org/>.
## Authors ## Creators
**Mark Otto** **Mark Otto**

23
_config.yml
View File

@ -1,6 +1,6 @@
# Dependencies # Dependencies
markdown: rdiscount markdown: kramdown
pygments: true highlighter: rouge
# Permalinks # Permalinks
permalink: pretty permalink: pretty
@ -14,25 +14,20 @@ baseurl: /
url: http://getbootstrap.com url: http://getbootstrap.com
encoding: UTF-8 encoding: UTF-8
exclude:
- jade
- src
- vendor
# Custom vars # Custom vars
current_version: 3.1.1 current_version: 3.2.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.1.1.zip source: https://github.com/twbs/bootstrap/archive/v3.2.0.zip
dist: https://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip dist: https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip
sass: https://github.com/twbs/bootstrap-sass/archive/v3.1.1.tar.gz sass: https://github.com/twbs/bootstrap-sass/archive/v3.2.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: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css css: //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
css_theme: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css css_theme: //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css
js: //netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js js: //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js

7
bower.json
View File

@ -1,6 +1,7 @@
{ {
"name": "bootstrap", "name": "bootstrap",
"version": "3.1.1", "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
"version": "3.2.0",
"keywords": [ "keywords": [
"css", "css",
"js", "js",
@ -11,7 +12,9 @@
"framework", "framework",
"web" "web"
], ],
"homepage": "http://getbootstrap.com",
"main": [ "main": [
"less/bootstrap.less",
"dist/css/bootstrap.css", "dist/css/bootstrap.css",
"dist/js/bootstrap.js", "dist/js/bootstrap.js",
"dist/fonts/glyphicons-halflings-regular.eot", "dist/fonts/glyphicons-halflings-regular.eot",
@ -20,7 +23,7 @@
"dist/fonts/glyphicons-halflings-regular.woff" "dist/fonts/glyphicons-halflings-regular.woff"
], ],
"ignore": [ "ignore": [
".*", "/.*",
"_config.yml", "_config.yml",
"CNAME", "CNAME",
"composer.json", "composer.json",

5
composer.json
View File

@ -28,7 +28,10 @@
"license": "MIT", "license": "MIT",
"extra": { "extra": {
"branch-alias": { "branch-alias": {
"dev-master": "3.0.x-dev" "dev-master": "3.2.x-dev"
} }
},
"replace": {
"twitter/bootstrap": "self.version"
} }
} }

5
dist/css/bootstrap-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v3.1.1 (http://getbootstrap.com) * Bootstrap v3.2.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)
*/ */
@ -55,6 +55,11 @@
background-color: #e0e0e0; background-color: #e0e0e0;
border-color: #dbdbdb; border-color: #dbdbdb;
} }
.btn-default:disabled,
.btn-default[disabled] {
background-color: #e0e0e0;
background-image: none;
}
.btn-primary { .btn-primary {
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%); background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%); background-image: -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
@ -75,6 +80,11 @@
background-color: #2d6ca2; background-color: #2d6ca2;
border-color: #2b669a; border-color: #2b669a;
} }
.btn-primary:disabled,
.btn-primary[disabled] {
background-color: #2d6ca2;
background-image: none;
}
.btn-success { .btn-success {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%); background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%); background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
@ -95,6 +105,11 @@
background-color: #419641; background-color: #419641;
border-color: #3e8f3e; border-color: #3e8f3e;
} }
.btn-success:disabled,
.btn-success[disabled] {
background-color: #419641;
background-image: none;
}
.btn-info { .btn-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
@ -115,6 +130,11 @@
background-color: #2aabd2; background-color: #2aabd2;
border-color: #28a4c9; border-color: #28a4c9;
} }
.btn-info:disabled,
.btn-info[disabled] {
background-color: #2aabd2;
background-image: none;
}
.btn-warning { .btn-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
@ -135,6 +155,11 @@
background-color: #eb9316; background-color: #eb9316;
border-color: #e38d13; border-color: #e38d13;
} }
.btn-warning:disabled,
.btn-warning[disabled] {
background-color: #eb9316;
background-image: none;
}
.btn-danger { .btn-danger {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%); background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%); background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
@ -155,6 +180,11 @@
background-color: #c12e2a; background-color: #c12e2a;
border-color: #b92c28; border-color: #b92c28;
} }
.btn-danger:disabled,
.btn-danger[disabled] {
background-color: #c12e2a;
background-image: none;
}
.thumbnail, .thumbnail,
.img-thumbnail { .img-thumbnail {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
@ -324,6 +354,11 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.progress-bar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.list-group { .list-group {
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);

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

432
dist/css/bootstrap.css vendored
View File

@ -1,10 +1,10 @@
/*! /*!
* Bootstrap v3.1.1 (http://getbootstrap.com) * Bootstrap v3.2.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)
*/ */
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html { html {
font-family: sans-serif; font-family: sans-serif;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
@ -890,7 +890,7 @@ th {
box-sizing: border-box; box-sizing: border-box;
} }
html { html {
font-size: 62.5%; font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
@ -1025,7 +1025,7 @@ h6 .small,
.h6 .small { .h6 .small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: #999; color: #777;
} }
h1, h1,
.h1, .h1,
@ -1103,7 +1103,7 @@ p {
.lead { .lead {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 16px; font-size: 16px;
font-weight: 200; font-weight: 300;
line-height: 1.4; line-height: 1.4;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -1115,9 +1115,6 @@ small,
.small { .small {
font-size: 85%; font-size: 85%;
} }
cite {
font-style: normal;
}
mark, mark,
.mark { .mark {
padding: .2em; padding: .2em;
@ -1135,8 +1132,20 @@ mark,
.text-justify { .text-justify {
text-align: justify; text-align: justify;
} }
.text-nowrap {
white-space: nowrap;
}
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
.text-muted { .text-muted {
color: #999; color: #777;
} }
.text-primary { .text-primary {
color: #428bca; color: #428bca;
@ -1260,7 +1269,7 @@ dd {
abbr[title], abbr[title],
abbr[data-original-title] { abbr[data-original-title] {
cursor: help; cursor: help;
border-bottom: 1px dotted #999; border-bottom: 1px dotted #777;
} }
.initialism { .initialism {
font-size: 90%; font-size: 90%;
@ -1283,7 +1292,7 @@ blockquote .small {
display: block; display: block;
font-size: 80%; font-size: 80%;
line-height: 1.42857143; line-height: 1.42857143;
color: #999; color: #777;
} }
blockquote footer:before, blockquote footer:before,
blockquote small:before, blockquote small:before,
@ -1345,6 +1354,12 @@ kbd {
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
} }
kbd kbd {
padding: 0;
font-size: 100%;
-webkit-box-shadow: none;
box-shadow: none;
}
pre { pre {
display: block; display: block;
padding: 9.5px; padding: 9.5px;
@ -2038,7 +2053,6 @@ pre code {
} }
} }
table { table {
max-width: 100%;
background-color: transparent; background-color: transparent;
} }
th { th {
@ -2046,6 +2060,7 @@ th {
} }
.table { .table {
width: 100%; width: 100%;
max-width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
} }
.table > thead > tr > th, .table > thead > tr > th,
@ -2100,12 +2115,10 @@ th {
.table-bordered > thead > tr > td { .table-bordered > thead > tr > td {
border-bottom-width: 2px; border-bottom-width: 2px;
} }
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) {
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover {
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
table col[class*="col-"] { table col[class*="col-"] {
@ -2136,6 +2149,7 @@ table th[class*="col-"] {
.table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th { .table-hover > tbody > tr.active:hover > th {
background-color: #e8e8e8; background-color: #e8e8e8;
} }
@ -2156,6 +2170,7 @@ table th[class*="col-"] {
.table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover, .table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th { .table-hover > tbody > tr.success:hover > th {
background-color: #d0e9c6; background-color: #d0e9c6;
} }
@ -2176,6 +2191,7 @@ table th[class*="col-"] {
.table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover, .table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th { .table-hover > tbody > tr.info:hover > th {
background-color: #c4e3f3; background-color: #c4e3f3;
} }
@ -2196,6 +2212,7 @@ table th[class*="col-"] {
.table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover, .table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th { .table-hover > tbody > tr.warning:hover > th {
background-color: #faf2cc; background-color: #faf2cc;
} }
@ -2216,6 +2233,7 @@ table th[class*="col-"] {
.table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover, .table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th { .table-hover > tbody > tr.danger:hover > th {
background-color: #ebcccc; background-color: #ebcccc;
} }
@ -2223,7 +2241,7 @@ table th[class*="col-"] {
.table-responsive { .table-responsive {
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
overflow-x: scroll; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
@ -2285,6 +2303,7 @@ legend {
} }
label { label {
display: inline-block; display: inline-block;
max-width: 100%;
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
} }
@ -2349,14 +2368,14 @@ output {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
} }
.form-control::-moz-placeholder { .form-control::-moz-placeholder {
color: #999; color: #777;
opacity: 1; opacity: 1;
} }
.form-control:-ms-input-placeholder { .form-control:-ms-input-placeholder {
color: #999; color: #777;
} }
.form-control::-webkit-input-placeholder { .form-control::-webkit-input-placeholder {
color: #999; color: #777;
} }
.form-control[disabled], .form-control[disabled],
.form-control[readonly], .form-control[readonly],
@ -2371,14 +2390,23 @@ textarea.form-control {
input[type="search"] { input[type="search"] {
-webkit-appearance: none; -webkit-appearance: none;
} }
input[type="date"] { input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
line-height: 34px; line-height: 34px;
line-height: 1.42857143 \0; line-height: 1.42857143 \0;
} }
input[type="date"].input-sm { input[type="date"].input-sm,
input[type="time"].input-sm,
input[type="datetime-local"].input-sm,
input[type="month"].input-sm {
line-height: 30px; line-height: 30px;
} }
input[type="date"].input-lg { input[type="date"].input-lg,
input[type="time"].input-lg,
input[type="datetime-local"].input-lg,
input[type="month"].input-lg {
line-height: 46px; line-height: 46px;
} }
.form-group { .form-group {
@ -2386,13 +2414,14 @@ input[type="date"].input-lg {
} }
.radio, .radio,
.checkbox { .checkbox {
position: relative;
display: block; display: block;
min-height: 20px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.radio label, .radio label,
.checkbox label { .checkbox label {
min-height: 20px;
padding-left: 20px; padding-left: 20px;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
@ -2402,7 +2431,8 @@ input[type="date"].input-lg {
.radio-inline input[type="radio"], .radio-inline input[type="radio"],
.checkbox input[type="checkbox"], .checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] { .checkbox-inline input[type="checkbox"] {
float: left; position: absolute;
margin-top: 4px \9;
margin-left: -20px; margin-left: -20px;
} }
.radio + .radio, .radio + .radio,
@ -2425,46 +2455,70 @@ input[type="date"].input-lg {
} }
input[type="radio"][disabled], input[type="radio"][disabled],
input[type="checkbox"][disabled], input[type="checkbox"][disabled],
.radio[disabled], input[type="radio"].disabled,
.radio-inline[disabled], input[type="checkbox"].disabled,
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"], fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"], fieldset[disabled] input[type="checkbox"] {
fieldset[disabled] .radio, cursor: not-allowed;
}
.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline, fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline { fieldset[disabled] .checkbox-inline {
cursor: not-allowed; cursor: not-allowed;
} }
.input-sm { .radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
cursor: not-allowed;
}
.form-control-static {
padding-top: 7px;
padding-bottom: 7px;
margin-bottom: 0;
}
.form-control-static.input-lg,
.form-control-static.input-sm {
padding-right: 0;
padding-left: 0;
}
.input-sm,
.form-group-sm .form-control {
height: 30px; height: 30px;
padding: 5px 10px; padding: 5px 10px;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
border-radius: 3px; border-radius: 3px;
} }
select.input-sm { select.input-sm,
select.form-group-sm .form-control {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
textarea.input-sm, textarea.input-sm,
select[multiple].input-sm { textarea.form-group-sm .form-control,
select[multiple].input-sm,
select[multiple].form-group-sm .form-control {
height: auto; height: auto;
} }
.input-lg { .input-lg,
.form-group-lg .form-control {
height: 46px; height: 46px;
padding: 10px 16px; padding: 10px 16px;
font-size: 18px; font-size: 18px;
line-height: 1.33; line-height: 1.33;
border-radius: 6px; border-radius: 6px;
} }
select.input-lg { select.input-lg,
select.form-group-lg .form-control {
height: 46px; height: 46px;
line-height: 46px; line-height: 46px;
} }
textarea.input-lg, textarea.input-lg,
select[multiple].input-lg { textarea.form-group-lg .form-control,
select[multiple].input-lg,
select[multiple].form-group-lg .form-control {
height: auto; height: auto;
} }
.has-feedback { .has-feedback {
@ -2475,8 +2529,9 @@ select[multiple].input-lg {
} }
.form-control-feedback { .form-control-feedback {
position: absolute; position: absolute;
top: 25px; top: 0;
right: 0; right: 0;
z-index: 2;
display: block; display: block;
width: 34px; width: 34px;
height: 34px; height: 34px;
@ -2498,7 +2553,11 @@ select[multiple].input-lg {
.has-success .radio, .has-success .radio,
.has-success .checkbox, .has-success .checkbox,
.has-success .radio-inline, .has-success .radio-inline,
.has-success .checkbox-inline { .has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
color: #3c763d; color: #3c763d;
} }
.has-success .form-control { .has-success .form-control {
@ -2524,7 +2583,11 @@ select[multiple].input-lg {
.has-warning .radio, .has-warning .radio,
.has-warning .checkbox, .has-warning .checkbox,
.has-warning .radio-inline, .has-warning .radio-inline,
.has-warning .checkbox-inline { .has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
color: #8a6d3b; color: #8a6d3b;
} }
.has-warning .form-control { .has-warning .form-control {
@ -2550,7 +2613,11 @@ select[multiple].input-lg {
.has-error .radio, .has-error .radio,
.has-error .checkbox, .has-error .checkbox,
.has-error .radio-inline, .has-error .radio-inline,
.has-error .checkbox-inline { .has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
color: #a94442; color: #a94442;
} }
.has-error .form-control { .has-error .form-control {
@ -2571,8 +2638,11 @@ select[multiple].input-lg {
.has-error .form-control-feedback { .has-error .form-control-feedback {
color: #a94442; color: #a94442;
} }
.form-control-static { .has-feedback label ~ .form-control-feedback {
margin-bottom: 0; top: 25px;
}
.has-feedback label.sr-only ~ .form-control-feedback {
top: 0;
} }
.help-block { .help-block {
display: block; display: block;
@ -2610,14 +2680,17 @@ select[multiple].input-lg {
.form-inline .radio, .form-inline .radio,
.form-inline .checkbox { .form-inline .checkbox {
display: inline-block; display: inline-block;
padding-left: 0;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
.form-inline .radio label,
.form-inline .checkbox label {
padding-left: 0;
}
.form-inline .radio input[type="radio"], .form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] { .form-inline .checkbox input[type="checkbox"] {
float: none; position: relative;
margin-left: 0; margin-left: 0;
} }
.form-inline .has-feedback .form-control-feedback { .form-inline .has-feedback .form-control-feedback {
@ -2640,10 +2713,6 @@ select[multiple].input-lg {
margin-right: -15px; margin-right: -15px;
margin-left: -15px; margin-left: -15px;
} }
.form-horizontal .form-control-static {
padding-top: 7px;
padding-bottom: 7px;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.form-horizontal .control-label { .form-horizontal .control-label {
padding-top: 7px; padding-top: 7px;
@ -2652,9 +2721,18 @@ select[multiple].input-lg {
} }
} }
.form-horizontal .has-feedback .form-control-feedback { .form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px; right: 15px;
} }
@media (min-width: 768px) {
.form-horizontal .form-group-lg .control-label {
padding-top: 14.3px;
}
}
@media (min-width: 768px) {
.form-horizontal .form-group-sm .control-label {
padding-top: 6px;
}
}
.btn { .btn {
display: inline-block; display: inline-block;
padding: 6px 12px; padding: 6px 12px;
@ -2665,6 +2743,8 @@ select[multiple].input-lg {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer; cursor: pointer;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -2676,13 +2756,17 @@ select[multiple].input-lg {
} }
.btn:focus, .btn:focus,
.btn:active:focus, .btn:active:focus,
.btn.active:focus { .btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: thin dotted; outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: -2px;
} }
.btn:hover, .btn:hover,
.btn:focus { .btn:focus,
.btn.focus {
color: #333; color: #333;
text-decoration: none; text-decoration: none;
} }
@ -2710,16 +2794,17 @@ fieldset[disabled] .btn {
} }
.btn-default:hover, .btn-default:hover,
.btn-default:focus, .btn-default:focus,
.btn-default.focus,
.btn-default:active, .btn-default:active,
.btn-default.active, .btn-default.active,
.open .dropdown-toggle.btn-default { .open > .dropdown-toggle.btn-default {
color: #333; color: #333;
background-color: #e6e6e6; background-color: #e6e6e6;
border-color: #adadad; border-color: #adadad;
} }
.btn-default:active, .btn-default:active,
.btn-default.active, .btn-default.active,
.open .dropdown-toggle.btn-default { .open > .dropdown-toggle.btn-default {
background-image: none; background-image: none;
} }
.btn-default.disabled, .btn-default.disabled,
@ -2731,6 +2816,9 @@ fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus, .btn-default.disabled:focus,
.btn-default[disabled]:focus, .btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active, .btn-default.disabled:active,
.btn-default[disabled]:active, .btn-default[disabled]:active,
fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default:active,
@ -2751,16 +2839,17 @@ fieldset[disabled] .btn-default.active {
} }
.btn-primary:hover, .btn-primary:hover,
.btn-primary:focus, .btn-primary:focus,
.btn-primary.focus,
.btn-primary:active, .btn-primary: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: #3071a9;
border-color: #285e8e; border-color: #285e8e;
} }
.btn-primary:active, .btn-primary:active,
.btn-primary.active, .btn-primary.active,
.open .dropdown-toggle.btn-primary { .open > .dropdown-toggle.btn-primary {
background-image: none; background-image: none;
} }
.btn-primary.disabled, .btn-primary.disabled,
@ -2772,6 +2861,9 @@ fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus, .btn-primary.disabled:focus,
.btn-primary[disabled]:focus, .btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.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,
@ -2792,16 +2884,17 @@ fieldset[disabled] .btn-primary.active {
} }
.btn-success:hover, .btn-success:hover,
.btn-success:focus, .btn-success:focus,
.btn-success.focus,
.btn-success:active, .btn-success:active,
.btn-success.active, .btn-success.active,
.open .dropdown-toggle.btn-success { .open > .dropdown-toggle.btn-success {
color: #fff; color: #fff;
background-color: #449d44; background-color: #449d44;
border-color: #398439; border-color: #398439;
} }
.btn-success:active, .btn-success:active,
.btn-success.active, .btn-success.active,
.open .dropdown-toggle.btn-success { .open > .dropdown-toggle.btn-success {
background-image: none; background-image: none;
} }
.btn-success.disabled, .btn-success.disabled,
@ -2813,6 +2906,9 @@ fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus, .btn-success.disabled:focus,
.btn-success[disabled]:focus, .btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus,
.btn-success.disabled:active, .btn-success.disabled:active,
.btn-success[disabled]:active, .btn-success[disabled]:active,
fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success:active,
@ -2833,16 +2929,17 @@ fieldset[disabled] .btn-success.active {
} }
.btn-info:hover, .btn-info:hover,
.btn-info:focus, .btn-info:focus,
.btn-info.focus,
.btn-info:active, .btn-info:active,
.btn-info.active, .btn-info.active,
.open .dropdown-toggle.btn-info { .open > .dropdown-toggle.btn-info {
color: #fff; color: #fff;
background-color: #31b0d5; background-color: #31b0d5;
border-color: #269abc; border-color: #269abc;
} }
.btn-info:active, .btn-info:active,
.btn-info.active, .btn-info.active,
.open .dropdown-toggle.btn-info { .open > .dropdown-toggle.btn-info {
background-image: none; background-image: none;
} }
.btn-info.disabled, .btn-info.disabled,
@ -2854,6 +2951,9 @@ fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus, .btn-info.disabled:focus,
.btn-info[disabled]:focus, .btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus,
.btn-info.disabled:active, .btn-info.disabled:active,
.btn-info[disabled]:active, .btn-info[disabled]:active,
fieldset[disabled] .btn-info:active, fieldset[disabled] .btn-info:active,
@ -2874,16 +2974,17 @@ fieldset[disabled] .btn-info.active {
} }
.btn-warning:hover, .btn-warning:hover,
.btn-warning:focus, .btn-warning:focus,
.btn-warning.focus,
.btn-warning:active, .btn-warning:active,
.btn-warning.active, .btn-warning.active,
.open .dropdown-toggle.btn-warning { .open > .dropdown-toggle.btn-warning {
color: #fff; color: #fff;
background-color: #ec971f; background-color: #ec971f;
border-color: #d58512; border-color: #d58512;
} }
.btn-warning:active, .btn-warning:active,
.btn-warning.active, .btn-warning.active,
.open .dropdown-toggle.btn-warning { .open > .dropdown-toggle.btn-warning {
background-image: none; background-image: none;
} }
.btn-warning.disabled, .btn-warning.disabled,
@ -2895,6 +2996,9 @@ fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus, .btn-warning.disabled:focus,
.btn-warning[disabled]:focus, .btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus,
.btn-warning.disabled:active, .btn-warning.disabled:active,
.btn-warning[disabled]:active, .btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active, fieldset[disabled] .btn-warning:active,
@ -2915,16 +3019,17 @@ fieldset[disabled] .btn-warning.active {
} }
.btn-danger:hover, .btn-danger:hover,
.btn-danger:focus, .btn-danger:focus,
.btn-danger.focus,
.btn-danger:active, .btn-danger:active,
.btn-danger.active, .btn-danger.active,
.open .dropdown-toggle.btn-danger { .open > .dropdown-toggle.btn-danger {
color: #fff; color: #fff;
background-color: #c9302c; background-color: #c9302c;
border-color: #ac2925; border-color: #ac2925;
} }
.btn-danger:active, .btn-danger:active,
.btn-danger.active, .btn-danger.active,
.open .dropdown-toggle.btn-danger { .open > .dropdown-toggle.btn-danger {
background-image: none; background-image: none;
} }
.btn-danger.disabled, .btn-danger.disabled,
@ -2936,6 +3041,9 @@ fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus, .btn-danger.disabled:focus,
.btn-danger[disabled]:focus, .btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus,
.btn-danger.disabled:active, .btn-danger.disabled:active,
.btn-danger[disabled]:active, .btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger:active,
@ -2952,7 +3060,6 @@ fieldset[disabled] .btn-danger.active {
.btn-link { .btn-link {
font-weight: normal; font-weight: normal;
color: #428bca; color: #428bca;
cursor: pointer;
border-radius: 0; border-radius: 0;
} }
.btn-link, .btn-link,
@ -2979,7 +3086,7 @@ fieldset[disabled] .btn-link {
fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus, .btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus { fieldset[disabled] .btn-link:focus {
color: #999; color: #777;
text-decoration: none; text-decoration: none;
} }
.btn-lg, .btn-lg,
@ -3006,8 +3113,6 @@ fieldset[disabled] .btn-link:focus {
.btn-block { .btn-block {
display: block; display: block;
width: 100%; width: 100%;
padding-right: 0;
padding-left: 0;
} }
.btn-block + .btn-block { .btn-block + .btn-block {
margin-top: 5px; margin-top: 5px;
@ -3073,6 +3178,7 @@ tbody.collapse.in {
padding: 5px 0; padding: 5px 0;
margin: 2px 0 0; margin: 2px 0 0;
font-size: 14px; font-size: 14px;
text-align: left;
list-style: none; list-style: none;
background-color: #fff; background-color: #fff;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
@ -3119,7 +3225,7 @@ tbody.collapse.in {
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus { .dropdown-menu > .disabled > a:focus {
color: #999; color: #777;
} }
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus { .dropdown-menu > .disabled > a:focus {
@ -3148,7 +3254,8 @@ tbody.collapse.in {
padding: 3px 20px; padding: 3px 20px;
font-size: 12px; font-size: 12px;
line-height: 1.42857143; line-height: 1.42857143;
color: #999; color: #777;
white-space: nowrap;
} }
.dropdown-backdrop { .dropdown-backdrop {
position: fixed; position: fixed;
@ -3345,10 +3452,16 @@ tbody.collapse.in {
.btn-group-justified > .btn-group .btn { .btn-group-justified > .btn-group .btn {
width: 100%; width: 100%;
} }
[data-toggle="buttons"] > .btn > input[type="radio"], .btn-group-justified > .btn-group .dropdown-menu {
[data-toggle="buttons"] > .btn > input[type="checkbox"] { left: auto;
}
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
filter: alpha(opacity=0);
opacity: 0; opacity: 0;
} }
.input-group { .input-group {
@ -3525,11 +3638,11 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
background-color: #eee; background-color: #eee;
} }
.nav > li.disabled > a { .nav > li.disabled > a {
color: #999; color: #777;
} }
.nav > li.disabled > a:hover, .nav > li.disabled > a:hover,
.nav > li.disabled > a:focus { .nav > li.disabled > a:focus {
color: #999; color: #777;
text-decoration: none; text-decoration: none;
cursor: not-allowed; cursor: not-allowed;
background-color: transparent; background-color: transparent;
@ -3752,7 +3865,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.navbar-fixed-bottom .navbar-collapse { .navbar-fixed-bottom .navbar-collapse {
max-height: 340px; max-height: 340px;
} }
@media (max-width: 480px) and (orientation: landscape) { @media (max-device-width: 480px) and (orientation: landscape) {
.navbar-fixed-top .navbar-collapse, .navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse { .navbar-fixed-bottom .navbar-collapse {
max-height: 200px; max-height: 200px;
@ -3789,6 +3902,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
right: 0; right: 0;
left: 0; left: 0;
z-index: 1030; z-index: 1030;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-fixed-top, .navbar-fixed-top,
@ -3816,6 +3931,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.navbar-brand:focus { .navbar-brand:focus {
text-decoration: none; text-decoration: none;
} }
.navbar-brand > img {
display: block;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar > .container .navbar-brand, .navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand { .navbar > .container-fluid .navbar-brand {
@ -3894,17 +4012,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
} }
.navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
}
@media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
}
} }
.navbar-form { .navbar-form {
padding: 10px 15px; padding: 10px 15px;
@ -3947,14 +4054,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.navbar-form .radio, .navbar-form .radio,
.navbar-form .checkbox { .navbar-form .checkbox {
display: inline-block; display: inline-block;
padding-left: 0;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
.navbar-form .radio label,
.navbar-form .checkbox label {
padding-left: 0;
}
.navbar-form .radio input[type="radio"], .navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] { .navbar-form .checkbox input[type="checkbox"] {
float: none; position: relative;
margin-left: 0; margin-left: 0;
} }
.navbar-form .has-feedback .form-control-feedback { .navbar-form .has-feedback .form-control-feedback {
@ -3977,9 +4087,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.navbar-form.navbar-right:last-child {
margin-right: -15px;
}
} }
.navbar-nav > li > .dropdown-menu { .navbar-nav > li > .dropdown-menu {
margin-top: 0; margin-top: 0;
@ -4012,7 +4119,16 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
margin-right: 15px; margin-right: 15px;
margin-left: 15px; margin-left: 15px;
} }
.navbar-text.navbar-right:last-child { }
@media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
margin-right: -15px;
}
.navbar-right ~ .navbar-right {
margin-right: 0; margin-right: 0;
} }
} }
@ -4117,7 +4233,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
border-color: #080808; border-color: #080808;
} }
.navbar-inverse .navbar-brand { .navbar-inverse .navbar-brand {
color: #999; color: #777;
} }
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus { .navbar-inverse .navbar-brand:focus {
@ -4125,10 +4241,10 @@ fieldset[disabled] .navbar-default .btn-link:focus {
background-color: transparent; background-color: transparent;
} }
.navbar-inverse .navbar-text { .navbar-inverse .navbar-text {
color: #999; color: #969696;
} }
.navbar-inverse .navbar-nav > li > a { .navbar-inverse .navbar-nav > li > a {
color: #999; color: #777;
} }
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus { .navbar-inverse .navbar-nav > li > a:focus {
@ -4175,7 +4291,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
background-color: #080808; background-color: #080808;
} }
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a { .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
color: #999; color: #777;
} }
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
@ -4196,13 +4312,13 @@ fieldset[disabled] .navbar-default .btn-link:focus {
} }
} }
.navbar-inverse .navbar-link { .navbar-inverse .navbar-link {
color: #999; color: #777;
} }
.navbar-inverse .navbar-link:hover { .navbar-inverse .navbar-link:hover {
color: #fff; color: #fff;
} }
.navbar-inverse .btn-link { .navbar-inverse .btn-link {
color: #999; color: #777;
} }
.navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus { .navbar-inverse .btn-link:focus {
@ -4230,7 +4346,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
content: "/\00a0"; content: "/\00a0";
} }
.breadcrumb > .active { .breadcrumb > .active {
color: #999; color: #777;
} }
.pagination { .pagination {
display: inline-block; display: inline-block;
@ -4290,7 +4406,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
.pagination > .disabled > a, .pagination > .disabled > a,
.pagination > .disabled > a:hover, .pagination > .disabled > a:hover,
.pagination > .disabled > a:focus { .pagination > .disabled > a:focus {
color: #999; color: #777;
cursor: not-allowed; cursor: not-allowed;
background-color: #fff; background-color: #fff;
border-color: #ddd; border-color: #ddd;
@ -4359,7 +4475,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
.pager .disabled > a:hover, .pager .disabled > a:hover,
.pager .disabled > a:focus, .pager .disabled > a:focus,
.pager .disabled > span { .pager .disabled > span {
color: #999; color: #777;
cursor: not-allowed; cursor: not-allowed;
background-color: #fff; background-color: #fff;
} }
@ -4389,11 +4505,11 @@ a.label:focus {
top: -1px; top: -1px;
} }
.label-default { .label-default {
background-color: #999; background-color: #777;
} }
.label-default[href]:hover, .label-default[href]:hover,
.label-default[href]:focus { .label-default[href]:focus {
background-color: #808080; background-color: #5e5e5e;
} }
.label-primary { .label-primary {
background-color: #428bca; background-color: #428bca;
@ -4441,7 +4557,7 @@ a.label:focus {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
background-color: #999; background-color: #777;
border-radius: 10px; border-radius: 10px;
} }
.badge:empty { .badge:empty {
@ -4553,10 +4669,12 @@ a.thumbnail.active {
.alert > p + p { .alert > p + p {
margin-top: 5px; margin-top: 5px;
} }
.alert-dismissable { .alert-dismissable,
.alert-dismissible {
padding-right: 35px; padding-right: 35px;
} }
.alert-dismissable .close { .alert-dismissable .close,
.alert-dismissible .close {
position: relative; position: relative;
top: -2px; top: -2px;
right: -21px; right: -21px;
@ -4654,25 +4772,23 @@ a.thumbnail.active {
-o-transition: width .6s ease; -o-transition: width .6s ease;
transition: width .6s ease; transition: width .6s ease;
} }
.progress-striped .progress-bar { .progress-striped .progress-bar,
.progress-bar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-webkit-background-size: 40px 40px; -webkit-background-size: 40px 40px;
background-size: 40px 40px; background-size: 40px 40px;
} }
.progress.active .progress-bar { .progress.active .progress-bar,
.progress-bar.active {
-webkit-animation: progress-bar-stripes 2s linear infinite; -webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;
} }
.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
min-width: 30px;
}
.progress-bar[aria-valuenow="0"] { .progress-bar[aria-valuenow="0"] {
min-width: 30px; min-width: 30px;
color: #999; color: #777;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
@ -4780,7 +4896,8 @@ a.list-group-item:focus {
.list-group-item.disabled, .list-group-item.disabled,
.list-group-item.disabled:hover, .list-group-item.disabled:hover,
.list-group-item.disabled:focus { .list-group-item.disabled:focus {
color: #999; color: #777;
cursor: not-allowed;
background-color: #eee; background-color: #eee;
} }
.list-group-item.disabled .list-group-item-heading, .list-group-item.disabled .list-group-item-heading,
@ -4791,7 +4908,7 @@ a.list-group-item:focus {
.list-group-item.disabled .list-group-item-text, .list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text { .list-group-item.disabled:focus .list-group-item-text {
color: #999; color: #777;
} }
.list-group-item.active, .list-group-item.active,
.list-group-item.active:hover, .list-group-item.active:hover,
@ -4803,7 +4920,13 @@ a.list-group-item:focus {
} }
.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,
.list-group-item.active:focus .list-group-item-heading { .list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
color: inherit; color: inherit;
} }
.list-group-item.active .list-group-item-text, .list-group-item.active .list-group-item-text,
@ -4963,8 +5086,12 @@ a.list-group-item-danger.active:focus {
.panel-heading + .list-group .list-group-item:first-child { .panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0; border-top-width: 0;
} }
.list-group + .panel-footer {
border-top-width: 0;
}
.panel > .table, .panel > .table,
.panel > .table-responsive > .table { .panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
margin-bottom: 0; margin-bottom: 0;
} }
.panel > .table:first-child, .panel > .table:first-child,
@ -5094,7 +5221,7 @@ a.list-group-item-danger.active:focus {
.panel-group .panel-heading { .panel-group .panel-heading {
border-bottom: 0; border-bottom: 0;
} }
.panel-group .panel-heading + .panel-collapse .panel-body { .panel-group .panel-heading + .panel-collapse > .panel-body {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
.panel-group .panel-footer { .panel-group .panel-footer {
@ -5114,6 +5241,10 @@ a.list-group-item-danger.active:focus {
.panel-default > .panel-heading + .panel-collapse > .panel-body { .panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ddd; border-top-color: #ddd;
} }
.panel-default > .panel-heading .badge {
color: #f5f5f5;
background-color: #333;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body { .panel-default > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ddd; border-bottom-color: #ddd;
} }
@ -5128,6 +5259,10 @@ a.list-group-item-danger.active:focus {
.panel-primary > .panel-heading + .panel-collapse > .panel-body { .panel-primary > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #428bca; border-top-color: #428bca;
} }
.panel-primary > .panel-heading .badge {
color: #428bca;
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: #428bca;
} }
@ -5142,6 +5277,10 @@ a.list-group-item-danger.active:focus {
.panel-success > .panel-heading + .panel-collapse > .panel-body { .panel-success > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #d6e9c6; border-top-color: #d6e9c6;
} }
.panel-success > .panel-heading .badge {
color: #dff0d8;
background-color: #3c763d;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body { .panel-success > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #d6e9c6; border-bottom-color: #d6e9c6;
} }
@ -5156,6 +5295,10 @@ a.list-group-item-danger.active:focus {
.panel-info > .panel-heading + .panel-collapse > .panel-body { .panel-info > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #bce8f1; border-top-color: #bce8f1;
} }
.panel-info > .panel-heading .badge {
color: #d9edf7;
background-color: #31708f;
}
.panel-info > .panel-footer + .panel-collapse > .panel-body { .panel-info > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #bce8f1; border-bottom-color: #bce8f1;
} }
@ -5170,6 +5313,10 @@ a.list-group-item-danger.active:focus {
.panel-warning > .panel-heading + .panel-collapse > .panel-body { .panel-warning > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #faebcc; border-top-color: #faebcc;
} }
.panel-warning > .panel-heading .badge {
color: #fcf8e3;
background-color: #8a6d3b;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body { .panel-warning > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #faebcc; border-bottom-color: #faebcc;
} }
@ -5184,6 +5331,10 @@ a.list-group-item-danger.active:focus {
.panel-danger > .panel-heading + .panel-collapse > .panel-body { .panel-danger > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ebccd1; border-top-color: #ebccd1;
} }
.panel-danger > .panel-heading .badge {
color: #f2dede;
background-color: #a94442;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body { .panel-danger > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ebccd1; border-bottom-color: #ebccd1;
} }
@ -5270,8 +5421,7 @@ button.close {
left: 0; left: 0;
z-index: 1050; z-index: 1050;
display: none; display: none;
overflow: auto; overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
outline: 0; outline: 0;
} }
@ -5279,16 +5429,16 @@ button.close {
-webkit-transition: -webkit-transform .3s ease-out; -webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out; -o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out; transition: transform .3s ease-out;
-webkit-transform: translate(0, -25%); -webkit-transform: translate3d(0, -25%, 0);
-ms-transform: translate(0, -25%); transform: translate3d(0, -25%, 0);
-o-transform: translate(0, -25%);
transform: translate(0, -25%);
} }
.modal.in .modal-dialog { .modal.in .modal-dialog {
-webkit-transform: translate(0, 0); -webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate(0, 0); transform: translate3d(0, 0, 0);
-o-transform: translate(0, 0); }
transform: translate(0, 0); .modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
} }
.modal-dialog { .modal-dialog {
position: relative; position: relative;
@ -5382,7 +5532,7 @@ button.close {
} }
.tooltip { .tooltip {
position: absolute; position: absolute;
z-index: 1030; z-index: 1070;
display: block; display: block;
font-size: 12px; font-size: 12px;
line-height: 1.4; line-height: 1.4;
@ -5482,7 +5632,7 @@ button.close {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1010; z-index: 1060;
display: none; display: none;
max-width: 276px; max-width: 276px;
padding: 1px; padding: 1px;
@ -5661,10 +5811,9 @@ button.close {
opacity: .5; opacity: .5;
} }
.carousel-control.left { .carousel-control.left {
background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .5) 0%), color-stop(rgba(0, 0, 0, .0001) 100%)); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001))); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
background-repeat: repeat-x; background-repeat: repeat-x;
@ -5672,10 +5821,9 @@ button.close {
.carousel-control.right { .carousel-control.right {
right: 0; right: 0;
left: auto; left: auto;
background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .0001) 0%), color-stop(rgba(0, 0, 0, .5) 100%)); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5))); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
background-repeat: repeat-x; background-repeat: repeat-x;
@ -5700,17 +5848,18 @@ button.close {
.carousel-control .icon-prev, .carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left { .carousel-control .glyphicon-chevron-left {
left: 50%; left: 50%;
margin-left: -10px;
} }
.carousel-control .icon-next, .carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right { .carousel-control .glyphicon-chevron-right {
right: 50%; right: 50%;
margin-right: -10px;
} }
.carousel-control .icon-prev, .carousel-control .icon-prev,
.carousel-control .icon-next { .carousel-control .icon-next {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: -10px; margin-top: -10px;
margin-left: -10px;
font-family: serif; font-family: serif;
} }
.carousel-control .icon-prev:before { .carousel-control .icon-prev:before {
@ -5771,9 +5920,16 @@ button.close {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-top: -15px; margin-top: -15px;
margin-left: -15px;
font-size: 30px; font-size: 30px;
} }
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
margin-left: -15px;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
margin-right: -15px;
}
.carousel-caption { .carousel-caption {
right: 20%; right: 20%;
left: 20%; left: 20%;
@ -5866,6 +6022,8 @@ button.close {
} }
.affix { .affix {
position: fixed; position: fixed;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} }
@-ms-viewport { @-ms-viewport {
width: device-width; width: device-width;

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

604
dist/js/bootstrap.js vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v3.1.1 (http://getbootstrap.com) * Bootstrap v3.2.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)
*/ */
@ -7,7 +7,7 @@
if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery') } if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery') }
/* ======================================================================== /* ========================================================================
* Bootstrap: transition.js v3.1.1 * Bootstrap: transition.js v3.2.0
* http://getbootstrap.com/javascript/#transitions * http://getbootstrap.com/javascript/#transitions
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -42,8 +42,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// http://blog.alexmaccaw.com/css-transitions // http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) { $.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this var called = false
$(this).one($.support.transition.end, function () { called = true }) var $el = this
$(this).one('bsTransitionEnd', function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) } var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration) setTimeout(callback, duration)
return this return this
@ -51,12 +52,22 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$(function () { $(function () {
$.support.transition = transitionEnd() $.support.transition = transitionEnd()
if (!$.support.transition) return
$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function (e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
}
}) })
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: alert.js v3.1.1 * Bootstrap: alert.js v3.2.0
* http://getbootstrap.com/javascript/#alerts * http://getbootstrap.com/javascript/#alerts
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -75,6 +86,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$(el).on('click', dismiss, this.close) $(el).on('click', dismiss, this.close)
} }
Alert.VERSION = '3.2.0'
Alert.prototype.close = function (e) { Alert.prototype.close = function (e) {
var $this = $(this) var $this = $(this)
var selector = $this.attr('data-target') var selector = $this.attr('data-target')
@ -99,12 +112,13 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$parent.removeClass('in') $parent.removeClass('in')
function removeElement() { function removeElement() {
$parent.trigger('closed.bs.alert').remove() // detach from parent, fire event then clean up data
$parent.detach().trigger('closed.bs.alert').remove()
} }
$.support.transition && $parent.hasClass('fade') ? $.support.transition && $parent.hasClass('fade') ?
$parent $parent
.one($.support.transition.end, removeElement) .one('bsTransitionEnd', removeElement)
.emulateTransitionEnd(150) : .emulateTransitionEnd(150) :
removeElement() removeElement()
} }
@ -113,9 +127,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// ALERT PLUGIN DEFINITION // ALERT PLUGIN DEFINITION
// ======================= // =======================
var old = $.fn.alert function Plugin(option) {
$.fn.alert = function (option) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.alert') var data = $this.data('bs.alert')
@ -125,6 +137,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}) })
} }
var old = $.fn.alert
$.fn.alert = Plugin
$.fn.alert.Constructor = Alert $.fn.alert.Constructor = Alert
@ -145,7 +160,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: button.js v3.1.1 * Bootstrap: button.js v3.2.0
* http://getbootstrap.com/javascript/#buttons * http://getbootstrap.com/javascript/#buttons
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -165,6 +180,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.isLoading = false this.isLoading = false
} }
Button.VERSION = '3.2.0'
Button.DEFAULTS = { Button.DEFAULTS = {
loadingText: 'loading...' loadingText: 'loading...'
} }
@ -177,9 +194,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
state = state + 'Text' state = state + 'Text'
if (!data.resetText) $el.data('resetText', $el[val]()) if (data.resetText == null) $el.data('resetText', $el[val]())
$el[val](data[state] || this.options[state]) $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 () {
@ -213,9 +230,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// BUTTON PLUGIN DEFINITION // BUTTON PLUGIN DEFINITION
// ======================== // ========================
var old = $.fn.button function Plugin(option) {
$.fn.button = function (option) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.button') var data = $this.data('bs.button')
@ -228,6 +243,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}) })
} }
var old = $.fn.button
$.fn.button = Plugin
$.fn.button.Constructor = Button $.fn.button.Constructor = Button
@ -240,20 +258,36 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
} }
// FOCUS SHIM (FOR BUTTON GROUPS)
// ==============================
function getBtnTarget(target) {
var $target = $(target)
return $target.hasClass('btn') ? $target : $target.parent('.btn')
}
// BUTTON DATA-API // BUTTON DATA-API
// =============== // ===============
$(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) { $(document)
var $btn = $(e.target) .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') var $btn = $(e.target)
$btn.button('toggle') if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
e.preventDefault() Plugin.call($btn, 'toggle')
}) e.preventDefault()
})
.on('focus.bs.button.data-api', '[data-toggle^="button"]', function (e) {
getBtnTarget(e.target).addClass('focus')
})
.on('blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
getBtnTarget(e.target).removeClass('focus')
})
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: carousel.js v3.1.1 * Bootstrap: carousel.js v3.2.0
* http://getbootstrap.com/javascript/#carousel * http://getbootstrap.com/javascript/#carousel
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -268,7 +302,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// ========================= // =========================
var Carousel = function (element, options) { var Carousel = function (element, options) {
this.$element = $(element) this.$element = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
this.$indicators = this.$element.find('.carousel-indicators') this.$indicators = this.$element.find('.carousel-indicators')
this.options = options this.options = options
this.paused = this.paused =
@ -278,17 +312,29 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.$items = null this.$items = null
this.options.pause == 'hover' && this.$element this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this)) .on('mouseenter.bs.carousel', $.proxy(this.pause, this))
.on('mouseleave', $.proxy(this.cycle, this)) .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
} }
Carousel.VERSION = '3.2.0'
Carousel.DEFAULTS = { Carousel.DEFAULTS = {
interval: 5000, interval: 5000,
pause: 'hover', pause: 'hover',
wrap: true wrap: true
} }
Carousel.prototype.cycle = function (e) { Carousel.prototype.keydown = function (e) {
switch (e.which) {
case 37: this.prev(); break
case 39: this.next(); break
default: return
}
e.preventDefault()
}
Carousel.prototype.cycle = function (e) {
e || (this.paused = false) e || (this.paused = false)
this.interval && clearInterval(this.interval) this.interval && clearInterval(this.interval)
@ -300,20 +346,18 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
return this return this
} }
Carousel.prototype.getActiveIndex = function () { Carousel.prototype.getItemIndex = function (item) {
this.$active = this.$element.find('.item.active') this.$items = item.parent().children('.item')
this.$items = this.$active.parent().children() return this.$items.index(item || this.$active)
return this.$items.index(this.$active)
} }
Carousel.prototype.to = function (pos) { Carousel.prototype.to = function (pos) {
var that = this var that = this
var activeIndex = this.getActiveIndex() var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
if (pos > (this.$items.length - 1) || pos < 0) return if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
if (activeIndex == pos) return this.pause().cycle() if (activeIndex == pos) return this.pause().cycle()
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos])) return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
@ -355,11 +399,15 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$next = this.$element.find('.item')[fallback]() $next = this.$element.find('.item')[fallback]()
} }
if ($next.hasClass('active')) return this.sliding = false if ($next.hasClass('active')) return (this.sliding = false)
var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction }) var relatedTarget = $next[0]
this.$element.trigger(e) var slideEvent = $.Event('slide.bs.carousel', {
if (e.isDefaultPrevented()) return relatedTarget: relatedTarget,
direction: direction
})
this.$element.trigger(slideEvent)
if (slideEvent.isDefaultPrevented()) return
this.sliding = true this.sliding = true
@ -367,30 +415,31 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (this.$indicators.length) { if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active') this.$indicators.find('.active').removeClass('active')
this.$element.one('slid.bs.carousel', function () { var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()]) $nextIndicator && $nextIndicator.addClass('active')
$nextIndicator && $nextIndicator.addClass('active')
})
} }
var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
if ($.support.transition && this.$element.hasClass('slide')) { if ($.support.transition && this.$element.hasClass('slide')) {
$next.addClass(type) $next.addClass(type)
$next[0].offsetWidth // force reflow $next[0].offsetWidth // force reflow
$active.addClass(direction) $active.addClass(direction)
$next.addClass(direction) $next.addClass(direction)
$active $active
.one($.support.transition.end, function () { .one('bsTransitionEnd', function () {
$next.removeClass([type, direction].join(' ')).addClass('active') $next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' ')) $active.removeClass(['active', direction].join(' '))
that.sliding = false that.sliding = false
setTimeout(function () { that.$element.trigger('slid.bs.carousel') }, 0) setTimeout(function () {
that.$element.trigger(slidEvent)
}, 0)
}) })
.emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000) .emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000)
} else { } else {
$active.removeClass('active') $active.removeClass('active')
$next.addClass('active') $next.addClass('active')
this.sliding = false this.sliding = false
this.$element.trigger('slid.bs.carousel') this.$element.trigger(slidEvent)
} }
isCycling && this.cycle() isCycling && this.cycle()
@ -402,9 +451,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// CAROUSEL PLUGIN DEFINITION // CAROUSEL PLUGIN DEFINITION
// ========================== // ==========================
var old = $.fn.carousel function Plugin(option) {
$.fn.carousel = function (option) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.carousel') var data = $this.data('bs.carousel')
@ -418,6 +465,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}) })
} }
var old = $.fn.carousel
$.fn.carousel = Plugin
$.fn.carousel.Constructor = Carousel $.fn.carousel.Constructor = Carousel
@ -434,15 +484,17 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// ================= // =================
$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) { $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
var $this = $(this), href var href
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
if (!$target.hasClass('carousel')) return
var options = $.extend({}, $target.data(), $this.data()) var options = $.extend({}, $target.data(), $this.data())
var slideIndex = $this.attr('data-slide-to') var slideIndex = $this.attr('data-slide-to')
if (slideIndex) options.interval = false if (slideIndex) options.interval = false
$target.carousel(options) Plugin.call($target, options)
if (slideIndex = $this.attr('data-slide-to')) { if (slideIndex) {
$target.data('bs.carousel').to(slideIndex) $target.data('bs.carousel').to(slideIndex)
} }
@ -452,14 +504,14 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$(window).on('load', function () { $(window).on('load', function () {
$('[data-ride="carousel"]').each(function () { $('[data-ride="carousel"]').each(function () {
var $carousel = $(this) var $carousel = $(this)
$carousel.carousel($carousel.data()) Plugin.call($carousel, $carousel.data())
}) })
}) })
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: collapse.js v3.1.1 * Bootstrap: collapse.js v3.2.0
* http://getbootstrap.com/javascript/#collapse * http://getbootstrap.com/javascript/#collapse
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -482,6 +534,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (this.options.toggle) this.toggle() if (this.options.toggle) this.toggle()
} }
Collapse.VERSION = '3.2.0'
Collapse.DEFAULTS = { Collapse.DEFAULTS = {
toggle: true toggle: true
} }
@ -503,7 +557,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (actives && actives.length) { if (actives && actives.length) {
var hasData = actives.data('bs.collapse') var hasData = actives.data('bs.collapse')
if (hasData && hasData.transitioning) return if (hasData && hasData.transitioning) return
actives.collapse('hide') Plugin.call(actives, 'hide')
hasData || actives.data('bs.collapse', null) hasData || actives.data('bs.collapse', null)
} }
@ -511,19 +565,17 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.$element this.$element
.removeClass('collapse') .removeClass('collapse')
.addClass('collapsing') .addClass('collapsing')[dimension](0)
[dimension](0)
this.transitioning = 1 this.transitioning = 1
var complete = function (e) { var complete = function () {
if (e && e.target != this.$element[0]) return
this.$element this.$element
.removeClass('collapsing') .removeClass('collapsing')
.addClass('collapse in') .addClass('collapse in')[dimension]('')
[dimension]('auto')
this.transitioning = 0 this.transitioning = 0
this.$element.trigger('shown.bs.collapse') this.$element
.trigger('shown.bs.collapse')
} }
if (!$.support.transition) return complete.call(this) if (!$.support.transition) return complete.call(this)
@ -531,9 +583,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var scrollSize = $.camelCase(['scroll', dimension].join('-')) var scrollSize = $.camelCase(['scroll', dimension].join('-'))
this.$element this.$element
.one($.support.transition.end, $.proxy(complete, this)) .one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(350) .emulateTransitionEnd(350)[dimension](this.$element[0][scrollSize])
[dimension](this.$element[0][scrollSize])
} }
Collapse.prototype.hide = function () { Collapse.prototype.hide = function () {
@ -545,19 +596,15 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var dimension = this.dimension() var dimension = this.dimension()
this.$element this.$element[dimension](this.$element[dimension]())[0].offsetHeight
[dimension](this.$element[dimension]())
[0].offsetHeight
this.$element this.$element
.addClass('collapsing') .addClass('collapsing')
.removeClass('collapse') .removeClass('collapse in')
.removeClass('in')
this.transitioning = 1 this.transitioning = 1
var complete = function (e) { var complete = function () {
if (e && e.target != this.$element[0]) return
this.transitioning = 0 this.transitioning = 0
this.$element this.$element
.trigger('hidden.bs.collapse') .trigger('hidden.bs.collapse')
@ -569,7 +616,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.$element this.$element
[dimension](0) [dimension](0)
.one($.support.transition.end, $.proxy(complete, this)) .one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(350) .emulateTransitionEnd(350)
} }
@ -581,9 +628,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// COLLAPSE PLUGIN DEFINITION // COLLAPSE PLUGIN DEFINITION
// ========================== // ==========================
var old = $.fn.collapse function Plugin(option) {
$.fn.collapse = function (option) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.collapse') var data = $this.data('bs.collapse')
@ -595,6 +640,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}) })
} }
var old = $.fn.collapse
$.fn.collapse = Plugin
$.fn.collapse.Constructor = Collapse $.fn.collapse.Constructor = Collapse
@ -611,10 +659,11 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// ================= // =================
$(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 $this = $(this), href var href
var $this = $(this)
var target = $this.attr('data-target') var target = $this.attr('data-target')
|| e.preventDefault() || e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
var $target = $(target) var $target = $(target)
var data = $target.data('bs.collapse') var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data() var option = data ? 'toggle' : $this.data()
@ -623,16 +672,16 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (!data || !data.transitioning) { if (!data || !data.transitioning) {
if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed') if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed')
$this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed') $this.toggleClass('collapsed', $target.hasClass('in'))
} }
$target.collapse(option) Plugin.call($target, option)
}) })
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: dropdown.js v3.1.1 * Bootstrap: dropdown.js v3.2.0
* http://getbootstrap.com/javascript/#dropdowns * http://getbootstrap.com/javascript/#dropdowns
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -652,6 +701,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$(element).on('click.bs.dropdown', this.toggle) $(element).on('click.bs.dropdown', this.toggle)
} }
Dropdown.VERSION = '3.2.0'
Dropdown.prototype.toggle = function (e) { Dropdown.prototype.toggle = function (e) {
var $this = $(this) var $this = $(this)
@ -673,11 +724,11 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (e.isDefaultPrevented()) return if (e.isDefaultPrevented()) return
$this.trigger('focus')
$parent $parent
.toggleClass('open') .toggleClass('open')
.trigger('shown.bs.dropdown', relatedTarget) .trigger('shown.bs.dropdown', relatedTarget)
$this.trigger('focus')
} }
return false return false
@ -716,6 +767,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
} }
function clearMenus(e) { function clearMenus(e) {
if (e && e.which === 3) return
$(backdrop).remove() $(backdrop).remove()
$(toggle).each(function () { $(toggle).each(function () {
var $parent = getParent($(this)) var $parent = getParent($(this))
@ -732,7 +784,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (!selector) { if (!selector) {
selector = $this.attr('href') selector = $this.attr('href')
selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
} }
var $parent = selector && $(selector) var $parent = selector && $(selector)
@ -744,9 +796,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// DROPDOWN PLUGIN DEFINITION // DROPDOWN PLUGIN DEFINITION
// ========================== // ==========================
var old = $.fn.dropdown function Plugin(option) {
$.fn.dropdown = function (option) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.dropdown') var data = $this.data('bs.dropdown')
@ -756,6 +806,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}) })
} }
var old = $.fn.dropdown
$.fn.dropdown = Plugin
$.fn.dropdown.Constructor = Dropdown $.fn.dropdown.Constructor = Dropdown
@ -780,7 +833,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: modal.js v3.1.1 * Bootstrap: modal.js v3.2.0
* http://getbootstrap.com/javascript/#modals * http://getbootstrap.com/javascript/#modals
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -795,11 +848,12 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// ====================== // ======================
var Modal = function (element, options) { var Modal = function (element, options) {
this.options = options this.options = options
this.$body = $(document.body) this.$body = $(document.body)
this.$element = $(element) this.$element = $(element)
this.$backdrop = this.$backdrop =
this.isShown = null this.isShown = null
this.scrollbarWidth = 0
if (this.options.remote) { if (this.options.remote) {
this.$element this.$element
@ -810,6 +864,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
} }
} }
Modal.VERSION = '3.2.0'
Modal.DEFAULTS = { Modal.DEFAULTS = {
backdrop: true, backdrop: true,
keyboard: true, keyboard: true,
@ -830,6 +886,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.isShown = true this.isShown = true
this.checkScrollbar()
this.$body.addClass('modal-open') this.$body.addClass('modal-open')
this.setScrollbar() this.setScrollbar()
@ -862,7 +919,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
transition ? transition ?
that.$element.find('.modal-dialog') // wait for modal to slide in that.$element.find('.modal-dialog') // wait for modal to slide in
.one($.support.transition.end, function () { .one('bsTransitionEnd', function () {
that.$element.trigger('focus').trigger(e) that.$element.trigger('focus').trigger(e)
}) })
.emulateTransitionEnd(300) : .emulateTransitionEnd(300) :
@ -895,7 +952,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$.support.transition && this.$element.hasClass('fade') ? $.support.transition && this.$element.hasClass('fade') ?
this.$element this.$element
.one($.support.transition.end, $.proxy(this.hideModal, this)) .one('bsTransitionEnd', $.proxy(this.hideModal, this))
.emulateTransitionEnd(300) : .emulateTransitionEnd(300) :
this.hideModal() this.hideModal()
} }
@ -912,11 +969,11 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
Modal.prototype.escape = function () { Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) { if (this.isShown && this.options.keyboard) {
this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) { this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide() e.which == 27 && this.hide()
}, this)) }, this))
} else if (!this.isShown) { } else if (!this.isShown) {
this.$element.off('keyup.dismiss.bs.modal') this.$element.off('keydown.dismiss.bs.modal')
} }
} }
@ -924,7 +981,6 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var that = this var that = this
this.$element.hide() this.$element.hide()
this.backdrop(function () { this.backdrop(function () {
that.removeBackdrop()
that.$element.trigger('hidden.bs.modal') that.$element.trigger('hidden.bs.modal')
}) })
} }
@ -935,6 +991,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
} }
Modal.prototype.backdrop = function (callback) { Modal.prototype.backdrop = function (callback) {
var that = this
var animate = this.$element.hasClass('fade') ? 'fade' : '' var animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.options.backdrop) { if (this.isShown && this.options.backdrop) {
@ -943,7 +1000,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(this.$body) .appendTo(this.$body)
this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) { this.$element.on('mousedown.dismiss.bs.modal', $.proxy(function (e) {
if (e.target !== e.currentTarget) return if (e.target !== e.currentTarget) return
this.options.backdrop == 'static' this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0]) ? this.$element[0].focus.call(this.$element[0])
@ -958,29 +1015,36 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
doAnimate ? doAnimate ?
this.$backdrop this.$backdrop
.one($.support.transition.end, callback) .one('bsTransitionEnd', callback)
.emulateTransitionEnd(150) : .emulateTransitionEnd(150) :
callback() callback()
} else if (!this.isShown && this.$backdrop) { } else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in') this.$backdrop.removeClass('in')
var callbackRemove = function () {
that.removeBackdrop()
callback && callback()
}
$.support.transition && this.$element.hasClass('fade') ? $.support.transition && this.$element.hasClass('fade') ?
this.$backdrop this.$backdrop
.one($.support.transition.end, callback) .one('bsTransitionEnd', callbackRemove)
.emulateTransitionEnd(150) : .emulateTransitionEnd(150) :
callback() callbackRemove()
} else if (callback) { } else if (callback) {
callback() callback()
} }
} }
Modal.prototype.setScrollbar = function () { Modal.prototype.checkScrollbar = function () {
if (document.body.clientHeight <= window.innerHeight) return if (document.body.clientWidth >= window.innerWidth) return
var scrollbarWidth = this.measureScrollbar() this.scrollbarWidth = this.scrollbarWidth || this.measureScrollbar()
var bodyPad = parseInt(this.$body.css('padding-right') || 0) }
if (scrollbarWidth) this.$body.css('padding-right', bodyPad + scrollbarWidth)
Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
} }
Modal.prototype.resetScrollbar = function () { Modal.prototype.resetScrollbar = function () {
@ -1000,9 +1064,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// MODAL PLUGIN DEFINITION // MODAL PLUGIN DEFINITION
// ======================= // =======================
var old = $.fn.modal function Plugin(option, _relatedTarget) {
$.fn.modal = function (option, _relatedTarget) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.modal') var data = $this.data('bs.modal')
@ -1014,6 +1076,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}) })
} }
var old = $.fn.modal
$.fn.modal = Plugin
$.fn.modal.Constructor = Modal $.fn.modal.Constructor = Modal
@ -1032,22 +1097,24 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this) var $this = $(this)
var href = $this.attr('href') var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7 var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
if ($this.is('a')) e.preventDefault() if ($this.is('a')) e.preventDefault()
$target $target.one('show.bs.modal', function (showEvent) {
.modal(option, this) if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
.one('hide', function () { $target.one('hidden.bs.modal', function () {
$this.is(':visible') && $this.trigger('focus') $this.is(':visible') && $this.trigger('focus')
}) })
})
Plugin.call($target, option, this)
}) })
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: tooltip.js v3.1.1 * Bootstrap: tooltip.js v3.2.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
* ======================================================================== * ========================================================================
@ -1073,6 +1140,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.init('tooltip', element, options) this.init('tooltip', element, options)
} }
Tooltip.VERSION = '3.2.0'
Tooltip.DEFAULTS = { Tooltip.DEFAULTS = {
animation: true, animation: true,
placement: 'top', placement: 'top',
@ -1082,14 +1151,19 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
title: '', title: '',
delay: 0, delay: 0,
html: false, html: false,
container: false container: false,
viewport: {
selector: 'body',
padding: 0
}
} }
Tooltip.prototype.init = function (type, element, options) { Tooltip.prototype.init = function (type, element, options) {
this.enabled = true this.enabled = true
this.type = type this.type = type
this.$element = $(element) this.$element = $(element)
this.options = this.getOptions(options) this.options = this.getOptions(options)
this.$viewport = this.options.viewport && $(this.options.viewport.selector || this.options.viewport)
var triggers = this.options.trigger.split(' ') var triggers = this.options.trigger.split(' ')
@ -1142,7 +1216,12 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
Tooltip.prototype.enter = function (obj) { Tooltip.prototype.enter = function (obj) {
var self = obj instanceof this.constructor ? var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) obj : $(obj.currentTarget).data('bs.' + this.type)
if (!self) {
self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
$(obj.currentTarget).data('bs.' + this.type, self)
}
clearTimeout(self.timeout) clearTimeout(self.timeout)
@ -1157,7 +1236,12 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
Tooltip.prototype.leave = function (obj) { Tooltip.prototype.leave = function (obj) {
var self = obj instanceof this.constructor ? var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) obj : $(obj.currentTarget).data('bs.' + this.type)
if (!self) {
self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
$(obj.currentTarget).data('bs.' + this.type, self)
}
clearTimeout(self.timeout) clearTimeout(self.timeout)
@ -1176,12 +1260,17 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (this.hasContent() && this.enabled) { if (this.hasContent() && this.enabled) {
this.$element.trigger(e) this.$element.trigger(e)
if (e.isDefaultPrevented()) return var inDom = $.contains(document.documentElement, this.$element[0])
var that = this; if (e.isDefaultPrevented() || !inDom) return
var that = this
var $tip = this.tip() var $tip = this.tip()
var tipId = this.getUID(this.type)
this.setContent() this.setContent()
$tip.attr('id', tipId)
this.$element.attr('aria-describedby', tipId)
if (this.options.animation) $tip.addClass('fade') if (this.options.animation) $tip.addClass('fade')
@ -1197,6 +1286,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
.detach() .detach()
.css({ top: 0, left: 0, display: 'block' }) .css({ top: 0, left: 0, display: 'block' })
.addClass(placement) .addClass(placement)
.data('bs.' + this.type, this)
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element) this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
@ -1205,18 +1295,14 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var actualHeight = $tip[0].offsetHeight var actualHeight = $tip[0].offsetHeight
if (autoPlace) { if (autoPlace) {
var $parent = this.$element.parent()
var orgPlacement = placement var orgPlacement = placement
var docScroll = document.documentElement.scrollTop var $parent = this.$element.parent()
var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth() var parentDim = this.getPosition($parent)
var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight()
var parentLeft = this.options.container == 'body' ? 0 : $parent.offset().left
placement = placement == 'bottom' && pos.top + pos.height + actualHeight - docScroll > parentHeight ? 'top' : placement = placement == 'bottom' && pos.top + pos.height + actualHeight - parentDim.scroll > parentDim.height ? 'top' :
placement == 'top' && pos.top - docScroll - actualHeight < 0 ? 'bottom' : placement == 'top' && pos.top - parentDim.scroll - actualHeight < 0 ? 'bottom' :
placement == 'right' && pos.right + actualWidth > parentWidth ? 'left' : placement == 'right' && pos.right + actualWidth > parentDim.width ? 'left' :
placement == 'left' && pos.left - actualWidth < parentLeft ? 'right' : placement == 'left' && pos.left - actualWidth < parentDim.left ? 'right' :
placement placement
$tip $tip
@ -1227,22 +1313,21 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight) var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
this.applyPlacement(calculatedOffset, placement) this.applyPlacement(calculatedOffset, placement)
this.hoverState = null
var complete = function() { var complete = function () {
that.$element.trigger('shown.bs.' + that.type) that.$element.trigger('shown.bs.' + that.type)
that.hoverState = null
} }
$.support.transition && this.$tip.hasClass('fade') ? $.support.transition && this.$tip.hasClass('fade') ?
$tip $tip
.one($.support.transition.end, complete) .one('bsTransitionEnd', complete)
.emulateTransitionEnd(150) : .emulateTransitionEnd(150) :
complete() complete()
} }
} }
Tooltip.prototype.applyPlacement = function (offset, placement) { Tooltip.prototype.applyPlacement = function (offset, placement) {
var replace
var $tip = this.tip() var $tip = this.tip()
var width = $tip[0].offsetWidth var width = $tip[0].offsetWidth
var height = $tip[0].offsetHeight var height = $tip[0].offsetHeight
@ -1276,29 +1361,20 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var actualHeight = $tip[0].offsetHeight var actualHeight = $tip[0].offsetHeight
if (placement == 'top' && actualHeight != height) { if (placement == 'top' && actualHeight != height) {
replace = true
offset.top = offset.top + height - actualHeight offset.top = offset.top + height - actualHeight
} }
if (/bottom|top/.test(placement)) { var delta = this.getViewportAdjustedDelta(placement, offset, actualWidth, actualHeight)
var delta = 0
if (offset.left < 0) { if (delta.left) offset.left += delta.left
delta = offset.left * -2 else offset.top += delta.top
offset.left = 0
$tip.offset(offset) var arrowDelta = delta.left ? delta.left * 2 - width + actualWidth : delta.top * 2 - height + actualHeight
var arrowPosition = delta.left ? 'left' : 'top'
var arrowOffsetPosition = delta.left ? 'offsetWidth' : 'offsetHeight'
actualWidth = $tip[0].offsetWidth $tip.offset(offset)
actualHeight = $tip[0].offsetHeight this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], arrowPosition)
}
this.replaceArrow(delta - width + actualWidth, actualWidth, 'left')
} else {
this.replaceArrow(actualHeight - height, actualHeight, 'top')
}
if (replace) $tip.offset(offset)
} }
Tooltip.prototype.replaceArrow = function (delta, dimension, position) { Tooltip.prototype.replaceArrow = function (delta, dimension, position) {
@ -1318,6 +1394,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var $tip = this.tip() var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type) var e = $.Event('hide.bs.' + this.type)
this.$element.removeAttr('aria-describedby')
function complete() { function complete() {
if (that.hoverState != 'in') $tip.detach() if (that.hoverState != 'in') $tip.detach()
that.$element.trigger('hidden.bs.' + that.type) that.$element.trigger('hidden.bs.' + that.type)
@ -1331,7 +1409,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$.support.transition && this.$tip.hasClass('fade') ? $.support.transition && this.$tip.hasClass('fade') ?
$tip $tip
.one($.support.transition.end, complete) .one('bsTransitionEnd', complete)
.emulateTransitionEnd(150) : .emulateTransitionEnd(150) :
complete() complete()
@ -1342,7 +1420,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
Tooltip.prototype.fixTitle = function () { Tooltip.prototype.fixTitle = function () {
var $e = this.$element var $e = this.$element
if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { if ($e.attr('title') || typeof ($e.attr('data-original-title')) != 'string') {
$e.attr('data-original-title', $e.attr('title') || '').attr('title', '') $e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
} }
} }
@ -1351,12 +1429,22 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
return this.getTitle() return this.getTitle()
} }
Tooltip.prototype.getPosition = function () { Tooltip.prototype.getPosition = function ($element) {
var el = this.$element[0] $element = $element || this.$element
return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : {
width: el.offsetWidth, var el = $element[0]
height: el.offsetHeight var isBody = el.tagName == 'BODY'
}, this.$element.offset()) var isSvg = window.SVGElement && el instanceof window.SVGElement
var elRect = typeof el.getBoundingClientRect == 'function' ? el.getBoundingClientRect() : null
var elOffset = isBody ? { top: 0, left: 0 } : $element.offset()
var scroll = { scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop() }
var outerDims = isSvg ? {} : {
width: isBody ? $(window).width() : $element.outerWidth(),
height: isBody ? $(window).height() : $element.outerHeight()
}
return $.extend({}, elRect, scroll, outerDims, elOffset)
} }
Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) { Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
@ -1364,6 +1452,35 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } : placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } : placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
/* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width } /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
}
Tooltip.prototype.getViewportAdjustedDelta = function (placement, pos, actualWidth, actualHeight) {
var delta = { top: 0, left: 0 }
if (!this.$viewport) return delta
var viewportPadding = this.options.viewport && this.options.viewport.padding || 0
var viewportDimensions = this.getPosition(this.$viewport)
if (/right|left/.test(placement)) {
var topEdgeOffset = pos.top - viewportPadding - viewportDimensions.scroll
var bottomEdgeOffset = pos.top + viewportPadding - viewportDimensions.scroll + actualHeight
if (topEdgeOffset < viewportDimensions.top) { // top overflow
delta.top = viewportDimensions.top - topEdgeOffset
} else if (bottomEdgeOffset > viewportDimensions.top + viewportDimensions.height) { // bottom overflow
delta.top = viewportDimensions.top + viewportDimensions.height - bottomEdgeOffset
}
} else {
var leftEdgeOffset = pos.left - viewportPadding
var rightEdgeOffset = pos.left + viewportPadding + actualWidth
if (leftEdgeOffset < viewportDimensions.left) { // left overflow
delta.left = viewportDimensions.left - leftEdgeOffset
} else if (rightEdgeOffset > viewportDimensions.width) { // right overflow
delta.left = viewportDimensions.left + viewportDimensions.width - rightEdgeOffset
}
}
return delta
} }
Tooltip.prototype.getTitle = function () { Tooltip.prototype.getTitle = function () {
@ -1377,12 +1494,18 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
return title return title
} }
Tooltip.prototype.getUID = function (prefix) {
do prefix += ~~(Math.random() * 1000000)
while (document.getElementById(prefix))
return prefix
}
Tooltip.prototype.tip = function () { Tooltip.prototype.tip = function () {
return this.$tip = this.$tip || $(this.options.template) return (this.$tip = this.$tip || $(this.options.template))
} }
Tooltip.prototype.arrow = function () { Tooltip.prototype.arrow = function () {
return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow') return (this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow'))
} }
Tooltip.prototype.validate = function () { Tooltip.prototype.validate = function () {
@ -1406,7 +1529,15 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
} }
Tooltip.prototype.toggle = function (e) { Tooltip.prototype.toggle = function (e) {
var self = e ? $(e.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) : this var self = this
if (e) {
self = $(e.currentTarget).data('bs.' + this.type)
if (!self) {
self = new this.constructor(e.currentTarget, this.getDelegateOptions())
$(e.currentTarget).data('bs.' + this.type, self)
}
}
self.tip().hasClass('in') ? self.leave(self) : self.enter(self) self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
} }
@ -1419,9 +1550,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// TOOLTIP PLUGIN DEFINITION // TOOLTIP PLUGIN DEFINITION
// ========================= // =========================
var old = $.fn.tooltip function Plugin(option) {
$.fn.tooltip = function (option) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.tooltip') var data = $this.data('bs.tooltip')
@ -1433,6 +1562,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}) })
} }
var old = $.fn.tooltip
$.fn.tooltip = Plugin
$.fn.tooltip.Constructor = Tooltip $.fn.tooltip.Constructor = Tooltip
@ -1447,7 +1579,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: popover.js v3.1.1 * Bootstrap: popover.js v3.2.0
* http://getbootstrap.com/javascript/#popovers * http://getbootstrap.com/javascript/#popovers
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -1467,11 +1599,13 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
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.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, { Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
placement: 'right', placement: 'right',
trigger: 'click', trigger: 'click',
content: '', content: '',
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
}) })
@ -1492,7 +1626,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var content = this.getContent() var content = this.getContent()
$tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title) $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
$tip.find('.popover-content')[ // we use append for html objects to maintain js events $tip.find('.popover-content').empty()[ // we use append for html objects to maintain js events
this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text' this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text'
](content) ](content)
@ -1518,7 +1652,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
} }
Popover.prototype.arrow = function () { Popover.prototype.arrow = function () {
return this.$arrow = this.$arrow || this.tip().find('.arrow') return (this.$arrow = this.$arrow || this.tip().find('.arrow'))
} }
Popover.prototype.tip = function () { Popover.prototype.tip = function () {
@ -1530,9 +1664,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// POPOVER PLUGIN DEFINITION // POPOVER PLUGIN DEFINITION
// ========================= // =========================
var old = $.fn.popover function Plugin(option) {
$.fn.popover = function (option) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.popover') var data = $this.data('bs.popover')
@ -1544,6 +1676,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}) })
} }
var old = $.fn.popover
$.fn.popover = Plugin
$.fn.popover.Constructor = Popover $.fn.popover.Constructor = Popover
@ -1558,7 +1693,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: scrollspy.js v3.1.1 * Bootstrap: scrollspy.js v3.2.0
* http://getbootstrap.com/javascript/#scrollspy * http://getbootstrap.com/javascript/#scrollspy
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -1573,36 +1708,48 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// ========================== // ==========================
function ScrollSpy(element, options) { function ScrollSpy(element, options) {
var href
var process = $.proxy(this.process, this) var process = $.proxy(this.process, this)
this.$element = $(element).is('body') ? $(window) : $(element)
this.$body = $('body') this.$body = $('body')
this.$scrollElement = this.$element.on('scroll.bs.scrollspy', process) this.$scrollElement = $(element).is('body') ? $(window) : $(element)
this.options = $.extend({}, ScrollSpy.DEFAULTS, options) this.options = $.extend({}, ScrollSpy.DEFAULTS, options)
this.selector = (this.options.target this.selector = (this.options.target || '') + ' .nav li > a'
|| ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 this.offsets = []
|| '') + ' .nav li > a' this.targets = []
this.offsets = $([])
this.targets = $([])
this.activeTarget = null this.activeTarget = null
this.scrollHeight = 0
this.$scrollElement.on('scroll.bs.scrollspy', process)
this.refresh() this.refresh()
this.process() this.process()
} }
ScrollSpy.VERSION = '3.2.0'
ScrollSpy.DEFAULTS = { ScrollSpy.DEFAULTS = {
offset: 10 offset: 10
} }
ScrollSpy.prototype.refresh = function () { ScrollSpy.prototype.getScrollHeight = function () {
var offsetMethod = this.$element[0] == window ? 'offset' : 'position' return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
}
this.offsets = $([]) ScrollSpy.prototype.refresh = function () {
this.targets = $([]) var offsetMethod = 'offset'
var offsetBase = 0
if (!$.isWindow(this.$scrollElement[0])) {
offsetMethod = 'position'
offsetBase = this.$scrollElement.scrollTop()
}
this.offsets = []
this.targets = []
this.scrollHeight = this.getScrollHeight()
var self = this var self = this
var $targets = this.$body
this.$body
.find(this.selector) .find(this.selector)
.map(function () { .map(function () {
var $el = $(this) var $el = $(this)
@ -1612,7 +1759,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
return ($href return ($href
&& $href.length && $href.length
&& $href.is(':visible') && $href.is(':visible')
&& [[ $href[offsetMethod]().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]]) || null && [[$href[offsetMethod]().top + offsetBase, href]]) || null
}) })
.sort(function (a, b) { return a[0] - b[0] }) .sort(function (a, b) { return a[0] - b[0] })
.each(function () { .each(function () {
@ -1623,15 +1770,19 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
ScrollSpy.prototype.process = function () { ScrollSpy.prototype.process = function () {
var scrollTop = this.$scrollElement.scrollTop() + this.options.offset var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
var scrollHeight = this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight) var scrollHeight = this.getScrollHeight()
var maxScroll = scrollHeight - this.$scrollElement.height() var maxScroll = this.options.offset + scrollHeight - this.$scrollElement.height()
var offsets = this.offsets var offsets = this.offsets
var targets = this.targets var targets = this.targets
var activeTarget = this.activeTarget var activeTarget = this.activeTarget
var i var i
if (this.scrollHeight != scrollHeight) {
this.refresh()
}
if (scrollTop >= maxScroll) { if (scrollTop >= maxScroll) {
return activeTarget != (i = targets.last()[0]) && this.activate(i) return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
} }
if (activeTarget && scrollTop <= offsets[0]) { if (activeTarget && scrollTop <= offsets[0]) {
@ -1642,7 +1793,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
activeTarget != targets[i] activeTarget != targets[i]
&& scrollTop >= offsets[i] && scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1]) && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
&& this.activate( targets[i] ) && this.activate(targets[i])
} }
} }
@ -1674,9 +1825,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// SCROLLSPY PLUGIN DEFINITION // SCROLLSPY PLUGIN DEFINITION
// =========================== // ===========================
var old = $.fn.scrollspy function Plugin(option) {
$.fn.scrollspy = function (option) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.scrollspy') var data = $this.data('bs.scrollspy')
@ -1687,6 +1836,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}) })
} }
var old = $.fn.scrollspy
$.fn.scrollspy = Plugin
$.fn.scrollspy.Constructor = ScrollSpy $.fn.scrollspy.Constructor = ScrollSpy
@ -1705,14 +1857,14 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$(window).on('load.bs.scrollspy.data-api', function () { $(window).on('load.bs.scrollspy.data-api', function () {
$('[data-spy="scroll"]').each(function () { $('[data-spy="scroll"]').each(function () {
var $spy = $(this) var $spy = $(this)
$spy.scrollspy($spy.data()) Plugin.call($spy, $spy.data())
}) })
}) })
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: tab.js v3.1.1 * Bootstrap: tab.js v3.2.0
* http://getbootstrap.com/javascript/#tabs * http://getbootstrap.com/javascript/#tabs
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -1730,6 +1882,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.element = $(element) this.element = $(element)
} }
Tab.VERSION = '3.2.0'
Tab.prototype.show = function () { Tab.prototype.show = function () {
var $this = this.element var $this = this.element
var $ul = $this.closest('ul:not(.dropdown-menu)') var $ul = $this.closest('ul:not(.dropdown-menu)')
@ -1737,7 +1891,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (!selector) { if (!selector) {
selector = $this.attr('href') selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
} }
if ($this.parent('li').hasClass('active')) return if ($this.parent('li').hasClass('active')) return
@ -1753,7 +1907,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var $target = $(selector) var $target = $(selector)
this.activate($this.parent('li'), $ul) this.activate($this.closest('li'), $ul)
this.activate($target, $target.parent(), function () { this.activate($target, $target.parent(), function () {
$this.trigger({ $this.trigger({
type: 'shown.bs.tab', type: 'shown.bs.tab',
@ -1766,7 +1920,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var $active = container.find('> .active') var $active = container.find('> .active')
var transition = callback var transition = callback
&& $.support.transition && $.support.transition
&& $active.hasClass('fade') && (($active.length && $active.hasClass('fade')) || !!container.find('> .fade').length)
function next() { function next() {
$active $active
@ -1790,9 +1944,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
callback && callback() callback && callback()
} }
transition ? $active.length && transition ?
$active $active
.one($.support.transition.end, next) .one('bsTransitionEnd', next)
.emulateTransitionEnd(150) : .emulateTransitionEnd(150) :
next() next()
@ -1803,9 +1957,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// TAB PLUGIN DEFINITION // TAB PLUGIN DEFINITION
// ===================== // =====================
var old = $.fn.tab function Plugin(option) {
$.fn.tab = function ( option ) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.tab') var data = $this.data('bs.tab')
@ -1815,6 +1967,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}) })
} }
var old = $.fn.tab
$.fn.tab = Plugin
$.fn.tab.Constructor = Tab $.fn.tab.Constructor = Tab
@ -1832,13 +1987,13 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault() e.preventDefault()
$(this).tab('show') Plugin.call($(this), 'show')
}) })
}(jQuery); }(jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: affix.js v3.1.1 * Bootstrap: affix.js v3.2.0
* http://getbootstrap.com/javascript/#affix * http://getbootstrap.com/javascript/#affix
* ======================================================================== * ========================================================================
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
@ -1854,7 +2009,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var Affix = function (element, options) { var Affix = function (element, options) {
this.options = $.extend({}, Affix.DEFAULTS, options) this.options = $.extend({}, Affix.DEFAULTS, options)
this.$window = $(window)
this.$target = $(this.options.target)
.on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this)) .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
.on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this)) .on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this))
@ -1866,16 +2022,19 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.checkPosition() this.checkPosition()
} }
Affix.RESET = 'affix affix-top affix-bottom' Affix.VERSION = '3.2.0'
Affix.RESET = 'affix affix-top affix-bottom'
Affix.DEFAULTS = { Affix.DEFAULTS = {
offset: 0 offset: 0,
target: window
} }
Affix.prototype.getPinnedOffset = function () { Affix.prototype.getPinnedOffset = function () {
if (this.pinnedOffset) return this.pinnedOffset if (this.pinnedOffset) return this.pinnedOffset
this.$element.removeClass(Affix.RESET).addClass('affix') this.$element.removeClass(Affix.RESET).addClass('affix')
var scrollTop = this.$window.scrollTop() var scrollTop = this.$target.scrollTop()
var position = this.$element.offset() var position = this.$element.offset()
return (this.pinnedOffset = position.top - scrollTop) return (this.pinnedOffset = position.top - scrollTop)
} }
@ -1888,7 +2047,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (!this.$element.is(':visible')) return if (!this.$element.is(':visible')) return
var scrollHeight = $(document).height() var scrollHeight = $(document).height()
var scrollTop = this.$window.scrollTop() var scrollTop = this.$target.scrollTop()
var position = this.$element.offset() var position = this.$element.offset()
var offset = this.options.offset var offset = this.options.offset
var offsetTop = offset.top var offsetTop = offset.top
@ -1918,10 +2077,12 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.$element this.$element
.removeClass(Affix.RESET) .removeClass(Affix.RESET)
.addClass(affixType) .addClass(affixType)
.trigger($.Event(affixType.replace('affix', 'affixed'))) .trigger(affixType.replace('affix', 'affixed') + '.bs.affix')
if (affix == 'bottom') { if (affix == 'bottom') {
this.$element.offset({ top: position.top }) this.$element.offset({
top: scrollHeight - this.$element.height() - offsetBottom
})
} }
} }
@ -1929,9 +2090,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// AFFIX PLUGIN DEFINITION // AFFIX PLUGIN DEFINITION
// ======================= // =======================
var old = $.fn.affix function Plugin(option) {
$.fn.affix = function (option) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.affix') var data = $this.data('bs.affix')
@ -1942,6 +2101,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}) })
} }
var old = $.fn.affix
$.fn.affix = Plugin
$.fn.affix.Constructor = Affix $.fn.affix.Constructor = Affix
@ -1967,7 +2129,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (data.offsetBottom) data.offset.bottom = data.offsetBottom if (data.offsetBottom) data.offset.bottom = data.offsetBottom
if (data.offsetTop) data.offset.top = data.offsetTop if (data.offsetTop) data.offset.top = data.offsetTop
$spy.affix(data) Plugin.call($spy, data)
}) })
}) })

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

File diff suppressed because one or more lines are too long

32
docs/_data/showcase.yml
View File

@ -1,19 +1,19 @@
- name: Little - name: Red Antler
url: http://littleco.com url: http://www.redantler.com/
expo_url: http://expo.getbootstrap.com/2014/02/12/little/ expo_url: http://expo.getbootstrap.com/2014/02/24/redantler/
img: http://expo.getbootstrap.com/screenshots/little.jpg img: redantler
- name: Engine Yard - name: Riot Design
url: http://engineyard.com url: http://riotdesign.eu/en/
expo_url: http://expo.getbootstrap.com/2014/02/10/engine-yard/ expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
img: http://expo.getbootstrap.com/screenshots/engine-yard.jpg img: riot
- name: Webflow - name: Newsweek
url: http://webflow.com url: http://www.newsweek.com/
expo_url: http://expo.getbootstrap.com/2014/02/04/webflow/ expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
img: http://expo.getbootstrap.com/screenshots/webflow.jpg img: newsweek
- name: Sentry - name: Robinhood
url: https://getsentry.com url: https://www.robinhood.com
expo_url: http://expo.getbootstrap.com/2013/05/09/sentry/ expo_url: http://expo.getbootstrap.com/2014/02/26/robinhood/
img: http://expo.getbootstrap.com/screenshots/sentry.jpg img: robinhood

39
docs/_data/translations.yml Normal file
View File

@ -0,0 +1,39 @@
- name: Chinese
code: zh
description: Bootstrap 中文文档
url: http://v3.bootcss.com/
- name: French
code: fr
description: Bootstrap en Français
url: http://www.oneskyapp.com/docs/bootstrap/fr
- name: German
code: de
description: Bootstrap auf Deutsch
url: http://holdirbootstrap.de/
- name: Italian
code: it
description: Bootstrap in Italiano
url: http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/
- name: Korean
code: ko
description: Bootstrap 한국어
url: http://bootstrapk.com/BS3/
- name: Russian
code: ru
description: Bootstrap по-русски
url: http://www.oneskyapp.com/docs/bootstrap/ru
- name: Spanish
code: es
description: Bootstrap en Español
url: http://www.oneskyapp.com/docs/bootstrap/es
- name: Ukrainian
code: uk
description: Bootstrap ua Українською
url: http://twbs.site-konstruktor.com.ua

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

@ -32,17 +32,17 @@
<div class="alert alert-danger" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div>
{% endhighlight %} {% endhighlight %}
<h2 id="alerts-dismissable">Dismissable alerts</h2> <h2 id="alerts-dismissible">Dismissible alerts</h2>
<p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p> <p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
<div class="bs-example"> <div class="bs-example">
<div class="alert alert-warning alert-dismissable" role="alert"> <div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good. <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="alert alert-warning alert-dismissable" role="alert"> <div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good. <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div> </div>
{% endhighlight %} {% endhighlight %}

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

@ -21,13 +21,13 @@
<h4>Adapts to active nav states</h4> <h4>Adapts to active nav states</h4>
<p>Built-in styles are included for placing badges in active states in pill navigations.</p> <p>Built-in styles are included for placing badges in active states in pill navigations.</p>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li> <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="badge">3</span></a></li> <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul> </ul>
<br> <br>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
<li class="active"> <li class="active">
<a href="#"> <a href="#">
<span class="badge pull-right">42</span> <span class="badge pull-right">42</span>
@ -48,7 +48,7 @@
</button> </button>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active"> <li class="active">
<a href="#"> <a href="#">
<span class="badge pull-right">42</span> <span class="badge pull-right">42</span>

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

@ -246,7 +246,7 @@
<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">
Large button <span class="caret"></span> Large button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
... ...
</ul> </ul>
</div> </div>
@ -256,7 +256,7 @@
<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">
Small button <span class="caret"></span> Small button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
... ...
</ul> </ul>
</div> </div>
@ -266,7 +266,7 @@
<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">
Extra small button <span class="caret"></span> Extra small button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
... ...
</ul> </ul>
</div> </div>
@ -313,7 +313,7 @@
<span class="caret"></span> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
</ul> </ul>
</div> </div>

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

@ -121,7 +121,7 @@
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
@ -194,7 +194,7 @@
</div> </div>
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
<h4>IE8 and borders</h4> <h4>IE8 and borders</h4>
<p>Internet Explorer 8 doesn't render borders in on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p> <p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
<p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p> <p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
</div> </div>

8
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 dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -22,7 +22,7 @@
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">
<button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -56,7 +56,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 dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -85,7 +85,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 dropdown-toggle sr-only" type="button" id="dropdownMenu3" data-toggle="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>

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

@ -21,6 +21,20 @@
<h4>Don't mix with other components</h4> <h4>Don't mix with other components</h4>
<p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code>&lt;span&gt;</code> and apply the icon classes to the <code>&lt;span&gt;</code>.</p> <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code>&lt;span&gt;</code> and apply the icon classes to the <code>&lt;span&gt;</code>.</p>
</div> </div>
<div class="bs-callout bs-callout-danger">
<h4>Only for use on empty elements</h4>
<p>Icon classes should only be used on elements that contain no text content and have no child elements.</p>
</div>
<div class="bs-callout bs-callout-info">
<h4>Changing the icon font location</h4>
<p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p>
<ul>
<li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li>
<li>Utilize the <a href="http://lesscss.org/usage/#command-line-usage-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
<li>Change the <code>url()</code> paths in the compiled CSS.</li>
</ul>
<p>Use whatever option best suits your specific development setup.</p>
</div>
{% highlight html %} {% highlight html %}
<span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-search"></span>
{% endhighlight %} {% endhighlight %}

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

@ -221,7 +221,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 dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-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>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -237,7 +237,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 dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right"> <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>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>

5
docs/_includes/components/labels.html
View File

@ -32,4 +32,9 @@
<span class="label label-warning">Warning</span> <span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span> <span class="label label-danger">Danger</span>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-info">
<h4>Have tons of labels?</h4>
<p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
</div>
</div> </div>

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

@ -17,13 +17,17 @@
<h4>Requires JavaScript</h4> <h4>Requires JavaScript</h4>
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p> <p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
</div> </div>
<div class="bs-callout bs-callout-info">
<h4>Changing the collapsed mobile navbar breakpoint</h4>
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
</div>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -38,7 +42,7 @@
<li class="active"><a href="#">Link</a></li> <li class="active"><a href="#">Link</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 <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
@ -59,7 +63,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 <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
@ -78,7 +82,7 @@
<div class="container-fluid"> <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -93,8 +97,8 @@
<li class="active"><a href="#">Link</a></li> <li class="active"><a href="#">Link</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 <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-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>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -114,8 +118,8 @@
<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 <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-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>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -140,6 +144,32 @@
</div> </div>
<h2 id="navbar-brand-image">Brand image</h2>
<p>Replace the navbar brand with your own image by swapping the text for an <code>&lt;img&gt;</code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAYAAAAYwiAhAAAMU0lEQVR4AeyZzU4TARSFhx08ienKiAsSSymliEjpdBBqoUX++gMJupZC/6B0prPUhIRI4qvIwoUhxAU8gBKiS0kkYQW5npsUAZloy4xYp3fxJSxYDMOXc07uKETkGJmI6clo5iLYmtfMbXAwP2IeA2oNqo6Q0W6N40ykegC205HqFlgEHiedcECq6j0ItQGZDptcABGqXiLVQ7CRVo3OfyLYU1+uDQ+iQaqdyy8cD0Szj9fp2cM1SvSVaNxfoFhPnvD7LmDFEaLdzQP/Xfz/iQeKNNm/SjODZUqFK7/IZuykVV2Ldi+33YpgMLsLibV7LlUqbNDUwBrLxA8sMlkI1bwsWwHpcgiJEiWHL2RLRYzdlKp3/TXBkE4dXIWQ6gzQXKhC8b6iCPWfy2TF2CXGA3maGSpTGpKBs3TE2EyG9Q5HBYNYHki1f55YLJbI5A6hxuqERZsbrtREM/aRaB5HBEMl+hZGzCPsLd5WIpQL0skOif4SIcW4No9SquGzJRjkUpFaJzzeJwJFkckV6WSfWG+e9xmLdoJGU28kGOTyslzJYZ1i/rwLZJJ0soX3KlG8t9mh9ZpkurchwXBsu7Ogmd+SIcjVk2+5dBKZ6gPPAcnKfMpAXeqeugRDarVjb+0huVgukcldVWdDqKwVNcmQZKq+hzRr/6NgGc3c5M2FWhShWjadsg0R9S3zJmPJNn8rGB9RkV6nzg96SafmlYnJ2ibmz7Fgp/gS0GUpGH/+gVwfcYqQIS7p1BCjNeLBIqUi+i5+brsmGNJL4yOqC9JJZLoVoayZDa1TUq1o1wRDen3AhV5kcuEQty9T/cR6c5RS9Z0rgiG9OvFtUYRq8apjRh1genCNsMXuXwimma+QXpJOUnWN82DpGjH/Cgv2+qdguHl9lXSSqrupUFbgAPuF3UI9GnenBlal6qyRdLohiWCBkuGKB/VYfTHuz0vVMZJOjoH3wYI9V7D437ZSOskQd16mJ9bQTKj8Rpl+VH4v6SRVZ1soCyYHSu+URLD0WWSSqrMrkxXxYOGTMhEofJeqk3SyK9MFL8/hc8WxEuvJSzpJ1dmWyYqx7izxR24Z4pJOtmWyYtS7RIpUXeNIOtWP0tpVJ0P8Rzt39ptlEcVx/HDHPwJeIUvRondcSG3LoneiFKIXKG3ZRMGyaGSRVcJarKxuiUQWNxCI7DS2mFAEb0ohCg0mGilqgiiBPJ4M9SX1TF4Z3jnvb9r3TPK9NdF+cuZ5Z57HeJi4x2Rk06n3b3V4ULKnu6PUz5wuXejs9X1/tiPbv/eka8WCHdnMSW/3iekkQcko9enUh5fDd+zQt1njyp3ZC2MX9XpMstkZpb7VldI6z5PuvU2fA0DFweSLUn8QL8V1/drvbjtNfTrJZJT6gzh24aFtXLkzvekUEAEwGbDwrZOf0RaippMmMPyZk62766fOXxwyLKbwKOkzJwnMkI1ZmBIm0VMjekapH2DKZcieZ2R4UBKT7NWM8KAMWOg63XweP50kJm+U+vWKf9lavmB7cph8UeqXv/5lq4uPMECgFIEpYzJgYWvHps8AmMIi4HQyYBEe+GM8iGtGqb+aYiv/mj5xZYTppBel/hZm/mXrkw8OgTHJxo14JRel/uJc7MWXyLGuV3h6rOJfczu62+7+2Pz6Db+Gc6V410htHQmBkhEeEwCY/vUKH4a+6R7C+deeKrCbf/6Fx+Sr/G6U+jviCsCKfsWyf+8JTWPJYPJFKWGSqQBDXK+4aaa1ls3fVjxQ5WERGhQAGOy+jp/RAMAUplNABMYEAHYCevl7sf0KBJg+Jn+U+udQCsCg1ysbVnysDgyFaWz5LBHhMcnwwHRPxDWA4UH5o9Q/h1IABr+v421SFxgIky9KDRQAmAImADA8KG+U+udQsdc+Boa+rzvfdgEMTGBSi1L/HEoBmAIm7ARDYRI9KiPkdMIBw97VxQTGV1EpgRIRHhMYGOCKJeb9ZGvzORwm0csiCsCkDAoADHBfN61mRRZzbW/8FA/K05juKAAU4HpFFxjgvo6viw5mMdfE6tfxmPJEKX6sqQ8Mc/k7qfqN2NujEiYuHJM3SvBjzR5pAQNc/joQMdfUmuWA6RQWJfixpj4wwH3dvj1x3wk7eug0AFN4hMYEAKYJSsRTJvq519XOn92zV0qgRI/MdFGRtrrEgOnf182but5tiRqvSM+rX58kJl+EnE4AYO6PzlcrBbd0/tZc+/Ycz8XXQA4BL21cyWEa7YkA0ykoWz1wpQ5KRBJUWt/X2XLPXA4XHlN4lBImmQE7erA1q6legAEVIQqCALheKeWptXTeFiQmADDA9UopLv6hoIdJtRkiQk4nmaikH+pbT53L5tav7w2gRNXdEWA6BZXZcge1vF0mj8kXIaeTAQtaPNG+y2qqFiQJSjT8bgTBFHAibktunW/xNINj8oMSUWIfa4ps+de2xr3JYfJFYFAKwAyZxlYX3nQXATApADNkiOkkQclIH5MB014N9Wsh00kUDgz/OZTG/1+ef/YX0GVvQa9CK/w7TaiajwflifCY8hd78Ss1RTkR5196bvviowX3y097fbnnGAqTqCqXBJba93UawCAn4oxNc8o5xHXPLYViEpUxsIQwicboAEOeiLtJo7WOHGxVBSURCVAiSgXUGJkeMOwVC2+fm93E0ZhiEyrnF206yUKB4T+HUnhWOZ7E9cq65R/pHFts3FO06SSbJiI0Jjww3PVKC/8AiL3OtbUXbTpJUDICgEoRGOREnB/KNbZJGCZflPq3dfrAoPd1buLEXkvmbo671QVU+Z8o/EFcFZRIHxj0vs49M8VeO9//yo9JH5SIGE7K39dpHEiCMDlQooa6NfH/HXcfg2DyRXhMMn1guMtfX7EXX10VDKoyUgQFhQEGwAQAhgHFTe0RATChgcFBVfVMAxgEk2gYAwNgwgNL7L5OFVgRMfmi1D+H0geGv6+LvToYmCqoYfcfpf5tnS4w/H0dHlj4dAqJEgMl0gEmoaCuV5bMfRcATAWT6EmOksEEAAa4/BUdOdiiA0x/OglMslBggPs6fWDY+7qua79lsRejLT4mUb2L0sFUPGASEea+7ovdRzONxf/ceFtdACZfhPlYEwssAJPaificujVq7+ovaWiCYAoABrv8FSnd0+lf/oJw8UKCElGKH2vqA8Nd/q5d9qEqrnNn2iGYREPvRkBMIGBH9UH5Yblfd9pr68bdOUwAUCIKwAS4XsEBqywwPt9yf+yWU2fFxNL8dG18RQMCk6iiO0oMlCj24mMB8VV2R4QSWA6zxKQPqiJPBMUkCrhGsSWm15RnFxdtOuWvLpcEBr38NWAFnH0BMAlQIgrCBLivs3V/2/74itfCQClg8kVpYBIFALM1p3Y1ZDoFA8ODMmDhxxK7FKZTvAiAKeiYwFaeS+0DLVEexDVzwOCXv3my5V8tJ8+GTidIBJlOAdmSa8uGXVhMAREeUwgwO+ta3NCEBxUQBWCCfFtn696W+AwfReDRhEV4UFPzZMA62n/kqfVOr8A0akitiAIwQb6vM1i9BlMAMBAmX6V2In/4wDfZS+MX9VZQIlKYTgGYDBhPKr5HPJLNrl2dEqZoUXGmkwFjSDlMfMyA3/50QIkIjwn/Wi+HPxHHY1KJkKDSxyQzTGFRn8SEuvw1UCKyrc4wKfY3MYY/bDoZKKV+JQbyQ9KgDFOv64khU1yjhtZeIj4HO24P4oVmmHxVDKs7Tvw+WJNtdQaqAEz5gDXR6PIZtfYgHppNJ2+De1ZZVv8ijXt81iDb6mQ2nYJBiUaXT3+IsiwjRnHVtrr82XQKrpNt0b/AVtl0EhmmwlqVA1Y1fNpgm0621cWM/zsOzgHrnmLN9iBu0ylSzd2u7gFjPNW21dl0ilS1AMZY+nGtNp0MU4G1cv0EsG5kZdxtm0621T1gt7ky50kAyyGrW2ugbDo9YGtzlvIA68+dMUw2nQI7w/X3A5PIBnBdhsmm0312nRsoLXmB5ZCVczcMlGH6n25w5dKQBOZDVsXdNEwuwyS7yVUJOwJYfmQjw7dLm04lUBc3MmclHJh4Jmsr1elkmERt3ABhJRyY+HW5hrtjD+Il2x1unfi1WAAwEf+ByrgWw1RytfQ4RI0KTCLrx1VzzbbV9fmauerc9Y86MIltELeau9xnppN1hVvNPRxgQQGYxDaQm8w1cl9zF7ku7lZy08m6xXVxF7nDXCM3WR6YFtY/g9j2sjS1K/4AAAAASUVORK5CYII=">
</a>
</div>
</div>
</nav>
</div>
{% highlight html %}
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
{% endhighlight %}
<h2 id="navbar-forms">Forms</h2> <h2 id="navbar-forms">Forms</h2>
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p> <p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p> <p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
@ -147,7 +177,7 @@
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -192,7 +222,7 @@
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -221,7 +251,7 @@
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -246,7 +276,7 @@
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -282,7 +312,7 @@
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --> <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -326,7 +356,7 @@ body { padding-top: 70px; }
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --> <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -371,7 +401,7 @@ body { padding-bottom: 70px; }
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --> <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -407,7 +437,7 @@ body { padding-bottom: 70px; }
<div class="container-fluid"> <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>

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

@ -6,14 +6,14 @@
<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"> <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
@ -27,14 +27,14 @@
<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"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
@ -42,14 +42,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" style="max-width: 300px;"> <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked" role="tablist">
... ...
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -62,23 +62,23 @@
<p>As of v7.0.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 v7.0.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>
</div> </div>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-tabs nav-justified"> <ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
</ul> </ul>
<br> <br>
<ul class="nav nav-pills nav-justified"> <ul class="nav nav-pills nav-justified" role="tablist">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs nav-justified"> <ul class="nav nav-tabs nav-justified" role="tablist">
... ...
</ul> </ul>
<ul class="nav nav-pills nav-justified"> <ul class="nav nav-pills nav-justified" role="tablist">
... ...
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -93,14 +93,14 @@
</div> </div>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills"> <ul class="nav nav-pills" role="tablist">
<li><a href="#">Clickable link</a></li> <li><a href="#">Clickable link</a></li>
<li><a href="#">Clickable link</a></li> <li><a href="#">Clickable link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li> <li class="disabled"><a href="#">Disabled link</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills"> <ul class="nav nav-pills" role="tablist">
... ...
<li class="disabled"><a href="#">Disabled link</a></li> <li class="disabled"><a href="#">Disabled link</a></li>
... ...
@ -113,7 +113,7 @@
<h3>Tabs with dropdowns</h3> <h3>Tabs with dropdowns</h3>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li> <li><a href="#">Help</a></li>
<li class="dropdown"> <li class="dropdown">
@ -131,13 +131,13 @@
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs" role="tablist">
... ...
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
... ...
</ul> </ul>
</li> </li>
@ -147,7 +147,7 @@
<h3>Pills with dropdowns</h3> <h3>Pills with dropdowns</h3>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li> <li><a href="#">Help</a></li>
<li class="dropdown"> <li class="dropdown">
@ -165,13 +165,13 @@
</ul> </ul>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills"> <ul class="nav nav-pills" role="tablist">
... ...
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
... ...
</ul> </ul>
</li> </li>

1
docs/_includes/components/panels.html
View File

@ -22,6 +22,7 @@
<h3 id="panels-heading">Panel with heading</h3> <h3 id="panels-heading">Panel with heading</h3>
<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p> <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
<p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
<div class="bs-example"> <div class="bs-example">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div> <div class="panel-heading">Panel heading without title</div>

46
docs/_includes/components/progress-bars.html
View File

@ -120,60 +120,60 @@
<h3 id="progress-striped">Striped</h3> <h3 id="progress-striped">Striped</h3>
<p>Uses a gradient to create a striped effect. Not available in IE8.</p> <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-example"> <div class="bs-example">
<div class="progress progress-striped" > <div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span> <span class="sr-only">40% Complete (success)</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span> <span class="sr-only">20% Complete</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span> <span class="sr-only">60% Complete (warning)</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span> <span class="sr-only">80% Complete (danger)</span>
</div> </div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span> <span class="sr-only">40% Complete (success)</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span> <span class="sr-only">20% Complete</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span> <span class="sr-only">60% Complete (warning)</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span> <span class="sr-only">80% Complete (danger)</span>
</div> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="progress-animated">Animated</h3> <h3 id="progress-animated">Animated</h3>
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p> <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
<div class="bs-example"> <div class="bs-example">
<div class="progress progress-striped active"> <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="progress progress-striped active"> <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span> <span class="sr-only">45% Complete</span>
</div> </div>
</div> </div>
@ -186,7 +186,7 @@
<div class="progress-bar progress-bar-success" style="width: 35%"> <div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span> <span class="sr-only">35% Complete (success)</span>
</div> </div>
<div class="progress-bar progress-bar-warning" style="width: 20%"> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span> <span class="sr-only">20% Complete (warning)</span>
</div> </div>
<div class="progress-bar progress-bar-danger" style="width: 10%"> <div class="progress-bar progress-bar-danger" style="width: 10%">
@ -199,7 +199,7 @@
<div class="progress-bar progress-bar-success" style="width: 35%"> <div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span> <span class="sr-only">35% Complete (success)</span>
</div> </div>
<div class="progress-bar progress-bar-warning" style="width: 20%"> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span> <span class="sr-only">20% Complete (warning)</span>
</div> </div>
<div class="progress-bar progress-bar-danger" style="width: 10%"> <div class="progress-bar progress-bar-danger" style="width: 10%">

2
docs/_includes/components/responsive-embed.html
View File

@ -2,7 +2,7 @@
<h1 id="responsive-embed" class="page-header">Responsive embed</h1> <h1 id="responsive-embed" class="page-header">Responsive embed</h1>
<p>Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.</p> <p>Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.</p>
<p>Rules are directly apply to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code> and <code>&lt;object&gt;</code> elements, optionally use of an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p> <p>Rules are directly applied to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code>, and <code>&lt;object&gt;</code> elements; optionally use an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
<p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code>&lt;iframe&gt;</code>s as we override that for you.</p> <p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code>&lt;iframe&gt;</code>s as we override that for you.</p>
<div class="bs-example"> <div class="bs-example">
<div class="embed-responsive embed-responsive-16by9"> <div class="embed-responsive embed-responsive-16by9">

8
docs/_includes/components/thumbnails.html
View File

@ -46,7 +46,7 @@
<div class="row"> <div class="row">
<div class="col-sm-6 col-md-4"> <div class="col-sm-6 col-md-4">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail"> <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@ -56,7 +56,7 @@
</div> </div>
<div class="col-sm-6 col-md-4"> <div class="col-sm-6 col-md-4">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail"> <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@ -66,7 +66,7 @@
</div> </div>
<div class="col-sm-6 col-md-4"> <div class="col-sm-6 col-md-4">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail"> <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@ -80,7 +80,7 @@
<div class="row"> <div class="row">
<div class="col-sm-6 col-md-4"> <div class="col-sm-6 col-md-4">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt="..."> <img data-src="holder.js/300x300" alt="...">
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>...</p> <p>...</p>

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

@ -88,7 +88,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 progammatically.</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 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>
@ -173,6 +173,6 @@
<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>
<p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a Firefox bug</a> that prevents us from setting the <code>line-height</code> of <code>&lt;input&gt;</code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p> <p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox &lt;30</a> that prevents us from setting the <code>line-height</code> of <code>&lt;input&gt;</code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
</div> </div>
</div> </div>

6
docs/_includes/css/code.html
View File

@ -13,10 +13,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="code-user-input">User input</h2> <h2 id="code-user-input">User input</h2>
<p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p> <p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
<div class="bs-example"> <div class="bs-example">
To switch directories, type <kbd>cd</kbd> followed by the name of the directory. To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</div> </div>
{% highlight html %} {% highlight html %}
To switch directories, type <kbd>cd</kbd> followed by the name of the directory. To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
{% endhighlight %} {% endhighlight %}
<h2 id="code-block">Basic block</h2> <h2 id="code-block">Basic block</h2>

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

@ -49,17 +49,17 @@
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-default">Submit</button>
</form> </form>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
<h4>Don't mix form groups with input groups</h4> <h4>Don't mix form groups with input groups</h4>
<p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p> <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
</div> </div>
<h2 id="forms-inline">Inline form</h2> <h2 id="forms-inline">Inline form</h2>
<p>Add <code>.form-inline</code> to your <code>&lt;form&gt;</code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p> <p>Add <code>.form-inline</code> to your <code>&lt;form&gt;</code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4> <h4>Requires custom widths</h4>
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p> <p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
</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>
@ -95,6 +95,12 @@
<label class="sr-only" for="exampleInputEmail2">Email address</label> <label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div> </div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group"> <div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label> <label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
@ -207,7 +213,8 @@
{% endhighlight %} {% endhighlight %}
<h3>Checkboxes and radios</h3> <h3>Checkboxes and radios</h3>
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p> <p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
<p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code>&lt;label&gt;</code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code>&lt;fieldset&gt;</code>.</p>
<h4>Default (stacked)</h4> <h4>Default (stacked)</h4>
<div class="bs-example"> <div class="bs-example">
<form role="form"> <form role="form">
@ -217,6 +224,12 @@
Option one is this and that&mdash;be sure to include why it's great Option one is this and that&mdash;be sure to include why it's great
</label> </label>
</div> </div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<br> <br>
<div class="radio"> <div class="radio">
<label> <label>
@ -230,6 +243,12 @@
Option two can be something else and selecting it will deselect option one Option two can be something else and selecting it will deselect option one
</label> </label>
</div> </div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</form> </form>
</div><!-- /.bs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
@ -239,6 +258,12 @@
Option one is this and that&mdash;be sure to include why it's great Option one is this and that&mdash;be sure to include why it's great
</label> </label>
</div> </div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio"> <div class="radio">
<label> <label>
@ -252,9 +277,15 @@
Option two can be something else and selecting it will deselect option one Option two can be something else and selecting it will deselect option one
</label> </label>
</div> </div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
{% endhighlight %} {% endhighlight %}
<h4>Inline checkboxes</h4> <h4>Inline checkboxes and radios</h4>
<p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p> <p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p>
<div class="bs-example"> <div class="bs-example">
<form role="form"> <form role="form">
@ -268,6 +299,18 @@
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label> </label>
</form> </form>
<br>
<form role="form">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</form>
</div><!-- /.bs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<label class="checkbox-inline"> <label class="checkbox-inline">
@ -279,6 +322,16 @@
<label class="checkbox-inline"> <label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label> </label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
{% endhighlight %} {% endhighlight %}
<h3>Selects</h3> <h3>Selects</h3>
@ -468,6 +521,30 @@
<label class="control-label" for="inputError1">Input with error</label> <label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1"> <input type="text" class="form-control" id="inputError1">
</div> </div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
</form> </form>
</div><!-- /.bs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
@ -483,13 +560,37 @@
<label class="control-label" for="inputError1">Input with error</label> <label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1"> <input type="text" class="form-control" id="inputError1">
</div> </div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
{% endhighlight %} {% endhighlight %}
<h3>With optional icons</h3> <h3>With optional icons</h3>
<p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p> <p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p>
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
<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. For inputs without labels, adjust the <code>top</code>value. 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-example"> <div class="bs-example">
<form role="form"> <form role="form">
@ -528,7 +629,7 @@
</div> </div>
{% endhighlight %} {% endhighlight %}
<p>Optional icons also work on horizontal and inline forms.</p> <h4>Optional icons in horizontal and inline forms</h4>
<div class="bs-example"> <div class="bs-example">
<form class="form-horizontal" role="form"> <form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback"> <div class="form-group has-success has-feedback">
@ -571,6 +672,23 @@
</form> </form>
{% endhighlight %} {% endhighlight %}
<h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
<p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p>
<div class="bs-example">
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
{% highlight html %}
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
{% endhighlight %}
<h2 id="forms-control-sizes">Control sizing</h2> <h2 id="forms-control-sizes">Control sizing</h2>
<p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p> <p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
@ -606,6 +724,42 @@
<select class="form-control input-sm">...</select> <select class="form-control input-sm">...</select>
{% endhighlight %} {% endhighlight %}
<h3>Horizontal form group sizes</h3>
<p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
<div class="bs-example">
<form class="form-horizontal" role="form">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<form class="form-horizontal" role="form">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
{% endhighlight %}
<h3>Column sizing</h3> <h3>Column sizing</h3>
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p> <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<div class="bs-example"> <div class="bs-example">

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

@ -13,6 +13,7 @@
<li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li> <li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li>
<li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.</li> <li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.</li>
<li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li> <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
<li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</li>
<li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</li> <li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</li>
</ul> </ul>
<p>Look to the examples for applying these principles to your code.</p> <p>Look to the examples for applying these principles to your code.</p>
@ -67,49 +68,49 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<th>Grid behavior</th> <th class="text-nowrap">Grid behavior</th>
<td>Horizontal at all times</td> <td>Horizontal at all times</td>
<td colspan="3">Collapsed to start, horizontal above breakpoints</td> <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
</tr> </tr>
<tr> <tr>
<th>Container width</th> <th class="text-nowrap">Container width</th>
<td>None (auto)</td> <td>None (auto)</td>
<td>750px</td> <td>750px</td>
<td>970px</td> <td>970px</td>
<td>1170px</td> <td>1170px</td>
</tr> </tr>
<tr> <tr>
<th>Class prefix</th> <th class="text-nowrap">Class prefix</th>
<td><code>.col-xs-</code></td> <td><code>.col-xs-</code></td>
<td><code>.col-sm-</code></td> <td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td> <td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td> <td><code>.col-lg-</code></td>
</tr> </tr>
<tr> <tr>
<th># of columns</th> <th class="text-nowrap"># of columns</th>
<td colspan="4">12</td> <td colspan="4">12</td>
</tr> </tr>
<tr> <tr>
<th>Column width</th> <th class="text-nowrap">Column width</th>
<td class="text-muted">Auto</td> <td class="text-muted">Auto</td>
<td>~62px</td> <td>~62px</td>
<td>~81px</td> <td>~81px</td>
<td>~97px</td> <td>~97px</td>
</tr> </tr>
<tr> <tr>
<th>Gutter width</th> <th class="text-nowrap">Gutter width</th>
<td colspan="4">30px (15px on each side of a column)</td> <td colspan="4">30px (15px on each side of a column)</td>
</tr> </tr>
<tr> <tr>
<th>Nestable</th> <th class="text-nowrap">Nestable</th>
<td colspan="4">Yes</td> <td colspan="4">Yes</td>
</tr> </tr>
<tr> <tr>
<th>Offsets</th> <th class="text-nowrap">Offsets</th>
<td colspan="4">Yes</td> <td colspan="4">Yes</td>
</tr> </tr>
<tr> <tr>
<th>Column ordering</th> <th class="text-nowrap">Column ordering</th>
<td colspan="4">Yes</td> <td colspan="4">Yes</td>
</tr> </tr>
</tbody> </tbody>
@ -252,6 +253,23 @@
<div class="clearfix visible-xs-block"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div> </div>
{% endhighlight %}
<h3 id="grid-example-wrapping">Example: Column wrapping</h3>
<p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
{% endhighlight %} {% endhighlight %}
<h3 id="grid-responsive-resets">Responsive column resets</h3> <h3 id="grid-responsive-resets">Responsive column resets</h3>
@ -329,30 +347,30 @@
<h3 id="grid-nesting">Nesting columns</h3> <h3 id="grid-nesting">Nesting columns</h3>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12 or less.</p> <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-9"> <div class="col-sm-9">
Level 1: .col-md-9 Level 1: .col-sm-9
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-6"> <div class="col-xs-8 col-sm-6">
Level 2: .col-md-6 Level 2: .col-xs-8 .col-sm-6
</div> </div>
<div class="col-md-6"> <div class="col-xs-4 col-sm-6">
Level 2: .col-md-6 Level 2: .col-xs-4 .col-sm-6
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-md-9"> <div class="col-sm-9">
Level 1: .col-md-9 Level 1: .col-sm-9
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-xs-8 col-sm-6">
Level 2: .col-md-6 Level 2: .col-xs-8 .col-sm-6
</div> </div>
<div class="col-md-6"> <div class="col-xs-4 col-sm-6">
Level 2: .col-md-6 Level 2: .col-xs-4 .col-sm-6
</div> </div>
</div> </div>
</div> </div>

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

@ -40,15 +40,18 @@
<p class="bg-warning">...</p> <p class="bg-warning">...</p>
<p class="bg-danger">...</p> <p class="bg-danger">...</p>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-info">
<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>
</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>
<div class="bs-example"> <div class="bs-example">
<p><button type="button" class="close" aria-hidden="true">&times;</button></p> <p><button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></p>
</div> </div>
{% highlight html %} {% highlight html %}
<button type="button" class="close" aria-hidden="true">&times;</button> <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
{% endhighlight %} {% endhighlight %}
@ -113,7 +116,7 @@
<h3 id="helper-classes-clearfix">Clearfix</h3> <h3 id="helper-classes-clearfix">Clearfix</h3>
<p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p> <p>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
{% highlight html %} {% highlight html %}
<!-- Usage as a class --> <!-- Usage as a class -->
<div class="clearfix">...</div> <div class="clearfix">...</div>

4
docs/_includes/css/images.html
View File

@ -3,6 +3,10 @@
<h2 id="images-responsive">Responsive images</h2> <h2 id="images-responsive">Responsive images</h2>
<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p> <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
<div class="bs-callout bs-callout-warning">
<h4>SVG images and IE 8-10</h4>
<p>In Internet Explorer IE 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
</div>
{% highlight html %} {% highlight html %}
<img src="..." class="img-responsive" alt="Responsive image"> <img src="..." class="img-responsive" alt="Responsive image">
{% endhighlight %} {% endhighlight %}

16
docs/_includes/css/less.html
View File

@ -7,7 +7,7 @@
<h2 id="less-bootstrap">Compiling Bootstrap</h2> <h2 id="less-bootstrap">Compiling Bootstrap</h2>
<p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="https://github.com/twbs/bootstrap#compiling-css-and-javascript">visit the README</a> for how to setup your development environment to run the necessary commands.</p> <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="../getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
<p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p> <p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
<h2 id="less-variables">Variables</h2> <h2 id="less-variables">Variables</h2>
@ -28,7 +28,7 @@
@gray-darker: lighten(#000, 13.5%); // #222 @gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333 @gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555 @gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 60%); // #999 @gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee @gray-lighter: lighten(#000, 93.5%); // #eee
{% endhighlight %} {% endhighlight %}
@ -76,7 +76,7 @@
{% highlight scss %} {% highlight scss %}
// Variables // Variables
@link-color: @brand-primary; @link-color: @brand-primary;
@link-color-hover: darken(@link-color, 15%); @link-hover-color: darken(@link-color, 15%);
// Usage // Usage
a { a {
@ -84,12 +84,12 @@ a {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: @link-color-hover; color: @link-hover-color;
text-decoration: underline; text-decoration: underline;
} }
} }
{% endhighlight %} {% endhighlight %}
<p>Note that the <code>@link-color-hover</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p> <p>Note that the <code>@link-hover-color</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
<h3 id="less-variables-typography">Typography</h3> <h3 id="less-variables-typography">Typography</h3>
<p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.</p> <p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.</p>
@ -378,10 +378,10 @@ a {
{% highlight scss %} {% highlight scss %}
#gradient > .striped(#333; 45deg); #gradient > .striped(#333; 45deg);
{% endhighlight %} {% endhighlight %}
<p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:</p> <p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:</p>
{% highlight scss %} {% highlight scss %}
#gradient > .vertical-three-colors(#777; #333; .25; #000); #gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; .25; #000); #gradient > .horizontal-three-colors(#777; #333; 25%; #000);
{% endhighlight %} {% endhighlight %}
<p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using the <code>.reset-filter()</code> mixin alongside <code>background-image: none;</code>.</p> <p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using the <code>.reset-filter()</code> mixin alongside <code>background-image: none;</code>.</p>

6
docs/_includes/css/responsive-utilities.html
View File

@ -93,7 +93,7 @@
</table> </table>
</div> </div>
<p>As of v3.2, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p> <p>As of v3.2.0, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
@ -119,7 +119,7 @@
</table> </table>
</div> </div>
<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p> <p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
<p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code>&lt;table&gt;</code>-related elements.</p> <p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2.0</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code>&lt;table&gt;</code>-related elements.</p>
<h2 id="responsive-utilities-print">Print classes</h2> <h2 id="responsive-utilities-print">Print classes</h2>
<p>Similar to the regular responsive classes, use these for toggling content for print.</p> <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
@ -150,7 +150,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.1.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code>&lt;table&gt;</code>-related elements.</p> <p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.2.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code>&lt;table&gt;</code>-related elements.</p>
<h2 id="responsive-utilities-tests">Test cases</h2> <h2 id="responsive-utilities-tests">Test cases</h2>

20
docs/_includes/css/rtl.html
View File

@ -1,20 +0,0 @@
<div class="bs-docs-section">
<h1 id="rtl" class="page-header">RTL</h1>
<p class="lead">As of Bootstrap 3.2, a right-to-left version of Bootstrap ships as part of the repository. It's powered by Twitter's <a href="https://github.com/twitter/css-flip">CSS Flip project</a> and is generated via our Gruntfile.</p>
<h2 id="rtl-how-to">How to use</h2>
<p>Bootstrap is by default a left-to-right project. For right-to-left projects, you'll need to set your language and replace the default Bootstrap CSS with an RTL version. First, set your language and text direction:</p>
{% highlight html %}
<!-- Example: Arabic language with direction set to RTL -->
<html lang="ar" dir="rtl">
{% endhighlight %}
<p>Then, include the right-to-left CSS file in place of the default Bootstrap CSS:</p>
{% highlight html %}
<!-- Bootstrap RTL -->
<link rel="stylesheet" href="bootstrap-rtl.css">
{% endhighlight %}
<p>Alternatively, you may use the minified RTL file, <code>bootstrap-rtl.min.css</code>.</p>
<h2 id="rtl-css-flip">CSS Flip</h2>
<p><a href="https://github.com/twitter/css-flip">CSS Flip</a> is a project for converting left-to-right CSS files into right-to-left CSS files. We use it in our Gruntfile to automate the generation of Bootstrap's RTL CSS files.</p>
</div>

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

@ -348,7 +348,19 @@
<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 up to 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>
<div class="bs-callout bs-callout-warning">
<h4>Firefox and fieldsets</h4>
<p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
{% highlight css %}
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
{% endhighlight %}
<p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
</div>
<div class="bs-example"> <div class="bs-example">
<div class="table-responsive"> <div class="table-responsive">
<table class="table"> <table class="table">

22
docs/_includes/css/type.html
View File

@ -107,12 +107,12 @@
<!-- Inline text elements --> <!-- Inline text elements -->
<h2 id="type-inline-text">Inline text elements</h2> <h2 id="type-inline-text">Inline text elements</h2>
<h3>Marked text</h3> <h3>Marked text</h3>
<p>For indicating blocks of text that have been deleted use the <code>&lt;mark&gt;</code> tag.</p> <p>For highlighting a run of text due to its relevance in another context, use the <code>&lt;mark&gt;</code> tag.</p>
<div class="bs-example"> <div class="bs-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p> <p>You can use the mark tag to <mark>highlight</mark> text.</p>
</div> </div>
{% highlight html %} {% highlight html %}
<mark>This line of text is meant to be treated as deleted text.</mark> You can use the mark tag to <mark>highlight</mark> text.
{% endhighlight %} {% endhighlight %}
@ -146,10 +146,10 @@
<h3>Underlined text</h3> <h3>Underlined text</h3>
<p>To underline text use the <code>&lt;u&gt;</code> tag.</p> <p>To underline text use the <code>&lt;u&gt;</code> tag.</p>
<div class="bs-example"> <div class="bs-example">
<p><u>This line of text is will render as underlined</u></p> <p><u>This line of text will render as underlined</u></p>
</div> </div>
{% highlight html %} {% highlight html %}
<u>This line of text is will render as underlined</u> <u>This line of text will render as underlined</u>
{% endhighlight %} {% endhighlight %}
<p>Make use of HTML's default emphasis tags with lightweight styles.</p> <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
@ -195,14 +195,28 @@
<p class="text-center">Center aligned text.</p> <p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p> <p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p> <p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
</div> </div>
{% highlight html %} {% highlight html %}
<p class="text-left">Left aligned text.</p> <p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p> <p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p> <p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p> <p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
{% endhighlight %} {% endhighlight %}
<h2 id="type-transformation">Transformation classes</h2>
<p>Transform text in components with text capitalization classes.</p>
<div class="bs-example">
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
</div>
{% highlight html %}
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
{% endhighlight %}
<!-- Abbreviations --> <!-- Abbreviations -->
<h2 id="type-abbreviations">Abbreviations</h2> <h2 id="type-abbreviations">Abbreviations</h2>

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

@ -3,25 +3,29 @@
<h2 id="colors">Colors</h2> <h2 id="colors">Colors</h2>
<p>Gray and brand colors for use across Bootstrap.</p> <p>Gray and brand colors for use across Bootstrap.</p>
<div class="row"> <div class="row">
<div class="bs-customizer-input">
<label for="input-@gray-base">@gray-base</label>
<input id="input-@gray-base" type="text" value=" #000" data-var="@gray-base" class="form-control"/>
</div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@gray-darker">@gray-darker</label> <label for="input-@gray-darker">@gray-darker</label>
<input id="input-@gray-darker" type="text" value="lighten(#000, 13.5%)" data-var="@gray-darker" class="form-control"/> <input id="input-@gray-darker" type="text" value="lighten(@gray-base, 13.5%)" data-var="@gray-darker" class="form-control"/>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@gray-dark">@gray-dark</label> <label for="input-@gray-dark">@gray-dark</label>
<input id="input-@gray-dark" type="text" value="lighten(#000, 20%)" data-var="@gray-dark" class="form-control"/> <input id="input-@gray-dark" type="text" value="lighten(@gray-base, 20%)" data-var="@gray-dark" class="form-control"/>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@gray">@gray</label> <label for="input-@gray">@gray</label>
<input id="input-@gray" type="text" value="lighten(#000, 33.5%)" data-var="@gray" class="form-control"/> <input id="input-@gray" type="text" value="lighten(@gray-base, 33.5%)" data-var="@gray" class="form-control"/>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@gray-light">@gray-light</label> <label for="input-@gray-light">@gray-light</label>
<input id="input-@gray-light" type="text" value="lighten(#000, 60%)" data-var="@gray-light" class="form-control"/> <input id="input-@gray-light" type="text" value="lighten(@gray-base, 46.7%)" data-var="@gray-light" class="form-control"/>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@gray-lighter">@gray-lighter</label> <label for="input-@gray-lighter">@gray-lighter</label>
<input id="input-@gray-lighter" type="text" value="lighten(#000, 93.5%)" data-var="@gray-lighter" class="form-control"/> <input id="input-@gray-lighter" type="text" value="lighten(@gray-base, 93.5%)" data-var="@gray-lighter" class="form-control"/>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@brand-primary">@brand-primary</label> <label for="input-@brand-primary">@brand-primary</label>
@ -502,6 +506,7 @@
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@dropdown-caret-color">@dropdown-caret-color</label> <label for="input-@dropdown-caret-color">@dropdown-caret-color</label>
<input id="input-@dropdown-caret-color" type="text" value="#000" data-var="@dropdown-caret-color" class="form-control"/> <input id="input-@dropdown-caret-color" type="text" value="#000" data-var="@dropdown-caret-color" class="form-control"/>
<p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p>
</div> </div>
</div> </div>
<h2 id="media-queries-breakpoints">Media queries breakpoints</h2> <h2 id="media-queries-breakpoints">Media queries breakpoints</h2>
@ -510,18 +515,22 @@
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-xs">@screen-xs</label> <label for="input-@screen-xs">@screen-xs</label>
<input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/> <input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.1</p>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-xs-min">@screen-xs-min</label> <label for="input-@screen-xs-min">@screen-xs-min</label>
<input id="input-@screen-xs-min" type="text" value="@screen-xs" data-var="@screen-xs-min" class="form-control"/> <input id="input-@screen-xs-min" type="text" value="@screen-xs" data-var="@screen-xs-min" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.0</p>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-phone">@screen-phone</label> <label for="input-@screen-phone">@screen-phone</label>
<input id="input-@screen-phone" type="text" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/> <input id="input-@screen-phone" type="text" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-sm">@screen-sm</label> <label for="input-@screen-sm">@screen-sm</label>
<input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/> <input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.1</p>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-sm-min">@screen-sm-min</label> <label for="input-@screen-sm-min">@screen-sm-min</label>
@ -530,10 +539,12 @@
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-tablet">@screen-tablet</label> <label for="input-@screen-tablet">@screen-tablet</label>
<input id="input-@screen-tablet" type="text" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/> <input id="input-@screen-tablet" type="text" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-md">@screen-md</label> <label for="input-@screen-md">@screen-md</label>
<input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/> <input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-md</code> as of v3.0.1</p>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-md-min">@screen-md-min</label> <label for="input-@screen-md-min">@screen-md-min</label>
@ -542,10 +553,12 @@
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-desktop">@screen-desktop</label> <label for="input-@screen-desktop">@screen-desktop</label>
<input id="input-@screen-desktop" type="text" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/> <input id="input-@screen-desktop" type="text" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-lg">@screen-lg</label> <label for="input-@screen-lg">@screen-lg</label>
<input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/> <input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.1</p>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-lg-min">@screen-lg-min</label> <label for="input-@screen-lg-min">@screen-lg-min</label>
@ -554,6 +567,7 @@
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-lg-desktop">@screen-lg-desktop</label> <label for="input-@screen-lg-desktop">@screen-lg-desktop</label>
<input id="input-@screen-lg-desktop" type="text" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/> <input id="input-@screen-lg-desktop" type="text" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@screen-xs-max">@screen-xs-max</label> <label for="input-@screen-xs-max">@screen-xs-max</label>
@ -716,7 +730,7 @@
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@navbar-inverse-color">@navbar-inverse-color</label> <label for="input-@navbar-inverse-color">@navbar-inverse-color</label>
<input id="input-@navbar-inverse-color" type="text" value="@gray-light" data-var="@navbar-inverse-color" class="form-control"/> <input id="input-@navbar-inverse-color" type="text" value="lighten(@gray-light, 12%)" data-var="@navbar-inverse-color" class="form-control"/>
</div> </div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@navbar-inverse-bg">@navbar-inverse-bg</label> <label for="input-@navbar-inverse-bg">@navbar-inverse-bg</label>
@ -1690,6 +1704,11 @@
<h2 id="type">Type</h2> <h2 id="type">Type</h2>
<p></p> <p></p>
<div class="row"> <div class="row">
<div class="bs-customizer-input">
<label for="input-@component-offset-horizontal">@component-offset-horizontal</label>
<input id="input-@component-offset-horizontal" type="text" value="180px" data-var="@component-offset-horizontal" class="form-control"/>
<p class="help-block">Horizontal offset for forms and lists.</p>
</div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@text-muted">@text-muted</label> <label for="input-@text-muted">@text-muted</label>
<input id="input-@text-muted" type="text" value="@gray-light" data-var="@text-muted" class="form-control"/> <input id="input-@text-muted" type="text" value="@gray-light" data-var="@text-muted" class="form-control"/>
@ -1725,19 +1744,15 @@
<input id="input-@page-header-border-color" type="text" value="@gray-lighter" data-var="@page-header-border-color" class="form-control"/> <input id="input-@page-header-border-color" type="text" value="@gray-lighter" data-var="@page-header-border-color" class="form-control"/>
<p class="help-block">Page header border color</p> <p class="help-block">Page header border color</p>
</div> </div>
</div> <div class="bs-customizer-input">
<h2 id="miscellaneous">Miscellaneous</h2> <label for="input-@dl-horizontal-offset">@dl-horizontal-offset</label>
<p></p> <input id="input-@dl-horizontal-offset" type="text" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control"/>
<div class="row"> <p class="help-block">Width of horizontal description list titles</p>
</div>
<div class="bs-customizer-input"> <div class="bs-customizer-input">
<label for="input-@hr-border">@hr-border</label> <label for="input-@hr-border">@hr-border</label>
<input id="input-@hr-border" type="text" value="@gray-lighter" data-var="@hr-border" class="form-control"/> <input id="input-@hr-border" type="text" value="@gray-lighter" data-var="@hr-border" class="form-control"/>
<p class="help-block">Horizontal line color.</p> <p class="help-block">Horizontal line color.</p>
</div> </div>
<div class="bs-customizer-input">
<label for="input-@component-offset-horizontal">@component-offset-horizontal</label>
<input id="input-@component-offset-horizontal" type="text" value="180px" data-var="@component-offset-horizontal" class="form-control"/>
<p class="help-block">Horizontal offset for forms and lists.</p>
</div>
</div> </div>
<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.--> <!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->

12
docs/_includes/footer.html
View File

@ -30,9 +30,19 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- 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.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
{% if site.github %}
<script src="../dist/js/bootstrap.min.js"></script> <script src="../dist/js/bootstrap.min.js"></script>
{% else %}
<script src="../dist/js/bootstrap.js"></script>
{% endif %}
{% if site.github %}
<script src="../assets/js/docs.min.js"></script> <script src="../assets/js/docs.min.js"></script>
{% else %}
<script src="../assets/js/vendor/holder.js"></script>
<script src="../assets/js/vendor/ZeroClipboard.min.js"></script>
<script src="../assets/js/src/application.js"></script>
{% endif %}
{% if page.slug == "customize" %} {% if page.slug == "customize" %}
<script src="../assets/js/customize.min.js"></script> <script src="../assets/js/customize.min.js"></script>
{% endif %} {% endif %}

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

@ -20,7 +20,7 @@
<tr> <tr>
<th>Android</th> <th>Android</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td> <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td> <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td> <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td> <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
<td class="text-muted">N/A</td> <td class="text-muted">N/A</td>
@ -106,13 +106,16 @@
<h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3> <h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3>
<p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p> <p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
<h3 id="support-ie8-font-face">Internet Explorer 8 and @font-face</h3>
<p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <a href="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p>
<h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3> <h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3>
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>&lt;meta&gt;</code> tag in your pages:</p> <p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>&lt;meta&gt;</code> tag in your pages:</p>
{% highlight html %} {% highlight html %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endhighlight %} {% endhighlight %}
<p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p> <p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
<p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p> <p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p> <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
<h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3> <h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
@ -141,7 +144,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
} }
{% endhighlight %} {% endhighlight %}
<p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p> <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
<p>As a heads up, we include this in the Bootstrap docs as an example.</p> <p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p>
<h3 id="support-safari-percentages">Safari percent rounding</h3> <h3 id="support-safari-percentages">Safari percent rounding</h3>
<p>As of Safari v7.0.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p> <p>As of Safari v7.0.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
@ -155,7 +158,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<h4>Overflow and scrolling</h4> <h4>Overflow and scrolling</h4>
<p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p> <p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p>
<h4>Virtual keyboards</h4> <h4>Virtual keyboards</h4>
<p>Also, note that if you're using inputs in your modal or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p> <p>Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
<h4>Navbar Dropdowns</h4> <h4>Navbar Dropdowns</h4>
<p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).</p> <p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).</p>
@ -173,14 +176,16 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<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>
<h4>Select menus</h4> <h4>Select menus</h4>
<p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p> <p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <a href="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
{% highlight html %} {% highlight html %}
<script> <script>
var nua = navigator.userAgent $(function () {
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1) var nua = navigator.userAgent
if (isAndroid) { var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
$('select.form-control').removeClass('form-control').css('width', '100%') if (isAndroid) {
} $('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script> </script>
{% endhighlight %} {% endhighlight %}
<p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p> <p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p>

8
docs/_includes/getting-started/download.html
View File

@ -8,21 +8,21 @@
<h3 id="download-bootstrap">Bootstrap</h3> <h3 id="download-bootstrap">Bootstrap</h3>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<p> <p>
<a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a> <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
</p> </p>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h3 id="download-source">Source code</h3> <h3 id="download-source">Source code</h3>
<p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="{{ site.repo }}#compiling-css-and-javascript">some setup.</a></strong></p> <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="#grunt">some setup.</a></strong></p>
<p> <p>
<a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source</a> <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
</p> </p>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h3 id="download-sass">Sass</h3> <h3 id="download-sass">Sass</h3>
<p><a href="{{ site.sass_repo }}">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p> <p><a href="{{ site.sass_repo }}">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p>
<p> <p>
<a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download Sass']);">Download Sass</a> <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a>
</p> </p>
</div> </div>
</div> </div>

4
docs/_includes/getting-started/examples.html
View File

@ -1,7 +1,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<h1 id="examples" class="page-header">Examples</h1> <h1 id="examples" class="page-header">Examples</h1>
<p class="lead">Build on the basic template above with Bootstrap's many components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p> <p class="lead">Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.</p>
<h3 id="examples-framework">Using the framework</h3> <h3 id="examples-framework">Using the framework</h3>
<div class="row bs-examples"> <div class="row bs-examples">
@ -119,7 +119,7 @@
<img src="../examples/screenshots/justified-nav.jpg" alt=""> <img src="../examples/screenshots/justified-nav.jpg" alt="">
</a> </a>
<h4>Justified nav</h4> <h4>Justified nav</h4>
<p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too WebKit friendly.</a></p> <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too Safari friendly.</a></p>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs"></div>

32
docs/_includes/getting-started/grunt.html Normal file
View File

@ -0,0 +1,32 @@
<div class="bs-docs-section">
<h1 id="grunt" class="page-header">Compiling CSS and JavaScript</h1>
<p class="lead">Bootstrap uses <a href="http://gruntjs.com">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p>
<h2 id="grunt-installing">Installing Grunt</h2>
<p>To install Grunt, you must <strong>first <a href="http://nodejs.org/download/">download and install node.js</a></strong> (which includes npm). npm stands for <a href="http://npmjs.org/">node packaged modules</a> and is a way to manage development dependencies through node.js.</p>
Then, from the command line:
<ol>
<li>Install <code>grunt-cli</code> globally with <code>npm install -g grunt-cli</code>.</li>
<li>Navigate to the root <code>/bootstrap/</code> directory, then run <code>npm install</code>. npm will look at the <a href="https://github.com/twbs/bootstrap/blob/master/package.json"><code>package.json</code></a> file and automatically install the necessary local dependencies listed there.</li>
</ol>
<p>When completed, you'll be able to run the various Grunt commands provided from the command line.</p>
<h2 id="grunt-commands">Available Grunt commands</h2>
<h3><code>grunt dist</code> (Just compile CSS and JavaScript)</h3>
<p>Regenerates the <code>/dist/</code> directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.</p>
<h3><code>grunt watch</code> (Watch)</h3>
<p>Watches the Less source files and automatically recompiles them to CSS whenever you save a change.</p>
<h3><code>grunt test</code> (Run tests)</h3>
<p>Runs <a href="http://jshint.com">JSHint</a> and runs the <a href="http://qunitjs.com">QUnit</a> tests headlessly in <a href="http://phantomjs.org">PhantomJS</a>.</p>
<h3><code>grunt</code> (Build absolutely everything and run tests)</h3>
<p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Usually only necessary if you're hacking on Bootstrap itself.</p>
<h2 id="grunt-troubleshooting">Troubleshooting</h2>
<p>Should you encounter problems with installing dependencies or running Grunt commands, first delete the <code>/node_modules/</code> directory generated by npm. Then, rerun <code>npm install</code>.</p>
</div>

6
docs/_includes/getting-started/template.html
View File

@ -19,15 +19,15 @@
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed --> <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
</body> </body>

10
docs/_includes/getting-started/translations.html
View File

@ -3,13 +3,9 @@
<p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.</p> <p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.</p>
<ul> <ul>
<li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li> {% for language in site.data.translations %}
<li><a href="http://www.oneskyapp.com/docs/bootstrap/fr">Bootstrap en Français (French)</a></li> <li><a href="{{ language.url }}" hreflang="{{ language.code }}">{{ language.description }} ({{ language.name }})</a></li>
<li><a href="http://holdirbootstrap.de/">Bootstrap auf Deutsch (German)</a></li> {% endfor %}
<li><a href="http://bootstrapk.com/BS3/">Bootstrap 한국어 (Korean)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
<li><a href="http://twbs.site-konstruktor.com.ua">Bootstrap ua Українською (Ukrainian)</a></li>
</ul> </ul>
<p><strong class="text-danger">We don't help organize or host translations, we just link to them.</strong></p> <p><strong class="text-danger">We don't help organize or host translations, we just link to them.</strong></p>
<p>Finished a new or better translation? Open a pull request to add it to our list.</p> <p>Finished a new or better translation? Open a pull request to add it to our list.</p>

44
docs/_includes/header.html
View File

@ -6,7 +6,7 @@
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<title> <title>
{% if page.title == "Bootstrap" %} {% if page.url == site.baseurl %}
{{ page.title }} {{ page.title }}
{% else %} {% else %}
{{ page.title }} &middot; Bootstrap {{ page.title }} &middot; Bootstrap
@ -14,29 +14,47 @@
</title> </title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
{% if site.github %}
<link href="../dist/css/bootstrap.min.css" rel="stylesheet"> <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
{% else %}
<link href="../dist/css/bootstrap.css" rel="stylesheet">
{% endif %}
{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
<!-- Optional Bootstrap Theme -->
{% if site.github %}
<link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
{% else %}
<link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.css" rel="stylesheet" id="bs-theme-stylesheet">
{% endif %}
{% endif %}
<!-- Documentation extras --> <!-- Documentation extras -->
{% if site.github %}
<link href="../assets/css/docs.min.css" rel="stylesheet"> <link href="../assets/css/docs.min.css" rel="stylesheet">
{% else %}
<link href="../assets/css/src/docs.css" rel="stylesheet">
<link href="../assets/css/src/pygments-manni.css" rel="stylesheet">
{% endif %}
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
<!-- Favicons --> <!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.ico"> <link rel="icon" href="/favicon.ico">
<script> <script>
var _gaq = _gaq || []; (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
_gaq.push(['_setAccount', 'UA-146052-10']); (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
_gaq.push(['_trackPageview']); m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
(function() { })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
var ga = document.createElement('script'); ga.async = true; ga('create', 'UA-146052-10', 'getbootstrap.com');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; ga('send', 'pageview');
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script> </script>

9
docs/_includes/js/affix.html
View File

@ -7,7 +7,7 @@
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2 id="affix-usage">Usage</h2> <h2 id="affix-usage">Usage</h2>
<p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong>In both situations, you must provide CSS for the positioning of your content.</strong></p> <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed content.</strong></p>
<h3>Positioning via CSS</h3> <h3>Positioning via CSS</h3>
<p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p> <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p>
@ -62,6 +62,13 @@
<td>10</td> <td>10</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td> <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
</tr> </tr>
<tr>
<td>target</td>
<td>selector | node | jQuery element</td>
<td>the <code>window</code> object</td>
<td>Specifies the target element of the affix.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.table-responsive --> </div><!-- /.table-responsive -->

71
docs/_includes/js/alerts.html Normal file
View File

@ -0,0 +1,71 @@
<div class="bs-docs-section">
<h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1>
<h2 id="alerts-examples">Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example">
<div class="alert alert-warning fade in" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
</div><!-- /example -->
<div class="bs-example">
<div class="alert alert-danger fade in" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<button type="button" class="btn btn-danger">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
</div><!-- /example -->
<h2 id="alerts-usage">Usage</h2>
<p>Enable dismissal of an alert via JavaScript:</p>
{% highlight js %}$(".alert").alert(){% endhighlight %}
<h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
{% highlight html %}<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>{% endhighlight %}
<h3>Methods</h3>
<h4>$().alert()</h4>
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
<h4>.alert('close')</h4>
<p>Closes an alert.</p>
{% highlight js %}$(".alert").alert('close'){% endhighlight %}
<h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>close.bs.alert</td>
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
</tr>
<tr>
<td>closed.bs.alert</td>
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
{% highlight js %}
$('#my-alert').on('closed.bs.alert', function () {
// do something…
})
{% endhighlight %}
</div>

26
docs/_includes/js/buttons.html
View File

@ -37,10 +37,14 @@
<h4>Checkbox</h4> <h4>Checkbox</h4>
<p>Add <code>data-toggle="buttons"</code> to a group of checkboxes for checkbox style toggling on btn-group.</p> <p>Add <code>data-toggle="buttons"</code> to a group of checkboxes for checkbox style toggling on btn-group.</p>
<div class="bs-callout bs-callout-warning">
<h4>Pre-checked options need <code>.active</code></h4>
<p>For pre-checked options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
</div>
<div class="bs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary active">
<input type="checkbox"> Option 1 <input type="checkbox" checked> Option 1 (pre-checked)
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="checkbox"> Option 2 <input type="checkbox"> Option 2
@ -52,8 +56,8 @@
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="btn-group" data-toggle="buttons"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary active">
<input type="checkbox"> Option 1 <input type="checkbox" checked> Option 1 (pre-checked)
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="checkbox"> Option 2 <input type="checkbox"> Option 2
@ -66,10 +70,14 @@
<h4>Radio</h4> <h4>Radio</h4>
<p>Add <code>data-toggle="buttons"</code> to a group of radio inputs for radio style toggling on btn-group.</p> <p>Add <code>data-toggle="buttons"</code> to a group of radio inputs for radio style toggling on btn-group.</p>
<div class="bs-callout bs-callout-warning">
<h4>Preselected options need <code>.active</code></h4>
<p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
</div>
<div class="bs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary active">
<input type="radio" name="options" id="option1"> Option 1 <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2 <input type="radio" name="options" id="option2"> Option 2
@ -81,8 +89,8 @@
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="btn-group" data-toggle="buttons"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary active">
<input type="radio" name="options" id="option1"> Option 1 <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label> </label>
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2 <input type="radio" name="options" id="option2"> Option 2
@ -136,7 +144,7 @@ $('.btn').button()
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
<p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p> <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
</div> </div>
<h4>$().button('reset')</h4> <h4>$().button('reset')</h4>

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

@ -10,7 +10,7 @@
<li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide"> <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
</div> </div>
@ -21,11 +21,13 @@
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide"> <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div> </div>
</div> </div>
<a class="left carousel-control" href="#carousel-example-generic" 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"></span>
<span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-generic" 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"></span>
<span class="sr-only">Next</span>
</a> </a>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
@ -39,22 +41,30 @@
</ol> </ol>
<!-- Wrapper for slides --> <!-- Wrapper for slides -->
<div class="carousel-inner"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<img src="..." alt="..."> <img src="..." alt="...">
<div class="carousel-caption"> <div class="carousel-caption">
... ...
</div> </div>
</div> </div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
... ...
</div> </div>
<!-- Controls --> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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"></span>
<span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-generic" 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"></span>
<span class="sr-only">Next</span>
</a> </a>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -73,7 +83,7 @@
<li data-target="#carousel-example-captions" data-slide-to="1"></li> <li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li> <li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image"> <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
<div class="carousel-caption"> <div class="carousel-caption">
@ -96,16 +106,18 @@
</div> </div>
</div> </div>
</div> </div>
<a class="left carousel-control" href="#carousel-example-captions" 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"></span>
<span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-captions" 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"></span>
<span class="sr-only">Next</span>
</a> </a>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="item active"> <div class="item">
<img src="..." alt="..."> <img src="..." alt="...">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>...</h3> <h3>...</h3>
@ -122,11 +134,11 @@
<h2 id="carousel-usage">Usage</h2> <h2 id="carousel-usage">Usage</h2>
<h3>Multiple carousels</h3> <h3>Multiple carousels</h3>
<p>Carousels require the use of an <code>id</code> on the outermost container, <code>.carousel</code>, for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p> <p>Carousels require the use of an <code>id</code> on the outermost container (the <code>.carousel</code>) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p>
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p> <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p>
<p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load.</p> <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load. <strong class="text-danger">It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.</strong></p>
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Call carousel manually with:</p> <p>Call carousel manually with:</p>
@ -197,6 +209,11 @@ $('.carousel').carousel({
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p> <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
<p>Both events have the following additional properties:</p>
<ul>
<li><code>direction</code>: The direction in which the carousel is sliding (either <code>"left"</code> or <code>"right"</code>).</li>
<li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
</ul>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>

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

@ -9,7 +9,7 @@
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -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="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -30,7 +30,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -42,7 +42,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 href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -59,10 +59,10 @@
<h3>Within pills</h3> <h3>Within pills</h3>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Regular link</a></li> <li class="active"><a href="#">Regular link</a></li>
<li class="dropdown"> <li class="dropdown">
<a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -72,7 +72,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <span class="caret"></span></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5"> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -82,7 +82,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a> <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <span class="caret"></span></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6"> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -96,7 +96,9 @@
<h2 id="dropdowns-usage">Usage</h2> <h2 id="dropdowns-usage">Usage</h2>
<p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item. When opened, the plugin also adds <code>.dropdown-backdrop</code> as a click area for closing dropdown menus when clicking outside the menu. Note: The <code>data-toggle=dropdown</code> attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.</p> <p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item.</p>
<p>On mobile devices, opening a dropdown adds a <code>.dropdown-backdrop</code> as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. <strong class="text-danger">This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.</strong></p>
<p>Note: The <code>data-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.</p>
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<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>

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

@ -24,7 +24,7 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <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">Modal title</h4> <h4 class="modal-title">Modal title</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -43,7 +43,7 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <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">Modal title</h4> <h4 class="modal-title">Modal title</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -66,8 +66,8 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <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="myModalLabel">Modal Heading</h4> <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<h4>Text in a modal</h4> <h4>Text in a modal</h4>
@ -117,7 +117,7 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <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="myModalLabel">Modal title</h4> <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -179,7 +179,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <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="myLargeModalLabel">Large modal</h4> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -193,7 +193,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <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="mySmallModalLabel">Small modal</h4> <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -259,7 +259,9 @@
<td>remote</td> <td>remote</td>
<td>path</td> <td>path</td>
<td>false</td> <td>false</td>
<td><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> <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>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>
{% endhighlight %} {% endhighlight %}
@ -320,7 +322,7 @@ $('#myModal').modal({
</tr> </tr>
<tr> <tr>
<td>loaded.bs.modal</td> <td>loaded.bs.modal</td>
<td>This event is fired when the modal has loaded content using the remote option.</td> <td>This event is fired when the modal has loaded content using the <code>remote</code> option.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

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

@ -45,7 +45,7 @@ $('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately $('#myModal').modal('show') // initializes and invokes show immediately
{% endhighlight %} {% endhighlight %}
<p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p> <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p>
<h3 id="js-noconflict">No conflict</h3> <h3 id="js-noconflict">No conflict</h3>
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p> <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>

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

@ -16,6 +16,10 @@
<h4>Popovers in button groups and input groups require special setting</h4> <h4>Popovers in button groups and input groups require special setting</h4>
<p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p> <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
</div> </div>
<div class="bs-callout bs-callout-warning">
<h4>Don't try to show popovers on hidden elements</h4>
<p>Invoking <code>$(...).popover('show')</code> when the target element is <code>display: none;</code> will cause the popover to be incorrectly positioned.</p>
</div>
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-info">
<h4>Popovers on disabled elements require wrapper elements</h4> <h4>Popovers on disabled elements require wrapper elements</h4>
<p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the popover to that <code>&lt;div&gt;</code> instead.</p> <p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the popover to that <code>&lt;div&gt;</code> instead.</p>
@ -69,8 +73,8 @@
{% endhighlight %} {% endhighlight %}
<h4>Four directions</h4> <h4>Four directions</h4>
<div class="bs-example tooltip-demo"> <div class="bs-example popover-demo">
<div class="bs-example-tooltips"> <div class="bs-example-popovers">
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left Popover on left
</button> </button>
@ -105,12 +109,12 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
{% endhighlight %} {% endhighlight %}
<h4>Dismiss on next click</h4> <h4>Dismiss on next click</h4>
<p>Use the <code>focus</code> trigger to dismiss popovers on their next click.</p> <p>Use the <code>focus</code> trigger to dismiss popovers on the next click that the user makes.</p>
<div class="bs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button> <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
</div> </div>
{% highlight html %} {% highlight html %}
<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button> <button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
{% endhighlight %} {% endhighlight %}
{% highlight js %} {% highlight js %}
$('.popover-dismiss').popover({ $('.popover-dismiss').popover({
@ -135,9 +139,9 @@ $('.popover-dismiss').popover({
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th> <th style="width: 100px;">Type</th>
<th style="width: 50px;">default</th> <th style="width: 50px;">Default</th>
<th>description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -145,7 +149,34 @@ $('.popover-dismiss').popover({
<td>animation</td> <td>animation</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>apply a CSS fade transition to the popover</td> <td>Apply a CSS fade transition to the popover</td>
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
</td>
</tr>
<tr>
<td>content</td>
<td>string | function</td>
<td>''</td>
<td>
<p>Default content value if <code>data-content</code> attribute isn't present.</p>
<p>If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.</p>
</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
</td>
</tr> </tr>
<tr> <tr>
<td>html</td> <td>html</td>
@ -157,50 +188,46 @@ $('.popover-dismiss').popover({
<td>placement</td> <td>placement</td>
<td>string | function</td> <td>string | function</td>
<td>'right'</td> <td>'right'</td>
<td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.</td> <td>How to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.</td>
</tr> </tr>
<tr> <tr>
<td>selector</td> <td>selector</td>
<td>string</td> <td>string</td>
<td>false</td> <td>false</td>
<td>if a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td> <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
</tr> </tr>
<tr> <tr>
<td>trigger</td> <td>template</td>
<td>string</td> <td>string</td>
<td>'click'</td> <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
<td>how popover is triggered - click | hover | focus | manual</td> <td>
<p>Base HTML to use when creating the popover.</p>
<p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
<p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
<p><code>.arrow</code> will become the popover's arrow.</p>
<p>The outermost wrapper element should have the <code>.popover</code> class.</p>
</td>
</tr> </tr>
<tr> <tr>
<td>title</td> <td>title</td>
<td>string | function</td> <td>string | function</td>
<td>''</td> <td>''</td>
<td>default title value if <code>title</code> attribute isn't present</td> <td>Default title value if <code>title</code> attribute isn't present</td>
</tr> </tr>
<tr> <tr>
<td>content</td> <td>trigger</td>
<td>string | function</td> <td>string</td>
<td>''</td> <td>'click'</td>
<td>default content value if <code>data-content</code> attribute isn't present</td> <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
</tr> </tr>
<tr> <tr>
<td>delay</td> <td>viewport</td>
<td>number | object</td> <td>string | object</td>
<td>0</td> <td>{ selector: 'body', padding: 0 }</td>
<td> <td>
<p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p> <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
<p>If a number is supplied, delay is applied to both hide/show</p> </td>
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> </tr>
</td>
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.table-responsive --> </div><!-- /.table-responsive -->
@ -263,79 +290,3 @@ $('#myPopover').on('hidden.bs.popover', function () {
}) })
{% endhighlight %} {% endhighlight %}
</div> </div>
<!-- Alert
================================================== -->
<div class="bs-docs-section">
<h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1>
<h2 id="alerts-examples">Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example">
<div class="alert alert-warning fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
</div><!-- /example -->
<div class="bs-example">
<div class="alert alert-danger fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<button type="button" class="btn btn-danger">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
</div><!-- /example -->
<h2 id="alerts-usage">Usage</h2>
<p>Enable dismissal of an alert via JavaScript:</p>
{% highlight js %}$(".alert").alert(){% endhighlight %}
<h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
{% highlight html %}<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>{% endhighlight %}
<h3>Methods</h3>
<h4>$().alert()</h4>
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
<h4>.alert('close')</h4>
<p>Closes an alert.</p>
{% highlight js %}$(".alert").alert('close'){% endhighlight %}
<h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>close.bs.alert</td>
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
</tr>
<tr>
<td>closed.bs.alert</td>
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
{% highlight js %}
$('#my-alert').bind('closed.bs.alert', function () {
// do something…
})
{% endhighlight %}
</div>

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

@ -7,7 +7,7 @@
<nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation"> <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -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 <b class="caret"></b></a> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">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>
@ -65,7 +65,7 @@ body {
<body data-spy="scroll" data-target=".navbar-example"> <body data-spy="scroll" data-target=".navbar-example">
... ...
<div class="navbar-example"> <div class="navbar-example">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs" role="tablist">
... ...
</ul> </ul>
</div> </div>
@ -83,6 +83,10 @@ $('body').scrollspy({ target: '.navbar-example' })
<h4>Resolvable ID targets required</h4> <h4>Resolvable ID targets required</h4>
<p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the DOM like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p> <p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the DOM like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p>
</div> </div>
<div class="bs-callout bs-callout-info">
<h4>Non-<code>:visible</code> target elements ignored</h4>
<p>Target elements that are not <a href="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
</div>
<h3>Methods</h3> <h3>Methods</h3>
<h4>.scrollspy('refresh')</h4> <h4>.scrollspy('refresh')</h4>

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

@ -4,14 +4,14 @@
<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">
<ul id="myTab" class="nav nav-tabs"> <ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li> <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li> <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -60,11 +60,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
<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 --> <!-- Nav tabs -->
<ul class="nav nav-tabs"> <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li> <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
@ -93,11 +93,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM. Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
</p> </p>
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs" id="myTab"> <ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li> <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">

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

@ -36,6 +36,10 @@
<h4>Tooltips in button groups and input groups require special setting</h4> <h4>Tooltips in button groups and input groups require special setting</h4>
<p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p> <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
</div> </div>
<div class="bs-callout bs-callout-warning">
<h4>Don't try to show tooltips on hidden elements</h4>
<p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p>
</div>
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-info">
<h4>Tooltips on disabled elements require wrapper elements</h4> <h4>Tooltips on disabled elements require wrapper elements</h4>
<p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the tooltip to that <code>&lt;div&gt;</code> instead.</p> <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the tooltip to that <code>&lt;div&gt;</code> instead.</p>
@ -54,16 +58,16 @@ $('#example').tooltip(options)
<h4>Multiple-line links</h4> <h4>Multiple-line links</h4>
<p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p> <p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
</div> </div>
{% highlight html linenos %} {% highlight html %}
<!-- HTML to write --> <!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a> <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin --> <!-- Generated markup by the plugin -->
<div class="tooltip top"> <div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Some tooltip text! Some tooltip text!
</div> </div>
<div class="tooltip-arrow"></div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -74,9 +78,9 @@ $('#example').tooltip(options)
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th> <th style="width: 100px;">Type</th>
<th style="width: 50px;">default</th> <th style="width: 50px;">Default</th>
<th>description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -84,7 +88,25 @@ $('#example').tooltip(options)
<td>animation</td> <td>animation</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>apply a CSS fade transition to the tooltip</td> <td>Apply a CSS fade transition to the tooltip</td>
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
</td>
</tr> </tr>
<tr> <tr>
<td>html</td> <td>html</td>
@ -96,42 +118,43 @@ $('#example').tooltip(options)
<td>placement</td> <td>placement</td>
<td>string | function</td> <td>string | function</td>
<td>'top'</td> <td>'top'</td>
<td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td> <td>How to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
</tr> </tr>
<tr> <tr>
<td>selector</td> <td>selector</td>
<td>string</td> <td>string</td>
<td>false</td> <td>false</td>
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td> <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
</tr>
<tr>
<td>template</td>
<td>string</td>
<td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
<td>
<p>Base HTML to use when creating the tooltip.</p>
<p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
<p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
<p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
</td>
</tr> </tr>
<tr> <tr>
<td>title</td> <td>title</td>
<td>string | function</td> <td>string | function</td>
<td>''</td> <td>''</td>
<td>default title value if <code>title</code> attribute isn't present</td> <td>Default title value if <code>title</code> attribute isn't present</td>
</tr> </tr>
<tr> <tr>
<td>trigger</td> <td>trigger</td>
<td>string</td> <td>string</td>
<td>'hover focus'</td> <td>'hover focus'</td>
<td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
</tr> </tr>
<tr> <tr>
<td>delay</td> <td>viewport</td>
<td>number | object</td> <td>string | object</td>
<td>0</td> <td>{ selector: 'body', padding: 0 }</td>
<td> <td>
<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p> <p>Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
</td>
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
</td> </td>
</tr> </tr>
</tbody> </tbody>

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

@ -60,6 +60,7 @@
<a href="#navbar">Navbar</a> <a href="#navbar">Navbar</a>
<ul class="nav"> <ul class="nav">
<li><a href="#navbar-default">Default navbar</a></li> <li><a href="#navbar-default">Default navbar</a></li>
<li><a href="#navbar-brand-image">Brand image</a></li>
<li><a href="#navbar-forms">Forms</a></li> <li><a href="#navbar-forms">Forms</a></li>
<li><a href="#navbar-buttons">Buttons</a></li> <li><a href="#navbar-buttons">Buttons</a></li>
<li><a href="#navbar-text">Text</a></li> <li><a href="#navbar-text">Text</a></li>
@ -94,7 +95,7 @@
<a href="#alerts">Alerts</a> <a href="#alerts">Alerts</a>
<ul class="nav"> <ul class="nav">
<li><a href="#alerts-examples">Examples</a></li> <li><a href="#alerts-examples">Examples</a></li>
<li><a href="#alerts-dismissable">Dismissable alerts</a></li> <li><a href="#alerts-dismissible">Dismissible alerts</a></li>
<li><a href="#alerts-links">Links in alerts</a></li> <li><a href="#alerts-links">Links in alerts</a></li>
</ul> </ul>
</li> </li>

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

@ -18,6 +18,7 @@
<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 desktops</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, desktops</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>
<li><a href="#grid-nesting">Nesting columns</a></li> <li><a href="#grid-nesting">Nesting columns</a></li>
@ -32,6 +33,7 @@
<li><a href="#type-body-copy">Body copy</a></li> <li><a href="#type-body-copy">Body copy</a></li>
<li><a href="#type-inline-text">Inline text elements</a></li> <li><a href="#type-inline-text">Inline text elements</a></li>
<li><a href="#type-alignment">Alignment classes</a></li> <li><a href="#type-alignment">Alignment classes</a></li>
<li><a href="#type-transformation">Transformation classes</a></li>
<li><a href="#type-abbreviations">Abbreviations</a></li> <li><a href="#type-abbreviations">Abbreviations</a></li>
<li><a href="#type-addresses">Addresses</a></li> <li><a href="#type-addresses">Addresses</a></li>
<li><a href="#type-blockquotes">Blockquotes</a></li> <li><a href="#type-blockquotes">Blockquotes</a></li>
@ -132,10 +134,3 @@
<li><a href="#sass-installation">Rails install</a></li> <li><a href="#sass-installation">Rails install</a></li>
</ul> </ul>
</li> </li>
<li>
<a href="#rtl">RTL version</a>
<ul class="nav">
<li><a href="#rtl-how-to">How to use</a></li>
<li><a href="#rtl-css-flip">CSS Flip</a></li>
</ul>
</li>

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

@ -40,7 +40,6 @@
<li><a href="#close">Close</a></li> <li><a href="#close">Close</a></li>
<li><a href="#code">Code</a></li> <li><a href="#code">Code</a></li>
<li><a href="#type">Type</a></li> <li><a href="#type">Type</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul> </ul>
</li> </li>
<li><a href="#download">Download</a></li> <li><a href="#download">Download</a></li>

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

@ -8,6 +8,14 @@
<li><a href="#whats-included-source">Source code</a></li> <li><a href="#whats-included-source">Source code</a></li>
</ul> </ul>
</li> </li>
<li>
<a href="#grunt">Compiling CSS and JavaScript</a>
<ul class="nav">
<li><a href="#grunt-installing">Installing Grunt</a></li>
<li><a href="#grunt-commands">Available Grunt commands</a></li>
<li><a href="#grunt-troubleshooting">Troubleshooting</a></li>
</ul>
</li>
<li> <li>
<a href="#template">Basic template</a> <a href="#template">Basic template</a>
</li> </li>
@ -36,6 +44,7 @@
<li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li> <li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li>
<li><a href="#support-ie8-respondjs">IE8 and Respond.js</a></li> <li><a href="#support-ie8-respondjs">IE8 and Respond.js</a></li>
<li><a href="#support-ie8-box-sizing">IE8 and box-sizing</a></li> <li><a href="#support-ie8-box-sizing">IE8 and box-sizing</a></li>
<li><a href="#support-ie8-font-face">IE8 and @font-face</a></li>
<li><a href="#support-ie-compatibility-modes">IE Compatibility modes</a></li> <li><a href="#support-ie-compatibility-modes">IE Compatibility modes</a></li>
<li><a href="#support-ie10-width">IE10 and Windows (Phone) 8</a></li> <li><a href="#support-ie10-width">IE10 and Windows (Phone) 8</a></li>
<li><a href="#support-safari-percentages">Safari percent rounding</a></li> <li><a href="#support-safari-percentages">Safari percent rounding</a></li>

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

@ -1,7 +1,7 @@
<header class="navbar navbar-inverse navbar-static-top bs-docs-nav" id="top" role="banner"> <header class="navbar navbar-inverse navbar-static-top bs-docs-nav" id="top" role="banner">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -28,8 +28,8 @@
</li> </li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Expo']);">Expo</a></li> <li><a href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Blog']);">Blog</a></li> <li><a href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>

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

@ -6,6 +6,7 @@
<li><a href="#js-programmatic-api">Programmatic API</a></li> <li><a href="#js-programmatic-api">Programmatic API</a></li>
<li><a href="#js-noconflict">No conflict</a></li> <li><a href="#js-noconflict">No conflict</a></li>
<li><a href="#js-events">Events</a></li> <li><a href="#js-events">Events</a></li>
<li><a href="#callout-third-party-libs">Third-party libraries</a></li>
</ul> </ul>
</li> </li>
<li><a href="#transitions">Transitions</a></li> <li><a href="#transitions">Transitions</a></li>

0
docs/jade/customizer-nav.jade → docs/_jade/customizer-nav.jade
View File

0
docs/jade/customizer-variables.jade → docs/_jade/customizer-variables.jade
View File

11
docs/_layouts/default.html
View File

@ -24,7 +24,7 @@
{{ content }} {{ content }}
<!-- </div> --> <!-- </div> -->
<!-- <div class="col-md-3"> <!-- <div class="col-md-3">
<div class="bs-docs-sidebar hidden-print" role="complementary"> <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
<ul class="nav bs-docs-sidenav"> <ul class="nav bs-docs-sidenav">
{% if page.slug == "getting-started" %} {% if page.slug == "getting-started" %}
{% include nav/getting-started.html %} {% include nav/getting-started.html %}
@ -45,11 +45,14 @@
<a class="back-to-top" href="#top"> <a class="back-to-top" href="#top">
Back to top Back to top
</a> </a>
{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
<a href="#" class="bs-docs-theme-toggle">
Preview theme
</a>
{% endif %}
</div> </div>
</div> </div>
--> </div> -->
<!-- </div> -->
</div> </div>
{% include footer.html %} {% include footer.html %}

BIN
docs/apple-touch-icon-precomposed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

43
docs/assets/brand/bootstrap-outline.svg
View File

@ -1,43 +1,20 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve"> viewBox="0 180 612 612" enable-background="new 0 180 612 612" xml:space="preserve">
<g id="solid" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none"> <g id="outline" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
<path id="bg" display="inline" fill="#563D7C" d="M612,600c0,56.1-45.9,102-102,102H102C45.9,702,0,656.1,0,600V192
C0,135.9,45.9,90,102,90h408c56.1,0,102,45.9,102,102V600z"/>
<g id="B" display="inline" enable-background="new ">
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
</g>
</g>
<g id="outline" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<g id="bg_1_"> <g id="bg_1_">
<path fill="#FFFFFF" d="M510,96c25.5,0,49.6,10,67.8,28.2S606,166.5,606,192v408c0,25.5-10,49.6-28.2,67.8S535.5,696,510,696H102 <path fill="#FFFFFF" d="M510,186c25.5,0,49.6,10,67.8,28.2S606,256.5,606,282v408c0,25.5-10,49.6-28.2,67.8S535.5,786,510,786H102
c-25.5,0-49.6-10-67.8-28.2S6,625.5,6,600V192c0-25.5,10-49.6,28.2-67.8S76.5,96,102,96H510 M510,90H102C45.9,90,0,135.9,0,192 c-25.5,0-49.6-10-67.8-28.2S6,715.5,6,690V282c0-25.5,10-49.6,28.2-67.8S76.5,186,102,186H510 M510,180H102
v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192C612,135.9,566.1,90,510,90L510,90z"/> C45.9,180,0,225.9,0,282v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V282C612,225.9,566.1,180,510,180L510,180z"/>
</g> </g>
<g id="B_2_" enable-background="new "> <g id="B_2_" enable-background="new ">
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2 <path fill="#FFFFFF" d="M166.3,313h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2 c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102 c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,313L166.3,313z M228.8,462.5h102
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5 c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8,462.5L228.8,462.5z M228.8,619h110.5
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/> c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
</g>
</g>
<g id="punchout" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
<g display="inline">
<path fill="#FFFFFF" d="M373.5,431.8c-10.5-9.5-25.2-14.2-44.2-14.2H218.8V529h110.5c19,0,33.8-4.9,44.2-14.8
c10.5-9.8,15.8-23.8,15.8-41.8C389.2,454.8,384,441.2,373.5,431.8z"/>
<path fill="#FFFFFF" d="M358.2,359.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102v98.5h102
C335.7,372.5,348.2,368.2,358.2,359.8z"/>
<path fill="#FFFFFF" d="M510,90H102C45.9,90,0,135.9,0,192v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192
C612,135.9,566.1,90,510,90z M454.2,519.8c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8
h-164V223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1
c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8C461.7,494.5,459.2,507.6,454.2,519.8z"/>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

47
docs/assets/brand/bootstrap-punchout.svg
View File

@ -1,43 +1,18 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve"> viewBox="0 180 612 612" enable-background="new 0 180 612 612" xml:space="preserve">
<g id="solid" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none"> <g id="punchout" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
<path id="bg" display="inline" fill="#563D7C" d="M612,600c0,56.1-45.9,102-102,102H102C45.9,702,0,656.1,0,600V192
C0,135.9,45.9,90,102,90h408c56.1,0,102,45.9,102,102V600z"/>
<g id="B" display="inline" enable-background="new ">
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
</g>
</g>
<g id="outline" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
<g id="bg_1_" display="inline">
<path fill="#FFFFFF" d="M510,96c25.5,0,49.6,10,67.8,28.2S606,166.5,606,192v408c0,25.5-10,49.6-28.2,67.8S535.5,696,510,696H102
c-25.5,0-49.6-10-67.8-28.2S6,625.5,6,600V192c0-25.5,10-49.6,28.2-67.8S76.5,96,102,96H510 M510,90H102C45.9,90,0,135.9,0,192
v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192C612,135.9,566.1,90,510,90L510,90z"/>
</g>
<g id="B_2_" display="inline" enable-background="new ">
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
</g>
</g>
<g id="punchout" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<g> <g>
<path fill="#FFFFFF" d="M383.5,431.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V529h110.5c19,0,33.8-4.9,44.2-14.8 <path fill="#FFFFFF" d="M383.5,521.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V619h110.5c19,0,33.8-4.9,44.2-14.8
c10.5-9.8,15.8-23.8,15.8-41.8C399.2,454.8,394,441.2,383.5,431.8z"/> c10.5-9.8,15.8-23.8,15.8-41.8C399.2,544.8,394,531.2,383.5,521.8z"/>
<path fill="#FFFFFF" d="M368.2,359.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102v98.5h102 <path fill="#FFFFFF" d="M368.2,449.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102
C345.7,372.5,358.2,368.2,368.2,359.8z"/> C345.7,462.5,358.2,458.2,368.2,449.8z"/>
<path fill="#FFFFFF" d="M510,90H102C45.9,90,0,135.9,0,192v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192 <path fill="#FFFFFF" d="M510,180H102C45.9,180,0,225.9,0,282v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V282
C612,135.9,566.1,90,510,90z M454.2,519.8c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8 C612,225.9,566.1,180,510,180z M454.2,609.8c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164V313h173.5
h-164V223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1 c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2
c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8C461.7,494.5,459.2,507.6,454.2,519.8z"/> c11.3,16.2,17,36.4,17,60.8C461.7,584.5,459.2,597.6,454.2,609.8z"/>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

44
docs/assets/brand/bootstrap-solid.svg
View File

@ -1,43 +1,17 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve"> viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">
<g id="solid" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
<path id="bg" fill="#563D7C" d="M612,600c0,56.1-45.9,102-102,102H102C45.9,702,0,656.1,0,600V192C0,135.9,45.9,90,102,90h408 <path id="bg" fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
c56.1,0,102,45.9,102,102V600z"/> c56.1,0,102,45.9,102,102V510z"/>
<g id="B" enable-background="new "> <g id="B" enable-background="new ">
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2 <path fill="#FFFFFF" d="M166.3,133h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2 c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102 c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,133L166.3,133z M228.8,282.5h102
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5 c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8,282.5L228.8,282.5z M228.8,439h110.5
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/> c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
</g>
</g>
<g id="outline" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
<g id="bg_1_" display="inline">
<path fill="#FFFFFF" d="M510,96c25.5,0,49.6,10,67.8,28.2S606,166.5,606,192v408c0,25.5-10,49.6-28.2,67.8S535.5,696,510,696H102
c-25.5,0-49.6-10-67.8-28.2S6,625.5,6,600V192c0-25.5,10-49.6,28.2-67.8S76.5,96,102,96H510 M510,90H102C45.9,90,0,135.9,0,192
v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192C612,135.9,566.1,90,510,90L510,90z"/>
</g>
<g id="B_2_" display="inline" enable-background="new ">
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
</g>
</g>
<g id="punchout" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
<g display="inline">
<path fill="#FFFFFF" d="M373.5,431.8c-10.5-9.5-25.2-14.2-44.2-14.2H218.8V529h110.5c19,0,33.8-4.9,44.2-14.8
c10.5-9.8,15.8-23.8,15.8-41.8C389.2,454.8,384,441.2,373.5,431.8z"/>
<path fill="#FFFFFF" d="M358.2,359.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102v98.5h102
C335.7,372.5,348.2,368.2,358.2,359.8z"/>
<path fill="#FFFFFF" d="M510,90H102C45.9,90,0,135.9,0,192v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192
C612,135.9,566.1,90,510,90z M454.2,519.8c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8
h-164V223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1
c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8C461.7,494.5,459.2,507.6,454.2,519.8z"/>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

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

File diff suppressed because one or more lines are too long

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

@ -9,27 +9,6 @@
/* /*
* Bootstrap Documentation * Bootstrap Documentation
* Special styles for presenting Bootstrap's documentation and code examples. * Special styles for presenting Bootstrap's documentation and code examples.
*
* Table of contents:
*
* Scaffolding
* Main navigation
* Footer
* Social buttons
* Homepage
* Page headers
* Old docs callout
* Ads
* Side navigation
* Docs sections
* Callouts
* Grid styles
* Examples
* Code snippets (highlight)
* Responsive tests
* Glyphicons
* Customizer
* Miscellaneous
*/ */
@ -249,6 +228,7 @@ body {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6f5499', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6f5499', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.bs-docs-masthead .bs-docs-booticon { .bs-docs-masthead .bs-docs-booticon {
margin: 0 auto 30px; margin: 0 auto 30px;
} }
@ -281,8 +261,7 @@ body {
@media (min-width: 768px) { @media (min-width: 768px) {
.bs-docs-masthead { .bs-docs-masthead {
padding-top: 80px; padding: 80px 0;
padding-bottom: 80px;
} }
.bs-docs-masthead h1 { .bs-docs-masthead h1 {
font-size: 60px; font-size: 60px;
@ -492,16 +471,6 @@ body {
margin-bottom: 15px; margin-bottom: 15px;
} }
/* Featured sites */
.bs-docs-featured-sites {
margin-right: -1px;
margin-left: -1px;
}
.bs-docs-featured-sites .col-sm-3 {
padding-right: 1px;
padding-left: 1px;
}
@media (min-width: 480px) { @media (min-width: 480px) {
.bs-docs-featurette .img-responsive { .bs-docs-featurette .img-responsive {
margin-top: 30px; margin-top: 30px;
@ -520,6 +489,30 @@ body {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
.bs-docs-featurette .img-responsive {
margin-top: 0;
}
}
/*
* Featured sites
*
* Homepage thumbnails from the Expo.
*/
.bs-docs-featured-sites {
margin-right: -1px;
margin-left: -1px;
}
.bs-docs-featured-sites .col-xs-6 {
padding: 1px;
}
.bs-docs-featured-sites .img-responsive {
margin-top: 0;
}
@media (min-width: 768px) {
.bs-docs-featured-sites .col-sm-3:first-child img { .bs-docs-featured-sites .col-sm-3:first-child img {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
@ -528,9 +521,33 @@ body {
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
}
.bs-docs-featurette .img-responsive {
margin-top: 0; /*
* Examples
*
* Linked docs examples.
*/
.bs-examples .thumbnail {
margin-bottom: 10px;
}
.bs-examples h4 {
margin-bottom: 5px;
}
.bs-examples p {
margin-bottom: 20px;
}
@media (max-width: 480px) {
.bs-examples {
margin-right: -10px;
margin-left: -10px;
}
.bs-examples > [class^="col-"] {
padding-right: 10px;
padding-left: 10px;
} }
} }
@ -680,8 +697,37 @@ body {
/* Nav: second level (shown on .active) */ /* Nav: second level (shown on .active) */
.bs-docs-sidebar .nav .nav { .bs-docs-sidebar .nav .nav {
display: none; /* Hide by default, but at >768px, show it */
padding-bottom: 10px;
}
.bs-docs-sidebar .nav .nav > li > a {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 30px;
font-size: 12px;
font-weight: normal;
}
.bs-docs-sidebar .nav .nav > li > a:hover,
.bs-docs-sidebar .nav .nav > li > a:focus {
padding-left: 29px;
}
.bs-docs-sidebar .nav .nav > .active > a,
.bs-docs-sidebar .nav .nav > .active:hover > a,
.bs-docs-sidebar .nav .nav > .active:focus > a {
padding-left: 28px;
font-weight: 500;
}
/* Back to top (hidden on mobile) */
.back-to-top,
.bs-docs-theme-toggle {
display: none; display: none;
} }
.back-to-top:hover,
.bs-docs-theme-toggle:hover {
color: #563d7c;
text-decoration: none;
}
.bs-docs-sidebar .nav > .active > .nav { .bs-docs-sidebar .nav > .active > .nav {
display: block; display: block;
} }
@ -724,7 +770,9 @@ h1[id] {
.bs-callout { .bs-callout {
padding: 20px; padding: 20px;
margin: 20px 0; margin: 20px 0;
border-left: 3px solid #eee; border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
} }
.bs-callout h4 { .bs-callout h4 {
margin-top: 0; margin-top: 0;
@ -734,28 +782,29 @@ h1[id] {
margin-bottom: 0; margin-bottom: 0;
} }
.bs-callout code { .bs-callout code {
background-color: #fff;
border-radius: 3px; border-radius: 3px;
} }
/* Tighten up space between multiple callouts */
.bs-callout + .bs-callout {
margin-top: -5px;
}
/* Variations */ /* Variations */
.bs-callout-danger { .bs-callout-danger {
background-color: #fdf7f7; border-left-color: #d9534f;
border-color: #d9534f;
} }
.bs-callout-danger h4 { .bs-callout-danger h4 {
color: #d9534f; color: #d9534f;
} }
.bs-callout-warning { .bs-callout-warning {
background-color: #fcf8f2; border-left-color: #f0ad4e;
border-color: #f0ad4e;
} }
.bs-callout-warning h4 { .bs-callout-warning h4 {
color: #f0ad4e; color: #f0ad4e;
} }
.bs-callout-info { .bs-callout-info {
background-color: #f4f8fa; border-left-color: #5bc0de;
border-color: #5bc0de;
} }
.bs-callout-info h4 { .bs-callout-info h4 {
color: #5bc0de; color: #5bc0de;
@ -893,7 +942,6 @@ h1[id] {
position: relative; position: relative;
padding: 45px 15px 15px; padding: 45px 15px 15px;
margin: 0 -15px 15px; margin: 0 -15px 15px;
background-color: #fafafa;
border-color: #e5e5e5 #eee #eee; border-color: #e5e5e5 #eee #eee;
border-style: solid; border-style: solid;
border-width: 1px 0; border-width: 1px 0;
@ -907,7 +955,7 @@ h1[id] {
left: 15px; left: 15px;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
color: #bbb; color: #959595;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
content: "Example"; content: "Example";
@ -1077,12 +1125,6 @@ h1[id] {
.bs-navbar-bottom-example .navbar-fixed-bottom { .bs-navbar-bottom-example .navbar-fixed-bottom {
position: absolute; position: absolute;
} }
.bs-navbar-top-example {
border-radius: 0 0 4px 4px;
}
.bs-navbar-bottom-example {
border-radius: 4px 4px 0 0;
}
} }
/* Pagination */ /* Pagination */
@ -1116,10 +1158,14 @@ h1[id] {
} }
/* Example dropdowns */ /* Example dropdowns */
.bs-example > .dropdown > .dropdown-toggle {
float: left;
}
.bs-example > .dropdown > .dropdown-menu { .bs-example > .dropdown > .dropdown-menu {
position: static; position: static;
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
clear: left;
} }
/* Example tabbable tabs */ /* Example tabbable tabs */
@ -1175,6 +1221,8 @@ h1[id] {
padding: 0; padding: 0;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
word-break: normal;
word-wrap: nowrap;
white-space: nowrap; white-space: nowrap;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
@ -1183,13 +1231,9 @@ h1[id] {
font-size: inherit; font-size: inherit;
color: #333; /* Effectively the base text color */ color: #333; /* Effectively the base text color */
} }
.highlight pre .lineno { .highlight pre code:first-child {
display: inline-block; display: inline-block;
width: 22px; padding-right: 45px;
padding-right: 5px;
margin-right: 10px;
color: #bebec5;
text-align: right;
} }
@ -1490,23 +1534,47 @@ h1[id] {
} }
/*
* ZeroClipboard styles
*/
.zero-clipboard {
position: relative;
display: none;
}
.btn-clipboard {
position: absolute;
top: 0;
right: 0;
z-index: 10;
display: block;
padding: 5px 8px;
font-size: 12px;
color: #777;
cursor: pointer;
background-color: #fff;
border: 1px solid #e1e1e8;
border-radius: 0 4px 0 4px;
}
.btn-clipboard-hover {
color: #fff;
background-color: #563d7c;
border-color: #563d7c;
}
@media (min-width: 768px) {
.zero-clipboard {
display: block;
}
}
/* /*
* Miscellaneous * Miscellaneous
* *
* Odds and ends for optimum docs display. * Odds and ends for optimum docs display.
*/ */
/* Examples gallery: space out content better */
.bs-examples .thumbnail {
margin-bottom: 10px;
}
.bs-examples h4 {
margin-bottom: 5px;
}
.bs-examples p {
margin-bottom: 20px;
}
/* Pseudo :focus state for showing how it looks in the docs */ /* Pseudo :focus state for showing how it looks in the docs */
#focusedInput { #focusedInput {
border-color: rgb(204,204,204); /* Restate unfocused value to make CSSLint happy that there's a pre-CSS3 fallback*/ border-color: rgb(204,204,204); /* Restate unfocused value to make CSSLint happy that there's a pre-CSS3 fallback*/

BIN
docs/assets/flash/ZeroClipboard.swf Normal file
View File

Binary file not shown.

BIN
docs/assets/ico/apple-touch-icon-144-precomposed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
docs/assets/ico/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.3 KiB

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

51
docs/assets/js/ie-emulation-modes-warning.js Normal file
View File

@ -0,0 +1,51 @@
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
/*!
* Copyright 2014 Twitter, Inc.
*
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/.
*/
// Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
(function () {
'use strict';
function emulatedIEMajorVersion() {
var groups = /MSIE ([0-9.]+)/.exec(window.navigator.userAgent)
if (groups === null) {
return null
}
var ieVersionNum = parseInt(groups[1], 10)
var ieMajorVersion = Math.floor(ieVersionNum)
return ieMajorVersion
}
function actualNonEmulatedIEMajorVersion() {
// Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
// IE JavaScript conditional compilation docs: http://msdn.microsoft.com/en-us/library/ie/121hztk3(v=vs.94).aspx
// @cc_on docs: http://msdn.microsoft.com/en-us/library/ie/8ka90k2e(v=vs.94).aspx
var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // jshint ignore:line
if (jscriptVersion === undefined) {
return 11 // IE11+ not in emulation mode
}
if (jscriptVersion < 9) {
return 8 // IE8 (or lower; haven't tested on IE<8)
}
return jscriptVersion // IE9 or IE10 in any mode, or IE11 in non-IE11 mode
}
var ua = window.navigator.userAgent
if (ua.indexOf('Opera') > -1 || ua.indexOf('Presto') > -1) {
return // Opera, which might pretend to be IE
}
var emulated = emulatedIEMajorVersion()
if (emulated === null) {
return // Not IE
}
var nonEmulated = actualNonEmulatedIEMajorVersion()
if (emulated !== nonEmulated) {
window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!')
}
})();

22
docs/assets/js/ie10-viewport-bug-workaround.js Normal file
View File

@ -0,0 +1,22 @@
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/.
*/
// See the Getting Started docs for more information:
// http://getbootstrap.com/getting-started/#support-ie10-width
(function () {
'use strict';
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}
})();

2
docs/assets/js/src/ie8-responsive-file-warning.js → docs/assets/js/ie8-responsive-file-warning.js
View File

@ -9,5 +9,5 @@
*/ */
// Intended to prevent false-positive bug reports about responsive styling supposedly not working in IE8. // Intended to prevent false-positive bug reports about responsive styling supposedly not working in IE8.
if (window.location.protocol == 'file:') { if (window.location.protocol == 'file:') {
alert('ERROR: Bootstrap\'s responsive CSS is disabled!\nSee getbootstrap.com/getting-started/#respond-file-proto for details.') window.alert('ERROR: Bootstrap\'s responsive CSS is disabled!\nSee getbootstrap.com/getting-started/#respond-file-proto for details.')
} }

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

File diff suppressed because one or more lines are too long

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

@ -9,97 +9,161 @@
* details, see http://creativecommons.org/licenses/by/3.0/. * details, see http://creativecommons.org/licenses/by/3.0/.
*/ */
/* global ZeroClipboard */
!function ($) { !function ($) {
'use strict';
$(function () { $(function () {
// IE10 viewport hack for Surface/desktop Windows 8 bug // Scrollspy
//
// See Getting Started docs for more information
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}
var $window = $(window) var $window = $(window)
var $body = $(document.body) var $body = $(document.body)
// var navHeight = $('.navbar').outerHeight(true) + 10
$body.scrollspy({ $body.scrollspy({
target: '.bs-docs-toc-item', target: '.bs-docs-sidebar'
}) })
$window.on('load', function () { $window.on('load', function () {
$body.scrollspy('refresh') $body.scrollspy('refresh')
}) })
// $('.bs-docs-container [href=#]').click(function (e) { // Kill links
// e.preventDefault() $('.bs-docs-container [href=#]').click(function (e) {
// }) e.preventDefault()
})
// back to top // Sidenav affixing
// setTimeout(function () { setTimeout(function () {
// var $sideBar = $('.bs-docs-sidebar') var $sideBar = $('.bs-docs-sidebar')
// $sideBar.affix({ $sideBar.affix({
// offset: { offset: {
// top: function () { top: function () {
// var offsetTop = $sideBar.offset().top var offsetTop = $sideBar.offset().top
// var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10) var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
// var navOuterHeight = $('.bs-docs-nav').height() var navOuterHeight = $('.bs-docs-nav').height()
// return (this.top = offsetTop - navOuterHeight - sideBarMargin) return (this.top = offsetTop - navOuterHeight - sideBarMargin)
// }, },
// bottom: function () { bottom: function () {
// return (this.bottom = $('.bs-docs-footer').outerHeight(true)) return (this.bottom = $('.bs-docs-footer').outerHeight(true))
// } }
// } }
// }) })
// }, 100) }, 100)
// setTimeout(function () { setTimeout(function () {
// $('.bs-top').affix() $('.bs-top').affix()
// }, 100) }, 100)
// tooltip demo // theme toggler
;(function () {
var stylesheetLink = $('#bs-theme-stylesheet')
var themeBtn = $('.bs-docs-theme-toggle')
var activateTheme = function () {
stylesheetLink.attr('href', stylesheetLink.attr('data-href'))
themeBtn.text('Disable theme preview')
localStorage.setItem('previewTheme', true)
}
if (localStorage.getItem('previewTheme')) {
activateTheme()
}
themeBtn.click(function () {
var href = stylesheetLink.attr('href')
if (!href || href.indexOf('data') === 0) {
activateTheme()
} else {
stylesheetLink.attr('href', '')
themeBtn.text('Preview theme')
localStorage.removeItem('previewTheme')
}
})
})();
// Tooltip and popover demos
$('.tooltip-demo').tooltip({ $('.tooltip-demo').tooltip({
selector: '[data-toggle=tooltip]', selector: '[data-toggle="tooltip"]',
container: 'body'
})
$('.popover-demo').popover({
selector: '[data-toggle="popover"]',
container: 'body' container: 'body'
}) })
// Demos within modals
$('.tooltip-test').tooltip() $('.tooltip-test').tooltip()
$('.popover-test').popover() $('.popover-test').popover()
$('.bs-docs-navbar').tooltip({ // Default & dismissible popover demos
selector: 'a[data-toggle=tooltip]',
container: '.bs-docs-navbar .nav'
})
// popover demo
$('.bs-docs-popover').popover() $('.bs-docs-popover').popover()
$('.bs-docs-popover-dismiss').popover({ trigger: 'focus' })
// Popover dismiss on next click // Button state demo
$('.bs-docs-popover-dismiss').popover({ $('#loading-example-btn').click(function () {
trigger: 'focus' var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
// Config ZeroClipboard
ZeroClipboard.config({
moviePath: '/assets/flash/ZeroClipboard.swf',
hoverClass: 'btn-clipboard-hover'
})
// Insert copy to clipboard button before .highlight or .bs-example
$('.highlight').each(function () {
var highlight = $(this)
var previous = highlight.prev()
var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>'
if (previous.hasClass('bs-example')) {
previous.before(btnHtml.replace(/btn-clipboard/, 'btn-clipboard with-example'))
} else {
highlight.before(btnHtml)
}
})
var zeroClipboard = new ZeroClipboard($('.btn-clipboard'))
var htmlBridge = $('#global-zeroclipboard-html-bridge')
// Handlers for ZeroClipboard
zeroClipboard.on('load', function () {
htmlBridge
.data('placement', 'top')
.attr('title', 'Copy to clipboard')
.tooltip()
})
// Copy to clipboard
zeroClipboard.on('dataRequested', function (client) {
var highlight = $(this).parent().nextAll('.highlight').first()
client.setText(highlight.text())
})
// Notify copy success and reset tooltip title
zeroClipboard.on('complete', function () {
htmlBridge
.attr('title', 'Copied!')
.tooltip('fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('fixTitle')
})
// Notify copy failure
zeroClipboard.on('noflash wrongflash', function () {
htmlBridge
.attr('title', 'Flash required')
.tooltip('fixTitle')
.tooltip('show')
}) })
// button state demo
$('#loading-example-btn')
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
}) })
}(jQuery) }(jQuery)

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

@ -6,9 +6,12 @@
* 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 */
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';
var cw = '/*!\n' + var cw = '/*!\n' +
' * Bootstrap v3.1.1 (http://getbootstrap.com)\n' + ' * Bootstrap v3.2.0 (http://getbootstrap.com)\n' +
' * Copyright 2011-2014 Twitter, Inc.\n' + ' * Copyright 2011-2014 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'
@ -24,6 +27,12 @@ window.onload = function () { // wait for load in a dumb way because B-0
throw err throw err
} }
function showSuccess(msg) {
$('<div class="bs-callout bs-callout-info">' +
'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + msg +
'</div>').insertAfter('.bs-customize-download')
}
function showCallout(msg, showUpTop) { function showCallout(msg, showUpTop) {
var callout = $('<div class="bs-callout bs-callout-danger">' + var callout = $('<div class="bs-callout bs-callout-danger">' +
'<h4>Attention!</h4>' + '<h4>Attention!</h4>' +
@ -43,7 +52,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
return match && decodeURIComponent(match[1].replace(/\+/g, ' ')) return match && decodeURIComponent(match[1].replace(/\+/g, ' '))
} }
function createGist(configJson) { function createGist(configJson, callback) {
var data = { var data = {
description: 'Bootstrap Customizer Config', description: 'Bootstrap Customizer Config',
'public': true, 'public': true,
@ -60,11 +69,21 @@ window.onload = function () { // wait for load in a dumb way because B-0
data: JSON.stringify(data) data: JSON.stringify(data)
}) })
.success(function (result) { .success(function (result) {
var gistUrl = result.html_url;
var origin = window.location.protocol + '//' + window.location.host var origin = window.location.protocol + '//' + window.location.host
history.replaceState(false, document.title, origin + window.location.pathname + '?id=' + result.id) var customizerUrl = origin + window.location.pathname + '?id=' + result.id
showSuccess('<strong>Success!</strong> Your configuration has been saved to <a href="' + gistUrl + '">' + gistUrl + '</a> ' +
'and can be revisited here at <a href="' + customizerUrl + '">' + customizerUrl + '</a> for further customization.')
history.replaceState(false, document.title, customizerUrl)
callback(gistUrl, customizerUrl)
}) })
.error(function (err) { .error(function (err) {
showError('<strong>Ruh roh!</strong> Could not save gist file, configuration not saved.', err) try {
showError('<strong>Ruh roh!</strong> Could not save gist file, configuration not saved.', err)
} catch (sameErr) {
// deliberately ignore the error
}
callback('<none>', '<none>')
}) })
} }
@ -142,7 +161,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
if (fonts) { if (fonts) {
var fontsFolder = zip.folder('fonts') var fontsFolder = zip.folder('fonts')
for (var fontsFileName in fonts) { for (var fontsFileName in fonts) {
fontsFolder.file(fontsFileName, fonts[fontsFileName], {base64: true}) fontsFolder.file(fontsFileName, fonts[fontsFileName], { base64: true })
} }
} }
@ -155,7 +174,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
complete(content) complete(content)
} }
function generateCustomCSS(vars) { function generateCustomLess(vars) {
var result = '' var result = ''
for (var key in vars) { for (var key in vars) {
@ -178,10 +197,20 @@ window.onload = function () { // wait for load in a dumb way because B-0
var IMPORT_REGEX = /^@import \"(.*?)\";$/ var IMPORT_REGEX = /^@import \"(.*?)\";$/
var lessLines = __less[lessFilename].split('\n') var lessLines = __less[lessFilename].split('\n')
for (var i = 0, imports = []; i < lessLines.length; i++) { var imports = []
var match = IMPORT_REGEX.exec(lessLines[i]) $.each(lessLines, function (index, lessLine) {
if (match) imports.push(match[1]) var match = IMPORT_REGEX.exec(lessLine)
} if (match) {
var importee = match[1]
var transitiveImports = includedLessFilenames(importee)
$.each(transitiveImports, function (index, transitiveImportee) {
if ($.inArray(transitiveImportee, imports) === -1) {
imports.push(transitiveImportee)
}
})
imports.push(importee)
}
})
return imports return imports
} }
@ -189,7 +218,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
function generateLESS(lessFilename, lessFileIncludes, vars) { function generateLESS(lessFilename, lessFileIncludes, vars) {
var lessSource = __less[lessFilename] var lessSource = __less[lessFilename]
$.each(includedLessFilenames(lessFilename), function(index, filename) { var lessFilenames = includedLessFilenames(lessFilename)
$.each(lessFilenames, function (index, filename) {
var fileInclude = lessFileIncludes[filename] var fileInclude = lessFileIncludes[filename]
// Files not explicitly unchecked are compiled into the final stylesheet. // Files not explicitly unchecked are compiled into the final stylesheet.
@ -200,10 +230,10 @@ window.onload = function () { // wait for load in a dumb way because B-0
// Custom variables are added after Bootstrap variables so the custom // Custom variables are added after Bootstrap variables so the custom
// ones take precedence. // ones take precedence.
if (('variables.less' === filename) && vars) lessSource += generateCustomCSS(vars) if (('variables.less' === filename) && vars) lessSource += generateCustomLess(vars)
}) })
lessSource = lessSource.replace(/@import[^\n]*/gi, '') //strip any imports lessSource = lessSource.replace(/@import[^\n]*/gi, '') // strip any imports
return lessSource return lessSource
} }
@ -212,7 +242,9 @@ window.onload = function () { // wait for load in a dumb way because B-0
paths: ['variables.less', 'mixins.less'], paths: ['variables.less', 'mixins.less'],
optimization: 0, optimization: 0,
filename: baseFilename + '.css' filename: baseFilename + '.css'
}).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 showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
} }
@ -221,10 +253,10 @@ window.onload = function () { // wait for load in a dumb way because B-0
}) })
} }
function generateCSS() { function generateCSS(preamble) {
var oneChecked = false var oneChecked = false
var lessFileIncludes = {} var lessFileIncludes = {}
$('#less-section input').each(function() { $('#less-section input').each(function () {
var $this = $(this) var $this = $(this)
var checked = $this.is(':checked') var checked = $this.is(':checked')
lessFileIncludes[$this.val()] = checked lessFileIncludes[$this.val()] = checked
@ -242,8 +274,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
$(this).val() && (vars[$(this).prev().text()] = $(this).val()) $(this).val() && (vars[$(this).prev().text()] = $(this).val())
}) })
var bsLessSource = generateLESS('bootstrap.less', lessFileIncludes, vars) var bsLessSource = preamble + generateLESS('bootstrap.less', lessFileIncludes, vars)
var themeLessSource = generateLESS('theme.less', lessFileIncludes, vars) var themeLessSource = preamble + generateLESS('theme.less', lessFileIncludes, vars)
try { try {
compileLESS(bsLessSource, 'bootstrap', result) compileLESS(bsLessSource, 'bootstrap', result)
@ -255,8 +287,27 @@ window.onload = function () { // wait for load in a dumb way because B-0
return result return result
} }
function generateJavascript() { function uglify(js) {
var ast = UglifyJS.parse(js)
ast.figure_out_scope()
var compressor = UglifyJS.Compressor()
var compressedAst = ast.transform(compressor)
compressedAst.figure_out_scope()
compressedAst.compute_char_frequency()
compressedAst.mangle_names()
var stream = UglifyJS.OutputStream()
compressedAst.print(stream)
return stream.toString()
}
function generateJS(preamble) {
var $checked = $('#plugin-section input:checked') var $checked = $('#plugin-section input:checked')
var jqueryCheck = 'if (typeof jQuery === "undefined") { throw new Error("Bootstrap\'s JavaScript requires jQuery") }\n\n'
if (!$checked.length) return false if (!$checked.length) return false
var js = $checked var js = $checked
@ -264,9 +315,12 @@ window.onload = function () { // wait for load in a dumb way because B-0
.toArray() .toArray()
.join('\n') .join('\n')
preamble = cw + preamble
js = jqueryCheck + js
return { return {
'bootstrap.js': js, 'bootstrap.js': preamble + js,
'bootstrap.min.js': cw + uglify(js) 'bootstrap.min.js': preamble + uglify(js)
} }
} }
@ -312,7 +366,6 @@ window.onload = function () { // wait for load in a dumb way because B-0
}) })
var $compileBtn = $('#btn-compile') var $compileBtn = $('#btn-compile')
var $downloadBtn = $('#btn-download')
$compileBtn.on('click', function (e) { $compileBtn.on('click', function (e) {
var configData = getCustomizerData() var configData = getCustomizerData()
@ -322,25 +375,55 @@ window.onload = function () { // wait for load in a dumb way because B-0
$compileBtn.attr('disabled', 'disabled') $compileBtn.attr('disabled', 'disabled')
generateZip(generateCSS(), generateJavascript(), generateFonts(), configJson, function (blob) { createGist(configJson, function (gistUrl, customizerUrl) {
$compileBtn.removeAttr('disabled') configData.customizerUrl = customizerUrl
saveAs(blob, 'bootstrap.zip') configJson = JSON.stringify(configData, null, 2)
createGist(configJson)
var preamble = '/*!\n' +
' * Generated using the Bootstrap Customizer (' + customizerUrl + ')\n' +
' * Config saved to config.json and ' + gistUrl + '\n' +
' */\n'
generateZip(generateCSS(preamble), generateJS(preamble), generateFonts(), configJson, function (blob) {
$compileBtn.removeAttr('disabled')
saveAs(blob, 'bootstrap.zip')
})
}) })
}) });
// browser support alerts // browser support alert
if (!window.URL && navigator.userAgent.toLowerCase().indexOf('safari') != -1) { (function () {
showCallout('Looks like you\'re using safari, which sadly doesn\'t have the best support' + function failback() {
'for HTML5 blobs. Because of this your file will be downloaded with the name <code>"untitled"</code>.' + $('.bs-docs-section, .bs-docs-sidebar').css('display', 'none')
'However, if you check your downloads folder, just rename this <code>"untitled"</code> file' + showCallout('Looks like your current browser doesn\'t support the Bootstrap Customizer. Please take a second ' +
'to <code>"bootstrap.zip"</code> and you should be good to go!') 'to <a href="http://browsehappy.com/">upgrade to a more modern browser</a> (other than Safari).', true)
} else if (!window.URL && !window.webkitURL) { }
$('.bs-docs-section, .bs-docs-sidebar').css('display', 'none') /**
* Based on:
showCallout('Looks like your current browser doesn\'t support the Bootstrap Customizer. Please take a second' + * Blob Feature Check v1.1.0
'to <a href="https://www.google.com/intl/en/chrome/browser/">upgrade to a more modern browser</a>.', true) * https://github.com/ssorallen/blob-feature-check/
} * License: Public domain (http://unlicense.org)
*/
var url = window.webkitURL || window.URL // Safari 6 uses "webkitURL".
var svg = new Blob(
['<svg xmlns=\'http://www.w3.org/2000/svg\'></svg>'],
{ type: 'image/svg+xml;charset=utf-8' }
)
var objectUrl = url.createObjectURL(svg);
if (/^blob:/.exec(objectUrl) === null) {
// `URL.createObjectURL` created a URL that started with something other
// than "blob:", which means it has been polyfilled and is not supported by
// this browser.
failback()
} else {
$('<img>')
.on('load', function () {
$compileBtn.prop('disabled', false)
})
.on('error', failback)
.attr('src', objectUrl)
}
})();
parseUrl() parseUrl()
} }

9
docs/assets/js/vendor/ZeroClipboard.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

27
docs/assets/js/vendor/blob.js vendored
View File

@ -1,11 +1,11 @@
/* Blob.js /* Blob.js
* A Blob implementation. * A Blob implementation.
* 2013-12-27 * 2014-05-31
* *
* By Eli Grey, http://eligrey.com * By Eli Grey, http://eligrey.com
* By Devin Samarin, https://github.com/eboyjr * By Devin Samarin, https://github.com/eboyjr
* License: X11/MIT * License: X11/MIT
* See LICENSE.md * See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
*/ */
/*global self, unescape */ /*global self, unescape */
@ -14,12 +14,21 @@
/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */ /*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
if (!(typeof Blob === "function" || typeof Blob === "object") || typeof URL === "undefined") (function (view) {
if ((typeof Blob === "function" || typeof Blob === "object") && typeof webkitURL !== "undefined") self.URL = webkitURL;
else var Blob = (function (view) {
"use strict"; "use strict";
var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || view.MSBlobBuilder || (function(view) { view.URL = view.URL || view.webkitURL;
if (view.Blob && view.URL) {
try {
new Blob;
return;
} catch (e) {}
}
// Internally we use a BlobBuilder implementation to base Blob off of
// in order to support older browsers that only have BlobBuilder
var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
var var
get_class = function(object) { get_class = function(object) {
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1]; return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
@ -150,10 +159,14 @@ else var Blob = (function (view) {
FB_proto.toString = function() { FB_proto.toString = function() {
return "[object Blob]"; return "[object Blob]";
}; };
FB_proto.close = function() {
this.size = 0;
delete this.data;
};
return FakeBlobBuilder; return FakeBlobBuilder;
}(view)); }(view));
return function Blob(blobParts, options) { view.Blob = function Blob(blobParts, options) {
var type = options ? (options.type || "") : ""; var type = options ? (options.type || "") : "";
var builder = new BlobBuilder(); var builder = new BlobBuilder();
if (blobParts) { if (blobParts) {

57
docs/assets/js/vendor/filesaver.js vendored
View File

@ -1,37 +1,37 @@
/* FileSaver.js /* FileSaver.js
* A saveAs() FileSaver implementation. * A saveAs() FileSaver implementation.
* 2014-01-24 * 2014-05-27
* *
* By Eli Grey, http://eligrey.com * By Eli Grey, http://eligrey.com
* License: X11/MIT * License: X11/MIT
* See LICENSE.md * See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
*/ */
/*global self */ /*global self */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true, /*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
plusplus: true */
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */ /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs = saveAs var saveAs = saveAs
// IE 10+ (native saveAs) // IE 10+ (native saveAs)
|| (navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator)) || (typeof navigator !== "undefined" &&
navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
// Everyone else // Everyone else
|| (function(view) { || (function(view) {
"use strict"; "use strict";
// IE <10 is explicitly unsupported // IE <10 is explicitly unsupported
if (/MSIE [1-9]\./.test(navigator.userAgent)) { if (typeof navigator !== "undefined" &&
/MSIE [1-9]\./.test(navigator.userAgent)) {
return; return;
} }
var var
doc = view.document doc = view.document
// only get URL when necessary in case BlobBuilder.js hasn't overridden it yet // only get URL when necessary in case Blob.js hasn't overridden it yet
, get_URL = function() { , get_URL = function() {
return view.URL || view.webkitURL || view; return view.URL || view.webkitURL || view;
} }
, URL = view.URL || view.webkitURL || view
, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a") , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
, can_use_save_link = !view.externalHost && "download" in save_link , can_use_save_link = !view.externalHost && "download" in save_link
, click = function(node) { , click = function(node) {
var event = doc.createEvent("MouseEvents"); var event = doc.createEvent("MouseEvents");
event.initMouseEvent( event.initMouseEvent(
@ -42,7 +42,7 @@ var saveAs = saveAs
} }
, webkit_req_fs = view.webkitRequestFileSystem , webkit_req_fs = view.webkitRequestFileSystem
, req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem , req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
, throw_outside = function (ex) { , throw_outside = function(ex) {
(view.setImmediate || view.setTimeout)(function() { (view.setImmediate || view.setTimeout)(function() {
throw ex; throw ex;
}, 0); }, 0);
@ -55,7 +55,7 @@ var saveAs = saveAs
while (i--) { while (i--) {
var file = deletion_queue[i]; var file = deletion_queue[i];
if (typeof file === "string") { // file is an object URL if (typeof file === "string") { // file is an object URL
URL.revokeObjectURL(file); get_URL().revokeObjectURL(file);
} else { // file is a File } else { // file is a File
file.remove(); file.remove();
} }
@ -101,8 +101,8 @@ var saveAs = saveAs
if (target_view) { if (target_view) {
target_view.location.href = object_url; target_view.location.href = object_url;
} else { } else {
window.open(object_url, "_blank"); window.open(object_url, "_blank");
} }
filesaver.readyState = filesaver.DONE; filesaver.readyState = filesaver.DONE;
dispatch_all(); dispatch_all();
} }
@ -122,20 +122,9 @@ var saveAs = saveAs
} }
if (can_use_save_link) { if (can_use_save_link) {
object_url = get_object_url(blob); object_url = get_object_url(blob);
// FF for Android has a nasty garbage collection mechanism
// that turns all objects that are not pure javascript into 'deadObject'
// this means `doc` and `save_link` are unusable and need to be recreated
// `view` is usable though:
doc = view.document;
save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a");
save_link.href = object_url; save_link.href = object_url;
save_link.download = name; save_link.download = name;
var event = doc.createEvent("MouseEvents"); click(save_link);
event.initMouseEvent(
"click", true, false, view, 0, 0, 0, 0, 0
, false, false, false, false, 0, null
);
save_link.dispatchEvent(event);
filesaver.readyState = filesaver.DONE; filesaver.readyState = filesaver.DONE;
dispatch_all(); dispatch_all();
return; return;
@ -229,6 +218,10 @@ var saveAs = saveAs
null; null;
view.addEventListener("unload", process_deletion_queue, false); view.addEventListener("unload", process_deletion_queue, false);
saveAs.unload = function() {
process_deletion_queue();
view.removeEventListener("unload", process_deletion_queue, false);
};
return saveAs; return saveAs;
}( }(
typeof self !== "undefined" && self typeof self !== "undefined" && self
@ -239,4 +232,10 @@ var saveAs = saveAs
// while `this` is nsIContentFrameMessageManager // while `this` is nsIContentFrameMessageManager
// with an attribute `content` that corresponds to the window // with an attribute `content` that corresponds to the window
if (typeof module !== "undefined") module.exports = saveAs; if (typeof module !== "undefined" && module !== null) {
module.exports = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
define([], function() {
return saveAs;
});
}

16
docs/assets/js/vendor/holder.js vendored
View File

@ -1,6 +1,6 @@
/*! /*!
Holder - 2.3.1 - client side image placeholders Holder - 2.3.2 - client side image placeholders
(c) 2012-2014 Ivan Malopinsky / http://imsky.co (c) 2012-2014 Ivan Malopinsky / http://imsky.co
Provided under the MIT License. Provided under the MIT License.
@ -269,7 +269,7 @@ function draw_svg(args){
font:font, font:font,
template:template template:template
}) })
return "data:image/svg+xml;base64,"+btoa(string); return "data:image/svg+xml;base64,"+btoa(unescape(encodeURIComponent(string)));
} }
function draw(args) { function draw(args) {
@ -500,6 +500,7 @@ app.add_image = function (src, el) {
}; };
app.run = function (o) { app.run = function (o) {
instance_config = extend({}, system_config) instance_config = extend({}, system_config)
preempted = true; preempted = true;
@ -531,6 +532,7 @@ app.run = function (o) {
bgnodes = [options.bgnodes]; bgnodes = [options.bgnodes];
} }
for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]); for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
var holdercss = document.getElementById("holderjs-style"); var holdercss = document.getElementById("holderjs-style");
if (!holdercss) { if (!holdercss) {
holdercss = document.createElement("style"); holdercss = document.createElement("style");
@ -538,13 +540,17 @@ app.run = function (o) {
holdercss.type = "text/css"; holdercss.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(holdercss); document.getElementsByTagName("head")[0].appendChild(holdercss);
} }
if (!options.nocss) { if (!options.nocss) {
if (holdercss.styleSheet) { if (holdercss.styleSheet) {
holdercss.styleSheet.cssText += options.stylesheet; holdercss.styleSheet.cssText += options.stylesheet;
} else { } else {
holdercss.appendChild(document.createTextNode(options.stylesheet)); if(options.stylesheet.length){
holdercss.appendChild(document.createTextNode(options.stylesheet));
}
} }
} }
var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)"); var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
for (var l = bgnodes.length, i = 0; i < l; i++) { for (var l = bgnodes.length, i = 0; i < l; i++) {
var src = window.getComputedStyle(bgnodes[i], null) var src = window.getComputedStyle(bgnodes[i], null)
@ -598,6 +604,10 @@ contentLoaded(win, function () {
window.attachEvent("onresize", resizable_update) window.attachEvent("onresize", resizable_update)
} }
preempted || app.run({}); preempted || app.run({});
if (typeof window.Turbolinks === "object") {
document.addEventListener("page:change", function() { app.run({}) })
}
}); });
if (typeof define === "function" && define.amd) { if (typeof define === "function" && define.amd) {
define([], function () { define([], function () {

12
docs/assets/js/vendor/jszip.min.js vendored
View File

File diff suppressed because one or more lines are too long

19
docs/assets/js/vendor/uglify.min.js vendored
View File

File diff suppressed because one or more lines are too long

20
docs/browser-bugs.html
View File

@ -25,9 +25,9 @@ lead: "A list of the browser bugs that Bootstrap is currently grappling with."
<tbody> <tbody>
<tr> <tr>
<td>Firefox</td> <td>Firefox</td>
<td>Allow use of line-height for <code>&lt;input&gt;</code></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=697451">Mozilla bug #697451</a></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/2985">#2985</a></td> <td><a href="https://github.com/twbs/bootstrap/issues/13453">#13453</a></td>
</tr> </tr>
<tr> <tr>
<td>Firefox</td> <td>Firefox</td>
@ -42,14 +42,14 @@ lead: "A list of the browser bugs that Bootstrap is currently grappling with."
<td><a href="https://github.com/twbs/bootstrap/issues/10690">#10690</a></td> <td><a href="https://github.com/twbs/bootstrap/issues/10690">#10690</a></td>
</tr> </tr>
<tr> <tr>
<td>Firefox <strong>&le;27</strong></td> <td>Firefox <strong>&lt;31</strong></td>
<td><code>position: relative;</code> doesn't work inside tables</td> <td><code>position: relative;</code> doesn't work inside tables</td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=63895">Mozilla bug #63895</a></td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=63895">Mozilla bug #63895</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/12467">#12467</a></td> <td><a href="https://github.com/twbs/bootstrap/issues/12467">#12467</a></td>
</tr> </tr>
<tr> <tr>
<td>Chrome</td> <td>Chrome</td>
<td>Weird button behavior with some number inputs</td> <td>Weird button behavior with some number <code>&lt;input&gt;</code>s</td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a></td> <td><a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</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></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></td>
</tr> </tr>
@ -67,7 +67,7 @@ lead: "A list of the browser bugs that Bootstrap is currently grappling with."
</tr> </tr>
<tr> <tr>
<td>Chrome</td> <td>Chrome</td>
<td>Unwanted vertical lines when printing styled <code>&lt;select&gt;s</code> on OS X</td> <td>Unwanted vertical lines when printing styled <code>&lt;select&gt;</code> on OS X</td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=282918">Chromium issue #282918</a></td> <td><a href="https://code.google.com/p/chromium/issues/detail?id=282918">Chromium issue #282918</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/11245">#11245</a></td> <td><a href="https://github.com/twbs/bootstrap/issues/11245">#11245</a></td>
</tr> </tr>
@ -91,10 +91,16 @@ lead: "A list of the browser bugs that Bootstrap is currently grappling with."
</tr> </tr>
<tr> <tr>
<td>Chrome</td> <td>Chrome</td>
<td><code>display: table-cell; width: 100%;</code> doesn't work correctly on date input</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://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> <td><a href="https://github.com/twbs/bootstrap/issues/12548">#12548</a></td>
</tr> </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> <tr>
<td>Safari</td> <td>Safari</td>
<td>Insufficient CSS percentage precision</td> <td>Insufficient CSS percentage precision</td>

1
docs/css.html
View File

@ -17,4 +17,3 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
{% include css/responsive-utilities.html %} {% include css/responsive-utilities.html %}
{% include css/less.html %} {% include css/less.html %}
{% include css/sass.html %} {% include css/sass.html %}
{% include css/rtl.html %}

41
docs/customize.html
View File

@ -5,6 +5,23 @@ slug: customize
lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version. lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
--- ---
<!-- less.js isn't IE8-compatible and throws an exception during initialization, so our Blob compatibility check and error messaging code never get called in that case.
So we use a conditional comment instead to inform folks about the lack of IE8 support.
The alert covers up the entire customizer UI.
-->
<!--[if lt IE 9]>
<style>
.bs-customizer,
.bs-docs-sidebar {
display: none;
}
</style>
<div class="alert alert-danger bs-customizer-alert-ie">
<strong>The Bootstrap Customizer does not support IE9 and below.</strong><br>
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
</div>
<![endif]-->
<!-- Customizer form --> <!-- Customizer form -->
<form class="bs-customizer" role="form"> <form class="bs-customizer" role="form">
<div class="bs-docs-section" id="less-section"> <div class="bs-docs-section" id="less-section">
@ -58,6 +75,12 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
Buttons Buttons
</label> </label>
</div> </div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="responsive-utilities.less">
Responsive utilities
</label>
</div>
</div><!-- .col-xs-6 .col-sm-4 --> </div><!-- .col-xs-6 .col-sm-4 -->
<div class="col-xs-6 col-sm-4"> <div class="col-xs-6 col-sm-4">
@ -88,7 +111,7 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,utilities.less,navs.less"> <input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,navs.less">
Navbar Navbar
</label> </label>
</div> </div>
@ -222,20 +245,6 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
Carousel Carousel
</label> </label>
</div> </div>
<h3>Utilities</h3>
<div class="checkbox">
<label>
<input type="checkbox" checked value="utilities.less" data-dependents="navbar.less">
Basic utilities
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="responsive-utilities.less">
Responsive utilities
</label>
</div>
</div><!-- .col-xs-6 .col-sm-4 --> </div><!-- .col-xs-6 .col-sm-4 -->
</div><!-- /.row --> </div><!-- /.row -->
</div> </div>
@ -356,7 +365,7 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
<p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p> <p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
<div class="bs-customize-download"> <div class="bs-customize-download">
<button type="submit" id="btn-compile" class="btn btn-block btn-lg btn-outline" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Compile and Download</button> <button type="submit" id="btn-compile" disabled class="btn btn-block btn-lg btn-outline" onclick="ga('send', 'event', 'Customize', 'Download', 'Customize and Download');">Compile and Download</button>
</div> </div>
</div><!-- /download --> </div><!-- /download -->
</form> </form>

5
docs/dist/css/bootstrap-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

442
docs/dist/css/bootstrap-theme.css vendored Normal file
View File

@ -0,0 +1,442 @@
/*!
* Bootstrap v3.2.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}
.btn-default:active,
.btn-primary:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active,
.btn-danger:active,
.btn-default.active,
.btn-primary.active,
.btn-success.active,
.btn-info.active,
.btn-warning.active,
.btn-danger.active {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn:active,
.btn.active {
background-image: none;
}
.btn-default {
text-shadow: 0 1px 0 #fff;
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #dbdbdb;
border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus {
background-color: #e0e0e0;
background-position: 0 -15px;
}
.btn-default:active,
.btn-default.active {
background-color: #e0e0e0;
border-color: #dbdbdb;
}
.btn-default:disabled,
.btn-default[disabled] {
background-color: #e0e0e0;
background-image: none;
}
.btn-primary {
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#2d6ca2));
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #2b669a;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #2d6ca2;
background-position: 0 -15px;
}
.btn-primary:active,
.btn-primary.active {
background-color: #2d6ca2;
border-color: #2b669a;
}
.btn-primary:disabled,
.btn-primary[disabled] {
background-color: #2d6ca2;
background-image: none;
}
.btn-success {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #3e8f3e;
}
.btn-success:hover,
.btn-success:focus {
background-color: #419641;
background-position: 0 -15px;
}
.btn-success:active,
.btn-success.active {
background-color: #419641;
border-color: #3e8f3e;
}
.btn-success:disabled,
.btn-success[disabled] {
background-color: #419641;
background-image: none;
}
.btn-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #28a4c9;
}
.btn-info:hover,
.btn-info:focus {
background-color: #2aabd2;
background-position: 0 -15px;
}
.btn-info:active,
.btn-info.active {
background-color: #2aabd2;
border-color: #28a4c9;
}
.btn-info:disabled,
.btn-info[disabled] {
background-color: #2aabd2;
background-image: none;
}
.btn-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #e38d13;
}
.btn-warning:hover,
.btn-warning:focus {
background-color: #eb9316;
background-position: 0 -15px;
}
.btn-warning:active,
.btn-warning.active {
background-color: #eb9316;
border-color: #e38d13;
}
.btn-warning:disabled,
.btn-warning[disabled] {
background-color: #eb9316;
background-image: none;
}
.btn-danger {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #b92c28;
}
.btn-danger:hover,
.btn-danger:focus {
background-color: #c12e2a;
background-position: 0 -15px;
}
.btn-danger:active,
.btn-danger.active {
background-color: #c12e2a;
border-color: #b92c28;
}
.btn-danger:disabled,
.btn-danger[disabled] {
background-color: #c12e2a;
background-image: none;
}
.thumbnail,
.img-thumbnail {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #e8e8e8;
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
background-repeat: repeat-x;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
background-color: #357ebd;
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd));
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
background-repeat: repeat-x;
}
.navbar-default {
background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
background-image: -o-linear-gradient(top, #fff 0%, #f8f8f8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8));
background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
}
.navbar-default .navbar-nav > .active > a {
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
background-image: -o-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f3f3f3));
background-image: linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
background-repeat: repeat-x;
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.navbar-inverse {
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
background-image: -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
}
.navbar-inverse .navbar-nav > .active > a {
background-image: -webkit-linear-gradient(top, #222 0%, #282828 100%);
background-image: -o-linear-gradient(top, #222 0%, #282828 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#282828));
background-image: linear-gradient(to bottom, #222 0%, #282828 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
background-repeat: repeat-x;
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
}
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
.alert {
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);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
}
.alert-success {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
background-repeat: repeat-x;
border-color: #b2dba1;
}
.alert-info {
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
background-repeat: repeat-x;
border-color: #9acfea;
}
.alert-warning {
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
background-repeat: repeat-x;
border-color: #f5e79e;
}
.alert-danger {
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
background-repeat: repeat-x;
border-color: #dca7a7;
}
.progress {
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar {
background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #3071a9 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9));
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-success {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-danger {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.list-group {
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 #3071a9;
background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #3278b3 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3278b3));
background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
background-repeat: repeat-x;
border-color: #3278b3;
}
.panel {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.panel-default > .panel-heading {
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
background-repeat: repeat-x;
}
.panel-primary > .panel-heading {
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd));
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
background-repeat: repeat-x;
}
.panel-success > .panel-heading {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
background-repeat: repeat-x;
}
.panel-info > .panel-heading {
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
background-repeat: repeat-x;
}
.panel-warning > .panel-heading {
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
background-repeat: repeat-x;
}
.panel-danger > .panel-heading {
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
background-repeat: repeat-x;
}
.well {
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
background-repeat: repeat-x;
border-color: #dcdcdc;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
}
/*# sourceMappingURL=bootstrap-theme.css.map */

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

File diff suppressed because one or more lines are too long

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