2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-20 20:00:36 +03:00

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into patch-1

This commit is contained in:
Alexandr Kondrashov
2015-12-08 02:18:32 +03:00
225 changed files with 9256 additions and 11341 deletions
+3
View File
@@ -48,6 +48,9 @@ scss-lint-report.xml
# grunt-contrib-sass cache # grunt-contrib-sass cache
.sass-cache .sass-cache
# Jekyll metadata
docs/.jekyll-metadata
# Folders to ignore # Folders to ignore
bower_components bower_components
node_modules node_modules
+6
View File
@@ -0,0 +1,6 @@
javascript:
enabled: false
scss:
config_file: scss/.scss-lint.yml
enabled: true
ignore_file: scss/_normalize.scss
+17 -6
View File
@@ -3,21 +3,27 @@ language: node_js
git: git:
depth: 10 depth: 10
node_js: node_js:
- "0.12" - "4"
- "5"
before_install: before_install:
- rvm install 2.0.0 && rvm use 2.0.0 - rvm install 2.2
- rvm use 2.2 --fuzzy
- export GEMDIR=$(rvm gemdir)
- npm install -g npm@3
- "export TRAVIS_COMMIT_MSG=\"$(git log --format=%B --no-merges -n 1)\"" - "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 validator\]'; export TWBS_DO_VALIDATOR=$?; true
- echo "$TRAVIS_COMMIT_MSG" | grep '\[skip sauce\]'; export TWBS_DO_SAUCE=$?; true - echo "$TRAVIS_COMMIT_MSG" | grep '\[skip sauce\]'; export TWBS_DO_SAUCE=$?; true
- if [ "$TRAVIS_REPO_SLUG" = twbs-savage/bootstrap ]; then export TWBS_DO_VALIDATOR=0; fi - if [ "$TRAVIS_REPO_SLUG" = twbs-savage/bootstrap ]; then export TWBS_DO_VALIDATOR=0; fi
install: install:
- bundle install --deployment --jobs=3 - bundle install --deployment --jobs=3
- cp grunt/npm-shrinkwrap.json ./
- npm install -g grunt-cli - npm install -g grunt-cli
- npm install - npm install
cache: # Caching disabled due to https://github.com/travis-ci/travis-ci/issues/5092
directories: #cache:
- node_modules # directories:
- vendor/bundle # - node_modules
# - vendor/bundle
env: env:
global: global:
- SAUCE_USERNAME="bootstrap" - SAUCE_USERNAME="bootstrap"
@@ -30,6 +36,11 @@ env:
- TWBS_TEST=sauce-js-unit - TWBS_TEST=sauce-js-unit
matrix: matrix:
fast_finish: true fast_finish: true
exclude:
- node_js: "4"
env: TWBS_TEST=validate-html
- node_js: "4"
env: TWBS_TEST=sauce-js-unit
notifications: notifications:
slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH
webhooks: webhooks:
+4 -4
View File
@@ -19,14 +19,14 @@ and [submitting pull requests](#pull-requests), but please respect the following
restrictions: restrictions:
* Please **do not** use the issue tracker for personal support requests. Stack * Please **do not** use the issue tracker for personal support requests. Stack
Overflow ([`twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3) tag), [Slack](https://bootstrap-slack.herokuapp.com/) or [IRC](README.md#community) are better places to get help. Overflow ([`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4) tag), [Slack](https://bootstrap-slack.herokuapp.com/) or [IRC](README.md#community) are better places to get help.
* Please **do not** derail or troll issues. Keep the discussion on topic and * Please **do not** derail or troll issues. Keep the discussion on topic and
respect the opinions of others. respect the opinions of others.
* Please **do not** open issues or pull requests regarding the code in * Please **do not** open issues or pull requests regarding the code in
[`Normalize`](https://github.com/necolas/normalize.css) (open them in [`Normalize`](https://github.com/necolas/normalize.css) (open them in
their respective repositories). its repository).
* Please **do not** open issues regarding the official themes offered on <http://themes.getbootstrap.com/>. Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`. * Please **do not** open issues regarding the official themes offered on <http://themes.getbootstrap.com/>. Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
@@ -67,7 +67,7 @@ Guidelines for bug reports:
3. **Isolate the problem** &mdash; ideally create a [reduced test 3. **Isolate the problem** &mdash; ideally create a [reduced test
case](https://css-tricks.com/reduced-test-cases/) and a live example. case](https://css-tricks.com/reduced-test-cases/) and a live example.
[This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template. [This JS Bin](http://jsbin.com/qusafa/edit?html,output) is a helpful template.
A good bug report shouldn't leave others needing to chase you up for more A good bug report shouldn't leave others needing to chase you up for more
@@ -105,7 +105,7 @@ When feasible, we aim to report such upstream bugs to the relevant browser vendo
| Mozilla | Firefox | Gecko | https://bugzilla.mozilla.org/enter_bug.cgi | "Core" is normally the right product option to choose. | | Mozilla | Firefox | Gecko | https://bugzilla.mozilla.org/enter_bug.cgi | "Core" is normally the right product option to choose. |
| Apple | Safari | WebKit | https://bugs.webkit.org/enter_bug.cgi?product=WebKit <br> https://bugreport.apple.com | In Apple's bug reporter, choose "Safari" as the product. | | Apple | Safari | WebKit | https://bugs.webkit.org/enter_bug.cgi?product=WebKit <br> https://bugreport.apple.com | In Apple's bug reporter, choose "Safari" as the product. |
| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://code.google.com/p/chromium/issues/list | Click the "New issue" button. | | Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://code.google.com/p/chromium/issues/list | Click the "New issue" button. |
| Microsoft | Internet Explorer | Trident | https://connect.microsoft.com/IE/feedback/LoadSubmitFeedbackForm | | | Microsoft | Internet Explorer / Edge | Trident/EdgeHTML | https://connect.microsoft.com/IE/feedback/LoadSubmitFeedbackForm | |
### Issues bots ### Issues bots
+5 -6
View File
@@ -4,10 +4,9 @@
source 'https://rubygems.org' source 'https://rubygems.org'
group :development, :test do group :development, :test do
gem 'jekyll', '~> 2.5.3' gem 'jekyll', '~> 3.0.1'
gem 'jekyll-redirect-from', '~> 0.8.0' gem 'jekyll-redirect-from', '~> 0.9.0'
gem 'jekyll-sitemap', '~> 0.8.1' gem 'jekyll-sitemap', '~> 0.9.0'
gem 'rouge', '~> 1.9.1' gem 'sass', '~> 3.4.19'
gem 'sass', '~> 3.4.18' gem 'scss_lint', '~> 0.43'
gem 'scss_lint', '~> 0.41'
end end
+21 -55
View File
@@ -1,86 +1,52 @@
GEM GEM
remote: https://rubygems.org/ remote: https://rubygems.org/
specs: specs:
blankslate (2.1.2.4)
celluloid (0.16.0)
timers (~> 4.0.0)
classifier-reborn (2.0.3)
fast-stemmer (~> 1.0)
coffee-script (2.4.1)
coffee-script-source
execjs
coffee-script-source (1.9.1.1)
colorator (0.1) colorator (0.1)
execjs (2.6.0)
fast-stemmer (1.0.2)
ffi (1.9.10) ffi (1.9.10)
hitimes (1.2.2) ffi (1.9.10-x64-mingw32)
jekyll (2.5.3) jekyll (3.0.1)
classifier-reborn (~> 2.0)
colorator (~> 0.1) colorator (~> 0.1)
jekyll-coffeescript (~> 1.0)
jekyll-gist (~> 1.0)
jekyll-paginate (~> 1.0)
jekyll-sass-converter (~> 1.0) jekyll-sass-converter (~> 1.0)
jekyll-watch (~> 1.1) jekyll-watch (~> 1.1)
kramdown (~> 1.3) kramdown (~> 1.3)
liquid (~> 2.6.1) liquid (~> 3.0)
mercenary (~> 0.3.3) mercenary (~> 0.3.3)
pygments.rb (~> 0.6.0) rouge (~> 1.7)
redcarpet (~> 3.1)
safe_yaml (~> 1.0) safe_yaml (~> 1.0)
toml (~> 0.1.0) jekyll-redirect-from (0.9.0)
jekyll-coffeescript (1.0.1)
coffee-script (~> 2.2)
jekyll-gist (1.3.4)
jekyll-paginate (1.1.0)
jekyll-redirect-from (0.8.0)
jekyll (>= 2.0) jekyll (>= 2.0)
jekyll-sass-converter (1.3.0) jekyll-sass-converter (1.3.0)
sass (~> 3.2) sass (~> 3.2)
jekyll-sitemap (0.8.1) jekyll-sitemap (0.9.0)
jekyll-watch (1.2.1) jekyll-watch (1.3.0)
listen (~> 2.7) listen (~> 3.0)
kramdown (1.8.0) kramdown (1.9.0)
liquid (2.6.3) liquid (3.0.6)
listen (2.10.1) listen (3.0.5)
celluloid (~> 0.16.0)
rb-fsevent (>= 0.9.3) rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9) rb-inotify (>= 0.9)
mercenary (0.3.5) mercenary (0.3.5)
parslet (1.5.0)
blankslate (~> 2.0)
posix-spawn (0.3.11)
pygments.rb (0.6.3)
posix-spawn (~> 0.3.6)
yajl-ruby (~> 1.2.0)
rainbow (2.0.0) rainbow (2.0.0)
rb-fsevent (0.9.5) rb-fsevent (0.9.6)
rb-inotify (0.9.5) rb-inotify (0.9.5)
ffi (>= 0.5.0) ffi (>= 0.5.0)
redcarpet (3.3.2) rouge (1.10.1)
rouge (1.9.1)
safe_yaml (1.0.4) safe_yaml (1.0.4)
sass (3.4.18) sass (3.4.19)
scss_lint (0.41.0) scss_lint (0.43.2)
rainbow (~> 2.0) rainbow (~> 2.0)
sass (~> 3.4.15) sass (~> 3.4.15)
timers (4.0.4)
hitimes
toml (0.1.2)
parslet (~> 1.5.0)
yajl-ruby (1.2.1)
PLATFORMS PLATFORMS
ruby ruby
x64-mingw32
DEPENDENCIES DEPENDENCIES
jekyll (~> 2.5.3) jekyll (~> 3.0.1)
jekyll-redirect-from (~> 0.8.0) jekyll-redirect-from (~> 0.9.0)
jekyll-sitemap (~> 0.8.1) jekyll-sitemap (~> 0.9.0)
rouge (~> 1.9.1) sass (~> 3.4.19)
sass (~> 3.4.18) scss_lint (~> 0.43)
scss_lint (~> 0.41)
BUNDLED WITH BUNDLED WITH
1.10.6 1.10.6
+80 -49
View File
@@ -18,8 +18,40 @@ module.exports = function (grunt) {
var fs = require('fs'); var fs = require('fs');
var path = require('path'); var path = require('path');
var glob = require('glob'); var glob = require('glob');
var isTravis = require('is-travis');
var npmShrinkwrap = require('npm-shrinkwrap'); var npmShrinkwrap = require('npm-shrinkwrap');
var mq4HoverShim = require('mq4-hover-shim'); var mq4HoverShim = require('mq4-hover-shim');
var autoprefixer = require('autoprefixer')({
browsers: [
//
// Official browser support policy:
// http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#supported-browsers
//
'Chrome >= 35', // Exact version number here is kinda arbitrary
// Rather than using Autoprefixer's native "Firefox ESR" version specifier string,
// we deliberately hardcode the number. This is to avoid unwittingly severely breaking the previous ESR in the event that:
// (a) we happen to ship a new Bootstrap release soon after the release of a new ESR,
// such that folks haven't yet had a reasonable amount of time to upgrade; and
// (b) the new ESR has unprefixed CSS properties/values whose absence would severely break webpages
// (e.g. `box-sizing`, as opposed to `background: linear-gradient(...)`).
// Since they've been unprefixed, Autoprefixer will stop prefixing them,
// thus causing them to not work in the previous ESR (where the prefixes were required).
'Firefox >= 31', // Current Firefox Extended Support Release (ESR)
// Note: Edge versions in Autoprefixer & Can I Use refer to the EdgeHTML rendering engine version,
// NOT the Edge app version shown in Edge's "About" screen.
// For example, at the time of writing, Edge 20 on an up-to-date system uses EdgeHTML 12.
// See also https://github.com/Fyrd/caniuse/issues/1928
'Edge >= 12',
'Explorer >= 9',
// Out of leniency, we prefix these 1 version further back than the official policy.
'iOS >= 8',
'Safari >= 8',
// The following remain NOT officially supported, but we're lenient and include their prefixes to avoid severely breaking in them.
'Android 2.3',
'Android >= 4',
'Opera >= 12'
]
});
var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js'); var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js');
var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' }); var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
@@ -45,8 +77,8 @@ module.exports = function (grunt) {
'}\n', '}\n',
jqueryVersionCheck: '+function ($) {\n' + jqueryVersionCheck: '+function ($) {\n' +
' var version = $.fn.jquery.split(\' \')[0].split(\'.\')\n' + ' var version = $.fn.jquery.split(\' \')[0].split(\'.\')\n' +
' if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {\n' + ' if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] >= 3)) {\n' +
' throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery version 1.9.1 or higher\')\n' + ' throw new Error(\'Bootstrap\\\'s JavaScript requires at least jQuery v1.9.1 but less than v3.0.0\')\n' +
' }\n' + ' }\n' +
'}(jQuery);\n\n', '}(jQuery);\n\n',
@@ -184,7 +216,7 @@ module.exports = function (grunt) {
warnings: false warnings: false
}, },
mangle: true, mangle: true,
preserveComments: 'some' preserveComments: /^!|@preserve|@license|@cc_on/i
}, },
core: { core: {
src: '<%= concat.bootstrap.dest %>', src: '<%= concat.bootstrap.dest %>',
@@ -207,45 +239,37 @@ module.exports = function (grunt) {
scsslint: { scsslint: {
options: { options: {
bundleExec: true, bundleExec: true,
config: 'scss/.scsslint.yml', config: 'scss/.scss-lint.yml',
reporterOutput: null reporterOutput: null
}, },
src: ['scss/*.scss', '!scss/_normalize.scss'] src: ['scss/*.scss', '!scss/_normalize.scss']
}, },
postcss: { postcss: {
core: {
options: { options: {
map: true, map: true,
processors: [mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.bs-true-hover ' })] processors: [
}, mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.bs-true-hover ' }),
core: { autoprefixer
src: 'dist/css/*.css'
}
},
autoprefixer: {
options: {
browsers: [
'Android 2.3',
'Android >= 4',
'Chrome >= 35',
'Firefox >= 31',
'Explorer >= 9',
'iOS >= 7',
'Opera >= 12',
'Safari >= 7.1'
] ]
}, },
core: {
options: {
map: true
},
src: 'dist/css/*.css' src: 'dist/css/*.css'
}, },
docs: { docs: {
options: {
processors: [
autoprefixer
]
},
src: 'docs/assets/css/docs.min.css' src: 'docs/assets/css/docs.min.css'
}, },
examples: { examples: {
options: {
processors: [
autoprefixer
]
},
expand: true, expand: true,
cwd: 'docs/examples/', cwd: 'docs/examples/',
src: ['**/*.css'], src: ['**/*.css'],
@@ -324,7 +348,8 @@ module.exports = function (grunt) {
jekyll: { jekyll: {
options: { options: {
bundleExec: true, bundleExec: true,
config: '_config.yml' config: '_config.yml',
incremental: false
}, },
docs: {}, docs: {},
github: { github: {
@@ -345,7 +370,7 @@ module.exports = function (grunt) {
'The “datetime” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.' 'The “datetime” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.'
] ]
}, },
src: '_gh_pages/**/*.html' src: ['_gh_pages/**/*.html', 'js/tests/visual/*.html']
}, },
watch: { watch: {
@@ -363,17 +388,6 @@ module.exports = function (grunt) {
} }
}, },
sed: {
versionNumber: {
pattern: (function () {
var old = grunt.option('oldver');
return old ? RegExp.quote(old) : old;
})(),
replacement: grunt.option('newver'),
recursive: true
}
},
'saucelabs-qunit': { 'saucelabs-qunit': {
all: { all: {
options: { options: {
@@ -406,7 +420,27 @@ module.exports = function (grunt) {
branch: 'gh-pages' branch: 'gh-pages'
} }
} }
},
compress: {
main: {
options: {
archive: 'bootstrap-<%= pkg.version %>-dist.zip',
mode: 'zip',
level: 9,
pretty: true
},
files: [
{
expand: true,
cwd: 'dist/',
src: ['**'],
dest: 'bootstrap-<%= pkg.version %>-dist'
} }
]
}
}
}); });
@@ -436,7 +470,8 @@ module.exports = function (grunt) {
} }
// Skip HTML validation if running a different subset of the test suite // Skip HTML validation if running a different subset of the test suite
if (runSubset('validate-html') && if (runSubset('validate-html') &&
// Skip HTML5 validator on Travis when [skip validator] is in the commit message isTravis &&
// Skip HTML5 validator when [skip validator] is in the commit message
isUndefOrNonZero(process.env.TWBS_DO_VALIDATOR)) { isUndefOrNonZero(process.env.TWBS_DO_VALIDATOR)) {
testSubtasks.push('validate-html'); testSubtasks.push('validate-html');
} }
@@ -466,7 +501,7 @@ module.exports = function (grunt) {
// grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']); // grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']);
grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']); grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);
grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'autoprefixer:core', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']); grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
// Full distribution task. // Full distribution task.
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']); grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']);
@@ -474,11 +509,6 @@ module.exports = function (grunt) {
// Default task. // Default task.
grunt.registerTask('default', ['clean:dist', 'test']); grunt.registerTask('default', ['clean:dist', 'test']);
// 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('commonjs', ['babel:umd', 'npm-js']); grunt.registerTask('commonjs', ['babel:umd', 'npm-js']);
grunt.registerTask('npm-js', 'Generate npm-js entrypoint module in dist dir.', function () { grunt.registerTask('npm-js', 'Generate npm-js entrypoint module in dist dir.', function () {
@@ -490,12 +520,13 @@ module.exports = function (grunt) {
}); });
// Docs task. // Docs task.
grunt.registerTask('docs-css', ['autoprefixer:docs', 'autoprefixer:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']); grunt.registerTask('docs-css', ['postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
grunt.registerTask('docs-js', ['uglify:docsJs']); grunt.registerTask('docs-js', ['uglify:docsJs']);
grunt.registerTask('lint-docs-js', ['jscs:assets']); grunt.registerTask('lint-docs-js', ['jscs:assets']);
grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']); grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
grunt.registerTask('docs-github', ['jekyll:github', 'htmlmin']);
grunt.registerTask('prep-release', ['dist', 'docs', 'jekyll:github', 'htmlmin', 'compress']); grunt.registerTask('prep-release', ['dist', 'docs', 'docs-github', 'compress']);
// Publish to GitHub // Publish to GitHub
grunt.registerTask('publish', ['buildcontrol:pages']); grunt.registerTask('publish', ['buildcontrol:pages']);
@@ -509,7 +540,7 @@ module.exports = function (grunt) {
if (err) { if (err) {
grunt.fail.warn(err); grunt.fail.warn(err);
} }
var dest = 'test-infra/npm-shrinkwrap.json'; var dest = 'grunt/npm-shrinkwrap.json';
fs.renameSync('npm-shrinkwrap.json', dest); fs.renameSync('npm-shrinkwrap.json', dest);
grunt.log.writeln('File ' + dest.cyan + ' updated.'); grunt.log.writeln('File ' + dest.cyan + ' updated.');
done(); done();
+5 -6
View File
@@ -66,11 +66,9 @@ Bootstrap's documentation, included in this repo in the root directory, is built
### Running documentation locally ### Running documentation locally
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.5.x). 1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
- **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems. 2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
2. Install the Ruby-based syntax highlighter, [Rouge](https://github.com/jneen/rouge), with `gem install rouge`. 3. Open <http://localhost:9001> in your browser, and voilà.
3. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
4. Open <http://localhost:9001> in your browser, and voilà.
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/). Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
@@ -100,7 +98,7 @@ Get updates on Bootstrap's development and chat with the project maintainers and
- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com). - Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
- Join [the official Slack room](https://bootstrap-slack.herokuapp.com). - Join [the official Slack room](https://bootstrap-slack.herokuapp.com).
- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel. - Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
- Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3)). - Implementation help may be found at Stack Overflow (tagged [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4)).
- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability. - Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
@@ -109,6 +107,7 @@ Get updates on Bootstrap's development and chat with the project maintainers and
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. 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.
See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](http://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
## Creators ## Creators
+3 -1
View File
@@ -25,7 +25,6 @@ gems:
# Custom vars # Custom vars
current_version: 4.0.0-alpha current_version: 4.0.0-alpha
repo: https://github.com/twbs/bootstrap repo: https://github.com/twbs/bootstrap
sass_repo: https://github.com/twbs/bootstrap-sass
slack: https://bootstrap-slack.herokuapp.com slack: https://bootstrap-slack.herokuapp.com
download: download:
@@ -37,6 +36,9 @@ expo: http://expo.getbootstrap.com
themes: http://themes.getbootstrap.com themes: http://themes.getbootstrap.com
cdn: cdn:
# See https://www.srihash.org for info on how to generate the hashes
css: https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css css: https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css
css_hash: "sha384-XXXXXXXX"
js: https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js js: https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js
js_hash: "sha384-XXXXXXXX"
jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
+477 -578
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+72 -40
View File
@@ -10,8 +10,8 @@ if (typeof jQuery === 'undefined') {
+function ($) { +function ($) {
var version = $.fn.jquery.split(' ')[0].split('.') var version = $.fn.jquery.split(' ')[0].split('.')
if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) { if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] >= 3)) {
throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher') throw new Error('Bootstrap\'s JavaScript requires at least jQuery v1.9.1 but less than v3.0.0')
} }
}(jQuery); }(jQuery);
@@ -20,14 +20,14 @@ if (typeof jQuery === 'undefined') {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): util.js * Bootstrap (v4.0.0-alpha): util.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
'use strict'; 'use strict';
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
@@ -129,7 +129,7 @@ var Util = (function ($) {
getUID: function getUID(prefix) { getUID: function getUID(prefix) {
do { do {
prefix += ~ ~(Math.random() * 1000000); prefix += ~ ~(Math.random() * 1000000); // "~~" acts like a faster Math.floor() here
} while (document.getElementById(prefix)); } while (document.getElementById(prefix));
return prefix; return prefix;
}, },
@@ -185,7 +185,7 @@ var Util = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): alert.js * Bootstrap (v4.0.0-alpha): alert.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -199,7 +199,7 @@ var Alert = (function ($) {
*/ */
var NAME = 'alert'; var NAME = 'alert';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.alert'; var DATA_KEY = 'bs.alert';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -371,7 +371,7 @@ var Alert = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): button.js * Bootstrap (v4.0.0-alpha): button.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -385,7 +385,7 @@ var Button = (function ($) {
*/ */
var NAME = 'button'; var NAME = 'button';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.button'; var DATA_KEY = 'bs.button';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -537,7 +537,7 @@ var Button = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): carousel.js * Bootstrap (v4.0.0-alpha): carousel.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -551,7 +551,7 @@ var Carousel = (function ($) {
*/ */
var NAME = 'carousel'; var NAME = 'carousel';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.carousel'; var DATA_KEY = 'bs.carousel';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -650,6 +650,14 @@ var Carousel = (function ($) {
this._slide(Direction.NEXT); this._slide(Direction.NEXT);
} }
} }
}, {
key: 'nextWhenVisible',
value: function nextWhenVisible() {
// Don't call next when the page isn't visible
if (!document.hidden) {
this.next();
}
}
}, { }, {
key: 'prev', key: 'prev',
value: function prev() { value: function prev() {
@@ -685,7 +693,7 @@ var Carousel = (function ($) {
} }
if (this._config.interval && !this._isPaused) { if (this._config.interval && !this._isPaused) {
this._interval = setInterval($.proxy(this.next, this), this._config.interval); this._interval = setInterval($.proxy(document.visibilityState ? this.nextWhenVisible : this.next, this), this._config.interval);
} }
} }
}, { }, {
@@ -918,7 +926,10 @@ var Carousel = (function ($) {
if (typeof config === 'number') { if (typeof config === 'number') {
data.to(config); data.to(config);
} else if (action) { } else if (typeof action === 'string') {
if (data[action] === undefined) {
throw new Error('No method named "' + action + '"');
}
data[action](); data[action]();
} else if (_config.interval) { } else if (_config.interval) {
data.pause(); data.pause();
@@ -998,7 +1009,7 @@ var Carousel = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): collapse.js * Bootstrap (v4.0.0-alpha): collapse.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -1012,7 +1023,7 @@ var Collapse = (function ($) {
*/ */
var NAME = 'collapse'; var NAME = 'collapse';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.collapse'; var DATA_KEY = 'bs.collapse';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -1306,6 +1317,9 @@ var Collapse = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
@@ -1353,7 +1367,7 @@ var Collapse = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): dropdown.js * Bootstrap (v4.0.0-alpha): dropdown.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -1367,7 +1381,7 @@ var Dropdown = (function ($) {
*/ */
var NAME = 'dropdown'; var NAME = 'dropdown';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.dropdown'; var DATA_KEY = 'bs.dropdown';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -1496,6 +1510,9 @@ var Dropdown = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config].call(this); data[config].call(this);
} }
}); });
@@ -1637,7 +1654,7 @@ var Dropdown = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): modal.js * Bootstrap (v4.0.0-alpha): modal.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -1651,7 +1668,7 @@ var Modal = (function ($) {
*/ */
var NAME = 'modal'; var NAME = 'modal';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.modal'; var DATA_KEY = 'bs.modal';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -1769,7 +1786,7 @@ var Modal = (function ($) {
$(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () { $(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () {
$(_this7._element).one(Event.MOUSEUP_DISMISS, function (event) { $(_this7._element).one(Event.MOUSEUP_DISMISS, function (event) {
if ($(event.target).is(_this7._element)) { if ($(event.target).is(_this7._element)) {
that._ignoreBackdropClick = true; _this7._ignoreBackdropClick = true;
} }
}); });
}); });
@@ -2093,6 +2110,9 @@ var Modal = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](relatedTarget); data[config](relatedTarget);
} else if (_config.show) { } else if (_config.show) {
data.show(relatedTarget); data.show(relatedTarget);
@@ -2164,7 +2184,7 @@ var Modal = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): scrollspy.js * Bootstrap (v4.0.0-alpha): scrollspy.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -2178,7 +2198,7 @@ var ScrollSpy = (function ($) {
*/ */
var NAME = 'scrollspy'; var NAME = 'scrollspy';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.scrollspy'; var DATA_KEY = 'bs.scrollspy';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -2429,6 +2449,9 @@ var ScrollSpy = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
@@ -2475,7 +2498,7 @@ var ScrollSpy = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): tab.js * Bootstrap (v4.0.0-alpha): tab.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -2489,7 +2512,7 @@ var Tab = (function ($) {
*/ */
var NAME = 'tab'; var NAME = 'tab';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.tab'; var DATA_KEY = 'bs.tab';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -2692,6 +2715,9 @@ var Tab = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
@@ -2727,15 +2753,25 @@ var Tab = (function ($) {
return Tab; return Tab;
})(jQuery); })(jQuery);
/* global Tether */
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): tooltip.js * Bootstrap (v4.0.0-alpha): tooltip.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
var Tooltip = (function ($) { var Tooltip = (function ($) {
/**
* Check for Tether dependency
* Tether - http://github.hubspot.com/tether/
*/
if (window.Tether === undefined) {
throw new Error('Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)');
}
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@@ -2743,7 +2779,7 @@ var Tooltip = (function ($) {
*/ */
var NAME = 'tooltip'; var NAME = 'tooltip';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.tooltip'; var DATA_KEY = 'bs.tooltip';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME]; var JQUERY_NO_CONFLICT = $.fn[NAME];
@@ -2971,7 +3007,8 @@ var Tooltip = (function ($) {
classes: TetherClass, classes: TetherClass,
classPrefix: CLASS_PREFIX, classPrefix: CLASS_PREFIX,
offset: this.config.offset, offset: this.config.offset,
constraints: this.config.constraints constraints: this.config.constraints,
addTargetClasses: false
}); });
Util.reflow(tip); Util.reflow(tip);
@@ -3093,12 +3130,6 @@ var Tooltip = (function ($) {
value: function cleanupTether() { value: function cleanupTether() {
if (this._tether) { if (this._tether) {
this._tether.destroy(); this._tether.destroy();
// clean up after tether's junk classes
// remove after they fix issue
// (https://github.com/HubSpot/tether/issues/36)
$(this.element).removeClass(this._removeTetherClasses);
$(this.tip).removeClass(this._removeTetherClasses);
} }
} }
@@ -3136,11 +3167,6 @@ var Tooltip = (function ($) {
this._fixTitle(); this._fixTitle();
} }
} }
}, {
key: '_removeTetherClasses',
value: function _removeTetherClasses(i, css) {
return ((css.baseVal || css).match(new RegExp('(^|\\s)' + CLASS_PREFIX + '-\\S+', 'g')) || []).join(' ');
}
}, { }, {
key: '_fixTitle', key: '_fixTitle',
value: function _fixTitle() { value: function _fixTitle() {
@@ -3283,6 +3309,9 @@ var Tooltip = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
@@ -3339,7 +3368,7 @@ var Tooltip = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): popover.js * Bootstrap (v4.0.0-alpha): popover.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -3353,7 +3382,7 @@ var Popover = (function ($) {
*/ */
var NAME = 'popover'; var NAME = 'popover';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.popover'; var DATA_KEY = 'bs.popover';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME]; var JQUERY_NO_CONFLICT = $.fn[NAME];
@@ -3468,6 +3497,9 @@ var Popover = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+2 -2
View File
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): alert.js * Bootstrap (v4.0.0-alpha): alert.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'alert'; var NAME = 'alert';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.alert'; var DATA_KEY = 'bs.alert';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
+2 -2
View File
@@ -13,7 +13,7 @@
})(this, function (exports, module) { })(this, function (exports, module) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): button.js * Bootstrap (v4.0.0-alpha): button.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -33,7 +33,7 @@
*/ */
var NAME = 'button'; var NAME = 'button';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.button'; var DATA_KEY = 'bs.button';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
+15 -4
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): carousel.js * Bootstrap (v4.0.0-alpha): carousel.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'carousel'; var NAME = 'carousel';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.carousel'; var DATA_KEY = 'bs.carousel';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -136,6 +136,14 @@
this._slide(Direction.NEXT); this._slide(Direction.NEXT);
} }
} }
}, {
key: 'nextWhenVisible',
value: function nextWhenVisible() {
// Don't call next when the page isn't visible
if (!document.hidden) {
this.next();
}
}
}, { }, {
key: 'prev', key: 'prev',
value: function prev() { value: function prev() {
@@ -171,7 +179,7 @@
} }
if (this._config.interval && !this._isPaused) { if (this._config.interval && !this._isPaused) {
this._interval = setInterval($.proxy(this.next, this), this._config.interval); this._interval = setInterval($.proxy(document.visibilityState ? this.nextWhenVisible : this.next, this), this._config.interval);
} }
} }
}, { }, {
@@ -404,7 +412,10 @@
if (typeof config === 'number') { if (typeof config === 'number') {
data.to(config); data.to(config);
} else if (action) { } else if (typeof action === 'string') {
if (data[action] === undefined) {
throw new Error('No method named "' + action + '"');
}
data[action](); data[action]();
} else if (_config.interval) { } else if (_config.interval) {
data.pause(); data.pause();
+5 -2
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): collapse.js * Bootstrap (v4.0.0-alpha): collapse.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'collapse'; var NAME = 'collapse';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.collapse'; var DATA_KEY = 'bs.collapse';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -331,6 +331,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+5 -2
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): dropdown.js * Bootstrap (v4.0.0-alpha): dropdown.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'dropdown'; var NAME = 'dropdown';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.dropdown'; var DATA_KEY = 'bs.dropdown';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -166,6 +166,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config].call(this); data[config].call(this);
} }
}); });
+6 -3
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): modal.js * Bootstrap (v4.0.0-alpha): modal.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'modal'; var NAME = 'modal';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.modal'; var DATA_KEY = 'bs.modal';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -155,7 +155,7 @@
$(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () { $(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () {
$(_this._element).one(Event.MOUSEUP_DISMISS, function (event) { $(_this._element).one(Event.MOUSEUP_DISMISS, function (event) {
if ($(event.target).is(_this._element)) { if ($(event.target).is(_this._element)) {
that._ignoreBackdropClick = true; _this._ignoreBackdropClick = true;
} }
}); });
}); });
@@ -479,6 +479,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](relatedTarget); data[config](relatedTarget);
} else if (_config.show) { } else if (_config.show) {
data.show(relatedTarget); data.show(relatedTarget);
+6 -3
View File
@@ -15,7 +15,7 @@
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -27,7 +27,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): popover.js * Bootstrap (v4.0.0-alpha): popover.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -41,7 +41,7 @@
*/ */
var NAME = 'popover'; var NAME = 'popover';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.popover'; var DATA_KEY = 'bs.popover';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME]; var JQUERY_NO_CONFLICT = $.fn[NAME];
@@ -156,6 +156,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+5 -2
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): scrollspy.js * Bootstrap (v4.0.0-alpha): scrollspy.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'scrollspy'; var NAME = 'scrollspy';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.scrollspy'; var DATA_KEY = 'bs.scrollspy';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -288,6 +288,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+5 -2
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): tab.js * Bootstrap (v4.0.0-alpha): tab.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'tab'; var NAME = 'tab';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.tab'; var DATA_KEY = 'bs.tab';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -240,6 +240,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+17 -14
View File
@@ -11,6 +11,8 @@
global.tooltip = mod.exports; global.tooltip = mod.exports;
} }
})(this, function (exports, module, _util) { })(this, function (exports, module, _util) {
/* global Tether */
'use strict'; 'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
@@ -23,13 +25,21 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): tooltip.js * Bootstrap (v4.0.0-alpha): tooltip.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
var Tooltip = (function ($) { var Tooltip = (function ($) {
/**
* Check for Tether dependency
* Tether - http://github.hubspot.com/tether/
*/
if (window.Tether === undefined) {
throw new Error('Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)');
}
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@@ -37,7 +47,7 @@
*/ */
var NAME = 'tooltip'; var NAME = 'tooltip';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.tooltip'; var DATA_KEY = 'bs.tooltip';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME]; var JQUERY_NO_CONFLICT = $.fn[NAME];
@@ -265,7 +275,8 @@
classes: TetherClass, classes: TetherClass,
classPrefix: CLASS_PREFIX, classPrefix: CLASS_PREFIX,
offset: this.config.offset, offset: this.config.offset,
constraints: this.config.constraints constraints: this.config.constraints,
addTargetClasses: false
}); });
_Util['default'].reflow(tip); _Util['default'].reflow(tip);
@@ -387,12 +398,6 @@
value: function cleanupTether() { value: function cleanupTether() {
if (this._tether) { if (this._tether) {
this._tether.destroy(); this._tether.destroy();
// clean up after tether's junk classes
// remove after they fix issue
// (https://github.com/HubSpot/tether/issues/36)
$(this.element).removeClass(this._removeTetherClasses);
$(this.tip).removeClass(this._removeTetherClasses);
} }
} }
@@ -430,11 +435,6 @@
this._fixTitle(); this._fixTitle();
} }
} }
}, {
key: '_removeTetherClasses',
value: function _removeTetherClasses(i, css) {
return ((css.baseVal || css).match(new RegExp('(^|\\s)' + CLASS_PREFIX + '-\\S+', 'g')) || []).join(' ');
}
}, { }, {
key: '_fixTitle', key: '_fixTitle',
value: function _fixTitle() { value: function _fixTitle() {
@@ -577,6 +577,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+2 -2
View File
@@ -13,7 +13,7 @@
})(this, function (exports, module) { })(this, function (exports, module) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): util.js * Bootstrap (v4.0.0-alpha): util.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -114,7 +114,7 @@
getUID: function getUID(prefix) { getUID: function getUID(prefix) {
do { do {
prefix += ~ ~(Math.random() * 1000000); prefix += ~ ~(Math.random() * 1000000); // "~~" acts like a faster Math.floor() here
} while (document.getElementById(prefix)); } while (document.getElementById(prefix));
return prefix; return prefix;
}, },
+63 -23
View File
@@ -48,16 +48,6 @@
origin: > origin: >
Bootstrap#10690 Bootstrap#10690
-
browser: >
Firefox (Windows)
summary: >
Java applets that are descendants of elements with forced hardware acceleration using `translate3d(0,0,0)` are invisible.
upstream_bug: >
Mozilla#1048279
origin: >
Bootstrap#14124
- -
browser: > browser: >
Firefox Firefox
@@ -78,6 +68,26 @@
origin: > origin: >
Bootstrap#793 Bootstrap#793
-
browser: >
Firefox
summary: >
`focus` events should not be fired at the `document` object
upstream_bug: >
Mozilla#1228802
origin: >
Bootstrap#18365
-
browser: >
Firefox (Windows)
summary: >
Right border of `<select>` menu is sometimes missing when screen is set to uncommon resolution
upstream_bug: >
Mozilla#1139853
origin: >
Bootstrap#15990
- -
browser: > browser: >
Chrome (OS X) Chrome (OS X)
@@ -148,6 +158,16 @@
origin: > origin: >
Bootstrap#16372 Bootstrap#16372
-
browser: >
Chrome
summary: >
`table-cell` borders not overlapping despite `margin-right: -1px`
upstream_bug: >
Chromium#534750
origin: >
Bootstrap#17438, Bootstrap#14237
- -
browser: > browser: >
Chrome (Windows & Linux) Chrome (Windows & Linux)
@@ -200,16 +220,6 @@
Normalize#283, Normalize#283,
Chromium#337668 Chromium#337668
-
browser: >
Safari (OS X)
summary: >
`display: table-cell;` within media query renders incorrectly when resizing the window.
upstream_bug: >
WebKit#138167, Safari#18987206
origin: >
Bootstrap#9774
- -
browser: > browser: >
Safari (OS X) Safari (OS X)
@@ -230,6 +240,16 @@
origin: > origin: >
Bootstrap#16180 Bootstrap#16180
-
browser: >
Safari (iPad)
summary: >
`<select>` menu on iPad causes shifting of hit-testing areas
upstream_bug: >
WebKit#150079, Safari#23082521
origin: >
Bootstrap#14975
- -
browser: > browser: >
Safari (iOS) Safari (iOS)
@@ -250,6 +270,16 @@
origin: > origin: >
Bootstrap#14708 Bootstrap#14708
-
browser: >
Safari (iOS)
summary: >
Can't move cursor to start of text after entering long string of text into `<input type="text">`
upstream_bug: >
WebKit#148061, Safari#22299624
origin: >
Bootstrap#16988
- -
browser: > browser: >
Safari (iOS) Safari (iOS)
@@ -264,8 +294,18 @@
browser: > browser: >
Safari (iOS) Safari (iOS)
summary: > summary: >
Tapping below `<input>`s can focus them in some cases Tapping on `<body>` doesn't fire `click` events
upstream_bug: > upstream_bug: >
WebKit#146244, Safari#21509310 WebKit#151933
origin: > origin: >
Bootstrap#15968 Bootstrap#16028
-
browser: >
Safari (iOS 9+)
summary: >
Sometimes excessive automatic zoom is applied after opening a modal, and the user isn't allowed to zoom out
upstream_bug: >
WebKit#150715
origin: >
WebKit#138201
+4 -2
View File
@@ -11,9 +11,11 @@
</div> </div>
</footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="{{ site.cdn.jquery }}"></script>
<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="{{ site.baseurl }}/assets/js/vendor/tether.min.js"></script>
{% if site.github %} {% if site.github %}
<script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script> <script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
{% else %} {% else %}
@@ -33,7 +35,7 @@
<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script> <script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
{% if page.layout == "docs" %} {% if page.layout == "docs" %}
<script src="{{ site.baseurl }}/assets/js/vendor/jekyll-search.js"></script> <script src="{{ site.baseurl }}/assets/js/vendor/jekyll-search.min.js"></script>
<script> <script>
SimpleJekyllSearch.init({ SimpleJekyllSearch.init({
+5 -1
View File
@@ -1,6 +1,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."> <meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development"> <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
@@ -14,7 +14,11 @@
</title> </title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
{% if site.github %}
<link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
{% else %}
<link href="{{ site.baseurl }}/dist/css/bootstrap.css" rel="stylesheet">
{% endif %}
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet"> <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="bd-sidebar"> <div class="bd-sidebar">
<form class="bd-search hidden-sm-down"> <form class="bd-search hidden-sm-down">
<input type="text" class="form-control" id="search-input" placeholder="Search..."> <input type="text" class="form-control" id="search-input" placeholder="Search..." autocomplete="off">
<div class="dropdown-menu bd-search-results" id="search-results"></div> <div class="dropdown-menu bd-search-results" id="search-results"></div>
</form> </form>
+2 -2
View File
@@ -1,6 +1,6 @@
<header class="navbar navbar-light navbar-static-top bd-navbar" role="banner"> <header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
{% comment %} {% comment %}
<nav class="nav navbar-nav pull-right"> <nav class="nav navbar-nav pull-xs-right">
<div class="nav-item dropdown"> <div class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v{{ site.current_version }} v{{ site.current_version }}
@@ -25,7 +25,7 @@
{% endcomment %} {% endcomment %}
<div class="clearfix"> <div class="clearfix">
<button class="navbar-toggler pull-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav"> <button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
&#9776; &#9776;
</button> </button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/"> <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
+1 -1
View File
@@ -17,7 +17,7 @@ module Jekyll
def render(context) def render(context)
site = context.registers[:site] site = context.registers[:site]
converter = site.getConverterImpl(::Jekyll::Converters::Markdown) converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
output = converter.convert(super(context)) output = converter.convert(super(context))
"<div class=\"bd-callout bd-callout-#{@type}\">#{output}</div>" "<div class=\"bd-callout bd-callout-#{@type}\">#{output}</div>"
end end
+5
View File
@@ -58,10 +58,15 @@ eos
"<div class=\"bd-example\" data-example-id=\"#{@options[:id]}\">\n#{output}\n</div>" "<div class=\"bd-example\" data-example-id=\"#{@options[:id]}\">\n#{output}\n</div>"
end end
def remove_holderjs(code)
code = code.gsub(/"holder.js.+?"/, '"..."')
end
def render_rouge(code) def render_rouge(code)
require 'rouge' require 'rouge'
formatter = Rouge::Formatters::HTML.new(line_numbers: @options[:linenos], wrap: false) formatter = Rouge::Formatters::HTML.new(line_numbers: @options[:linenos], wrap: false)
lexer = Rouge::Lexer.find_fancy(@lang, code) || Rouge::Lexers::PlainText lexer = Rouge::Lexer.find_fancy(@lang, code) || Rouge::Lexers::PlainText
code = remove_holderjs(code)
code = formatter.format(lexer.lex(code)) code = formatter.format(lexer.lex(code))
"<div class=\"highlight\"><pre>#{code}</pre></div>" "<div class=\"highlight\"><pre>#{code}</pre></div>"
end end
+1 -1
View File
@@ -11,7 +11,7 @@ module Jekyll
# #
def render(context) def render(context)
site = context.registers[:site] site = context.registers[:site]
converter = site.getConverterImpl(::Jekyll::Converters::Markdown) converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
converter.convert(render_block(context)) converter.convert(render_block(context))
end end
end end
+1 -1
View File
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
+13 -17
View File
File diff suppressed because one or more lines are too long
@@ -17,7 +17,7 @@
'@-ms-viewport{width:auto!important}' '@-ms-viewport{width:auto!important}'
) )
) )
document.querySelector('head').appendChild(msViewportStyle) document.head.appendChild(msViewportStyle)
} }
})(); })();
+24 -34
View File
@@ -9,7 +9,7 @@
* details, see https://creativecommons.org/licenses/by/3.0/. * details, see https://creativecommons.org/licenses/by/3.0/.
*/ */
/* global ZeroClipboard, anchors */ /* global Clipboard, anchors */
!function ($) { !function ($) {
'use strict'; 'use strict';
@@ -36,49 +36,39 @@
e.preventDefault() e.preventDefault()
}) })
// Config ZeroClipboard
ZeroClipboard.config({
moviePath: '/assets/flash/ZeroClipboard.swf',
hoverClass: 'btn-clipboard-hover'
})
// Insert copy to clipboard button before .highlight // Insert copy to clipboard button before .highlight
$('.highlight').each(function () { $('.highlight').each(function () {
var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>' var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
$(this).before(btnHtml) $(this).before(btnHtml)
}) $('.btn-clipboard').tooltip()
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 var clipboard = new Clipboard('.btn-clipboard', {
zeroClipboard.on('complete', function () { target: function (trigger) {
$htmlBridge return trigger.parentNode.nextElementSibling
}
})
clipboard.on('success', function (e) {
$(e.trigger)
.attr('title', 'Copied!') .attr('title', 'Copied!')
.tooltip('fixTitle') .tooltip('_fixTitle')
.tooltip('show') .tooltip('show')
.attr('title', 'Copy to clipboard') .attr('title', 'Copy to clipboard')
.tooltip('fixTitle') .tooltip('_fixTitle')
})
e.clearSelection()
}) })
// Hide copy button when no Flash is found clipboard.on('error', function (e) {
// or wrong Flash version is present var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'
zeroClipboard.on('noflash wrongflash', function () {
$('.zero-clipboard').remove() $(e.trigger)
ZeroClipboard.destroy() .attr('title', fallbackMsg)
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('_fixTitle')
}) })
}) })
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -1,6 +1,6 @@
/*! /*!
* AnchorJS - v1.2.1 - 2015-07-02 * AnchorJS - v2.0.0 - 2015-10-31
* https://github.com/bryanbraun/anchorjs * https://github.com/bryanbraun/anchorjs
* Copyright (c) 2015 Bryan Braun; Licensed MIT * Copyright (c) 2015 Bryan Braun; Licensed MIT
*/ */
function AnchorJS(A){"use strict";this.options=A||{},this._applyRemainingDefaultOptions=function(A){this.options.icon=this.options.hasOwnProperty("icon")?A.icon:"",this.options.visible=this.options.hasOwnProperty("visible")?A.visible:"hover",this.options.placement=this.options.hasOwnProperty("placement")?A.placement:"right",this.options.class=this.options.hasOwnProperty("class")?A.class:""},this._applyRemainingDefaultOptions(A),this.add=function(A){var e,t,o,n,i,s,a,l,r,h,c,g;if(this._applyRemainingDefaultOptions(this.options),A){if("string"!=typeof A)throw new Error("The selector provided to AnchorJS was invalid.")}else A="h1, h2, h3, h4, h5, h6";if(e=document.querySelectorAll(A),0===e.length)return!1;for(this._addBaselineStyles(),t=document.querySelectorAll("[id]"),o=[].map.call(t,function(A){return A.id}),i=0;i<e.length;i++){if(e[i].hasAttribute("id"))n=e[i].getAttribute("id");else{s=e[i].textContent,a=s.replace(/[^\w\s-]/gi,"").replace(/\s+/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase(),h=a,r=0;do void 0!==l&&(h=a+"-"+r),l=o.indexOf(h),r+=1;while(-1!==l);l=void 0,o.push(h),e[i].setAttribute("id",h),n=h}c=n.replace(/-/g," "),g=document.createElement("a"),g.className="anchorjs-link "+this.options.class,g.href="#"+n,g.setAttribute("aria-label","Anchor link for: "+c),g.setAttribute("data-anchorjs-icon",this.options.icon),"always"===this.options.visible&&(g.style.opacity="1"),""===this.options.icon&&(g.style.fontFamily="anchorjs-icons",g.style.fontStyle="normal",g.style.fontVariant="normal",g.style.fontWeight="normal",g.style.lineHeight=1),"left"===this.options.placement?(g.style.position="absolute",g.style.marginLeft="-1em",g.style.paddingRight="0.5em",e[i].insertBefore(g,e[i].firstChild)):(g.style.paddingLeft="0.375em",e[i].appendChild(g))}return this},this.remove=function(A){for(var e,t=document.querySelectorAll(A),o=0;o<t.length;o++)e=t[o].querySelector(".anchorjs-link"),e&&t[o].removeChild(e);return this},this._addBaselineStyles=function(){if(null===document.head.querySelector("style.anchorjs")){var A,e=document.createElement("style"),t=" .anchorjs-link { opacity: 0; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }",o=" *:hover > .anchorjs-link, .anchorjs-link:focus { opacity: 1; }",n=' @font-face { font-family: "anchorjs-icons"; font-style: normal; font-weight: normal; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype"); }',i=" [data-anchorjs-icon]::after { content: attr(data-anchorjs-icon); }";e.className="anchorjs",e.appendChild(document.createTextNode("")),A=document.head.querySelector('[rel="stylesheet"], style'),void 0===A?document.head.appendChild(e):document.head.insertBefore(e,A),e.sheet.insertRule(t,e.sheet.cssRules.length),e.sheet.insertRule(o,e.sheet.cssRules.length),e.sheet.insertRule(i,e.sheet.cssRules.length),e.sheet.insertRule(n,e.sheet.cssRules.length)}}}var anchors=new AnchorJS; function AnchorJS(A){"use strict";function t(A){o.options.icon=o.options.hasOwnProperty("icon")?A.icon:"",o.options.visible=o.options.hasOwnProperty("visible")?A.visible:"hover",o.options.placement=o.options.hasOwnProperty("placement")?A.placement:"right",o.options.class=o.options.hasOwnProperty("class")?A.class:"",o.options.truncate=o.options.hasOwnProperty("truncate")?Math.floor(A.truncate):64}function e(){if(null===document.head.querySelector("style.anchorjs")){var A,t=document.createElement("style"),e=" .anchorjs-link { opacity: 0; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }",o=" *:hover > .anchorjs-link, .anchorjs-link:focus { opacity: 1; }",n=' @font-face { font-family: "anchorjs-icons"; font-style: normal; font-weight: normal; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype"); }',i=" [data-anchorjs-icon]::after { content: attr(data-anchorjs-icon); }";t.className="anchorjs",t.appendChild(document.createTextNode("")),A=document.head.querySelector('[rel="stylesheet"], style'),void 0===A?document.head.appendChild(t):document.head.insertBefore(t,A),t.sheet.insertRule(e,t.sheet.cssRules.length),t.sheet.insertRule(o,t.sheet.cssRules.length),t.sheet.insertRule(i,t.sheet.cssRules.length),t.sheet.insertRule(n,t.sheet.cssRules.length)}}var o=this;this.options=A||{},t(A),this.add=function(A){var o,n,i,s,a,r,l,c,h,g,B,u;if(t(this.options),A){if("string"!=typeof A)throw new Error("The selector provided to AnchorJS was invalid.")}else A="h1, h2, h3, h4, h5, h6";if(o=document.querySelectorAll(A),0===o.length)return!1;for(e(),n=document.querySelectorAll("[id]"),i=[].map.call(n,function(A){return A.id}),a=0;a<o.length;a++){if(o[a].hasAttribute("id"))s=o[a].getAttribute("id");else{r=o[a].textContent,l=this.urlify(r),g=l,h=0;do void 0!==c&&(g=l+"-"+h),c=i.indexOf(g),h+=1;while(-1!==c);c=void 0,i.push(g),o[a].setAttribute("id",g),s=g}B=s.replace(/-/g," "),u=document.createElement("a"),u.className="anchorjs-link "+this.options.class,u.href="#"+s,u.setAttribute("aria-label","Anchor link for: "+B),u.setAttribute("data-anchorjs-icon",this.options.icon),"always"===this.options.visible&&(u.style.opacity="1"),""===this.options.icon&&(u.style.fontFamily="anchorjs-icons",u.style.fontStyle="normal",u.style.fontVariant="normal",u.style.fontWeight="normal",u.style.lineHeight=1,"left"===this.options.placement&&(u.style.lineHeight="inherit")),"left"===this.options.placement?(u.style.position="absolute",u.style.marginLeft="-1em",u.style.paddingRight="0.5em",o[a].insertBefore(u,o[a].firstChild)):(u.style.paddingLeft="0.375em",o[a].appendChild(u))}return this},this.remove=function(A){for(var t,e=document.querySelectorAll(A),o=0;o<e.length;o++)t=e[o].querySelector(".anchorjs-link"),t&&e[o].removeChild(t);return this},this.urlify=function(A){var e,o=/[& +$,:;=?@"#{}|^~[`%!'\]\.\/\(\)\*\\]/g;return t(this.options),e=A.replace(/\'/gi,"").replace(o,"-").replace(/-{2,}/g,"-").substring(0,this.options.truncate).replace(/^-+|-+$/gm,"").toLowerCase()}}var anchors=new AnchorJS;
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,8 +1,8 @@
// ZeroClipboard // clipboard.js
// //
// Flash-based `Copy` buttons for code snippets. // Flash-based `Copy` buttons for code snippets.
.zero-clipboard { .bd-clipboard {
position: relative; position: relative;
display: none; display: none;
float: right; float: right;
@@ -28,7 +28,7 @@
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.zero-clipboard { .bd-clipboard {
display: block; display: block;
} }
} }
+4 -4
View File
@@ -75,7 +75,7 @@
} }
+ .highlight, + .highlight,
+ .zero-clipboard + .highlight { + .clipboard + .highlight {
margin-top: 0; margin-top: 0;
} }
@@ -253,11 +253,11 @@
} }
// Popovers // Popovers
.bd-example-popover { .bd-example-popover-static {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.bd-example-popover .popover { .bd-example-popover-static .popover {
position: relative; position: relative;
display: block; display: block;
float: left; float: left;
@@ -266,7 +266,7 @@
} }
// Tooltips // Tooltips
.bd-example-tooltip .tooltip { .bd-example-tooltip-static .tooltip {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 10px 20px; margin: 10px 20px;
+3 -2
View File
@@ -3,8 +3,9 @@
padding: 3rem ($grid-gutter-width / 2) 2rem; padding: 3rem ($grid-gutter-width / 2) 2rem;
color: $bd-purple-light; color: $bd-purple-light;
text-align: center; text-align: center;
background: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%)); background-image: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
background: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%)); background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(darken($bd-purple, 20%))}', endColorstr='#{ie-hex-str(lighten(saturate($bd-purple, 5%), 15%))}', gradientType='1'); /* For IE9 */
.bd-booticon { .bd-booticon {
margin: 0 auto 2rem; margin: 0 auto 2rem;
+1 -1
View File
@@ -17,7 +17,7 @@
} }
&.active { &.active {
font-weight: 500; color: darken($gray-dark, 25%);
} }
} }
} }
+1
View File
@@ -47,6 +47,7 @@
padding: .75rem 1rem; padding: .75rem 1rem;
color: #7a7a7a; color: #7a7a7a;
text-align: center; text-align: center;
white-space: normal; // Undo .dropdown-item defaults
} }
} }
+1 -1
View File
@@ -57,7 +57,7 @@ $bd-info: #5bc0de;
@import "team"; @import "team";
@import "browser-bugs"; @import "browser-bugs";
@import "brand"; @import "brand";
@import "zeroclipboard"; @import "clipboard-js";
// Load docs dependencies // Load docs dependencies
@import "syntax"; @import "syntax";
+5
View File
@@ -10,6 +10,11 @@ We publicly list browser bugs that are impacting us here, in the hopes of expedi
Also see [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o). Also see [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o).
See also:
* [Chromium issue 536263: [meta] Issues affecting Bootstrap](https://code.google.com/p/chromium/issues/detail?id=536263)
* [Mozilla bug 1230801: Fix the issues that affect Bootstrap](https://bugzilla.mozilla.org/show_bug.cgi?id=1230801)
* [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o)
<div class="table-responsive"> <div class="table-responsive">
<table class="bd-browser-bugs table table-bordered table-hover"> <table class="bd-browser-bugs table table-bordered table-hover">
<thead> <thead>
-2
View File
@@ -64,7 +64,6 @@ You can see this in action with a live demo:
<div class="alert alert-warning alert-dismissible fade in" role="alert"> <div class="alert alert-warning alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button> </button>
<strong>Holy guacamole!</strong> You should check in on some of those fields below. <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div> </div>
@@ -85,7 +84,6 @@ Or with `data` attributes on a button **within the alert**, as demonstrated abov
{% highlight html %} {% highlight html %}
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button> </button>
{% endhighlight %} {% endhighlight %}
+32 -11
View File
@@ -51,6 +51,16 @@ Cards support a wide variety of content, including images, text, list groups, li
</div> </div>
{% endexample %} {% endexample %}
{% example html %}
<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
{% endexample %}
{% example html %} {% example html %}
<div class="card"> <div class="card">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
@@ -130,13 +140,13 @@ You can quickly change the text alignment of any card—in its entirety or speci
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
<div class="card card-block text-center"> <div class="card card-block text-xs-center">
<h4 class="card-title">Special title treatment</h4> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
<div class="card card-block text-right"> <div class="card card-block text-xs-right">
<h4 class="card-title">Special title treatment</h4> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -160,6 +170,17 @@ Add an optional header and/or footer within a card.
</div> </div>
{% endexample %} {% endexample %}
{% example html %}
<div class="card">
<h3 class="card-header">Featured</h3>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
{% example html %} {% example html %}
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
@@ -175,7 +196,7 @@ Add an optional header and/or footer within a card.
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<div class="card text-center"> <div class="card text-xs-center">
<div class="card-header"> <div class="card-header">
Featured Featured
</div> </div>
@@ -249,7 +270,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.** Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
{% example html %} {% example html %}
<div class="card card-inverse card-primary text-center"> <div class="card card-inverse card-primary text-xs-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -257,7 +278,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-success text-center"> <div class="card card-inverse card-success text-xs-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -265,7 +286,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-info text-center"> <div class="card card-inverse card-info text-xs-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -273,7 +294,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-warning text-center"> <div class="card card-inverse card-warning text-xs-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -281,7 +302,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-danger text-center"> <div class="card card-inverse card-danger text-xs-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -398,7 +419,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
<div class="card card-block card-inverse card-primary text-center"> <div class="card card-block card-inverse card-primary text-xs-center">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer> <footer>
@@ -408,7 +429,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
</footer> </footer>
</blockquote> </blockquote>
</div> </div>
<div class="card card-block text-center"> <div class="card card-block text-xs-center">
<h4 class="card-title">Card title</h4> <h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@@ -416,7 +437,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
<div class="card"> <div class="card">
<img class="card-img" data-src="holder.js/100px260/" alt="Card image"> <img class="card-img" data-src="holder.js/100px260/" alt="Card image">
</div> </div>
<div class="card card-block text-right"> <div class="card card-block text-xs-right">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <footer>
+10 -10
View File
@@ -4,7 +4,7 @@ title: Carousel
group: components group: components
--- ---
A slideshow component for cycling through elements—images or slides of text—like a carousel. **Nested carousels are not supported.** A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](http://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.**
## Contents ## Contents
@@ -144,9 +144,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th> <th style="width: 50px;">Type</th>
<th style="width: 50px;">default</th> <th style="width: 50px;">Default</th>
<th>description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -180,7 +180,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
### Methods ### Methods
#### .carousel(options) #### `.carousel(options)`
Initializes the carousel with an optional options `object` and starts cycling through items. Initializes the carousel with an optional options `object` and starts cycling through items.
@@ -190,23 +190,23 @@ $('.carousel').carousel({
}) })
{% endhighlight %} {% endhighlight %}
#### .carousel('cycle') #### `.carousel('cycle')`
Cycles through the carousel items from left to right. Cycles through the carousel items from left to right.
#### .carousel('pause') #### `.carousel('pause')`
Stops the carousel from cycling through items. Stops the carousel from cycling through items.
#### .carousel(number) #### `.carousel(number)`
Cycles the carousel to a particular frame (0 based, similar to an array). Cycles the carousel to a particular frame (0 based, similar to an array).
#### .carousel('prev') #### `.carousel('prev')`
Cycles to the previous item. Cycles to the previous item.
#### .carousel('next') #### `.carousel('next')`
Cycles to the next item. Cycles to the next item.
+7 -7
View File
@@ -121,9 +121,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th> <th style="width: 50px;">Type</th>
<th style="width: 50px;">default</th> <th style="width: 50px;">Default</th>
<th>description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -145,7 +145,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
### Methods ### Methods
#### .collapse(options) #### `.collapse(options)`
Activates your content as a collapsible element. Accepts an optional options `object`. Activates your content as a collapsible element. Accepts an optional options `object`.
@@ -155,15 +155,15 @@ $('#myCollapsible').collapse({
}) })
{% endhighlight %} {% endhighlight %}
#### .collapse('toggle') #### `.collapse('toggle')`
Toggles a collapsible element to shown or hidden. Toggles a collapsible element to shown or hidden.
#### .collapse('show') #### `.collapse('show')`
Shows a collapsible element. Shows a collapsible element.
#### .collapse('hide') #### `.collapse('hide')`
Hides a collapsible element. Hides a collapsible element.
+13 -19
View File
@@ -473,7 +473,7 @@ While Bootstrap will apply these styles in all browsers, Internet Explorer 11 an
## Readonly inputs ## Readonly inputs
Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.< Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
{% example html %} {% example html %}
<input class="form-control" type="text" placeholder="Readonly input here…" readonly> <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
@@ -484,9 +484,9 @@ Add the `readonly` boolean attribute on an input to prevent modification of the
Set heights using classes like `.form-control-lg`, and set widths using grid column classes like `.col-lg-*`. Set heights using classes like `.form-control-lg`, and set widths using grid column classes like `.col-lg-*`.
{% example html %} {% example html %}
<input class="form-control form-control-lg" type="text" placeholder=".input-lg"> <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input"> <input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".input-sm"> <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
{% endexample %} {% endexample %}
{% example html %} {% example html %}
@@ -535,7 +535,7 @@ Block help text—for below inputs or for longer lines of help text—can be eas
## Validation ## Validation
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles. Bootstrap includes validation styles for danger, warning, and success states on form controls. To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
{% comment %} {% comment %}
{% callout warning %} {% callout warning %}
@@ -556,40 +556,34 @@ Ensure that an alternative indication of state is also provided. For instance, y
<label class="form-control-label" for="inputWarning1">Input with warning</label> <label class="form-control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control form-control-warning" id="inputWarning1"> <input type="text" class="form-control form-control-warning" id="inputWarning1">
</div> </div>
<div class="form-group has-error"> <div class="form-group has-danger">
<label class="form-control-label" for="inputError1">Input with error</label> <label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-error" id="inputError1"> <input type="text" class="form-control form-control-danger" id="inputDanger1">
</div> </div>
<div class="has-success"> <div class="checkbox has-success">
<div class="checkbox">
<label> <label>
<input type="checkbox" id="checkboxSuccess" value="option1"> <input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success Checkbox with success
</label> </label>
</div> </div>
</div> <div class="checkbox has-warning">
<div class="has-warning">
<div class="checkbox">
<label> <label>
<input type="checkbox" id="checkboxWarning" value="option1"> <input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning Checkbox with warning
</label> </label>
</div> </div>
</div> <div class="checkbox has-danger">
<div class="has-error">
<div class="checkbox">
<label> <label>
<input type="checkbox" id="checkboxError" value="option1"> <input type="checkbox" id="checkboxDanger" value="option1">
Checkbox with error Checkbox with danger
</label> </label>
</div> </div>
</div>
{% endexample %} {% endexample %}
## Custom forms ## Custom forms
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements any default form control. For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements for any default form control.
### Checkboxes and radios ### Checkboxes and radios
+15 -1
View File
@@ -23,7 +23,7 @@ Place one add-on or button on either side of an input. You may also place one on
<br> <br>
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">.00</span> <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div> </div>
<br> <br>
<label for="basic-url">Your vanity URL</label> <label for="basic-url">Your vanity URL</label>
@@ -108,6 +108,20 @@ Buttons in input groups are a bit different and require one extra level of nesti
</div> </div>
</div> </div>
</div> </div>
<br>
<div class="row">
<div class="col-lg-offset-3 col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Hate it</button>
</span>
<input type="text" class="form-control" placeholder="Product name">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Love it</button>
</span>
</div>
</div>
</div>
{% endexample %} {% endexample %}
## Buttons with dropdowns ## Buttons with dropdowns
+3 -3
View File
@@ -31,15 +31,15 @@ Add labels to any list group item to show unread counts, activity, etc.
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <li class="list-group-item">
<span class="label label-default label-pill pull-right">14</span> <span class="label label-default label-pill pull-xs-right">14</span>
Cras justo odio Cras justo odio
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span class="label label-default label-pill pull-right">2</span> <span class="label label-default label-pill pull-xs-right">2</span>
Dapibus ac facilisis in Dapibus ac facilisis in
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span class="label label-default label-pill pull-right">1</span> <span class="label label-default label-pill pull-xs-right">1</span>
Morbi leo risus Morbi leo risus
</li> </li>
</ul> </ul>
+9 -14
View File
@@ -48,7 +48,6 @@ A rendered modal with header, body, and set of actions in the footer.
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button> </button>
<h4 class="modal-title">Modal title</h4> <h4 class="modal-title">Modal title</h4>
</div> </div>
@@ -71,7 +70,6 @@ A rendered modal with header, body, and set of actions in the footer.
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button> </button>
<h4 class="modal-title">Modal title</h4> <h4 class="modal-title">Modal title</h4>
</div> </div>
@@ -98,7 +96,6 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button> </button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4> <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div> </div>
@@ -153,7 +150,6 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button> </button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4> <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div> </div>
@@ -223,7 +219,6 @@ Modals have two optional sizes, available via modifier classes to be placed on a
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button> </button>
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
</div> </div>
@@ -241,7 +236,6 @@ Modals have two optional sizes, available via modifier classes to be placed on a
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button> </button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div> </div>
@@ -275,6 +269,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
<h4 class="modal-title" id="gridModalLabel">Modal title</h4> <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="container-fluid bd-example-row">
<div class="row"> <div class="row">
<div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
@@ -300,6 +295,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-primary">Save changes</button>
@@ -329,7 +325,6 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button> </button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4> <h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div> </div>
@@ -398,9 +393,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th> <th style="width: 50px;">Type</th>
<th style="width: 50px;">default</th> <th style="width: 50px;">Default</th>
<th>description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -428,7 +423,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
### Methods ### Methods
#### .modal(options) #### `.modal(options)`
Activates your content as a modal. Accepts an optional options `object`. Activates your content as a modal. Accepts an optional options `object`.
@@ -438,19 +433,19 @@ $('#myModal').modal({
}) })
{% endhighlight %} {% endhighlight %}
#### .modal('toggle') #### `.modal('toggle')`
Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
{% highlight js %}$('#myModal').modal('toggle'){% endhighlight %} {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
#### .modal('show') #### `.modal('show')`
Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
{% highlight js %}$('#myModal').modal('show'){% endhighlight %} {% highlight js %}$('#myModal').modal('show'){% endhighlight %}
#### .modal('hide') #### `.modal('hide')`
Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
+60 -9
View File
@@ -15,9 +15,9 @@ The navbar is a simple wrapper for positioning branding, navigation, and other e
Here's what you need to know before getting started with the navbar: Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`). - Navbars require a wrapping `.navbar` and a [color scheme](#color-schemes).
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width. - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Use `.pull-left` and `.pull-right` to quickly align sub-components. - Use `.pull-*-left` and `.pull-*-right` to quickly align sub-components.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies. - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
## Supported content ## Supported content
@@ -26,8 +26,7 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
- `.navbar-brand` for your company, product, or project name - `.navbar-brand` for your company, product, or project name
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns) - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
- `.navbar-form` for vertically centering default-sized inputs and buttons. - `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors.
- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.
Here's an example of all the sub-components included in a default, light navbar: Here's an example of all the sub-components included in a default, light navbar:
@@ -48,13 +47,65 @@ Here's an example of all the sub-components included in a default, light navbar:
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="form-inline navbar-form pull-right"> <form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button> <button class="btn btn-success-outline" type="submit">Search</button>
</form> </form>
</nav> </nav>
{% endexample %} {% endexample %}
### Brand
The `.navbar-brand` can be applied to most elements, but an anchor works best.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-light bg-faded">
<h1 class="navbar-brand">Navbar</h1>
</nav>
{% endexample %}
### Nav
Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
{% endexample %}
And because we use classes for our navs, you can omit the list-based approach entirely if you like.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link" href="#">About</a>
</div>
</nav>
{% endexample %}
## Color schemes ## Color schemes
Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color. Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.
@@ -78,7 +129,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="form-inline navbar-form pull-right"> <form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
<button class="btn btn-info-outline" type="submit">Search</button> <button class="btn btn-info-outline" type="submit">Search</button>
</form> </form>
@@ -99,7 +150,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="form-inline navbar-form pull-right"> <form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary-outline" type="submit">Search</button> <button class="btn btn-secondary-outline" type="submit">Search</button>
</form> </form>
@@ -120,7 +171,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="form-inline navbar-form pull-right"> <form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary-outline" type="submit">Search</button> <button class="btn btn-primary-outline" type="submit">Search</button>
</form> </form>
@@ -143,7 +194,7 @@ Here are some examples to show what we mean.
## Containers ## Containers
Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of the navbar. Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement).
{% example html %} {% example html %}
<div class="container"> <div class="container">
+83 -51
View File
@@ -17,7 +17,7 @@ If you are using navs to provide a navigation bar, be sure to add a `role="navig
## Base nav ## Base nav
Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but **not the active state**. Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this by specifying additional styles. Includes styles for the disabled state, but **not the active state**.
{% example html %} {% example html %}
<ul class="nav"> <ul class="nav">
@@ -36,7 +36,7 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
</ul> </ul>
{% endexample %} {% endexample %}
Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element. Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element. The change in nav item display below **is intentional** as `<li>`s have a different default `display` than regular `<a>` elements.
{% example html %} {% example html %}
<nav class="nav"> <nav class="nav">
@@ -47,6 +47,38 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
</nav> </nav>
{% endexample %} {% endexample %}
## Inline
Easily space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
{% example html %}
<nav class="nav nav-inline">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Another link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
The same works for a navigation built with lists.
{% example html %}
<ul class="nav nav-inline">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
## Tabs ## Tabs
Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior). Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).
@@ -54,16 +86,16 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
{% example html %} {% example html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a class="nav-link" href="#">Another link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
@@ -75,16 +107,16 @@ Take that same HTML, but use `.nav-pills` instead:
{% example html %} {% example html %}
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a class="nav-link" href="#">Another link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
@@ -96,16 +128,16 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
{% example html %} {% example html %}
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a class="nav-link" href="#">Another link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
@@ -119,7 +151,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %} {% example html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
@@ -132,10 +164,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</div> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a class="nav-link" href="#">Another link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
@@ -145,7 +177,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %} {% example html %}
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
@@ -158,10 +190,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</div> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a class="nav-link" href="#">Another link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
@@ -171,34 +203,34 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus. Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
<div class="bd-example bd-example-tabs" role="tabpanel"> <div class="bd-example bd-example-tabs" role="tabpanel">
<ul id="myTab" class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a> <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
<a class="dropdown-item" href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a> <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
</div> </div>
</li> </li>
</ul> </ul>
<div id="myTabContent" class="tab-content"> <div class="tab-content" id="myTabContent">
<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab"> <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div> </div>
<div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledBy="profile-tab"> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledBy="profile-tab">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div> </div>
<div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledBy="dropdown1-tab"> <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledBy="dropdown1-tab">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p> <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div> </div>
<div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledBy="dropdown2-tab"> <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledBy="dropdown2-tab">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div> </div>
</div> </div>
@@ -213,25 +245,25 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
<!-- Nav tabs --> <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a> <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a> <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#messages" role="tab" data-toggle="tab">Messages</a> <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#settings" role="tab" data-toggle="tab">Settings</a> <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li> </li>
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div> <div class="tab-pane active" id="home" role="tabpanel">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div> <div class="tab-pane" id="profile" role="tabpanel">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div> <div class="tab-pane" id="messages" role="tabpanel">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div> <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
</div> </div>
@@ -258,14 +290,14 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
### Fade effect ### Fade effect
To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.in` to properly fade in initial content. To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.in` to make the initial content visible.
{% highlight html %} {% highlight html %}
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">...</div> <div class="tab-pane fade in active" id="home" role="tabpanel">...</div>
<div role="tabpanel" class="tab-pane fade" id="profile">...</div> <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div role="tabpanel" class="tab-pane fade" id="messages">...</div> <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div role="tabpanel" class="tab-pane fade" id="settings">...</div> <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@@ -276,26 +308,26 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs" role="tablist" id="myTab"> <ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a> <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a> <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a> <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a> <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li> </li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div> <div class="tab-pane active" id="home" role="tabpanel">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div> <div class="tab-pane" id="profile" role="tabpanel">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div> <div class="tab-pane" id="messages" role="tabpanel">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div> <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div> </div>
<script> <script>
+2 -2
View File
@@ -71,7 +71,7 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality while retaining intended styles. You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality while retaining intended styles.
{% highlight html %} {% example html %}
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="disabled"> <li class="disabled">
@@ -83,7 +83,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li> <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
</ul> </ul>
</nav> </nav>
{% endhighlight %} {% endexample %}
### Sizing ### Sizing
+10 -10
View File
@@ -53,7 +53,7 @@ $(function () {
Four options are available: top, right, bottom, and left aligned. Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-popover"> <div class="bd-example bd-example-popover-static">
<div class="popover popover-top"> <div class="popover popover-top">
<div class="popover-arrow"></div> <div class="popover-arrow"></div>
<h3 class="popover-title">Popover top</h3> <h3 class="popover-title">Popover top</h3>
@@ -93,7 +93,7 @@ Four options are available: top, right, bottom, and left aligned.
## Live demo ## Live demo
{% example html %} {% example html %}
<button type="button" class="btn btn-lg btn-danger bd-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
{% endexample %} {% endexample %}
### Four directions ### Four directions
@@ -145,7 +145,7 @@ For proper cross-browser and cross-platform behavior, you must use the `<a>` tag
{% endcallout %} {% endcallout %}
{% example html %} {% example html %}
<a tabindex="0" class="btn btn-lg btn-danger bd-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
{% endexample %} {% endexample %}
{% highlight js %} {% highlight js %}
@@ -282,34 +282,34 @@ Options for individual popovers can alternatively be specified through the use o
### Methods ### Methods
#### $().popover(options) #### `$().popover(options)`
Initializes popovers for an element collection. Initializes popovers for an element collection.
#### .popover('show') #### `.popover('show')`
Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed. Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.
{% highlight js %}$('#element').popover('show'){% endhighlight %} {% highlight js %}$('#element').popover('show'){% endhighlight %}
#### .popover('hide') #### `.popover('hide')`
Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
{% highlight js %}$('#element').popover('hide'){% endhighlight %} {% highlight js %}$('#element').popover('hide'){% endhighlight %}
#### .popover('toggle') #### `.popover('toggle')`
Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
{% highlight js %}$('#element').popover('toggle'){% endhighlight %} {% highlight js %}$('#element').popover('toggle'){% endhighlight %}
#### .popover('destroy') #### `.popover('dispose')`
Hides and destroys an element's popover. Popvoers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. Hides and destroys an element's popover. Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
{% highlight js %}$('#element').popover('destroy'){% endhighlight %} {% highlight js %}$('#element').popover('dispose'){% endhighlight %}
### Events ### Events
+4 -4
View File
@@ -101,7 +101,7 @@ Target elements that are not [`:visible` according to jQuery](https://api.jquery
### Methods ### Methods
#### .scrollspy('refresh') #### `.scrollspy('refresh')`
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so: When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
@@ -121,9 +121,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th> <th style="width: 100px;">Type</th>
<th style="width: 50px;">default</th> <th style="width: 50px;">Default</th>
<th>description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
+9 -9
View File
@@ -15,7 +15,7 @@ Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips a
Things to know when using the tooltip plugin: Things to know when using the tooltip plugin:
- Tooltips rely on on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work! - Tooltips rely on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work!
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**. - Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
- Tooltips with zero-length titles are never displayed. - Tooltips with zero-length titles are never displayed.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
@@ -48,7 +48,7 @@ Hover over the links below to see tooltips:
Four options are available: top, right, bottom, and left aligned. Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-tooltip"> <div class="bd-example bd-example-tooltip-static">
<div class="tooltip top" role="tooltip"> <div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div> <div class="tooltip-arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
@@ -219,7 +219,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<tr> <tr>
<td>constraints</td> <td>constraints</td>
<td>Array</td> <td>Array</td>
<td>'hover focus'</td> <td>[]</td>
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td> <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
</tr> </tr>
<tr> <tr>
@@ -240,33 +240,33 @@ Options for individual tooltips can alternatively be specified through the use o
### Methods ### Methods
#### $().tooltip(options) #### `$().tooltip(options)`
Attaches a tooltip handler to an element collection. Attaches a tooltip handler to an element collection.
#### .tooltip('show') #### `.tooltip('show')`
Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed. Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
{% highlight js %}$('#element').tooltip('show'){% endhighlight %} {% highlight js %}$('#element').tooltip('show'){% endhighlight %}
#### .tooltip('hide') #### `.tooltip('hide')`
Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
{% highlight js %}$('#element').tooltip('hide'){% endhighlight %} {% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
#### .tooltip('toggle') #### `.tooltip('toggle')`
Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
{% highlight js %}$('#element').tooltip('toggle'){% endhighlight %} {% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
#### .tooltip('destroy') #### `.tooltip('dispose')`
Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %} {% highlight js %}$('#element').tooltip('dispose'){% endhighlight %}
### Events ### Events
+56 -31
View File
@@ -4,7 +4,7 @@ title: Utility classes
group: components group: components
--- ---
Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to reduce the frequency of highly repetitive declarations in your CSS down while allowing for quick and easy development. Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.
## Contents ## Contents
@@ -94,13 +94,23 @@ Assign `margin` or `padding` to an element or a subset of its sides with shortha
Easily realign text to components with text alignment classes. Easily realign text to components with text alignment classes.
{% example html %} {% example 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-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p> <p class="text-nowrap">No wrap text.</p>
{% endexample %} {% endexample %}
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
{% example html %}
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
{% endexample %}
## Text transform ## Text transform
Transform text in components with text capitalization classes. Transform text in components with text capitalization classes.
@@ -108,7 +118,17 @@ Transform text in components with text capitalization classes.
{% example html %} {% example html %}
<p class="text-lowercase">Lowercased text.</p> <p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p> <p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p> <p class="text-capitalize">CapiTaliZed text.</p>
{% endexample %}
## Font weight and italics
Quickly change the weight (boldness) of text or italicize text.
{% example html %}
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italicized text.</p>
{% endexample %} {% endexample %}
## Contextual colors and backgrounds ## Contextual colors and backgrounds
@@ -124,6 +144,17 @@ Convey meaning through color with a handful of emphasis utility classes. These m
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
{% endexample %} {% endexample %}
Contextual text classes also work well on anchors with the provided hover and focus states.
{% example html %}
<a href="#" class="text-muted">Muted link</a>
<a href="#" class="text-primary">Primary link</a>
<a href="#" class="text-success">Success link</a>
<a href="#" class="text-info">Info link</a>
<a href="#" class="text-warning">Warning link</a>
<a href="#" class="text-danger">Danger link</a>
{% endexample %}
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
{% example html %} {% example html %}
@@ -149,34 +180,33 @@ Ensure that any meaning conveyed through color is also conveyed in a format that
## Close icon ## Close icon
Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`. Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`.
{% example html %} {% example html %}
<button type="button" class="close" aria-label="Close"> <button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button> </button>
{% endexample %} {% endexample %}
## Floats ## Responsive floats
Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins. These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
Two similar non-responsive mixins (`pull-left` and `pull-right`) are also available.
{% example html %} {% example html %}
<div class="pull-left">Float left</div> <div class="pull-xs-left">Float left on all viewport sizes</div>
<div class="pull-right">Float right</div> <div class="pull-xs-right">Float right on all viewport sizes</div>
<div class="pull-xs-none">Don't float on all viewport sizes</div>
<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div>
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div>
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div>
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div>
{% endexample %} {% endexample %}
{% highlight scss %} {% highlight scss %}
// Classes // Related simple non-responsive mixins
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element { .element {
@include pull-left; @include pull-left;
} }
@@ -232,16 +262,6 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
} }
{% endhighlight %} {% endhighlight %}
## Hidden content
Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io). While `[hidden]` isn't natively supported by IE9-10, declaring it `display: none` in our CSS gets around that problem.
Furthermore, `.invisible` can be used to toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
{% highlight html %}
<input type="text" hidden>
{% endhighlight %}
## Invisible content ## Invisible content
The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
@@ -262,7 +282,7 @@ The `.invisible` class can be used to toggle only the visibility of an element,
} }
{% endhighlight %} {% endhighlight %}
## Screen readers ## Screen readers and keyboard users
Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins. Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
@@ -328,4 +348,9 @@ Aspect ratios can be customized with modifier classes.
<div class="embed-responsive embed-responsive-4by3"> <div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe> <iframe class="embed-responsive-item" src="..."></iframe>
</div> </div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
{% endhighlight %} {% endhighlight %}
+4 -4
View File
@@ -6,11 +6,11 @@ group: content
Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`. Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`.
Use the included `.figure` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. As a bonus, immediate children images are automatically responsive. Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `<img>` to make it responsive.
{% example html %} {% example html %}
<figure class="figure"> <figure class="figure">
<img data-src="holder.js/400x300" class="img-rounded" alt="A generic square placeholder image with rounded corners in a figure."> <img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption> <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure> </figure>
{% endexample %} {% endexample %}
@@ -19,7 +19,7 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
{% example html %} {% example html %}
<figure class="figure"> <figure class="figure">
<img data-src="holder.js/400x300" class="img-rounded" alt="A generic square placeholder image with rounded corners in a figure."> <img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption> <figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
</figure> </figure>
{% endexample %} {% endexample %}
+7 -7
View File
@@ -26,7 +26,7 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
{% callout warning %} {% callout warning %}
#### SVG images and IE 9-10 #### SVG images and IE 9-10
In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats. In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
{% endcallout %} {% endcallout %}
## Image shapes ## Image shapes
@@ -50,13 +50,13 @@ Add classes to an `<img>` element to easily style images in any project.
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images. Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
<div class="bd-example bd-example-images"> <div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-rounded pull-left" alt="A generic square placeholder image with rounded corners"> <img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="img-rounded pull-right" alt="A generic square placeholder image with rounded corners"> <img data-src="holder.js/200x200" class="img-rounded pull-xs-right" alt="A generic square placeholder image with rounded corners">
</div> </div>
{% highlight html %} {% highlight html %}
<img src="..." class="img-rounded pull-left" alt="..."> <img src="..." class="img-rounded pull-xs-left" alt="...">
<img src="..." class="img-rounded pull-right" alt="..."> <img src="..." class="img-rounded pull-xs-right" alt="...">
{% endhighlight %} {% endhighlight %}
<div class="bd-example bd-example-images"> <div class="bd-example bd-example-images">
@@ -68,13 +68,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
{% endhighlight %} {% endhighlight %}
<div class="bd-example bd-example-images"> <div class="bd-example bd-example-images">
<div class="text-center"> <div class="text-xs-center">
<img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners"> <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="text-center"> <div class="text-xs-center">
<img src="..." class="img-rounded" alt="..."> <img src="..." class="img-rounded" alt="...">
</div> </div>
{% endhighlight %} {% endhighlight %}
+33 -3
View File
@@ -166,7 +166,7 @@ Various form elements have been rebooted for simpler base styles. Here are some
- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts. - `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
- `<label>`s are set to `display: inline-block` to allow `margin` to be applied. - `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
- `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too. - `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
- `<textarea>`s are modified to only be resizeble vertically as horizontal resizing often "breaks" page layout. - `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
These changes, and more, are demonstrated below. These changes, and more, are demonstrated below.
@@ -272,7 +272,7 @@ The `<address>` element is updated to reset the browser default `font-style` fro
The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements. The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements.
<div class="bd-example"> <div class="bd-example">
<blockquote> <blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> </blockquote>
@@ -280,8 +280,38 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem
### Inline elements ### Inline elements
The `<abbr>` element receives basic styling to make it stand the amongst paragraph text. The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
<div class="bd-example"> <div class="bd-example">
Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
</div> </div>
## HTML5 `[hidden]` attribute
HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE9-10, the explicit declaration in our CSS gets around that problem.
{% highlight html %}
<input type="text" hidden>
{% endhighlight %}
{% callout warning %}
#### jQuery incompatibility
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
{% endcallout %}
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/components/utilities/#invisible-content) instead.
## Click delay optimization for touch
Traditionally, browsers on touchscreen devices have a delay of approximately 300ms between the end of a "tap" the moment when a finger/stylus is lifted from screen and the [`click` event](https://developer.mozilla.org/en-US/docs/Web/Events/click) being fired. This delay is necessary for these browsers to correctly handle "double-tap to zoom" gestures without prematurely triggering actions or links after the first "tap", but it can make your site feel slightly sluggish and unresponsive.
Most mobile browsers automatically optimize away this 300ms delay for sites that use the `width=device-width` property as part of their [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) (as well as for sites that disable zooming, for instance with `user-scalable=no`, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are currently iOS Safari (and any other iOS WebView-based browser) though this is likely to change in iOS 10, see [WebKit bug #150604](https://bugs.webkit.org/show_bug.cgi?id=150604) and IE11 on Windows Phone 8.1.
On touch-enabled laptop/desktop devices, IE11 and Microsoft Edge are currently the only browsers with "double-tap to zoom" functionality. As the [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) is ignored by all desktop browsers, using `width=device-width` will have no effect on the 300ms delay here.
To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 on Windows Phone 8.1, Bootstrap explicitly uses the [`touch-action:manipulation` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) on all interactive elements (such as buttons and links). This property essentially disables double-tap functionality on those elements, eliminating the 300ms delay.
In the case of iOS, the currently suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay.
For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay).
+1 -1
View File
@@ -451,7 +451,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
{% callout warning %} {% callout warning %}
#### Firefox and fieldsets #### Firefox and fieldsets
Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we **don't** provide in Bootstrap: Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we **don't** provide in Bootstrap:
{% highlight css %} {% highlight css %}
@-moz-document url-prefix() { @-moz-document url-prefix() {
+2 -2
View File
@@ -15,11 +15,11 @@ Bootstrap includes simple and easily customized typography for headings, body te
Bootstrap sets basic global display, typography, and link styles. Specifically, we: Bootstrap sets basic global display, typography, and link styles. Specifically, we:
- Set `background-color: #fff;` on the `<body>` - Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default)
- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base
- Set the global link color via `$link-color` and apply link underlines only on `:hover` - Set the global link color via `$link-color` and apply link underlines only on `:hover`
These styles can be found within `_reboot.scss`. These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`.
## Headings ## Headings
File diff suppressed because it is too large Load Diff
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+72 -40
View File
@@ -10,8 +10,8 @@ if (typeof jQuery === 'undefined') {
+function ($) { +function ($) {
var version = $.fn.jquery.split(' ')[0].split('.') var version = $.fn.jquery.split(' ')[0].split('.')
if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) { if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] >= 3)) {
throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher') throw new Error('Bootstrap\'s JavaScript requires at least jQuery v1.9.1 but less than v3.0.0')
} }
}(jQuery); }(jQuery);
@@ -20,14 +20,14 @@ if (typeof jQuery === 'undefined') {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): util.js * Bootstrap (v4.0.0-alpha): util.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
'use strict'; 'use strict';
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
@@ -129,7 +129,7 @@ var Util = (function ($) {
getUID: function getUID(prefix) { getUID: function getUID(prefix) {
do { do {
prefix += ~ ~(Math.random() * 1000000); prefix += ~ ~(Math.random() * 1000000); // "~~" acts like a faster Math.floor() here
} while (document.getElementById(prefix)); } while (document.getElementById(prefix));
return prefix; return prefix;
}, },
@@ -185,7 +185,7 @@ var Util = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): alert.js * Bootstrap (v4.0.0-alpha): alert.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -199,7 +199,7 @@ var Alert = (function ($) {
*/ */
var NAME = 'alert'; var NAME = 'alert';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.alert'; var DATA_KEY = 'bs.alert';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -371,7 +371,7 @@ var Alert = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): button.js * Bootstrap (v4.0.0-alpha): button.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -385,7 +385,7 @@ var Button = (function ($) {
*/ */
var NAME = 'button'; var NAME = 'button';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.button'; var DATA_KEY = 'bs.button';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -537,7 +537,7 @@ var Button = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): carousel.js * Bootstrap (v4.0.0-alpha): carousel.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -551,7 +551,7 @@ var Carousel = (function ($) {
*/ */
var NAME = 'carousel'; var NAME = 'carousel';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.carousel'; var DATA_KEY = 'bs.carousel';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -650,6 +650,14 @@ var Carousel = (function ($) {
this._slide(Direction.NEXT); this._slide(Direction.NEXT);
} }
} }
}, {
key: 'nextWhenVisible',
value: function nextWhenVisible() {
// Don't call next when the page isn't visible
if (!document.hidden) {
this.next();
}
}
}, { }, {
key: 'prev', key: 'prev',
value: function prev() { value: function prev() {
@@ -685,7 +693,7 @@ var Carousel = (function ($) {
} }
if (this._config.interval && !this._isPaused) { if (this._config.interval && !this._isPaused) {
this._interval = setInterval($.proxy(this.next, this), this._config.interval); this._interval = setInterval($.proxy(document.visibilityState ? this.nextWhenVisible : this.next, this), this._config.interval);
} }
} }
}, { }, {
@@ -918,7 +926,10 @@ var Carousel = (function ($) {
if (typeof config === 'number') { if (typeof config === 'number') {
data.to(config); data.to(config);
} else if (action) { } else if (typeof action === 'string') {
if (data[action] === undefined) {
throw new Error('No method named "' + action + '"');
}
data[action](); data[action]();
} else if (_config.interval) { } else if (_config.interval) {
data.pause(); data.pause();
@@ -998,7 +1009,7 @@ var Carousel = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): collapse.js * Bootstrap (v4.0.0-alpha): collapse.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -1012,7 +1023,7 @@ var Collapse = (function ($) {
*/ */
var NAME = 'collapse'; var NAME = 'collapse';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.collapse'; var DATA_KEY = 'bs.collapse';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -1306,6 +1317,9 @@ var Collapse = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
@@ -1353,7 +1367,7 @@ var Collapse = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): dropdown.js * Bootstrap (v4.0.0-alpha): dropdown.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -1367,7 +1381,7 @@ var Dropdown = (function ($) {
*/ */
var NAME = 'dropdown'; var NAME = 'dropdown';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.dropdown'; var DATA_KEY = 'bs.dropdown';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -1496,6 +1510,9 @@ var Dropdown = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config].call(this); data[config].call(this);
} }
}); });
@@ -1637,7 +1654,7 @@ var Dropdown = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): modal.js * Bootstrap (v4.0.0-alpha): modal.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -1651,7 +1668,7 @@ var Modal = (function ($) {
*/ */
var NAME = 'modal'; var NAME = 'modal';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.modal'; var DATA_KEY = 'bs.modal';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -1769,7 +1786,7 @@ var Modal = (function ($) {
$(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () { $(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () {
$(_this7._element).one(Event.MOUSEUP_DISMISS, function (event) { $(_this7._element).one(Event.MOUSEUP_DISMISS, function (event) {
if ($(event.target).is(_this7._element)) { if ($(event.target).is(_this7._element)) {
that._ignoreBackdropClick = true; _this7._ignoreBackdropClick = true;
} }
}); });
}); });
@@ -2093,6 +2110,9 @@ var Modal = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](relatedTarget); data[config](relatedTarget);
} else if (_config.show) { } else if (_config.show) {
data.show(relatedTarget); data.show(relatedTarget);
@@ -2164,7 +2184,7 @@ var Modal = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): scrollspy.js * Bootstrap (v4.0.0-alpha): scrollspy.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -2178,7 +2198,7 @@ var ScrollSpy = (function ($) {
*/ */
var NAME = 'scrollspy'; var NAME = 'scrollspy';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.scrollspy'; var DATA_KEY = 'bs.scrollspy';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -2429,6 +2449,9 @@ var ScrollSpy = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
@@ -2475,7 +2498,7 @@ var ScrollSpy = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): tab.js * Bootstrap (v4.0.0-alpha): tab.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -2489,7 +2512,7 @@ var Tab = (function ($) {
*/ */
var NAME = 'tab'; var NAME = 'tab';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.tab'; var DATA_KEY = 'bs.tab';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -2692,6 +2715,9 @@ var Tab = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
@@ -2727,15 +2753,25 @@ var Tab = (function ($) {
return Tab; return Tab;
})(jQuery); })(jQuery);
/* global Tether */
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): tooltip.js * Bootstrap (v4.0.0-alpha): tooltip.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
var Tooltip = (function ($) { var Tooltip = (function ($) {
/**
* Check for Tether dependency
* Tether - http://github.hubspot.com/tether/
*/
if (window.Tether === undefined) {
throw new Error('Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)');
}
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@@ -2743,7 +2779,7 @@ var Tooltip = (function ($) {
*/ */
var NAME = 'tooltip'; var NAME = 'tooltip';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.tooltip'; var DATA_KEY = 'bs.tooltip';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME]; var JQUERY_NO_CONFLICT = $.fn[NAME];
@@ -2971,7 +3007,8 @@ var Tooltip = (function ($) {
classes: TetherClass, classes: TetherClass,
classPrefix: CLASS_PREFIX, classPrefix: CLASS_PREFIX,
offset: this.config.offset, offset: this.config.offset,
constraints: this.config.constraints constraints: this.config.constraints,
addTargetClasses: false
}); });
Util.reflow(tip); Util.reflow(tip);
@@ -3093,12 +3130,6 @@ var Tooltip = (function ($) {
value: function cleanupTether() { value: function cleanupTether() {
if (this._tether) { if (this._tether) {
this._tether.destroy(); this._tether.destroy();
// clean up after tether's junk classes
// remove after they fix issue
// (https://github.com/HubSpot/tether/issues/36)
$(this.element).removeClass(this._removeTetherClasses);
$(this.tip).removeClass(this._removeTetherClasses);
} }
} }
@@ -3136,11 +3167,6 @@ var Tooltip = (function ($) {
this._fixTitle(); this._fixTitle();
} }
} }
}, {
key: '_removeTetherClasses',
value: function _removeTetherClasses(i, css) {
return ((css.baseVal || css).match(new RegExp('(^|\\s)' + CLASS_PREFIX + '-\\S+', 'g')) || []).join(' ');
}
}, { }, {
key: '_fixTitle', key: '_fixTitle',
value: function _fixTitle() { value: function _fixTitle() {
@@ -3283,6 +3309,9 @@ var Tooltip = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
@@ -3339,7 +3368,7 @@ var Tooltip = (function ($) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): popover.js * Bootstrap (v4.0.0-alpha): popover.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -3353,7 +3382,7 @@ var Popover = (function ($) {
*/ */
var NAME = 'popover'; var NAME = 'popover';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.popover'; var DATA_KEY = 'bs.popover';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME]; var JQUERY_NO_CONFLICT = $.fn[NAME];
@@ -3468,6 +3497,9 @@ var Popover = (function ($) {
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+2 -2
View File
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): alert.js * Bootstrap (v4.0.0-alpha): alert.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'alert'; var NAME = 'alert';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.alert'; var DATA_KEY = 'bs.alert';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
+2 -2
View File
@@ -13,7 +13,7 @@
})(this, function (exports, module) { })(this, function (exports, module) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): button.js * Bootstrap (v4.0.0-alpha): button.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -33,7 +33,7 @@
*/ */
var NAME = 'button'; var NAME = 'button';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.button'; var DATA_KEY = 'bs.button';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
+15 -4
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): carousel.js * Bootstrap (v4.0.0-alpha): carousel.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'carousel'; var NAME = 'carousel';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.carousel'; var DATA_KEY = 'bs.carousel';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -136,6 +136,14 @@
this._slide(Direction.NEXT); this._slide(Direction.NEXT);
} }
} }
}, {
key: 'nextWhenVisible',
value: function nextWhenVisible() {
// Don't call next when the page isn't visible
if (!document.hidden) {
this.next();
}
}
}, { }, {
key: 'prev', key: 'prev',
value: function prev() { value: function prev() {
@@ -171,7 +179,7 @@
} }
if (this._config.interval && !this._isPaused) { if (this._config.interval && !this._isPaused) {
this._interval = setInterval($.proxy(this.next, this), this._config.interval); this._interval = setInterval($.proxy(document.visibilityState ? this.nextWhenVisible : this.next, this), this._config.interval);
} }
} }
}, { }, {
@@ -404,7 +412,10 @@
if (typeof config === 'number') { if (typeof config === 'number') {
data.to(config); data.to(config);
} else if (action) { } else if (typeof action === 'string') {
if (data[action] === undefined) {
throw new Error('No method named "' + action + '"');
}
data[action](); data[action]();
} else if (_config.interval) { } else if (_config.interval) {
data.pause(); data.pause();
+5 -2
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): collapse.js * Bootstrap (v4.0.0-alpha): collapse.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'collapse'; var NAME = 'collapse';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.collapse'; var DATA_KEY = 'bs.collapse';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -331,6 +331,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+5 -2
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): dropdown.js * Bootstrap (v4.0.0-alpha): dropdown.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'dropdown'; var NAME = 'dropdown';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.dropdown'; var DATA_KEY = 'bs.dropdown';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -166,6 +166,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config].call(this); data[config].call(this);
} }
}); });
+6 -3
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): modal.js * Bootstrap (v4.0.0-alpha): modal.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'modal'; var NAME = 'modal';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.modal'; var DATA_KEY = 'bs.modal';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -155,7 +155,7 @@
$(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () { $(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () {
$(_this._element).one(Event.MOUSEUP_DISMISS, function (event) { $(_this._element).one(Event.MOUSEUP_DISMISS, function (event) {
if ($(event.target).is(_this._element)) { if ($(event.target).is(_this._element)) {
that._ignoreBackdropClick = true; _this._ignoreBackdropClick = true;
} }
}); });
}); });
@@ -479,6 +479,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](relatedTarget); data[config](relatedTarget);
} else if (_config.show) { } else if (_config.show) {
data.show(relatedTarget); data.show(relatedTarget);
+6 -3
View File
@@ -15,7 +15,7 @@
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -27,7 +27,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): popover.js * Bootstrap (v4.0.0-alpha): popover.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -41,7 +41,7 @@
*/ */
var NAME = 'popover'; var NAME = 'popover';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.popover'; var DATA_KEY = 'bs.popover';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME]; var JQUERY_NO_CONFLICT = $.fn[NAME];
@@ -156,6 +156,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+5 -2
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): scrollspy.js * Bootstrap (v4.0.0-alpha): scrollspy.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'scrollspy'; var NAME = 'scrollspy';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.scrollspy'; var DATA_KEY = 'bs.scrollspy';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -288,6 +288,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+5 -2
View File
@@ -23,7 +23,7 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): tab.js * Bootstrap (v4.0.0-alpha): tab.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -37,7 +37,7 @@
*/ */
var NAME = 'tab'; var NAME = 'tab';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.tab'; var DATA_KEY = 'bs.tab';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api'; var DATA_API_KEY = '.data-api';
@@ -240,6 +240,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+17 -14
View File
@@ -11,6 +11,8 @@
global.tooltip = mod.exports; global.tooltip = mod.exports;
} }
})(this, function (exports, module, _util) { })(this, function (exports, module, _util) {
/* global Tether */
'use strict'; 'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
@@ -23,13 +25,21 @@
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): tooltip.js * Bootstrap (v4.0.0-alpha): tooltip.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
var Tooltip = (function ($) { var Tooltip = (function ($) {
/**
* Check for Tether dependency
* Tether - http://github.hubspot.com/tether/
*/
if (window.Tether === undefined) {
throw new Error('Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)');
}
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@@ -37,7 +47,7 @@
*/ */
var NAME = 'tooltip'; var NAME = 'tooltip';
var VERSION = '4.0.0'; var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.tooltip'; var DATA_KEY = 'bs.tooltip';
var EVENT_KEY = '.' + DATA_KEY; var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME]; var JQUERY_NO_CONFLICT = $.fn[NAME];
@@ -265,7 +275,8 @@
classes: TetherClass, classes: TetherClass,
classPrefix: CLASS_PREFIX, classPrefix: CLASS_PREFIX,
offset: this.config.offset, offset: this.config.offset,
constraints: this.config.constraints constraints: this.config.constraints,
addTargetClasses: false
}); });
_Util['default'].reflow(tip); _Util['default'].reflow(tip);
@@ -387,12 +398,6 @@
value: function cleanupTether() { value: function cleanupTether() {
if (this._tether) { if (this._tether) {
this._tether.destroy(); this._tether.destroy();
// clean up after tether's junk classes
// remove after they fix issue
// (https://github.com/HubSpot/tether/issues/36)
$(this.element).removeClass(this._removeTetherClasses);
$(this.tip).removeClass(this._removeTetherClasses);
} }
} }
@@ -430,11 +435,6 @@
this._fixTitle(); this._fixTitle();
} }
} }
}, {
key: '_removeTetherClasses',
value: function _removeTetherClasses(i, css) {
return ((css.baseVal || css).match(new RegExp('(^|\\s)' + CLASS_PREFIX + '-\\S+', 'g')) || []).join(' ');
}
}, { }, {
key: '_fixTitle', key: '_fixTitle',
value: function _fixTitle() { value: function _fixTitle() {
@@ -577,6 +577,9 @@
} }
if (typeof config === 'string') { if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config](); data[config]();
} }
}); });
+2 -2
View File
@@ -13,7 +13,7 @@
})(this, function (exports, module) { })(this, function (exports, module) {
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0): util.js * Bootstrap (v4.0.0-alpha): util.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
*/ */
@@ -114,7 +114,7 @@
getUID: function getUID(prefix) { getUID: function getUID(prefix) {
do { do {
prefix += ~ ~(Math.random() * 1000000); prefix += ~ ~(Math.random() * 1000000); // "~~" acts like a faster Math.floor() here
} while (document.getElementById(prefix)); } while (document.getElementById(prefix));
return prefix; return prefix;
}, },
+4 -4
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">
@@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<section class="jumbotron text-center"> <section class="jumbotron text-xs-center">
<div class="container"> <div class="container">
<h1 class="jumbotron-heading">Album example</h1> <h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p> <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
@@ -104,7 +104,7 @@
<footer class="text-muted"> <footer class="text-muted">
<div class="container"> <div class="container">
<p class="pull-right"> <p class="pull-xs-right">
<a href="#">Back to top</a> <a href="#">Back to top</a>
</p> </p>
<p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p> <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
@@ -115,7 +115,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../assets/js/vendor/holder.min.js"></script> <script src="../../assets/js/vendor/holder.min.js"></script>
<script> <script>
+2 -2
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@@ -160,7 +160,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+5 -5
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@@ -51,7 +51,7 @@
<div class="carousel-item active"> <div class="carousel-item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container"> <div class="container">
<div class="carousel-caption text-left"> <div class="carousel-caption text-xs-left">
<h1>Example headline.</h1> <h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
@@ -71,7 +71,7 @@
<div class="carousel-item"> <div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container"> <div class="container">
<div class="carousel-caption text-right"> <div class="carousel-caption text-xs-right">
<h1>One more for good measure.</h1> <h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
@@ -164,7 +164,7 @@
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<p class="pull-right"><a href="#">Back to top</a></p> <p class="pull-xs-right"><a href="#">Back to top</a></p>
<p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p> <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer> </footer>
@@ -174,7 +174,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! --> <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
+1 -1
View File
@@ -14,7 +14,7 @@ a:hover {
.btn-secondary:hover, .btn-secondary:hover,
.btn-secondary:focus { .btn-secondary:focus {
color: #333; color: #333;
text-shadow: none; /* Prevent inheritence from `body` */ text-shadow: none; /* Prevent inheritance from `body` */
background-color: #fff; background-color: #fff;
border: .05rem solid #fff; border: .05rem solid #fff;
} }
+2 -2
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@@ -60,7 +60,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+5 -5
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@@ -29,13 +29,13 @@
</button> </button>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div id="navbar"> <div id="navbar">
<nav class="nav navbar-nav pull-left"> <nav class="nav navbar-nav pull-xs-left">
<a class="nav-item nav-link" href="#">Dashboard</a> <a class="nav-item nav-link" href="#">Dashboard</a>
<a class="nav-item nav-link" href="#">Settings</a> <a class="nav-item nav-link" href="#">Settings</a>
<a class="nav-item nav-link" href="#">Profile</a> <a class="nav-item nav-link" href="#">Profile</a>
<a class="nav-item nav-link" href="#">Help</a> <a class="nav-item nav-link" href="#">Help</a>
</nav> </nav>
<form class="navbar-form pull-right"> <form class="pull-xs-right">
<input type="text" class="form-control" placeholder="Search..."> <input type="text" class="form-control" placeholder="Search...">
</form> </form>
</div> </div>
@@ -89,7 +89,7 @@
</div> </div>
</div> </div>
<h2 class="sub-header">Section title</h2> <h2>Section title</h2>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
@@ -224,7 +224,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! --> <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
+1 -1
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
+2 -2
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@@ -75,7 +75,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+2 -2
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@@ -49,7 +49,7 @@
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<h2>Safari bug warning!</h2> <h2>Safari bug warning!</h2>
<p class="text-danger">As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p> <p class="text-danger">As of v9.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p> <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div> </div>
@@ -37,6 +37,9 @@ body {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5),to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%);
background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%); background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-repeat: repeat-x; /* Repeat the gradient */ background-repeat: repeat-x; /* Repeat the gradient */

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