mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-17 19:21:23 +03:00
Gijs Boddeus
@@ -8,7 +8,5 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"plugins": [
|
"plugins": ["external-helpers"]
|
||||||
"transform-es2015-modules-strip"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
+2
-2
@@ -44,9 +44,9 @@ scss-lint-report.xml
|
|||||||
# grunt-contrib-sass cache
|
# grunt-contrib-sass cache
|
||||||
.sass-cache
|
.sass-cache
|
||||||
|
|
||||||
# Jekyll metadata
|
# Jekyll metadata and extra config file for `github` script
|
||||||
docs/.jekyll-metadata
|
docs/.jekyll-metadata
|
||||||
|
twbsconfig.yml
|
||||||
|
|
||||||
# Folders to ignore
|
# Folders to ignore
|
||||||
bower_components
|
|
||||||
node_modules
|
node_modules
|
||||||
|
|||||||
+4
-4
@@ -1,8 +1,8 @@
|
|||||||
GEM
|
GEM
|
||||||
remote: https://rubygems.org/
|
remote: https://rubygems.org/
|
||||||
specs:
|
specs:
|
||||||
addressable (2.5.1)
|
addressable (2.5.2)
|
||||||
public_suffix (~> 2.0, >= 2.0.2)
|
public_suffix (>= 2.0.2, < 4.0)
|
||||||
colorator (1.1.0)
|
colorator (1.1.0)
|
||||||
ffi (1.9.18)
|
ffi (1.9.18)
|
||||||
ffi (1.9.18-x64-mingw32)
|
ffi (1.9.18-x64-mingw32)
|
||||||
@@ -41,7 +41,7 @@ GEM
|
|||||||
mini_portile2 (~> 2.2.0)
|
mini_portile2 (~> 2.2.0)
|
||||||
pathutil (0.14.0)
|
pathutil (0.14.0)
|
||||||
forwardable-extended (~> 2.6)
|
forwardable-extended (~> 2.6)
|
||||||
public_suffix (2.0.5)
|
public_suffix (3.0.0)
|
||||||
rake (12.0.0)
|
rake (12.0.0)
|
||||||
rb-fsevent (0.10.2)
|
rb-fsevent (0.10.2)
|
||||||
rb-inotify (0.9.10)
|
rb-inotify (0.9.10)
|
||||||
@@ -65,4 +65,4 @@ DEPENDENCIES
|
|||||||
scss_lint (~> 0.54.0)
|
scss_lint (~> 0.54.0)
|
||||||
|
|
||||||
BUNDLED WITH
|
BUNDLED WITH
|
||||||
1.15.3
|
1.15.4
|
||||||
|
|||||||
@@ -41,9 +41,8 @@ Several quick start options are available:
|
|||||||
- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip)
|
- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip)
|
||||||
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
|
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
|
||||||
- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-beta`
|
- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-beta`
|
||||||
- Install with [yarn](https://github.com/yarnpkg/yarn): `yarn add bootstrap@4.0.0-beta`
|
- Install with [yarn](https://yarnpkg.com): `yarn add bootstrap@4.0.0-beta`
|
||||||
- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap:4.0.0-beta`
|
- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap:4.0.0-beta`
|
||||||
- Install with [Bower](https://bower.io): `bower install bootstrap#v4.0.0-beta`
|
|
||||||
- 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).
|
- 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](https://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.
|
||||||
@@ -51,7 +50,6 @@ Read the [Getting started page](https://getbootstrap.com/getting-started/) for i
|
|||||||
## Status
|
## Status
|
||||||
|
|
||||||
[](https://bootstrap-slack.herokuapp.com)
|
[](https://bootstrap-slack.herokuapp.com)
|
||||||
[](https://bower.io/search/?q=bootstrap)
|
|
||||||
[](https://www.npmjs.com/package/bootstrap)
|
[](https://www.npmjs.com/package/bootstrap)
|
||||||
[](https://rubygems.org/gems/bootstrap)
|
[](https://rubygems.org/gems/bootstrap)
|
||||||
[](https://travis-ci.org/twbs/bootstrap)
|
[](https://travis-ci.org/twbs/bootstrap)
|
||||||
@@ -98,14 +96,15 @@ Documentation search is powered by [Algolia's DocSearch](https://community.algol
|
|||||||
1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
|
1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
|
||||||
2. Run `npm install` to install Node.js dependencies.
|
2. Run `npm install` to install Node.js dependencies.
|
||||||
3. Run `npm run test` (or a specific NPM script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
|
3. Run `npm run test` (or a specific NPM script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
|
||||||
4. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
|
4. From the root `/bootstrap` directory, run `npm run docs-serve` in the command line.
|
||||||
5. Open <http://localhost:9001> in your browser, and voilà.
|
5. Open <http://localhost:9001> in your browser, and voilà.
|
||||||
|
|
||||||
Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/).
|
Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/).
|
||||||
|
|
||||||
### Documentation for previous releases
|
### Documentation for previous releases
|
||||||
|
|
||||||
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.
|
- For v2.3.2: <https://getbootstrap.com/2.3.2/>
|
||||||
|
- For v3.3.x: <https://getbootstrap.com/docs/3.3/>
|
||||||
|
|
||||||
[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
|
[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
|
||||||
|
|
||||||
|
|||||||
@@ -204,7 +204,7 @@
|
|||||||
summary: >
|
summary: >
|
||||||
`table-cell` borders not overlapping despite `margin-right: -1px`
|
`table-cell` borders not overlapping despite `margin-right: -1px`
|
||||||
upstream_bug: >
|
upstream_bug: >
|
||||||
Chromium#568691
|
Chromium#749848
|
||||||
origin: >
|
origin: >
|
||||||
Bootstrap#17438, Bootstrap#14237
|
Bootstrap#17438, Bootstrap#14237
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
+1
-37
@@ -1,37 +1 @@
|
|||||||
{
|
@$% Not a Bower package. Use a better package management tool instead. ^&*
|
||||||
"name": "bootstrap",
|
|
||||||
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
|
|
||||||
"keywords": [
|
|
||||||
"css",
|
|
||||||
"js",
|
|
||||||
"sass",
|
|
||||||
"mobile-first",
|
|
||||||
"responsive",
|
|
||||||
"front-end",
|
|
||||||
"framework",
|
|
||||||
"web"
|
|
||||||
],
|
|
||||||
"homepage": "https://getbootstrap.com",
|
|
||||||
"license": "MIT",
|
|
||||||
"moduleType": "globals",
|
|
||||||
"main": [
|
|
||||||
"scss/bootstrap.scss",
|
|
||||||
"dist/js/bootstrap.js"
|
|
||||||
],
|
|
||||||
"ignore": [
|
|
||||||
"/.*",
|
|
||||||
"/_*",
|
|
||||||
"about",
|
|
||||||
"assets",
|
|
||||||
"docs",
|
|
||||||
"js/tests",
|
|
||||||
"nuget",
|
|
||||||
"CNAME",
|
|
||||||
"composer.json",
|
|
||||||
"Gruntfile.js"
|
|
||||||
],
|
|
||||||
"dependencies": {
|
|
||||||
"jquery": ">=3.0.0",
|
|
||||||
"popper.js": "^1.12.3"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -9,7 +9,7 @@ module.exports = (ctx) => ({
|
|||||||
browsers: [
|
browsers: [
|
||||||
//
|
//
|
||||||
// Official browser support policy:
|
// Official browser support policy:
|
||||||
// https://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#supported-browsers
|
// https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#supported-browsers
|
||||||
//
|
//
|
||||||
'Chrome >= 45', // Exact version number here is kinda arbitrary
|
'Chrome >= 45', // Exact version number here is kinda arbitrary
|
||||||
'Firefox ESR',
|
'Firefox ESR',
|
||||||
|
|||||||
@@ -0,0 +1,51 @@
|
|||||||
|
const path = require('path')
|
||||||
|
const babel = require('rollup-plugin-babel')
|
||||||
|
const resolve = require('rollup-plugin-node-resolve')
|
||||||
|
const pkg = require(path.resolve(__dirname, '../package.json'))
|
||||||
|
const BUNDLE = process.env.BUNDLE === 'true'
|
||||||
|
const year = new Date().getFullYear()
|
||||||
|
|
||||||
|
var fileDest = 'bootstrap.js'
|
||||||
|
var external = ['jquery', 'popper.js']
|
||||||
|
const plugins = [
|
||||||
|
babel({
|
||||||
|
exclude: 'node_modules/**', // only transpile our source code
|
||||||
|
externalHelpersWhitelist: [ // include only required helpers
|
||||||
|
'typeof',
|
||||||
|
'classCallCheck',
|
||||||
|
'createClass',
|
||||||
|
'inherits',
|
||||||
|
'possibleConstructorReturn'
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
const globals = {
|
||||||
|
jquery: '$',
|
||||||
|
'popper.js': 'Popper'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (BUNDLE) {
|
||||||
|
fileDest = 'bootstrap.bundle.js'
|
||||||
|
// remove last entry in external array to bundle Popper
|
||||||
|
external.pop()
|
||||||
|
delete globals['popper.js']
|
||||||
|
plugins.push(resolve())
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
input: path.resolve(__dirname, '../js/src/index.js'),
|
||||||
|
output: {
|
||||||
|
file: path.resolve(__dirname, `../dist/js/${fileDest}`),
|
||||||
|
format: 'iife'
|
||||||
|
},
|
||||||
|
name: 'bootstrap',
|
||||||
|
external: external,
|
||||||
|
globals: globals,
|
||||||
|
plugins: plugins,
|
||||||
|
banner: `/*!
|
||||||
|
* Bootstrap v${pkg.version} (${pkg.homepage})
|
||||||
|
* Copyright 2011-${year} ${pkg.author}
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
*/
|
||||||
|
`
|
||||||
|
}
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
const fs = require('fs')
|
|
||||||
|
|
||||||
fs.readFile('package.json', (err, data) => {
|
|
||||||
if (err) {
|
|
||||||
throw err
|
|
||||||
}
|
|
||||||
|
|
||||||
const pkg = JSON.parse(data)
|
|
||||||
const year = new Date().getFullYear()
|
|
||||||
|
|
||||||
const stampTop =
|
|
||||||
`/*!
|
|
||||||
* Bootstrap v${pkg.version} (${pkg.homepage})
|
|
||||||
* Copyright 2011-${year} ${pkg.author}
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
|
||||||
*/
|
|
||||||
|
|
||||||
if (typeof jQuery === 'undefined') {
|
|
||||||
throw new Error('Bootstrap\\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\\'s JavaScript.')
|
|
||||||
}
|
|
||||||
|
|
||||||
(function ($) {
|
|
||||||
var version = $.fn.jquery.split(' ')[0].split('.')
|
|
||||||
if ((version[0] < 3) || (version[0] >= 4)) {
|
|
||||||
throw new Error('Bootstrap\\'s JavaScript requires at least jQuery v3.0.0 but less than v4.0.0')
|
|
||||||
}
|
|
||||||
})(jQuery);
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
`
|
|
||||||
const stampEnd = `
|
|
||||||
})();`
|
|
||||||
|
|
||||||
process.stdout.write(stampTop)
|
|
||||||
|
|
||||||
process.stdin.on('end', () => {
|
|
||||||
process.stdout.write(stampEnd)
|
|
||||||
})
|
|
||||||
|
|
||||||
process.stdin.pipe(process.stdout)
|
|
||||||
})
|
|
||||||
@@ -1,5 +1,8 @@
|
|||||||
{
|
{
|
||||||
"output" : {
|
"output": {
|
||||||
"comments": "/^!/"
|
"comments": "/^!/"
|
||||||
|
},
|
||||||
|
"compress": {
|
||||||
|
"typeofs": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -180,7 +180,7 @@ a,
|
|||||||
area,
|
area,
|
||||||
button,
|
button,
|
||||||
[role="button"],
|
[role="button"],
|
||||||
input,
|
input:not([type=range]),
|
||||||
label,
|
label,
|
||||||
select,
|
select,
|
||||||
summary,
|
summary,
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -1,2 +1,2 @@
|
|||||||
*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}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]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}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}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}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}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#868e96;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}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{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}
|
*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}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]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}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}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}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}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input:not([type=range]),label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#868e96;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}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{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}
|
||||||
/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||||
+1
-1
File diff suppressed because one or more lines are too long
+98
-35
@@ -244,7 +244,7 @@ a,
|
|||||||
area,
|
area,
|
||||||
button,
|
button,
|
||||||
[role="button"],
|
[role="button"],
|
||||||
input,
|
input:not([type=range]),
|
||||||
label,
|
label,
|
||||||
select,
|
select,
|
||||||
summary,
|
summary,
|
||||||
@@ -1689,51 +1689,105 @@ pre code {
|
|||||||
background-color: rgba(0, 0, 0, 0.075);
|
background-color: rgba(0, 0, 0, 0.075);
|
||||||
}
|
}
|
||||||
|
|
||||||
.thead-inverse th {
|
.table .thead-dark th {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #212529;
|
background-color: #212529;
|
||||||
}
|
|
||||||
|
|
||||||
.thead-default th {
|
|
||||||
color: #495057;
|
|
||||||
background-color: #e9ecef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-inverse {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #212529;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-inverse th,
|
|
||||||
.table-inverse td,
|
|
||||||
.table-inverse thead th {
|
|
||||||
border-color: #32383e;
|
border-color: #32383e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-inverse.table-bordered {
|
.table .thead-light th {
|
||||||
|
color: #495057;
|
||||||
|
background-color: #e9ecef;
|
||||||
|
border-color: #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-dark {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #212529;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-dark th,
|
||||||
|
.table-dark td,
|
||||||
|
.table-dark thead th {
|
||||||
|
border-color: #32383e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-dark.table-bordered {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-inverse.table-striped tbody tr:nth-of-type(odd) {
|
.table-dark.table-striped tbody tr:nth-of-type(odd) {
|
||||||
background-color: rgba(255, 255, 255, 0.05);
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-inverse.table-hover tbody tr:hover {
|
.table-dark.table-hover tbody tr:hover {
|
||||||
background-color: rgba(255, 255, 255, 0.075);
|
background-color: rgba(255, 255, 255, 0.075);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 991px) {
|
@media (max-width: 575px) {
|
||||||
.table-responsive {
|
.table-responsive-sm {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||||
}
|
}
|
||||||
.table-responsive.table-bordered {
|
.table-responsive-sm.table-bordered {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.table-responsive-md {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||||
|
}
|
||||||
|
.table-responsive-md.table-bordered {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.table-responsive-lg {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||||
|
}
|
||||||
|
.table-responsive-lg.table-bordered {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1199px) {
|
||||||
|
.table-responsive-xl {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||||
|
}
|
||||||
|
.table-responsive-xl.table-bordered {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-responsive {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-responsive.table-bordered {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -1825,6 +1879,7 @@ select.form-control:focus::-ms-value {
|
|||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
|
background-color: transparent;
|
||||||
border: solid transparent;
|
border: solid transparent;
|
||||||
border-width: 1px 0;
|
border-width: 1px 0;
|
||||||
}
|
}
|
||||||
@@ -3475,6 +3530,8 @@ tbody.collapse.show {
|
|||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
-ms-flex-preferred-size: 100%;
|
-ms-flex-preferred-size: 100%;
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
|
-ms-flex-positive: 1;
|
||||||
|
flex-grow: 1;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
@@ -3542,6 +3599,8 @@ tbody.collapse.show {
|
|||||||
.navbar-expand-sm .navbar-collapse {
|
.navbar-expand-sm .navbar-collapse {
|
||||||
display: -ms-flexbox !important;
|
display: -ms-flexbox !important;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
-ms-flex-preferred-size: auto;
|
||||||
|
flex-basis: auto;
|
||||||
}
|
}
|
||||||
.navbar-expand-sm .navbar-toggler {
|
.navbar-expand-sm .navbar-toggler {
|
||||||
display: none;
|
display: none;
|
||||||
@@ -3588,6 +3647,8 @@ tbody.collapse.show {
|
|||||||
.navbar-expand-md .navbar-collapse {
|
.navbar-expand-md .navbar-collapse {
|
||||||
display: -ms-flexbox !important;
|
display: -ms-flexbox !important;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
-ms-flex-preferred-size: auto;
|
||||||
|
flex-basis: auto;
|
||||||
}
|
}
|
||||||
.navbar-expand-md .navbar-toggler {
|
.navbar-expand-md .navbar-toggler {
|
||||||
display: none;
|
display: none;
|
||||||
@@ -3634,6 +3695,8 @@ tbody.collapse.show {
|
|||||||
.navbar-expand-lg .navbar-collapse {
|
.navbar-expand-lg .navbar-collapse {
|
||||||
display: -ms-flexbox !important;
|
display: -ms-flexbox !important;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
-ms-flex-preferred-size: auto;
|
||||||
|
flex-basis: auto;
|
||||||
}
|
}
|
||||||
.navbar-expand-lg .navbar-toggler {
|
.navbar-expand-lg .navbar-toggler {
|
||||||
display: none;
|
display: none;
|
||||||
@@ -3680,6 +3743,8 @@ tbody.collapse.show {
|
|||||||
.navbar-expand-xl .navbar-collapse {
|
.navbar-expand-xl .navbar-collapse {
|
||||||
display: -ms-flexbox !important;
|
display: -ms-flexbox !important;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
-ms-flex-preferred-size: auto;
|
||||||
|
flex-basis: auto;
|
||||||
}
|
}
|
||||||
.navbar-expand-xl .navbar-toggler {
|
.navbar-expand-xl .navbar-toggler {
|
||||||
display: none;
|
display: none;
|
||||||
@@ -3729,6 +3794,8 @@ tbody.collapse.show {
|
|||||||
.navbar-expand .navbar-collapse {
|
.navbar-expand .navbar-collapse {
|
||||||
display: -ms-flexbox !important;
|
display: -ms-flexbox !important;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
-ms-flex-preferred-size: auto;
|
||||||
|
flex-basis: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-expand .navbar-toggler {
|
.navbar-expand .navbar-toggler {
|
||||||
@@ -4032,6 +4099,10 @@ tbody.collapse.show {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
@@ -4039,16 +4110,6 @@ tbody.collapse.show {
|
|||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb::after {
|
|
||||||
display: block;
|
|
||||||
clear: both;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-item {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-item + .breadcrumb-item::before {
|
.breadcrumb-item + .breadcrumb-item::before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
@@ -4811,6 +4872,7 @@ button.close {
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
@@ -4819,6 +4881,7 @@ button.close {
|
|||||||
display: flex;
|
display: flex;
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
pointer-events: auto;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
@@ -5583,11 +5646,11 @@ a.bg-dark:focus, a.bg-dark:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.rounded-circle {
|
.rounded-circle {
|
||||||
border-radius: 50%;
|
border-radius: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-0 {
|
.rounded-0 {
|
||||||
border-radius: 0;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clearfix::after {
|
.clearfix::after {
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+6350
File diff suppressed because it is too large
Load Diff
Vendored
+6
File diff suppressed because one or more lines are too long
+830
-758
File diff suppressed because it is too large
Load Diff
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -3,7 +3,7 @@ layout: docs
|
|||||||
title: History
|
title: History
|
||||||
description: A brief overview of the history of Bootstrap.
|
description: A brief overview of the history of Bootstrap.
|
||||||
redirect_from:
|
redirect_from:
|
||||||
- /about/
|
- /docs/4.0/about/
|
||||||
group: about
|
group: about
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -11,4 +11,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.
|
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-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.
|
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]({{ site.repo }}/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.
|
||||||
|
|||||||
@@ -31,4 +31,4 @@ Bootstrap is released under the MIT license and is copyright {{ site.time | date
|
|||||||
- Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
|
- Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
|
||||||
- Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)
|
- Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)
|
||||||
|
|
||||||
The full Bootstrap license is located [in the project repository]({{ site.repo }}/blob/master/LICENSE) for more information.
|
The full Bootstrap license is located [in the project repository]({{ site.repo }}/blob/v{{ site.current_version }}/LICENSE) for more information.
|
||||||
|
|||||||
@@ -19,4 +19,4 @@ Bootstrap is maintained by the founding team and a small group of invaluable cor
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
Get involved with Bootstrap development by [opening an issue](https://github.com/twbs/bootstrap/issues/new) or submitting a pull request. Read our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md) for information on how we develop.
|
Get involved with Bootstrap development by [opening an issue]({{ site.repo }}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{ site.repo }}/blob/v{{ site.current_version }}/.github/CONTRIBUTING.md) for information on how we develop.
|
||||||
|
|||||||
@@ -4,31 +4,36 @@ title: Breadcrumb
|
|||||||
description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
|
description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
|
||||||
group: components
|
group: components
|
||||||
---
|
---
|
||||||
|
## Overview
|
||||||
|
|
||||||
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
|
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<ol class="breadcrumb">
|
|
||||||
<li class="breadcrumb-item active">Home</li>
|
<nav aria-label="breadcrumb" role="navigation">
|
||||||
</ol>
|
<ol class="breadcrumb">
|
||||||
<ol class="breadcrumb">
|
<li class="breadcrumb-item active" aria-current="page">Home</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav aria-label="breadcrumb" role="navigation">
|
||||||
|
<ol class="breadcrumb">
|
||||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||||
<li class="breadcrumb-item active">Library</li>
|
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||||
</ol>
|
</ol>
|
||||||
<ol class="breadcrumb">
|
</nav>
|
||||||
|
|
||||||
|
<nav aria-label="breadcrumb" role="navigation">
|
||||||
|
<ol class="breadcrumb">
|
||||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||||
<li class="breadcrumb-item active">Data</li>
|
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||||
</ol>
|
</ol>
|
||||||
{% endexample %}
|
|
||||||
|
|
||||||
Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup.
|
|
||||||
|
|
||||||
{% example html %}
|
|
||||||
<nav class="breadcrumb">
|
|
||||||
<a class="breadcrumb-item" href="#">Home</a>
|
|
||||||
<a class="breadcrumb-item" href="#">Library</a>
|
|
||||||
<a class="breadcrumb-item" href="#">Data</a>
|
|
||||||
<span class="breadcrumb-item active">Bootstrap</span>
|
|
||||||
</nav>
|
</nav>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
|
## Accessibility
|
||||||
|
|
||||||
|
Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
|
||||||
|
|
||||||
|
For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
|
||||||
|
|||||||
@@ -33,14 +33,14 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
|
|||||||
|
|
||||||
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported.
|
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported.
|
||||||
|
|
||||||
### Blocks
|
### Body
|
||||||
|
|
||||||
The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.
|
The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
This is some text within a card block.
|
This is some text within a card body.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ Multiple `<button>` or `<a>` can show and hide an element if they each referenc
|
|||||||
{% example html %}
|
{% example html %}
|
||||||
<p>
|
<p>
|
||||||
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle second element</button>
|
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||||
</p>
|
</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@@ -216,7 +216,7 @@ $('#myCollapsible').collapse({
|
|||||||
|
|
||||||
#### `.collapse('toggle')`
|
#### `.collapse('toggle')`
|
||||||
|
|
||||||
Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs).
|
Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs).
|
||||||
|
|
||||||
#### `.collapse('show')`
|
#### `.collapse('show')`
|
||||||
|
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ toc: true
|
|||||||
|
|
||||||
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision.](http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/)
|
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision.](http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/)
|
||||||
|
|
||||||
Dropdowns are built on a third party library, [Popper.js](https://popper.js.org), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{ site.cdn.popper }}) before Bootstrap's JavaScript.
|
Dropdowns are built on a third party library, [Popper.js](https://popper.js.org), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{ site.cdn.popper }}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js.
|
||||||
|
|
||||||
If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
|
If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
|
||||||
|
|
||||||
@@ -432,7 +432,7 @@ Historically dropdown menu contents *had* to be links, but that's no longer the
|
|||||||
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
|
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
|
||||||
|
|
||||||
{% callout info %}
|
{% callout info %}
|
||||||
**Heads up!** Dropdowns are positioned only with CSS and may need some additional styles for exact alignment.
|
**Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
|
||||||
{% endcallout %}
|
{% endcallout %}
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
@@ -574,7 +574,7 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
|
|||||||
|
|
||||||
### Options
|
### Options
|
||||||
|
|
||||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-placement=""`.
|
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`.
|
||||||
|
|
||||||
<table class="table table-bordered table-striped table-responsive">
|
<table class="table table-bordered table-striped table-responsive">
|
||||||
<thead>
|
<thead>
|
||||||
@@ -586,14 +586,6 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
|
||||||
<td>placement</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>'bottom'</td>
|
|
||||||
<td>
|
|
||||||
<p>How to position the popover - top | bottom.</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>offset</td>
|
<td>offset</td>
|
||||||
<td>number | string</td>
|
<td>number | string</td>
|
||||||
|
|||||||
@@ -337,7 +337,10 @@ More complex layouts can also be created with the grid system.
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group col-md-4">
|
<div class="form-group col-md-4">
|
||||||
<label for="inputState" class="col-form-label">State</label>
|
<label for="inputState" class="col-form-label">State</label>
|
||||||
<select id="inputState" class="form-control">Choose</select>
|
<select id="inputState" class="form-control">
|
||||||
|
<option selected>Choose...</option>
|
||||||
|
<option>...</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group col-md-2">
|
<div class="form-group col-md-2">
|
||||||
<label for="inputZip" class="col-form-label">Zip</label>
|
<label for="inputZip" class="col-form-label">Zip</label>
|
||||||
@@ -645,9 +648,9 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
|
|||||||
<option>Disabled select</option>
|
<option>Disabled select</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkbox">
|
<div class="form-check">
|
||||||
<label>
|
<label class="form-check-label">
|
||||||
<input type="checkbox"> Can't check this
|
<input class="form-check-input" type="checkbox"> Can't check this
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
@@ -658,7 +661,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
|
|||||||
{% callout warning %}
|
{% callout warning %}
|
||||||
#### Caveat with anchors
|
#### Caveat with anchors
|
||||||
|
|
||||||
By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
|
By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 10, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
|
||||||
{% endcallout %}
|
{% endcallout %}
|
||||||
|
|
||||||
{% callout danger %}
|
{% callout danger %}
|
||||||
@@ -684,7 +687,7 @@ Here's how form validation works with Bootstrap:
|
|||||||
- As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server side validation](#server-side). They do not require a `.was-validated` parent class.
|
- As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server side validation](#server-side). They do not require a `.was-validated` parent class.
|
||||||
- Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript.
|
- Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript.
|
||||||
- All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls.
|
- All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls.
|
||||||
- Feedback messages may utilize the [browser defaults](#browser-default) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
|
- Feedback messages may utilize the [browser defaults](#browser-defaults) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
|
||||||
- You may provide custom validity messages with `setCustomValidity` in JavaScript.
|
- You may provide custom validity messages with `setCustomValidity` in JavaScript.
|
||||||
|
|
||||||
With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.
|
With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.
|
||||||
@@ -1004,8 +1007,8 @@ Here's how it works:
|
|||||||
|
|
||||||
- We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser.
|
- We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser.
|
||||||
- We hide the default file `<input>` via `opacity`.
|
- We hide the default file `<input>` via `opacity`.
|
||||||
- We use `:after` to generate a custom background and directive (*Choose file...*).
|
- We use `::after` to generate a custom background and directive (*Choose file...*).
|
||||||
- We use `:before` to generate and position the *Browse* button.
|
- We use `::before` to generate and position the *Browse* button.
|
||||||
- We declare a `height` on the `<input>` for proper spacing for surrounding content.
|
- We declare a `height` on the `<input>` for proper spacing for surrounding content.
|
||||||
|
|
||||||
In other words, it's an entirely custom element, all generated via CSS.
|
In other words, it's an entirely custom element, all generated via CSS.
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ Be sure to **not use the standard `.btn` classes here**.
|
|||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<div class="list-group">
|
<div class="list-group">
|
||||||
<a href="#" class="list-group-item active">
|
<a href="#" class="list-group-item list-group-item-action active">
|
||||||
Cras justo odio
|
Cras justo odio
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||||
@@ -244,7 +244,7 @@ You can activate a list group navigation without writing any JavaScript by simpl
|
|||||||
Enable tabbable list item via JavaScript (each list item needs to be activated individually):
|
Enable tabbable list item via JavaScript (each list item needs to be activated individually):
|
||||||
|
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myList a').click(function (e) {
|
$('#myList a').on('click', function (e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
$(this).tab('show')
|
$(this).tab('show')
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
|
|||||||
|
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myModal').on('shown.bs.modal', function () {
|
$('#myModal').on('shown.bs.modal', function () {
|
||||||
$('#myInput').focus()
|
$('#myInput').trigger('focus')
|
||||||
})
|
})
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|||||||
@@ -70,7 +70,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
|
|||||||
|
|
||||||
<!-- As a heading -->
|
<!-- As a heading -->
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-light bg-light">
|
||||||
<span class="h1" class="navbar-brand mb-0">Navbar</span>
|
<span class="navbar-brand mb-0 h1">Navbar</span>
|
||||||
</nav>
|
</nav>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
@@ -165,7 +165,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
|
|||||||
<a class="nav-link" href="#">Pricing</a>
|
<a class="nav-link" href="#">Pricing</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
Dropdown link
|
Dropdown link
|
||||||
</a>
|
</a>
|
||||||
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
||||||
|
|||||||
@@ -554,7 +554,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
|
|||||||
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
|
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
|
||||||
|
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myTab a').click(function (e) {
|
$('#myTab a').on('click', function (e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
$(this).tab('show')
|
$(this).tab('show')
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ toc: true
|
|||||||
Things to know when using the popover plugin:
|
Things to know when using the popover plugin:
|
||||||
|
|
||||||
|
|
||||||
- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js in order for popovers to work!
|
- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work!
|
||||||
- Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) as a dependency.
|
- Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) as a dependency.
|
||||||
- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
|
- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
|
||||||
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
|
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ toc: true
|
|||||||
|
|
||||||
Things to know when using the tooltip plugin:
|
Things to know when using the tooltip plugin:
|
||||||
|
|
||||||
- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js in order for tooltips to work!
|
- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work!
|
||||||
- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
|
- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
|
||||||
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
|
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||||
- Tooltips with zero-length titles are never displayed.
|
- Tooltips with zero-length titles are never displayed.
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
|
|||||||
|
|
||||||
The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:
|
The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:
|
||||||
|
|
||||||
- The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
|
- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
|
||||||
- No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
|
- No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
|
||||||
- The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies.
|
- The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies.
|
||||||
- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
|
- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
|
||||||
@@ -339,7 +339,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
|
|||||||
{% callout warning %}
|
{% callout warning %}
|
||||||
#### jQuery incompatibility
|
#### jQuery incompatibility
|
||||||
|
|
||||||
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
|
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
|
||||||
{% endcallout %}
|
{% endcallout %}
|
||||||
|
|
||||||
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
|
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
|
||||||
|
|||||||
+125
-72
@@ -16,10 +16,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
|
|||||||
<table class="table">
|
<table class="table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -51,10 +51,10 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta
|
|||||||
<table class="table table-dark">
|
<table class="table table-dark">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -88,10 +88,10 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
|
|||||||
<table class="table">
|
<table class="table">
|
||||||
<thead class="thead-dark">
|
<thead class="thead-dark">
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -119,10 +119,10 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
|
|||||||
<table class="table">
|
<table class="table">
|
||||||
<thead class="thead-light">
|
<thead class="thead-light">
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -156,10 +156,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
|
|||||||
<table class="table table-striped">
|
<table class="table table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -189,10 +189,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
|
|||||||
<table class="table table-striped table-dark">
|
<table class="table table-striped table-dark">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -226,10 +226,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.
|
|||||||
<table class="table table-bordered">
|
<table class="table table-bordered">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -264,10 +264,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.
|
|||||||
<table class="table table-bordered table-dark">
|
<table class="table table-bordered table-dark">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -306,10 +306,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
|
|||||||
<table class="table table-hover">
|
<table class="table table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -338,10 +338,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
|
|||||||
<table class="table table-hover table-dark">
|
<table class="table table-hover table-dark">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -374,10 +374,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
|
|||||||
<table class="table table-sm">
|
<table class="table table-sm">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -406,10 +406,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
|
|||||||
<table class="table table-sm table-dark">
|
<table class="table table-sm table-dark">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>First Name</th>
|
<th scope="col">First Name</th>
|
||||||
<th>Last Name</th>
|
<th scope="col">Last Name</th>
|
||||||
<th>Username</th>
|
<th scope="col">Username</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -442,10 +442,10 @@ Use contextual classes to color table rows or individual cells.
|
|||||||
<table class="table">
|
<table class="table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Type</th>
|
<th scope="col">Type</th>
|
||||||
<th>Column heading</th>
|
<th scope="col">Column heading</th>
|
||||||
<th>Column heading</th>
|
<th scope="col">Column heading</th>
|
||||||
<th>Column heading</th>
|
<th scope="col">Column heading</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -493,10 +493,10 @@ Regular table background variants are not available with the dark table, however
|
|||||||
<table class="table table-dark">
|
<table class="table table-dark">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>Column heading</th>
|
<th scope="col">Column heading</th>
|
||||||
<th>Column heading</th>
|
<th scope="col">Column heading</th>
|
||||||
<th>Column heading</th>
|
<th scope="col">Column heading</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -581,7 +581,9 @@ Regular table background variants are not available with the dark table, however
|
|||||||
|
|
||||||
## Responsive tables
|
## Responsive tables
|
||||||
|
|
||||||
Create responsive tables by adding `.table-responsive` to any `.table` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
|
Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `.table` to make them scroll horizontally at each `max-width` breakpoint 575px, 767px, 991px, and 1199px, respectively.
|
||||||
|
|
||||||
|
For responsive tables that always scroll horizontally when the table is wider than its container, add the `.table-responsive` class on `.table`.
|
||||||
|
|
||||||
{% callout warning %}
|
{% callout warning %}
|
||||||
#### Vertical clipping/truncation
|
#### Vertical clipping/truncation
|
||||||
@@ -593,13 +595,16 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
|
|||||||
<table class="table table-responsive">
|
<table class="table table-responsive">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
|
<th scope="col">Table heading</th>
|
||||||
|
<th scope="col">Table heading</th>
|
||||||
|
<th scope="col">Table heading</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -611,6 +616,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
|
|||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">2</th>
|
<th scope="row">2</th>
|
||||||
@@ -620,6 +628,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
|
|||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">3</th>
|
<th scope="row">3</th>
|
||||||
@@ -629,20 +640,23 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
|
|||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
<td>Table cell</td>
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<table class="table table-bordered table-responsive">
|
<table class="table table-bordered table-responsive-lg">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th scope="col">#</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
<th>Table heading</th>
|
<th scope="col">Table heading</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -682,3 +696,42 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
|
|||||||
...
|
...
|
||||||
</table>
|
</table>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
## Captions
|
||||||
|
|
||||||
|
A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
|
||||||
|
|
||||||
|
{% example html %}
|
||||||
|
<table class="table">
|
||||||
|
<caption>List of users</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">First Name</th>
|
||||||
|
<th scope="col">Last Name</th>
|
||||||
|
<th scope="col">Username</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">1</th>
|
||||||
|
<td>Mark</td>
|
||||||
|
<td>Otto</td>
|
||||||
|
<td>@mdo</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">2</th>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>@fat</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">3</th>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>@twitter</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{% endexample %}
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ h6, .h6 {
|
|||||||
.nav-link.active {
|
.nav-link.active {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.nav-link.active:after {
|
.nav-link.active::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$('[data-toggle="offcanvas"]').click(function () {
|
$('[data-toggle="offcanvas"]').on('click', function () {
|
||||||
$('.row-offcanvas').toggleClass('active')
|
$('.row-offcanvas').toggleClass('active')
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -133,7 +133,7 @@ Bootstrap includes a workaround for this, although it is disabled by default. By
|
|||||||
|
|
||||||
Even in some modern browsers, printing can be quirky.
|
Even in some modern browsers, printing can be quirky.
|
||||||
|
|
||||||
As of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS:
|
As of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868]({{ site.repo }}/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS:
|
||||||
|
|
||||||
{% highlight css %}
|
{% highlight css %}
|
||||||
@media print {
|
@media print {
|
||||||
|
|||||||
@@ -8,13 +8,13 @@ toc: true
|
|||||||
|
|
||||||
## Tooling setup
|
## Tooling setup
|
||||||
|
|
||||||
Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json](https://github.com/twbs/bootstrap/blob/v4-dev/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more.
|
Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more.
|
||||||
|
|
||||||
To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock:
|
To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock:
|
||||||
|
|
||||||
1. [Download and install Node](https://nodejs.org/download/), which we use to manage our dependencies.
|
1. [Download and install Node](https://nodejs.org/download/), which we use to manage our dependencies.
|
||||||
2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json](https://github.com/twbs/bootstrap/blob/master/package.json).
|
2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json).
|
||||||
4. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
|
3. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
|
||||||
- **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
|
- **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
|
||||||
|
|
||||||
When completed, you'll be able to run the various commands provided from the command line.
|
When completed, you'll be able to run the various commands provided from the command line.
|
||||||
@@ -24,7 +24,7 @@ When completed, you'll be able to run the various commands provided from the com
|
|||||||
|
|
||||||
## Using NPM scripts
|
## Using NPM scripts
|
||||||
|
|
||||||
Our [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) includes the following commands and tasks:
|
Our [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) includes the following commands and tasks:
|
||||||
|
|
||||||
| Task | Description |
|
| Task | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -36,7 +36,7 @@ Our [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) i
|
|||||||
|
|
||||||
Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
|
Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
|
||||||
|
|
||||||
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/build/postcss.config.js`](https://github.com/twbs/bootstrap/blob/v4-dev/build/postcss.config.js) for details.
|
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [/build/postcss.config.js]({{ site.repo }}/blob/v{{ site.current_version }}/build/postcss.config.js) for details.
|
||||||
|
|
||||||
## Local documentation
|
## Local documentation
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: docs
|
layout: docs
|
||||||
title: Download
|
title: Download
|
||||||
description: Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, Bower, RubyGems, and more.
|
description: Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
|
||||||
group: getting-started
|
group: getting-started
|
||||||
toc: true
|
toc: true
|
||||||
---
|
---
|
||||||
@@ -87,14 +87,6 @@ You can also install and manage Bootstrap's Sass and JavaScript using [Composer]
|
|||||||
composer require twbs/bootstrap:{{ site.current_version }}
|
composer require twbs/bootstrap:{{ site.current_version }}
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
### Bower
|
|
||||||
|
|
||||||
Install and manage Bootstrap's Sass and JavaScript using [Bower](https://bower.io).
|
|
||||||
|
|
||||||
{% highlight bash %}
|
|
||||||
bower install bootstrap#v{{ site.current_version }}
|
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
### NuGet
|
### NuGet
|
||||||
|
|
||||||
If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org):
|
If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org):
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee
|
|||||||
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
|
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
Add our optional JavaScript plugins, jQuery, and [Popper.js](https://github.com/FezVrasta/popper.js)) near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend on them. While we use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/) in our docs, the full version is also supported.
|
Add our optional JavaScript plugins, jQuery, and [Popper.js](https://github.com/FezVrasta/popper.js) near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend on them. While we use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/) in our docs, the full version is also supported.
|
||||||
|
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
|
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
|
||||||
@@ -38,6 +38,7 @@ Be sure to have your pages set up with the latest design and development standar
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<title>Hello, world!</title>
|
||||||
<!-- Required meta tags -->
|
<!-- Required meta tags -->
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
@@ -96,7 +97,7 @@ On the rare occasion you need to override it, use something like the following:
|
|||||||
}
|
}
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
With the above snippet, nested elements—including generated content via `:before` and `:after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
|
With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
|
||||||
|
|
||||||
Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
|
Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
|
||||||
|
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ Plugins can be included individually (using Bootstrap's individual `*.js` files)
|
|||||||
|
|
||||||
## Dependencies
|
## Dependencies
|
||||||
|
|
||||||
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that **all plugins depend on jQuery** (this means jQuery must be included **before** the plugin files). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported.
|
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that **all plugins depend on jQuery** (this means jQuery must be included **before** the plugin files). [Consult our `package.json`]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) to see which versions of jQuery are supported.
|
||||||
|
|
||||||
Our tooltips and popovers also depend on [Popper.js](https://github.com/FezVrasta/popper.js).
|
Our tooltips and popovers also depend on [Popper.js](https://github.com/FezVrasta/popper.js).
|
||||||
|
|
||||||
|
|||||||
@@ -46,11 +46,11 @@ All colors available in Bootstrap 4, available as Sass variables and a Sass map
|
|||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
{% for color in site.data.colors %}
|
{% for color in site.data.colors %}
|
||||||
<div class="col-md-4">
|
|
||||||
{% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
|
{% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
|
||||||
|
<div class="col-md-4">
|
||||||
<div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
|
<div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
|
||||||
{% endunless %}
|
|
||||||
</div>
|
</div>
|
||||||
|
{% endunless %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -727,4 +727,4 @@ $container-max-widths: (
|
|||||||
);
|
);
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints.
|
When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`).
|
||||||
|
|||||||
+23
-6
@@ -6,9 +6,22 @@ group: migration
|
|||||||
toc: true
|
toc: true
|
||||||
---
|
---
|
||||||
|
|
||||||
{% callout info %}
|
## Beta 2 changes
|
||||||
**Heads up!** This will be in flux as work on the v4 alphas progresses. Until then consider it incomplete, and we'd love pull requests to help keep it up to date.
|
While in beta, we aim to have no breaking changes. However, things don't always go as planned. Below are the breaking changes to bear in mind when moving from Beta 1 to Beta 2.
|
||||||
{% endcallout %}
|
|
||||||
|
### Breaking
|
||||||
|
|
||||||
|
- Removed `$badge-color` variable and its usage on `.badge`. We use a color contrast function to pick a `color` based on the `background-color`, so the variable is unnecessary.
|
||||||
|
- Renamed `grayscale()` function to `gray()` to avoid breaking conflict with the CSS native `grayscale` filter.
|
||||||
|
- Renamed `.table-inverse`, `.thead-inverse`, and `.thead-default` to `.*-dark` and `.*-light`, matching our color schemes used elsewhere.
|
||||||
|
- Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the `.table-responsive` you've been using is more like `.table-responsive-md`. You may now use `.table-responsive` or `.table-responsive-{sm,md,lg,xl}` as needed.
|
||||||
|
- Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). [See bower/bower#2298](https://github.com/bower/bower/issues/2298) for details.
|
||||||
|
- Bootstrap now requires jQuery 3.0.0 or higher.
|
||||||
|
|
||||||
|
### Highlights
|
||||||
|
|
||||||
|
- Introduced new `pointer-events` usage on modals. The outer `.modal-dialog` passes through events with `pointer-events: none` for custom click handling (making it possible to just listen on the `.modal-backdrop` for any clicks), and then counteracts it for the actual `.modal-content` with `pointer-events: auto`.
|
||||||
|
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
@@ -100,21 +113,21 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version
|
|||||||
- Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now.
|
- Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now.
|
||||||
- Dropped `.help-block` and replaced it with `.form-text` for block-level help text. For inline help text and other flexible options, use utility classes like `.text-muted`.
|
- Dropped `.help-block` and replaced it with `.form-text` for block-level help text. For inline help text and other flexible options, use utility classes like `.text-muted`.
|
||||||
- Dropped `.radio-inline` and `.checkbox-inline`.
|
- Dropped `.radio-inline` and `.checkbox-inline`.
|
||||||
|
- Consolidated `.checkbox` and `.radio` into `.form-check` and the various `.form-check-*` classes.
|
||||||
- Horizontal forms overhauled:
|
- Horizontal forms overhauled:
|
||||||
- Dropped the `.form-horizontal` class requirement.
|
- Dropped the `.form-horizontal` class requirement.
|
||||||
- `.form-group` no longer applies styles from the `.row` via mixin, so `.row` is now required for horizontal grid layouts (e.g., `<div class="form-group row">`).
|
- `.form-group` no longer applies styles from the `.row` via mixin, so `.row` is now required for horizontal grid layouts (e.g., `<div class="form-group row">`).
|
||||||
- Added new `.form-control-label` class to vertically center labels with `.form-control`s.
|
- Added new `.form-control-label` class to vertically center labels with `.form-control`s.
|
||||||
- Added new `.form-row` for compact form layouts with the grid classes (swap your `.row` for a `.form-row` and go).
|
- Added new `.form-row` for compact form layouts with the grid classes (swap your `.row` for a `.form-row` and go).
|
||||||
- Added custom forms support (for checkboxes, radios, selects, and file inputs).
|
- Added custom forms support (for checkboxes, radios, selects, and file inputs).
|
||||||
- Added HTML5 form validation support via CSS's `:invalid` and `:valid` pseudo-classes.
|
- Replaced `.has-error`, `.has-warning`, and `.has-success` classes with HTML5 form validation via CSS's `:invalid` and `:valid` pseudo-classes.
|
||||||
- Renamed `.has-error` to `.has-danger`.
|
|
||||||
- Renamed `.form-control-static` to `.form-control-plaintext`.
|
- Renamed `.form-control-static` to `.form-control-plaintext`.
|
||||||
|
|
||||||
### Buttons
|
### Buttons
|
||||||
|
|
||||||
- Renamed `.btn-default` to `.btn-secondary`.
|
- Renamed `.btn-default` to `.btn-secondary`.
|
||||||
- Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's.
|
- Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's.
|
||||||
- The [stateful button](https://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
- The [stateful button]({{ site.baseurl }}/docs/3.3/javascript/#buttons-stateful) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
||||||
- Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
|
- Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
|
||||||
- Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility).
|
- Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility).
|
||||||
|
|
||||||
@@ -206,6 +219,10 @@ Dropped entirely for the new card component.
|
|||||||
- `.panel-footer` to `.card-footer`
|
- `.panel-footer` to `.card-footer`
|
||||||
- `.panel-primary`, `.panel-success`, `.panel-info`, `.panel-warning`, and `.panel-danger` have been dropped for `.bg-`, `.text-`, and `.border` utilities generated from our `$theme-colors` Sass map.
|
- `.panel-primary`, `.panel-success`, `.panel-info`, `.panel-warning`, and `.panel-danger` have been dropped for `.bg-`, `.text-`, and `.border` utilities generated from our `$theme-colors` Sass map.
|
||||||
|
|
||||||
|
### Progress
|
||||||
|
|
||||||
|
- Replaced contextual `.progress-bar-*` classes with `.bg-*` utilities. For example, `class="progress-bar progress-bar-danger"` becomes `class="progress-bar bg-danger"`.
|
||||||
|
|
||||||
### Carousel
|
### Carousel
|
||||||
|
|
||||||
- Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
|
- Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
|
||||||
|
|||||||
@@ -47,6 +47,29 @@ Responsive variations also exist for every single utility mentioned above.
|
|||||||
- `.d{{ bp.abbr }}-flex`
|
- `.d{{ bp.abbr }}-flex`
|
||||||
- `.d{{ bp.abbr }}-inline-flex`{% endfor %}
|
- `.d{{ bp.abbr }}-inline-flex`{% endfor %}
|
||||||
|
|
||||||
|
## Hiding Elements
|
||||||
|
|
||||||
|
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.
|
||||||
|
|
||||||
|
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-none` classes for any responsive screen variation.
|
||||||
|
|
||||||
|
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none.d-md-block.d-xl-none` will hide the element for all screen sizes except on medium and large devices.
|
||||||
|
|
||||||
|
| Screen Size | Class |
|
||||||
|
| --- | --- |
|
||||||
|
| Hidden on all | `d-none` |
|
||||||
|
| Hidden only on xs | `d-none d-sm-block` |
|
||||||
|
| Hidden only on sm | `d-sm-none d-md-block` |
|
||||||
|
| Hidden only on md | `d-md-none d-lg-block` |
|
||||||
|
| Hidden only on lg | `d-lg-none d-xl-block` |
|
||||||
|
| Hidden only on xl | `d-xl-none` |
|
||||||
|
| Visible on all | `d-block` |
|
||||||
|
| Visible only on xs | `d-block d-sm-none` |
|
||||||
|
| Visible only on sm | `d-none d-sm-block d-md-none` |
|
||||||
|
| Visible only on md | `d-none d-md-block d-lg-none` |
|
||||||
|
| Visible only on lg | `d-none d-lg-block d-xl-none` |
|
||||||
|
| Visible only on xl | `d-none d-xl-block` |
|
||||||
|
|
||||||
## Display in print
|
## Display in print
|
||||||
|
|
||||||
Change the `display` value of elements when printing with our print display utilities.
|
Change the `display` value of elements when printing with our print display utilities.
|
||||||
|
|||||||
+1
-4
@@ -34,7 +34,7 @@ layout: home
|
|||||||
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
|
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
|
||||||
{% include icons/import.svg width="32" height="32" class="text-primary mb-2" %}
|
{% include icons/import.svg width="32" height="32" class="text-primary mb-2" %}
|
||||||
<h3>Installation</h3>
|
<h3>Installation</h3>
|
||||||
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
|
<p>Include Bootstrap's source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don't include documentation, but do include our build system and readme.</p>
|
||||||
|
|
||||||
{% highlight sh %}
|
{% highlight sh %}
|
||||||
npm install bootstrap@{{ site.current_version }}
|
npm install bootstrap@{{ site.current_version }}
|
||||||
@@ -44,9 +44,6 @@ npm install bootstrap@{{ site.current_version }}
|
|||||||
gem install bootstrap -v 4.0.0.beta
|
gem install bootstrap -v 4.0.0.beta
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
{% highlight sh %}
|
|
||||||
bower install bootstrap#v{{ site.current_version }}
|
|
||||||
{% endhighlight %}
|
|
||||||
<hr class="half-rule">
|
<hr class="half-rule">
|
||||||
<a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download">Read installation docs</a>
|
<a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download">Read installation docs</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Vendored
+38
-24
@@ -1,3 +1,5 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
|
|
||||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
@@ -9,7 +11,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var Alert = function ($) {
|
var Alert = function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@@ -56,9 +58,13 @@ var Alert = function ($) {
|
|||||||
|
|
||||||
// getters
|
// getters
|
||||||
|
|
||||||
|
_createClass(Alert, [{
|
||||||
|
key: 'close',
|
||||||
|
|
||||||
|
|
||||||
// public
|
// public
|
||||||
|
|
||||||
Alert.prototype.close = function close(element) {
|
value: function close(element) {
|
||||||
element = element || this._element;
|
element = element || this._element;
|
||||||
|
|
||||||
var rootElement = this._getRootElement(element);
|
var rootElement = this._getRootElement(element);
|
||||||
@@ -69,16 +75,19 @@ var Alert = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this._removeElement(rootElement);
|
this._removeElement(rootElement);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Alert.prototype.dispose = function dispose() {
|
key: 'dispose',
|
||||||
|
value: function dispose() {
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY);
|
||||||
this._element = null;
|
this._element = null;
|
||||||
};
|
}
|
||||||
|
|
||||||
// private
|
// private
|
||||||
|
|
||||||
Alert.prototype._getRootElement = function _getRootElement(element) {
|
}, {
|
||||||
|
key: '_getRootElement',
|
||||||
|
value: function _getRootElement(element) {
|
||||||
var selector = Util.getSelectorFromElement(element);
|
var selector = Util.getSelectorFromElement(element);
|
||||||
var parent = false;
|
var parent = false;
|
||||||
|
|
||||||
@@ -91,16 +100,18 @@ var Alert = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return parent;
|
return parent;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Alert.prototype._triggerCloseEvent = function _triggerCloseEvent(element) {
|
key: '_triggerCloseEvent',
|
||||||
|
value: function _triggerCloseEvent(element) {
|
||||||
var closeEvent = $.Event(Event.CLOSE);
|
var closeEvent = $.Event(Event.CLOSE);
|
||||||
|
|
||||||
$(element).trigger(closeEvent);
|
$(element).trigger(closeEvent);
|
||||||
return closeEvent;
|
return closeEvent;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Alert.prototype._removeElement = function _removeElement(element) {
|
key: '_removeElement',
|
||||||
|
value: function _removeElement(element) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
$(element).removeClass(ClassName.SHOW);
|
$(element).removeClass(ClassName.SHOW);
|
||||||
@@ -113,15 +124,18 @@ var Alert = function ($) {
|
|||||||
$(element).one(Util.TRANSITION_END, function (event) {
|
$(element).one(Util.TRANSITION_END, function (event) {
|
||||||
return _this._destroyElement(element, event);
|
return _this._destroyElement(element, event);
|
||||||
}).emulateTransitionEnd(TRANSITION_DURATION);
|
}).emulateTransitionEnd(TRANSITION_DURATION);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Alert.prototype._destroyElement = function _destroyElement(element) {
|
key: '_destroyElement',
|
||||||
|
value: function _destroyElement(element) {
|
||||||
$(element).detach().trigger(Event.CLOSED).remove();
|
$(element).detach().trigger(Event.CLOSED).remove();
|
||||||
};
|
}
|
||||||
|
|
||||||
// static
|
// static
|
||||||
|
|
||||||
Alert._jQueryInterface = function _jQueryInterface(config) {
|
}], [{
|
||||||
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(config) {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var $element = $(this);
|
var $element = $(this);
|
||||||
var data = $element.data(DATA_KEY);
|
var data = $element.data(DATA_KEY);
|
||||||
@@ -135,9 +149,10 @@ var Alert = function ($) {
|
|||||||
data[config](this);
|
data[config](this);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Alert._handleDismiss = function _handleDismiss(alertInstance) {
|
key: '_handleDismiss',
|
||||||
|
value: function _handleDismiss(alertInstance) {
|
||||||
return function (event) {
|
return function (event) {
|
||||||
if (event) {
|
if (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@@ -145,9 +160,8 @@ var Alert = function ($) {
|
|||||||
|
|
||||||
alertInstance.close(this);
|
alertInstance.close(this);
|
||||||
};
|
};
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
_createClass(Alert, null, [{
|
|
||||||
key: 'VERSION',
|
key: 'VERSION',
|
||||||
get: function get() {
|
get: function get() {
|
||||||
return VERSION;
|
return VERSION;
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+18
-10
@@ -1,3 +1,5 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
|
|
||||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
@@ -9,7 +11,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var Button = function ($) {
|
var Button = function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@@ -58,9 +60,13 @@ var Button = function ($) {
|
|||||||
|
|
||||||
// getters
|
// getters
|
||||||
|
|
||||||
|
_createClass(Button, [{
|
||||||
|
key: 'toggle',
|
||||||
|
|
||||||
|
|
||||||
// public
|
// public
|
||||||
|
|
||||||
Button.prototype.toggle = function toggle() {
|
value: function toggle() {
|
||||||
var triggerChangeEvent = true;
|
var triggerChangeEvent = true;
|
||||||
var addAriaPressed = true;
|
var addAriaPressed = true;
|
||||||
var rootElement = $(this._element).closest(Selector.DATA_TOGGLE)[0];
|
var rootElement = $(this._element).closest(Selector.DATA_TOGGLE)[0];
|
||||||
@@ -101,16 +107,19 @@ var Button = function ($) {
|
|||||||
if (triggerChangeEvent) {
|
if (triggerChangeEvent) {
|
||||||
$(this._element).toggleClass(ClassName.ACTIVE);
|
$(this._element).toggleClass(ClassName.ACTIVE);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Button.prototype.dispose = function dispose() {
|
key: 'dispose',
|
||||||
|
value: function dispose() {
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY);
|
||||||
this._element = null;
|
this._element = null;
|
||||||
};
|
}
|
||||||
|
|
||||||
// static
|
// static
|
||||||
|
|
||||||
Button._jQueryInterface = function _jQueryInterface(config) {
|
}], [{
|
||||||
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(config) {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var data = $(this).data(DATA_KEY);
|
var data = $(this).data(DATA_KEY);
|
||||||
|
|
||||||
@@ -123,9 +132,8 @@ var Button = function ($) {
|
|||||||
data[config]();
|
data[config]();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
_createClass(Button, null, [{
|
|
||||||
key: 'VERSION',
|
key: 'VERSION',
|
||||||
get: function get() {
|
get: function get() {
|
||||||
return VERSION;
|
return VERSION;
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+75
-52
@@ -1,3 +1,5 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||||
|
|
||||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
@@ -11,7 +13,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var Carousel = function ($) {
|
var Carousel = function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@@ -113,29 +115,36 @@ var Carousel = function ($) {
|
|||||||
|
|
||||||
// getters
|
// getters
|
||||||
|
|
||||||
|
_createClass(Carousel, [{
|
||||||
|
key: 'next',
|
||||||
|
|
||||||
|
|
||||||
// public
|
// public
|
||||||
|
|
||||||
Carousel.prototype.next = function next() {
|
value: function next() {
|
||||||
if (!this._isSliding) {
|
if (!this._isSliding) {
|
||||||
this._slide(Direction.NEXT);
|
this._slide(Direction.NEXT);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype.nextWhenVisible = function nextWhenVisible() {
|
key: 'nextWhenVisible',
|
||||||
|
value: function nextWhenVisible() {
|
||||||
// Don't call next when the page isn't visible
|
// Don't call next when the page isn't visible
|
||||||
// or the carousel or its parent isn't visible
|
// or the carousel or its parent isn't visible
|
||||||
if (!document.hidden && $(this._element).is(':visible') && $(this._element).css('visibility') !== 'hidden') {
|
if (!document.hidden && $(this._element).is(':visible') && $(this._element).css('visibility') !== 'hidden') {
|
||||||
this.next();
|
this.next();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype.prev = function prev() {
|
key: 'prev',
|
||||||
|
value: function prev() {
|
||||||
if (!this._isSliding) {
|
if (!this._isSliding) {
|
||||||
this._slide(Direction.PREV);
|
this._slide(Direction.PREV);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype.pause = function pause(event) {
|
key: 'pause',
|
||||||
|
value: function pause(event) {
|
||||||
if (!event) {
|
if (!event) {
|
||||||
this._isPaused = true;
|
this._isPaused = true;
|
||||||
}
|
}
|
||||||
@@ -147,9 +156,10 @@ var Carousel = function ($) {
|
|||||||
|
|
||||||
clearInterval(this._interval);
|
clearInterval(this._interval);
|
||||||
this._interval = null;
|
this._interval = null;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype.cycle = function cycle(event) {
|
key: 'cycle',
|
||||||
|
value: function cycle(event) {
|
||||||
if (!event) {
|
if (!event) {
|
||||||
this._isPaused = false;
|
this._isPaused = false;
|
||||||
}
|
}
|
||||||
@@ -162,9 +172,10 @@ var Carousel = function ($) {
|
|||||||
if (this._config.interval && !this._isPaused) {
|
if (this._config.interval && !this._isPaused) {
|
||||||
this._interval = setInterval((document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval);
|
this._interval = setInterval((document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype.to = function to(index) {
|
key: 'to',
|
||||||
|
value: function to(index) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];
|
this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];
|
||||||
@@ -191,9 +202,10 @@ var Carousel = function ($) {
|
|||||||
var direction = index > activeIndex ? Direction.NEXT : Direction.PREV;
|
var direction = index > activeIndex ? Direction.NEXT : Direction.PREV;
|
||||||
|
|
||||||
this._slide(direction, this._items[index]);
|
this._slide(direction, this._items[index]);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype.dispose = function dispose() {
|
key: 'dispose',
|
||||||
|
value: function dispose() {
|
||||||
$(this._element).off(EVENT_KEY);
|
$(this._element).off(EVENT_KEY);
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY);
|
||||||
|
|
||||||
@@ -205,17 +217,20 @@ var Carousel = function ($) {
|
|||||||
this._isSliding = null;
|
this._isSliding = null;
|
||||||
this._activeElement = null;
|
this._activeElement = null;
|
||||||
this._indicatorsElement = null;
|
this._indicatorsElement = null;
|
||||||
};
|
}
|
||||||
|
|
||||||
// private
|
// private
|
||||||
|
|
||||||
Carousel.prototype._getConfig = function _getConfig(config) {
|
}, {
|
||||||
|
key: '_getConfig',
|
||||||
|
value: function _getConfig(config) {
|
||||||
config = $.extend({}, Default, config);
|
config = $.extend({}, Default, config);
|
||||||
Util.typeCheckConfig(NAME, config, DefaultType);
|
Util.typeCheckConfig(NAME, config, DefaultType);
|
||||||
return config;
|
return config;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype._addEventListeners = function _addEventListeners() {
|
key: '_addEventListeners',
|
||||||
|
value: function _addEventListeners() {
|
||||||
var _this2 = this;
|
var _this2 = this;
|
||||||
|
|
||||||
if (this._config.keyboard) {
|
if (this._config.keyboard) {
|
||||||
@@ -249,9 +264,10 @@ var Carousel = function ($) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype._keydown = function _keydown(event) {
|
key: '_keydown',
|
||||||
|
value: function _keydown(event) {
|
||||||
if (/input|textarea/i.test(event.target.tagName)) {
|
if (/input|textarea/i.test(event.target.tagName)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -268,14 +284,16 @@ var Carousel = function ($) {
|
|||||||
default:
|
default:
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype._getItemIndex = function _getItemIndex(element) {
|
key: '_getItemIndex',
|
||||||
|
value: function _getItemIndex(element) {
|
||||||
this._items = $.makeArray($(element).parent().find(Selector.ITEM));
|
this._items = $.makeArray($(element).parent().find(Selector.ITEM));
|
||||||
return this._items.indexOf(element);
|
return this._items.indexOf(element);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype._getItemByDirection = function _getItemByDirection(direction, activeElement) {
|
key: '_getItemByDirection',
|
||||||
|
value: function _getItemByDirection(direction, activeElement) {
|
||||||
var isNextDirection = direction === Direction.NEXT;
|
var isNextDirection = direction === Direction.NEXT;
|
||||||
var isPrevDirection = direction === Direction.PREV;
|
var isPrevDirection = direction === Direction.PREV;
|
||||||
var activeIndex = this._getItemIndex(activeElement);
|
var activeIndex = this._getItemIndex(activeElement);
|
||||||
@@ -290,9 +308,10 @@ var Carousel = function ($) {
|
|||||||
var itemIndex = (activeIndex + delta) % this._items.length;
|
var itemIndex = (activeIndex + delta) % this._items.length;
|
||||||
|
|
||||||
return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex];
|
return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex];
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype._triggerSlideEvent = function _triggerSlideEvent(relatedTarget, eventDirectionName) {
|
key: '_triggerSlideEvent',
|
||||||
|
value: function _triggerSlideEvent(relatedTarget, eventDirectionName) {
|
||||||
var targetIndex = this._getItemIndex(relatedTarget);
|
var targetIndex = this._getItemIndex(relatedTarget);
|
||||||
var fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0]);
|
var fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0]);
|
||||||
var slideEvent = $.Event(Event.SLIDE, {
|
var slideEvent = $.Event(Event.SLIDE, {
|
||||||
@@ -305,9 +324,10 @@ var Carousel = function ($) {
|
|||||||
$(this._element).trigger(slideEvent);
|
$(this._element).trigger(slideEvent);
|
||||||
|
|
||||||
return slideEvent;
|
return slideEvent;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype._setActiveIndicatorElement = function _setActiveIndicatorElement(element) {
|
key: '_setActiveIndicatorElement',
|
||||||
|
value: function _setActiveIndicatorElement(element) {
|
||||||
if (this._indicatorsElement) {
|
if (this._indicatorsElement) {
|
||||||
$(this._indicatorsElement).find(Selector.ACTIVE).removeClass(ClassName.ACTIVE);
|
$(this._indicatorsElement).find(Selector.ACTIVE).removeClass(ClassName.ACTIVE);
|
||||||
|
|
||||||
@@ -317,9 +337,10 @@ var Carousel = function ($) {
|
|||||||
$(nextIndicator).addClass(ClassName.ACTIVE);
|
$(nextIndicator).addClass(ClassName.ACTIVE);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel.prototype._slide = function _slide(direction, element) {
|
key: '_slide',
|
||||||
|
value: function _slide(direction, element) {
|
||||||
var _this3 = this;
|
var _this3 = this;
|
||||||
|
|
||||||
var activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];
|
var activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];
|
||||||
@@ -403,11 +424,13 @@ var Carousel = function ($) {
|
|||||||
if (isCycling) {
|
if (isCycling) {
|
||||||
this.cycle();
|
this.cycle();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// static
|
// static
|
||||||
|
|
||||||
Carousel._jQueryInterface = function _jQueryInterface(config) {
|
}], [{
|
||||||
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(config) {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var data = $(this).data(DATA_KEY);
|
var data = $(this).data(DATA_KEY);
|
||||||
var _config = $.extend({}, Default, $(this).data());
|
var _config = $.extend({}, Default, $(this).data());
|
||||||
@@ -426,7 +449,7 @@ var Carousel = function ($) {
|
|||||||
if (typeof config === 'number') {
|
if (typeof config === 'number') {
|
||||||
data.to(config);
|
data.to(config);
|
||||||
} else if (typeof action === 'string') {
|
} else if (typeof action === 'string') {
|
||||||
if (data[action] === undefined) {
|
if (typeof data[action] === 'undefined') {
|
||||||
throw new Error('No method named "' + action + '"');
|
throw new Error('No method named "' + action + '"');
|
||||||
}
|
}
|
||||||
data[action]();
|
data[action]();
|
||||||
@@ -435,9 +458,10 @@ var Carousel = function ($) {
|
|||||||
data.cycle();
|
data.cycle();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Carousel._dataApiClickHandler = function _dataApiClickHandler(event) {
|
key: '_dataApiClickHandler',
|
||||||
|
value: function _dataApiClickHandler(event) {
|
||||||
var selector = Util.getSelectorFromElement(this);
|
var selector = Util.getSelectorFromElement(this);
|
||||||
|
|
||||||
if (!selector) {
|
if (!selector) {
|
||||||
@@ -464,9 +488,8 @@ var Carousel = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
_createClass(Carousel, null, [{
|
|
||||||
key: 'VERSION',
|
key: 'VERSION',
|
||||||
get: function get() {
|
get: function get() {
|
||||||
return VERSION;
|
return VERSION;
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+53
-35
@@ -1,3 +1,5 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||||
|
|
||||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
@@ -11,7 +13,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var Collapse = function ($) {
|
var Collapse = function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@@ -98,17 +100,22 @@ var Collapse = function ($) {
|
|||||||
|
|
||||||
// getters
|
// getters
|
||||||
|
|
||||||
|
_createClass(Collapse, [{
|
||||||
|
key: 'toggle',
|
||||||
|
|
||||||
|
|
||||||
// public
|
// public
|
||||||
|
|
||||||
Collapse.prototype.toggle = function toggle() {
|
value: function toggle() {
|
||||||
if ($(this._element).hasClass(ClassName.SHOW)) {
|
if ($(this._element).hasClass(ClassName.SHOW)) {
|
||||||
this.hide();
|
this.hide();
|
||||||
} else {
|
} else {
|
||||||
this.show();
|
this.show();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Collapse.prototype.show = function show() {
|
key: 'show',
|
||||||
|
value: function show() {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
if (this._isTransitioning || $(this._element).hasClass(ClassName.SHOW)) {
|
if (this._isTransitioning || $(this._element).hasClass(ClassName.SHOW)) {
|
||||||
@@ -178,9 +185,10 @@ var Collapse = function ($) {
|
|||||||
$(this._element).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
|
$(this._element).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
|
||||||
|
|
||||||
this._element.style[dimension] = this._element[scrollSize] + 'px';
|
this._element.style[dimension] = this._element[scrollSize] + 'px';
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Collapse.prototype.hide = function hide() {
|
key: 'hide',
|
||||||
|
value: function hide() {
|
||||||
var _this2 = this;
|
var _this2 = this;
|
||||||
|
|
||||||
if (this._isTransitioning || !$(this._element).hasClass(ClassName.SHOW)) {
|
if (this._isTransitioning || !$(this._element).hasClass(ClassName.SHOW)) {
|
||||||
@@ -229,13 +237,15 @@ var Collapse = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$(this._element).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
|
$(this._element).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Collapse.prototype.setTransitioning = function setTransitioning(isTransitioning) {
|
key: 'setTransitioning',
|
||||||
|
value: function setTransitioning(isTransitioning) {
|
||||||
this._isTransitioning = isTransitioning;
|
this._isTransitioning = isTransitioning;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Collapse.prototype.dispose = function dispose() {
|
key: 'dispose',
|
||||||
|
value: function dispose() {
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY);
|
||||||
|
|
||||||
this._config = null;
|
this._config = null;
|
||||||
@@ -243,23 +253,27 @@ var Collapse = function ($) {
|
|||||||
this._element = null;
|
this._element = null;
|
||||||
this._triggerArray = null;
|
this._triggerArray = null;
|
||||||
this._isTransitioning = null;
|
this._isTransitioning = null;
|
||||||
};
|
}
|
||||||
|
|
||||||
// private
|
// private
|
||||||
|
|
||||||
Collapse.prototype._getConfig = function _getConfig(config) {
|
}, {
|
||||||
|
key: '_getConfig',
|
||||||
|
value: function _getConfig(config) {
|
||||||
config = $.extend({}, Default, config);
|
config = $.extend({}, Default, config);
|
||||||
config.toggle = Boolean(config.toggle); // coerce string values
|
config.toggle = Boolean(config.toggle); // coerce string values
|
||||||
Util.typeCheckConfig(NAME, config, DefaultType);
|
Util.typeCheckConfig(NAME, config, DefaultType);
|
||||||
return config;
|
return config;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Collapse.prototype._getDimension = function _getDimension() {
|
key: '_getDimension',
|
||||||
|
value: function _getDimension() {
|
||||||
var hasWidth = $(this._element).hasClass(Dimension.WIDTH);
|
var hasWidth = $(this._element).hasClass(Dimension.WIDTH);
|
||||||
return hasWidth ? Dimension.WIDTH : Dimension.HEIGHT;
|
return hasWidth ? Dimension.WIDTH : Dimension.HEIGHT;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Collapse.prototype._getParent = function _getParent() {
|
key: '_getParent',
|
||||||
|
value: function _getParent() {
|
||||||
var _this3 = this;
|
var _this3 = this;
|
||||||
|
|
||||||
var parent = $(this._config.parent)[0];
|
var parent = $(this._config.parent)[0];
|
||||||
@@ -270,9 +284,10 @@ var Collapse = function ($) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return parent;
|
return parent;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Collapse.prototype._addAriaAndCollapsedClass = function _addAriaAndCollapsedClass(element, triggerArray) {
|
key: '_addAriaAndCollapsedClass',
|
||||||
|
value: function _addAriaAndCollapsedClass(element, triggerArray) {
|
||||||
if (element) {
|
if (element) {
|
||||||
var isOpen = $(element).hasClass(ClassName.SHOW);
|
var isOpen = $(element).hasClass(ClassName.SHOW);
|
||||||
|
|
||||||
@@ -280,16 +295,19 @@ var Collapse = function ($) {
|
|||||||
$(triggerArray).toggleClass(ClassName.COLLAPSED, !isOpen).attr('aria-expanded', isOpen);
|
$(triggerArray).toggleClass(ClassName.COLLAPSED, !isOpen).attr('aria-expanded', isOpen);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// static
|
// static
|
||||||
|
|
||||||
Collapse._getTargetFromElement = function _getTargetFromElement(element) {
|
}], [{
|
||||||
|
key: '_getTargetFromElement',
|
||||||
|
value: function _getTargetFromElement(element) {
|
||||||
var selector = Util.getSelectorFromElement(element);
|
var selector = Util.getSelectorFromElement(element);
|
||||||
return selector ? $(selector)[0] : null;
|
return selector ? $(selector)[0] : null;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Collapse._jQueryInterface = function _jQueryInterface(config) {
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(config) {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var $this = $(this);
|
var $this = $(this);
|
||||||
var data = $this.data(DATA_KEY);
|
var data = $this.data(DATA_KEY);
|
||||||
@@ -305,15 +323,14 @@ var Collapse = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (typeof config === 'string') {
|
if (typeof config === 'string') {
|
||||||
if (data[config] === undefined) {
|
if (typeof data[config] === 'undefined') {
|
||||||
throw new Error('No method named "' + config + '"');
|
throw new Error('No method named "' + config + '"');
|
||||||
}
|
}
|
||||||
data[config]();
|
data[config]();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
_createClass(Collapse, null, [{
|
|
||||||
key: 'VERSION',
|
key: 'VERSION',
|
||||||
get: function get() {
|
get: function get() {
|
||||||
return VERSION;
|
return VERSION;
|
||||||
@@ -335,7 +352,8 @@ var Collapse = function ($) {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||||
if (!/input|textarea/i.test(event.target.tagName)) {
|
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
||||||
|
if (event.currentTarget.tagName === 'A') {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+61
-49
@@ -1,3 +1,5 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||||
|
|
||||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
@@ -11,7 +13,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var Dropdown = function ($) {
|
var Dropdown = function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check for Popper dependency
|
* Check for Popper dependency
|
||||||
@@ -76,13 +78,11 @@ var Dropdown = function ($) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var Default = {
|
var Default = {
|
||||||
placement: AttachmentMap.BOTTOM,
|
|
||||||
offset: 0,
|
offset: 0,
|
||||||
flip: true
|
flip: true
|
||||||
};
|
};
|
||||||
|
|
||||||
var DefaultType = {
|
var DefaultType = {
|
||||||
placement: 'string',
|
|
||||||
offset: '(number|string)',
|
offset: '(number|string)',
|
||||||
flip: 'boolean'
|
flip: 'boolean'
|
||||||
|
|
||||||
@@ -108,9 +108,13 @@ var Dropdown = function ($) {
|
|||||||
|
|
||||||
// getters
|
// getters
|
||||||
|
|
||||||
|
_createClass(Dropdown, [{
|
||||||
|
key: 'toggle',
|
||||||
|
|
||||||
|
|
||||||
// public
|
// public
|
||||||
|
|
||||||
Dropdown.prototype.toggle = function toggle() {
|
value: function toggle() {
|
||||||
if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) {
|
if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -157,9 +161,10 @@ var Dropdown = function ($) {
|
|||||||
|
|
||||||
$(this._menu).toggleClass(ClassName.SHOW);
|
$(this._menu).toggleClass(ClassName.SHOW);
|
||||||
$(parent).toggleClass(ClassName.SHOW).trigger($.Event(Event.SHOWN, relatedTarget));
|
$(parent).toggleClass(ClassName.SHOW).trigger($.Event(Event.SHOWN, relatedTarget));
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Dropdown.prototype.dispose = function dispose() {
|
key: 'dispose',
|
||||||
|
value: function dispose() {
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY);
|
||||||
$(this._element).off(EVENT_KEY);
|
$(this._element).off(EVENT_KEY);
|
||||||
this._element = null;
|
this._element = null;
|
||||||
@@ -168,18 +173,21 @@ var Dropdown = function ($) {
|
|||||||
this._popper.destroy();
|
this._popper.destroy();
|
||||||
}
|
}
|
||||||
this._popper = null;
|
this._popper = null;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Dropdown.prototype.update = function update() {
|
key: 'update',
|
||||||
|
value: function update() {
|
||||||
this._inNavbar = this._detectNavbar();
|
this._inNavbar = this._detectNavbar();
|
||||||
if (this._popper !== null) {
|
if (this._popper !== null) {
|
||||||
this._popper.scheduleUpdate();
|
this._popper.scheduleUpdate();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// private
|
// private
|
||||||
|
|
||||||
Dropdown.prototype._addEventListeners = function _addEventListeners() {
|
}, {
|
||||||
|
key: '_addEventListeners',
|
||||||
|
value: function _addEventListeners() {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
$(this._element).on(Event.CLICK, function (event) {
|
$(this._element).on(Event.CLICK, function (event) {
|
||||||
@@ -187,35 +195,33 @@ var Dropdown = function ($) {
|
|||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
_this.toggle();
|
_this.toggle();
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
Dropdown.prototype._getConfig = function _getConfig(config) {
|
|
||||||
var elementData = $(this._element).data();
|
|
||||||
if (elementData.placement !== undefined) {
|
|
||||||
elementData.placement = AttachmentMap[elementData.placement.toUpperCase()];
|
|
||||||
}
|
}
|
||||||
|
}, {
|
||||||
|
key: '_getConfig',
|
||||||
|
value: function _getConfig(config) {
|
||||||
config = $.extend({}, this.constructor.Default, $(this._element).data(), config);
|
config = $.extend({}, this.constructor.Default, $(this._element).data(), config);
|
||||||
|
|
||||||
Util.typeCheckConfig(NAME, config, this.constructor.DefaultType);
|
Util.typeCheckConfig(NAME, config, this.constructor.DefaultType);
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Dropdown.prototype._getMenuElement = function _getMenuElement() {
|
key: '_getMenuElement',
|
||||||
|
value: function _getMenuElement() {
|
||||||
if (!this._menu) {
|
if (!this._menu) {
|
||||||
var parent = Dropdown._getParentFromElement(this._element);
|
var parent = Dropdown._getParentFromElement(this._element);
|
||||||
this._menu = $(parent).find(Selector.MENU)[0];
|
this._menu = $(parent).find(Selector.MENU)[0];
|
||||||
}
|
}
|
||||||
return this._menu;
|
return this._menu;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Dropdown.prototype._getPlacement = function _getPlacement() {
|
key: '_getPlacement',
|
||||||
|
value: function _getPlacement() {
|
||||||
var $parentDropdown = $(this._element).parent();
|
var $parentDropdown = $(this._element).parent();
|
||||||
var placement = this._config.placement;
|
var placement = AttachmentMap.BOTTOM;
|
||||||
|
|
||||||
// Handle dropup
|
// Handle dropup
|
||||||
if ($parentDropdown.hasClass(ClassName.DROPUP) || this._config.placement === AttachmentMap.TOP) {
|
if ($parentDropdown.hasClass(ClassName.DROPUP)) {
|
||||||
placement = AttachmentMap.TOP;
|
placement = AttachmentMap.TOP;
|
||||||
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
||||||
placement = AttachmentMap.TOPEND;
|
placement = AttachmentMap.TOPEND;
|
||||||
@@ -224,13 +230,15 @@ var Dropdown = function ($) {
|
|||||||
placement = AttachmentMap.BOTTOMEND;
|
placement = AttachmentMap.BOTTOMEND;
|
||||||
}
|
}
|
||||||
return placement;
|
return placement;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Dropdown.prototype._detectNavbar = function _detectNavbar() {
|
key: '_detectNavbar',
|
||||||
|
value: function _detectNavbar() {
|
||||||
return $(this._element).closest('.navbar').length > 0;
|
return $(this._element).closest('.navbar').length > 0;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Dropdown.prototype._getPopperConfig = function _getPopperConfig() {
|
key: '_getPopperConfig',
|
||||||
|
value: function _getPopperConfig() {
|
||||||
var popperConfig = {
|
var popperConfig = {
|
||||||
placement: this._getPlacement(),
|
placement: this._getPlacement(),
|
||||||
modifiers: {
|
modifiers: {
|
||||||
@@ -249,11 +257,13 @@ var Dropdown = function ($) {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
return popperConfig;
|
return popperConfig;
|
||||||
};
|
}
|
||||||
|
|
||||||
// static
|
// static
|
||||||
|
|
||||||
Dropdown._jQueryInterface = function _jQueryInterface(config) {
|
}], [{
|
||||||
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(config) {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var data = $(this).data(DATA_KEY);
|
var data = $(this).data(DATA_KEY);
|
||||||
var _config = (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' ? config : null;
|
var _config = (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' ? config : null;
|
||||||
@@ -264,15 +274,16 @@ var Dropdown = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (typeof config === 'string') {
|
if (typeof config === 'string') {
|
||||||
if (data[config] === undefined) {
|
if (typeof data[config] === 'undefined') {
|
||||||
throw new Error('No method named "' + config + '"');
|
throw new Error('No method named "' + config + '"');
|
||||||
}
|
}
|
||||||
data[config]();
|
data[config]();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Dropdown._clearMenus = function _clearMenus(event) {
|
key: '_clearMenus',
|
||||||
|
value: function _clearMenus(event) {
|
||||||
if (event && (event.which === RIGHT_MOUSE_BUTTON_WHICH || event.type === 'keyup' && event.which !== TAB_KEYCODE)) {
|
if (event && (event.which === RIGHT_MOUSE_BUTTON_WHICH || event.type === 'keyup' && event.which !== TAB_KEYCODE)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -315,9 +326,10 @@ var Dropdown = function ($) {
|
|||||||
$(dropdownMenu).removeClass(ClassName.SHOW);
|
$(dropdownMenu).removeClass(ClassName.SHOW);
|
||||||
$(parent).removeClass(ClassName.SHOW).trigger($.Event(Event.HIDDEN, relatedTarget));
|
$(parent).removeClass(ClassName.SHOW).trigger($.Event(Event.HIDDEN, relatedTarget));
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Dropdown._getParentFromElement = function _getParentFromElement(element) {
|
key: '_getParentFromElement',
|
||||||
|
value: function _getParentFromElement(element) {
|
||||||
var parent = void 0;
|
var parent = void 0;
|
||||||
var selector = Util.getSelectorFromElement(element);
|
var selector = Util.getSelectorFromElement(element);
|
||||||
|
|
||||||
@@ -326,9 +338,10 @@ var Dropdown = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return parent || element.parentNode;
|
return parent || element.parentNode;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Dropdown._dataApiKeydownHandler = function _dataApiKeydownHandler(event) {
|
key: '_dataApiKeydownHandler',
|
||||||
|
value: function _dataApiKeydownHandler(event) {
|
||||||
if (!REGEXP_KEYDOWN.test(event.which) || /button/i.test(event.target.tagName) && event.which === SPACE_KEYCODE || /input|textarea/i.test(event.target.tagName)) {
|
if (!REGEXP_KEYDOWN.test(event.which) || /button/i.test(event.target.tagName) && event.which === SPACE_KEYCODE || /input|textarea/i.test(event.target.tagName)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -377,9 +390,8 @@ var Dropdown = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
items[index].focus();
|
items[index].focus();
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
_createClass(Dropdown, null, [{
|
|
||||||
key: 'VERSION',
|
key: 'VERSION',
|
||||||
get: function get() {
|
get: function get() {
|
||||||
return VERSION;
|
return VERSION;
|
||||||
@@ -427,5 +439,5 @@ var Dropdown = function ($) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return Dropdown;
|
return Dropdown;
|
||||||
}(jQuery); /* global Popper */
|
}(jQuery, Popper);
|
||||||
//# sourceMappingURL=dropdown.js.map
|
//# sourceMappingURL=dropdown.js.map
|
||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+22
@@ -0,0 +1,22 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* --------------------------------------------------------------------------
|
||||||
|
* Bootstrap (v4.0.0-alpha.6): index.js
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
* --------------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
if (typeof jQuery === 'undefined') {
|
||||||
|
throw new Error('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.');
|
||||||
|
}
|
||||||
|
|
||||||
|
var version = $.fn.jquery.split(' ')[0].split('.');
|
||||||
|
var min = 3;
|
||||||
|
var max = 4;
|
||||||
|
if (version[0] < min || version[0] >= max) {
|
||||||
|
throw new Error('Bootstrap\'s JavaScript requires at least jQuery v3.0.0 but less than v4.0.0');
|
||||||
|
}
|
||||||
|
})(jQuery);
|
||||||
|
//# sourceMappingURL=index.js.map
|
||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["../src/index.js"],"names":["jQuery","Error","version","$","fn","jquery","split","min","max"],"mappings":";;AAaA;;;;;;;AAOA,CAAC,YAAM;AACL,MAAI,OAAOA,MAAP,KAAkB,WAAtB,EAAmC;AACjC,UAAM,IAAIC,KAAJ,CAAU,kGAAV,CAAN;AACD;;AAED,MAAMC,UAAUC,EAAEC,EAAF,CAAKC,MAAL,CAAYC,KAAZ,CAAkB,GAAlB,EAAuB,CAAvB,EAA0BA,KAA1B,CAAgC,GAAhC,CAAhB;AACA,MAAMC,MAAM,CAAZ;AACA,MAAMC,MAAM,CAAZ;AACA,MAAIN,QAAQ,CAAR,IAAaK,GAAb,IAAoBL,QAAQ,CAAR,KAAcM,GAAtC,EAA2C;AACzC,UAAM,IAAIP,KAAJ,CAAU,8EAAV,CAAN;AACD;AACF,CAXD,EAWGD,MAXH","file":"index.js","sourcesContent":["import $ from 'jquery'\nimport Alert from './alert'\nimport Button from './button'\nimport Carousel from './carousel'\nimport Collapse from './collapse'\nimport Dropdown from './dropdown'\nimport Modal from './modal'\nimport Popover from './popover'\nimport Scrollspy from './scrollspy'\nimport Tab from './tab'\nimport Tooltip from './tooltip'\nimport Util from './util'\n\n/**\n * --------------------------------------------------------------------------\n * Bootstrap (v4.0.0-alpha.6): index.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n(() => {\n if (typeof jQuery === 'undefined') {\n throw new Error('Bootstrap\\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\\'s JavaScript.')\n }\n\n const version = $.fn.jquery.split(' ')[0].split('.')\n const min = 3\n const max = 4\n if (version[0] < min || version[0] >= max) {\n throw new Error('Bootstrap\\'s JavaScript requires at least jQuery v3.0.0 but less than v4.0.0')\n }\n})(jQuery)\n\nexport {\n Util,\n Alert,\n Button,\n Carousel,\n Collapse,\n Dropdown,\n Modal,\n Popover,\n Scrollspy,\n Tab,\n Tooltip\n}\n"]}
|
||||||
Vendored
+101
-63
@@ -1,3 +1,5 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||||
|
|
||||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
@@ -11,7 +13,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var Modal = function ($) {
|
var Modal = function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@@ -70,6 +72,7 @@ var Modal = function ($) {
|
|||||||
DATA_TOGGLE: '[data-toggle="modal"]',
|
DATA_TOGGLE: '[data-toggle="modal"]',
|
||||||
DATA_DISMISS: '[data-dismiss="modal"]',
|
DATA_DISMISS: '[data-dismiss="modal"]',
|
||||||
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
|
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
|
||||||
|
STICKY_CONTENT: '.sticky-top',
|
||||||
NAVBAR_TOGGLER: '.navbar-toggler'
|
NAVBAR_TOGGLER: '.navbar-toggler'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -96,13 +99,18 @@ var Modal = function ($) {
|
|||||||
|
|
||||||
// getters
|
// getters
|
||||||
|
|
||||||
|
_createClass(Modal, [{
|
||||||
|
key: 'toggle',
|
||||||
|
|
||||||
|
|
||||||
// public
|
// public
|
||||||
|
|
||||||
Modal.prototype.toggle = function toggle(relatedTarget) {
|
value: function toggle(relatedTarget) {
|
||||||
return this._isShown ? this.hide() : this.show(relatedTarget);
|
return this._isShown ? this.hide() : this.show(relatedTarget);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype.show = function show(relatedTarget) {
|
key: 'show',
|
||||||
|
value: function show(relatedTarget) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
if (this._isTransitioning) {
|
if (this._isTransitioning) {
|
||||||
@@ -128,6 +136,8 @@ var Modal = function ($) {
|
|||||||
this._checkScrollbar();
|
this._checkScrollbar();
|
||||||
this._setScrollbar();
|
this._setScrollbar();
|
||||||
|
|
||||||
|
this._adjustDialog();
|
||||||
|
|
||||||
$(document.body).addClass(ClassName.OPEN);
|
$(document.body).addClass(ClassName.OPEN);
|
||||||
|
|
||||||
this._setEscapeEvent();
|
this._setEscapeEvent();
|
||||||
@@ -148,9 +158,10 @@ var Modal = function ($) {
|
|||||||
this._showBackdrop(function () {
|
this._showBackdrop(function () {
|
||||||
return _this._showElement(relatedTarget);
|
return _this._showElement(relatedTarget);
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype.hide = function hide(event) {
|
key: 'hide',
|
||||||
|
value: function hide(event) {
|
||||||
var _this2 = this;
|
var _this2 = this;
|
||||||
|
|
||||||
if (event) {
|
if (event) {
|
||||||
@@ -195,9 +206,10 @@ var Modal = function ($) {
|
|||||||
} else {
|
} else {
|
||||||
this._hideModal();
|
this._hideModal();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype.dispose = function dispose() {
|
key: 'dispose',
|
||||||
|
value: function dispose() {
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY);
|
||||||
|
|
||||||
$(window, document, this._element, this._backdrop).off(EVENT_KEY);
|
$(window, document, this._element, this._backdrop).off(EVENT_KEY);
|
||||||
@@ -210,21 +222,25 @@ var Modal = function ($) {
|
|||||||
this._isBodyOverflowing = null;
|
this._isBodyOverflowing = null;
|
||||||
this._ignoreBackdropClick = null;
|
this._ignoreBackdropClick = null;
|
||||||
this._scrollbarWidth = null;
|
this._scrollbarWidth = null;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype.handleUpdate = function handleUpdate() {
|
key: 'handleUpdate',
|
||||||
|
value: function handleUpdate() {
|
||||||
this._adjustDialog();
|
this._adjustDialog();
|
||||||
};
|
}
|
||||||
|
|
||||||
// private
|
// private
|
||||||
|
|
||||||
Modal.prototype._getConfig = function _getConfig(config) {
|
}, {
|
||||||
|
key: '_getConfig',
|
||||||
|
value: function _getConfig(config) {
|
||||||
config = $.extend({}, Default, config);
|
config = $.extend({}, Default, config);
|
||||||
Util.typeCheckConfig(NAME, config, DefaultType);
|
Util.typeCheckConfig(NAME, config, DefaultType);
|
||||||
return config;
|
return config;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._showElement = function _showElement(relatedTarget) {
|
key: '_showElement',
|
||||||
|
value: function _showElement(relatedTarget) {
|
||||||
var _this3 = this;
|
var _this3 = this;
|
||||||
|
|
||||||
var transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE);
|
var transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE);
|
||||||
@@ -265,9 +281,10 @@ var Modal = function ($) {
|
|||||||
} else {
|
} else {
|
||||||
transitionComplete();
|
transitionComplete();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._enforceFocus = function _enforceFocus() {
|
key: '_enforceFocus',
|
||||||
|
value: function _enforceFocus() {
|
||||||
var _this4 = this;
|
var _this4 = this;
|
||||||
|
|
||||||
$(document).off(Event.FOCUSIN) // guard against infinite focus loop
|
$(document).off(Event.FOCUSIN) // guard against infinite focus loop
|
||||||
@@ -276,9 +293,10 @@ var Modal = function ($) {
|
|||||||
_this4._element.focus();
|
_this4._element.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._setEscapeEvent = function _setEscapeEvent() {
|
key: '_setEscapeEvent',
|
||||||
|
value: function _setEscapeEvent() {
|
||||||
var _this5 = this;
|
var _this5 = this;
|
||||||
|
|
||||||
if (this._isShown && this._config.keyboard) {
|
if (this._isShown && this._config.keyboard) {
|
||||||
@@ -291,9 +309,10 @@ var Modal = function ($) {
|
|||||||
} else if (!this._isShown) {
|
} else if (!this._isShown) {
|
||||||
$(this._element).off(Event.KEYDOWN_DISMISS);
|
$(this._element).off(Event.KEYDOWN_DISMISS);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._setResizeEvent = function _setResizeEvent() {
|
key: '_setResizeEvent',
|
||||||
|
value: function _setResizeEvent() {
|
||||||
var _this6 = this;
|
var _this6 = this;
|
||||||
|
|
||||||
if (this._isShown) {
|
if (this._isShown) {
|
||||||
@@ -303,9 +322,10 @@ var Modal = function ($) {
|
|||||||
} else {
|
} else {
|
||||||
$(window).off(Event.RESIZE);
|
$(window).off(Event.RESIZE);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._hideModal = function _hideModal() {
|
key: '_hideModal',
|
||||||
|
value: function _hideModal() {
|
||||||
var _this7 = this;
|
var _this7 = this;
|
||||||
|
|
||||||
this._element.style.display = 'none';
|
this._element.style.display = 'none';
|
||||||
@@ -317,16 +337,18 @@ var Modal = function ($) {
|
|||||||
_this7._resetScrollbar();
|
_this7._resetScrollbar();
|
||||||
$(_this7._element).trigger(Event.HIDDEN);
|
$(_this7._element).trigger(Event.HIDDEN);
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._removeBackdrop = function _removeBackdrop() {
|
key: '_removeBackdrop',
|
||||||
|
value: function _removeBackdrop() {
|
||||||
if (this._backdrop) {
|
if (this._backdrop) {
|
||||||
$(this._backdrop).remove();
|
$(this._backdrop).remove();
|
||||||
this._backdrop = null;
|
this._backdrop = null;
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._showBackdrop = function _showBackdrop(callback) {
|
key: '_showBackdrop',
|
||||||
|
value: function _showBackdrop(callback) {
|
||||||
var _this8 = this;
|
var _this8 = this;
|
||||||
|
|
||||||
var animate = $(this._element).hasClass(ClassName.FADE) ? ClassName.FADE : '';
|
var animate = $(this._element).hasClass(ClassName.FADE) ? ClassName.FADE : '';
|
||||||
@@ -392,14 +414,16 @@ var Modal = function ($) {
|
|||||||
} else if (callback) {
|
} else if (callback) {
|
||||||
callback();
|
callback();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
// ----------------------------------------------------------------------
|
||||||
// the following methods are used to handle overflowing modals
|
// the following methods are used to handle overflowing modals
|
||||||
// todo (fat): these should probably be refactored out of modal.js
|
// todo (fat): these should probably be refactored out of modal.js
|
||||||
// ----------------------------------------------------------------------
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
Modal.prototype._adjustDialog = function _adjustDialog() {
|
}, {
|
||||||
|
key: '_adjustDialog',
|
||||||
|
value: function _adjustDialog() {
|
||||||
var isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
var isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
|
||||||
|
|
||||||
if (!this._isBodyOverflowing && isModalOverflowing) {
|
if (!this._isBodyOverflowing && isModalOverflowing) {
|
||||||
@@ -409,19 +433,23 @@ var Modal = function ($) {
|
|||||||
if (this._isBodyOverflowing && !isModalOverflowing) {
|
if (this._isBodyOverflowing && !isModalOverflowing) {
|
||||||
this._element.style.paddingRight = this._scrollbarWidth + 'px';
|
this._element.style.paddingRight = this._scrollbarWidth + 'px';
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._resetAdjustments = function _resetAdjustments() {
|
key: '_resetAdjustments',
|
||||||
|
value: function _resetAdjustments() {
|
||||||
this._element.style.paddingLeft = '';
|
this._element.style.paddingLeft = '';
|
||||||
this._element.style.paddingRight = '';
|
this._element.style.paddingRight = '';
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._checkScrollbar = function _checkScrollbar() {
|
key: '_checkScrollbar',
|
||||||
this._isBodyOverflowing = document.body.clientWidth < window.innerWidth;
|
value: function _checkScrollbar() {
|
||||||
|
var rect = document.body.getBoundingClientRect();
|
||||||
|
this._isBodyOverflowing = rect.left + rect.right < window.innerWidth;
|
||||||
this._scrollbarWidth = this._getScrollbarWidth();
|
this._scrollbarWidth = this._getScrollbarWidth();
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._setScrollbar = function _setScrollbar() {
|
key: '_setScrollbar',
|
||||||
|
value: function _setScrollbar() {
|
||||||
var _this9 = this;
|
var _this9 = this;
|
||||||
|
|
||||||
if (this._isBodyOverflowing) {
|
if (this._isBodyOverflowing) {
|
||||||
@@ -435,6 +463,13 @@ var Modal = function ($) {
|
|||||||
$(element).data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + _this9._scrollbarWidth + 'px');
|
$(element).data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + _this9._scrollbarWidth + 'px');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Adjust sticky content margin
|
||||||
|
$(Selector.STICKY_CONTENT).each(function (index, element) {
|
||||||
|
var actualMargin = $(element)[0].style.marginRight;
|
||||||
|
var calculatedMargin = $(element).css('margin-right');
|
||||||
|
$(element).data('margin-right', actualMargin).css('margin-right', parseFloat(calculatedMargin) - _this9._scrollbarWidth + 'px');
|
||||||
|
});
|
||||||
|
|
||||||
// Adjust navbar-toggler margin
|
// Adjust navbar-toggler margin
|
||||||
$(Selector.NAVBAR_TOGGLER).each(function (index, element) {
|
$(Selector.NAVBAR_TOGGLER).each(function (index, element) {
|
||||||
var actualMargin = $(element)[0].style.marginRight;
|
var actualMargin = $(element)[0].style.marginRight;
|
||||||
@@ -447,9 +482,10 @@ var Modal = function ($) {
|
|||||||
var calculatedPadding = $('body').css('padding-right');
|
var calculatedPadding = $('body').css('padding-right');
|
||||||
$('body').data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + this._scrollbarWidth + 'px');
|
$('body').data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + this._scrollbarWidth + 'px');
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._resetScrollbar = function _resetScrollbar() {
|
key: '_resetScrollbar',
|
||||||
|
value: function _resetScrollbar() {
|
||||||
// Restore fixed content padding
|
// Restore fixed content padding
|
||||||
$(Selector.FIXED_CONTENT).each(function (index, element) {
|
$(Selector.FIXED_CONTENT).each(function (index, element) {
|
||||||
var padding = $(element).data('padding-right');
|
var padding = $(element).data('padding-right');
|
||||||
@@ -458,8 +494,8 @@ var Modal = function ($) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Restore navbar-toggler margin
|
// Restore sticky content and navbar-toggler margin
|
||||||
$(Selector.NAVBAR_TOGGLER).each(function (index, element) {
|
$(Selector.STICKY_CONTENT + ', ' + Selector.NAVBAR_TOGGLER).each(function (index, element) {
|
||||||
var margin = $(element).data('margin-right');
|
var margin = $(element).data('margin-right');
|
||||||
if (typeof margin !== 'undefined') {
|
if (typeof margin !== 'undefined') {
|
||||||
$(element).css('margin-right', margin).removeData('margin-right');
|
$(element).css('margin-right', margin).removeData('margin-right');
|
||||||
@@ -471,9 +507,10 @@ var Modal = function ($) {
|
|||||||
if (typeof padding !== 'undefined') {
|
if (typeof padding !== 'undefined') {
|
||||||
$('body').css('padding-right', padding).removeData('padding-right');
|
$('body').css('padding-right', padding).removeData('padding-right');
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Modal.prototype._getScrollbarWidth = function _getScrollbarWidth() {
|
key: '_getScrollbarWidth',
|
||||||
|
value: function _getScrollbarWidth() {
|
||||||
// thx d.walsh
|
// thx d.walsh
|
||||||
var scrollDiv = document.createElement('div');
|
var scrollDiv = document.createElement('div');
|
||||||
scrollDiv.className = ClassName.SCROLLBAR_MEASURER;
|
scrollDiv.className = ClassName.SCROLLBAR_MEASURER;
|
||||||
@@ -481,11 +518,13 @@ var Modal = function ($) {
|
|||||||
var scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
|
var scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
|
||||||
document.body.removeChild(scrollDiv);
|
document.body.removeChild(scrollDiv);
|
||||||
return scrollbarWidth;
|
return scrollbarWidth;
|
||||||
};
|
}
|
||||||
|
|
||||||
// static
|
// static
|
||||||
|
|
||||||
Modal._jQueryInterface = function _jQueryInterface(config, relatedTarget) {
|
}], [{
|
||||||
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(config, relatedTarget) {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var data = $(this).data(DATA_KEY);
|
var data = $(this).data(DATA_KEY);
|
||||||
var _config = $.extend({}, Modal.Default, $(this).data(), (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' && config);
|
var _config = $.extend({}, Modal.Default, $(this).data(), (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' && config);
|
||||||
@@ -496,7 +535,7 @@ var Modal = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (typeof config === 'string') {
|
if (typeof config === 'string') {
|
||||||
if (data[config] === undefined) {
|
if (typeof data[config] === 'undefined') {
|
||||||
throw new Error('No method named "' + config + '"');
|
throw new Error('No method named "' + config + '"');
|
||||||
}
|
}
|
||||||
data[config](relatedTarget);
|
data[config](relatedTarget);
|
||||||
@@ -504,9 +543,8 @@ var Modal = function ($) {
|
|||||||
data.show(relatedTarget);
|
data.show(relatedTarget);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
_createClass(Modal, null, [{
|
|
||||||
key: 'VERSION',
|
key: 'VERSION',
|
||||||
get: function get() {
|
get: function get() {
|
||||||
return VERSION;
|
return VERSION;
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+38
-24
@@ -1,3 +1,5 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||||
|
|
||||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
@@ -15,7 +17,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var Popover = function ($) {
|
var Popover = function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@@ -77,24 +79,32 @@ var Popover = function ($) {
|
|||||||
function Popover() {
|
function Popover() {
|
||||||
_classCallCheck(this, Popover);
|
_classCallCheck(this, Popover);
|
||||||
|
|
||||||
return _possibleConstructorReturn(this, _Tooltip.apply(this, arguments));
|
return _possibleConstructorReturn(this, (Popover.__proto__ || Object.getPrototypeOf(Popover)).apply(this, arguments));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_createClass(Popover, [{
|
||||||
|
key: 'isWithContent',
|
||||||
|
|
||||||
|
|
||||||
// overrides
|
// overrides
|
||||||
|
|
||||||
Popover.prototype.isWithContent = function isWithContent() {
|
value: function isWithContent() {
|
||||||
return this.getTitle() || this._getContent();
|
return this.getTitle() || this._getContent();
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Popover.prototype.addAttachmentClass = function addAttachmentClass(attachment) {
|
key: 'addAttachmentClass',
|
||||||
|
value: function addAttachmentClass(attachment) {
|
||||||
$(this.getTipElement()).addClass(CLASS_PREFIX + '-' + attachment);
|
$(this.getTipElement()).addClass(CLASS_PREFIX + '-' + attachment);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Popover.prototype.getTipElement = function getTipElement() {
|
key: 'getTipElement',
|
||||||
return this.tip = this.tip || $(this.config.template)[0];
|
value: function getTipElement() {
|
||||||
};
|
this.tip = this.tip || $(this.config.template)[0];
|
||||||
|
return this.tip;
|
||||||
Popover.prototype.setContent = function setContent() {
|
}
|
||||||
|
}, {
|
||||||
|
key: 'setContent',
|
||||||
|
value: function setContent() {
|
||||||
var $tip = $(this.getTipElement());
|
var $tip = $(this.getTipElement());
|
||||||
|
|
||||||
// we use append for html objects to maintain js events
|
// we use append for html objects to maintain js events
|
||||||
@@ -102,25 +112,30 @@ var Popover = function ($) {
|
|||||||
this.setElementContent($tip.find(Selector.CONTENT), this._getContent());
|
this.setElementContent($tip.find(Selector.CONTENT), this._getContent());
|
||||||
|
|
||||||
$tip.removeClass(ClassName.FADE + ' ' + ClassName.SHOW);
|
$tip.removeClass(ClassName.FADE + ' ' + ClassName.SHOW);
|
||||||
};
|
}
|
||||||
|
|
||||||
// private
|
// private
|
||||||
|
|
||||||
Popover.prototype._getContent = function _getContent() {
|
}, {
|
||||||
|
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);
|
return this.element.getAttribute('data-content') || (typeof this.config.content === 'function' ? this.config.content.call(this.element) : this.config.content);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Popover.prototype._cleanTipClass = function _cleanTipClass() {
|
key: '_cleanTipClass',
|
||||||
|
value: function _cleanTipClass() {
|
||||||
var $tip = $(this.getTipElement());
|
var $tip = $(this.getTipElement());
|
||||||
var tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX);
|
var tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX);
|
||||||
if (tabClass !== null && tabClass.length > 0) {
|
if (tabClass !== null && tabClass.length > 0) {
|
||||||
$tip.removeClass(tabClass.join(''));
|
$tip.removeClass(tabClass.join(''));
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// static
|
// static
|
||||||
|
|
||||||
Popover._jQueryInterface = function _jQueryInterface(config) {
|
}], [{
|
||||||
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(config) {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var data = $(this).data(DATA_KEY);
|
var data = $(this).data(DATA_KEY);
|
||||||
var _config = (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' ? config : null;
|
var _config = (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' ? config : null;
|
||||||
@@ -135,15 +150,14 @@ var Popover = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (typeof config === 'string') {
|
if (typeof config === 'string') {
|
||||||
if (data[config] === undefined) {
|
if (typeof data[config] === 'undefined') {
|
||||||
throw new Error('No method named "' + config + '"');
|
throw new Error('No method named "' + config + '"');
|
||||||
}
|
}
|
||||||
data[config]();
|
data[config]();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
_createClass(Popover, null, [{
|
|
||||||
key: 'VERSION',
|
key: 'VERSION',
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+49
-32
@@ -1,3 +1,5 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||||
|
|
||||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
@@ -11,7 +13,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var ScrollSpy = function ($) {
|
var ScrollSpy = function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@@ -97,9 +99,13 @@ var ScrollSpy = function ($) {
|
|||||||
|
|
||||||
// getters
|
// getters
|
||||||
|
|
||||||
|
_createClass(ScrollSpy, [{
|
||||||
|
key: 'refresh',
|
||||||
|
|
||||||
|
|
||||||
// public
|
// public
|
||||||
|
|
||||||
ScrollSpy.prototype.refresh = function refresh() {
|
value: function refresh() {
|
||||||
var _this2 = this;
|
var _this2 = this;
|
||||||
|
|
||||||
var autoMethod = this._scrollElement !== this._scrollElement.window ? OffsetMethod.POSITION : OffsetMethod.OFFSET;
|
var autoMethod = this._scrollElement !== this._scrollElement.window ? OffsetMethod.POSITION : OffsetMethod.OFFSET;
|
||||||
@@ -139,9 +145,10 @@ var ScrollSpy = function ($) {
|
|||||||
_this2._offsets.push(item[0]);
|
_this2._offsets.push(item[0]);
|
||||||
_this2._targets.push(item[1]);
|
_this2._targets.push(item[1]);
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
ScrollSpy.prototype.dispose = function dispose() {
|
key: 'dispose',
|
||||||
|
value: function dispose() {
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY);
|
||||||
$(this._scrollElement).off(EVENT_KEY);
|
$(this._scrollElement).off(EVENT_KEY);
|
||||||
|
|
||||||
@@ -153,11 +160,13 @@ var ScrollSpy = function ($) {
|
|||||||
this._targets = null;
|
this._targets = null;
|
||||||
this._activeTarget = null;
|
this._activeTarget = null;
|
||||||
this._scrollHeight = null;
|
this._scrollHeight = null;
|
||||||
};
|
}
|
||||||
|
|
||||||
// private
|
// private
|
||||||
|
|
||||||
ScrollSpy.prototype._getConfig = function _getConfig(config) {
|
}, {
|
||||||
|
key: '_getConfig',
|
||||||
|
value: function _getConfig(config) {
|
||||||
config = $.extend({}, Default, config);
|
config = $.extend({}, Default, config);
|
||||||
|
|
||||||
if (typeof config.target !== 'string') {
|
if (typeof config.target !== 'string') {
|
||||||
@@ -172,21 +181,25 @@ var ScrollSpy = function ($) {
|
|||||||
Util.typeCheckConfig(NAME, config, DefaultType);
|
Util.typeCheckConfig(NAME, config, DefaultType);
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
ScrollSpy.prototype._getScrollTop = function _getScrollTop() {
|
key: '_getScrollTop',
|
||||||
|
value: function _getScrollTop() {
|
||||||
return this._scrollElement === window ? this._scrollElement.pageYOffset : this._scrollElement.scrollTop;
|
return this._scrollElement === window ? this._scrollElement.pageYOffset : this._scrollElement.scrollTop;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
ScrollSpy.prototype._getScrollHeight = function _getScrollHeight() {
|
key: '_getScrollHeight',
|
||||||
|
value: function _getScrollHeight() {
|
||||||
return this._scrollElement.scrollHeight || Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
|
return this._scrollElement.scrollHeight || Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
ScrollSpy.prototype._getOffsetHeight = function _getOffsetHeight() {
|
key: '_getOffsetHeight',
|
||||||
|
value: function _getOffsetHeight() {
|
||||||
return this._scrollElement === window ? window.innerHeight : this._scrollElement.getBoundingClientRect().height;
|
return this._scrollElement === window ? window.innerHeight : this._scrollElement.getBoundingClientRect().height;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
ScrollSpy.prototype._process = function _process() {
|
key: '_process',
|
||||||
|
value: function _process() {
|
||||||
var scrollTop = this._getScrollTop() + this._config.offset;
|
var scrollTop = this._getScrollTop() + this._config.offset;
|
||||||
var scrollHeight = this._getScrollHeight();
|
var scrollHeight = this._getScrollHeight();
|
||||||
var maxScroll = this._config.offset + scrollHeight - this._getOffsetHeight();
|
var maxScroll = this._config.offset + scrollHeight - this._getOffsetHeight();
|
||||||
@@ -211,20 +224,22 @@ var ScrollSpy = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
for (var i = this._offsets.length; i--;) {
|
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]);
|
var isActiveTarget = this._activeTarget !== this._targets[i] && scrollTop >= this._offsets[i] && (typeof this._offsets[i + 1] === 'undefined' || scrollTop < this._offsets[i + 1]);
|
||||||
|
|
||||||
if (isActiveTarget) {
|
if (isActiveTarget) {
|
||||||
this._activate(this._targets[i]);
|
this._activate(this._targets[i]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
ScrollSpy.prototype._activate = function _activate(target) {
|
key: '_activate',
|
||||||
|
value: function _activate(target) {
|
||||||
this._activeTarget = target;
|
this._activeTarget = target;
|
||||||
|
|
||||||
this._clear();
|
this._clear();
|
||||||
|
|
||||||
var queries = this._selector.split(',');
|
var queries = this._selector.split(',');
|
||||||
|
// eslint-disable-next-line arrow-body-style
|
||||||
queries = queries.map(function (selector) {
|
queries = queries.map(function (selector) {
|
||||||
return selector + '[data-target="' + target + '"],' + (selector + '[href="' + target + '"]');
|
return selector + '[data-target="' + target + '"],' + (selector + '[href="' + target + '"]');
|
||||||
});
|
});
|
||||||
@@ -245,15 +260,18 @@ var ScrollSpy = function ($) {
|
|||||||
$(this._scrollElement).trigger(Event.ACTIVATE, {
|
$(this._scrollElement).trigger(Event.ACTIVATE, {
|
||||||
relatedTarget: target
|
relatedTarget: target
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
ScrollSpy.prototype._clear = function _clear() {
|
key: '_clear',
|
||||||
|
value: function _clear() {
|
||||||
$(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE);
|
$(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE);
|
||||||
};
|
}
|
||||||
|
|
||||||
// static
|
// static
|
||||||
|
|
||||||
ScrollSpy._jQueryInterface = function _jQueryInterface(config) {
|
}], [{
|
||||||
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(config) {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var data = $(this).data(DATA_KEY);
|
var data = $(this).data(DATA_KEY);
|
||||||
var _config = (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' && config;
|
var _config = (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' && config;
|
||||||
@@ -264,15 +282,14 @@ var ScrollSpy = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (typeof config === 'string') {
|
if (typeof config === 'string') {
|
||||||
if (data[config] === undefined) {
|
if (typeof data[config] === 'undefined') {
|
||||||
throw new Error('No method named "' + config + '"');
|
throw new Error('No method named "' + config + '"');
|
||||||
}
|
}
|
||||||
data[config]();
|
data[config]();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
_createClass(ScrollSpy, null, [{
|
|
||||||
key: 'VERSION',
|
key: 'VERSION',
|
||||||
get: function get() {
|
get: function get() {
|
||||||
return VERSION;
|
return VERSION;
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+27
-16
@@ -1,3 +1,5 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
|
|
||||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
@@ -9,7 +11,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var Tab = function ($) {
|
var Tab = function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@@ -66,9 +68,13 @@ var Tab = function ($) {
|
|||||||
|
|
||||||
// getters
|
// getters
|
||||||
|
|
||||||
|
_createClass(Tab, [{
|
||||||
|
key: 'show',
|
||||||
|
|
||||||
|
|
||||||
// public
|
// public
|
||||||
|
|
||||||
Tab.prototype.show = function show() {
|
value: function show() {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && $(this._element).hasClass(ClassName.ACTIVE) || $(this._element).hasClass(ClassName.DISABLED)) {
|
if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && $(this._element).hasClass(ClassName.ACTIVE) || $(this._element).hasClass(ClassName.DISABLED)) {
|
||||||
@@ -128,16 +134,19 @@ var Tab = function ($) {
|
|||||||
} else {
|
} else {
|
||||||
complete();
|
complete();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tab.prototype.dispose = function dispose() {
|
key: 'dispose',
|
||||||
|
value: function dispose() {
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY);
|
||||||
this._element = null;
|
this._element = null;
|
||||||
};
|
}
|
||||||
|
|
||||||
// private
|
// private
|
||||||
|
|
||||||
Tab.prototype._activate = function _activate(element, container, callback) {
|
}, {
|
||||||
|
key: '_activate',
|
||||||
|
value: function _activate(element, container, callback) {
|
||||||
var _this2 = this;
|
var _this2 = this;
|
||||||
|
|
||||||
var activeElements = void 0;
|
var activeElements = void 0;
|
||||||
@@ -163,9 +172,10 @@ var Tab = function ($) {
|
|||||||
if (active) {
|
if (active) {
|
||||||
$(active).removeClass(ClassName.SHOW);
|
$(active).removeClass(ClassName.SHOW);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tab.prototype._transitionComplete = function _transitionComplete(element, active, isTransitioning, callback) {
|
key: '_transitionComplete',
|
||||||
|
value: function _transitionComplete(element, active, isTransitioning, callback) {
|
||||||
if (active) {
|
if (active) {
|
||||||
$(active).removeClass(ClassName.ACTIVE);
|
$(active).removeClass(ClassName.ACTIVE);
|
||||||
|
|
||||||
@@ -201,11 +211,13 @@ var Tab = function ($) {
|
|||||||
if (callback) {
|
if (callback) {
|
||||||
callback();
|
callback();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// static
|
// static
|
||||||
|
|
||||||
Tab._jQueryInterface = function _jQueryInterface(config) {
|
}], [{
|
||||||
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(config) {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var $this = $(this);
|
var $this = $(this);
|
||||||
var data = $this.data(DATA_KEY);
|
var data = $this.data(DATA_KEY);
|
||||||
@@ -216,15 +228,14 @@ var Tab = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (typeof config === 'string') {
|
if (typeof config === 'string') {
|
||||||
if (data[config] === undefined) {
|
if (typeof data[config] === 'undefined') {
|
||||||
throw new Error('No method named "' + config + '"');
|
throw new Error('No method named "' + config + '"');
|
||||||
}
|
}
|
||||||
data[config]();
|
data[config]();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
_createClass(Tab, null, [{
|
|
||||||
key: 'VERSION',
|
key: 'VERSION',
|
||||||
get: function get() {
|
get: function get() {
|
||||||
return VERSION;
|
return VERSION;
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+121
-83
@@ -1,3 +1,5 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||||
|
|
||||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
@@ -11,7 +13,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var Tooltip = function ($) {
|
var Tooltip = function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check for Popper dependency
|
* Check for Popper dependency
|
||||||
@@ -135,21 +137,32 @@ var Tooltip = function ($) {
|
|||||||
|
|
||||||
// getters
|
// getters
|
||||||
|
|
||||||
|
_createClass(Tooltip, [{
|
||||||
|
key: 'enable',
|
||||||
|
|
||||||
|
|
||||||
// public
|
// public
|
||||||
|
|
||||||
Tooltip.prototype.enable = function enable() {
|
value: function enable() {
|
||||||
this._isEnabled = true;
|
this._isEnabled = true;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype.disable = function disable() {
|
key: 'disable',
|
||||||
|
value: function disable() {
|
||||||
this._isEnabled = false;
|
this._isEnabled = false;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype.toggleEnabled = function toggleEnabled() {
|
key: 'toggleEnabled',
|
||||||
|
value: function toggleEnabled() {
|
||||||
this._isEnabled = !this._isEnabled;
|
this._isEnabled = !this._isEnabled;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
|
key: 'toggle',
|
||||||
|
value: function toggle(event) {
|
||||||
|
if (!this._isEnabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
Tooltip.prototype.toggle = function toggle(event) {
|
|
||||||
if (event) {
|
if (event) {
|
||||||
var dataKey = this.constructor.DATA_KEY;
|
var dataKey = this.constructor.DATA_KEY;
|
||||||
var context = $(event.currentTarget).data(dataKey);
|
var context = $(event.currentTarget).data(dataKey);
|
||||||
@@ -175,9 +188,10 @@ var Tooltip = function ($) {
|
|||||||
|
|
||||||
this._enter(null, this);
|
this._enter(null, this);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype.dispose = function dispose() {
|
key: 'dispose',
|
||||||
|
value: function dispose() {
|
||||||
clearTimeout(this._timeout);
|
clearTimeout(this._timeout);
|
||||||
|
|
||||||
$.removeData(this.element, this.constructor.DATA_KEY);
|
$.removeData(this.element, this.constructor.DATA_KEY);
|
||||||
@@ -196,14 +210,15 @@ var Tooltip = function ($) {
|
|||||||
if (this._popper !== null) {
|
if (this._popper !== null) {
|
||||||
this._popper.destroy();
|
this._popper.destroy();
|
||||||
}
|
}
|
||||||
this._popper = null;
|
|
||||||
|
|
||||||
|
this._popper = null;
|
||||||
this.element = null;
|
this.element = null;
|
||||||
this.config = null;
|
this.config = null;
|
||||||
this.tip = null;
|
this.tip = null;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype.show = function show() {
|
key: 'show',
|
||||||
|
value: function show() {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
if ($(this.element).css('display') === 'none') {
|
if ($(this.element).css('display') === 'none') {
|
||||||
@@ -300,9 +315,10 @@ var Tooltip = function ($) {
|
|||||||
complete();
|
complete();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype.hide = function hide(callback) {
|
key: 'hide',
|
||||||
|
value: function hide(callback) {
|
||||||
var _this2 = this;
|
var _this2 = this;
|
||||||
|
|
||||||
var tip = this.getTipElement();
|
var tip = this.getTipElement();
|
||||||
@@ -350,35 +366,43 @@ var Tooltip = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this._hoverState = '';
|
this._hoverState = '';
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype.update = function update() {
|
key: 'update',
|
||||||
|
value: function update() {
|
||||||
if (this._popper !== null) {
|
if (this._popper !== null) {
|
||||||
this._popper.scheduleUpdate();
|
this._popper.scheduleUpdate();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// protected
|
// protected
|
||||||
|
|
||||||
Tooltip.prototype.isWithContent = function isWithContent() {
|
}, {
|
||||||
|
key: 'isWithContent',
|
||||||
|
value: function isWithContent() {
|
||||||
return Boolean(this.getTitle());
|
return Boolean(this.getTitle());
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype.addAttachmentClass = function addAttachmentClass(attachment) {
|
key: 'addAttachmentClass',
|
||||||
|
value: function addAttachmentClass(attachment) {
|
||||||
$(this.getTipElement()).addClass(CLASS_PREFIX + '-' + attachment);
|
$(this.getTipElement()).addClass(CLASS_PREFIX + '-' + attachment);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype.getTipElement = function getTipElement() {
|
key: 'getTipElement',
|
||||||
return this.tip = this.tip || $(this.config.template)[0];
|
value: function getTipElement() {
|
||||||
};
|
this.tip = this.tip || $(this.config.template)[0];
|
||||||
|
return this.tip;
|
||||||
Tooltip.prototype.setContent = function setContent() {
|
}
|
||||||
|
}, {
|
||||||
|
key: 'setContent',
|
||||||
|
value: function setContent() {
|
||||||
var $tip = $(this.getTipElement());
|
var $tip = $(this.getTipElement());
|
||||||
this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle());
|
this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle());
|
||||||
$tip.removeClass(ClassName.FADE + ' ' + ClassName.SHOW);
|
$tip.removeClass(ClassName.FADE + ' ' + ClassName.SHOW);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype.setElementContent = function setElementContent($element, content) {
|
key: 'setElementContent',
|
||||||
|
value: function setElementContent($element, content) {
|
||||||
var html = this.config.html;
|
var html = this.config.html;
|
||||||
if ((typeof content === 'undefined' ? 'undefined' : _typeof(content)) === 'object' && (content.nodeType || content.jquery)) {
|
if ((typeof content === 'undefined' ? 'undefined' : _typeof(content)) === 'object' && (content.nodeType || content.jquery)) {
|
||||||
// content is a DOM node or a jQuery
|
// content is a DOM node or a jQuery
|
||||||
@@ -392,9 +416,10 @@ var Tooltip = function ($) {
|
|||||||
} else {
|
} else {
|
||||||
$element[html ? 'html' : 'text'](content);
|
$element[html ? 'html' : 'text'](content);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype.getTitle = function getTitle() {
|
key: 'getTitle',
|
||||||
|
value: function getTitle() {
|
||||||
var title = this.element.getAttribute('data-original-title');
|
var title = this.element.getAttribute('data-original-title');
|
||||||
|
|
||||||
if (!title) {
|
if (!title) {
|
||||||
@@ -402,15 +427,18 @@ var Tooltip = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return title;
|
return title;
|
||||||
};
|
}
|
||||||
|
|
||||||
// private
|
// private
|
||||||
|
|
||||||
Tooltip.prototype._getAttachment = function _getAttachment(placement) {
|
}, {
|
||||||
|
key: '_getAttachment',
|
||||||
|
value: function _getAttachment(placement) {
|
||||||
return AttachmentMap[placement.toUpperCase()];
|
return AttachmentMap[placement.toUpperCase()];
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype._setListeners = function _setListeners() {
|
key: '_setListeners',
|
||||||
|
value: function _setListeners() {
|
||||||
var _this3 = this;
|
var _this3 = this;
|
||||||
|
|
||||||
var triggers = this.config.trigger.split(' ');
|
var triggers = this.config.trigger.split(' ');
|
||||||
@@ -444,17 +472,19 @@ var Tooltip = function ($) {
|
|||||||
} else {
|
} else {
|
||||||
this._fixTitle();
|
this._fixTitle();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype._fixTitle = function _fixTitle() {
|
key: '_fixTitle',
|
||||||
|
value: function _fixTitle() {
|
||||||
var titleType = _typeof(this.element.getAttribute('data-original-title'));
|
var titleType = _typeof(this.element.getAttribute('data-original-title'));
|
||||||
if (this.element.getAttribute('title') || titleType !== 'string') {
|
if (this.element.getAttribute('title') || titleType !== 'string') {
|
||||||
this.element.setAttribute('data-original-title', this.element.getAttribute('title') || '');
|
this.element.setAttribute('data-original-title', this.element.getAttribute('title') || '');
|
||||||
this.element.setAttribute('title', '');
|
this.element.setAttribute('title', '');
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype._enter = function _enter(event, context) {
|
key: '_enter',
|
||||||
|
value: function _enter(event, context) {
|
||||||
var dataKey = this.constructor.DATA_KEY;
|
var dataKey = this.constructor.DATA_KEY;
|
||||||
|
|
||||||
context = context || $(event.currentTarget).data(dataKey);
|
context = context || $(event.currentTarget).data(dataKey);
|
||||||
@@ -487,9 +517,10 @@ var Tooltip = function ($) {
|
|||||||
context.show();
|
context.show();
|
||||||
}
|
}
|
||||||
}, context.config.delay.show);
|
}, context.config.delay.show);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype._leave = function _leave(event, context) {
|
key: '_leave',
|
||||||
|
value: function _leave(event, context) {
|
||||||
var dataKey = this.constructor.DATA_KEY;
|
var dataKey = this.constructor.DATA_KEY;
|
||||||
|
|
||||||
context = context || $(event.currentTarget).data(dataKey);
|
context = context || $(event.currentTarget).data(dataKey);
|
||||||
@@ -521,9 +552,10 @@ var Tooltip = function ($) {
|
|||||||
context.hide();
|
context.hide();
|
||||||
}
|
}
|
||||||
}, context.config.delay.hide);
|
}, context.config.delay.hide);
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype._isWithActiveTrigger = function _isWithActiveTrigger() {
|
key: '_isWithActiveTrigger',
|
||||||
|
value: function _isWithActiveTrigger() {
|
||||||
for (var trigger in this._activeTrigger) {
|
for (var trigger in this._activeTrigger) {
|
||||||
if (this._activeTrigger[trigger]) {
|
if (this._activeTrigger[trigger]) {
|
||||||
return true;
|
return true;
|
||||||
@@ -531,32 +563,34 @@ var Tooltip = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype._getConfig = function _getConfig(config) {
|
key: '_getConfig',
|
||||||
|
value: function _getConfig(config) {
|
||||||
config = $.extend({}, this.constructor.Default, $(this.element).data(), config);
|
config = $.extend({}, this.constructor.Default, $(this.element).data(), config);
|
||||||
|
|
||||||
if (config.delay && typeof config.delay === 'number') {
|
if (typeof config.delay === 'number') {
|
||||||
config.delay = {
|
config.delay = {
|
||||||
show: config.delay,
|
show: config.delay,
|
||||||
hide: config.delay
|
hide: config.delay
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config.title && typeof config.title === 'number') {
|
if (typeof config.title === 'number') {
|
||||||
config.title = config.title.toString();
|
config.title = config.title.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config.content && typeof config.content === 'number') {
|
if (typeof config.content === 'number') {
|
||||||
config.content = config.content.toString();
|
config.content = config.content.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
Util.typeCheckConfig(NAME, config, this.constructor.DefaultType);
|
Util.typeCheckConfig(NAME, config, this.constructor.DefaultType);
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype._getDelegateConfig = function _getDelegateConfig() {
|
key: '_getDelegateConfig',
|
||||||
|
value: function _getDelegateConfig() {
|
||||||
var config = {};
|
var config = {};
|
||||||
|
|
||||||
if (this.config) {
|
if (this.config) {
|
||||||
@@ -568,22 +602,25 @@ var Tooltip = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype._cleanTipClass = function _cleanTipClass() {
|
key: '_cleanTipClass',
|
||||||
|
value: function _cleanTipClass() {
|
||||||
var $tip = $(this.getTipElement());
|
var $tip = $(this.getTipElement());
|
||||||
var tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX);
|
var tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX);
|
||||||
if (tabClass !== null && tabClass.length > 0) {
|
if (tabClass !== null && tabClass.length > 0) {
|
||||||
$tip.removeClass(tabClass.join(''));
|
$tip.removeClass(tabClass.join(''));
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype._handlePopperPlacementChange = function _handlePopperPlacementChange(data) {
|
key: '_handlePopperPlacementChange',
|
||||||
|
value: function _handlePopperPlacementChange(data) {
|
||||||
this._cleanTipClass();
|
this._cleanTipClass();
|
||||||
this.addAttachmentClass(this._getAttachment(data.placement));
|
this.addAttachmentClass(this._getAttachment(data.placement));
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
Tooltip.prototype._fixTransition = function _fixTransition() {
|
key: '_fixTransition',
|
||||||
|
value: function _fixTransition() {
|
||||||
var tip = this.getTipElement();
|
var tip = this.getTipElement();
|
||||||
var initConfigAnimation = this.config.animation;
|
var initConfigAnimation = this.config.animation;
|
||||||
if (tip.getAttribute('x-placement') !== null) {
|
if (tip.getAttribute('x-placement') !== null) {
|
||||||
@@ -594,11 +631,13 @@ var Tooltip = function ($) {
|
|||||||
this.hide();
|
this.hide();
|
||||||
this.show();
|
this.show();
|
||||||
this.config.animation = initConfigAnimation;
|
this.config.animation = initConfigAnimation;
|
||||||
};
|
}
|
||||||
|
|
||||||
// static
|
// static
|
||||||
|
|
||||||
Tooltip._jQueryInterface = function _jQueryInterface(config) {
|
}], [{
|
||||||
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(config) {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
var data = $(this).data(DATA_KEY);
|
var data = $(this).data(DATA_KEY);
|
||||||
var _config = (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' && config;
|
var _config = (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' && config;
|
||||||
@@ -613,15 +652,14 @@ var Tooltip = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (typeof config === 'string') {
|
if (typeof config === 'string') {
|
||||||
if (data[config] === undefined) {
|
if (typeof data[config] === 'undefined') {
|
||||||
throw new Error('No method named "' + config + '"');
|
throw new Error('No method named "' + config + '"');
|
||||||
}
|
}
|
||||||
data[config]();
|
data[config]();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
}, {
|
||||||
_createClass(Tooltip, null, [{
|
|
||||||
key: 'VERSION',
|
key: 'VERSION',
|
||||||
get: function get() {
|
get: function get() {
|
||||||
return VERSION;
|
return VERSION;
|
||||||
@@ -675,5 +713,5 @@ var Tooltip = function ($) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return Tooltip;
|
return Tooltip;
|
||||||
}(jQuery); /* global Popper */
|
}(jQuery, Popper);
|
||||||
//# sourceMappingURL=tooltip.js.map
|
//# sourceMappingURL=tooltip.js.map
|
||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+7
-5
@@ -1,3 +1,5 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.0.0-beta): util.js
|
* Bootstrap (v4.0.0-beta): util.js
|
||||||
@@ -5,7 +7,7 @@
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var Util = function ($) {
|
var Util = function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@@ -40,7 +42,7 @@ var Util = function ($) {
|
|||||||
if ($(event.target).is(this)) {
|
if ($(event.target).is(this)) {
|
||||||
return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
|
return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
|
||||||
}
|
}
|
||||||
return undefined;
|
return undefined; // eslint-disable-line no-undefined
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -53,7 +55,7 @@ var Util = function ($) {
|
|||||||
var el = document.createElement('bootstrap');
|
var el = document.createElement('bootstrap');
|
||||||
|
|
||||||
for (var name in TransitionEndEvent) {
|
for (var name in TransitionEndEvent) {
|
||||||
if (el.style[name] !== undefined) {
|
if (typeof el.style[name] !== 'undefined') {
|
||||||
return {
|
return {
|
||||||
end: TransitionEndEvent[name]
|
end: TransitionEndEvent[name]
|
||||||
};
|
};
|
||||||
@@ -115,7 +117,7 @@ var Util = function ($) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
var $selector = $(selector);
|
var $selector = $(document).find(selector);
|
||||||
return $selector.length > 0 ? selector : null;
|
return $selector.length > 0 ? selector : null;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
return null;
|
return null;
|
||||||
@@ -132,7 +134,7 @@ var Util = function ($) {
|
|||||||
},
|
},
|
||||||
typeCheckConfig: function typeCheckConfig(componentName, config, configTypes) {
|
typeCheckConfig: function typeCheckConfig(componentName, config, configTypes) {
|
||||||
for (var property in configTypes) {
|
for (var property in configTypes) {
|
||||||
if (configTypes.hasOwnProperty(property)) {
|
if (Object.prototype.hasOwnProperty.call(configTypes, property)) {
|
||||||
var expectedTypes = configTypes[property];
|
var expectedTypes = configTypes[property];
|
||||||
var value = config[property];
|
var value = config[property];
|
||||||
var valueType = value && isElement(value) ? 'element' : toType(value);
|
var valueType = value && isElement(value) ? 'element' : toType(value);
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+2
-1
@@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Alert = (($) => {
|
const Alert = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
+2
-1
@@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.0.0-beta): button.js
|
* Bootstrap (v4.0.0-beta): button.js
|
||||||
@@ -5,7 +6,7 @@
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Button = (($) => {
|
const Button = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
+2
-1
@@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Carousel = (($) => {
|
const Carousel = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
+3
-2
@@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Collapse = (($) => {
|
const Collapse = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -362,7 +363,7 @@ const Collapse = (($) => {
|
|||||||
|
|
||||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||||
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
||||||
if (event.target.tagName === 'A' && !$.contains(this, event.target)) {
|
if (event.currentTarget.tagName === 'A') {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+6
-13
@@ -1,5 +1,5 @@
|
|||||||
/* global Popper */
|
import $ from 'jquery'
|
||||||
|
import Popper from 'popper.js'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@@ -10,7 +10,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Dropdown = (($) => {
|
const Dropdown = (() => {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check for Popper dependency
|
* Check for Popper dependency
|
||||||
@@ -75,13 +75,11 @@ const Dropdown = (($) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Default = {
|
const Default = {
|
||||||
placement : AttachmentMap.BOTTOM,
|
|
||||||
offset : 0,
|
offset : 0,
|
||||||
flip : true
|
flip : true
|
||||||
}
|
}
|
||||||
|
|
||||||
const DefaultType = {
|
const DefaultType = {
|
||||||
placement : 'string',
|
|
||||||
offset : '(number|string)',
|
offset : '(number|string)',
|
||||||
flip : 'boolean'
|
flip : 'boolean'
|
||||||
}
|
}
|
||||||
@@ -203,11 +201,6 @@ const Dropdown = (($) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_getConfig(config) {
|
_getConfig(config) {
|
||||||
const elementData = $(this._element).data()
|
|
||||||
if (typeof elementData.placement !== 'undefined') {
|
|
||||||
elementData.placement = AttachmentMap[elementData.placement.toUpperCase()]
|
|
||||||
}
|
|
||||||
|
|
||||||
config = $.extend(
|
config = $.extend(
|
||||||
{},
|
{},
|
||||||
this.constructor.Default,
|
this.constructor.Default,
|
||||||
@@ -234,10 +227,10 @@ const Dropdown = (($) => {
|
|||||||
|
|
||||||
_getPlacement() {
|
_getPlacement() {
|
||||||
const $parentDropdown = $(this._element).parent()
|
const $parentDropdown = $(this._element).parent()
|
||||||
let placement = this._config.placement
|
let placement = AttachmentMap.BOTTOM
|
||||||
|
|
||||||
// Handle dropup
|
// Handle dropup
|
||||||
if ($parentDropdown.hasClass(ClassName.DROPUP) || this._config.placement === AttachmentMap.TOP) {
|
if ($parentDropdown.hasClass(ClassName.DROPUP)) {
|
||||||
placement = AttachmentMap.TOP
|
placement = AttachmentMap.TOP
|
||||||
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
||||||
placement = AttachmentMap.TOPEND
|
placement = AttachmentMap.TOPEND
|
||||||
@@ -445,6 +438,6 @@ const Dropdown = (($) => {
|
|||||||
|
|
||||||
return Dropdown
|
return Dropdown
|
||||||
|
|
||||||
})(jQuery)
|
})(jQuery, Popper)
|
||||||
|
|
||||||
export default Dropdown
|
export default Dropdown
|
||||||
|
|||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
|
import Alert from './alert'
|
||||||
|
import Button from './button'
|
||||||
|
import Carousel from './carousel'
|
||||||
|
import Collapse from './collapse'
|
||||||
|
import Dropdown from './dropdown'
|
||||||
|
import Modal from './modal'
|
||||||
|
import Popover from './popover'
|
||||||
|
import Scrollspy from './scrollspy'
|
||||||
|
import Tab from './tab'
|
||||||
|
import Tooltip from './tooltip'
|
||||||
|
import Util from './util'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* --------------------------------------------------------------------------
|
||||||
|
* Bootstrap (v4.0.0-alpha.6): index.js
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
* --------------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
(() => {
|
||||||
|
if (typeof jQuery === 'undefined') {
|
||||||
|
throw new Error('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.')
|
||||||
|
}
|
||||||
|
|
||||||
|
const version = $.fn.jquery.split(' ')[0].split('.')
|
||||||
|
const min = 3
|
||||||
|
const max = 4
|
||||||
|
if (version[0] < min || version[0] >= max) {
|
||||||
|
throw new Error('Bootstrap\'s JavaScript requires at least jQuery v3.0.0 but less than v4.0.0')
|
||||||
|
}
|
||||||
|
})(jQuery)
|
||||||
|
|
||||||
|
export {
|
||||||
|
Util,
|
||||||
|
Alert,
|
||||||
|
Button,
|
||||||
|
Carousel,
|
||||||
|
Collapse,
|
||||||
|
Dropdown,
|
||||||
|
Modal,
|
||||||
|
Popover,
|
||||||
|
Scrollspy,
|
||||||
|
Tab,
|
||||||
|
Tooltip
|
||||||
|
}
|
||||||
+6
-2
@@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Modal = (($) => {
|
const Modal = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -135,6 +136,8 @@ const Modal = (($) => {
|
|||||||
this._checkScrollbar()
|
this._checkScrollbar()
|
||||||
this._setScrollbar()
|
this._setScrollbar()
|
||||||
|
|
||||||
|
this._adjustDialog()
|
||||||
|
|
||||||
$(document.body).addClass(ClassName.OPEN)
|
$(document.body).addClass(ClassName.OPEN)
|
||||||
|
|
||||||
this._setEscapeEvent()
|
this._setEscapeEvent()
|
||||||
@@ -426,7 +429,8 @@ const Modal = (($) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_checkScrollbar() {
|
_checkScrollbar() {
|
||||||
this._isBodyOverflowing = document.body.clientWidth < window.innerWidth
|
const rect = document.body.getBoundingClientRect()
|
||||||
|
this._isBodyOverflowing = rect.left + rect.right < window.innerWidth
|
||||||
this._scrollbarWidth = this._getScrollbarWidth()
|
this._scrollbarWidth = this._getScrollbarWidth()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+2
-1
@@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Tooltip from './tooltip'
|
import Tooltip from './tooltip'
|
||||||
|
|
||||||
|
|
||||||
@@ -8,7 +9,7 @@ import Tooltip from './tooltip'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Popover = (($) => {
|
const Popover = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
+2
-1
@@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const ScrollSpy = (($) => {
|
const ScrollSpy = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
+2
-1
@@ -1,3 +1,4 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@@ -8,7 +9,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Tab = (($) => {
|
const Tab = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
+7
-7
@@ -1,5 +1,5 @@
|
|||||||
/* global Popper */
|
import $ from 'jquery'
|
||||||
|
import Popper from 'popper.js'
|
||||||
import Util from './util'
|
import Util from './util'
|
||||||
|
|
||||||
|
|
||||||
@@ -10,7 +10,7 @@ import Util from './util'
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Tooltip = (($) => {
|
const Tooltip = (() => {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check for Popper dependency
|
* Check for Popper dependency
|
||||||
@@ -622,18 +622,18 @@ const Tooltip = (($) => {
|
|||||||
config
|
config
|
||||||
)
|
)
|
||||||
|
|
||||||
if (config.delay && typeof config.delay === 'number') {
|
if (typeof config.delay === 'number') {
|
||||||
config.delay = {
|
config.delay = {
|
||||||
show : config.delay,
|
show : config.delay,
|
||||||
hide : config.delay
|
hide : config.delay
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config.title && typeof config.title === 'number') {
|
if (typeof config.title === 'number') {
|
||||||
config.title = config.title.toString()
|
config.title = config.title.toString()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config.content && typeof config.content === 'number') {
|
if (typeof config.content === 'number') {
|
||||||
config.content = config.content.toString()
|
config.content = config.content.toString()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -728,6 +728,6 @@ const Tooltip = (($) => {
|
|||||||
|
|
||||||
return Tooltip
|
return Tooltip
|
||||||
|
|
||||||
})(jQuery)
|
})(jQuery, Popper)
|
||||||
|
|
||||||
export default Tooltip
|
export default Tooltip
|
||||||
|
|||||||
+4
-2
@@ -1,3 +1,5 @@
|
|||||||
|
import $ from 'jquery'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
* Bootstrap (v4.0.0-beta): util.js
|
* Bootstrap (v4.0.0-beta): util.js
|
||||||
@@ -5,7 +7,7 @@
|
|||||||
* --------------------------------------------------------------------------
|
* --------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Util = (($) => {
|
const Util = (() => {
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -117,7 +119,7 @@ const Util = (($) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const $selector = $(selector)
|
const $selector = $(document).find(selector)
|
||||||
return $selector.length > 0 ? selector : null
|
return $selector.length > 0 ? selector : null
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
return null
|
return null
|
||||||
|
|||||||
@@ -28,6 +28,7 @@
|
|||||||
"global-require": "off",
|
"global-require": "off",
|
||||||
"no-process-env": "off",
|
"no-process-env": "off",
|
||||||
"no-process-exit": "off",
|
"no-process-exit": "off",
|
||||||
|
"no-sync": "off",
|
||||||
|
|
||||||
// Stylistic Issues
|
// Stylistic Issues
|
||||||
"brace-style": "off",
|
"brace-style": "off",
|
||||||
|
|||||||
+77
-1
@@ -21,6 +21,8 @@ $(function () {
|
|||||||
document.body.removeChild(scrollDiv)
|
document.body.removeChild(scrollDiv)
|
||||||
return scrollbarWidth
|
return scrollbarWidth
|
||||||
}
|
}
|
||||||
|
// Simulate scrollbars in PhantomJS
|
||||||
|
$('html').css('padding-right', '16px')
|
||||||
},
|
},
|
||||||
beforeEach: function () {
|
beforeEach: function () {
|
||||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||||
@@ -349,6 +351,20 @@ $(function () {
|
|||||||
$toggleBtn.trigger('click')
|
$toggleBtn.trigger('click')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
QUnit.test('should adjust the inline padding of the modal when opening', function (assert) {
|
||||||
|
assert.expect(1)
|
||||||
|
var done = assert.async()
|
||||||
|
|
||||||
|
$('<div id="modal-test"/>')
|
||||||
|
.on('shown.bs.modal', function () {
|
||||||
|
var expectedPadding = $(this).getScrollbarWidth() + 'px'
|
||||||
|
var currentPadding = $(this).css('padding-right')
|
||||||
|
assert.strictEqual(currentPadding, expectedPadding, 'modal padding should be adjusted while opening')
|
||||||
|
done()
|
||||||
|
})
|
||||||
|
.bootstrapModal('show')
|
||||||
|
})
|
||||||
|
|
||||||
QUnit.test('should adjust the inline body padding when opening and restore when closing', function (assert) {
|
QUnit.test('should adjust the inline body padding when opening and restore when closing', function (assert) {
|
||||||
assert.expect(2)
|
assert.expect(2)
|
||||||
var done = assert.async()
|
var done = assert.async()
|
||||||
@@ -391,6 +407,30 @@ $(function () {
|
|||||||
.bootstrapModal('show')
|
.bootstrapModal('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
QUnit.test('should not adjust the inline body padding when it does not overflow', function (assert) {
|
||||||
|
assert.expect(1)
|
||||||
|
var done = assert.async()
|
||||||
|
var $body = $(document.body)
|
||||||
|
var originalPadding = $body.css('padding-right')
|
||||||
|
|
||||||
|
// Hide scrollbars to prevent the body overflowing
|
||||||
|
$body.css('overflow', 'hidden') // real scrollbar (for in-browser testing)
|
||||||
|
$('html').css('padding-right', '0px') // simulated scrollbar (for PhantomJS)
|
||||||
|
|
||||||
|
$('<div id="modal-test"/>')
|
||||||
|
.on('shown.bs.modal', function () {
|
||||||
|
var currentPadding = $body.css('padding-right')
|
||||||
|
assert.strictEqual(currentPadding, originalPadding, 'body padding should not be adjusted')
|
||||||
|
$(this).bootstrapModal('hide')
|
||||||
|
|
||||||
|
// restore scrollbars
|
||||||
|
$body.css('overflow', 'auto')
|
||||||
|
$('html').css('padding-right', '16px')
|
||||||
|
done()
|
||||||
|
})
|
||||||
|
.bootstrapModal('show')
|
||||||
|
})
|
||||||
|
|
||||||
QUnit.test('should adjust the inline padding of fixed elements when opening and restore when closing', function (assert) {
|
QUnit.test('should adjust the inline padding of fixed elements when opening and restore when closing', function (assert) {
|
||||||
assert.expect(2)
|
assert.expect(2)
|
||||||
var done = assert.async()
|
var done = assert.async()
|
||||||
@@ -525,7 +565,7 @@ $(function () {
|
|||||||
|
|
||||||
$('<div id="modal-test"/>')
|
$('<div id="modal-test"/>')
|
||||||
.on('hidden.bs.modal', function () {
|
.on('hidden.bs.modal', function () {
|
||||||
assert.ok(!$body.attr('style'), 'body does not have inline padding set')
|
assert.strictEqual($body.attr('style').indexOf('padding-right'), -1, 'body does not have inline padding set')
|
||||||
$style.remove()
|
$style.remove()
|
||||||
done()
|
done()
|
||||||
})
|
})
|
||||||
@@ -597,4 +637,40 @@ $(function () {
|
|||||||
})
|
})
|
||||||
.trigger('click')
|
.trigger('click')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
QUnit.test('should not parse target as html', function (assert) {
|
||||||
|
assert.expect(1)
|
||||||
|
var done = assert.async()
|
||||||
|
|
||||||
|
var $toggleBtn = $('<button data-toggle="modal" data-target="<div id="modal-test"><div class="contents"<div<div id="close" data-dismiss="modal"/></div></div>"/>')
|
||||||
|
.appendTo('#qunit-fixture')
|
||||||
|
|
||||||
|
$toggleBtn.trigger('click')
|
||||||
|
setTimeout(function () {
|
||||||
|
assert.strictEqual($('#modal-test').length, 0, 'target has not been parsed and added to the document')
|
||||||
|
done()
|
||||||
|
}, 1)
|
||||||
|
})
|
||||||
|
|
||||||
|
QUnit.test('should not execute js from target', function (assert) {
|
||||||
|
assert.expect(0)
|
||||||
|
var done = assert.async()
|
||||||
|
|
||||||
|
// This toggle button contains XSS payload in its data-target
|
||||||
|
// Note: it uses the onerror handler of an img element to execute the js, because a simple script element does not work here
|
||||||
|
// a script element works in manual tests though, so here it is likely blocked by the qunit framework
|
||||||
|
var $toggleBtn = $('<button data-toggle="modal" data-target="<div><image src="missing.png" onerror="$('#qunit-fixture button.control').trigger('click')"></div>"/>')
|
||||||
|
.appendTo('#qunit-fixture')
|
||||||
|
// The XSS payload above does not have a closure over this function and cannot access the assert object directly
|
||||||
|
// However, it can send a click event to the following control button, which will then fail the assert
|
||||||
|
$('<button>')
|
||||||
|
.addClass('control')
|
||||||
|
.on('click', function () {
|
||||||
|
assert.notOk(true, 'XSS payload is not executed as js')
|
||||||
|
})
|
||||||
|
.appendTo('#qunit-fixture')
|
||||||
|
|
||||||
|
$toggleBtn.trigger('click')
|
||||||
|
setTimeout(done, 500)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -167,6 +167,10 @@
|
|||||||
<div class="bg-dark text-white p-2" id="tall" style="display: none;">
|
<div class="bg-dark text-white p-2" id="tall" style="display: none;">
|
||||||
Tall body content to force the page to have a scrollbar.
|
Tall body content to force the page to have a scrollbar.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="<div class="modal fade the-bad" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">The Bad Modal</h4></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-target attribute of it's show-button</div></div></div></div>">
|
||||||
|
Modal with an XSS inside the data-target
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||||
|
|||||||
Generated
+593
-2173
File diff suppressed because it is too large
Load Diff
+19
-10
@@ -28,14 +28,17 @@
|
|||||||
"css-prefix-docs": "postcss --config build/postcss.config.js --no-map --replace assets/css/docs.min.css",
|
"css-prefix-docs": "postcss --config build/postcss.config.js --no-map --replace assets/css/docs.min.css",
|
||||||
"css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css",
|
"css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css",
|
||||||
"css-minify-docs": "cleancss --level 1 --source-map --source-map-inline-sources --output assets/css/docs.min.css assets/css/docs.min.css",
|
"css-minify-docs": "cleancss --level 1 --source-map --source-map-inline-sources --output assets/css/docs.min.css assets/css/docs.min.css",
|
||||||
"js": "npm-run-all js-lint js-compile js-minify",
|
"js": "npm-run-all js-lint* js-compile js-minify",
|
||||||
"js-docs": "npm-run-all js-lint-docs js-minify-docs",
|
"js-docs": "npm-run-all js-lint-docs js-minify-docs",
|
||||||
"js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/ Gruntfile.js",
|
"js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/ Gruntfile.js",
|
||||||
"js-lint-docs": "eslint --config js/tests/.eslintrc.json assets/js/",
|
"js-lint-docs": "eslint --config js/tests/.eslintrc.json assets/js/ sw.js",
|
||||||
"js-compile": "npm-run-all --parallel js-compile-*",
|
"js-compile": "npm-run-all --parallel js-compile-*",
|
||||||
"js-compile-bundle": "shx cat js/src/util.js js/src/alert.js js/src/button.js js/src/carousel.js js/src/collapse.js js/src/dropdown.js js/src/modal.js js/src/scrollspy.js js/src/tab.js js/src/tooltip.js js/src/popover.js | shx sed \"s/^(import|export).*//\" | babel --filename js/src/bootstrap.js | node build/stamp.js > dist/js/bootstrap.js",
|
"js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js",
|
||||||
"js-compile-plugins": "babel js/src/ --out-dir js/dist/ --source-maps",
|
"js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js",
|
||||||
"js-minify": "uglifyjs --config-file build/uglifyjs.config.json --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
|
"js-compile-plugins": "babel --no-babelrc js/src/ --out-dir js/dist/ --source-maps --presets=es2015 --plugins=transform-es2015-modules-strip",
|
||||||
|
"js-minify": "npm-run-all --parallel js-minify-standalone js-minify-bundle",
|
||||||
|
"js-minify-standalone": "uglifyjs --config-file build/uglifyjs.config.json --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
|
||||||
|
"js-minify-bundle": "uglifyjs --config-file build/uglifyjs.config.json --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
|
||||||
"js-minify-docs": "uglifyjs --config-file build/uglifyjs.config.json --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js assets/js/src/application.js assets/js/src/pwa.js",
|
"js-minify-docs": "uglifyjs --config-file build/uglifyjs.config.json --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js assets/js/src/application.js assets/js/src/pwa.js",
|
||||||
"js-test": "phantomjs ./node_modules/qunit-phantomjs-runner/runner.js js/tests/index.html 60",
|
"js-test": "phantomjs ./node_modules/qunit-phantomjs-runner/runner.js js/tests/index.html 60",
|
||||||
"js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & grunt saucelabs-qunit",
|
"js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & grunt saucelabs-qunit",
|
||||||
@@ -43,9 +46,9 @@
|
|||||||
"docs-lint": "htmllint --rc build/.htmllintrc _gh_pages/*.html _gh_pages/**/*.html js/tests/visual/*.html",
|
"docs-lint": "htmllint --rc build/.htmllintrc _gh_pages/*.html _gh_pages/**/*.html js/tests/visual/*.html",
|
||||||
"docs-compile": "bundle exec jekyll build",
|
"docs-compile": "bundle exec jekyll build",
|
||||||
"docs-serve": "bundle exec jekyll serve",
|
"docs-serve": "bundle exec jekyll serve",
|
||||||
"docs-github": "shx echo 'github: true' > $npm_config_tmp/twbsconfig.yml && npm run docs-compile -- --config _config.yml,$npm_config_tmp/twbsconfig.yml && shx rm $npm_config_tmp/twbsconfig.yml",
|
"docs-github": "shx echo \"github: true\" > twbsconfig.yml && npm run docs-compile -- --config _config.yml,twbsconfig.yml && shx rm ./twbsconfig.yml",
|
||||||
"docs-upload-preview": "build/upload-preview.sh",
|
"docs-upload-preview": "build/upload-preview.sh",
|
||||||
"maintenance-dependencies": "ncu -a -x jquery && npm update && bundle update && shx echo 'Manually update assets/js/vendor/*, js/tests/vendor/*, bower.json and .travis.yml'",
|
"maintenance-dependencies": "ncu -a -x jquery && npm update && bundle update && shx echo 'Manually update assets/js/vendor/*, js/tests/vendor/* and .travis.yml'",
|
||||||
"release-version": "node build/change-version.js",
|
"release-version": "node build/change-version.js",
|
||||||
"release-zip": "cd dist/ && zip -r9 bootstrap-$npm_package_version-dist.zip * && shx mv bootstrap-$npm_package_version-dist.zip ..",
|
"release-zip": "cd dist/ && zip -r9 bootstrap-$npm_package_version-dist.zip * && shx mv bootstrap-$npm_package_version-dist.zip ..",
|
||||||
"dist": "npm-run-all --parallel css js css-docs",
|
"dist": "npm-run-all --parallel css js css-docs",
|
||||||
@@ -67,13 +70,14 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {},
|
"dependencies": {},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"jquery": "3.0.0 - 4.0.0",
|
"jquery": "^3.0.0",
|
||||||
"popper.js": "^1.12.3"
|
"popper.js": "^1.12.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^7.1.2",
|
"autoprefixer": "^7.1.2",
|
||||||
"babel-cli": "^6.24.1",
|
"babel-cli": "^6.24.1",
|
||||||
"babel-eslint": "^7.2.3",
|
"babel-eslint": "^7.2.3",
|
||||||
|
"babel-plugin-external-helpers": "^6.22.0",
|
||||||
"babel-plugin-transform-es2015-modules-strip": "^0.1.1",
|
"babel-plugin-transform-es2015-modules-strip": "^0.1.1",
|
||||||
"babel-preset-es2015": "^6.24.1",
|
"babel-preset-es2015": "^6.24.1",
|
||||||
"clean-css-cli": "^4.1.6",
|
"clean-css-cli": "^4.1.6",
|
||||||
@@ -86,9 +90,13 @@
|
|||||||
"nodemon": "^1.11.0",
|
"nodemon": "^1.11.0",
|
||||||
"npm-run-all": "^4.0.2",
|
"npm-run-all": "^4.0.2",
|
||||||
"phantomjs-prebuilt": "^2.1.14",
|
"phantomjs-prebuilt": "^2.1.14",
|
||||||
|
"popper.js": "^1.12.5",
|
||||||
"postcss-cli": "^4.1.0",
|
"postcss-cli": "^4.1.0",
|
||||||
"qunit-phantomjs-runner": "^2.3.0",
|
"qunit-phantomjs-runner": "^2.3.0",
|
||||||
"qunitjs": "^2.4.0",
|
"qunitjs": "^2.4.0",
|
||||||
|
"rollup": "^0.49.2",
|
||||||
|
"rollup-plugin-babel": "^3.0.2",
|
||||||
|
"rollup-plugin-node-resolve": "^3.0.0",
|
||||||
"shelljs": "^0.7.8",
|
"shelljs": "^0.7.8",
|
||||||
"shx": "^0.2.2",
|
"shx": "^0.2.2",
|
||||||
"uglify-js": "^3.0.24"
|
"uglify-js": "^3.0.24"
|
||||||
@@ -110,6 +118,7 @@
|
|||||||
"LICENSE"
|
"LICENSE"
|
||||||
],
|
],
|
||||||
"jspm": {
|
"jspm": {
|
||||||
|
"registry": "npm",
|
||||||
"main": "js/bootstrap",
|
"main": "js/bootstrap",
|
||||||
"directories": {
|
"directories": {
|
||||||
"lib": "dist"
|
"lib": "dist"
|
||||||
@@ -125,8 +134,8 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {},
|
"dependencies": {},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"jquery": "3",
|
"jquery": "^3.0.0",
|
||||||
"popper.js": "npm:popper.js@^1.12.3"
|
"popper.js": "^1.12.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,15 +1,14 @@
|
|||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||||
margin-bottom: $breadcrumb-margin-bottom;
|
margin-bottom: $breadcrumb-margin-bottom;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background-color: $breadcrumb-bg;
|
background-color: $breadcrumb-bg;
|
||||||
@include border-radius($border-radius);
|
@include border-radius($border-radius);
|
||||||
@include clearfix;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-item {
|
.breadcrumb-item {
|
||||||
float: left;
|
|
||||||
|
|
||||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||||
+ .breadcrumb-item::before {
|
+ .breadcrumb-item::before {
|
||||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||||
|
|||||||
@@ -130,6 +130,7 @@ select.form-control {
|
|||||||
padding-bottom: $input-btn-padding-y;
|
padding-bottom: $input-btn-padding-y;
|
||||||
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
||||||
line-height: $input-btn-line-height;
|
line-height: $input-btn-line-height;
|
||||||
|
background-color: transparent;
|
||||||
border: solid transparent;
|
border: solid transparent;
|
||||||
border-width: $input-btn-border-width 0;
|
border-width: $input-btn-border-width 0;
|
||||||
|
|
||||||
|
|||||||
@@ -98,6 +98,7 @@
|
|||||||
// on the `.navbar` parent.
|
// on the `.navbar` parent.
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
// For always expanded or extra full navbars, ensure content aligns itself
|
// For always expanded or extra full navbars, ensure content aligns itself
|
||||||
// properly vertically. Can be easily overridden with flex utilities.
|
// properly vertically. Can be easily overridden with flex utilities.
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -177,6 +178,9 @@
|
|||||||
// scss-lint:disable ImportantRule
|
// scss-lint:disable ImportantRule
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
|
||||||
|
// Changes flex-bases to auto because of an IE10 bug
|
||||||
|
flex-basis: auto;
|
||||||
}
|
}
|
||||||
// scss-lint:enable ImportantRule
|
// scss-lint:enable ImportantRule
|
||||||
|
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
@include box-shadow($btn-box-shadow);
|
@include box-shadow($btn-box-shadow);
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
@include color-yiq($background);
|
@include color-yiq($active-background);
|
||||||
background-color: $active-background;
|
background-color: $active-background;
|
||||||
border-color: $active-border;
|
border-color: $active-border;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -44,9 +44,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.rounded-circle {
|
.rounded-circle {
|
||||||
border-radius: 50%;
|
border-radius: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-0 {
|
.rounded-0 {
|
||||||
border-radius: 0;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user