Merge branch 'v4-dev' into collapse-js-with-text-truncate

This commit is contained in:
Johann-S 2017-09-11 10:54:35 +02:00 committed by GitHub
commit 96659a3cad
39 changed files with 290 additions and 277 deletions

View File

@ -1879,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;
} }
@ -5633,11 +5634,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 {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -33,9 +33,10 @@ var Util = function () {
MozTransition: 'transitionend', MozTransition: 'transitionend',
OTransition: 'oTransitionEnd otransitionend', OTransition: 'oTransitionEnd otransitionend',
transition: 'transitionend' transition: 'transitionend'
};
// shoutout AngusCroll (https://goo.gl/pxwQGp) // shoutout AngusCroll (https://goo.gl/pxwQGp)
};function toType(obj) { function toType(obj) {
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase(); return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
} }
@ -255,14 +256,14 @@ var Alert = function () {
ALERT: 'alert', ALERT: 'alert',
FADE: 'fade', FADE: 'fade',
SHOW: 'show' SHOW: 'show'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Alert = function () { var Alert = function () {
function Alert(element) { function Alert(element) {
classCallCheck(this, Alert); classCallCheck(this, Alert);
@ -435,14 +436,14 @@ var Button = function () {
var Event = { var Event = {
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY, CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY) FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Button = function () { var Button = function () {
function Button(element) { function Button(element) {
classCallCheck(this, Button); classCallCheck(this, Button);
@ -644,14 +645,14 @@ var Carousel = function () {
INDICATORS: '.carousel-indicators', INDICATORS: '.carousel-indicators',
DATA_SLIDE: '[data-slide], [data-slide-to]', DATA_SLIDE: '[data-slide], [data-slide-to]',
DATA_RIDE: '[data-ride="carousel"]' DATA_RIDE: '[data-ride="carousel"]'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Carousel = function () { var Carousel = function () {
function Carousel(element, config) { function Carousel(element, config) {
classCallCheck(this, Carousel); classCallCheck(this, Carousel);
@ -1128,14 +1129,14 @@ var Collapse = function () {
var Selector = { var Selector = {
ACTIVES: '.show, .collapsing', ACTIVES: '.show, .collapsing',
DATA_TOGGLE: '[data-toggle="collapse"]' DATA_TOGGLE: '[data-toggle="collapse"]'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Collapse = function () { var Collapse = function () {
function Collapse(element, config) { function Collapse(element, config) {
classCallCheck(this, Collapse); classCallCheck(this, Collapse);
@ -3943,23 +3944,21 @@ 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'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Dropdown = function () { var Dropdown = function () {
function Dropdown(element, config) { function Dropdown(element, config) {
classCallCheck(this, Dropdown); classCallCheck(this, Dropdown);
@ -4057,11 +4056,6 @@ var Dropdown = function () {
}; };
Dropdown.prototype._getConfig = function _getConfig(config) { Dropdown.prototype._getConfig = function _getConfig(config) {
var elementData = $(this._element).data();
if (typeof elementData.placement !== 'undefined') {
elementData.placement = AttachmentMap[elementData.placement.toUpperCase()];
}
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);
@ -4079,10 +4073,10 @@ var Dropdown = function () {
Dropdown.prototype._getPlacement = function _getPlacement() { Dropdown.prototype._getPlacement = 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;
@ -4108,9 +4102,10 @@ var Dropdown = function () {
enabled: this._config.flip enabled: this._config.flip
} }
} }
};
// Disable Popper.js for Dropdown in Navbar // Disable Popper.js for Dropdown in Navbar
};if (this._inNavbar) { if (this._inNavbar) {
popperConfig.modifiers.applyStyle = { popperConfig.modifiers.applyStyle = {
enabled: !this._inNavbar enabled: !this._inNavbar
}; };
@ -4363,14 +4358,14 @@ var Modal = function () {
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
STICKY_CONTENT: '.sticky-top', STICKY_CONTENT: '.sticky-top',
NAVBAR_TOGGLER: '.navbar-toggler' NAVBAR_TOGGLER: '.navbar-toggler'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Modal = function () { var Modal = function () {
function Modal(element, config) { function Modal(element, config) {
classCallCheck(this, Modal); classCallCheck(this, Modal);
@ -4978,14 +4973,14 @@ var Tooltip = function () {
FOCUS: 'focus', FOCUS: 'focus',
CLICK: 'click', CLICK: 'click',
MANUAL: 'manual' MANUAL: 'manual'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Tooltip = function () { var Tooltip = function () {
function Tooltip(element, config) { function Tooltip(element, config) {
classCallCheck(this, Tooltip); classCallCheck(this, Tooltip);
@ -5609,14 +5604,14 @@ var Popover = function () {
FOCUSOUT: 'focusout' + EVENT_KEY, FOCUSOUT: 'focusout' + EVENT_KEY,
MOUSEENTER: 'mouseenter' + EVENT_KEY, MOUSEENTER: 'mouseenter' + EVENT_KEY,
MOUSELEAVE: 'mouseleave' + EVENT_KEY MOUSELEAVE: 'mouseleave' + EVENT_KEY
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Popover = function (_Tooltip) { var Popover = function (_Tooltip) {
inherits(Popover, _Tooltip); inherits(Popover, _Tooltip);
@ -5808,14 +5803,14 @@ var ScrollSpy = function () {
var OffsetMethod = { var OffsetMethod = {
OFFSET: 'offset', OFFSET: 'offset',
POSITION: 'position' POSITION: 'position'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var ScrollSpy = function () { var ScrollSpy = function () {
function ScrollSpy(element, config) { function ScrollSpy(element, config) {
var _this = this; var _this = this;
@ -6109,14 +6104,14 @@ var Tab = function () {
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]', DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
DROPDOWN_TOGGLE: '.dropdown-toggle', DROPDOWN_TOGGLE: '.dropdown-toggle',
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active' DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Tab = function () { var Tab = function () {
function Tab(element) { function Tab(element) {
classCallCheck(this, Tab); classCallCheck(this, Tab);

File diff suppressed because one or more lines are too long

View File

@ -34,9 +34,10 @@ var Util = function () {
MozTransition: 'transitionend', MozTransition: 'transitionend',
OTransition: 'oTransitionEnd otransitionend', OTransition: 'oTransitionEnd otransitionend',
transition: 'transitionend' transition: 'transitionend'
};
// shoutout AngusCroll (https://goo.gl/pxwQGp) // shoutout AngusCroll (https://goo.gl/pxwQGp)
};function toType(obj) { function toType(obj) {
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase(); return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
} }
@ -256,14 +257,14 @@ var Alert = function () {
ALERT: 'alert', ALERT: 'alert',
FADE: 'fade', FADE: 'fade',
SHOW: 'show' SHOW: 'show'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Alert = function () { var Alert = function () {
function Alert(element) { function Alert(element) {
classCallCheck(this, Alert); classCallCheck(this, Alert);
@ -436,14 +437,14 @@ var Button = function () {
var Event = { var Event = {
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY, CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY) FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Button = function () { var Button = function () {
function Button(element) { function Button(element) {
classCallCheck(this, Button); classCallCheck(this, Button);
@ -645,14 +646,14 @@ var Carousel = function () {
INDICATORS: '.carousel-indicators', INDICATORS: '.carousel-indicators',
DATA_SLIDE: '[data-slide], [data-slide-to]', DATA_SLIDE: '[data-slide], [data-slide-to]',
DATA_RIDE: '[data-ride="carousel"]' DATA_RIDE: '[data-ride="carousel"]'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Carousel = function () { var Carousel = function () {
function Carousel(element, config) { function Carousel(element, config) {
classCallCheck(this, Carousel); classCallCheck(this, Carousel);
@ -1129,14 +1130,14 @@ var Collapse = function () {
var Selector = { var Selector = {
ACTIVES: '.show, .collapsing', ACTIVES: '.show, .collapsing',
DATA_TOGGLE: '[data-toggle="collapse"]' DATA_TOGGLE: '[data-toggle="collapse"]'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Collapse = function () { var Collapse = function () {
function Collapse(element, config) { function Collapse(element, config) {
classCallCheck(this, Collapse); classCallCheck(this, Collapse);
@ -1506,23 +1507,21 @@ 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'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Dropdown = function () { var Dropdown = function () {
function Dropdown(element, config) { function Dropdown(element, config) {
classCallCheck(this, Dropdown); classCallCheck(this, Dropdown);
@ -1620,11 +1619,6 @@ var Dropdown = function () {
}; };
Dropdown.prototype._getConfig = function _getConfig(config) { Dropdown.prototype._getConfig = function _getConfig(config) {
var elementData = $(this._element).data();
if (typeof elementData.placement !== 'undefined') {
elementData.placement = AttachmentMap[elementData.placement.toUpperCase()];
}
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);
@ -1642,10 +1636,10 @@ var Dropdown = function () {
Dropdown.prototype._getPlacement = function _getPlacement() { Dropdown.prototype._getPlacement = 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;
@ -1671,9 +1665,10 @@ var Dropdown = function () {
enabled: this._config.flip enabled: this._config.flip
} }
} }
};
// Disable Popper.js for Dropdown in Navbar // Disable Popper.js for Dropdown in Navbar
};if (this._inNavbar) { if (this._inNavbar) {
popperConfig.modifiers.applyStyle = { popperConfig.modifiers.applyStyle = {
enabled: !this._inNavbar enabled: !this._inNavbar
}; };
@ -1926,14 +1921,14 @@ var Modal = function () {
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
STICKY_CONTENT: '.sticky-top', STICKY_CONTENT: '.sticky-top',
NAVBAR_TOGGLER: '.navbar-toggler' NAVBAR_TOGGLER: '.navbar-toggler'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Modal = function () { var Modal = function () {
function Modal(element, config) { function Modal(element, config) {
classCallCheck(this, Modal); classCallCheck(this, Modal);
@ -2541,14 +2536,14 @@ var Tooltip = function () {
FOCUS: 'focus', FOCUS: 'focus',
CLICK: 'click', CLICK: 'click',
MANUAL: 'manual' MANUAL: 'manual'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Tooltip = function () { var Tooltip = function () {
function Tooltip(element, config) { function Tooltip(element, config) {
classCallCheck(this, Tooltip); classCallCheck(this, Tooltip);
@ -3172,14 +3167,14 @@ var Popover = function () {
FOCUSOUT: 'focusout' + EVENT_KEY, FOCUSOUT: 'focusout' + EVENT_KEY,
MOUSEENTER: 'mouseenter' + EVENT_KEY, MOUSEENTER: 'mouseenter' + EVENT_KEY,
MOUSELEAVE: 'mouseleave' + EVENT_KEY MOUSELEAVE: 'mouseleave' + EVENT_KEY
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Popover = function (_Tooltip) { var Popover = function (_Tooltip) {
inherits(Popover, _Tooltip); inherits(Popover, _Tooltip);
@ -3371,14 +3366,14 @@ var ScrollSpy = function () {
var OffsetMethod = { var OffsetMethod = {
OFFSET: 'offset', OFFSET: 'offset',
POSITION: 'position' POSITION: 'position'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var ScrollSpy = function () { var ScrollSpy = function () {
function ScrollSpy(element, config) { function ScrollSpy(element, config) {
var _this = this; var _this = this;
@ -3672,14 +3667,14 @@ var Tab = function () {
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]', DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
DROPDOWN_TOGGLE: '.dropdown-toggle', DROPDOWN_TOGGLE: '.dropdown-toggle',
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active' DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Tab = function () { var Tab = function () {
function Tab(element) { function Tab(element) {
classCallCheck(this, Tab); classCallCheck(this, Tab);

File diff suppressed because one or more lines are too long

View File

@ -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
--- ---

View File

@ -1004,8 +1004,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.

View File

@ -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`.

View File

@ -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%;

View File

@ -97,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/).

View File

@ -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 %}
{% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
<div class="col-md-4"> <div class="col-md-4">
{% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
<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>

View File

@ -219,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.

View File

@ -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.

14
js/dist/alert.js vendored
View File

@ -41,14 +41,14 @@ var Alert = function () {
ALERT: 'alert', ALERT: 'alert',
FADE: 'fade', FADE: 'fade',
SHOW: 'show' SHOW: 'show'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Alert = function () { var Alert = function () {
function Alert(element) { function Alert(element) {
_classCallCheck(this, Alert); _classCallCheck(this, Alert);

File diff suppressed because one or more lines are too long

14
js/dist/button.js vendored
View File

@ -43,14 +43,14 @@ var Button = function () {
var Event = { var Event = {
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY, CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY) FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Button = function () { var Button = function () {
function Button(element) { function Button(element) {
_classCallCheck(this, Button); _classCallCheck(this, Button);

File diff suppressed because one or more lines are too long

14
js/dist/carousel.js vendored
View File

@ -85,14 +85,14 @@ var Carousel = function () {
INDICATORS: '.carousel-indicators', INDICATORS: '.carousel-indicators',
DATA_SLIDE: '[data-slide], [data-slide-to]', DATA_SLIDE: '[data-slide], [data-slide-to]',
DATA_RIDE: '[data-ride="carousel"]' DATA_RIDE: '[data-ride="carousel"]'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Carousel = function () { var Carousel = function () {
function Carousel(element, config) { function Carousel(element, config) {
_classCallCheck(this, Carousel); _classCallCheck(this, Carousel);

File diff suppressed because one or more lines are too long

14
js/dist/collapse.js vendored
View File

@ -62,14 +62,14 @@ var Collapse = function () {
var Selector = { var Selector = {
ACTIVES: '.show, .collapsing', ACTIVES: '.show, .collapsing',
DATA_TOGGLE: '[data-toggle="collapse"]' DATA_TOGGLE: '[data-toggle="collapse"]'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Collapse = function () { var Collapse = function () {
function Collapse(element, config) { function Collapse(element, config) {
_classCallCheck(this, Collapse); _classCallCheck(this, Collapse);

File diff suppressed because one or more lines are too long

30
js/dist/dropdown.js vendored
View File

@ -78,23 +78,21 @@ 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'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Dropdown = function () { var Dropdown = function () {
function Dropdown(element, config) { function Dropdown(element, config) {
_classCallCheck(this, Dropdown); _classCallCheck(this, Dropdown);
@ -201,11 +199,6 @@ var Dropdown = function () {
}, { }, {
key: '_getConfig', key: '_getConfig',
value: function _getConfig(config) { value: function _getConfig(config) {
var elementData = $(this._element).data();
if (typeof elementData.placement !== 'undefined') {
elementData.placement = AttachmentMap[elementData.placement.toUpperCase()];
}
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);
@ -225,10 +218,10 @@ var Dropdown = function () {
key: '_getPlacement', key: '_getPlacement',
value: function _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;
@ -256,9 +249,10 @@ var Dropdown = function () {
enabled: this._config.flip enabled: this._config.flip
} }
} }
};
// Disable Popper.js for Dropdown in Navbar // Disable Popper.js for Dropdown in Navbar
};if (this._inNavbar) { if (this._inNavbar) {
popperConfig.modifiers.applyStyle = { popperConfig.modifiers.applyStyle = {
enabled: !this._inNavbar enabled: !this._inNavbar
}; };

File diff suppressed because one or more lines are too long

14
js/dist/modal.js vendored
View File

@ -74,14 +74,14 @@ var Modal = function () {
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
STICKY_CONTENT: '.sticky-top', STICKY_CONTENT: '.sticky-top',
NAVBAR_TOGGLER: '.navbar-toggler' NAVBAR_TOGGLER: '.navbar-toggler'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Modal = function () { var Modal = function () {
function Modal(element, config) { function Modal(element, config) {
_classCallCheck(this, Modal); _classCallCheck(this, Modal);

File diff suppressed because one or more lines are too long

14
js/dist/popover.js vendored
View File

@ -65,14 +65,14 @@ var Popover = function () {
FOCUSOUT: 'focusout' + EVENT_KEY, FOCUSOUT: 'focusout' + EVENT_KEY,
MOUSEENTER: 'mouseenter' + EVENT_KEY, MOUSEENTER: 'mouseenter' + EVENT_KEY,
MOUSELEAVE: 'mouseleave' + EVENT_KEY MOUSELEAVE: 'mouseleave' + EVENT_KEY
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Popover = function (_Tooltip) { var Popover = function (_Tooltip) {
_inherits(Popover, _Tooltip); _inherits(Popover, _Tooltip);

File diff suppressed because one or more lines are too long

14
js/dist/scrollspy.js vendored
View File

@ -66,14 +66,14 @@ var ScrollSpy = function () {
var OffsetMethod = { var OffsetMethod = {
OFFSET: 'offset', OFFSET: 'offset',
POSITION: 'position' POSITION: 'position'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var ScrollSpy = function () { var ScrollSpy = function () {
function ScrollSpy(element, config) { function ScrollSpy(element, config) {
var _this = this; var _this = this;

File diff suppressed because one or more lines are too long

14
js/dist/tab.js vendored
View File

@ -51,14 +51,14 @@ var Tab = function () {
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]', DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
DROPDOWN_TOGGLE: '.dropdown-toggle', DROPDOWN_TOGGLE: '.dropdown-toggle',
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active' DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Tab = function () { var Tab = function () {
function Tab(element) { function Tab(element) {
_classCallCheck(this, Tab); _classCallCheck(this, Tab);

2
js/dist/tab.js.map vendored

File diff suppressed because one or more lines are too long

14
js/dist/tooltip.js vendored
View File

@ -108,14 +108,14 @@ var Tooltip = function () {
FOCUS: 'focus', FOCUS: 'focus',
CLICK: 'click', CLICK: 'click',
MANUAL: 'manual' MANUAL: 'manual'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
}; };
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Tooltip = function () { var Tooltip = function () {
function Tooltip(element, config) { function Tooltip(element, config) {
_classCallCheck(this, Tooltip); _classCallCheck(this, Tooltip);

File diff suppressed because one or more lines are too long

5
js/dist/util.js vendored
View File

@ -24,9 +24,10 @@ var Util = function () {
MozTransition: 'transitionend', MozTransition: 'transitionend',
OTransition: 'oTransitionEnd otransitionend', OTransition: 'oTransitionEnd otransitionend',
transition: 'transitionend' transition: 'transitionend'
};
// shoutout AngusCroll (https://goo.gl/pxwQGp) // shoutout AngusCroll (https://goo.gl/pxwQGp)
};function toType(obj) { function toType(obj) {
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase(); return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
} }

2
js/dist/util.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -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;
} }