Merge branch 'twbs/v4-dev' into dropdown-keyboard
3
.eslintignore
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
**/*.min.js
|
||||
**/vendor/*
|
||||
**/dist/*
|
||||
4
.gitignore
vendored
|
|
@ -38,10 +38,6 @@ Thumbs.db
|
|||
.komodotools
|
||||
*.komodoproject
|
||||
|
||||
# grunt-html-validation
|
||||
validation-report.json
|
||||
validation-status.json
|
||||
|
||||
# SCSS-Lint
|
||||
scss-lint-report.xml
|
||||
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@ fail_on_violations: true
|
|||
scss:
|
||||
config_file: scss/.scss-lint.yml
|
||||
enabled: true
|
||||
ignore_file: scss/_normalize.scss
|
||||
|
||||
javascript:
|
||||
enabled: false
|
||||
|
||||
eslint:
|
||||
enabled: true
|
||||
config_file: js/.eslintrc
|
||||
config_file: js/.eslintrc.json
|
||||
ignore_file: .houndignore
|
||||
|
||||
jscs:
|
||||
enabled: true
|
||||
|
|
|
|||
4
.houndignore
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
**/*.min.js
|
||||
**/vendor/*
|
||||
**/dist/*
|
||||
js/tests/*
|
||||
34
.travis.yml
|
|
@ -1,43 +1,33 @@
|
|||
sudo: required
|
||||
sudo: false
|
||||
dist: trusty
|
||||
language: node_js
|
||||
git:
|
||||
depth: 10
|
||||
depth: 3
|
||||
node_js:
|
||||
- "4"
|
||||
- "5"
|
||||
- "6"
|
||||
before_install:
|
||||
# Remove ./node_modules/.bin from PATH so node-which doesn't replace Unix which and cause RVM to barf. See https://github.com/travis-ci/travis-ci/issues/5092
|
||||
- export PATH=$(python -c 'from sys import argv;from collections import OrderedDict as od;print(":".join(od((p,None) for p in argv[1].split(":") if p.startswith("/")).keys()))' "$PATH")
|
||||
- rvm install 2.2
|
||||
- rvm use 2.2 --fuzzy
|
||||
- npm install -g npm@3
|
||||
- "export TRAVIS_COMMIT_MSG=\"$(git log --format=%B --no-merges -n 1)\""
|
||||
- if [[ `npm -v` != 3* ]]; then npm install -g npm@3; fi
|
||||
- "export TRAVIS_COMMIT_MSG=\"`git log --format=%B --no-merges -n 1`\""
|
||||
- echo "$TRAVIS_COMMIT_MSG" | grep '\[skip validator\]'; export TWBS_DO_VALIDATOR=$?; true
|
||||
- echo "$TRAVIS_COMMIT_MSG" | grep '\[skip sauce\]'; export TWBS_DO_SAUCE=$?; true
|
||||
- if [ "$TRAVIS_REPO_SLUG" = twbs-savage/bootstrap ]; then export TWBS_DO_VALIDATOR=0; fi
|
||||
install:
|
||||
- bundle install --deployment --jobs=3
|
||||
- bundle install --deployment --jobs=3 --retry=3
|
||||
- cp grunt/npm-shrinkwrap.json ./
|
||||
- npm install -g grunt-cli
|
||||
- npm install
|
||||
after_success:
|
||||
- if [ "$TWBS_TEST" = sauce-js-unit ]; then grunt/upload-preview.sh; fi
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
- vendor/bundle
|
||||
- "$HOME/google-cloud-sdk"
|
||||
env:
|
||||
global:
|
||||
- NPM_CONFIG_PROGRESS="false"
|
||||
- SAUCE_USERNAME="bootstrap"
|
||||
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
|
||||
- secure: "RKWpS+P20b4tG9tawzCMJSmQftoonmC7tJzyGYiHuEM1TcpHALLBcnzKlr/+DiPTfzDJWY4kS8pxfhK4uXOe8OHnhpMNub7LEWtFPePlZIervOJcsOydaQocTKqVVWD6OUubMeQmQ+tZmvmpjoJ1uPPEbFs9ciF7+dv3U5tLUZ0="
|
||||
- secure: "XswSKBY0HJ/aO9VOBeWlvGpqSFF/DsJmNKz7o5RkJMJX340qe44J929uUNwwOwlv9YrgptzC2W6l8bpmZQV+p6IYs99SoSA8CCaUfIJaqeU9x/UiT5vIHgqaNax+vFJwvzHLpF5v/ggFqFEKCd54gCDasePLTztHeC4oL104iaQ="
|
||||
matrix:
|
||||
- TWBS_TEST=core
|
||||
- TWBS_TEST=validate-html
|
||||
- TWBS_TEST=sauce-js-unit
|
||||
- TWBS_TEST=core
|
||||
- TWBS_TEST=validate-html
|
||||
- TWBS_TEST=sauce-js-unit
|
||||
matrix:
|
||||
fast_finish: true
|
||||
exclude:
|
||||
- node_js: "4"
|
||||
env: TWBS_TEST=validate-html
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@ Bootstrap uses [GitHub's Releases feature](https://github.com/blog/1547-release-
|
|||
|
||||
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.
|
||||
Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ restrictions:
|
|||
[`Normalize`](https://github.com/necolas/normalize.css) (open them in
|
||||
its repository).
|
||||
|
||||
* Please **do not** open issues regarding the official themes offered on <http://themes.getbootstrap.com/>.
|
||||
* Please **do not** open issues regarding the official themes offered on <https://themes.getbootstrap.com/>.
|
||||
Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
|
||||
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ Good bug reports are extremely helpful, so thanks!
|
|||
|
||||
Guidelines for bug reports:
|
||||
|
||||
0. **Validate and lint your code** — [validate your HTML](http://html5.validator.nu)
|
||||
0. **Validate and lint your code** — [validate your HTML](https://html5.validator.nu)
|
||||
and [lint your HTML](https://github.com/twbs/bootlint) to ensure your
|
||||
problem isn't caused by a simple error in your own code.
|
||||
|
||||
|
|
@ -73,7 +73,7 @@ Guidelines for bug reports:
|
|||
|
||||
3. **Isolate the problem** — ideally create a [reduced test
|
||||
case](https://css-tricks.com/reduced-test-cases/) and a live example.
|
||||
[This JS Bin](http://jsbin.com/qusafa/edit?html,output) is a helpful template.
|
||||
[This JS Bin](https://jsbin.com/lolome/edit?html,output) is a helpful template.
|
||||
|
||||
|
||||
A good bug report shouldn't leave others needing to chase you up for more
|
||||
|
|
@ -104,7 +104,7 @@ Example:
|
|||
### Reporting upstream browser bugs
|
||||
|
||||
Sometimes bugs reported to us are actually caused by bugs in the browser(s) themselves, not bugs in Bootstrap per se.
|
||||
When feasible, we aim to report such upstream bugs to the relevant browser vendor(s), and then list them on our [Wall of Browser Bugs](http://getbootstrap.com/browser-bugs/) and [document them in MDN](https://developer.mozilla.org/en-US/docs/Web).
|
||||
When feasible, we aim to report such upstream bugs to the relevant browser vendor(s), and then list them on our [Wall of Browser Bugs](https://getbootstrap.com/browser-bugs/) and [document them in MDN](https://developer.mozilla.org/en-US/docs/Web).
|
||||
|
||||
| Vendor(s) | Browser(s) | Rendering engine | Bug reporting website(s) | Notes |
|
||||
| ------------- | ---------------------------- | ---------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------- |
|
||||
|
|
@ -232,7 +232,7 @@ includes code changes) and under the terms of the
|
|||
|
||||
[Adhere to the Code Guide.](http://codeguide.co/#css)
|
||||
|
||||
- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
|
||||
- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG20/#visual-audio-contrast).
|
||||
- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines/) for more details.
|
||||
|
||||
### JS
|
||||
|
|
@ -241,7 +241,7 @@ includes code changes) and under the terms of the
|
|||
- 2 spaces (no tabs)
|
||||
- strict mode
|
||||
- "Attractive"
|
||||
- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
|
||||
- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](https://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](https://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
|
||||
|
||||
### Checking coding style
|
||||
|
||||
|
|
|
|||
8
Gemfile
|
|
@ -1,8 +1,8 @@
|
|||
source 'https://rubygems.org'
|
||||
|
||||
group :development, :test do
|
||||
gem 'jekyll', '~> 3.1.2'
|
||||
gem 'jekyll-redirect-from', '~> 0.10.0'
|
||||
gem 'jekyll-sitemap', '~> 0.10.0'
|
||||
gem 'scss_lint', '~> 0.47.1'
|
||||
gem 'jekyll', '~> 3.3.0'
|
||||
gem 'jekyll-redirect-from', '~> 0.11.0'
|
||||
gem 'jekyll-sitemap', '~> 0.11.0'
|
||||
gem 'scss_lint', '~> 0.50.2'
|
||||
end
|
||||
|
|
|
|||
57
Gemfile.lock
|
|
@ -1,51 +1,56 @@
|
|||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
colorator (0.1)
|
||||
ffi (1.9.10)
|
||||
ffi (1.9.10-x64-mingw32)
|
||||
jekyll (3.1.2)
|
||||
colorator (~> 0.1)
|
||||
addressable (2.4.0)
|
||||
colorator (1.1.0)
|
||||
ffi (1.9.14)
|
||||
forwardable-extended (2.6.0)
|
||||
jekyll (3.3.0)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.1)
|
||||
kramdown (~> 1.3)
|
||||
liquid (~> 3.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (~> 1.7)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-redirect-from (0.10.0)
|
||||
jekyll-redirect-from (0.11.0)
|
||||
jekyll (>= 2.0)
|
||||
jekyll-sass-converter (1.4.0)
|
||||
sass (~> 3.4)
|
||||
jekyll-sitemap (0.10.0)
|
||||
jekyll-watch (1.3.1)
|
||||
listen (~> 3.0)
|
||||
kramdown (1.10.0)
|
||||
jekyll-sitemap (0.11.0)
|
||||
addressable (~> 2.4.0)
|
||||
jekyll-watch (1.5.0)
|
||||
listen (~> 3.0, < 3.1)
|
||||
kramdown (1.12.0)
|
||||
liquid (3.0.6)
|
||||
listen (3.0.6)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9.7)
|
||||
mercenary (0.3.5)
|
||||
rake (10.5.0)
|
||||
listen (3.0.8)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
mercenary (0.3.6)
|
||||
pathutil (0.14.0)
|
||||
forwardable-extended (~> 2.6)
|
||||
rake (11.3.0)
|
||||
rb-fsevent (0.9.7)
|
||||
rb-inotify (0.9.7)
|
||||
ffi (>= 0.5.0)
|
||||
rouge (1.10.1)
|
||||
rouge (1.11.1)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.4.21)
|
||||
scss_lint (0.47.1)
|
||||
rake (>= 0.9, < 11)
|
||||
sass (~> 3.4.15)
|
||||
sass (3.4.22)
|
||||
scss_lint (0.50.2)
|
||||
rake (>= 0.9, < 12)
|
||||
sass (~> 3.4.20)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
x64-mingw32
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 3.1.2)
|
||||
jekyll-redirect-from (~> 0.10.0)
|
||||
jekyll-sitemap (~> 0.10.0)
|
||||
scss_lint (~> 0.47.1)
|
||||
jekyll (~> 3.3.0)
|
||||
jekyll-redirect-from (~> 0.11.0)
|
||||
jekyll-sitemap (~> 0.11.0)
|
||||
scss_lint (~> 0.50.2)
|
||||
|
||||
BUNDLED WITH
|
||||
1.11.2
|
||||
1.13.2
|
||||
|
|
|
|||
245
Gruntfile.js
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Bootstrap's Gruntfile
|
||||
* http://getbootstrap.com
|
||||
* https://getbootstrap.com
|
||||
* Copyright 2013-2016 The Bootstrap Authors
|
||||
* Copyright 2013-2016 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
|
|
@ -19,16 +19,12 @@ module.exports = function (grunt) {
|
|||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var isTravis = require('is-travis');
|
||||
var mq4HoverShim = require('mq4-hover-shim');
|
||||
var autoprefixerSettings = require('./grunt/autoprefixer-settings.js');
|
||||
var autoprefixer = require('autoprefixer')(autoprefixerSettings);
|
||||
|
||||
var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js');
|
||||
var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
|
||||
|
||||
Object.keys(configBridge.paths).forEach(function (key) {
|
||||
configBridge.paths[key].forEach(function (val, i, arr) {
|
||||
arr[i] = path.join('./docs/assets', val);
|
||||
arr[i] = path.join('./docs', val);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -43,12 +39,12 @@ module.exports = function (grunt) {
|
|||
' * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n' +
|
||||
' */\n',
|
||||
jqueryCheck: 'if (typeof jQuery === \'undefined\') {\n' +
|
||||
' throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery\')\n' +
|
||||
' throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\\\'s JavaScript.\')\n' +
|
||||
'}\n',
|
||||
jqueryVersionCheck: '+function ($) {\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) || (version[0] >= 3)) {\n' +
|
||||
' throw new Error(\'Bootstrap\\\'s JavaScript requires at least jQuery v1.9.1 but less than v3.0.0\')\n' +
|
||||
' if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] >= 4)) {\n' +
|
||||
' throw new Error(\'Bootstrap\\\'s JavaScript requires at least jQuery v1.9.1 but less than v4.0.0\')\n' +
|
||||
' }\n' +
|
||||
'}(jQuery);\n\n',
|
||||
|
||||
|
|
@ -62,8 +58,7 @@ module.exports = function (grunt) {
|
|||
babel: {
|
||||
dev: {
|
||||
options: {
|
||||
sourceMap: true,
|
||||
modules: 'ignore'
|
||||
sourceMap: true
|
||||
},
|
||||
files: {
|
||||
'js/dist/util.js' : 'js/src/util.js',
|
||||
|
|
@ -81,64 +76,18 @@ module.exports = function (grunt) {
|
|||
},
|
||||
dist: {
|
||||
options: {
|
||||
modules: 'ignore'
|
||||
extends: '../../js/.babelrc'
|
||||
},
|
||||
files: {
|
||||
'<%= concat.bootstrap.dest %>' : '<%= concat.bootstrap.dest %>'
|
||||
}
|
||||
},
|
||||
umd: {
|
||||
options: {
|
||||
modules: 'umd'
|
||||
},
|
||||
files: {
|
||||
'dist/js/umd/util.js' : 'js/src/util.js',
|
||||
'dist/js/umd/alert.js' : 'js/src/alert.js',
|
||||
'dist/js/umd/button.js' : 'js/src/button.js',
|
||||
'dist/js/umd/carousel.js' : 'js/src/carousel.js',
|
||||
'dist/js/umd/collapse.js' : 'js/src/collapse.js',
|
||||
'dist/js/umd/dropdown.js' : 'js/src/dropdown.js',
|
||||
'dist/js/umd/modal.js' : 'js/src/modal.js',
|
||||
'dist/js/umd/scrollspy.js' : 'js/src/scrollspy.js',
|
||||
'dist/js/umd/tab.js' : 'js/src/tab.js',
|
||||
'dist/js/umd/tooltip.js' : 'js/src/tooltip.js',
|
||||
'dist/js/umd/popover.js' : 'js/src/popover.js'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
eslint: {
|
||||
options: {
|
||||
configFile: 'js/.eslintrc'
|
||||
},
|
||||
target: 'js/src/*.js'
|
||||
},
|
||||
|
||||
jscs: {
|
||||
options: {
|
||||
config: 'js/.jscsrc'
|
||||
},
|
||||
grunt: {
|
||||
src: ['Gruntfile.js', 'grunt/*.js']
|
||||
},
|
||||
core: {
|
||||
src: 'js/src/*.js'
|
||||
},
|
||||
test: {
|
||||
src: 'js/tests/unit/*.js'
|
||||
},
|
||||
assets: {
|
||||
options: {
|
||||
requireCamelCaseOrUpperCaseIdentifiers: null
|
||||
},
|
||||
src: ['docs/assets/js/src/*.js', 'docs/assets/js/*.js', '!docs/assets/js/*.min.js']
|
||||
}
|
||||
},
|
||||
|
||||
stamp: {
|
||||
options: {
|
||||
banner: '<%= banner %>\n<%= jqueryCheck %>\n<%= jqueryVersionCheck %>\n+function ($) {\n',
|
||||
footer: '\n}(jQuery);'
|
||||
banner: '<%= banner %>\n<%= jqueryCheck %>\n<%= jqueryVersionCheck %>\n+function () {\n',
|
||||
footer: '\n}();'
|
||||
},
|
||||
bootstrap: {
|
||||
files: {
|
||||
|
|
@ -152,8 +101,7 @@ module.exports = function (grunt) {
|
|||
// Custom function to remove all export and import statements
|
||||
process: function (src) {
|
||||
return src.replace(/^(export|import).*/gm, '');
|
||||
},
|
||||
stripBanners: false
|
||||
}
|
||||
},
|
||||
bootstrap: {
|
||||
src: [
|
||||
|
|
@ -173,24 +121,6 @@ module.exports = function (grunt) {
|
|||
}
|
||||
},
|
||||
|
||||
uglify: {
|
||||
options: {
|
||||
compress: {
|
||||
warnings: false
|
||||
},
|
||||
mangle: true,
|
||||
preserveComments: /^!|@preserve|@license|@cc_on/i
|
||||
},
|
||||
core: {
|
||||
src: '<%= concat.bootstrap.dest %>',
|
||||
dest: 'dist/js/<%= pkg.name %>.min.js'
|
||||
},
|
||||
docsJs: {
|
||||
src: configBridge.paths.docsJs,
|
||||
dest: 'docs/assets/js/docs.min.js'
|
||||
}
|
||||
},
|
||||
|
||||
qunit: {
|
||||
options: {
|
||||
inject: 'js/tests/unit/phantom.js'
|
||||
|
|
@ -199,78 +129,6 @@ module.exports = function (grunt) {
|
|||
},
|
||||
|
||||
// CSS build configuration
|
||||
scsslint: {
|
||||
options: {
|
||||
bundleExec: true,
|
||||
config: 'scss/.scss-lint.yml',
|
||||
reporterOutput: null
|
||||
},
|
||||
core: {
|
||||
src: ['scss/*.scss', '!scss/_normalize.scss']
|
||||
},
|
||||
docs: {
|
||||
src: ['docs/assets/scss/*.scss', '!docs/assets/scss/docs.scss']
|
||||
}
|
||||
},
|
||||
|
||||
postcss: {
|
||||
core: {
|
||||
options: {
|
||||
map: true,
|
||||
processors: [
|
||||
mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.bs-true-hover ' }),
|
||||
autoprefixer
|
||||
]
|
||||
},
|
||||
src: 'dist/css/*.css'
|
||||
},
|
||||
docs: {
|
||||
options: {
|
||||
processors: [
|
||||
autoprefixer
|
||||
]
|
||||
},
|
||||
src: 'docs/assets/css/docs.min.css'
|
||||
},
|
||||
examples: {
|
||||
options: {
|
||||
processors: [
|
||||
autoprefixer
|
||||
]
|
||||
},
|
||||
expand: true,
|
||||
cwd: 'docs/examples/',
|
||||
src: ['**/*.css'],
|
||||
dest: 'docs/examples/'
|
||||
}
|
||||
},
|
||||
|
||||
cssmin: {
|
||||
options: {
|
||||
// TODO: disable `zeroUnits` optimization once clean-css 3.2 is released
|
||||
// and then simplify the fix for https://github.com/twbs/bootstrap/issues/14837 accordingly
|
||||
compatibility: 'ie9',
|
||||
keepSpecialComments: '*',
|
||||
sourceMap: true,
|
||||
advanced: false
|
||||
},
|
||||
core: {
|
||||
files: [
|
||||
{
|
||||
expand: true,
|
||||
cwd: 'dist/css',
|
||||
src: ['*.css', '!*.min.css'],
|
||||
dest: 'dist/css',
|
||||
ext: '.min.css'
|
||||
}
|
||||
]
|
||||
},
|
||||
docs: {
|
||||
src: 'docs/assets/css/docs.min.css',
|
||||
dest: 'docs/assets/css/docs.min.css'
|
||||
}
|
||||
},
|
||||
|
||||
copy: {
|
||||
docs: {
|
||||
expand: true,
|
||||
|
|
@ -308,14 +166,14 @@ module.exports = function (grunt) {
|
|||
htmllint: {
|
||||
options: {
|
||||
ignore: [
|
||||
'Element “img” is missing required attribute “src”.',
|
||||
'Attribute “autocomplete” is only allowed when the input type is “color”, “date”, “datetime”, “datetime-local”, “email”, “month”, “number”, “password”, “range”, “search”, “tel”, “text”, “time”, “url”, or “week”.',
|
||||
'Attribute “autocomplete” is only allowed when the input type is “color”, “date”, “datetime”, “datetime-local”, “email”, “hidden”, “month”, “number”, “password”, “range”, “search”, “tel”, “text”, “time”, “url”, or “week”.',
|
||||
'Attribute “autocomplete” not allowed on element “button” at this point.',
|
||||
'Element “div” not allowed as child of element “progress” in this context. (Suppressing further errors from this subtree.)',
|
||||
'Consider using the “h1” element as a top-level heading only (all “h1” elements are treated as top-level headings by many screen readers and other tools).',
|
||||
'The “datetime” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'Element “div” not allowed as child of element “progress” in this context. (Suppressing further errors from this subtree.)',
|
||||
'Element “img” is missing required attribute “src”.',
|
||||
'The “color” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “date” 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.',
|
||||
'The “datetime-local” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “month” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “time” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
|
|
@ -327,7 +185,7 @@ module.exports = function (grunt) {
|
|||
|
||||
watch: {
|
||||
src: {
|
||||
files: '<%= jscs.core.src %>',
|
||||
files: '<%= concat.bootstrap.src %>',
|
||||
tasks: ['babel:dev']
|
||||
},
|
||||
sass: {
|
||||
|
|
@ -354,8 +212,32 @@ module.exports = function (grunt) {
|
|||
},
|
||||
|
||||
exec: {
|
||||
npmUpdate: {
|
||||
command: 'npm update'
|
||||
'clean-css': {
|
||||
command: 'npm run clean-css'
|
||||
},
|
||||
'clean-css-docs': {
|
||||
command: 'npm run clean-css-docs'
|
||||
},
|
||||
postcss: {
|
||||
command: 'npm run postcss'
|
||||
},
|
||||
'postcss-docs': {
|
||||
command: 'npm run postcss-docs'
|
||||
},
|
||||
htmlhint: {
|
||||
command: 'npm run htmlhint'
|
||||
},
|
||||
'scss-lint': {
|
||||
command: 'npm run scss-lint'
|
||||
},
|
||||
'scss-lint-docs': {
|
||||
command: 'npm run scss-lint-docs'
|
||||
},
|
||||
uglify: {
|
||||
command: 'npm run uglify'
|
||||
},
|
||||
'uglify-docs': {
|
||||
command: 'npm run uglify-docs'
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -403,7 +285,7 @@ module.exports = function (grunt) {
|
|||
require('time-grunt')(grunt);
|
||||
|
||||
// Docs HTML validation task
|
||||
grunt.registerTask('validate-html', ['jekyll:docs', 'htmllint']);
|
||||
grunt.registerTask('validate-html', ['jekyll:docs', 'htmllint', 'exec:htmlhint']);
|
||||
|
||||
var runSubset = function (subset) {
|
||||
return !process.env.TWBS_TEST || process.env.TWBS_TEST === subset;
|
||||
|
|
@ -418,7 +300,7 @@ module.exports = function (grunt) {
|
|||
if (runSubset('core') &&
|
||||
// Skip core tests if this is a Savage build
|
||||
process.env.TRAVIS_REPO_SLUG !== 'twbs-savage/bootstrap') {
|
||||
testSubtasks = testSubtasks.concat(['dist-css', 'dist-js', 'test-scss', 'test-js', 'docs']);
|
||||
testSubtasks = testSubtasks.concat(['dist-css', 'dist-js', 'test-scss', 'qunit', 'docs']);
|
||||
}
|
||||
// Skip HTML validation if running a different subset of the test suite
|
||||
if (runSubset('validate-html') &&
|
||||
|
|
@ -430,20 +312,20 @@ module.exports = function (grunt) {
|
|||
// Only run Sauce Labs tests if there's a Sauce access key
|
||||
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined' &&
|
||||
// Skip Sauce if running a different subset of the test suite
|
||||
runSubset('sauce-js-unit') &&
|
||||
// Skip Sauce on Travis when [skip sauce] is in the commit message
|
||||
isUndefOrNonZero(process.env.TWBS_DO_SAUCE)) {
|
||||
testSubtasks.push('babel:dev');
|
||||
testSubtasks.push('connect');
|
||||
testSubtasks.push('saucelabs-qunit');
|
||||
runSubset('sauce-js-unit')) {
|
||||
testSubtasks = testSubtasks.concat(['dist', 'docs-css', 'docs-js', 'clean:docs', 'copy:docs']);
|
||||
// Skip Sauce on Travis when [skip sauce] is in the commit message
|
||||
if (isUndefOrNonZero(process.env.TWBS_DO_SAUCE)) {
|
||||
testSubtasks.push('connect');
|
||||
testSubtasks.push('saucelabs-qunit');
|
||||
}
|
||||
}
|
||||
grunt.registerTask('test', testSubtasks);
|
||||
grunt.registerTask('test-js', ['eslint', 'jscs:core', 'jscs:test', 'jscs:grunt', 'qunit']);
|
||||
|
||||
// JS distribution task.
|
||||
grunt.registerTask('dist-js', ['babel:dev', 'concat', 'babel:dist', 'stamp', 'uglify:core', 'commonjs']);
|
||||
grunt.registerTask('dist-js', ['babel:dev', 'concat', 'babel:dist', 'stamp', 'exec:uglify']);
|
||||
|
||||
grunt.registerTask('test-scss', ['scsslint:core']);
|
||||
grunt.registerTask('test-scss', ['exec:scss-lint']);
|
||||
|
||||
// CSS distribution task.
|
||||
// Supported Compilers: sass (Ruby) and libsass.
|
||||
|
|
@ -451,9 +333,9 @@ module.exports = function (grunt) {
|
|||
require('./grunt/bs-sass-compile/' + sassCompilerName + '.js')(grunt);
|
||||
})(process.env.TWBS_SASS || 'libsass');
|
||||
// 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:extras', 'sass:docs']);
|
||||
|
||||
grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'cssmin:core', 'cssmin:docs']);
|
||||
grunt.registerTask('dist-css', ['sass-compile', 'exec:postcss', 'exec:clean-css', 'exec:clean-css-docs']);
|
||||
|
||||
// Full distribution task.
|
||||
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']);
|
||||
|
|
@ -461,22 +343,11 @@ module.exports = function (grunt) {
|
|||
// Default task.
|
||||
grunt.registerTask('default', ['clean:dist', 'test']);
|
||||
|
||||
grunt.registerTask('commonjs', ['babel:umd', 'npm-js']);
|
||||
|
||||
grunt.registerTask('npm-js', 'Generate npm-js entrypoint module in dist dir.', function () {
|
||||
var srcFiles = Object.keys(grunt.config.get('babel.umd.files')).map(function (filename) {
|
||||
return './' + path.join('umd', path.basename(filename))
|
||||
})
|
||||
var destFilepath = 'dist/js/npm.js';
|
||||
generateCommonJSModule(grunt, srcFiles, destFilepath);
|
||||
});
|
||||
|
||||
// Docs task.
|
||||
grunt.registerTask('docs-css', ['postcss:docs', 'postcss:examples', 'cssmin:docs']);
|
||||
grunt.registerTask('lint-docs-css', ['scsslint:docs']);
|
||||
grunt.registerTask('docs-js', ['uglify:docsJs']);
|
||||
grunt.registerTask('lint-docs-js', ['jscs:assets']);
|
||||
grunt.registerTask('docs', ['lint-docs-css', 'docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
|
||||
grunt.registerTask('docs-css', ['exec:clean-css-docs', 'exec:postcss-docs']);
|
||||
grunt.registerTask('lint-docs-css', ['exec:scss-lint-docs']);
|
||||
grunt.registerTask('docs-js', ['exec:uglify-docs']);
|
||||
grunt.registerTask('docs', ['lint-docs-css', 'docs-css', 'docs-js', 'clean:docs', 'copy:docs']);
|
||||
grunt.registerTask('docs-github', ['jekyll:github']);
|
||||
|
||||
grunt.registerTask('prep-release', ['dist', 'docs', 'docs-github', 'compress']);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
Before opening an issue:
|
||||
|
||||
- [Search for duplicate or closed issues](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue)
|
||||
- [Validate](http://validator.w3.org/nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems
|
||||
- [Validate](https://validator.w3.org/nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems
|
||||
- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs
|
||||
- Read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md)
|
||||
|
||||
When asking general "how to" questons:
|
||||
When asking general "how to" questions:
|
||||
|
||||
- Please do not open an issue here
|
||||
- Instead, ask for help on [StackOverflow, IRC, or Slack](https://github.com/twbs/bootstrap/blob/master/README.md#community)
|
||||
|
|
|
|||
33
README.md
|
|
@ -1,19 +1,20 @@
|
|||
# [Bootstrap](http://getbootstrap.com)
|
||||
# [Bootstrap](https://getbootstrap.com)
|
||||
|
||||
[](https://bootstrap-slack.herokuapp.com)
|
||||

|
||||
[](https://www.npmjs.com/package/bootstrap)
|
||||
[](https://rubygems.org/gems/bootstrap)
|
||||
[](https://travis-ci.org/twbs/bootstrap)
|
||||
[](https://david-dm.org/twbs/bootstrap#info=devDependencies)
|
||||
[](https://david-dm.org/twbs/bootstrap?type=dev)
|
||||
[](https://atmospherejs.com/twbs/bootstrap)
|
||||
[](https://packagist.org/packages/twbs/bootstrap)
|
||||
[](https://www.nuget.org/packages/bootstrap/4.0.0-alpha2)
|
||||
[](https://www.nuget.org/packages/bootstrap/4.0.0-alpha5)
|
||||
|
||||
[](https://saucelabs.com/u/bootstrap)
|
||||
|
||||
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/orgs/twbs/people) with the massive support and involvement of the community.
|
||||
|
||||
To get started, check out <http://getbootstrap.com>!
|
||||
To get started, check out <https://getbootstrap.com>!
|
||||
|
||||
## Table of contents
|
||||
|
||||
|
|
@ -30,15 +31,15 @@ To get started, check out <http://getbootstrap.com>!
|
|||
|
||||
Several quick start options are available:
|
||||
|
||||
- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.2.zip)
|
||||
- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.5.zip)
|
||||
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
|
||||
- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-alpha.2`
|
||||
- Install with [Meteor](https://www.meteor.com): `meteor add twbs:bootstrap@=4.0.0-alpha.2`
|
||||
- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap`
|
||||
- Install with [Bower](http://bower.io): `bower install bootstrap#v4.0.0-alpha.2`
|
||||
- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-alpha.5`
|
||||
- Install with [yarn](https://github.com/yarnpkg/yarn): `yarn add bootstrap@4.0.0-alpha.5`
|
||||
- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap:4.0.0-alpha.5`
|
||||
- Install with [Bower](https://bower.io): `bower install bootstrap#v4.0.0-alpha.5`
|
||||
- Install with [NuGet](https://www.nuget.org): CSS: `Install-Package bootstrap -Pre` Sass: `Install-Package bootstrap.sass -Pre` (`-Pre` is only required until Bootstrap v4 has a stable release).
|
||||
|
||||
Read the [Getting started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
|
||||
Read the [Getting started page](https://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
|
||||
|
||||
### What's included
|
||||
|
||||
|
|
@ -66,7 +67,7 @@ Have a bug or a feature request? Please first read the [issue guidelines](https:
|
|||
|
||||
## Documentation
|
||||
|
||||
Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://getbootstrap.com>. The docs may also be run locally.
|
||||
Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](https://jekyllrb.com) and publicly hosted on GitHub Pages at <https://getbootstrap.com>. The docs may also be run locally.
|
||||
|
||||
### Running documentation locally
|
||||
|
||||
|
|
@ -75,11 +76,11 @@ Bootstrap's documentation, included in this repo in the root directory, is built
|
|||
3. From the root `/bootstrap` directory, run `bundle exec 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](https://jekyllrb.com/docs/home/).
|
||||
|
||||
### Documentation for previous releases
|
||||
|
||||
Documentation for v2.3.2 has been made available for the time being at <http://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.
|
||||
Documentation for v2.3.2 has been made available for the time being at <https://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.
|
||||
|
||||
[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
|
||||
|
||||
|
|
@ -100,7 +101,7 @@ Editor preferences are available in the [editor config](https://github.com/twbs/
|
|||
Get updates on Bootstrap's development and chat with the project maintainers and community members.
|
||||
|
||||
- Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
|
||||
- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
|
||||
- Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.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.
|
||||
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4)).
|
||||
|
|
@ -112,7 +113,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.
|
||||
|
||||
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.
|
||||
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](https://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
|
||||
|
||||
|
||||
## Creators
|
||||
|
|
@ -131,4 +132,4 @@ See [the Releases section of our GitHub project](https://github.com/twbs/bootstr
|
|||
|
||||
## Copyright and license
|
||||
|
||||
Code and documentation copyright 2011-2016 the Bootstrap Authors and Twitter, Inc. Code released under [the MIT license](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/master/docs/LICENSE).
|
||||
Code and documentation copyright 2011-2016 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/master/docs/LICENSE).
|
||||
|
|
|
|||
38
_config.yml
|
|
@ -14,7 +14,7 @@ destination: _gh_pages
|
|||
host: 0.0.0.0
|
||||
port: 9001
|
||||
baseurl: ""
|
||||
url: http://getbootstrap.com
|
||||
url: https://v4-alpha.getbootstrap.com
|
||||
encoding: UTF-8
|
||||
exclude: [assets/scss/]
|
||||
|
||||
|
|
@ -22,26 +22,34 @@ gems:
|
|||
- jekyll-redirect-from
|
||||
- jekyll-sitemap
|
||||
|
||||
# Social
|
||||
title: Bootstrap
|
||||
description: The most popular HTML, CSS, and JS framework in the world.
|
||||
twitter: getbootstrap
|
||||
authors: Mark Otto, Jacob Thornton, and Bootstrap contributors
|
||||
social_logo_path: /assets/brand/bootstrap-social-logo.png
|
||||
social_image_path: /assets/brand/bootstrap-social.png
|
||||
|
||||
# Custom vars
|
||||
current_version: 4.0.0-alpha.2
|
||||
current_version: 4.0.0-alpha.5
|
||||
repo: https://github.com/twbs/bootstrap
|
||||
slack: https://bootstrap-slack.herokuapp.com
|
||||
|
||||
download:
|
||||
source: https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.2.zip
|
||||
dist: https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip
|
||||
source: https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.5.zip
|
||||
dist: https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.5/bootstrap-4.0.0-alpha.5-dist.zip
|
||||
|
||||
blog: http://blog.getbootstrap.com
|
||||
expo: http://expo.getbootstrap.com
|
||||
themes: http://themes.getbootstrap.com
|
||||
blog: https://blog.getbootstrap.com
|
||||
expo: https://expo.getbootstrap.com
|
||||
themes: https://themes.getbootstrap.com
|
||||
|
||||
cdn:
|
||||
# See https://www.srihash.org for info on how to generate the hashes
|
||||
css: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css
|
||||
css_hash: "sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd"
|
||||
js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js
|
||||
js_hash: "sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7"
|
||||
jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js
|
||||
jquery_hash: "sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+"
|
||||
tether: https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js
|
||||
tether_hash: "sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB"
|
||||
css: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css
|
||||
css_hash: "sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
|
||||
js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js
|
||||
js_hash: "sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
|
||||
jquery: https://code.jquery.com/jquery-3.1.1.min.js
|
||||
jquery_hash: "sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7"
|
||||
tether: https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js
|
||||
tether_hash: "sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8"
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
"framework",
|
||||
"web"
|
||||
],
|
||||
"homepage": "http://getbootstrap.com",
|
||||
"homepage": "https://getbootstrap.com",
|
||||
"license": "MIT",
|
||||
"moduleType": "globals",
|
||||
"main": [
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
"test-infra"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "1.9.1 - 2",
|
||||
"tether": "^1.1.1"
|
||||
"jquery": "1.9.1 - 3",
|
||||
"tether": "^1.3.7"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
"framework",
|
||||
"web"
|
||||
],
|
||||
"homepage": "http://getbootstrap.com",
|
||||
"homepage": "https://getbootstrap.com",
|
||||
"authors": [
|
||||
{
|
||||
"name": "Mark Otto",
|
||||
|
|
|
|||
1337
dist/css/bootstrap-grid.css
vendored
Normal file
BIN
dist/css/bootstrap-grid.css.map
vendored
Normal file
1
dist/css/bootstrap-grid.min.css
vendored
Normal file
BIN
dist/css/bootstrap-grid.min.css.map
vendored
Normal file
465
dist/css/bootstrap-reboot.css
vendored
Normal file
|
|
@ -0,0 +1,465 @@
|
|||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
hr {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
legend {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
details,
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
-webkit-box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
-ms-overflow-style: scrollbar;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
color: #292b2c;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0275d8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus, a:hover {
|
||||
color: #014c8c;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #636c72;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
input[type="radio"]:disabled,
|
||||
input[type="checkbox"]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
BIN
dist/css/bootstrap-reboot.css.map
vendored
Normal file
1
dist/css/bootstrap-reboot.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}@-ms-viewport{width:device-width}html{font-size:16px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#292b2c;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{cursor:help}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}a{color:#0275d8;text-decoration:none}a:focus,a:hover{color:#014c8c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle}[role=button]{cursor:pointer}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse;background-color:transparent}caption{padding-top:.75rem;padding-bottom:.75rem;color:#636c72;text-align:left;caption-side:bottom}th{text-align:left}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,select,textarea{line-height:inherit}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit}input[type=search]{-webkit-appearance:none}output{display:inline-block}[hidden]{display:none!important}/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||
BIN
dist/css/bootstrap-reboot.min.css.map
vendored
Normal file
BIN
dist/css/bootstrap.css.map
vendored
6
dist/css/bootstrap.min.css
vendored
BIN
dist/css/bootstrap.min.css.map
vendored
4064
dist/js/bootstrap.js
8
dist/js/bootstrap.min.js
vendored
12
dist/js/npm.js
vendored
|
|
@ -1,12 +0,0 @@
|
|||
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
|
||||
require('./umd/util.js')
|
||||
require('./umd/alert.js')
|
||||
require('./umd/button.js')
|
||||
require('./umd/carousel.js')
|
||||
require('./umd/collapse.js')
|
||||
require('./umd/dropdown.js')
|
||||
require('./umd/modal.js')
|
||||
require('./umd/scrollspy.js')
|
||||
require('./umd/tab.js')
|
||||
require('./umd/tooltip.js')
|
||||
require('./umd/popover.js')
|
||||
211
dist/js/umd/alert.js
vendored
|
|
@ -1,211 +0,0 @@
|
|||
(function (global, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['exports', 'module', './util'], factory);
|
||||
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
|
||||
factory(exports, module, require('./util'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod.exports, mod, global.Util);
|
||||
global.alert = mod.exports;
|
||||
}
|
||||
})(this, function (exports, module, _util) {
|
||||
'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; }; })();
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
var _Util = _interopRequireDefault(_util);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.2): alert.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Alert = (function ($) {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'alert';
|
||||
var VERSION = '4.0.0-alpha.2';
|
||||
var DATA_KEY = 'bs.alert';
|
||||
var EVENT_KEY = '.' + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var TRANSITION_DURATION = 150;
|
||||
|
||||
var Selector = {
|
||||
DISMISS: '[data-dismiss="alert"]'
|
||||
};
|
||||
|
||||
var Event = {
|
||||
CLOSE: 'close' + EVENT_KEY,
|
||||
CLOSED: 'closed' + EVENT_KEY,
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY
|
||||
};
|
||||
|
||||
var ClassName = {
|
||||
ALERT: 'alert',
|
||||
FADE: 'fade',
|
||||
IN: 'in'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Alert = (function () {
|
||||
function Alert(element) {
|
||||
_classCallCheck(this, Alert);
|
||||
|
||||
this._element = element;
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// getters
|
||||
|
||||
_createClass(Alert, [{
|
||||
key: 'close',
|
||||
|
||||
// public
|
||||
|
||||
value: function close(element) {
|
||||
element = element || this._element;
|
||||
|
||||
var rootElement = this._getRootElement(element);
|
||||
var customEvent = this._triggerCloseEvent(rootElement);
|
||||
|
||||
if (customEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._removeElement(rootElement);
|
||||
}
|
||||
}, {
|
||||
key: 'dispose',
|
||||
value: function dispose() {
|
||||
$.removeData(this._element, DATA_KEY);
|
||||
this._element = null;
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
}, {
|
||||
key: '_getRootElement',
|
||||
value: function _getRootElement(element) {
|
||||
var selector = _Util['default'].getSelectorFromElement(element);
|
||||
var parent = false;
|
||||
|
||||
if (selector) {
|
||||
parent = $(selector)[0];
|
||||
}
|
||||
|
||||
if (!parent) {
|
||||
parent = $(element).closest('.' + ClassName.ALERT)[0];
|
||||
}
|
||||
|
||||
return parent;
|
||||
}
|
||||
}, {
|
||||
key: '_triggerCloseEvent',
|
||||
value: function _triggerCloseEvent(element) {
|
||||
var closeEvent = $.Event(Event.CLOSE);
|
||||
|
||||
$(element).trigger(closeEvent);
|
||||
return closeEvent;
|
||||
}
|
||||
}, {
|
||||
key: '_removeElement',
|
||||
value: function _removeElement(element) {
|
||||
$(element).removeClass(ClassName.IN);
|
||||
|
||||
if (!_Util['default'].supportsTransitionEnd() || !$(element).hasClass(ClassName.FADE)) {
|
||||
this._destroyElement(element);
|
||||
return;
|
||||
}
|
||||
|
||||
$(element).one(_Util['default'].TRANSITION_END, $.proxy(this._destroyElement, this, element)).emulateTransitionEnd(TRANSITION_DURATION);
|
||||
}
|
||||
}, {
|
||||
key: '_destroyElement',
|
||||
value: function _destroyElement(element) {
|
||||
$(element).detach().trigger(Event.CLOSED).remove();
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
var $element = $(this);
|
||||
var data = $element.data(DATA_KEY);
|
||||
|
||||
if (!data) {
|
||||
data = new Alert(this);
|
||||
$element.data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (config === 'close') {
|
||||
data[config](this);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: '_handleDismiss',
|
||||
value: function _handleDismiss(alertInstance) {
|
||||
return function (event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
alertInstance.close(this);
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: 'VERSION',
|
||||
get: function get() {
|
||||
return VERSION;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Alert;
|
||||
})();
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DISMISS, Alert._handleDismiss(new Alert()));
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Alert._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Alert;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Alert._jQueryInterface;
|
||||
};
|
||||
|
||||
return Alert;
|
||||
})(jQuery);
|
||||
|
||||
module.exports = Alert;
|
||||
});
|
||||
189
dist/js/umd/button.js
vendored
|
|
@ -1,189 +0,0 @@
|
|||
(function (global, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['exports', 'module'], factory);
|
||||
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
|
||||
factory(exports, module);
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod.exports, mod);
|
||||
global.button = mod.exports;
|
||||
}
|
||||
})(this, function (exports, module) {
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.2): button.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
'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; }; })();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
var Button = (function ($) {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'button';
|
||||
var VERSION = '4.0.0-alpha.2';
|
||||
var DATA_KEY = 'bs.button';
|
||||
var EVENT_KEY = '.' + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
|
||||
var ClassName = {
|
||||
ACTIVE: 'active',
|
||||
BUTTON: 'btn',
|
||||
FOCUS: 'focus'
|
||||
};
|
||||
|
||||
var Selector = {
|
||||
DATA_TOGGLE_CARROT: '[data-toggle^="button"]',
|
||||
DATA_TOGGLE: '[data-toggle="buttons"]',
|
||||
INPUT: 'input',
|
||||
ACTIVE: '.active',
|
||||
BUTTON: '.btn'
|
||||
};
|
||||
|
||||
var Event = {
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
|
||||
FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Button = (function () {
|
||||
function Button(element) {
|
||||
_classCallCheck(this, Button);
|
||||
|
||||
this._element = element;
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// getters
|
||||
|
||||
_createClass(Button, [{
|
||||
key: 'toggle',
|
||||
|
||||
// public
|
||||
|
||||
value: function toggle() {
|
||||
var triggerChangeEvent = true;
|
||||
var rootElement = $(this._element).closest(Selector.DATA_TOGGLE)[0];
|
||||
|
||||
if (rootElement) {
|
||||
var input = $(this._element).find(Selector.INPUT)[0];
|
||||
|
||||
if (input) {
|
||||
if (input.type === 'radio') {
|
||||
if (input.checked && $(this._element).hasClass(ClassName.ACTIVE)) {
|
||||
triggerChangeEvent = false;
|
||||
} else {
|
||||
var activeElement = $(rootElement).find(Selector.ACTIVE)[0];
|
||||
|
||||
if (activeElement) {
|
||||
$(activeElement).removeClass(ClassName.ACTIVE);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (triggerChangeEvent) {
|
||||
input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
|
||||
$(this._element).trigger('change');
|
||||
}
|
||||
|
||||
input.focus();
|
||||
}
|
||||
} else {
|
||||
this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));
|
||||
}
|
||||
|
||||
if (triggerChangeEvent) {
|
||||
$(this._element).toggleClass(ClassName.ACTIVE);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'dispose',
|
||||
value: function dispose() {
|
||||
$.removeData(this._element, DATA_KEY);
|
||||
this._element = null;
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY);
|
||||
|
||||
if (!data) {
|
||||
data = new Button(this);
|
||||
$(this).data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (config === 'toggle') {
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'VERSION',
|
||||
get: function get() {
|
||||
return VERSION;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Button;
|
||||
})();
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var button = event.target;
|
||||
|
||||
if (!$(button).hasClass(ClassName.BUTTON)) {
|
||||
button = $(button).closest(Selector.BUTTON);
|
||||
}
|
||||
|
||||
Button._jQueryInterface.call($(button), 'toggle');
|
||||
}).on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) {
|
||||
var button = $(event.target).closest(Selector.BUTTON)[0];
|
||||
$(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type));
|
||||
});
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Button._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Button;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Button._jQueryInterface;
|
||||
};
|
||||
|
||||
return Button;
|
||||
})(jQuery);
|
||||
|
||||
module.exports = Button;
|
||||
});
|
||||
497
dist/js/umd/carousel.js
vendored
|
|
@ -1,497 +0,0 @@
|
|||
(function (global, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['exports', 'module', './util'], factory);
|
||||
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
|
||||
factory(exports, module, require('./util'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod.exports, mod, global.Util);
|
||||
global.carousel = mod.exports;
|
||||
}
|
||||
})(this, function (exports, module, _util) {
|
||||
'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; }; })();
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
var _Util = _interopRequireDefault(_util);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.2): carousel.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Carousel = (function ($) {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'carousel';
|
||||
var VERSION = '4.0.0-alpha.2';
|
||||
var DATA_KEY = 'bs.carousel';
|
||||
var EVENT_KEY = '.' + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var TRANSITION_DURATION = 600;
|
||||
|
||||
var Default = {
|
||||
interval: 5000,
|
||||
keyboard: true,
|
||||
slide: false,
|
||||
pause: 'hover',
|
||||
wrap: true
|
||||
};
|
||||
|
||||
var DefaultType = {
|
||||
interval: '(number|boolean)',
|
||||
keyboard: 'boolean',
|
||||
slide: '(boolean|string)',
|
||||
pause: '(string|boolean)',
|
||||
wrap: 'boolean'
|
||||
};
|
||||
|
||||
var Direction = {
|
||||
NEXT: 'next',
|
||||
PREVIOUS: 'prev'
|
||||
};
|
||||
|
||||
var Event = {
|
||||
SLIDE: 'slide' + EVENT_KEY,
|
||||
SLID: 'slid' + EVENT_KEY,
|
||||
KEYDOWN: 'keydown' + EVENT_KEY,
|
||||
MOUSEENTER: 'mouseenter' + EVENT_KEY,
|
||||
MOUSELEAVE: 'mouseleave' + EVENT_KEY,
|
||||
LOAD_DATA_API: 'load' + EVENT_KEY + DATA_API_KEY,
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY
|
||||
};
|
||||
|
||||
var ClassName = {
|
||||
CAROUSEL: 'carousel',
|
||||
ACTIVE: 'active',
|
||||
SLIDE: 'slide',
|
||||
RIGHT: 'right',
|
||||
LEFT: 'left',
|
||||
ITEM: 'carousel-item'
|
||||
};
|
||||
|
||||
var Selector = {
|
||||
ACTIVE: '.active',
|
||||
ACTIVE_ITEM: '.active.carousel-item',
|
||||
ITEM: '.carousel-item',
|
||||
NEXT_PREV: '.next, .prev',
|
||||
INDICATORS: '.carousel-indicators',
|
||||
DATA_SLIDE: '[data-slide], [data-slide-to]',
|
||||
DATA_RIDE: '[data-ride="carousel"]'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Carousel = (function () {
|
||||
function Carousel(element, config) {
|
||||
_classCallCheck(this, Carousel);
|
||||
|
||||
this._items = null;
|
||||
this._interval = null;
|
||||
this._activeElement = null;
|
||||
|
||||
this._isPaused = false;
|
||||
this._isSliding = false;
|
||||
|
||||
this._config = this._getConfig(config);
|
||||
this._element = $(element)[0];
|
||||
this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0];
|
||||
|
||||
this._addEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// getters
|
||||
|
||||
_createClass(Carousel, [{
|
||||
key: 'next',
|
||||
|
||||
// public
|
||||
|
||||
value: function next() {
|
||||
if (!this._isSliding) {
|
||||
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',
|
||||
value: function prev() {
|
||||
if (!this._isSliding) {
|
||||
this._slide(Direction.PREVIOUS);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'pause',
|
||||
value: function pause(event) {
|
||||
if (!event) {
|
||||
this._isPaused = true;
|
||||
}
|
||||
|
||||
if ($(this._element).find(Selector.NEXT_PREV)[0] && _Util['default'].supportsTransitionEnd()) {
|
||||
_Util['default'].triggerTransitionEnd(this._element);
|
||||
this.cycle(true);
|
||||
}
|
||||
|
||||
clearInterval(this._interval);
|
||||
this._interval = null;
|
||||
}
|
||||
}, {
|
||||
key: 'cycle',
|
||||
value: function cycle(event) {
|
||||
if (!event) {
|
||||
this._isPaused = false;
|
||||
}
|
||||
|
||||
if (this._interval) {
|
||||
clearInterval(this._interval);
|
||||
this._interval = null;
|
||||
}
|
||||
|
||||
if (this._config.interval && !this._isPaused) {
|
||||
this._interval = setInterval($.proxy(document.visibilityState ? this.nextWhenVisible : this.next, this), this._config.interval);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'to',
|
||||
value: function to(index) {
|
||||
var _this = this;
|
||||
|
||||
this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];
|
||||
|
||||
var activeIndex = this._getItemIndex(this._activeElement);
|
||||
|
||||
if (index > this._items.length - 1 || index < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._isSliding) {
|
||||
$(this._element).one(Event.SLID, function () {
|
||||
return _this.to(index);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeIndex === index) {
|
||||
this.pause();
|
||||
this.cycle();
|
||||
return;
|
||||
}
|
||||
|
||||
var direction = index > activeIndex ? Direction.NEXT : Direction.PREVIOUS;
|
||||
|
||||
this._slide(direction, this._items[index]);
|
||||
}
|
||||
}, {
|
||||
key: 'dispose',
|
||||
value: function dispose() {
|
||||
$(this._element).off(EVENT_KEY);
|
||||
$.removeData(this._element, DATA_KEY);
|
||||
|
||||
this._items = null;
|
||||
this._config = null;
|
||||
this._element = null;
|
||||
this._interval = null;
|
||||
this._isPaused = null;
|
||||
this._isSliding = null;
|
||||
this._activeElement = null;
|
||||
this._indicatorsElement = null;
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
}, {
|
||||
key: '_getConfig',
|
||||
value: function _getConfig(config) {
|
||||
config = $.extend({}, Default, config);
|
||||
_Util['default'].typeCheckConfig(NAME, config, DefaultType);
|
||||
return config;
|
||||
}
|
||||
}, {
|
||||
key: '_addEventListeners',
|
||||
value: function _addEventListeners() {
|
||||
if (this._config.keyboard) {
|
||||
$(this._element).on(Event.KEYDOWN, $.proxy(this._keydown, this));
|
||||
}
|
||||
|
||||
if (this._config.pause === 'hover' && !('ontouchstart' in document.documentElement)) {
|
||||
$(this._element).on(Event.MOUSEENTER, $.proxy(this.pause, this)).on(Event.MOUSELEAVE, $.proxy(this.cycle, this));
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_keydown',
|
||||
value: function _keydown(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (/input|textarea/i.test(event.target.tagName)) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (event.which) {
|
||||
case 37:
|
||||
this.prev();break;
|
||||
case 39:
|
||||
this.next();break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_getItemIndex',
|
||||
value: function _getItemIndex(element) {
|
||||
this._items = $.makeArray($(element).parent().find(Selector.ITEM));
|
||||
return this._items.indexOf(element);
|
||||
}
|
||||
}, {
|
||||
key: '_getItemByDirection',
|
||||
value: function _getItemByDirection(direction, activeElement) {
|
||||
var isNextDirection = direction === Direction.NEXT;
|
||||
var isPrevDirection = direction === Direction.PREVIOUS;
|
||||
var activeIndex = this._getItemIndex(activeElement);
|
||||
var lastItemIndex = this._items.length - 1;
|
||||
var isGoingToWrap = isPrevDirection && activeIndex === 0 || isNextDirection && activeIndex === lastItemIndex;
|
||||
|
||||
if (isGoingToWrap && !this._config.wrap) {
|
||||
return activeElement;
|
||||
}
|
||||
|
||||
var delta = direction === Direction.PREVIOUS ? -1 : 1;
|
||||
var itemIndex = (activeIndex + delta) % this._items.length;
|
||||
|
||||
return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex];
|
||||
}
|
||||
}, {
|
||||
key: '_triggerSlideEvent',
|
||||
value: function _triggerSlideEvent(relatedTarget, directionalClassname) {
|
||||
var slideEvent = $.Event(Event.SLIDE, {
|
||||
relatedTarget: relatedTarget,
|
||||
direction: directionalClassname
|
||||
});
|
||||
|
||||
$(this._element).trigger(slideEvent);
|
||||
|
||||
return slideEvent;
|
||||
}
|
||||
}, {
|
||||
key: '_setActiveIndicatorElement',
|
||||
value: function _setActiveIndicatorElement(element) {
|
||||
if (this._indicatorsElement) {
|
||||
$(this._indicatorsElement).find(Selector.ACTIVE).removeClass(ClassName.ACTIVE);
|
||||
|
||||
var nextIndicator = this._indicatorsElement.children[this._getItemIndex(element)];
|
||||
|
||||
if (nextIndicator) {
|
||||
$(nextIndicator).addClass(ClassName.ACTIVE);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_slide',
|
||||
value: function _slide(direction, element) {
|
||||
var _this2 = this;
|
||||
|
||||
var activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];
|
||||
var nextElement = element || activeElement && this._getItemByDirection(direction, activeElement);
|
||||
|
||||
var isCycling = Boolean(this._interval);
|
||||
|
||||
var directionalClassName = direction === Direction.NEXT ? ClassName.LEFT : ClassName.RIGHT;
|
||||
|
||||
if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) {
|
||||
this._isSliding = false;
|
||||
return;
|
||||
}
|
||||
|
||||
var slideEvent = this._triggerSlideEvent(nextElement, directionalClassName);
|
||||
if (slideEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!activeElement || !nextElement) {
|
||||
// some weirdness is happening, so we bail
|
||||
return;
|
||||
}
|
||||
|
||||
this._isSliding = true;
|
||||
|
||||
if (isCycling) {
|
||||
this.pause();
|
||||
}
|
||||
|
||||
this._setActiveIndicatorElement(nextElement);
|
||||
|
||||
var slidEvent = $.Event(Event.SLID, {
|
||||
relatedTarget: nextElement,
|
||||
direction: directionalClassName
|
||||
});
|
||||
|
||||
if (_Util['default'].supportsTransitionEnd() && $(this._element).hasClass(ClassName.SLIDE)) {
|
||||
|
||||
$(nextElement).addClass(direction);
|
||||
|
||||
_Util['default'].reflow(nextElement);
|
||||
|
||||
$(activeElement).addClass(directionalClassName);
|
||||
$(nextElement).addClass(directionalClassName);
|
||||
|
||||
$(activeElement).one(_Util['default'].TRANSITION_END, function () {
|
||||
$(nextElement).removeClass(directionalClassName).removeClass(direction);
|
||||
|
||||
$(nextElement).addClass(ClassName.ACTIVE);
|
||||
|
||||
$(activeElement).removeClass(ClassName.ACTIVE).removeClass(direction).removeClass(directionalClassName);
|
||||
|
||||
_this2._isSliding = false;
|
||||
|
||||
setTimeout(function () {
|
||||
return $(_this2._element).trigger(slidEvent);
|
||||
}, 0);
|
||||
}).emulateTransitionEnd(TRANSITION_DURATION);
|
||||
} else {
|
||||
$(activeElement).removeClass(ClassName.ACTIVE);
|
||||
$(nextElement).addClass(ClassName.ACTIVE);
|
||||
|
||||
this._isSliding = false;
|
||||
$(this._element).trigger(slidEvent);
|
||||
}
|
||||
|
||||
if (isCycling) {
|
||||
this.cycle();
|
||||
}
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY);
|
||||
var _config = $.extend({}, Default, $(this).data());
|
||||
|
||||
if (typeof config === 'object') {
|
||||
$.extend(_config, config);
|
||||
}
|
||||
|
||||
var action = typeof config === 'string' ? config : _config.slide;
|
||||
|
||||
if (!data) {
|
||||
data = new Carousel(this, _config);
|
||||
$(this).data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'number') {
|
||||
data.to(config);
|
||||
} else if (typeof action === 'string') {
|
||||
if (data[action] === undefined) {
|
||||
throw new Error('No method named "' + action + '"');
|
||||
}
|
||||
data[action]();
|
||||
} else if (_config.interval) {
|
||||
data.pause();
|
||||
data.cycle();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: '_dataApiClickHandler',
|
||||
value: function _dataApiClickHandler(event) {
|
||||
var selector = _Util['default'].getSelectorFromElement(this);
|
||||
|
||||
if (!selector) {
|
||||
return;
|
||||
}
|
||||
|
||||
var target = $(selector)[0];
|
||||
|
||||
if (!target || !$(target).hasClass(ClassName.CAROUSEL)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var config = $.extend({}, $(target).data(), $(this).data());
|
||||
var slideIndex = this.getAttribute('data-slide-to');
|
||||
|
||||
if (slideIndex) {
|
||||
config.interval = false;
|
||||
}
|
||||
|
||||
Carousel._jQueryInterface.call($(target), config);
|
||||
|
||||
if (slideIndex) {
|
||||
$(target).data(DATA_KEY).to(slideIndex);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
}, {
|
||||
key: 'VERSION',
|
||||
get: function get() {
|
||||
return VERSION;
|
||||
}
|
||||
}, {
|
||||
key: 'Default',
|
||||
get: function get() {
|
||||
return Default;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Carousel;
|
||||
})();
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler);
|
||||
|
||||
$(window).on(Event.LOAD_DATA_API, function () {
|
||||
$(Selector.DATA_RIDE).each(function () {
|
||||
var $carousel = $(this);
|
||||
Carousel._jQueryInterface.call($carousel, $carousel.data());
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Carousel._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Carousel;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Carousel._jQueryInterface;
|
||||
};
|
||||
|
||||
return Carousel;
|
||||
})(jQuery);
|
||||
|
||||
module.exports = Carousel;
|
||||
});
|
||||
383
dist/js/umd/collapse.js
vendored
|
|
@ -1,383 +0,0 @@
|
|||
(function (global, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['exports', 'module', './util'], factory);
|
||||
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
|
||||
factory(exports, module, require('./util'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod.exports, mod, global.Util);
|
||||
global.collapse = mod.exports;
|
||||
}
|
||||
})(this, function (exports, module, _util) {
|
||||
'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; }; })();
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
var _Util = _interopRequireDefault(_util);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.2): collapse.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Collapse = (function ($) {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'collapse';
|
||||
var VERSION = '4.0.0-alpha.2';
|
||||
var DATA_KEY = 'bs.collapse';
|
||||
var EVENT_KEY = '.' + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var TRANSITION_DURATION = 600;
|
||||
|
||||
var Default = {
|
||||
toggle: true,
|
||||
parent: ''
|
||||
};
|
||||
|
||||
var DefaultType = {
|
||||
toggle: 'boolean',
|
||||
parent: 'string'
|
||||
};
|
||||
|
||||
var Event = {
|
||||
SHOW: 'show' + EVENT_KEY,
|
||||
SHOWN: 'shown' + EVENT_KEY,
|
||||
HIDE: 'hide' + EVENT_KEY,
|
||||
HIDDEN: 'hidden' + EVENT_KEY,
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY
|
||||
};
|
||||
|
||||
var ClassName = {
|
||||
IN: 'in',
|
||||
COLLAPSE: 'collapse',
|
||||
COLLAPSING: 'collapsing',
|
||||
COLLAPSED: 'collapsed'
|
||||
};
|
||||
|
||||
var Dimension = {
|
||||
WIDTH: 'width',
|
||||
HEIGHT: 'height'
|
||||
};
|
||||
|
||||
var Selector = {
|
||||
ACTIVES: '.panel > .in, .panel > .collapsing',
|
||||
DATA_TOGGLE: '[data-toggle="collapse"]'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Collapse = (function () {
|
||||
function Collapse(element, config) {
|
||||
_classCallCheck(this, Collapse);
|
||||
|
||||
this._isTransitioning = false;
|
||||
this._element = element;
|
||||
this._config = this._getConfig(config);
|
||||
this._triggerArray = $.makeArray($('[data-toggle="collapse"][href="#' + element.id + '"],' + ('[data-toggle="collapse"][data-target="#' + element.id + '"]')));
|
||||
|
||||
this._parent = this._config.parent ? this._getParent() : null;
|
||||
|
||||
if (!this._config.parent) {
|
||||
this._addAriaAndCollapsedClass(this._element, this._triggerArray);
|
||||
}
|
||||
|
||||
if (this._config.toggle) {
|
||||
this.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// getters
|
||||
|
||||
_createClass(Collapse, [{
|
||||
key: 'toggle',
|
||||
|
||||
// public
|
||||
|
||||
value: function toggle() {
|
||||
if ($(this._element).hasClass(ClassName.IN)) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'show',
|
||||
value: function show() {
|
||||
var _this = this;
|
||||
|
||||
if (this._isTransitioning || $(this._element).hasClass(ClassName.IN)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var actives = undefined;
|
||||
var activesData = undefined;
|
||||
|
||||
if (this._parent) {
|
||||
actives = $.makeArray($(Selector.ACTIVES));
|
||||
if (!actives.length) {
|
||||
actives = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (actives) {
|
||||
activesData = $(actives).data(DATA_KEY);
|
||||
if (activesData && activesData._isTransitioning) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
var startEvent = $.Event(Event.SHOW);
|
||||
$(this._element).trigger(startEvent);
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (actives) {
|
||||
Collapse._jQueryInterface.call($(actives), 'hide');
|
||||
if (!activesData) {
|
||||
$(actives).data(DATA_KEY, null);
|
||||
}
|
||||
}
|
||||
|
||||
var dimension = this._getDimension();
|
||||
|
||||
$(this._element).removeClass(ClassName.COLLAPSE).addClass(ClassName.COLLAPSING);
|
||||
|
||||
this._element.style[dimension] = 0;
|
||||
this._element.setAttribute('aria-expanded', true);
|
||||
|
||||
if (this._triggerArray.length) {
|
||||
$(this._triggerArray).removeClass(ClassName.COLLAPSED).attr('aria-expanded', true);
|
||||
}
|
||||
|
||||
this.setTransitioning(true);
|
||||
|
||||
var complete = function complete() {
|
||||
$(_this._element).removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE).addClass(ClassName.IN);
|
||||
|
||||
_this._element.style[dimension] = '';
|
||||
|
||||
_this.setTransitioning(false);
|
||||
|
||||
$(_this._element).trigger(Event.SHOWN);
|
||||
};
|
||||
|
||||
if (!_Util['default'].supportsTransitionEnd()) {
|
||||
complete();
|
||||
return;
|
||||
}
|
||||
|
||||
var capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1);
|
||||
var scrollSize = 'scroll' + capitalizedDimension;
|
||||
|
||||
$(this._element).one(_Util['default'].TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
|
||||
|
||||
this._element.style[dimension] = this._element[scrollSize] + 'px';
|
||||
}
|
||||
}, {
|
||||
key: 'hide',
|
||||
value: function hide() {
|
||||
var _this2 = this;
|
||||
|
||||
if (this._isTransitioning || !$(this._element).hasClass(ClassName.IN)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var startEvent = $.Event(Event.HIDE);
|
||||
$(this._element).trigger(startEvent);
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
var dimension = this._getDimension();
|
||||
var offsetDimension = dimension === Dimension.WIDTH ? 'offsetWidth' : 'offsetHeight';
|
||||
|
||||
this._element.style[dimension] = this._element[offsetDimension] + 'px';
|
||||
|
||||
_Util['default'].reflow(this._element);
|
||||
|
||||
$(this._element).addClass(ClassName.COLLAPSING).removeClass(ClassName.COLLAPSE).removeClass(ClassName.IN);
|
||||
|
||||
this._element.setAttribute('aria-expanded', false);
|
||||
|
||||
if (this._triggerArray.length) {
|
||||
$(this._triggerArray).addClass(ClassName.COLLAPSED).attr('aria-expanded', false);
|
||||
}
|
||||
|
||||
this.setTransitioning(true);
|
||||
|
||||
var complete = function complete() {
|
||||
_this2.setTransitioning(false);
|
||||
$(_this2._element).removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE).trigger(Event.HIDDEN);
|
||||
};
|
||||
|
||||
this._element.style[dimension] = 0;
|
||||
|
||||
if (!_Util['default'].supportsTransitionEnd()) {
|
||||
complete();
|
||||
return;
|
||||
}
|
||||
|
||||
$(this._element).one(_Util['default'].TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
|
||||
}
|
||||
}, {
|
||||
key: 'setTransitioning',
|
||||
value: function setTransitioning(isTransitioning) {
|
||||
this._isTransitioning = isTransitioning;
|
||||
}
|
||||
}, {
|
||||
key: 'dispose',
|
||||
value: function dispose() {
|
||||
$.removeData(this._element, DATA_KEY);
|
||||
|
||||
this._config = null;
|
||||
this._parent = null;
|
||||
this._element = null;
|
||||
this._triggerArray = null;
|
||||
this._isTransitioning = null;
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
}, {
|
||||
key: '_getConfig',
|
||||
value: function _getConfig(config) {
|
||||
config = $.extend({}, Default, config);
|
||||
config.toggle = Boolean(config.toggle); // coerce string values
|
||||
_Util['default'].typeCheckConfig(NAME, config, DefaultType);
|
||||
return config;
|
||||
}
|
||||
}, {
|
||||
key: '_getDimension',
|
||||
value: function _getDimension() {
|
||||
var hasWidth = $(this._element).hasClass(Dimension.WIDTH);
|
||||
return hasWidth ? Dimension.WIDTH : Dimension.HEIGHT;
|
||||
}
|
||||
}, {
|
||||
key: '_getParent',
|
||||
value: function _getParent() {
|
||||
var _this3 = this;
|
||||
|
||||
var parent = $(this._config.parent)[0];
|
||||
var selector = '[data-toggle="collapse"][data-parent="' + this._config.parent + '"]';
|
||||
|
||||
$(parent).find(selector).each(function (i, element) {
|
||||
_this3._addAriaAndCollapsedClass(Collapse._getTargetFromElement(element), [element]);
|
||||
});
|
||||
|
||||
return parent;
|
||||
}
|
||||
}, {
|
||||
key: '_addAriaAndCollapsedClass',
|
||||
value: function _addAriaAndCollapsedClass(element, triggerArray) {
|
||||
if (element) {
|
||||
var isOpen = $(element).hasClass(ClassName.IN);
|
||||
element.setAttribute('aria-expanded', isOpen);
|
||||
|
||||
if (triggerArray.length) {
|
||||
$(triggerArray).toggleClass(ClassName.COLLAPSED, !isOpen).attr('aria-expanded', isOpen);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
}], [{
|
||||
key: '_getTargetFromElement',
|
||||
value: function _getTargetFromElement(element) {
|
||||
var selector = _Util['default'].getSelectorFromElement(element);
|
||||
return selector ? $(selector)[0] : null;
|
||||
}
|
||||
}, {
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data(DATA_KEY);
|
||||
var _config = $.extend({}, Default, $this.data(), typeof config === 'object' && config);
|
||||
|
||||
if (!data && _config.toggle && /show|hide/.test(config)) {
|
||||
_config.toggle = false;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Collapse(this, _config);
|
||||
$this.data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined) {
|
||||
throw new Error('No method named "' + config + '"');
|
||||
}
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'VERSION',
|
||||
get: function get() {
|
||||
return VERSION;
|
||||
}
|
||||
}, {
|
||||
key: 'Default',
|
||||
get: function get() {
|
||||
return Default;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Collapse;
|
||||
})();
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var target = Collapse._getTargetFromElement(this);
|
||||
var data = $(target).data(DATA_KEY);
|
||||
var config = data ? 'toggle' : $(this).data();
|
||||
|
||||
Collapse._jQueryInterface.call($(target), config);
|
||||
});
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Collapse._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Collapse;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Collapse._jQueryInterface;
|
||||
};
|
||||
|
||||
return Collapse;
|
||||
})(jQuery);
|
||||
|
||||
module.exports = Collapse;
|
||||
});
|
||||
312
dist/js/umd/dropdown.js
vendored
|
|
@ -1,312 +0,0 @@
|
|||
(function (global, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['exports', 'module', './util'], factory);
|
||||
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
|
||||
factory(exports, module, require('./util'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod.exports, mod, global.Util);
|
||||
global.dropdown = mod.exports;
|
||||
}
|
||||
})(this, function (exports, module, _util) {
|
||||
'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; }; })();
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
var _Util = _interopRequireDefault(_util);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.2): dropdown.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Dropdown = (function ($) {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'dropdown';
|
||||
var VERSION = '4.0.0-alpha.2';
|
||||
var DATA_KEY = 'bs.dropdown';
|
||||
var EVENT_KEY = '.' + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
|
||||
var Event = {
|
||||
HIDE: 'hide' + EVENT_KEY,
|
||||
HIDDEN: 'hidden' + EVENT_KEY,
|
||||
SHOW: 'show' + EVENT_KEY,
|
||||
SHOWN: 'shown' + EVENT_KEY,
|
||||
CLICK: 'click' + EVENT_KEY,
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
|
||||
KEYDOWN_DATA_API: 'keydown' + EVENT_KEY + DATA_API_KEY
|
||||
};
|
||||
|
||||
var ClassName = {
|
||||
BACKDROP: 'dropdown-backdrop',
|
||||
DISABLED: 'disabled',
|
||||
OPEN: 'open'
|
||||
};
|
||||
|
||||
var Selector = {
|
||||
BACKDROP: '.dropdown-backdrop',
|
||||
DATA_TOGGLE: '[data-toggle="dropdown"]',
|
||||
FORM_CHILD: '.dropdown form',
|
||||
ROLE_MENU: '[role="menu"]',
|
||||
ROLE_LISTBOX: '[role="listbox"]',
|
||||
NAVBAR_NAV: '.navbar-nav',
|
||||
VISIBLE_ITEMS: '[role="menu"] li:not(.disabled) a, ' + '[role="listbox"] li:not(.disabled) a'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Dropdown = (function () {
|
||||
function Dropdown(element) {
|
||||
_classCallCheck(this, Dropdown);
|
||||
|
||||
this._element = element;
|
||||
|
||||
this._addEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// getters
|
||||
|
||||
_createClass(Dropdown, [{
|
||||
key: 'toggle',
|
||||
|
||||
// public
|
||||
|
||||
value: function toggle() {
|
||||
if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var parent = Dropdown._getParentFromElement(this);
|
||||
var isActive = $(parent).hasClass(ClassName.OPEN);
|
||||
|
||||
Dropdown._clearMenus();
|
||||
|
||||
if (isActive) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ('ontouchstart' in document.documentElement && !$(parent).closest(Selector.NAVBAR_NAV).length) {
|
||||
|
||||
// if mobile we use a backdrop because click events don't delegate
|
||||
var dropdown = document.createElement('div');
|
||||
dropdown.className = ClassName.BACKDROP;
|
||||
$(dropdown).insertBefore(this);
|
||||
$(dropdown).on('click', Dropdown._clearMenus);
|
||||
}
|
||||
|
||||
var relatedTarget = { relatedTarget: this };
|
||||
var showEvent = $.Event(Event.SHOW, relatedTarget);
|
||||
|
||||
$(parent).trigger(showEvent);
|
||||
|
||||
if (showEvent.isDefaultPrevented()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.focus();
|
||||
this.setAttribute('aria-expanded', 'true');
|
||||
|
||||
$(parent).toggleClass(ClassName.OPEN);
|
||||
$(parent).trigger($.Event(Event.SHOWN, relatedTarget));
|
||||
|
||||
return false;
|
||||
}
|
||||
}, {
|
||||
key: 'dispose',
|
||||
value: function dispose() {
|
||||
$.removeData(this._element, DATA_KEY);
|
||||
$(this._element).off(EVENT_KEY);
|
||||
this._element = null;
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
}, {
|
||||
key: '_addEventListeners',
|
||||
value: function _addEventListeners() {
|
||||
$(this._element).on(Event.CLICK, this.toggle);
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY);
|
||||
|
||||
if (!data) {
|
||||
$(this).data(DATA_KEY, data = new Dropdown(this));
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined) {
|
||||
throw new Error('No method named "' + config + '"');
|
||||
}
|
||||
data[config].call(this);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: '_clearMenus',
|
||||
value: function _clearMenus(event) {
|
||||
if (event && event.which === 3) {
|
||||
return;
|
||||
}
|
||||
|
||||
var backdrop = $(Selector.BACKDROP)[0];
|
||||
if (backdrop) {
|
||||
backdrop.parentNode.removeChild(backdrop);
|
||||
}
|
||||
|
||||
var toggles = $.makeArray($(Selector.DATA_TOGGLE));
|
||||
|
||||
for (var i = 0; i < toggles.length; i++) {
|
||||
var _parent = Dropdown._getParentFromElement(toggles[i]);
|
||||
var relatedTarget = { relatedTarget: toggles[i] };
|
||||
|
||||
if (!$(_parent).hasClass(ClassName.OPEN)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (event && event.type === 'click' && /input|textarea/i.test(event.target.tagName) && $.contains(_parent, event.target)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var hideEvent = $.Event(Event.HIDE, relatedTarget);
|
||||
$(_parent).trigger(hideEvent);
|
||||
if (hideEvent.isDefaultPrevented()) {
|
||||
continue;
|
||||
}
|
||||
|
||||
toggles[i].setAttribute('aria-expanded', 'false');
|
||||
|
||||
$(_parent).removeClass(ClassName.OPEN).trigger($.Event(Event.HIDDEN, relatedTarget));
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_getParentFromElement',
|
||||
value: function _getParentFromElement(element) {
|
||||
var parent = undefined;
|
||||
var selector = _Util['default'].getSelectorFromElement(element);
|
||||
|
||||
if (selector) {
|
||||
parent = $(selector)[0];
|
||||
}
|
||||
|
||||
return parent || element.parentNode;
|
||||
}
|
||||
}, {
|
||||
key: '_dataApiKeydownHandler',
|
||||
value: function _dataApiKeydownHandler(event) {
|
||||
if (!/(38|40|27|32)/.test(event.which) || /input|textarea/i.test(event.target.tagName)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var parent = Dropdown._getParentFromElement(this);
|
||||
var isActive = $(parent).hasClass(ClassName.OPEN);
|
||||
|
||||
if (!isActive && event.which !== 27 || isActive && event.which === 27) {
|
||||
|
||||
if (event.which === 27) {
|
||||
var toggle = $(parent).find(Selector.DATA_TOGGLE)[0];
|
||||
$(toggle).trigger('focus');
|
||||
}
|
||||
|
||||
$(this).trigger('click');
|
||||
return;
|
||||
}
|
||||
|
||||
var items = $.makeArray($(Selector.VISIBLE_ITEMS));
|
||||
|
||||
items = items.filter(function (item) {
|
||||
return item.offsetWidth || item.offsetHeight;
|
||||
});
|
||||
|
||||
if (!items.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var index = items.indexOf(event.target);
|
||||
|
||||
if (event.which === 38 && index > 0) {
|
||||
// up
|
||||
index--;
|
||||
}
|
||||
|
||||
if (event.which === 40 && index < items.length - 1) {
|
||||
// down
|
||||
index++;
|
||||
}
|
||||
|
||||
if (index < 0) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
items[index].focus();
|
||||
}
|
||||
}, {
|
||||
key: 'VERSION',
|
||||
get: function get() {
|
||||
return VERSION;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Dropdown;
|
||||
})();
|
||||
|
||||
$(document).on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN_DATA_API, Selector.ROLE_MENU, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN_DATA_API, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler).on(Event.CLICK_DATA_API, Dropdown._clearMenus).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle).on(Event.CLICK_DATA_API, Selector.FORM_CHILD, function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Dropdown._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Dropdown;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Dropdown._jQueryInterface;
|
||||
};
|
||||
|
||||
return Dropdown;
|
||||
})(jQuery);
|
||||
|
||||
module.exports = Dropdown;
|
||||
});
|
||||
549
dist/js/umd/modal.js
vendored
|
|
@ -1,549 +0,0 @@
|
|||
(function (global, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['exports', 'module', './util'], factory);
|
||||
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
|
||||
factory(exports, module, require('./util'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod.exports, mod, global.Util);
|
||||
global.modal = mod.exports;
|
||||
}
|
||||
})(this, function (exports, module, _util) {
|
||||
'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; }; })();
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
var _Util = _interopRequireDefault(_util);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.2): modal.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Modal = (function ($) {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'modal';
|
||||
var VERSION = '4.0.0-alpha.2';
|
||||
var DATA_KEY = 'bs.modal';
|
||||
var EVENT_KEY = '.' + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var TRANSITION_DURATION = 300;
|
||||
var BACKDROP_TRANSITION_DURATION = 150;
|
||||
|
||||
var Default = {
|
||||
backdrop: true,
|
||||
keyboard: true,
|
||||
focus: true,
|
||||
show: true
|
||||
};
|
||||
|
||||
var DefaultType = {
|
||||
backdrop: '(boolean|string)',
|
||||
keyboard: 'boolean',
|
||||
focus: 'boolean',
|
||||
show: 'boolean'
|
||||
};
|
||||
|
||||
var Event = {
|
||||
HIDE: 'hide' + EVENT_KEY,
|
||||
HIDDEN: 'hidden' + EVENT_KEY,
|
||||
SHOW: 'show' + EVENT_KEY,
|
||||
SHOWN: 'shown' + EVENT_KEY,
|
||||
FOCUSIN: 'focusin' + EVENT_KEY,
|
||||
RESIZE: 'resize' + EVENT_KEY,
|
||||
CLICK_DISMISS: 'click.dismiss' + EVENT_KEY,
|
||||
KEYDOWN_DISMISS: 'keydown.dismiss' + EVENT_KEY,
|
||||
MOUSEUP_DISMISS: 'mouseup.dismiss' + EVENT_KEY,
|
||||
MOUSEDOWN_DISMISS: 'mousedown.dismiss' + EVENT_KEY,
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY
|
||||
};
|
||||
|
||||
var ClassName = {
|
||||
SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
|
||||
BACKDROP: 'modal-backdrop',
|
||||
OPEN: 'modal-open',
|
||||
FADE: 'fade',
|
||||
IN: 'in'
|
||||
};
|
||||
|
||||
var Selector = {
|
||||
DIALOG: '.modal-dialog',
|
||||
DATA_TOGGLE: '[data-toggle="modal"]',
|
||||
DATA_DISMISS: '[data-dismiss="modal"]',
|
||||
FIXED_CONTENT: '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Modal = (function () {
|
||||
function Modal(element, config) {
|
||||
_classCallCheck(this, Modal);
|
||||
|
||||
this._config = this._getConfig(config);
|
||||
this._element = element;
|
||||
this._dialog = $(element).find(Selector.DIALOG)[0];
|
||||
this._backdrop = null;
|
||||
this._isShown = false;
|
||||
this._isBodyOverflowing = false;
|
||||
this._ignoreBackdropClick = false;
|
||||
this._originalBodyPadding = 0;
|
||||
this._scrollbarWidth = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// getters
|
||||
|
||||
_createClass(Modal, [{
|
||||
key: 'toggle',
|
||||
|
||||
// public
|
||||
|
||||
value: function toggle(relatedTarget) {
|
||||
return this._isShown ? this.hide() : this.show(relatedTarget);
|
||||
}
|
||||
}, {
|
||||
key: 'show',
|
||||
value: function show(relatedTarget) {
|
||||
var _this = this;
|
||||
|
||||
var showEvent = $.Event(Event.SHOW, {
|
||||
relatedTarget: relatedTarget
|
||||
});
|
||||
|
||||
$(this._element).trigger(showEvent);
|
||||
|
||||
if (this._isShown || showEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isShown = true;
|
||||
|
||||
this._checkScrollbar();
|
||||
this._setScrollbar();
|
||||
|
||||
$(document.body).addClass(ClassName.OPEN);
|
||||
|
||||
this._setEscapeEvent();
|
||||
this._setResizeEvent();
|
||||
|
||||
$(this._element).on(Event.CLICK_DISMISS, Selector.DATA_DISMISS, $.proxy(this.hide, this));
|
||||
|
||||
$(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () {
|
||||
$(_this._element).one(Event.MOUSEUP_DISMISS, function (event) {
|
||||
if ($(event.target).is(_this._element)) {
|
||||
_this._ignoreBackdropClick = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this._showBackdrop($.proxy(this._showElement, this, relatedTarget));
|
||||
}
|
||||
}, {
|
||||
key: 'hide',
|
||||
value: function hide(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
var hideEvent = $.Event(Event.HIDE);
|
||||
|
||||
$(this._element).trigger(hideEvent);
|
||||
|
||||
if (!this._isShown || hideEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isShown = false;
|
||||
|
||||
this._setEscapeEvent();
|
||||
this._setResizeEvent();
|
||||
|
||||
$(document).off(Event.FOCUSIN);
|
||||
|
||||
$(this._element).removeClass(ClassName.IN);
|
||||
|
||||
$(this._element).off(Event.CLICK_DISMISS);
|
||||
$(this._dialog).off(Event.MOUSEDOWN_DISMISS);
|
||||
|
||||
if (_Util['default'].supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) {
|
||||
|
||||
$(this._element).one(_Util['default'].TRANSITION_END, $.proxy(this._hideModal, this)).emulateTransitionEnd(TRANSITION_DURATION);
|
||||
} else {
|
||||
this._hideModal();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'dispose',
|
||||
value: function dispose() {
|
||||
$.removeData(this._element, DATA_KEY);
|
||||
|
||||
$(window).off(EVENT_KEY);
|
||||
$(document).off(EVENT_KEY);
|
||||
$(this._element).off(EVENT_KEY);
|
||||
$(this._backdrop).off(EVENT_KEY);
|
||||
|
||||
this._config = null;
|
||||
this._element = null;
|
||||
this._dialog = null;
|
||||
this._backdrop = null;
|
||||
this._isShown = null;
|
||||
this._isBodyOverflowing = null;
|
||||
this._ignoreBackdropClick = null;
|
||||
this._originalBodyPadding = null;
|
||||
this._scrollbarWidth = null;
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
}, {
|
||||
key: '_getConfig',
|
||||
value: function _getConfig(config) {
|
||||
config = $.extend({}, Default, config);
|
||||
_Util['default'].typeCheckConfig(NAME, config, DefaultType);
|
||||
return config;
|
||||
}
|
||||
}, {
|
||||
key: '_showElement',
|
||||
value: function _showElement(relatedTarget) {
|
||||
var _this2 = this;
|
||||
|
||||
var transition = _Util['default'].supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE);
|
||||
|
||||
if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
|
||||
// don't move modals dom position
|
||||
document.body.appendChild(this._element);
|
||||
}
|
||||
|
||||
this._element.style.display = 'block';
|
||||
this._element.scrollTop = 0;
|
||||
|
||||
if (transition) {
|
||||
_Util['default'].reflow(this._element);
|
||||
}
|
||||
|
||||
$(this._element).addClass(ClassName.IN);
|
||||
|
||||
if (this._config.focus) {
|
||||
this._enforceFocus();
|
||||
}
|
||||
|
||||
var shownEvent = $.Event(Event.SHOWN, {
|
||||
relatedTarget: relatedTarget
|
||||
});
|
||||
|
||||
var transitionComplete = function transitionComplete() {
|
||||
if (_this2._config.focus) {
|
||||
_this2._element.focus();
|
||||
}
|
||||
$(_this2._element).trigger(shownEvent);
|
||||
};
|
||||
|
||||
if (transition) {
|
||||
$(this._dialog).one(_Util['default'].TRANSITION_END, transitionComplete).emulateTransitionEnd(TRANSITION_DURATION);
|
||||
} else {
|
||||
transitionComplete();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_enforceFocus',
|
||||
value: function _enforceFocus() {
|
||||
var _this3 = this;
|
||||
|
||||
$(document).off(Event.FOCUSIN) // guard against infinite focus loop
|
||||
.on(Event.FOCUSIN, function (event) {
|
||||
if (document !== event.target && _this3._element !== event.target && !$(_this3._element).has(event.target).length) {
|
||||
_this3._element.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: '_setEscapeEvent',
|
||||
value: function _setEscapeEvent() {
|
||||
var _this4 = this;
|
||||
|
||||
if (this._isShown && this._config.keyboard) {
|
||||
$(this._element).on(Event.KEYDOWN_DISMISS, function (event) {
|
||||
if (event.which === 27) {
|
||||
_this4.hide();
|
||||
}
|
||||
});
|
||||
} else if (!this._isShown) {
|
||||
$(this._element).off(Event.KEYDOWN_DISMISS);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_setResizeEvent',
|
||||
value: function _setResizeEvent() {
|
||||
if (this._isShown) {
|
||||
$(window).on(Event.RESIZE, $.proxy(this._handleUpdate, this));
|
||||
} else {
|
||||
$(window).off(Event.RESIZE);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_hideModal',
|
||||
value: function _hideModal() {
|
||||
var _this5 = this;
|
||||
|
||||
this._element.style.display = 'none';
|
||||
this._showBackdrop(function () {
|
||||
$(document.body).removeClass(ClassName.OPEN);
|
||||
_this5._resetAdjustments();
|
||||
_this5._resetScrollbar();
|
||||
$(_this5._element).trigger(Event.HIDDEN);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: '_removeBackdrop',
|
||||
value: function _removeBackdrop() {
|
||||
if (this._backdrop) {
|
||||
$(this._backdrop).remove();
|
||||
this._backdrop = null;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_showBackdrop',
|
||||
value: function _showBackdrop(callback) {
|
||||
var _this6 = this;
|
||||
|
||||
var animate = $(this._element).hasClass(ClassName.FADE) ? ClassName.FADE : '';
|
||||
|
||||
if (this._isShown && this._config.backdrop) {
|
||||
var doAnimate = _Util['default'].supportsTransitionEnd() && animate;
|
||||
|
||||
this._backdrop = document.createElement('div');
|
||||
this._backdrop.className = ClassName.BACKDROP;
|
||||
|
||||
if (animate) {
|
||||
$(this._backdrop).addClass(animate);
|
||||
}
|
||||
|
||||
$(this._backdrop).appendTo(document.body);
|
||||
|
||||
$(this._element).on(Event.CLICK_DISMISS, function (event) {
|
||||
if (_this6._ignoreBackdropClick) {
|
||||
_this6._ignoreBackdropClick = false;
|
||||
return;
|
||||
}
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
if (_this6._config.backdrop === 'static') {
|
||||
_this6._element.focus();
|
||||
} else {
|
||||
_this6.hide();
|
||||
}
|
||||
});
|
||||
|
||||
if (doAnimate) {
|
||||
_Util['default'].reflow(this._backdrop);
|
||||
}
|
||||
|
||||
$(this._backdrop).addClass(ClassName.IN);
|
||||
|
||||
if (!callback) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!doAnimate) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
|
||||
$(this._backdrop).one(_Util['default'].TRANSITION_END, callback).emulateTransitionEnd(BACKDROP_TRANSITION_DURATION);
|
||||
} else if (!this._isShown && this._backdrop) {
|
||||
$(this._backdrop).removeClass(ClassName.IN);
|
||||
|
||||
var callbackRemove = function callbackRemove() {
|
||||
_this6._removeBackdrop();
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
if (_Util['default'].supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) {
|
||||
$(this._backdrop).one(_Util['default'].TRANSITION_END, callbackRemove).emulateTransitionEnd(BACKDROP_TRANSITION_DURATION);
|
||||
} else {
|
||||
callbackRemove();
|
||||
}
|
||||
} else if (callback) {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// the following methods are used to handle overflowing modals
|
||||
// todo (fat): these should probably be refactored out of modal.js
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
}, {
|
||||
key: '_handleUpdate',
|
||||
value: function _handleUpdate() {
|
||||
this._adjustDialog();
|
||||
}
|
||||
}, {
|
||||
key: '_adjustDialog',
|
||||
value: function _adjustDialog() {
|
||||
var isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||
|
||||
if (!this._isBodyOverflowing && isModalOverflowing) {
|
||||
this._element.style.paddingLeft = this._scrollbarWidth + 'px';
|
||||
}
|
||||
|
||||
if (this._isBodyOverflowing && !isModalOverflowing) {
|
||||
this._element.style.paddingRight = this._scrollbarWidth + 'px~';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_resetAdjustments',
|
||||
value: function _resetAdjustments() {
|
||||
this._element.style.paddingLeft = '';
|
||||
this._element.style.paddingRight = '';
|
||||
}
|
||||
}, {
|
||||
key: '_checkScrollbar',
|
||||
value: function _checkScrollbar() {
|
||||
this._isBodyOverflowing = document.body.clientWidth < window.innerWidth;
|
||||
this._scrollbarWidth = this._getScrollbarWidth();
|
||||
}
|
||||
}, {
|
||||
key: '_setScrollbar',
|
||||
value: function _setScrollbar() {
|
||||
var bodyPadding = parseInt($(Selector.FIXED_CONTENT).css('padding-right') || 0, 10);
|
||||
|
||||
this._originalBodyPadding = document.body.style.paddingRight || '';
|
||||
|
||||
if (this._isBodyOverflowing) {
|
||||
document.body.style.paddingRight = bodyPadding + this._scrollbarWidth + 'px';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_resetScrollbar',
|
||||
value: function _resetScrollbar() {
|
||||
document.body.style.paddingRight = this._originalBodyPadding;
|
||||
}
|
||||
}, {
|
||||
key: '_getScrollbarWidth',
|
||||
value: function _getScrollbarWidth() {
|
||||
// thx d.walsh
|
||||
var scrollDiv = document.createElement('div');
|
||||
scrollDiv.className = ClassName.SCROLLBAR_MEASURER;
|
||||
document.body.appendChild(scrollDiv);
|
||||
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
document.body.removeChild(scrollDiv);
|
||||
return scrollbarWidth;
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config, relatedTarget) {
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY);
|
||||
var _config = $.extend({}, Modal.Default, $(this).data(), typeof config === 'object' && config);
|
||||
|
||||
if (!data) {
|
||||
data = new Modal(this, _config);
|
||||
$(this).data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined) {
|
||||
throw new Error('No method named "' + config + '"');
|
||||
}
|
||||
data[config](relatedTarget);
|
||||
} else if (_config.show) {
|
||||
data.show(relatedTarget);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'VERSION',
|
||||
get: function get() {
|
||||
return VERSION;
|
||||
}
|
||||
}, {
|
||||
key: 'Default',
|
||||
get: function get() {
|
||||
return Default;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Modal;
|
||||
})();
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
var _this7 = this;
|
||||
|
||||
var target = undefined;
|
||||
var selector = _Util['default'].getSelectorFromElement(this);
|
||||
|
||||
if (selector) {
|
||||
target = $(selector)[0];
|
||||
}
|
||||
|
||||
var config = $(target).data(DATA_KEY) ? 'toggle' : $.extend({}, $(target).data(), $(this).data());
|
||||
|
||||
if (this.tagName === 'A') {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
var $target = $(target).one(Event.SHOW, function (showEvent) {
|
||||
if (showEvent.isDefaultPrevented()) {
|
||||
// only register focus restorer if modal will actually get shown
|
||||
return;
|
||||
}
|
||||
|
||||
$target.one(Event.HIDDEN, function () {
|
||||
if ($(_this7).is(':visible')) {
|
||||
_this7.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Modal._jQueryInterface.call($(target), config, this);
|
||||
});
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Modal._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Modal;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Modal._jQueryInterface;
|
||||
};
|
||||
|
||||
return Modal;
|
||||
})(jQuery);
|
||||
|
||||
module.exports = Modal;
|
||||
});
|
||||
220
dist/js/umd/popover.js
vendored
|
|
@ -1,220 +0,0 @@
|
|||
(function (global, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['exports', 'module', './tooltip'], factory);
|
||||
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
|
||||
factory(exports, module, require('./tooltip'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod.exports, mod, global.Tooltip);
|
||||
global.popover = mod.exports;
|
||||
}
|
||||
})(this, function (exports, module, _tooltip) {
|
||||
'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 _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var _Tooltip2 = _interopRequireDefault(_tooltip);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.2): popover.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Popover = (function ($) {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'popover';
|
||||
var VERSION = '4.0.0-alpha.2';
|
||||
var DATA_KEY = 'bs.popover';
|
||||
var EVENT_KEY = '.' + DATA_KEY;
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
|
||||
var Default = $.extend({}, _Tooltip2['default'].Default, {
|
||||
placement: 'right',
|
||||
trigger: 'click',
|
||||
content: '',
|
||||
template: '<div class="popover" role="tooltip">' + '<div class="popover-arrow"></div>' + '<h3 class="popover-title"></h3>' + '<div class="popover-content"></div></div>'
|
||||
});
|
||||
|
||||
var DefaultType = $.extend({}, _Tooltip2['default'].DefaultType, {
|
||||
content: '(string|element|function)'
|
||||
});
|
||||
|
||||
var ClassName = {
|
||||
FADE: 'fade',
|
||||
IN: 'in'
|
||||
};
|
||||
|
||||
var Selector = {
|
||||
TITLE: '.popover-title',
|
||||
CONTENT: '.popover-content',
|
||||
ARROW: '.popover-arrow'
|
||||
};
|
||||
|
||||
var Event = {
|
||||
HIDE: 'hide' + EVENT_KEY,
|
||||
HIDDEN: 'hidden' + EVENT_KEY,
|
||||
SHOW: 'show' + EVENT_KEY,
|
||||
SHOWN: 'shown' + EVENT_KEY,
|
||||
INSERTED: 'inserted' + EVENT_KEY,
|
||||
CLICK: 'click' + EVENT_KEY,
|
||||
FOCUSIN: 'focusin' + EVENT_KEY,
|
||||
FOCUSOUT: 'focusout' + EVENT_KEY,
|
||||
MOUSEENTER: 'mouseenter' + EVENT_KEY,
|
||||
MOUSELEAVE: 'mouseleave' + EVENT_KEY
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Popover = (function (_Tooltip) {
|
||||
_inherits(Popover, _Tooltip);
|
||||
|
||||
function Popover() {
|
||||
_classCallCheck(this, Popover);
|
||||
|
||||
_get(Object.getPrototypeOf(Popover.prototype), 'constructor', this).apply(this, arguments);
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
_createClass(Popover, [{
|
||||
key: 'isWithContent',
|
||||
|
||||
// overrides
|
||||
|
||||
value: function isWithContent() {
|
||||
return this.getTitle() || this._getContent();
|
||||
}
|
||||
}, {
|
||||
key: 'getTipElement',
|
||||
value: function getTipElement() {
|
||||
return this.tip = this.tip || $(this.config.template)[0];
|
||||
}
|
||||
}, {
|
||||
key: 'setContent',
|
||||
value: function setContent() {
|
||||
var $tip = $(this.getTipElement());
|
||||
|
||||
// we use append for html objects to maintain js events
|
||||
this.setElementContent($tip.find(Selector.TITLE), this.getTitle());
|
||||
this.setElementContent($tip.find(Selector.CONTENT), this._getContent());
|
||||
|
||||
$tip.removeClass(ClassName.FADE).removeClass(ClassName.IN);
|
||||
|
||||
this.cleanupTether();
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
}, {
|
||||
key: '_getContent',
|
||||
value: function _getContent() {
|
||||
return this.element.getAttribute('data-content') || (typeof this.config.content === 'function' ? this.config.content.call(this.element) : this.config.content);
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY);
|
||||
var _config = typeof config === 'object' ? config : null;
|
||||
|
||||
if (!data && /destroy|hide/.test(config)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Popover(this, _config);
|
||||
$(this).data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined) {
|
||||
throw new Error('No method named "' + config + '"');
|
||||
}
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'VERSION',
|
||||
|
||||
// getters
|
||||
|
||||
get: function get() {
|
||||
return VERSION;
|
||||
}
|
||||
}, {
|
||||
key: 'Default',
|
||||
get: function get() {
|
||||
return Default;
|
||||
}
|
||||
}, {
|
||||
key: 'NAME',
|
||||
get: function get() {
|
||||
return NAME;
|
||||
}
|
||||
}, {
|
||||
key: 'DATA_KEY',
|
||||
get: function get() {
|
||||
return DATA_KEY;
|
||||
}
|
||||
}, {
|
||||
key: 'Event',
|
||||
get: function get() {
|
||||
return Event;
|
||||
}
|
||||
}, {
|
||||
key: 'EVENT_KEY',
|
||||
get: function get() {
|
||||
return EVENT_KEY;
|
||||
}
|
||||
}, {
|
||||
key: 'DefaultType',
|
||||
get: function get() {
|
||||
return DefaultType;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Popover;
|
||||
})(_Tooltip2['default']);
|
||||
|
||||
$.fn[NAME] = Popover._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Popover;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Popover._jQueryInterface;
|
||||
};
|
||||
|
||||
return Popover;
|
||||
})(jQuery);
|
||||
|
||||
module.exports = Popover;
|
||||
});
|
||||
339
dist/js/umd/scrollspy.js
vendored
|
|
@ -1,339 +0,0 @@
|
|||
(function (global, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['exports', 'module', './util'], factory);
|
||||
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
|
||||
factory(exports, module, require('./util'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod.exports, mod, global.Util);
|
||||
global.scrollspy = mod.exports;
|
||||
}
|
||||
})(this, function (exports, module, _util) {
|
||||
'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; }; })();
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
var _Util = _interopRequireDefault(_util);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.2): scrollspy.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var ScrollSpy = (function ($) {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'scrollspy';
|
||||
var VERSION = '4.0.0-alpha.2';
|
||||
var DATA_KEY = 'bs.scrollspy';
|
||||
var EVENT_KEY = '.' + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
|
||||
var Default = {
|
||||
offset: 10,
|
||||
method: 'auto',
|
||||
target: ''
|
||||
};
|
||||
|
||||
var DefaultType = {
|
||||
offset: 'number',
|
||||
method: 'string',
|
||||
target: '(string|element)'
|
||||
};
|
||||
|
||||
var Event = {
|
||||
ACTIVATE: 'activate' + EVENT_KEY,
|
||||
SCROLL: 'scroll' + EVENT_KEY,
|
||||
LOAD_DATA_API: 'load' + EVENT_KEY + DATA_API_KEY
|
||||
};
|
||||
|
||||
var ClassName = {
|
||||
DROPDOWN_ITEM: 'dropdown-item',
|
||||
DROPDOWN_MENU: 'dropdown-menu',
|
||||
NAV_LINK: 'nav-link',
|
||||
NAV: 'nav',
|
||||
ACTIVE: 'active'
|
||||
};
|
||||
|
||||
var Selector = {
|
||||
DATA_SPY: '[data-spy="scroll"]',
|
||||
ACTIVE: '.active',
|
||||
LIST_ITEM: '.list-item',
|
||||
LI: 'li',
|
||||
LI_DROPDOWN: 'li.dropdown',
|
||||
NAV_LINKS: '.nav-link',
|
||||
DROPDOWN: '.dropdown',
|
||||
DROPDOWN_ITEMS: '.dropdown-item',
|
||||
DROPDOWN_TOGGLE: '.dropdown-toggle'
|
||||
};
|
||||
|
||||
var OffsetMethod = {
|
||||
OFFSET: 'offset',
|
||||
POSITION: 'position'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var ScrollSpy = (function () {
|
||||
function ScrollSpy(element, config) {
|
||||
_classCallCheck(this, ScrollSpy);
|
||||
|
||||
this._element = element;
|
||||
this._scrollElement = element.tagName === 'BODY' ? window : element;
|
||||
this._config = this._getConfig(config);
|
||||
this._selector = this._config.target + ' ' + Selector.NAV_LINKS + ',' + (this._config.target + ' ' + Selector.DROPDOWN_ITEMS);
|
||||
this._offsets = [];
|
||||
this._targets = [];
|
||||
this._activeTarget = null;
|
||||
this._scrollHeight = 0;
|
||||
|
||||
$(this._scrollElement).on(Event.SCROLL, $.proxy(this._process, this));
|
||||
|
||||
this.refresh();
|
||||
this._process();
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// getters
|
||||
|
||||
_createClass(ScrollSpy, [{
|
||||
key: 'refresh',
|
||||
|
||||
// public
|
||||
|
||||
value: function refresh() {
|
||||
var _this = this;
|
||||
|
||||
var autoMethod = this._scrollElement !== this._scrollElement.window ? OffsetMethod.POSITION : OffsetMethod.OFFSET;
|
||||
|
||||
var offsetMethod = this._config.method === 'auto' ? autoMethod : this._config.method;
|
||||
|
||||
var offsetBase = offsetMethod === OffsetMethod.POSITION ? this._getScrollTop() : 0;
|
||||
|
||||
this._offsets = [];
|
||||
this._targets = [];
|
||||
|
||||
this._scrollHeight = this._getScrollHeight();
|
||||
|
||||
var targets = $.makeArray($(this._selector));
|
||||
|
||||
targets.map(function (element) {
|
||||
var target = undefined;
|
||||
var targetSelector = _Util['default'].getSelectorFromElement(element);
|
||||
|
||||
if (targetSelector) {
|
||||
target = $(targetSelector)[0];
|
||||
}
|
||||
|
||||
if (target && (target.offsetWidth || target.offsetHeight)) {
|
||||
// todo (fat): remove sketch reliance on jQuery position/offset
|
||||
return [$(target)[offsetMethod]().top + offsetBase, targetSelector];
|
||||
}
|
||||
}).filter(function (item) {
|
||||
return item;
|
||||
}).sort(function (a, b) {
|
||||
return a[0] - b[0];
|
||||
}).forEach(function (item) {
|
||||
_this._offsets.push(item[0]);
|
||||
_this._targets.push(item[1]);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'dispose',
|
||||
value: function dispose() {
|
||||
$.removeData(this._element, DATA_KEY);
|
||||
$(this._scrollElement).off(EVENT_KEY);
|
||||
|
||||
this._element = null;
|
||||
this._scrollElement = null;
|
||||
this._config = null;
|
||||
this._selector = null;
|
||||
this._offsets = null;
|
||||
this._targets = null;
|
||||
this._activeTarget = null;
|
||||
this._scrollHeight = null;
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
}, {
|
||||
key: '_getConfig',
|
||||
value: function _getConfig(config) {
|
||||
config = $.extend({}, Default, config);
|
||||
|
||||
if (typeof config.target !== 'string') {
|
||||
var id = $(config.target).attr('id');
|
||||
if (!id) {
|
||||
id = _Util['default'].getUID(NAME);
|
||||
$(config.target).attr('id', id);
|
||||
}
|
||||
config.target = '#' + id;
|
||||
}
|
||||
|
||||
_Util['default'].typeCheckConfig(NAME, config, DefaultType);
|
||||
|
||||
return config;
|
||||
}
|
||||
}, {
|
||||
key: '_getScrollTop',
|
||||
value: function _getScrollTop() {
|
||||
return this._scrollElement === window ? this._scrollElement.scrollY : this._scrollElement.scrollTop;
|
||||
}
|
||||
}, {
|
||||
key: '_getScrollHeight',
|
||||
value: function _getScrollHeight() {
|
||||
return this._scrollElement.scrollHeight || Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
|
||||
}
|
||||
}, {
|
||||
key: '_process',
|
||||
value: function _process() {
|
||||
var scrollTop = this._getScrollTop() + this._config.offset;
|
||||
var scrollHeight = this._getScrollHeight();
|
||||
var maxScroll = this._config.offset + scrollHeight - this._scrollElement.offsetHeight;
|
||||
|
||||
if (this._scrollHeight !== scrollHeight) {
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
if (scrollTop >= maxScroll) {
|
||||
var target = this._targets[this._targets.length - 1];
|
||||
|
||||
if (this._activeTarget !== target) {
|
||||
this._activate(target);
|
||||
}
|
||||
}
|
||||
|
||||
if (this._activeTarget && scrollTop < this._offsets[0]) {
|
||||
this._activeTarget = null;
|
||||
this._clear();
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = this._offsets.length; i--;) {
|
||||
var isActiveTarget = this._activeTarget !== this._targets[i] && scrollTop >= this._offsets[i] && (this._offsets[i + 1] === undefined || scrollTop < this._offsets[i + 1]);
|
||||
|
||||
if (isActiveTarget) {
|
||||
this._activate(this._targets[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_activate',
|
||||
value: function _activate(target) {
|
||||
this._activeTarget = target;
|
||||
|
||||
this._clear();
|
||||
|
||||
var queries = this._selector.split(',');
|
||||
queries = queries.map(function (selector) {
|
||||
return selector + '[data-target="' + target + '"],' + (selector + '[href="' + target + '"]');
|
||||
});
|
||||
|
||||
var $link = $(queries.join(','));
|
||||
|
||||
if ($link.hasClass(ClassName.DROPDOWN_ITEM)) {
|
||||
$link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
|
||||
$link.addClass(ClassName.ACTIVE);
|
||||
} else {
|
||||
// todo (fat) this is kinda sus...
|
||||
// recursively add actives to tested nav-links
|
||||
$link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE);
|
||||
}
|
||||
|
||||
$(this._scrollElement).trigger(Event.ACTIVATE, {
|
||||
relatedTarget: target
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: '_clear',
|
||||
value: function _clear() {
|
||||
$(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE);
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY);
|
||||
var _config = typeof config === 'object' && config || null;
|
||||
|
||||
if (!data) {
|
||||
data = new ScrollSpy(this, _config);
|
||||
$(this).data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined) {
|
||||
throw new Error('No method named "' + config + '"');
|
||||
}
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'VERSION',
|
||||
get: function get() {
|
||||
return VERSION;
|
||||
}
|
||||
}, {
|
||||
key: 'Default',
|
||||
get: function get() {
|
||||
return Default;
|
||||
}
|
||||
}]);
|
||||
|
||||
return ScrollSpy;
|
||||
})();
|
||||
|
||||
$(window).on(Event.LOAD_DATA_API, function () {
|
||||
var scrollSpys = $.makeArray($(Selector.DATA_SPY));
|
||||
|
||||
for (var i = scrollSpys.length; i--;) {
|
||||
var $spy = $(scrollSpys[i]);
|
||||
ScrollSpy._jQueryInterface.call($spy, $spy.data());
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = ScrollSpy._jQueryInterface;
|
||||
$.fn[NAME].Constructor = ScrollSpy;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return ScrollSpy._jQueryInterface;
|
||||
};
|
||||
|
||||
return ScrollSpy;
|
||||
})(jQuery);
|
||||
|
||||
module.exports = ScrollSpy;
|
||||
});
|
||||
282
dist/js/umd/tab.js
vendored
|
|
@ -1,282 +0,0 @@
|
|||
(function (global, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['exports', 'module', './util'], factory);
|
||||
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
|
||||
factory(exports, module, require('./util'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod.exports, mod, global.Util);
|
||||
global.tab = mod.exports;
|
||||
}
|
||||
})(this, function (exports, module, _util) {
|
||||
'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; }; })();
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
var _Util = _interopRequireDefault(_util);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.2): tab.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Tab = (function ($) {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'tab';
|
||||
var VERSION = '4.0.0-alpha.2';
|
||||
var DATA_KEY = 'bs.tab';
|
||||
var EVENT_KEY = '.' + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var TRANSITION_DURATION = 150;
|
||||
|
||||
var Event = {
|
||||
HIDE: 'hide' + EVENT_KEY,
|
||||
HIDDEN: 'hidden' + EVENT_KEY,
|
||||
SHOW: 'show' + EVENT_KEY,
|
||||
SHOWN: 'shown' + EVENT_KEY,
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY
|
||||
};
|
||||
|
||||
var ClassName = {
|
||||
DROPDOWN_MENU: 'dropdown-menu',
|
||||
ACTIVE: 'active',
|
||||
FADE: 'fade',
|
||||
IN: 'in'
|
||||
};
|
||||
|
||||
var Selector = {
|
||||
A: 'a',
|
||||
LI: 'li',
|
||||
DROPDOWN: '.dropdown',
|
||||
UL: 'ul:not(.dropdown-menu)',
|
||||
FADE_CHILD: '> .nav-item .fade, > .fade',
|
||||
ACTIVE: '.active',
|
||||
ACTIVE_CHILD: '> .nav-item > .active, > .active',
|
||||
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"]',
|
||||
DROPDOWN_TOGGLE: '.dropdown-toggle',
|
||||
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Tab = (function () {
|
||||
function Tab(element) {
|
||||
_classCallCheck(this, Tab);
|
||||
|
||||
this._element = element;
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// getters
|
||||
|
||||
_createClass(Tab, [{
|
||||
key: 'show',
|
||||
|
||||
// public
|
||||
|
||||
value: function show() {
|
||||
var _this = this;
|
||||
|
||||
if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && $(this._element).hasClass(ClassName.ACTIVE)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var target = undefined;
|
||||
var previous = undefined;
|
||||
var ulElement = $(this._element).closest(Selector.UL)[0];
|
||||
var selector = _Util['default'].getSelectorFromElement(this._element);
|
||||
|
||||
if (ulElement) {
|
||||
previous = $.makeArray($(ulElement).find(Selector.ACTIVE));
|
||||
previous = previous[previous.length - 1];
|
||||
}
|
||||
|
||||
var hideEvent = $.Event(Event.HIDE, {
|
||||
relatedTarget: this._element
|
||||
});
|
||||
|
||||
var showEvent = $.Event(Event.SHOW, {
|
||||
relatedTarget: previous
|
||||
});
|
||||
|
||||
if (previous) {
|
||||
$(previous).trigger(hideEvent);
|
||||
}
|
||||
|
||||
$(this._element).trigger(showEvent);
|
||||
|
||||
if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (selector) {
|
||||
target = $(selector)[0];
|
||||
}
|
||||
|
||||
this._activate(this._element, ulElement);
|
||||
|
||||
var complete = function complete() {
|
||||
var hiddenEvent = $.Event(Event.HIDDEN, {
|
||||
relatedTarget: _this._element
|
||||
});
|
||||
|
||||
var shownEvent = $.Event(Event.SHOWN, {
|
||||
relatedTarget: previous
|
||||
});
|
||||
|
||||
$(previous).trigger(hiddenEvent);
|
||||
$(_this._element).trigger(shownEvent);
|
||||
};
|
||||
|
||||
if (target) {
|
||||
this._activate(target, target.parentNode, complete);
|
||||
} else {
|
||||
complete();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'dispose',
|
||||
value: function dispose() {
|
||||
$.removeClass(this._element, DATA_KEY);
|
||||
this._element = null;
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
}, {
|
||||
key: '_activate',
|
||||
value: function _activate(element, container, callback) {
|
||||
var active = $(container).find(Selector.ACTIVE_CHILD)[0];
|
||||
var isTransitioning = callback && _Util['default'].supportsTransitionEnd() && (active && $(active).hasClass(ClassName.FADE) || Boolean($(container).find(Selector.FADE_CHILD)[0]));
|
||||
|
||||
var complete = $.proxy(this._transitionComplete, this, element, active, isTransitioning, callback);
|
||||
|
||||
if (active && isTransitioning) {
|
||||
$(active).one(_Util['default'].TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
|
||||
} else {
|
||||
complete();
|
||||
}
|
||||
|
||||
if (active) {
|
||||
$(active).removeClass(ClassName.IN);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_transitionComplete',
|
||||
value: function _transitionComplete(element, active, isTransitioning, callback) {
|
||||
if (active) {
|
||||
$(active).removeClass(ClassName.ACTIVE);
|
||||
|
||||
var dropdownChild = $(active).find(Selector.DROPDOWN_ACTIVE_CHILD)[0];
|
||||
|
||||
if (dropdownChild) {
|
||||
$(dropdownChild).removeClass(ClassName.ACTIVE);
|
||||
}
|
||||
|
||||
active.setAttribute('aria-expanded', false);
|
||||
}
|
||||
|
||||
$(element).addClass(ClassName.ACTIVE);
|
||||
element.setAttribute('aria-expanded', true);
|
||||
|
||||
if (isTransitioning) {
|
||||
_Util['default'].reflow(element);
|
||||
$(element).addClass(ClassName.IN);
|
||||
} else {
|
||||
$(element).removeClass(ClassName.FADE);
|
||||
}
|
||||
|
||||
if (element.parentNode && $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
|
||||
|
||||
var dropdownElement = $(element).closest(Selector.DROPDOWN)[0];
|
||||
if (dropdownElement) {
|
||||
$(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
|
||||
}
|
||||
|
||||
element.setAttribute('aria-expanded', true);
|
||||
}
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data(DATA_KEY);
|
||||
|
||||
if (!data) {
|
||||
data = data = new Tab(this);
|
||||
$this.data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined) {
|
||||
throw new Error('No method named "' + config + '"');
|
||||
}
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'VERSION',
|
||||
get: function get() {
|
||||
return VERSION;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Tab;
|
||||
})();
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
event.preventDefault();
|
||||
Tab._jQueryInterface.call($(this), 'show');
|
||||
});
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Tab._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Tab;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Tab._jQueryInterface;
|
||||
};
|
||||
|
||||
return Tab;
|
||||
})(jQuery);
|
||||
|
||||
module.exports = Tab;
|
||||
});
|
||||
638
dist/js/umd/tooltip.js
vendored
|
|
@ -1,638 +0,0 @@
|
|||
(function (global, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['exports', 'module', './util'], factory);
|
||||
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
|
||||
factory(exports, module, require('./util'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod.exports, mod, global.Util);
|
||||
global.tooltip = mod.exports;
|
||||
}
|
||||
})(this, function (exports, module, _util) {
|
||||
/* global Tether */
|
||||
|
||||
'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; }; })();
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
var _Util = _interopRequireDefault(_util);
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.2): tooltip.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
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
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'tooltip';
|
||||
var VERSION = '4.0.0-alpha.2';
|
||||
var DATA_KEY = 'bs.tooltip';
|
||||
var EVENT_KEY = '.' + DATA_KEY;
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var TRANSITION_DURATION = 150;
|
||||
var CLASS_PREFIX = 'bs-tether';
|
||||
|
||||
var Default = {
|
||||
animation: true,
|
||||
template: '<div class="tooltip" role="tooltip">' + '<div class="tooltip-arrow"></div>' + '<div class="tooltip-inner"></div></div>',
|
||||
trigger: 'hover focus',
|
||||
title: '',
|
||||
delay: 0,
|
||||
html: false,
|
||||
selector: false,
|
||||
placement: 'top',
|
||||
offset: '0 0',
|
||||
constraints: []
|
||||
};
|
||||
|
||||
var DefaultType = {
|
||||
animation: 'boolean',
|
||||
template: 'string',
|
||||
title: '(string|element|function)',
|
||||
trigger: 'string',
|
||||
delay: '(number|object)',
|
||||
html: 'boolean',
|
||||
selector: '(string|boolean)',
|
||||
placement: '(string|function)',
|
||||
offset: 'string',
|
||||
constraints: 'array'
|
||||
};
|
||||
|
||||
var AttachmentMap = {
|
||||
TOP: 'bottom center',
|
||||
RIGHT: 'middle left',
|
||||
BOTTOM: 'top center',
|
||||
LEFT: 'middle right'
|
||||
};
|
||||
|
||||
var HoverState = {
|
||||
IN: 'in',
|
||||
OUT: 'out'
|
||||
};
|
||||
|
||||
var Event = {
|
||||
HIDE: 'hide' + EVENT_KEY,
|
||||
HIDDEN: 'hidden' + EVENT_KEY,
|
||||
SHOW: 'show' + EVENT_KEY,
|
||||
SHOWN: 'shown' + EVENT_KEY,
|
||||
INSERTED: 'inserted' + EVENT_KEY,
|
||||
CLICK: 'click' + EVENT_KEY,
|
||||
FOCUSIN: 'focusin' + EVENT_KEY,
|
||||
FOCUSOUT: 'focusout' + EVENT_KEY,
|
||||
MOUSEENTER: 'mouseenter' + EVENT_KEY,
|
||||
MOUSELEAVE: 'mouseleave' + EVENT_KEY
|
||||
};
|
||||
|
||||
var ClassName = {
|
||||
FADE: 'fade',
|
||||
IN: 'in'
|
||||
};
|
||||
|
||||
var Selector = {
|
||||
TOOLTIP: '.tooltip',
|
||||
TOOLTIP_INNER: '.tooltip-inner'
|
||||
};
|
||||
|
||||
var TetherClass = {
|
||||
element: false,
|
||||
enabled: false
|
||||
};
|
||||
|
||||
var Trigger = {
|
||||
HOVER: 'hover',
|
||||
FOCUS: 'focus',
|
||||
CLICK: 'click',
|
||||
MANUAL: 'manual'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Tooltip = (function () {
|
||||
function Tooltip(element, config) {
|
||||
_classCallCheck(this, Tooltip);
|
||||
|
||||
// private
|
||||
this._isEnabled = true;
|
||||
this._timeout = 0;
|
||||
this._hoverState = '';
|
||||
this._activeTrigger = {};
|
||||
this._tether = null;
|
||||
|
||||
// protected
|
||||
this.element = element;
|
||||
this.config = this._getConfig(config);
|
||||
this.tip = null;
|
||||
|
||||
this._setListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// getters
|
||||
|
||||
_createClass(Tooltip, [{
|
||||
key: 'enable',
|
||||
|
||||
// public
|
||||
|
||||
value: function enable() {
|
||||
this._isEnabled = true;
|
||||
}
|
||||
}, {
|
||||
key: 'disable',
|
||||
value: function disable() {
|
||||
this._isEnabled = false;
|
||||
}
|
||||
}, {
|
||||
key: 'toggleEnabled',
|
||||
value: function toggleEnabled() {
|
||||
this._isEnabled = !this._isEnabled;
|
||||
}
|
||||
}, {
|
||||
key: 'toggle',
|
||||
value: function toggle(event) {
|
||||
if (event) {
|
||||
var dataKey = this.constructor.DATA_KEY;
|
||||
var context = $(event.currentTarget).data(dataKey);
|
||||
|
||||
if (!context) {
|
||||
context = new this.constructor(event.currentTarget, this._getDelegateConfig());
|
||||
$(event.currentTarget).data(dataKey, context);
|
||||
}
|
||||
|
||||
context._activeTrigger.click = !context._activeTrigger.click;
|
||||
|
||||
if (context._isWithActiveTrigger()) {
|
||||
context._enter(null, context);
|
||||
} else {
|
||||
context._leave(null, context);
|
||||
}
|
||||
} else {
|
||||
|
||||
if ($(this.getTipElement()).hasClass(ClassName.IN)) {
|
||||
this._leave(null, this);
|
||||
return;
|
||||
}
|
||||
|
||||
this._enter(null, this);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'dispose',
|
||||
value: function dispose() {
|
||||
clearTimeout(this._timeout);
|
||||
|
||||
this.cleanupTether();
|
||||
|
||||
$.removeData(this.element, this.constructor.DATA_KEY);
|
||||
|
||||
$(this.element).off(this.constructor.EVENT_KEY);
|
||||
|
||||
if (this.tip) {
|
||||
$(this.tip).remove();
|
||||
}
|
||||
|
||||
this._isEnabled = null;
|
||||
this._timeout = null;
|
||||
this._hoverState = null;
|
||||
this._activeTrigger = null;
|
||||
this._tether = null;
|
||||
|
||||
this.element = null;
|
||||
this.config = null;
|
||||
this.tip = null;
|
||||
}
|
||||
}, {
|
||||
key: 'show',
|
||||
value: function show() {
|
||||
var _this = this;
|
||||
|
||||
var showEvent = $.Event(this.constructor.Event.SHOW);
|
||||
|
||||
if (this.isWithContent() && this._isEnabled) {
|
||||
$(this.element).trigger(showEvent);
|
||||
|
||||
var isInTheDom = $.contains(this.element.ownerDocument.documentElement, this.element);
|
||||
|
||||
if (showEvent.isDefaultPrevented() || !isInTheDom) {
|
||||
return;
|
||||
}
|
||||
|
||||
var tip = this.getTipElement();
|
||||
var tipId = _Util['default'].getUID(this.constructor.NAME);
|
||||
|
||||
tip.setAttribute('id', tipId);
|
||||
this.element.setAttribute('aria-describedby', tipId);
|
||||
|
||||
this.setContent();
|
||||
|
||||
if (this.config.animation) {
|
||||
$(tip).addClass(ClassName.FADE);
|
||||
}
|
||||
|
||||
var placement = typeof this.config.placement === 'function' ? this.config.placement.call(this, tip, this.element) : this.config.placement;
|
||||
|
||||
var attachment = this._getAttachment(placement);
|
||||
|
||||
$(tip).data(this.constructor.DATA_KEY, this).appendTo(document.body);
|
||||
|
||||
$(this.element).trigger(this.constructor.Event.INSERTED);
|
||||
|
||||
this._tether = new Tether({
|
||||
attachment: attachment,
|
||||
element: tip,
|
||||
target: this.element,
|
||||
classes: TetherClass,
|
||||
classPrefix: CLASS_PREFIX,
|
||||
offset: this.config.offset,
|
||||
constraints: this.config.constraints,
|
||||
addTargetClasses: false
|
||||
});
|
||||
|
||||
_Util['default'].reflow(tip);
|
||||
this._tether.position();
|
||||
|
||||
$(tip).addClass(ClassName.IN);
|
||||
|
||||
var complete = function complete() {
|
||||
var prevHoverState = _this._hoverState;
|
||||
_this._hoverState = null;
|
||||
|
||||
$(_this.element).trigger(_this.constructor.Event.SHOWN);
|
||||
|
||||
if (prevHoverState === HoverState.OUT) {
|
||||
_this._leave(null, _this);
|
||||
}
|
||||
};
|
||||
|
||||
if (_Util['default'].supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
|
||||
$(this.tip).one(_Util['default'].TRANSITION_END, complete).emulateTransitionEnd(Tooltip._TRANSITION_DURATION);
|
||||
return;
|
||||
}
|
||||
|
||||
complete();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'hide',
|
||||
value: function hide(callback) {
|
||||
var _this2 = this;
|
||||
|
||||
var tip = this.getTipElement();
|
||||
var hideEvent = $.Event(this.constructor.Event.HIDE);
|
||||
var complete = function complete() {
|
||||
if (_this2._hoverState !== HoverState.IN && tip.parentNode) {
|
||||
tip.parentNode.removeChild(tip);
|
||||
}
|
||||
|
||||
_this2.element.removeAttribute('aria-describedby');
|
||||
$(_this2.element).trigger(_this2.constructor.Event.HIDDEN);
|
||||
_this2.cleanupTether();
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
$(this.element).trigger(hideEvent);
|
||||
|
||||
if (hideEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(tip).removeClass(ClassName.IN);
|
||||
|
||||
if (_Util['default'].supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
|
||||
|
||||
$(tip).one(_Util['default'].TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
|
||||
} else {
|
||||
complete();
|
||||
}
|
||||
|
||||
this._hoverState = '';
|
||||
}
|
||||
|
||||
// protected
|
||||
|
||||
}, {
|
||||
key: 'isWithContent',
|
||||
value: function isWithContent() {
|
||||
return Boolean(this.getTitle());
|
||||
}
|
||||
}, {
|
||||
key: 'getTipElement',
|
||||
value: function getTipElement() {
|
||||
return this.tip = this.tip || $(this.config.template)[0];
|
||||
}
|
||||
}, {
|
||||
key: 'setContent',
|
||||
value: function setContent() {
|
||||
var $tip = $(this.getTipElement());
|
||||
|
||||
this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle());
|
||||
|
||||
$tip.removeClass(ClassName.FADE).removeClass(ClassName.IN);
|
||||
|
||||
this.cleanupTether();
|
||||
}
|
||||
}, {
|
||||
key: 'setElementContent',
|
||||
value: function setElementContent($element, content) {
|
||||
var html = this.config.html;
|
||||
if (typeof content === 'object' && (content.nodeType || content.jquery)) {
|
||||
// content is a DOM node or a jQuery
|
||||
if (html) {
|
||||
if (!$(content).parent().is($element)) {
|
||||
$element.empty().append(content);
|
||||
}
|
||||
} else {
|
||||
$element.text($(content).text());
|
||||
}
|
||||
} else {
|
||||
$element[html ? 'html' : 'text'](content);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'getTitle',
|
||||
value: function getTitle() {
|
||||
var title = this.element.getAttribute('data-original-title');
|
||||
|
||||
if (!title) {
|
||||
title = typeof this.config.title === 'function' ? this.config.title.call(this.element) : this.config.title;
|
||||
}
|
||||
|
||||
return title;
|
||||
}
|
||||
}, {
|
||||
key: 'cleanupTether',
|
||||
value: function cleanupTether() {
|
||||
if (this._tether) {
|
||||
this._tether.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
}, {
|
||||
key: '_getAttachment',
|
||||
value: function _getAttachment(placement) {
|
||||
return AttachmentMap[placement.toUpperCase()];
|
||||
}
|
||||
}, {
|
||||
key: '_setListeners',
|
||||
value: function _setListeners() {
|
||||
var _this3 = this;
|
||||
|
||||
var triggers = this.config.trigger.split(' ');
|
||||
|
||||
triggers.forEach(function (trigger) {
|
||||
if (trigger === 'click') {
|
||||
$(_this3.element).on(_this3.constructor.Event.CLICK, _this3.config.selector, $.proxy(_this3.toggle, _this3));
|
||||
} else if (trigger !== Trigger.MANUAL) {
|
||||
var eventIn = trigger === Trigger.HOVER ? _this3.constructor.Event.MOUSEENTER : _this3.constructor.Event.FOCUSIN;
|
||||
var eventOut = trigger === Trigger.HOVER ? _this3.constructor.Event.MOUSELEAVE : _this3.constructor.Event.FOCUSOUT;
|
||||
|
||||
$(_this3.element).on(eventIn, _this3.config.selector, $.proxy(_this3._enter, _this3)).on(eventOut, _this3.config.selector, $.proxy(_this3._leave, _this3));
|
||||
}
|
||||
});
|
||||
|
||||
if (this.config.selector) {
|
||||
this.config = $.extend({}, this.config, {
|
||||
trigger: 'manual',
|
||||
selector: ''
|
||||
});
|
||||
} else {
|
||||
this._fixTitle();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_fixTitle',
|
||||
value: function _fixTitle() {
|
||||
var titleType = typeof this.element.getAttribute('data-original-title');
|
||||
if (this.element.getAttribute('title') || titleType !== 'string') {
|
||||
this.element.setAttribute('data-original-title', this.element.getAttribute('title') || '');
|
||||
this.element.setAttribute('title', '');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_enter',
|
||||
value: function _enter(event, context) {
|
||||
var dataKey = this.constructor.DATA_KEY;
|
||||
|
||||
context = context || $(event.currentTarget).data(dataKey);
|
||||
|
||||
if (!context) {
|
||||
context = new this.constructor(event.currentTarget, this._getDelegateConfig());
|
||||
$(event.currentTarget).data(dataKey, context);
|
||||
}
|
||||
|
||||
if (event) {
|
||||
context._activeTrigger[event.type === 'focusin' ? Trigger.FOCUS : Trigger.HOVER] = true;
|
||||
}
|
||||
|
||||
if ($(context.getTipElement()).hasClass(ClassName.IN) || context._hoverState === HoverState.IN) {
|
||||
context._hoverState = HoverState.IN;
|
||||
return;
|
||||
}
|
||||
|
||||
clearTimeout(context._timeout);
|
||||
|
||||
context._hoverState = HoverState.IN;
|
||||
|
||||
if (!context.config.delay || !context.config.delay.show) {
|
||||
context.show();
|
||||
return;
|
||||
}
|
||||
|
||||
context._timeout = setTimeout(function () {
|
||||
if (context._hoverState === HoverState.IN) {
|
||||
context.show();
|
||||
}
|
||||
}, context.config.delay.show);
|
||||
}
|
||||
}, {
|
||||
key: '_leave',
|
||||
value: function _leave(event, context) {
|
||||
var dataKey = this.constructor.DATA_KEY;
|
||||
|
||||
context = context || $(event.currentTarget).data(dataKey);
|
||||
|
||||
if (!context) {
|
||||
context = new this.constructor(event.currentTarget, this._getDelegateConfig());
|
||||
$(event.currentTarget).data(dataKey, context);
|
||||
}
|
||||
|
||||
if (event) {
|
||||
context._activeTrigger[event.type === 'focusout' ? Trigger.FOCUS : Trigger.HOVER] = false;
|
||||
}
|
||||
|
||||
if (context._isWithActiveTrigger()) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearTimeout(context._timeout);
|
||||
|
||||
context._hoverState = HoverState.OUT;
|
||||
|
||||
if (!context.config.delay || !context.config.delay.hide) {
|
||||
context.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
context._timeout = setTimeout(function () {
|
||||
if (context._hoverState === HoverState.OUT) {
|
||||
context.hide();
|
||||
}
|
||||
}, context.config.delay.hide);
|
||||
}
|
||||
}, {
|
||||
key: '_isWithActiveTrigger',
|
||||
value: function _isWithActiveTrigger() {
|
||||
for (var trigger in this._activeTrigger) {
|
||||
if (this._activeTrigger[trigger]) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}, {
|
||||
key: '_getConfig',
|
||||
value: function _getConfig(config) {
|
||||
config = $.extend({}, this.constructor.Default, $(this.element).data(), config);
|
||||
|
||||
if (config.delay && typeof config.delay === 'number') {
|
||||
config.delay = {
|
||||
show: config.delay,
|
||||
hide: config.delay
|
||||
};
|
||||
}
|
||||
|
||||
_Util['default'].typeCheckConfig(NAME, config, this.constructor.DefaultType);
|
||||
|
||||
return config;
|
||||
}
|
||||
}, {
|
||||
key: '_getDelegateConfig',
|
||||
value: function _getDelegateConfig() {
|
||||
var config = {};
|
||||
|
||||
if (this.config) {
|
||||
for (var key in this.config) {
|
||||
if (this.constructor.Default[key] !== this.config[key]) {
|
||||
config[key] = this.config[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY);
|
||||
var _config = typeof config === 'object' ? config : null;
|
||||
|
||||
if (!data && /destroy|hide/.test(config)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Tooltip(this, _config);
|
||||
$(this).data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined) {
|
||||
throw new Error('No method named "' + config + '"');
|
||||
}
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'VERSION',
|
||||
get: function get() {
|
||||
return VERSION;
|
||||
}
|
||||
}, {
|
||||
key: 'Default',
|
||||
get: function get() {
|
||||
return Default;
|
||||
}
|
||||
}, {
|
||||
key: 'NAME',
|
||||
get: function get() {
|
||||
return NAME;
|
||||
}
|
||||
}, {
|
||||
key: 'DATA_KEY',
|
||||
get: function get() {
|
||||
return DATA_KEY;
|
||||
}
|
||||
}, {
|
||||
key: 'Event',
|
||||
get: function get() {
|
||||
return Event;
|
||||
}
|
||||
}, {
|
||||
key: 'EVENT_KEY',
|
||||
get: function get() {
|
||||
return EVENT_KEY;
|
||||
}
|
||||
}, {
|
||||
key: 'DefaultType',
|
||||
get: function get() {
|
||||
return DefaultType;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Tooltip;
|
||||
})();
|
||||
|
||||
$.fn[NAME] = Tooltip._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Tooltip;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Tooltip._jQueryInterface;
|
||||
};
|
||||
|
||||
return Tooltip;
|
||||
})(jQuery);
|
||||
|
||||
module.exports = Tooltip;
|
||||
});
|
||||
174
dist/js/umd/util.js
vendored
|
|
@ -1,174 +0,0 @@
|
|||
(function (global, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['exports', 'module'], factory);
|
||||
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
|
||||
factory(exports, module);
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod.exports, mod);
|
||||
global.util = mod.exports;
|
||||
}
|
||||
})(this, function (exports, module) {
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.2): util.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var Util = (function ($) {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Private TransitionEnd Helpers
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var transition = false;
|
||||
|
||||
var TransitionEndEvent = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
|
||||
// shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
function toType(obj) {
|
||||
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
|
||||
}
|
||||
|
||||
function isElement(obj) {
|
||||
return (obj[0] || obj).nodeType;
|
||||
}
|
||||
|
||||
function getSpecialTransitionEndEvent() {
|
||||
return {
|
||||
bindType: transition.end,
|
||||
delegateType: transition.end,
|
||||
handle: function handle(event) {
|
||||
if ($(event.target).is(this)) {
|
||||
return event.handleObj.handler.apply(this, arguments);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function transitionEndTest() {
|
||||
if (window.QUnit) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var el = document.createElement('bootstrap');
|
||||
|
||||
for (var _name in TransitionEndEvent) {
|
||||
if (el.style[_name] !== undefined) {
|
||||
return { end: TransitionEndEvent[_name] };
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function transitionEndEmulator(duration) {
|
||||
var _this = this;
|
||||
|
||||
var called = false;
|
||||
|
||||
$(this).one(Util.TRANSITION_END, function () {
|
||||
called = true;
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
if (!called) {
|
||||
Util.triggerTransitionEnd(_this);
|
||||
}
|
||||
}, duration);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
function setTransitionEndSupport() {
|
||||
transition = transitionEndTest();
|
||||
|
||||
$.fn.emulateTransitionEnd = transitionEndEmulator;
|
||||
|
||||
if (Util.supportsTransitionEnd()) {
|
||||
$.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Public Util Api
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Util = {
|
||||
|
||||
TRANSITION_END: 'bsTransitionEnd',
|
||||
|
||||
getUID: function getUID(prefix) {
|
||||
do {
|
||||
/* eslint-disable no-bitwise */
|
||||
prefix += ~ ~(Math.random() * 1000000); // "~~" acts like a faster Math.floor() here
|
||||
/* eslint-enable no-bitwise */
|
||||
} while (document.getElementById(prefix));
|
||||
return prefix;
|
||||
},
|
||||
|
||||
getSelectorFromElement: function getSelectorFromElement(element) {
|
||||
var selector = element.getAttribute('data-target');
|
||||
|
||||
if (!selector) {
|
||||
selector = element.getAttribute('href') || '';
|
||||
selector = /^#[a-z]/i.test(selector) ? selector : null;
|
||||
}
|
||||
|
||||
return selector;
|
||||
},
|
||||
|
||||
reflow: function reflow(element) {
|
||||
new Function('bs', 'return bs')(element.offsetHeight);
|
||||
},
|
||||
|
||||
triggerTransitionEnd: function triggerTransitionEnd(element) {
|
||||
$(element).trigger(transition.end);
|
||||
},
|
||||
|
||||
supportsTransitionEnd: function supportsTransitionEnd() {
|
||||
return Boolean(transition);
|
||||
},
|
||||
|
||||
typeCheckConfig: function typeCheckConfig(componentName, config, configTypes) {
|
||||
for (var property in configTypes) {
|
||||
if (configTypes.hasOwnProperty(property)) {
|
||||
var expectedTypes = configTypes[property];
|
||||
var value = config[property];
|
||||
var valueType = undefined;
|
||||
|
||||
if (value && isElement(value)) {
|
||||
valueType = 'element';
|
||||
} else {
|
||||
valueType = toType(value);
|
||||
}
|
||||
|
||||
if (!new RegExp(expectedTypes).test(valueType)) {
|
||||
throw new Error(componentName.toUpperCase() + ': ' + ('Option "' + property + '" provided type "' + valueType + '" ') + ('but expected type "' + expectedTypes + '".'));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
setTransitionEndSupport();
|
||||
|
||||
return Util;
|
||||
})(jQuery);
|
||||
|
||||
module.exports = Util;
|
||||
});
|
||||
15
docs/.htmlhintrc
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"attr-lowercase": true,
|
||||
"attr-no-duplication": true,
|
||||
"alt-require": true,
|
||||
"attr-unsafe-chars": true,
|
||||
"attr-value-double-quotes": true,
|
||||
"doctype-first": true,
|
||||
"doctype-html5": true,
|
||||
"id-unique": true,
|
||||
"spec-char-escape": true,
|
||||
"src-not-empty": true,
|
||||
"tag-pair": true,
|
||||
"tagname-lowercase": true,
|
||||
"title-require": true
|
||||
}
|
||||
29
docs/_data/breakpoints.yml
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
- breakpoint: xs
|
||||
abbr: ""
|
||||
name: Extra small
|
||||
min-width: 0px
|
||||
container: ""
|
||||
|
||||
- breakpoint: sm
|
||||
abbr: -sm
|
||||
name: Small
|
||||
min-width: 576px
|
||||
container: 540px
|
||||
|
||||
- breakpoint: md
|
||||
abbr: -md
|
||||
name: Medium
|
||||
min-width: 768px
|
||||
container: 720px
|
||||
|
||||
- breakpoint: lg
|
||||
abbr: -lg
|
||||
name: Large
|
||||
min-width: 992px
|
||||
container: 960px
|
||||
|
||||
- breakpoint: xl
|
||||
abbr: -xl
|
||||
name: Extra large
|
||||
min-width: 1200px
|
||||
container: 1140px
|
||||
|
|
@ -1,6 +1,16 @@
|
|||
-
|
||||
browser: >
|
||||
Microsoft Edge
|
||||
Edge
|
||||
summary: >
|
||||
Visual artifacts in scrollable modal dialogs
|
||||
upstream_bug: >
|
||||
Edge#9011176
|
||||
origin: >
|
||||
Bootstrap#20755
|
||||
|
||||
-
|
||||
browser: >
|
||||
Edge
|
||||
summary: >
|
||||
Native browser tooltip for `title` shows on first keyboard focus (in addition to custom tooltip component)
|
||||
upstream_bug: >
|
||||
|
|
@ -10,7 +20,7 @@
|
|||
|
||||
-
|
||||
browser: >
|
||||
Microsoft Edge
|
||||
Edge
|
||||
summary: >
|
||||
Hovered element still remains in `:hover` state after scrolling away.
|
||||
upstream_bug: >
|
||||
|
|
@ -20,7 +30,7 @@
|
|||
|
||||
-
|
||||
browser: >
|
||||
Microsoft Edge
|
||||
Edge
|
||||
summary: >
|
||||
When hovering over a `<select>` menu item, the cursor for the element underneath the menu is displayed.
|
||||
upstream_bug: >
|
||||
|
|
@ -30,7 +40,7 @@
|
|||
|
||||
-
|
||||
browser: >
|
||||
Microsoft Edge
|
||||
Edge
|
||||
summary: >
|
||||
CSS `border-radius` sometimes causes lines of bleed-through of the `background-color` of the parent element.
|
||||
upstream_bug: >
|
||||
|
|
@ -40,7 +50,7 @@
|
|||
|
||||
-
|
||||
browser: >
|
||||
Microsoft Edge
|
||||
Edge
|
||||
summary: >
|
||||
`background` of `<tr>` is only applied to first child cell instead of all cells in the row
|
||||
upstream_bug: >
|
||||
|
|
@ -50,7 +60,7 @@
|
|||
|
||||
-
|
||||
browser: >
|
||||
Microsoft Edge
|
||||
Edge
|
||||
summary: >
|
||||
`@-ms-viewport{width: device-width;}` has side-effect of making scrollbars auto-hide
|
||||
upstream_bug: >
|
||||
|
|
@ -60,7 +70,7 @@
|
|||
|
||||
-
|
||||
browser: >
|
||||
Microsoft Edge
|
||||
Edge
|
||||
summary: >
|
||||
Background color from lower layer bleeds through transparent border in some cases
|
||||
upstream_bug: >
|
||||
|
|
@ -68,6 +78,26 @@
|
|||
origin: >
|
||||
Bootstrap#18228
|
||||
|
||||
-
|
||||
browser: >
|
||||
Edge
|
||||
summary: >
|
||||
Hovering over descendant SVG element fires `mouseleave` event at ancestor
|
||||
upstream_bug: >
|
||||
Edge#7787318
|
||||
origin: >
|
||||
Bootstrap#19670
|
||||
|
||||
-
|
||||
browser: >
|
||||
Edge
|
||||
summary: >
|
||||
Active `position: fixed;` `<button>` flickers when scrolling
|
||||
upstream_bug: >
|
||||
Edge#8770398
|
||||
origin: >
|
||||
Bootstrap#20507
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
|
|
@ -102,11 +132,41 @@
|
|||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
Fire `transitioncancel` event when a transition is canceled
|
||||
Wide floated table doesn't wrap onto new line
|
||||
upstream_bug: >
|
||||
Mozilla#1264125
|
||||
Mozilla#1277782
|
||||
origin: >
|
||||
Mozilla#1182856
|
||||
Bootstrap#19839
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
Mouse sometimes not within element for purposes of `mouseenter`/`mouseleave` when it's within SVG elements
|
||||
upstream_bug: >
|
||||
Mozilla#577785
|
||||
origin: >
|
||||
Bootstrap#19670
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
`position: absolute` element that's wider than its column renders differently than other browsers
|
||||
upstream_bug: >
|
||||
Mozilla#1282363
|
||||
origin: >
|
||||
Bootstrap#20161
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
Layout with floated columns breaks when printing
|
||||
upstream_bug: >
|
||||
Mozilla#1315994
|
||||
origin: >
|
||||
Bootstrap#21092
|
||||
|
||||
-
|
||||
browser: >
|
||||
|
|
@ -148,16 +208,6 @@
|
|||
origin: >
|
||||
Offshoot of Bootstrap#8350 & Chromium#337668
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome (OS X)
|
||||
summary: >
|
||||
Caps Lock indicator not shown in `<input type="password">` with `display: block`
|
||||
upstream_bug: >
|
||||
Chromium#460200
|
||||
origin: >
|
||||
Bootstrap#15832
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
|
|
@ -182,21 +232,31 @@
|
|||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
`width: 1%` on nested table cell causes its table to hog horizontal space.
|
||||
`table-cell` borders not overlapping despite `margin-right: -1px`
|
||||
upstream_bug: >
|
||||
Chromium#427994
|
||||
Chromium#568691
|
||||
origin: >
|
||||
Bootstrap#16372
|
||||
Bootstrap#17438, Bootstrap#14237
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
`table-cell` borders not overlapping despite `margin-right: -1px`
|
||||
Clicking scrollbar in `<select multiple>` with overflowed options will select nearby `<option>`
|
||||
upstream_bug: >
|
||||
Chromium#534750
|
||||
Chromium#597642
|
||||
origin: >
|
||||
Bootstrap#17438, Bootstrap#14237
|
||||
Bootstrap#19810
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
Don't make `:hover` sticky on touch-friendly webpages
|
||||
upstream_bug: >
|
||||
Chromium#370155
|
||||
origin: >
|
||||
Bootstrap#12832
|
||||
|
||||
-
|
||||
browser: >
|
||||
|
|
@ -210,13 +270,13 @@
|
|||
|
||||
-
|
||||
browser: >
|
||||
Safari
|
||||
Chrome (Linux)
|
||||
summary: >
|
||||
`width: 1%` on nested table cell causes its table to hog horizontal space.
|
||||
`<select>`'s pop-up menu is blank on some systems.
|
||||
upstream_bug: >
|
||||
WebKit#144696, Safari#20839572
|
||||
Chromium#510079
|
||||
origin: >
|
||||
Bootstrap#16372
|
||||
Bootstrap#21120
|
||||
|
||||
-
|
||||
browser: >
|
||||
|
|
@ -228,6 +288,16 @@
|
|||
origin: >
|
||||
Bootstrap#17403
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari
|
||||
summary: >
|
||||
Link to container with id and tabindex results in container being ignored by VoiceOver (affects skip links)
|
||||
upstream_bug: >
|
||||
WebKit#163658
|
||||
origin: >
|
||||
Bootstrap#20732
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (OS X)
|
||||
|
|
@ -260,16 +330,6 @@
|
|||
origin: >
|
||||
Bootstrap#14868
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iPad)
|
||||
summary: >
|
||||
`<select>` menu on iPad causes shifting of hit-testing areas
|
||||
upstream_bug: >
|
||||
WebKit#150079, Safari#23082521
|
||||
origin: >
|
||||
Bootstrap#14975
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
|
|
@ -360,6 +420,46 @@
|
|||
origin: >
|
||||
Bootstrap#14839
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
Tapping from one `<input>` to another in an overlay can cause shaking/jiggling effect
|
||||
upstream_bug: >
|
||||
WebKit#158276
|
||||
origin: >
|
||||
Bootstrap#19927
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
Modal with `-webkit-overflow-scrolling: touch` doesn't become scrollable after added text makes it taller
|
||||
upstream_bug: >
|
||||
WebKit#158342
|
||||
origin: >
|
||||
Bootstrap#17695
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
Don't make `:hover` sticky on touch-friendly webpages
|
||||
upstream_bug: >
|
||||
WebKit#158517
|
||||
origin: >
|
||||
Bootstrap#12832
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
Element which is `position:fixed` disappears after opening a `<select>` menu
|
||||
upstream_bug: >
|
||||
WebKit#162362
|
||||
origin: >
|
||||
Bootstrap#20759
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iPad Pro)
|
||||
|
|
|
|||
159
docs/_data/browser-features.yml
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
-
|
||||
browser: >
|
||||
Edge
|
||||
summary: >
|
||||
Focusable elements should fire focus event / receive :focus styling when they receive Narrator/accessibility focus
|
||||
upstream_bug: >
|
||||
A11yUserVoice#16717318
|
||||
origin: >
|
||||
Bootstrap#20732
|
||||
|
||||
-
|
||||
browser: >
|
||||
Edge
|
||||
summary: >
|
||||
Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
|
||||
upstream_bug: >
|
||||
UserVoice#12299532
|
||||
origin: >
|
||||
Bootstrap#19984
|
||||
|
||||
-
|
||||
browser: >
|
||||
Edge
|
||||
summary: >
|
||||
Implement [sticky positioning](http://html5please.com/#position:sticky) from CSS Positioned Layout Level 3
|
||||
upstream_bug: >
|
||||
UserVoice#6263621
|
||||
origin: >
|
||||
Bootstrap#17021
|
||||
|
||||
-
|
||||
browser: >
|
||||
Edge
|
||||
summary: >
|
||||
Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
|
||||
upstream_bug: >
|
||||
UserVoice#6508895
|
||||
origin: >
|
||||
Bootstrap#20175
|
||||
|
||||
-
|
||||
browser: >
|
||||
Edge
|
||||
summary: >
|
||||
Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
|
||||
upstream_bug: >
|
||||
UserVoice#15939898
|
||||
origin: >
|
||||
Bootstrap#20618
|
||||
|
||||
-
|
||||
browser: >
|
||||
Edge
|
||||
summary: >
|
||||
Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
|
||||
upstream_bug: >
|
||||
UserVoice#15944476
|
||||
origin: >
|
||||
Bootstrap#20143
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
|
||||
upstream_bug: >
|
||||
Mozilla#1264125
|
||||
origin: >
|
||||
Mozilla#1182856
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
|
||||
upstream_bug: >
|
||||
Mozilla#854148
|
||||
origin: >
|
||||
Bootstrap#20143
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
|
||||
upstream_bug: >
|
||||
Mozilla#840640
|
||||
origin: >
|
||||
Bootstrap#20175
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
When virtual focus is on a button or link, fire actual focus on the element, too
|
||||
upstream_bug: >
|
||||
Mozilla#1000082
|
||||
origin: >
|
||||
Bootstrap#20732
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
|
||||
upstream_bug: >
|
||||
Chromium#642487
|
||||
origin: >
|
||||
Chromium#437860
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
|
||||
upstream_bug: >
|
||||
Chromium#304163
|
||||
origin: >
|
||||
Bootstrap#20143
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
|
||||
upstream_bug: >
|
||||
Chromium#576815
|
||||
origin: >
|
||||
Bootstrap#19984
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari
|
||||
summary: >
|
||||
Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
|
||||
upstream_bug: >
|
||||
WebKit#161535
|
||||
origin: >
|
||||
Bootstrap#20618
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari
|
||||
summary: >
|
||||
Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
|
||||
upstream_bug: >
|
||||
WebKit#64861
|
||||
origin: >
|
||||
Bootstrap#19984
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari
|
||||
summary: >
|
||||
Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
|
||||
upstream_bug: >
|
||||
WebKit#84635
|
||||
origin: >
|
||||
Bootstrap#20175
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
- title: Browsers & devices
|
||||
- title: JavaScript
|
||||
- title: Options
|
||||
- title: Flexbox
|
||||
- title: Build tools
|
||||
- title: Best practices
|
||||
- title: Accessibility
|
||||
|
|
@ -15,7 +14,6 @@
|
|||
pages:
|
||||
- title: Overview
|
||||
- title: Grid
|
||||
- title: Flexbox grid
|
||||
- title: Media object
|
||||
- title: Responsive utilities
|
||||
|
||||
|
|
@ -31,6 +29,7 @@
|
|||
- title: Components
|
||||
pages:
|
||||
- title: Alerts
|
||||
- title: Badge
|
||||
- title: Breadcrumb
|
||||
- title: Buttons
|
||||
- title: Button group
|
||||
|
|
@ -49,9 +48,24 @@
|
|||
- title: Popovers
|
||||
- title: Progress
|
||||
- title: Scrollspy
|
||||
- title: Tag
|
||||
- title: Tooltips
|
||||
- title: Utilities
|
||||
|
||||
- title: Utilities
|
||||
pages:
|
||||
- title: Borders
|
||||
- title: Clearfix
|
||||
- title: Close icon
|
||||
- title: Colors
|
||||
- title: Flexbox
|
||||
- title: Display property
|
||||
- title: Image replacement
|
||||
- title: Invisible content
|
||||
- title: Responsive helpers
|
||||
- title: Screenreaders
|
||||
- title: Sizing and positioning
|
||||
- title: Spacing
|
||||
- title: Typography
|
||||
- title: Vertical align
|
||||
|
||||
# - title: Extend
|
||||
# pages:
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
- name: Lyft
|
||||
url: https://www.lyft.com
|
||||
expo_url: http://expo.getbootstrap.com/2014/10/29/lyft/
|
||||
expo_url: https://expo.getbootstrap.com/2014/10/29/lyft/
|
||||
img: lyft
|
||||
|
||||
- name: Vogue
|
||||
url: http://www.vogue.com
|
||||
expo_url: http://expo.getbootstrap.com/2014/09/30/vogue/
|
||||
expo_url: https://expo.getbootstrap.com/2014/09/30/vogue/
|
||||
img: vogue
|
||||
|
||||
- name: Riot Design
|
||||
url: http://riotdesign.eu/en/
|
||||
expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
|
||||
expo_url: https://expo.getbootstrap.com/2014/03/13/riot-design/
|
||||
img: riot
|
||||
|
||||
- name: Newsweek
|
||||
url: http://www.newsweek.com/
|
||||
expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
|
||||
expo_url: https://expo.getbootstrap.com/2014/02/12/newsweek/
|
||||
img: newsweek
|
||||
|
|
|
|||
|
|
@ -12,3 +12,8 @@
|
|||
code: ja
|
||||
description: Bootstrap 4 日本語リファレンス
|
||||
url: http://bootstrap4.jp/
|
||||
|
||||
- name: Brazilian Portuguese
|
||||
code: pt-BR
|
||||
description: Bootstrap 4 Português do Brasil
|
||||
url: https://bootstrapbrasil.github.io/v4/
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
|
||||
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
|
||||
<title>
|
||||
{% if page.layout == "home" %}
|
||||
{{ page.title }}
|
||||
{% if page.title %}
|
||||
{{ page.title }} · {{ site.title }}
|
||||
{% else %}
|
||||
{{ page.title }} · Bootstrap
|
||||
{{ site.title }} · {{ site.description }}
|
||||
{% endif %}
|
||||
</title>
|
||||
|
||||
{% include social.html %}
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
{% if site.github %}
|
||||
<link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,36 +4,33 @@
|
|||
</form>
|
||||
|
||||
<nav class="bd-links" id="docsNavbarContent">
|
||||
{% assign page_slug = page.url | split: '/' | last %}
|
||||
{% for group in site.data.nav %}
|
||||
{% assign link = group.pages | first %}
|
||||
{% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
|
||||
{% assign link_slug = link.title | slugify %}
|
||||
{% assign group_slug = group.title | slugify %}
|
||||
{% assign active = nil %}
|
||||
|
||||
{% if page.url contains slug %}
|
||||
{% if page.group == group_slug %}
|
||||
{% assign active = 'active' %}
|
||||
{% endif %}
|
||||
|
||||
<div class="bd-toc-item {{ active }}">
|
||||
{% if slug == "examples" %}
|
||||
<a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/">
|
||||
{% else %}
|
||||
<a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' }}">
|
||||
{% endif %}
|
||||
<a class="bd-toc-link" href="{{ site.baseurl }}/{{ group_slug }}/{{ link_slug }}{% if link_slug %}/{% endif %}">
|
||||
{{ group.title }}
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav">
|
||||
{% for doc in group.pages %}
|
||||
{% assign slug = doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' %}
|
||||
{% capture slug %}/{{ slug }}{% endcapture %}
|
||||
{% assign doc_slug = doc.title | slugify %}
|
||||
{% assign active = nil %}
|
||||
|
||||
{% if page.url contains slug %}
|
||||
{% if page.group == group_slug and page_slug == doc_slug %}
|
||||
{% assign active = 'active bd-sidenav-active' %}
|
||||
{% endif %}
|
||||
|
||||
<li class="{{ active }}">
|
||||
<a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' }}">
|
||||
<a href="{{ site.baseurl }}/{{ group_slug }}/{{ doc_slug }}/">
|
||||
{{ doc.title }}
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<header class="navbar navbar-light navbar-static-top bd-navbar">
|
||||
<div class="container">
|
||||
<header class="navbar navbar-light navbar-toggleable-md bd-navbar">
|
||||
<nav class="container">
|
||||
{% comment %}
|
||||
<nav class="nav navbar-nav pull-xs-right">
|
||||
<nav class="nav navbar-nav float-right">
|
||||
<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">
|
||||
v{{ site.current_version }}
|
||||
|
|
@ -25,37 +25,36 @@
|
|||
</nav>
|
||||
{% endcomment %}
|
||||
|
||||
<nav>
|
||||
<div class="clearfix">
|
||||
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
☰
|
||||
</button>
|
||||
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
|
||||
Bootstrap
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between hidden-lg-up">
|
||||
<a class="navbar-brand" href="{{ site.baseurl }}/">
|
||||
Bootstrap
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="bd-main-nav">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,11 @@
|
|||
<p class="lead">
|
||||
Over a dozen reusable components built to provide buttons, dropdowns, input groups, navigation, alerts, and much more.
|
||||
</p>
|
||||
{% elsif page.group == "utilities" %}
|
||||
<h1>Utilities</h1>
|
||||
<p class="lead">
|
||||
Bootstrap includes dozens of utilities—classes with a single purpose to reduce the frequency of highly repetitive declarations.
|
||||
</p>
|
||||
{% elsif page.group == "javascript" %}
|
||||
<h1>JavaScript plugins</h1>
|
||||
<p class="lead">
|
||||
|
|
|
|||
31
docs/_includes/social.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!-- Twitter -->
|
||||
<meta name="twitter:site" content="@{{ site.twitter }}">
|
||||
<meta name="twitter:creator" content="@{{ site.twitter }}">
|
||||
|
||||
{% if page.title %}
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="{{ page.title }}">
|
||||
<meta name="twitter:description" content="{{ page.description }}">
|
||||
<meta name="twitter:image" content="{{ site.url }}{{ site.social_logo_path }}">
|
||||
{% else %}
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="{{ site.title }}">
|
||||
<meta name="twitter:description" content="{{ site.description }}">
|
||||
<meta name="twitter:image" content="{{ site.url }}{{ site.social_image_path }}">
|
||||
{% endif %}
|
||||
|
||||
<!-- Facebook -->
|
||||
{% if page.title %}
|
||||
<meta property="og:url" content="{{ site.url }}{{ page.url }}">
|
||||
<meta property="og:title" content="{{ page.title }}">
|
||||
<meta property="og:description" content="{{ page.description }}">
|
||||
{% else %}
|
||||
<meta property="og:url" content="{{ site.url }}">
|
||||
<meta property="og:title" content="{{ site.title }}">
|
||||
<meta property="og:description" content="{{ site.description }}">
|
||||
{% endif %}
|
||||
<meta property="og:image" content="{{ site.url }}{{ site.social_image_path }}">
|
||||
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="{{ site.description }}">
|
||||
<meta name="author" content="{{ site.authors }}">
|
||||
|
|
@ -21,10 +21,10 @@
|
|||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-3 push-md-9 bd-sidebar">
|
||||
<div class="col-12 col-md-3 push-md-9 bd-sidebar">
|
||||
{% include nav-docs.html %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-9 pull-md-3 bd-content">
|
||||
<div class="col-12 col-md-9 pull-md-3 bd-content">
|
||||
<h1 class="bd-title" id="content">{{ page.title }}</h1>
|
||||
{{ content }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
layout: default
|
||||
---
|
||||
|
||||
<div class="bd-pageheader text-xs-center text-sm-left">
|
||||
<div class="bd-pageheader text-center text-sm-left">
|
||||
<div class="container">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p class="lead">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ module Jekyll
|
|||
upstream_map = {
|
||||
"Bootstrap" => "https://github.com/twbs/bootstrap/issues/",
|
||||
"Edge" => ["https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/", "Edge issue"],
|
||||
"A11yUserVoice" => ["https://microsoftaccessibility.uservoice.com/forums/307429-microsoft-accessibility-feedback/suggestions/", "Microsoft A11y UserVoice idea"],
|
||||
"UserVoice" => ["https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/", "Edge UserVoice idea"],
|
||||
"Mozilla" => ["https://bugzilla.mozilla.org/show_bug.cgi?id=", "Mozilla bug"],
|
||||
"Chromium" => ["https://bugs.chromium.org/p/chromium/issues/detail?id=", "Chromium issue"],
|
||||
"WebKit" => ["https://bugs.webkit.org/show_bug.cgi?id=", "WebKit bug"],
|
||||
|
|
|
|||
|
|
@ -27,14 +27,14 @@ module Jekyll
|
|||
@options[key.to_sym] = value || true
|
||||
end
|
||||
end
|
||||
@options[:linenos] = "inline" if @options.key?(:linenos) and @options[:linenos] == true
|
||||
@options[:linenos] = false
|
||||
else
|
||||
raise SyntaxError.new <<-eos
|
||||
Syntax Error in tag 'highlight' while parsing the following markup:
|
||||
Syntax Error in tag 'example' while parsing the following markup:
|
||||
|
||||
#{markup}
|
||||
|
||||
Valid syntax: highlight <lang> [linenos]
|
||||
Valid syntax: example <lang>
|
||||
eos
|
||||
end
|
||||
end
|
||||
|
|
@ -57,16 +57,26 @@ eos
|
|||
def example(output)
|
||||
"<div class=\"bd-example\" data-example-id=\"#{@options[:id]}\">\n#{output}\n</div>"
|
||||
end
|
||||
|
||||
|
||||
def remove_holderjs(code)
|
||||
code = code.gsub(/data-src="holder.js.+?"/, 'src="..."')
|
||||
end
|
||||
|
||||
def remove_example_classes(code)
|
||||
# Find `bd-` classes and remove them from the highlighted code. Because of how this regex works, it will also
|
||||
# remove classes that are after the `bd-` class. While this is a bug, I left it because it can be helpful too.
|
||||
# To fix the bug, replace `(?=")` with `(?=("|\ ))`.
|
||||
code = code.gsub(/(?!class=".)\ *?bd-.+?(?=")/, "")
|
||||
# Find empty class attributes after the previous regex and remove those too.
|
||||
code = code.gsub(/\ class=""/, "")
|
||||
end
|
||||
|
||||
def render_rouge(code)
|
||||
require 'rouge'
|
||||
formatter = Rouge::Formatters::HTML.new(line_numbers: @options[:linenos], wrap: false)
|
||||
lexer = Rouge::Lexer.find_fancy(@lang, code) || Rouge::Lexers::PlainText
|
||||
code = remove_holderjs(code)
|
||||
code = remove_example_classes(code)
|
||||
code = formatter.format(lexer.lex(code))
|
||||
"<div class=\"highlight\"><pre>#{code}</pre></div>"
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Brand guidelines
|
||||
description: Documentation and examples for Bootstrap's logo and brand usage guidelines.
|
||||
group: about
|
||||
---
|
||||
|
||||
Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](http://mailchimp.com/about/brand-assets/).
|
||||
Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](https://mailchimp.com/about/brand-assets/).
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Mark and logo
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: docs
|
||||
title: History
|
||||
description: A brief overview of the history of Bootstrap.
|
||||
group: about
|
||||
redirect_from: "/about/"
|
||||
---
|
||||
|
|
@ -9,4 +10,4 @@ Originally created by a designer and a developer at Twitter, Bootstrap has becom
|
|||
|
||||
Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
|
||||
|
||||
Originally [released](https://blog.twitter.com/2011/bootstrap-twitter) on [<time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>](https://twitter.com/mdo/statuses/104620039650557952), we've since had over [twenty releases](https://github.com/twbs/bootstrap/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
|
||||
Originally [released](https://blog.twitter.com/2011/bootstrap-from-twitter) on [<time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>](https://twitter.com/mdo/statuses/104620039650557952), we've since had over [twenty releases](https://github.com/twbs/bootstrap/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: docs
|
||||
title: License FAQs
|
||||
description: Commonly asked questions about Bootstrap's open source license.
|
||||
group: about
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Team
|
||||
description: An overview of the founding team and core contributors to Bootstrap.
|
||||
group: about
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Translations
|
||||
description: Links to community-translated Bootstrap documentation sites.
|
||||
group: about
|
||||
---
|
||||
|
||||
|
|
|
|||
BIN
docs/assets/brand/bootstrap-social-logo.png
Normal file
|
After Width: | Height: | Size: 45 KiB |
BIN
docs/assets/brand/bootstrap-social.png
Normal file
|
After Width: | Height: | Size: 330 KiB |
6
docs/assets/css/docs.min.css
vendored
|
Before Width: | Height: | Size: 176 KiB After Width: | Height: | Size: 174 KiB |
|
Before Width: | Height: | Size: 3 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
21
docs/assets/js/docs.min.js
vendored
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
// See the Getting Started docs for more information:
|
||||
// http://getbootstrap.com/getting-started/#support-ie10-width
|
||||
// https://getbootstrap.com/getting-started/#support-ie10-width
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (http://getbootstrap.com)
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com)
|
||||
* Copyright 2011-2016 The Bootstrap Authors
|
||||
* Copyright 2011-2016 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
$('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
|
||||
|
||||
// Disable empty links in docs examples
|
||||
$('.bd-example [href=#]').click(function (e) {
|
||||
$('.bd-content [href="#"]').click(function (e) {
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
|
|
@ -73,7 +73,8 @@
|
|||
})
|
||||
|
||||
clipboard.on('error', function (e) {
|
||||
var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'
|
||||
var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
|
||||
var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
|
||||
|
||||
$(e.trigger)
|
||||
.attr('title', fallbackMsg)
|
||||
|
|
|
|||
4
docs/assets/js/vendor/anchor.min.js
vendored
4
docs/assets/js/vendor/clipboard.min.js
vendored
6
docs/assets/js/vendor/holder.min.js
vendored
2
docs/assets/js/vendor/jekyll-search.min.js
vendored
8
docs/assets/js/vendor/jquery.min.js
vendored
2
docs/assets/js/vendor/tether.min.js
vendored
|
|
@ -1,66 +1,50 @@
|
|||
// scss-lint:disable ImportantRule
|
||||
// scss-lint:disable ImportantRule, IdSelector
|
||||
|
||||
//
|
||||
// Carbon ads
|
||||
//
|
||||
|
||||
.carbonad {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
padding: 1.25rem !important;
|
||||
margin: 2rem ($grid-gutter-width * -1) -2rem !important;
|
||||
overflow: hidden; // clearfix
|
||||
font-family: inherit !important;
|
||||
font-size: .8rem !important;
|
||||
line-height: 1rem !important;
|
||||
color: $bd-purple-light !important;
|
||||
#carbonads {
|
||||
display: block;
|
||||
padding: 15px 15px 15px 160px;
|
||||
margin: 50px -15px 0;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
background: darken($bd-purple, 10%) !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
border: solid #866ab3;
|
||||
border-width: 1px 0 0;
|
||||
|
||||
.carbonad-img {
|
||||
margin: 0 !important;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.carbonad-text,
|
||||
.carbonad-tag {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
margin-left: 145px !important;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
@include media-breakpoint-up(sm) {
|
||||
max-width: 330px;
|
||||
margin: 50px auto 0;
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.carbonad-text {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 15px;
|
||||
margin-top: 0;
|
||||
|
||||
.carbonad-tag {
|
||||
color: inherit !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.carbonad-text a,
|
||||
.carbonad-tag a {
|
||||
color: $bd-purple-light !important;
|
||||
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
.bd-masthead & {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.carbonad {
|
||||
width: 330px !important;
|
||||
padding: 1rem !important;
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.carbon-img {
|
||||
float: left;
|
||||
margin-left: -145px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
|
||||
.carbon-poweredby {
|
||||
display: block;
|
||||
color: #cdbfe3 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// clipboard.js
|
||||
//
|
||||
// Flash-based `Copy` buttons for code snippets.
|
||||
// JS-based `Copy` buttons for code snippets.
|
||||
|
||||
.bd-clipboard {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
.flex-items-xs-top,
|
||||
.flex-items-xs-middle,
|
||||
.flex-items-xs-bottom {
|
||||
.flex-items-top,
|
||||
.flex-items-middle,
|
||||
.flex-items-bottom {
|
||||
min-height: 6rem;
|
||||
background-color: rgba(255,0,0,.1);
|
||||
}
|
||||
|
|
@ -32,6 +32,11 @@
|
|||
background-color: rgba(255,0,0,.1);
|
||||
}
|
||||
|
||||
.bd-highlight {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
border: 1px solid rgba($bd-purple, .15);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Container illustrations
|
||||
|
|
@ -100,9 +105,13 @@
|
|||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
// Undo width of container
|
||||
.container {
|
||||
width: auto;
|
||||
.pos-f-t {
|
||||
position: relative;
|
||||
margin: -1rem;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin: -1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .form-control {
|
||||
|
|
@ -111,11 +120,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Card examples should be horizontal
|
||||
> .card {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
> .nav + .nav,
|
||||
> .alert + .alert,
|
||||
> .navbar + .navbar,
|
||||
|
|
@ -226,21 +230,23 @@
|
|||
|
||||
// Example modals
|
||||
.bd-example-modal {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.bd-example-modal .modal {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
.bd-example-modal .modal-dialog {
|
||||
left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
background-color: #fafafa;
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Example dropdowns
|
||||
|
|
@ -308,7 +314,8 @@
|
|||
.bg-info,
|
||||
.bg-warning,
|
||||
.bg-danger,
|
||||
.bg-inverse {
|
||||
.bg-inverse,
|
||||
.bg-faded {
|
||||
&:not(.navbar) {
|
||||
padding: .5rem;
|
||||
margin-top: .5rem;
|
||||
|
|
@ -317,6 +324,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-example-border-utils {
|
||||
[class^="border-"] {
|
||||
display: inline-block;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin: .25rem;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Code snippets
|
||||
|
|
@ -324,7 +341,7 @@
|
|||
|
||||
.highlight {
|
||||
padding: 1rem;
|
||||
margin: 1rem (-$grid-gutter-width / 2);
|
||||
margin: 1rem (-$grid-gutter-width-base / 2);
|
||||
background-color: #f7f7f9;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
margin-right: -1px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.bd-featured-sites .col-xs-6 {
|
||||
.bd-featured-sites .col-6 {
|
||||
padding: 1px;
|
||||
}
|
||||
.bd-featured-sites .img-fluid {
|
||||
|
|
|
|||
|
|
@ -26,10 +26,10 @@
|
|||
|
||||
@include media-breakpoint-up(md) {
|
||||
.col-sm-6:first-child {
|
||||
padding-right: ($grid-gutter-width * 1.5);
|
||||
padding-right: ($grid-gutter-width-base * 1.5);
|
||||
};
|
||||
.col-sm-6:last-child {
|
||||
padding-left: ($grid-gutter-width * 1.5);
|
||||
padding-left: ($grid-gutter-width-base * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.bd-masthead {
|
||||
position: relative;
|
||||
padding: 3rem ($grid-gutter-width / 2) 2rem;
|
||||
padding: 3rem ($grid-gutter-width-base / 2) 2rem;
|
||||
color: $bd-purple-light;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
||||
|
|
|
|||
|
|
@ -24,14 +24,4 @@
|
|||
.dropdown-menu {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.nav-link {
|
||||
float: none;
|
||||
|
||||
+ .nav-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// scss-lint:disable ImportantRule
|
||||
|
||||
.bd-pageheader {
|
||||
padding: 2rem ($grid-gutter-width / 2);
|
||||
padding: 2rem ($grid-gutter-width-base / 2);
|
||||
margin-bottom: 1.5rem;
|
||||
color: $bd-purple-light;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@
|
|||
.responsive-utilities-test {
|
||||
margin-top: .25rem;
|
||||
}
|
||||
.responsive-utilities-test .col-xs-6 {
|
||||
.responsive-utilities-test .col-6 {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.responsive-utilities-test span {
|
||||
|
|
@ -49,7 +50,7 @@
|
|||
}
|
||||
.visible-on,
|
||||
.hidden-on {
|
||||
.col-xs-6 {
|
||||
.col-6 {
|
||||
> .not-visible {
|
||||
color: #999;
|
||||
border: 1px solid #ddd;
|
||||
|
|
@ -58,7 +59,7 @@
|
|||
}
|
||||
.visible-on,
|
||||
.hidden-on {
|
||||
.col-xs-6 {
|
||||
.col-6 {
|
||||
.visible {
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
|
|
|
|||
|
|
@ -61,3 +61,6 @@
|
|||
.css .o,
|
||||
.css .o + .nt,
|
||||
.css .nt + .nt { color: #999; }
|
||||
|
||||
.language-bash::before { color: #009; content: "$ "; user-select: none; }
|
||||
.language-powershell::before { color: #009; content: "PM> "; user-select: none; }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* Bootstrap Docs (http://getbootstrap.com)
|
||||
* Bootstrap Docs (https://getbootstrap.com)
|
||||
* Copyright 2011-2016 The Bootstrap Authors
|
||||
* Copyright 2011-2016 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||
|
|
|
|||
|
|
@ -8,12 +8,11 @@ Bootstrap currently works around several outstanding browser bugs in major brows
|
|||
|
||||
We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs]({{ site.baseurl }}/getting-started/browsers-devices/#supported-browsers).
|
||||
|
||||
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)
|
||||
* [WebKit bug 159753: [meta] Issues affecting Bootstrap](https://bugs.webkit.org/show_bug.cgi?id=159753)
|
||||
* [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o)
|
||||
|
||||
<div class="table-responsive">
|
||||
|
|
@ -31,10 +30,39 @@ See also:
|
|||
<tr>
|
||||
<td>{{ bug.browser }}</td>
|
||||
<td>{{ bug.summary | markdownify | bugify }}</td>
|
||||
<td>{{ bug.upstream_bug | bugify }}</td>
|
||||
<td>{{ bug.upstream_bug | bugify }}</td>
|
||||
<td>{{ bug.origin | bugify }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
# Most wanted features
|
||||
|
||||
There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren't yet implemented in certain browsers, thus preventing us from taking advantage of them.
|
||||
|
||||
We publicly list these "most wanted" feature requests here, in the hopes of expediting the process of getting them implemented.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="bd-browser-bugs table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser(s)</th>
|
||||
<th>Summary of feature</th>
|
||||
<th>Upstream issue(s)</th>
|
||||
<th>Bootstrap issue(s)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for feat in site.data.browser-features %}
|
||||
<tr>
|
||||
<td>{{ feat.browser }}</td>
|
||||
<td>{{ feat.summary | markdownify | bugify }}</td>
|
||||
<td>{{ feat.upstream_bug | bugify }}</td>
|
||||
<td>{{ feat.origin | bugify }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Alerts
|
||||
description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
|
@ -60,7 +61,7 @@ Alerts can also contain additional HTML elements like headings and paragraphs.
|
|||
<div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<p class="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -72,12 +73,12 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
|
|||
- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
|
||||
- Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button.
|
||||
- On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
|
||||
- To animate alerts when dismissing them, be sure to add the `.fade` and `.in` classes.
|
||||
- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.
|
||||
|
||||
You can see this in action with a live demo:
|
||||
|
||||
{% example html %}
|
||||
<div class="alert alert-warning alert-dismissible fade in" role="alert">
|
||||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
|
|
@ -110,7 +111,7 @@ Note that closing an alert will remove it from the DOM.
|
|||
| Method | Description |
|
||||
| --- | --- |
|
||||
| `$().alert()` | Makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) |
|
||||
| `$().alert('close')` | Closes an alert by removing it from the DOM. If the `.fade` and `.in` classes are present on the element, the alert will fade out before it is removed. |
|
||||
| `$().alert('close')` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. |
|
||||
|
||||
{% highlight js %}$(".alert").alert('close'){% endhighlight %}
|
||||
|
||||
|
|
|
|||
55
docs/components/badge.md
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Badges
|
||||
description: Documentation and examples for badges, our small count and labelling component.
|
||||
group: components
|
||||
---
|
||||
|
||||
Small and adaptive tag for adding context to just about any content.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Example
|
||||
|
||||
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
|
||||
|
||||
{% example html %}
|
||||
<h1>Example heading <span class="badge badge-default">New</span></h1>
|
||||
<h2>Example heading <span class="badge badge-default">New</span></h2>
|
||||
<h3>Example heading <span class="badge badge-default">New</span></h3>
|
||||
<h4>Example heading <span class="badge badge-default">New</span></h4>
|
||||
<h5>Example heading <span class="badge badge-default">New</span></h5>
|
||||
<h6>Example heading <span class="badge badge-default">New</span></h6>
|
||||
{% endexample %}
|
||||
|
||||
## Contextual variations
|
||||
|
||||
Add any of the below mentioned modifier classes to change the appearance of a badge.
|
||||
|
||||
{% example html %}
|
||||
<span class="badge badge-default">Default</span>
|
||||
<span class="badge badge-primary">Primary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
{% endexample %}
|
||||
|
||||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||
{{ callout-include | markdownify }}
|
||||
|
||||
## Pill badges
|
||||
|
||||
Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
|
||||
|
||||
{% example html %}
|
||||
<span class="badge badge-pill badge-default">Default</span>
|
||||
<span class="badge badge-pill badge-primary">Primary</span>
|
||||
<span class="badge badge-pill badge-success">Success</span>
|
||||
<span class="badge badge-pill badge-info">Info</span>
|
||||
<span class="badge badge-pill badge-warning">Warning</span>
|
||||
<span class="badge badge-pill badge-danger">Danger</span>
|
||||
{% endexample %}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Breadcrumb
|
||||
description: Indicate the current page's location within a navigational hierarchy.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Button group
|
||||
description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
|
@ -25,17 +26,17 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
|
|||
|
||||
## Button toolbar
|
||||
|
||||
Combine sets of button groups into button toolbars for more complex components.
|
||||
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Second group">
|
||||
<div class="btn-group mr-2" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-secondary">5</button>
|
||||
<button type="button" class="btn btn-secondary">6</button>
|
||||
<button type="button" class="btn btn-secondary">7</button>
|
||||
|
|
@ -46,6 +47,36 @@ Combine sets of button groups into button toolbars for more complex components.
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="btnGroupAddon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="btnGroupAddon2">@</span>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon2">
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Sizing
|
||||
|
||||
Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
|
||||
|
|
@ -101,6 +132,18 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
|
|||
|
||||
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Buttons
|
||||
description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
|
||||
group: components
|
||||
redirect_from: "/components/"
|
||||
---
|
||||
|
|
@ -104,10 +105,6 @@ Buttons will appear pressed (with a darker background, darker border, and inset
|
|||
|
||||
Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.
|
||||
|
||||
{% callout info %}
|
||||
**Heads up!** IE9 and below render disabled buttons with gray, shadowed text that we can't override.
|
||||
{% endcallout %}
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Cards
|
||||
description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
|
@ -15,10 +16,12 @@ If you're familiar with Bootstrap 3, cards replace our old panels, wells, and th
|
|||
|
||||
## Example
|
||||
|
||||
Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. For example, if your card has no flush content like images, feel free to put the `.card-block` class on the `.card` element to consolidate your markup.
|
||||
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
|
||||
|
||||
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of it's parent element. This is easily customized with our various [sizing options](#sizing).
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<div class="card" style="width: 20rem;">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
|
|
@ -30,38 +33,39 @@ Cards require a small amount of markup and classes to provide you with as much c
|
|||
|
||||
## Content types
|
||||
|
||||
Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.
|
||||
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported.
|
||||
|
||||
### Blocks
|
||||
|
||||
The building block of a card is the `.card-block`. Use it whenever you need a padded section within a card.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
This is some text within a card block.
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Titles, text, and links
|
||||
|
||||
Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `<a>` tag.
|
||||
|
||||
Subtitles are used by adding a `.card-subtitle` to an `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<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 class="card-block">
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Lists can be added to a card by adding a list group.
|
||||
|
||||
{% 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 %}
|
||||
### Images
|
||||
|
||||
`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
|
||||
|
||||
|
|
@ -74,96 +78,44 @@ Lists can be added to a card by adding a list group.
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `<a>` tag.
|
||||
### List groups
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Subtitles are used by adding a `.card-subtitle` to an `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
|
||||
|
||||
The multiple content types can be easily combined to create the card you need. See below for an example.
|
||||
Create lists of content in a card with a flush list group.
|
||||
|
||||
{% 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 %}
|
||||
|
||||
### Kitchen sink
|
||||
|
||||
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
|
||||
|
||||
{% example html %}
|
||||
<div class="card" style="width: 20rem;">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
|
||||
</div>
|
||||
<img data-src="holder.js/100px180/?text=Image" alt="Card image">
|
||||
<div class="card-block">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<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 class="card-block">
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Sizing
|
||||
|
||||
Constrain the width of cards via custom CSS, our predefined grid classes, or with custom styles using our grid mixins.
|
||||
|
||||
Using the grid:
|
||||
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<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>
|
||||
<div class="col-sm-6">
|
||||
<div class="card card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<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>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Using custom widths:
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-block" style="width: 18rem;">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<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>
|
||||
{% endexample %}
|
||||
|
||||
## Text alignment
|
||||
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/components/utilities/#text-alignment).
|
||||
|
||||
{% example html %}
|
||||
<div class="card 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 class="card card-block text-xs-center">
|
||||
<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 class="card card-block text-xs-right">
|
||||
<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>
|
||||
{% endexample %}
|
||||
|
||||
## Header and footer
|
||||
### Header and footer
|
||||
|
||||
Add an optional header and/or footer within a card.
|
||||
|
||||
|
|
@ -208,7 +160,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
|||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-xs-center">
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
|
|
@ -223,14 +175,111 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Header nav
|
||||
## Sizing
|
||||
|
||||
Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.pull-*-*` utility class for proper alignment.
|
||||
Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
|
||||
|
||||
### Using grid markup
|
||||
|
||||
Using the grid, wrap cards in columns and rows as needed.
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-xs-center">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Using utilities
|
||||
|
||||
Use our handful of [available sizing utilities]({{ site.baseurl }}/utilities/sizing-and-positioning/#width-and-height) to quickly set a card's width.
|
||||
|
||||
{% example html %}
|
||||
<div class="card w-75">
|
||||
<div class="card-block">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card w-50">
|
||||
<div class="card-block">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Using custom CSS
|
||||
|
||||
Use custom CSS in your stylesheets or as inline styles to set a width.
|
||||
|
||||
{% example html %}
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<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 %}
|
||||
|
||||
## Text alignment
|
||||
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/utilities/typography/#text-alignment).
|
||||
|
||||
{% example html %}
|
||||
<div class="card" style="width: 20rem;">
|
||||
<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>
|
||||
|
||||
<div class="card text-center" style="width: 20rem;">
|
||||
<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>
|
||||
|
||||
<div class="card text-right" style="width: 20rem;">
|
||||
<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 %}
|
||||
|
||||
## Navigation
|
||||
|
||||
Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{ site.baseurl }}/components/navs/).
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs pull-xs-left">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
|
|
@ -251,9 +300,9 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
|
|||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-xs-center">
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-pills card-header-pills pull-xs-left">
|
||||
<ul class="nav nav-pills card-header-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
|
|
@ -273,12 +322,16 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Image caps
|
||||
## Images
|
||||
|
||||
Similar to headers and footers, cards include top and bottom image caps.
|
||||
Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.
|
||||
|
||||
### Image caps
|
||||
|
||||
Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<div class="card mb-3">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
|
|
@ -296,7 +349,7 @@ Similar to headers and footers, cards include top and bottom image caps.
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Image overlays
|
||||
### Image overlays
|
||||
|
||||
Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-inverse` (see below).
|
||||
|
||||
|
|
@ -311,9 +364,13 @@ Turn an image into a card background and overlay your card's text. Depending on
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Inverted text
|
||||
## Card styles
|
||||
|
||||
Cards include a class for quickly toggling **the text color**. By default, cards use dark text and assume a light background. **Add `.card-inverse` for white text** and specify the `background-color` and `border-color` to go with it.
|
||||
Cards include various options for customizing their backgrounds, borders, and color.
|
||||
|
||||
### Inverted text
|
||||
|
||||
By default, cards use dark text and assume a light background. You can reverse that by toggling the `color` of text within, as well as that of the card's subcomponents, with `.card-inverse`. Then, specify a dark `background-color` and `border-color` to go with it.
|
||||
|
||||
You can also use `.card-inverse` with the [contextual backgrounds variants](#background-variants).
|
||||
|
||||
|
|
@ -327,12 +384,12 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Background variants
|
||||
### Background variants
|
||||
|
||||
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 %}
|
||||
<div class="card card-inverse card-primary text-xs-center">
|
||||
<div class="card card-inverse card-primary mb-3 text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -340,7 +397,7 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-success text-xs-center">
|
||||
<div class="card card-inverse card-success mb-3 text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -348,7 +405,7 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-info text-xs-center">
|
||||
<div class="card card-inverse card-info mb-3 text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -356,7 +413,7 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-warning text-xs-center">
|
||||
<div class="card card-inverse card-warning mb-3 text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -364,7 +421,7 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-danger text-xs-center">
|
||||
<div class="card card-inverse card-danger text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -377,12 +434,12 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||
{{ callout-include | markdownify }}
|
||||
|
||||
## Outline variants
|
||||
### Outline cards
|
||||
|
||||
In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-outline-primary text-xs-center">
|
||||
<div class="card card-outline-primary mb-3 text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -390,7 +447,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-secondary text-xs-center">
|
||||
<div class="card card-outline-secondary mb-3 text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -398,7 +455,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-success text-xs-center">
|
||||
<div class="card card-outline-success mb-3 text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -406,7 +463,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-info text-xs-center">
|
||||
<div class="card card-outline-info mb-3 text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -414,7 +471,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-warning text-xs-center">
|
||||
<div class="card card-outline-warning mb-3 text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -422,7 +479,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-danger text-xs-center">
|
||||
<div class="card card-outline-danger text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -432,11 +489,13 @@ In need of a colored card, but not the hefty background colors they bring? Repla
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Groups
|
||||
## Card layout
|
||||
|
||||
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
|
||||
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**.
|
||||
|
||||
Only applies to small devices and above.
|
||||
### Card groups
|
||||
|
||||
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use `display: flex;` to achieve their uniform sizing.
|
||||
|
||||
{% example html %}
|
||||
<div class="card-group">
|
||||
|
|
@ -467,64 +526,130 @@ Only applies to small devices and above.
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Decks
|
||||
|
||||
Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
|
||||
|
||||
Only applies to small devices and above.
|
||||
|
||||
**ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`.
|
||||
When using card groups with footers, their content will automatically line up.
|
||||
|
||||
{% example html %}
|
||||
<div class="card-deck-wrapper">
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<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"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<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>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Columns
|
||||
### Card decks
|
||||
|
||||
Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`.
|
||||
Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
|
||||
|
||||
Only applies to small devices and above.
|
||||
{% example html %}
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<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"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
**Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts).
|
||||
Just like with card groups, card footers in decks will automatically line up.
|
||||
|
||||
{% example html %}
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<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>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Card columns
|
||||
|
||||
Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
|
||||
|
||||
**Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet.
|
||||
|
||||
{% example html %}
|
||||
<div class="card-columns">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
|
||||
<img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title that wraps to a new line</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<div class="card p-3">
|
||||
<blockquote class="card-block card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>
|
||||
<small class="text-muted">
|
||||
|
|
@ -534,14 +659,14 @@ Only applies to small devices and above.
|
|||
</blockquote>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
|
||||
<img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<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"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-block card-inverse card-primary text-xs-center">
|
||||
<div class="card card-inverse card-primary p-3 text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
|
||||
<footer>
|
||||
|
|
@ -551,15 +676,17 @@ Only applies to small devices and above.
|
|||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card card-block text-xs-center">
|
||||
<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"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<div class="card text-center">
|
||||
<div class="card-block">
|
||||
<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"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img" data-src="holder.js/100px260/" alt="Card image">
|
||||
<img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
|
||||
</div>
|
||||
<div class="card card-block text-xs-right">
|
||||
<div class="card p-3 text-right">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>
|
||||
|
|
@ -569,10 +696,12 @@ Only applies to small devices and above.
|
|||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Carousel
|
||||
description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
|
||||
group: components
|
||||
---
|
||||
|
||||
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.**
|
||||
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
|
||||
|
||||
In browsers where the [Page Visibility API](https://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.).
|
||||
|
||||
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
|
||||
|
||||
## Contents
|
||||
|
||||
|
|
@ -13,30 +18,86 @@ A slideshow component for cycling through elements—images or slides of text—
|
|||
|
||||
## Example
|
||||
|
||||
Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
|
||||
|
||||
Be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page.
|
||||
|
||||
### Slides only
|
||||
|
||||
Here's a carousel with slides only. Note the presence of the `.d-block` and `.img-fluid` on carousel images to prevent browser default image alignment.
|
||||
|
||||
{% example html %}
|
||||
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner" role="listbox">
|
||||
<div class="carousel-item active">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### With controls
|
||||
|
||||
Adding in the previous and next controls:
|
||||
|
||||
{% example html %}
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner" role="listbox">
|
||||
<div class="carousel-item active">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### With indicators
|
||||
|
||||
You can also add the indicators to the carousel, alongside the controls, too.
|
||||
|
||||
{% example html %}
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner" role="listbox">
|
||||
<div class="carousel-item active">
|
||||
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
|
||||
</div>
|
||||
</div>
|
||||
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
|
||||
<span class="icon-prev" aria-hidden="true"></span>
|
||||
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
|
||||
<span class="icon-next" aria-hidden="true"></span>
|
||||
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -54,45 +115,45 @@ Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 does
|
|||
The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
|
||||
{% endcallout %}
|
||||
|
||||
### Optional captions
|
||||
### With captions
|
||||
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/utilities/display-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
|
||||
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner" role="listbox">
|
||||
<div class="carousel-item active">
|
||||
<img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
|
||||
<div class="carousel-caption">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h3>First slide label</h3>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image">
|
||||
<div class="carousel-caption">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h3>Second slide label</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img data-src="holder.js/900x500/auto/#555:#555" alt="Third slide image">
|
||||
<div class="carousel-caption">
|
||||
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h3>Third slide label</h3>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
|
||||
<a class="carousel-control carousel-control-left" href="#carouselExampleCaptions" role="button" data-slide="prev">
|
||||
<span class="icon-prev" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
|
||||
<a class="carousel-control carousel-control-right" href="#carouselExampleCaptions" role="button" data-slide="next">
|
||||
<span class="icon-next" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
|
|
@ -102,25 +163,15 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
|||
{% highlight html %}
|
||||
<div class="carousel-item">
|
||||
<img src="..." alt="...">
|
||||
<div class="carousel-caption">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h3>...</h3>
|
||||
<p>...</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
{% callout danger %}
|
||||
#### Accessibility issue
|
||||
|
||||
The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
|
||||
{% endcallout %}
|
||||
|
||||
## Usage
|
||||
|
||||
### Multiple carousels
|
||||
|
||||
Carousels require the use of an `id` on the outermost container (the `.carousel`) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's `id`, be sure to update the relevant controls.
|
||||
|
||||
### Via data attributes
|
||||
|
||||
Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`.
|
||||
|
|
@ -156,11 +207,23 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<td>5000</td>
|
||||
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>keyboard</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Whether the carousel should react to keyboard events.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pause</td>
|
||||
<td>string</td>
|
||||
<td>string | null</td>
|
||||
<td>"hover"</td>
|
||||
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
|
||||
<td>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>null</code>, hovering over the carousel won't pause it.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ride</td>
|
||||
<td>string</td>
|
||||
<td>false</td>
|
||||
<td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>wrap</td>
|
||||
|
|
@ -168,12 +231,6 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<td>true</td>
|
||||
<td>Whether the carousel should cycle continuously or have hard stops.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>keyboard</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Whether the carousel should react to keyboard events.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Collapse
|
||||
description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
|
||||
group: components
|
||||
---
|
||||
|
||||
The Bootstrap collapse plugin allows you to toggle content on your pages with a bit of JavaScript and some classes. Flexible plugin that utilizes a handful of classes (from the **required [transitions plugin]({{ site.baseurl }}/components/transitions/)**) for easy toggle behavior.
|
||||
The Bootstrap collapse plugin allows you to toggle content on your pages with a few classes thanks to some helpful JavaScript.
|
||||
|
||||
## Contents
|
||||
|
||||
|
|
@ -17,7 +18,7 @@ Click the buttons below to show and hide another element via class changes:
|
|||
|
||||
- `.collapse` hides content
|
||||
- `.collapsing` is applied during transitions
|
||||
- `.collapse.in` shows content
|
||||
- `.collapse.show` shows content
|
||||
|
||||
You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
|
||||
|
||||
|
|
@ -43,40 +44,47 @@ Extend the default collapse behavior to create an accordion.
|
|||
|
||||
{% example html %}
|
||||
<div id="accordion" role="tablist" aria-multiselectable="true">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
<div class="card">
|
||||
<div class="card-header" role="tab" id="headingOne">
|
||||
<h5 class="mb-0">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</a>
|
||||
</h4>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
|
||||
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
|
||||
<div class="card-block">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingTwo">
|
||||
<h4 class="panel-title">
|
||||
<div class="card">
|
||||
<div class="card-header" role="tab" id="headingTwo">
|
||||
<h5 class="mb-0">
|
||||
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</a>
|
||||
</h4>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
|
||||
<div class="card-block">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingThree">
|
||||
<h4 class="panel-title">
|
||||
<div class="card">
|
||||
<div class="card-header" role="tab" id="headingThree">
|
||||
<h5 class="mb-0">
|
||||
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</a>
|
||||
</h4>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
|
||||
<div class="card-block">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -93,14 +101,14 @@ Additionally, if your control element is targeting a single collapsible element
|
|||
The collapse plugin utilizes a few classes to handle the heavy lifting:
|
||||
|
||||
- `.collapse` hides the content
|
||||
- `.collapse.in` shows the content
|
||||
- `.collapse.show` shows the content
|
||||
- `.collapsing` is added when the transition starts, and removed when it finishes
|
||||
|
||||
These classes can be found in `_animation.scss`.
|
||||
These classes can be found in `_transitions.scss`.
|
||||
|
||||
### Via data attributes
|
||||
|
||||
Just add `data-toggle="collapse"` and a `data-target` to the element to automatically assign control of a collapsible element. The `data-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `in`.
|
||||
Just add `data-toggle="collapse"` and a `data-target` to the element to automatically assign control of a collapsible element. The `data-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `show`.
|
||||
|
||||
To add accordion-like group management to a collapsible control, add the data attribute `data-parent="#selector"`. Refer to the demo to see this in action.
|
||||
|
||||
|
|
|
|||