kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Merge branch 'master' into derp 

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
parent fed2b0f7eb ddee04038f
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:
- "0.10"
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
- 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:
- 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
- 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
- ./test-infra/s3_cache.py download npm-modules
- if [ "$TWBS_TEST" = validate-html ] && [ $TWBS_DO_VALIDATOR -ne 0 ]; then ./test-infra/s3_cache.py download rubygems; fi
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" = validate-html ]; then time ./test-infra/s3_cache.py upload rubygems pseudo_Gemfile.lock $(rvm gemdir); fi
- if [ "$TWBS_TEST" = core ]; then ./test-infra/s3_cache.py upload npm-modules; fi
- if [ "$TWBS_TEST" = validate-html ] && [ $TWBS_DO_VALIDATOR -ne 0 ]; then ./test-infra/s3_cache.py upload rubygems; fi
env:
global:
- JEKYLL_VERSION: 1.4.2
- JEKYLL_VERSION: 2.1.0
- SAUCE_USERNAME: bootstrap
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
- secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY="
@ -26,3 +30,5 @@ env:
- TWBS_TEST=sauce-js-unit
matrix:
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 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 generateRawFiles = require('./grunt/bs-raw-files-generator.js');
var updateShrinkwrap = require('./grunt/shrinkwrap.js');
// Project configuration.
grunt.initConfig({
@ -32,6 +31,7 @@ module.exports = function (grunt) {
' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
' * Licensed under <%= pkg.license.type %> (<%= pkg.license.url %>)\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',
// Task configuration.
@ -53,10 +53,13 @@ module.exports = function (grunt) {
src: 'js/*.js'
},
test: {
options: {
jshintrc: 'js/tests/unit/.jshintrc'
},
src: 'js/tests/unit/*.js'
},
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'
},
grunt: {
options: {
requireCamelCaseOrUpperCaseIdentifiers: null,
requireParenthesesAroundIIFE: true
},
src: '<%= jshint.grunt.src %>'
},
src: {
@ -78,6 +77,9 @@ module.exports = function (grunt) {
src: '<%= jshint.test.src %>'
},
assets: {
options: {
requireCamelCaseOrUpperCaseIdentifiers: null
},
src: '<%= jshint.assets.src %>'
}
},
@ -108,19 +110,13 @@ module.exports = function (grunt) {
uglify: {
options: {
report: 'min'
preserveComments: 'some'
},
bootstrap: {
options: {
banner: '<%= banner %>'
},
src: '<%= concat.bootstrap.dest %>',
dest: 'dist/js/<%= pkg.name %>.min.js'
},
customize: {
options: {
preserveComments: 'some'
},
src: [
'docs/assets/js/vendor/less.min.js',
'docs/assets/js/vendor/jszip.min.js',
@ -133,11 +129,10 @@ module.exports = function (grunt) {
dest: 'docs/assets/js/customize.min.js'
},
docsJs: {
options: {
preserveComments: 'some'
},
// NOTE: This src list is duplicated in footer.html; if making changes here, be sure to update the other copy too.
src: [
'docs/assets/js/vendor/holder.js',
'docs/assets/js/vendor/ZeroClipboard.min.js',
'docs/assets/js/src/application.js'
],
dest: 'docs/assets/js/docs.min.js'
@ -175,23 +170,21 @@ module.exports = function (grunt) {
files: {
'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: {
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: {
options: {
@ -216,14 +209,6 @@ module.exports = function (grunt) {
}
},
cssflip: {
rtl: {
files: {
'dist/css/<%= pkg.name %>-rtl.css': 'dist/css/<%= pkg.name %>.css'
}
}
},
csslint: {
options: {
csslintrc: 'less/.csslintrc'
@ -246,10 +231,15 @@ module.exports = function (grunt) {
cssmin: {
options: {
compatibility: 'ie8',
keepSpecialComments: '*',
noAdvanced: true, // turn advanced optimizations off until the issue is fixed in clean-css
report: 'min',
compatibility: 'ie8'
noAdvanced: true
},
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: {
src: [
@ -303,8 +293,8 @@ module.exports = function (grunt) {
expand: true,
cwd: './dist',
src: [
'{css,js}/*.min.*',
'css/*.map',
'css/*',
'js/*',
'fonts/*'
],
dest: 'docs/dist'
@ -330,14 +320,14 @@ module.exports = function (grunt) {
pretty: true,
data: function () {
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);
return {sections: parser.parseFile()};
return { sections: parser.parseFile() };
}
},
files: {
'docs/_includes/customizer-variables.html': 'docs/jade/customizer-variables.jade',
'docs/_includes/nav/customize.html': 'docs/jade/customizer-nav.jade'
'docs/_includes/customizer-variables.html': 'docs/_jade/customizer-variables.jade',
'docs/_includes/nav/customize.html': 'docs/_jade/customizer-nav.jade'
}
}
},
@ -389,6 +379,7 @@ module.exports = function (grunt) {
options: {
build: process.env.TRAVIS_JOB_ID,
concurrency: 10,
maxRetries: 3,
urls: ['http://127.0.0.1:3000/js/tests/index.html'],
browsers: grunt.file.readYAML('grunt/sauce_browsers.yml')
}
@ -398,35 +389,43 @@ module.exports = function (grunt) {
exec: {
npmUpdate: {
command: 'npm update'
},
npmShrinkWrap: {
command: 'npm shrinkwrap --dev'
}
}
});
// These plugins provide necessary tasks.
require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
require('load-grunt-tasks')(grunt, { scope: 'devDependencies' });
require('time-grunt')(grunt);
// Docs HTML validation task
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.
var testSubtasks = [];
// 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']);
}
// 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');
}
// Only run Sauce Labs tests if there's a Sauce access key
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined' &&
// 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('saucelabs-qunit');
}
@ -437,7 +436,7 @@ module.exports = function (grunt) {
// CSS distribution task.
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.
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']);
// Default task.
grunt.registerTask('default', ['test', 'dist', 'build-glyphicons-data', 'build-customizer', 'update-shrinkwrap']);
grunt.registerTask('default', ['test', 'dist', 'build-customizer']);
// Version numbering task.
// grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
// This can be overzealous, so its changes should always be manually reviewed!
grunt.registerTask('change-version-number', 'sed');
grunt.registerTask('build-glyphicons-data', generateGlyphiconsData);
// task for building customizer
grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
grunt.registerTask('build-customizer-html', 'jade');
grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
var banner = grunt.template.process('<%= banner %>');
generateRawFiles(banner);
generateRawFiles(grunt, banner);
});
// Task for updating the npm packages used by the Travis build.
grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', 'exec:npmShrinkWrap', '_update-shrinkwrap']);
grunt.registerTask('_update-shrinkwrap', function () { updateShrinkwrap.call(this, grunt); });
// Task for updating the cached npm packages used by the Travis build (which are controlled by test-infra/npm-shrinkwrap.json).
// This task should be run and the updated file should be committed whenever Bootstrap's dependencies change.
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)
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)
- [Bugs and feature requests](#bugs-and-feature-requests)
- [Documentation](#documentation)
- [Compiling CSS and JavaScript](#compiling-css-and-javascript)
- [Contributing](#contributing)
- [Community](#community)
- [Versioning](#versioning)
- [Authors](#authors)
- [Creators](#creators)
- [Copyright and license](#copyright-and-license)
## Quick start
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`.
- 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
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.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.
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.
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.
- **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à.
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
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
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.
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/>.
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.
## Authors
## Creators
**Mark Otto**

23
_config.yml
View File

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

7
bower.json
View File

@ -1,6 +1,7 @@
{
"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": [
"css",
"js",
@ -11,7 +12,9 @@
"framework",
"web"
],
"homepage": "http://getbootstrap.com",
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js",
"dist/fonts/glyphicons-halflings-regular.eot",
@ -20,7 +23,7 @@
"dist/fonts/glyphicons-halflings-regular.woff"
],
"ignore": [
".*",
"/.*",
"_config.yml",
"CNAME",
"composer.json",

5
composer.json
View File

@ -28,7 +28,10 @@
"license": "MIT",
"extra": {
"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.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@ -55,6 +55,11 @@
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%);
@ -75,6 +80,11 @@
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%);
@ -95,6 +105,11 @@
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%);
@ -115,6 +130,11 @@
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%);
@ -135,6 +155,11 @@
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%);
@ -155,6 +180,11 @@
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);
@ -324,6 +354,11 @@
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);

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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
url: http://littleco.com
expo_url: http://expo.getbootstrap.com/2014/02/12/little/
img: http://expo.getbootstrap.com/screenshots/little.jpg
- name: Red Antler
url: http://www.redantler.com/
expo_url: http://expo.getbootstrap.com/2014/02/24/redantler/
img: redantler
- name: Engine Yard
url: http://engineyard.com
expo_url: http://expo.getbootstrap.com/2014/02/10/engine-yard/
img: http://expo.getbootstrap.com/screenshots/engine-yard.jpg
- name: Riot Design
url: http://riotdesign.eu/en/
expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
img: riot
- name: Webflow
url: http://webflow.com
expo_url: http://expo.getbootstrap.com/2014/02/04/webflow/
img: http://expo.getbootstrap.com/screenshots/webflow.jpg
- name: Newsweek
url: http://www.newsweek.com/
expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
img: newsweek
- name: Sentry
url: https://getsentry.com
expo_url: http://expo.getbootstrap.com/2013/05/09/sentry/
img: http://expo.getbootstrap.com/screenshots/sentry.jpg
- name: Robinhood
url: https://www.robinhood.com
expo_url: http://expo.getbootstrap.com/2014/02/26/robinhood/
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>
{% endhighlight %}
<h2 id="alerts-dismissable">Dismissable alerts</h2>
<p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
<h2 id="alerts-dismissible">Dismissible alerts</h2>
<p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
<div class="bs-example">
<div class="alert alert-warning alert-dismissable" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<div class="alert alert-warning alert-dismissible" role="alert">
<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.
</div>
</div>
{% highlight html %}
<div class="alert alert-warning alert-dismissable" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<div class="alert alert-warning alert-dismissible" role="alert">
<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.
</div>
{% endhighlight %}

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

@ -21,13 +21,13 @@
<h4>Adapts to active nav states</h4>
<p>Built-in styles are included for placing badges in active states in pill navigations.</p>
<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><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<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">
<a href="#">
<span class="badge pull-right">42</span>
@ -48,7 +48,7 @@
</button>
</div>
{% highlight html %}
<ul class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">
<a href="#">
<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">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
@ -256,7 +256,7 @@
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
@ -266,7 +266,7 @@
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
@ -313,7 +313,7 @@
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<!-- Dropdown menu links -->
</ul>
</div>

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

@ -121,7 +121,7 @@
Dropdown
<span class="caret"></span>
</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>
</ul>
@ -194,7 +194,7 @@
</div>
<div class="bs-callout bs-callout-warning">
<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>
</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>
<div class="bs-example">
<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
<span class="caret"></span>
</button>
@ -22,7 +22,7 @@
</div><!-- /example -->
{% highlight html %}
<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
<span class="caret"></span>
</button>
@ -56,7 +56,7 @@
<p>Add a header to label sections of actions in any dropdown menu.</p>
<div class="bs-example">
<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
<span class="caret"></span>
</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>
<div class="bs-example">
<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
<span class="caret"></span>
</button>

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

@ -21,6 +21,20 @@
<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>
</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 %}
<span class="glyphicon glyphicon-search"></span>
{% endhighlight %}

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

@ -221,7 +221,7 @@
<div class="input-group">
<div class="input-group-btn">
<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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@ -237,7 +237,7 @@
<input type="text" class="form-control">
<div class="input-group-btn">
<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="#">Another action</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-danger">Danger</span>
{% 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>

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

@ -17,13 +17,17 @@
<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>
</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">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="icon-bar"></span>
<span class="icon-bar"></span>
@ -38,7 +42,7 @@
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<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">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@ -59,7 +63,7 @@
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<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">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@ -78,7 +82,7 @@
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="icon-bar"></span>
<span class="icon-bar"></span>
@ -93,8 +97,8 @@
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@ -114,8 +118,8 @@
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@ -140,6 +144,32 @@
</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>
<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>
@ -147,7 +177,7 @@
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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="icon-bar"></span>
<span class="icon-bar"></span>
@ -192,7 +222,7 @@
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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="icon-bar"></span>
<span class="icon-bar"></span>
@ -221,7 +251,7 @@
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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="icon-bar"></span>
<span class="icon-bar"></span>
@ -246,7 +276,7 @@
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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="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. -->
<div class="container-fluid">
<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="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. -->
<div class="container-fluid">
<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="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. -->
<div class="container-fluid">
<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="icon-bar"></span>
<span class="icon-bar"></span>
@ -407,7 +437,7 @@ body { padding-bottom: 70px; }
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="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>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<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><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
@ -27,14 +27,14 @@
<h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<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><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills">
<ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
@ -42,14 +42,14 @@
{% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<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><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked" role="tablist">
...
</ul>
{% 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>
</div>
<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><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<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><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs nav-justified">
<ul class="nav nav-tabs nav-justified" role="tablist">
...
</ul>
<ul class="nav nav-pills nav-justified">
<ul class="nav nav-pills nav-justified" role="tablist">
...
</ul>
{% endhighlight %}
@ -93,14 +93,14 @@
</div>
<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 class="disabled"><a href="#">Disabled link</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills">
<ul class="nav nav-pills" role="tablist">
...
<li class="disabled"><a href="#">Disabled link</a></li>
...
@ -113,7 +113,7 @@
<h3>Tabs with dropdowns</h3>
<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><a href="#">Help</a></li>
<li class="dropdown">
@ -131,13 +131,13 @@
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs">
<ul class="nav nav-tabs" role="tablist">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
@ -147,7 +147,7 @@
<h3>Pills with dropdowns</h3>
<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><a href="#">Help</a></li>
<li class="dropdown">
@ -165,13 +165,13 @@
</ul>
</div><!-- /example -->
{% highlight html %}
<ul class="nav nav-pills">
<ul class="nav nav-pills" role="tablist">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>

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

@ -22,6 +22,7 @@
<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>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
<div class="bs-example">
<div class="panel panel-default">
<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>
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-example">
<div class="progress progress-striped" >
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<div class="progress">
<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>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<div class="progress">
<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>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<div class="progress">
<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>
</div>
</div>
</div>
{% highlight html %}
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<div class="progress">
<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>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<div class="progress">
<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>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<div class="progress">
<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>
</div>
</div>
{% endhighlight %}
<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="progress progress-striped active">
<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">
<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>
{% highlight html %}
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<div class="progress">
<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>
@ -186,7 +186,7 @@
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</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>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
@ -199,7 +199,7 @@
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</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>
</div>
<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>
<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>
<div class="bs-example">
<div class="embed-responsive embed-responsive-16by9">

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

@ -46,7 +46,7 @@
<div class="row">
<div class="col-sm-6 col-md-4">
<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">
<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>
@ -56,7 +56,7 @@
</div>
<div class="col-sm-6 col-md-4">
<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">
<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>
@ -66,7 +66,7 @@
</div>
<div class="col-sm-6 col-md-4">
<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">
<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>
@ -80,7 +80,7 @@
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="...">
<img data-src="holder.js/300x300" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>

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

@ -88,7 +88,7 @@
<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>
<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">
<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>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>

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>
<p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
<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>
{% 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 %}
<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>
</form>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<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>
</div>
<div class="bs-callout bs-callout-warning">
<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>
</div>
<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>
<div class="bs-callout bs-callout-danger">
<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 class="bs-callout bs-callout-warning">
<h4>Always add labels</h4>
@ -95,6 +95,12 @@
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
@ -207,7 +213,8 @@
{% endhighlight %}
<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>
<div class="bs-example">
<form role="form">
@ -217,6 +224,12 @@
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<br>
<div class="radio">
<label>
@ -230,6 +243,12 @@
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
@ -239,6 +258,12 @@
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
@ -252,9 +277,15 @@
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
{% 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>
<div class="bs-example">
<form role="form">
@ -268,6 +299,18 @@
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</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 -->
{% highlight html %}
<label class="checkbox-inline">
@ -279,6 +322,16 @@
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</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 %}
<h3>Selects</h3>
@ -468,6 +521,30 @@
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</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>
</div><!-- /.bs-example -->
{% highlight html %}
@ -483,13 +560,37 @@
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</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 %}
<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>
<div class="bs-callout bs-callout-warning">
<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 class="bs-example">
<form role="form">
@ -528,7 +629,7 @@
</div>
{% 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">
<form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback">
@ -571,6 +672,23 @@
</form>
{% 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>
<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>
{% 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>
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<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>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>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>
</ul>
<p>Look to the examples for applying these principles to your code.</p>
@ -67,49 +68,49 @@
</thead>
<tbody>
<tr>
<th>Grid behavior</th>
<th class="text-nowrap">Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th>Container width</th>
<th class="text-nowrap">Container width</th>
<td>None (auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<th>Class prefix</th>
<th class="text-nowrap">Class prefix</th>
<td><code>.col-xs-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr>
<th># of columns</th>
<th class="text-nowrap"># of columns</th>
<td colspan="4">12</td>
</tr>
<tr>
<th>Column width</th>
<th class="text-nowrap">Column width</th>
<td class="text-muted">Auto</td>
<td>~62px</td>
<td>~81px</td>
<td>~97px</td>
</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>
</tr>
<tr>
<th>Nestable</th>
<th class="text-nowrap">Nestable</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th>Offsets</th>
<th class="text-nowrap">Offsets</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th>Column ordering</th>
<th class="text-nowrap">Column ordering</th>
<td colspan="4">Yes</td>
</tr>
</tbody>
@ -252,6 +253,23 @@
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</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 %}
<h3 id="grid-responsive-resets">Responsive column resets</h3>
@ -329,30 +347,30 @@
<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="col-md-9">
Level 1: .col-md-9
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row show-grid">
<div class="col-md-6">
Level 2: .col-md-6
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-md-6">
Level 2: .col-md-6
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>

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

@ -40,15 +40,18 @@
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
{% 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>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<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>
{% 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 %}
@ -113,7 +116,7 @@
<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 %}
<!-- Usage as a class -->
<div class="clearfix">...</div>

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

@ -3,6 +3,10 @@
<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>
<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 %}
<img src="..." class="img-responsive" alt="Responsive image">
{% endhighlight %}

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

@ -7,7 +7,7 @@
<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>
<h2 id="less-variables">Variables</h2>
@ -28,7 +28,7 @@
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@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
{% endhighlight %}
@ -76,7 +76,7 @@
{% highlight scss %}
// Variables
@link-color: @brand-primary;
@link-color-hover: darken(@link-color, 15%);
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
@ -84,12 +84,12 @@ a {
text-decoration: none;
&:hover {
color: @link-color-hover;
color: @link-hover-color;
text-decoration: underline;
}
}
{% 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>
<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 %}
#gradient > .striped(#333; 45deg);
{% 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 %}
#gradient > .vertical-three-colors(#777; #333; .25; #000);
#gradient > .horizontal-three-colors(#777; #333; .25; #000);
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
{% 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>

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

@ -93,7 +93,7 @@
</table>
</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">
<table class="table table-bordered table-striped">
<thead>
@ -119,7 +119,7 @@
</table>
</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>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>
<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
@ -150,7 +150,7 @@
</tbody>
</table>
</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>

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>
<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="table-responsive">
<table class="table">

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

@ -107,12 +107,12 @@
<!-- Inline text elements -->
<h2 id="type-inline-text">Inline text elements</h2>
<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">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
</div>
{% 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 %}
@ -146,10 +146,10 @@
<h3>Underlined text</h3>
<p>To underline text use the <code>&lt;u&gt;</code> tag.</p>
<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>
{% highlight html %}
<u>This line of text is will render as underlined</u>
<u>This line of text will render as underlined</u>
{% endhighlight %}
<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-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
</div>
{% highlight html %}
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
{% 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 -->
<h2 id="type-abbreviations">Abbreviations</h2>

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

@ -3,25 +3,29 @@
<h2 id="colors">Colors</h2>
<p>Gray and brand colors for use across Bootstrap.</p>
<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">
<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 class="bs-customizer-input">
<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 class="bs-customizer-input">
<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 class="bs-customizer-input">
<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 class="bs-customizer-input">
<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 class="bs-customizer-input">
<label for="input-@brand-primary">@brand-primary</label>
@ -502,6 +506,7 @@
<div class="bs-customizer-input">
<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"/>
<p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p>
</div>
</div>
<h2 id="media-queries-breakpoints">Media queries breakpoints</h2>
@ -510,18 +515,22 @@
<div class="bs-customizer-input">
<label for="input-@screen-xs">@screen-xs</label>
<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 class="bs-customizer-input">
<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"/>
<p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.0</p>
</div>
<div class="bs-customizer-input">
<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"/>
<p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p>
</div>
<div class="bs-customizer-input">
<label for="input-@screen-sm">@screen-sm</label>
<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 class="bs-customizer-input">
<label for="input-@screen-sm-min">@screen-sm-min</label>
@ -530,10 +539,12 @@
<div class="bs-customizer-input">
<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"/>
<p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p>
</div>
<div class="bs-customizer-input">
<label for="input-@screen-md">@screen-md</label>
<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 class="bs-customizer-input">
<label for="input-@screen-md-min">@screen-md-min</label>
@ -542,10 +553,12 @@
<div class="bs-customizer-input">
<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"/>
<p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p>
</div>
<div class="bs-customizer-input">
<label for="input-@screen-lg">@screen-lg</label>
<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 class="bs-customizer-input">
<label for="input-@screen-lg-min">@screen-lg-min</label>
@ -554,6 +567,7 @@
<div class="bs-customizer-input">
<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"/>
<p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p>
</div>
<div class="bs-customizer-input">
<label for="input-@screen-xs-max">@screen-xs-max</label>
@ -716,7 +730,7 @@
</div>
<div class="bs-customizer-input">
<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 class="bs-customizer-input">
<label for="input-@navbar-inverse-bg">@navbar-inverse-bg</label>
@ -1690,6 +1704,11 @@
<h2 id="type">Type</h2>
<p></p>
<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">
<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"/>
@ -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"/>
<p class="help-block">Page header border color</p>
</div>
</div>
<h2 id="miscellaneous">Miscellaneous</h2>
<p></p>
<div class="row">
<div class="bs-customizer-input">
<label for="input-@dl-horizontal-offset">@dl-horizontal-offset</label>
<input id="input-@dl-horizontal-offset" type="text" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control"/>
<p class="help-block">Width of horizontal description list titles</p>
</div>
<div class="bs-customizer-input">
<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"/>
<p class="help-block">Horizontal line color.</p>
</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>
<!-- 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
================================================== -->
<!-- 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>
{% else %}
<script src="../dist/js/bootstrap.js"></script>
{% endif %}
{% if site.github %}
<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" %}
<script src="../assets/js/customize.min.js"></script>
{% endif %}

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

@ -20,7 +20,7 @@
<tr>
<th>Android</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
<td class="text-muted">N/A</td>
@ -106,13 +106,16 @@
<h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3>
<p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
<h3 id="support-ie8-font-face">Internet Explorer 8 and @font-face</h3>
<p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <a href="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p>
<h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3>
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>&lt;meta&gt;</code> tag in your pages:</p>
{% highlight html %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endhighlight %}
<p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
<p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
<p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
<h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
@ -141,7 +144,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
}
{% 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>As a heads up, we include this in the Bootstrap docs as an example.</p>
<p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p>
<h3 id="support-safari-percentages">Safari percent rounding</h3>
<p>As of Safari 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>
<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>
<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>
<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>
<p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
<h4>Select menus</h4>
<p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
<p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <a href="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
{% highlight html %}
<script>
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>
{% endhighlight %}
<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>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</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>
</div>
<div class="col-sm-4">
<h3 id="download-source">Source code</h3>
<p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="{{ 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>
<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>
</div>
<div class="col-sm-4">
<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.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>
</div>
</div>

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

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

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 -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- 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 -->
<script src="js/bootstrap.min.js"></script>
</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>
<ul>
<li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/fr">Bootstrap en Français (French)</a></li>
<li><a href="http://holdirbootstrap.de/">Bootstrap auf Deutsch (German)</a></li>
<li><a href="http://bootstrapk.com/BS3/">Bootstrap 한국어 (Korean)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
<li><a href="http://twbs.site-konstruktor.com.ua">Bootstrap ua Українською (Ukrainian)</a></li>
{% for language in site.data.translations %}
<li><a href="{{ language.url }}" hreflang="{{ language.code }}">{{ language.description }} ({{ language.name }})</a></li>
{% endfor %}
</ul>
<p><strong class="text-danger">We don't help organize or host translations, we just link to them.</strong></p>
<p>Finished a new or better translation? Open a pull request to add it to our list.</p>

44
docs/_includes/header.html
View File

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

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

@ -7,7 +7,7 @@
<hr class="bs-docs-separator">
<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>
<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>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>
<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>
</table>
</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>
<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="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
@ -52,8 +56,8 @@
</div><!-- /example -->
{% highlight html %}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
@ -66,10 +70,14 @@
<h4>Radio</h4>
<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="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
@ -81,8 +89,8 @@
</div><!-- /example -->
{% highlight html %}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
@ -136,7 +144,7 @@ $('.btn').button()
<div class="bs-callout bs-callout-danger">
<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>
<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="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
@ -21,11 +21,13 @@
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
</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="sr-only">Previous</span>
</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="sr-only">Next</span>
</a>
</div>
</div><!-- /example -->
@ -39,22 +41,30 @@
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- 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="sr-only">Previous</span>
</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="sr-only">Next</span>
</a>
</div>
{% 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="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
<div class="carousel-caption">
@ -96,16 +106,18 @@
</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="sr-only">Previous</span>
</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="sr-only">Next</span>
</a>
</div>
</div><!-- /example -->
{% highlight html %}
<div class="item active">
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
@ -122,11 +134,11 @@
<h2 id="carousel-usage">Usage</h2>
<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>
<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>
<p>Call carousel manually with:</p>
@ -197,6 +209,11 @@ $('.carousel').carousel({
<h3>Events</h3>
<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">
<table class="table table-bordered table-striped">
<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">
<div class="container-fluid">
<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="icon-bar"></span>
<span class="icon-bar"></span>
@ -20,7 +20,7 @@
<div class="collapse navbar-collapse bs-example-js-navbar-collapse">
<ul class="nav navbar-nav">
<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">
<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>
@ -30,7 +30,7 @@
</ul>
</li>
<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">
<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>
@ -42,7 +42,7 @@
</ul>
<ul class="nav navbar-nav navbar-right">
<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">
<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>
@ -59,10 +59,10 @@
<h3>Within pills</h3>
<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="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">
<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>
@ -72,7 +72,7 @@
</ul>
</li>
<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">
<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>
@ -82,7 +82,7 @@
</ul>
</li>
<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">
<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>
@ -96,7 +96,9 @@
<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>
<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-content">
<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>
</div>
<div class="modal-body">
@ -43,7 +43,7 @@
<div class="modal-dialog">
<div class="modal-content">
<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>
</div>
<div class="modal-body">
@ -66,8 +66,8 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
<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>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
@ -117,7 +117,7 @@
<div class="modal-dialog">
<div class="modal-content">
<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>
</div>
<div class="modal-body">
@ -179,7 +179,7 @@
<div class="modal-content">
<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>
</div>
<div class="modal-body">
@ -193,7 +193,7 @@
<div class="modal-content">
<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>
</div>
<div class="modal-body">
@ -259,7 +259,9 @@
<td>remote</td>
<td>path</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 %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
{% endhighlight %}
@ -320,7 +322,7 @@ $('#myModal').modal({
</tr>
<tr>
<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>
</tbody>
</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
{% 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>
<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>
<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 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">
<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>
@ -69,8 +73,8 @@
{% endhighlight %}
<h4>Four directions</h4>
<div class="bs-example tooltip-demo">
<div class="bs-example-tooltips">
<div class="bs-example popover-demo">
<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.">
Popover on left
</button>
@ -105,12 +109,12 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
{% endhighlight %}
<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;">
<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>
{% 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 %}
{% highlight js %}
$('.popover-dismiss').popover({
@ -135,9 +139,9 @@ $('.popover-dismiss').popover({
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
<th style="width: 100px;">Type</th>
<th style="width: 50px;">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
@ -145,7 +149,34 @@ $('.popover-dismiss').popover({
<td>animation</td>
<td>boolean</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>
<td>html</td>
@ -157,50 +188,46 @@ $('.popover-dismiss').popover({
<td>placement</td>
<td>string | function</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>
<td>selector</td>
<td>string</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>
<td>trigger</td>
<td>template</td>
<td>string</td>
<td>'click'</td>
<td>how popover is triggered - click | hover | focus | manual</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>
<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>
<td>title</td>
<td>string | function</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>
<td>content</td>
<td>string | function</td>
<td>''</td>
<td>default content value if <code>data-content</code> attribute isn't present</td>
<td>trigger</td>
<td>string</td>
<td>'click'</td>
<td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</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>
<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>
<td>viewport</td>
<td>string | object</td>
<td>{ selector: 'body', padding: 0 }</td>
<td>
<p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
@ -263,79 +290,3 @@ $('#myPopover').on('hidden.bs.popover', function () {
})
{% endhighlight %}
</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">
<div class="container-fluid">
<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="icon-bar"></span>
<span class="icon-bar"></span>
@ -20,7 +20,7 @@
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li>
<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">
<li><a href="#one" tabindex="-1">one</a></li>
<li><a href="#two" tabindex="-1">two</a></li>
@ -65,7 +65,7 @@ body {
<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
<ul class="nav nav-tabs">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
@ -83,6 +83,10 @@ $('body').scrollspy({ target: '.navbar-example' })
<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>
</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>
<h4>.scrollspy('refresh')</h4>

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

@ -4,14 +4,14 @@
<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>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<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">
<li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
<li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
</ul>
</li>
</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>
{% highlight html %}
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- 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.
</p>
{% highlight html %}
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<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>
<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 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">
<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>
@ -54,16 +58,16 @@ $('#example').tooltip(options)
<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>
</div>
{% highlight html linenos %}
{% highlight html %}
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip top">
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
<div class="tooltip-arrow"></div>
</div>
{% endhighlight %}
@ -74,9 +78,9 @@ $('#example').tooltip(options)
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
<th style="width: 100px;">Type</th>
<th style="width: 50px;">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
@ -84,7 +88,25 @@ $('#example').tooltip(options)
<td>animation</td>
<td>boolean</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>
<td>html</td>
@ -96,42 +118,43 @@ $('#example').tooltip(options)
<td>placement</td>
<td>string | function</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>
<td>selector</td>
<td>string</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>
<td>title</td>
<td>string | function</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>
<td>trigger</td>
<td>string</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>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>viewport</td>
<td>string | object</td>
<td>{ selector: 'body', padding: 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>
<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>
<p>Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
</td>
</tr>
</tbody>

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

@ -60,6 +60,7 @@
<a href="#navbar">Navbar</a>
<ul class="nav">
<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-buttons">Buttons</a></li>
<li><a href="#navbar-text">Text</a></li>
@ -94,7 +95,7 @@
<a href="#alerts">Alerts</a>
<ul class="nav">
<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>
</ul>
</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-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-wrapping">Ex: Column wrapping</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-nesting">Nesting columns</a></li>
@ -32,6 +33,7 @@
<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-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-addresses">Addresses</a></li>
<li><a href="#type-blockquotes">Blockquotes</a></li>
@ -132,10 +134,3 @@
<li><a href="#sass-installation">Rails install</a></li>
</ul>
</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="#code">Code</a></li>
<li><a href="#type">Type</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul>
</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>
</ul>
</li>
<li>
<a href="#grunt">Compiling CSS and JavaScript</a>
<ul class="nav">
<li><a href="#grunt-installing">Installing Grunt</a></li>
<li><a href="#grunt-commands">Available Grunt commands</a></li>
<li><a href="#grunt-troubleshooting">Troubleshooting</a></li>
</ul>
</li>
<li>
<a href="#template">Basic template</a>
</li>
@ -36,6 +44,7 @@
<li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li>
<li><a href="#support-ie8-respondjs">IE8 and Respond.js</a></li>
<li><a href="#support-ie8-box-sizing">IE8 and box-sizing</a></li>
<li><a href="#support-ie8-font-face">IE8 and @font-face</a></li>
<li><a href="#support-ie-compatibility-modes">IE Compatibility modes</a></li>
<li><a href="#support-ie10-width">IE10 and Windows (Phone) 8</a></li>
<li><a href="#support-safari-percentages">Safari percent rounding</a></li>

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">
<div class="container">
<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="icon-bar"></span>
<span class="icon-bar"></span>
@ -28,8 +28,8 @@
</li>
</ul>
<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.blog }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Blog']);">Blog</a></li>
<li><a href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</nav>
</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-noconflict">No conflict</a></li>
<li><a href="#js-events">Events</a></li>
<li><a href="#callout-third-party-libs">Third-party libraries</a></li>
</ul>
</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 }}
<!-- </div> -->
<!-- <div class="col-md-3">
<div class="bs-docs-sidebar hidden-print" role="complementary">
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
<ul class="nav bs-docs-sidenav">
{% if page.slug == "getting-started" %}
{% include nav/getting-started.html %}
@ -45,11 +45,14 @@
<a class="back-to-top" href="#top">
Back to top
</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>
{% 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"?>
<!-- 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">
<svg version="1.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">
<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">
<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#">
<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 180 612 612" enable-background="new 0 180 612 612" xml:space="preserve">
<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">
<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
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"/>
<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,715.5,6,690V282c0-25.5,10-49.6,28.2-67.8S76.5,186,102,186H510 M510,180H102
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 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-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"/>
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-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.8V619z"/>
</g>
</g>
</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"?>
<!-- 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">
<svg version="1.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">
<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">
<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#">
<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 180 612 612" enable-background="new 0 180 612 612" xml:space="preserve">
<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">
<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
c10.5-9.8,15.8-23.8,15.8-41.8C399.2,454.8,394,441.2,383.5,431.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
C345.7,372.5,358.2,368.2,368.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"/>
<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,544.8,394,531.2,383.5,521.8z"/>
<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,462.5,358.2,458.2,368.2,449.8z"/>
<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,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
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
c11.3,16.2,17,36.4,17,60.8C461.7,584.5,459.2,597.6,454.2,609.8z"/>
</g>
</g>
</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"?>
<!-- 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">
<svg version="1.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">
<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#">
<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
c56.1,0,102,45.9,102,102V600z"/>
<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 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">
<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,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,102V510z"/>
<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-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#" 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"/>
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-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.8V439z"/>
</g>
</g>
</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
* 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);
background-repeat: repeat-x;
}
.bs-docs-masthead .bs-docs-booticon {
margin: 0 auto 30px;
}
@ -281,8 +261,7 @@ body {
@media (min-width: 768px) {
.bs-docs-masthead {
padding-top: 80px;
padding-bottom: 80px;
padding: 80px 0;
}
.bs-docs-masthead h1 {
font-size: 60px;
@ -492,16 +471,6 @@ body {
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) {
.bs-docs-featurette .img-responsive {
margin-top: 30px;
@ -520,6 +489,30 @@ body {
margin-right: 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 {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
@ -528,9 +521,33 @@ body {
border-top-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) */
.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;
}
.back-to-top:hover,
.bs-docs-theme-toggle:hover {
color: #563d7c;
text-decoration: none;
}
.bs-docs-sidebar .nav > .active > .nav {
display: block;
}
@ -724,7 +770,9 @@ h1[id] {
.bs-callout {
padding: 20px;
margin: 20px 0;
border-left: 3px solid #eee;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
}
.bs-callout h4 {
margin-top: 0;
@ -734,28 +782,29 @@ h1[id] {
margin-bottom: 0;
}
.bs-callout code {
background-color: #fff;
border-radius: 3px;
}
/* Tighten up space between multiple callouts */
.bs-callout + .bs-callout {
margin-top: -5px;
}
/* Variations */
.bs-callout-danger {
background-color: #fdf7f7;
border-color: #d9534f;
border-left-color: #d9534f;
}
.bs-callout-danger h4 {
color: #d9534f;
}
.bs-callout-warning {
background-color: #fcf8f2;
border-color: #f0ad4e;
border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
color: #f0ad4e;
}
.bs-callout-info {
background-color: #f4f8fa;
border-color: #5bc0de;
border-left-color: #5bc0de;
}
.bs-callout-info h4 {
color: #5bc0de;
@ -893,7 +942,6 @@ h1[id] {
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
background-color: #fafafa;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
@ -907,7 +955,7 @@ h1[id] {
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
color: #959595;
text-transform: uppercase;
letter-spacing: 1px;
content: "Example";
@ -1077,12 +1125,6 @@ h1[id] {
.bs-navbar-bottom-example .navbar-fixed-bottom {
position: absolute;
}
.bs-navbar-top-example {
border-radius: 0 0 4px 4px;
}
.bs-navbar-bottom-example {
border-radius: 4px 4px 0 0;
}
}
/* Pagination */
@ -1116,10 +1158,14 @@ h1[id] {
}
/* Example dropdowns */
.bs-example > .dropdown > .dropdown-toggle {
float: left;
}
.bs-example > .dropdown > .dropdown-menu {
position: static;
display: block;
margin-bottom: 5px;
clear: left;
}
/* Example tabbable tabs */
@ -1175,6 +1221,8 @@ h1[id] {
padding: 0;
margin-top: 0;
margin-bottom: 0;
word-break: normal;
word-wrap: nowrap;
white-space: nowrap;
background-color: transparent;
border: 0;
@ -1183,13 +1231,9 @@ h1[id] {
font-size: inherit;
color: #333; /* Effectively the base text color */
}
.highlight pre .lineno {
.highlight pre code:first-child {
display: inline-block;
width: 22px;
padding-right: 5px;
margin-right: 10px;
color: #bebec5;
text-align: right;
padding-right: 45px;
}
@ -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
*
* 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 */
#focusedInput {
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.
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/.
*/
/* global ZeroClipboard */
!function ($) {
'use strict';
$(function () {
// IE10 viewport hack for Surface/desktop Windows 8 bug
//
// 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)
}
// Scrollspy
var $window = $(window)
var $body = $(document.body)
// var navHeight = $('.navbar').outerHeight(true) + 10
$body.scrollspy({
target: '.bs-docs-toc-item',
target: '.bs-docs-sidebar'
})
$window.on('load', function () {
$body.scrollspy('refresh')
})
// $('.bs-docs-container [href=#]').click(function (e) {
// e.preventDefault()
// })
// Kill links
$('.bs-docs-container [href=#]').click(function (e) {
e.preventDefault()
})
// back to top
// setTimeout(function () {
// var $sideBar = $('.bs-docs-sidebar')
// Sidenav affixing
setTimeout(function () {
var $sideBar = $('.bs-docs-sidebar')
// $sideBar.affix({
// offset: {
// top: function () {
// var offsetTop = $sideBar.offset().top
// var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
// var navOuterHeight = $('.bs-docs-nav').height()
$sideBar.affix({
offset: {
top: function () {
var offsetTop = $sideBar.offset().top
var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
var navOuterHeight = $('.bs-docs-nav').height()
// return (this.top = offsetTop - navOuterHeight - sideBarMargin)
// },
// bottom: function () {
// return (this.bottom = $('.bs-docs-footer').outerHeight(true))
// }
// }
// })
// }, 100)
return (this.top = offsetTop - navOuterHeight - sideBarMargin)
},
bottom: function () {
return (this.bottom = $('.bs-docs-footer').outerHeight(true))
}
}
})
}, 100)
// setTimeout(function () {
// $('.bs-top').affix()
// }, 100)
setTimeout(function () {
$('.bs-top').affix()
}, 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({
selector: '[data-toggle=tooltip]',
selector: '[data-toggle="tooltip"]',
container: 'body'
})
$('.popover-demo').popover({
selector: '[data-toggle="popover"]',
container: 'body'
})
// Demos within modals
$('.tooltip-test').tooltip()
$('.popover-test').popover()
$('.bs-docs-navbar').tooltip({
selector: 'a[data-toggle=tooltip]',
container: '.bs-docs-navbar .nav'
})
// popover demo
// Default & dismissible popover demos
$('.bs-docs-popover').popover()
$('.bs-docs-popover-dismiss').popover({ trigger: 'focus' })
// Popover dismiss on next click
$('.bs-docs-popover-dismiss').popover({
trigger: 'focus'
// Button state demo
$('#loading-example-btn').click(function () {
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)

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

@ -6,9 +6,12 @@
* 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
'use strict';
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' +
' * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n' +
' */\n\n'
@ -24,6 +27,12 @@ window.onload = function () { // wait for load in a dumb way because B-0
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) {
var callout = $('<div class="bs-callout bs-callout-danger">' +
'<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, ' '))
}
function createGist(configJson) {
function createGist(configJson, callback) {
var data = {
description: 'Bootstrap Customizer Config',
'public': true,
@ -60,11 +69,21 @@ window.onload = function () { // wait for load in a dumb way because B-0
data: JSON.stringify(data)
})
.success(function (result) {
var gistUrl = result.html_url;
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) {
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) {
var fontsFolder = zip.folder('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)
}
function generateCustomCSS(vars) {
function generateCustomLess(vars) {
var result = ''
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 lessLines = __less[lessFilename].split('\n')
for (var i = 0, imports = []; i < lessLines.length; i++) {
var match = IMPORT_REGEX.exec(lessLines[i])
if (match) imports.push(match[1])
}
var imports = []
$.each(lessLines, function (index, lessLine) {
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
}
@ -189,7 +218,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
function generateLESS(lessFilename, lessFileIncludes, vars) {
var lessSource = __less[lessFilename]
$.each(includedLessFilenames(lessFilename), function(index, filename) {
var lessFilenames = includedLessFilenames(lessFilename)
$.each(lessFilenames, function (index, filename) {
var fileInclude = lessFileIncludes[filename]
// 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
// 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
}
@ -212,7 +242,9 @@ window.onload = function () { // wait for load in a dumb way because B-0
paths: ['variables.less', 'mixins.less'],
optimization: 0,
filename: baseFilename + '.css'
}).parse(lessSource, function (err, tree) {
})
parser.parse(lessSource, function (err, tree) {
if (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 lessFileIncludes = {}
$('#less-section input').each(function() {
$('#less-section input').each(function () {
var $this = $(this)
var checked = $this.is(':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())
})
var bsLessSource = generateLESS('bootstrap.less', lessFileIncludes, vars)
var themeLessSource = generateLESS('theme.less', lessFileIncludes, vars)
var bsLessSource = preamble + generateLESS('bootstrap.less', lessFileIncludes, vars)
var themeLessSource = preamble + generateLESS('theme.less', lessFileIncludes, vars)
try {
compileLESS(bsLessSource, 'bootstrap', result)
@ -255,8 +287,27 @@ window.onload = function () { // wait for load in a dumb way because B-0
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 jqueryCheck = 'if (typeof jQuery === "undefined") { throw new Error("Bootstrap\'s JavaScript requires jQuery") }\n\n'
if (!$checked.length) return false
var js = $checked
@ -264,9 +315,12 @@ window.onload = function () { // wait for load in a dumb way because B-0
.toArray()
.join('\n')
preamble = cw + preamble
js = jqueryCheck + js
return {
'bootstrap.js': js,
'bootstrap.min.js': cw + uglify(js)
'bootstrap.js': preamble + 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 $downloadBtn = $('#btn-download')
$compileBtn.on('click', function (e) {
var configData = getCustomizerData()
@ -322,25 +375,55 @@ window.onload = function () { // wait for load in a dumb way because B-0
$compileBtn.attr('disabled', 'disabled')
generateZip(generateCSS(), generateJavascript(), generateFonts(), configJson, function (blob) {
$compileBtn.removeAttr('disabled')
saveAs(blob, 'bootstrap.zip')
createGist(configJson)
createGist(configJson, function (gistUrl, customizerUrl) {
configData.customizerUrl = customizerUrl
configJson = JSON.stringify(configData, null, 2)
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
if (!window.URL && navigator.userAgent.toLowerCase().indexOf('safari') != -1) {
showCallout('Looks like you\'re using safari, which sadly doesn\'t have the best support' +
'for HTML5 blobs. Because of this your file will be downloaded with the name <code>"untitled"</code>.' +
'However, if you check your downloads folder, just rename this <code>"untitled"</code> file' +
'to <code>"bootstrap.zip"</code> and you should be good to go!')
} else if (!window.URL && !window.webkitURL) {
$('.bs-docs-section, .bs-docs-sidebar').css('display', 'none')
showCallout('Looks like your current browser doesn\'t support the Bootstrap Customizer. Please take a second' +
'to <a href="https://www.google.com/intl/en/chrome/browser/">upgrade to a more modern browser</a>.', true)
}
// browser support alert
(function () {
function failback() {
$('.bs-docs-section, .bs-docs-sidebar').css('display', 'none')
showCallout('Looks like your current browser doesn\'t support the Bootstrap Customizer. Please take a second ' +
'to <a href="http://browsehappy.com/">upgrade to a more modern browser</a> (other than Safari).', true)
}
/**
* Based on:
* Blob Feature Check v1.1.0
* 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()
}

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
* A Blob implementation.
* 2013-12-27
* 2014-05-31
*
* By Eli Grey, http://eligrey.com
* By Devin Samarin, https://github.com/eboyjr
* License: X11/MIT
* See LICENSE.md
* See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
*/
/*global self, unescape */
@ -14,12 +14,21 @@
/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
if (!(typeof Blob === "function" || typeof Blob === "object") || typeof URL === "undefined")
if ((typeof Blob === "function" || typeof Blob === "object") && typeof webkitURL !== "undefined") self.URL = webkitURL;
else var Blob = (function (view) {
(function (view) {
"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
get_class = function(object) {
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
@ -150,10 +159,14 @@ else var Blob = (function (view) {
FB_proto.toString = function() {
return "[object Blob]";
};
FB_proto.close = function() {
this.size = 0;
delete this.data;
};
return FakeBlobBuilder;
}(view));
return function Blob(blobParts, options) {
view.Blob = function Blob(blobParts, options) {
var type = options ? (options.type || "") : "";
var builder = new BlobBuilder();
if (blobParts) {

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

@ -1,37 +1,37 @@
/* FileSaver.js
* A saveAs() FileSaver implementation.
* 2014-01-24
* A saveAs() FileSaver implementation.
* 2014-05-27
*
* By Eli Grey, http://eligrey.com
* License: X11/MIT
* See LICENSE.md
* By Eli Grey, http://eligrey.com
* License: X11/MIT
* See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
*/
/*global self */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
plusplus: true */
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs = saveAs
// IE 10+ (native saveAs)
|| (navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
|| (typeof navigator !== "undefined" &&
navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
// Everyone else
|| (function(view) {
"use strict";
// IE <10 is explicitly unsupported
if (/MSIE [1-9]\./.test(navigator.userAgent)) {
if (typeof navigator !== "undefined" &&
/MSIE [1-9]\./.test(navigator.userAgent)) {
return;
}
var
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() {
return view.URL || view.webkitURL || view;
}
, URL = view.URL || view.webkitURL || view
, 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) {
var event = doc.createEvent("MouseEvents");
event.initMouseEvent(
@ -42,7 +42,7 @@ var saveAs = saveAs
}
, webkit_req_fs = view.webkitRequestFileSystem
, req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
, throw_outside = function (ex) {
, throw_outside = function(ex) {
(view.setImmediate || view.setTimeout)(function() {
throw ex;
}, 0);
@ -55,7 +55,7 @@ var saveAs = saveAs
while (i--) {
var file = deletion_queue[i];
if (typeof file === "string") { // file is an object URL
URL.revokeObjectURL(file);
get_URL().revokeObjectURL(file);
} else { // file is a File
file.remove();
}
@ -101,8 +101,8 @@ var saveAs = saveAs
if (target_view) {
target_view.location.href = object_url;
} else {
window.open(object_url, "_blank");
}
window.open(object_url, "_blank");
}
filesaver.readyState = filesaver.DONE;
dispatch_all();
}
@ -122,20 +122,9 @@ var saveAs = saveAs
}
if (can_use_save_link) {
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.download = name;
var event = doc.createEvent("MouseEvents");
event.initMouseEvent(
"click", true, false, view, 0, 0, 0, 0, 0
, false, false, false, false, 0, null
);
save_link.dispatchEvent(event);
click(save_link);
filesaver.readyState = filesaver.DONE;
dispatch_all();
return;
@ -229,6 +218,10 @@ var saveAs = saveAs
null;
view.addEventListener("unload", process_deletion_queue, false);
saveAs.unload = function() {
process_deletion_queue();
view.removeEventListener("unload", process_deletion_queue, false);
};
return saveAs;
}(
typeof self !== "undefined" && self
@ -239,4 +232,10 @@ var saveAs = saveAs
// while `this` is nsIContentFrameMessageManager
// 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;
});
}

20
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
Provided under the MIT License.
@ -269,7 +269,7 @@ function draw_svg(args){
font:font,
template:template
})
return "data:image/svg+xml;base64,"+btoa(string);
return "data:image/svg+xml;base64,"+btoa(unescape(encodeURIComponent(string)));
}
function draw(args) {
@ -500,6 +500,7 @@ app.add_image = function (src, el) {
};
app.run = function (o) {
instance_config = extend({}, system_config)
preempted = true;
@ -507,12 +508,12 @@ app.run = function (o) {
images = [],
imageNodes = [],
bgnodes = [];
if(options.use_canvas != null && options.use_canvas){
instance_config.use_canvas = true;
instance_config.use_svg = false;
}
if (typeof (options.images) == "string") {
imageNodes = selector(options.images);
} else if (window.NodeList && options.images instanceof window.NodeList) {
@ -531,6 +532,7 @@ app.run = function (o) {
bgnodes = [options.bgnodes];
}
for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
var holdercss = document.getElementById("holderjs-style");
if (!holdercss) {
holdercss = document.createElement("style");
@ -538,13 +540,17 @@ app.run = function (o) {
holdercss.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(holdercss);
}
if (!options.nocss) {
if (holdercss.styleSheet) {
holdercss.styleSheet.cssText += options.stylesheet;
} else {
holdercss.appendChild(document.createTextNode(options.stylesheet));
if(options.stylesheet.length){
holdercss.appendChild(document.createTextNode(options.stylesheet));
}
}
}
var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
for (var l = bgnodes.length, i = 0; i < l; i++) {
var src = window.getComputedStyle(bgnodes[i], null)
@ -598,6 +604,10 @@ contentLoaded(win, function () {
window.attachEvent("onresize", resizable_update)
}
preempted || app.run({});
if (typeof window.Turbolinks === "object") {
document.addEventListener("page:change", function() { app.run({}) })
}
});
if (typeof define === "function" && define.amd) {
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>
<tr>
<td>Firefox</td>
<td>Allow use of line-height for <code>&lt;input&gt;</code></td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">Mozilla bug #697451</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/2985">#2985</a></td>
<td><code>.table-bordered</code> with an empty <code>&lt;tbody&gt;</code> is missing borders</td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/13453">#13453</a></td>
</tr>
<tr>
<td>Firefox</td>
@ -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>
</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><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>
</tr>
<tr>
<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://github.com/twbs/bootstrap/issues/8350">#8350</a>, <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a></td>
</tr>
@ -67,7 +67,7 @@ lead: "A list of the browser bugs that Bootstrap is currently grappling with."
</tr>
<tr>
<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://github.com/twbs/bootstrap/issues/11245">#11245</a></td>
</tr>
@ -91,10 +91,16 @@ lead: "A list of the browser bugs that Bootstrap is currently grappling with."
</tr>
<tr>
<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://github.com/twbs/bootstrap/issues/12548">#12548</a></td>
</tr>
<tr>
<td>Chrome</td>
<td><code>&lt;input type="password"&gt;</code> sporadically causes bad widths on floated elements</td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=377346">Chrome issue #377346</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/13892">#13892</a></td>
</tr>
<tr>
<td>Safari</td>
<td>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/less.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.
---
<!-- 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 -->
<form class="bs-customizer" role="form">
<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
</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 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 class="checkbox">
<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
</label>
</div>
@ -222,20 +245,6 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
Carousel
</label>
</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><!-- /.row -->
</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>
<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><!-- /download -->
</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