mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-23 20:40:36 +03:00
Merge branch 'v4-dev' into collapse-js-with-text-truncate
This commit is contained in:
Johann-S
@@ -1879,6 +1879,7 @@ select.form-control:focus::-ms-value {
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.25;
|
||||
background-color: transparent;
|
||||
border: solid transparent;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
@@ -5633,11 +5634,11 @@ a.bg-dark:focus, a.bg-dark:hover {
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50%;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.rounded-0 {
|
||||
border-radius: 0;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.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
+16
-21
@@ -33,9 +33,10 @@ var Util = function () {
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
|
||||
// shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
};function toType(obj) {
|
||||
function toType(obj) {
|
||||
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
|
||||
}
|
||||
|
||||
@@ -255,6 +256,7 @@ var Alert = function () {
|
||||
ALERT: 'alert',
|
||||
FADE: 'fade',
|
||||
SHOW: 'show'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -262,7 +264,6 @@ var Alert = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Alert = function () {
|
||||
function Alert(element) {
|
||||
classCallCheck(this, Alert);
|
||||
@@ -435,6 +436,7 @@ var Button = function () {
|
||||
var Event = {
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
|
||||
FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -442,7 +444,6 @@ var Button = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Button = function () {
|
||||
function Button(element) {
|
||||
classCallCheck(this, Button);
|
||||
@@ -644,6 +645,7 @@ var Carousel = function () {
|
||||
INDICATORS: '.carousel-indicators',
|
||||
DATA_SLIDE: '[data-slide], [data-slide-to]',
|
||||
DATA_RIDE: '[data-ride="carousel"]'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -651,7 +653,6 @@ var Carousel = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Carousel = function () {
|
||||
function Carousel(element, config) {
|
||||
classCallCheck(this, Carousel);
|
||||
@@ -1128,6 +1129,7 @@ var Collapse = function () {
|
||||
var Selector = {
|
||||
ACTIVES: '.show, .collapsing',
|
||||
DATA_TOGGLE: '[data-toggle="collapse"]'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -1135,7 +1137,6 @@ var Collapse = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Collapse = function () {
|
||||
function Collapse(element, config) {
|
||||
classCallCheck(this, Collapse);
|
||||
@@ -3943,15 +3944,14 @@ var Dropdown = function () {
|
||||
};
|
||||
|
||||
var Default = {
|
||||
placement: AttachmentMap.BOTTOM,
|
||||
offset: 0,
|
||||
flip: true
|
||||
};
|
||||
|
||||
var DefaultType = {
|
||||
placement: 'string',
|
||||
offset: '(number|string)',
|
||||
flip: 'boolean'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -3959,7 +3959,6 @@ var Dropdown = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Dropdown = function () {
|
||||
function Dropdown(element, config) {
|
||||
classCallCheck(this, Dropdown);
|
||||
@@ -4057,11 +4056,6 @@ var Dropdown = function () {
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
Util.typeCheckConfig(NAME, config, this.constructor.DefaultType);
|
||||
@@ -4079,10 +4073,10 @@ var Dropdown = function () {
|
||||
|
||||
Dropdown.prototype._getPlacement = function _getPlacement() {
|
||||
var $parentDropdown = $(this._element).parent();
|
||||
var placement = this._config.placement;
|
||||
var placement = AttachmentMap.BOTTOM;
|
||||
|
||||
// Handle dropup
|
||||
if ($parentDropdown.hasClass(ClassName.DROPUP) || this._config.placement === AttachmentMap.TOP) {
|
||||
if ($parentDropdown.hasClass(ClassName.DROPUP)) {
|
||||
placement = AttachmentMap.TOP;
|
||||
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
||||
placement = AttachmentMap.TOPEND;
|
||||
@@ -4108,9 +4102,10 @@ var Dropdown = function () {
|
||||
enabled: this._config.flip
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Disable Popper.js for Dropdown in Navbar
|
||||
};if (this._inNavbar) {
|
||||
if (this._inNavbar) {
|
||||
popperConfig.modifiers.applyStyle = {
|
||||
enabled: !this._inNavbar
|
||||
};
|
||||
@@ -4363,6 +4358,7 @@ var Modal = function () {
|
||||
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
|
||||
STICKY_CONTENT: '.sticky-top',
|
||||
NAVBAR_TOGGLER: '.navbar-toggler'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -4370,7 +4366,6 @@ var Modal = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Modal = function () {
|
||||
function Modal(element, config) {
|
||||
classCallCheck(this, Modal);
|
||||
@@ -4978,6 +4973,7 @@ var Tooltip = function () {
|
||||
FOCUS: 'focus',
|
||||
CLICK: 'click',
|
||||
MANUAL: 'manual'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -4985,7 +4981,6 @@ var Tooltip = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Tooltip = function () {
|
||||
function Tooltip(element, config) {
|
||||
classCallCheck(this, Tooltip);
|
||||
@@ -5609,6 +5604,7 @@ var Popover = function () {
|
||||
FOCUSOUT: 'focusout' + EVENT_KEY,
|
||||
MOUSEENTER: 'mouseenter' + EVENT_KEY,
|
||||
MOUSELEAVE: 'mouseleave' + EVENT_KEY
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -5616,7 +5612,6 @@ var Popover = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Popover = function (_Tooltip) {
|
||||
inherits(Popover, _Tooltip);
|
||||
|
||||
@@ -5808,6 +5803,7 @@ var ScrollSpy = function () {
|
||||
var OffsetMethod = {
|
||||
OFFSET: 'offset',
|
||||
POSITION: 'position'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -5815,7 +5811,6 @@ var ScrollSpy = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var ScrollSpy = function () {
|
||||
function ScrollSpy(element, config) {
|
||||
var _this = this;
|
||||
@@ -6109,6 +6104,7 @@ var Tab = function () {
|
||||
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
|
||||
DROPDOWN_TOGGLE: '.dropdown-toggle',
|
||||
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -6116,7 +6112,6 @@ var Tab = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Tab = function () {
|
||||
function Tab(element) {
|
||||
classCallCheck(this, Tab);
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+16
-21
@@ -34,9 +34,10 @@ var Util = function () {
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
|
||||
// shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
};function toType(obj) {
|
||||
function toType(obj) {
|
||||
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
|
||||
}
|
||||
|
||||
@@ -256,6 +257,7 @@ var Alert = function () {
|
||||
ALERT: 'alert',
|
||||
FADE: 'fade',
|
||||
SHOW: 'show'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -263,7 +265,6 @@ var Alert = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Alert = function () {
|
||||
function Alert(element) {
|
||||
classCallCheck(this, Alert);
|
||||
@@ -436,6 +437,7 @@ var Button = function () {
|
||||
var Event = {
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
|
||||
FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -443,7 +445,6 @@ var Button = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Button = function () {
|
||||
function Button(element) {
|
||||
classCallCheck(this, Button);
|
||||
@@ -645,6 +646,7 @@ var Carousel = function () {
|
||||
INDICATORS: '.carousel-indicators',
|
||||
DATA_SLIDE: '[data-slide], [data-slide-to]',
|
||||
DATA_RIDE: '[data-ride="carousel"]'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -652,7 +654,6 @@ var Carousel = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Carousel = function () {
|
||||
function Carousel(element, config) {
|
||||
classCallCheck(this, Carousel);
|
||||
@@ -1129,6 +1130,7 @@ var Collapse = function () {
|
||||
var Selector = {
|
||||
ACTIVES: '.show, .collapsing',
|
||||
DATA_TOGGLE: '[data-toggle="collapse"]'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -1136,7 +1138,6 @@ var Collapse = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Collapse = function () {
|
||||
function Collapse(element, config) {
|
||||
classCallCheck(this, Collapse);
|
||||
@@ -1506,15 +1507,14 @@ var Dropdown = function () {
|
||||
};
|
||||
|
||||
var Default = {
|
||||
placement: AttachmentMap.BOTTOM,
|
||||
offset: 0,
|
||||
flip: true
|
||||
};
|
||||
|
||||
var DefaultType = {
|
||||
placement: 'string',
|
||||
offset: '(number|string)',
|
||||
flip: 'boolean'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -1522,7 +1522,6 @@ var Dropdown = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Dropdown = function () {
|
||||
function Dropdown(element, config) {
|
||||
classCallCheck(this, Dropdown);
|
||||
@@ -1620,11 +1619,6 @@ var Dropdown = function () {
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
Util.typeCheckConfig(NAME, config, this.constructor.DefaultType);
|
||||
@@ -1642,10 +1636,10 @@ var Dropdown = function () {
|
||||
|
||||
Dropdown.prototype._getPlacement = function _getPlacement() {
|
||||
var $parentDropdown = $(this._element).parent();
|
||||
var placement = this._config.placement;
|
||||
var placement = AttachmentMap.BOTTOM;
|
||||
|
||||
// Handle dropup
|
||||
if ($parentDropdown.hasClass(ClassName.DROPUP) || this._config.placement === AttachmentMap.TOP) {
|
||||
if ($parentDropdown.hasClass(ClassName.DROPUP)) {
|
||||
placement = AttachmentMap.TOP;
|
||||
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
||||
placement = AttachmentMap.TOPEND;
|
||||
@@ -1671,9 +1665,10 @@ var Dropdown = function () {
|
||||
enabled: this._config.flip
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Disable Popper.js for Dropdown in Navbar
|
||||
};if (this._inNavbar) {
|
||||
if (this._inNavbar) {
|
||||
popperConfig.modifiers.applyStyle = {
|
||||
enabled: !this._inNavbar
|
||||
};
|
||||
@@ -1926,6 +1921,7 @@ var Modal = function () {
|
||||
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
|
||||
STICKY_CONTENT: '.sticky-top',
|
||||
NAVBAR_TOGGLER: '.navbar-toggler'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -1933,7 +1929,6 @@ var Modal = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Modal = function () {
|
||||
function Modal(element, config) {
|
||||
classCallCheck(this, Modal);
|
||||
@@ -2541,6 +2536,7 @@ var Tooltip = function () {
|
||||
FOCUS: 'focus',
|
||||
CLICK: 'click',
|
||||
MANUAL: 'manual'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -2548,7 +2544,6 @@ var Tooltip = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Tooltip = function () {
|
||||
function Tooltip(element, config) {
|
||||
classCallCheck(this, Tooltip);
|
||||
@@ -3172,6 +3167,7 @@ var Popover = function () {
|
||||
FOCUSOUT: 'focusout' + EVENT_KEY,
|
||||
MOUSEENTER: 'mouseenter' + EVENT_KEY,
|
||||
MOUSELEAVE: 'mouseleave' + EVENT_KEY
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -3179,7 +3175,6 @@ var Popover = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Popover = function (_Tooltip) {
|
||||
inherits(Popover, _Tooltip);
|
||||
|
||||
@@ -3371,6 +3366,7 @@ var ScrollSpy = function () {
|
||||
var OffsetMethod = {
|
||||
OFFSET: 'offset',
|
||||
POSITION: 'position'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -3378,7 +3374,6 @@ var ScrollSpy = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var ScrollSpy = function () {
|
||||
function ScrollSpy(element, config) {
|
||||
var _this = this;
|
||||
@@ -3672,6 +3667,7 @@ var Tab = function () {
|
||||
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
|
||||
DROPDOWN_TOGGLE: '.dropdown-toggle',
|
||||
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -3679,7 +3675,6 @@ var Tab = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Tab = function () {
|
||||
function Tab(element) {
|
||||
classCallCheck(this, Tab);
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -3,7 +3,7 @@ layout: docs
|
||||
title: History
|
||||
description: A brief overview of the history of Bootstrap.
|
||||
redirect_from:
|
||||
- /about/
|
||||
- /docs/4.0/about/
|
||||
group: about
|
||||
---
|
||||
|
||||
|
||||
@@ -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 hide the default file `<input>` via `opacity`.
|
||||
- We use `:after` to generate a custom background and directive (*Choose file...*).
|
||||
- We use `:before` to generate and position the *Browse* button.
|
||||
- We use `::after` to generate a custom background and directive (*Choose file...*).
|
||||
- We use `::before` to generate and position the *Browse* button.
|
||||
- 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.
|
||||
|
||||
@@ -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 `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.
|
||||
- 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`.
|
||||
|
||||
@@ -62,7 +62,7 @@ h6, .h6 {
|
||||
.nav-link.active {
|
||||
color: #fff;
|
||||
}
|
||||
.nav-link.active:after {
|
||||
.nav-link.active::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
|
||||
@@ -97,7 +97,7 @@ On the rare occasion you need to override it, use something like the following:
|
||||
}
|
||||
{% 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/).
|
||||
|
||||
|
||||
@@ -46,11 +46,11 @@ All colors available in Bootstrap 4, available as Sass variables and a Sass map
|
||||
|
||||
<div class="row">
|
||||
{% for color in site.data.colors %}
|
||||
<div class="col-md-4">
|
||||
{% 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>
|
||||
{% endunless %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -219,6 +219,10 @@ Dropped entirely for the new card component.
|
||||
- `.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.
|
||||
|
||||
### Progress
|
||||
|
||||
- Replaced contextual `.progress-bar-*` classes with `.bg-*` utilities. For example, `class="progress-bar progress-bar-danger"` becomes `class="progress-bar bg-danger"`.
|
||||
|
||||
### Carousel
|
||||
|
||||
- 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 }}-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
|
||||
|
||||
Change the `display` value of elements when printing with our print display utilities.
|
||||
|
||||
Vendored
+1
-1
@@ -41,6 +41,7 @@ var Alert = function () {
|
||||
ALERT: 'alert',
|
||||
FADE: 'fade',
|
||||
SHOW: 'show'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -48,7 +49,6 @@ var Alert = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Alert = function () {
|
||||
function Alert(element) {
|
||||
_classCallCheck(this, Alert);
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -43,6 +43,7 @@ var Button = function () {
|
||||
var Event = {
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
|
||||
FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -50,7 +51,6 @@ var Button = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Button = function () {
|
||||
function Button(element) {
|
||||
_classCallCheck(this, Button);
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -85,6 +85,7 @@ var Carousel = function () {
|
||||
INDICATORS: '.carousel-indicators',
|
||||
DATA_SLIDE: '[data-slide], [data-slide-to]',
|
||||
DATA_RIDE: '[data-ride="carousel"]'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -92,7 +93,6 @@ var Carousel = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Carousel = function () {
|
||||
function Carousel(element, config) {
|
||||
_classCallCheck(this, Carousel);
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -62,6 +62,7 @@ var Collapse = function () {
|
||||
var Selector = {
|
||||
ACTIVES: '.show, .collapsing',
|
||||
DATA_TOGGLE: '[data-toggle="collapse"]'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -69,7 +70,6 @@ var Collapse = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Collapse = function () {
|
||||
function Collapse(element, config) {
|
||||
_classCallCheck(this, Collapse);
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+5
-11
@@ -78,15 +78,14 @@ var Dropdown = function () {
|
||||
};
|
||||
|
||||
var Default = {
|
||||
placement: AttachmentMap.BOTTOM,
|
||||
offset: 0,
|
||||
flip: true
|
||||
};
|
||||
|
||||
var DefaultType = {
|
||||
placement: 'string',
|
||||
offset: '(number|string)',
|
||||
flip: 'boolean'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -94,7 +93,6 @@ var Dropdown = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Dropdown = function () {
|
||||
function Dropdown(element, config) {
|
||||
_classCallCheck(this, Dropdown);
|
||||
@@ -201,11 +199,6 @@ var Dropdown = function () {
|
||||
}, {
|
||||
key: '_getConfig',
|
||||
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);
|
||||
|
||||
Util.typeCheckConfig(NAME, config, this.constructor.DefaultType);
|
||||
@@ -225,10 +218,10 @@ var Dropdown = function () {
|
||||
key: '_getPlacement',
|
||||
value: function _getPlacement() {
|
||||
var $parentDropdown = $(this._element).parent();
|
||||
var placement = this._config.placement;
|
||||
var placement = AttachmentMap.BOTTOM;
|
||||
|
||||
// Handle dropup
|
||||
if ($parentDropdown.hasClass(ClassName.DROPUP) || this._config.placement === AttachmentMap.TOP) {
|
||||
if ($parentDropdown.hasClass(ClassName.DROPUP)) {
|
||||
placement = AttachmentMap.TOP;
|
||||
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
||||
placement = AttachmentMap.TOPEND;
|
||||
@@ -256,9 +249,10 @@ var Dropdown = function () {
|
||||
enabled: this._config.flip
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Disable Popper.js for Dropdown in Navbar
|
||||
};if (this._inNavbar) {
|
||||
if (this._inNavbar) {
|
||||
popperConfig.modifiers.applyStyle = {
|
||||
enabled: !this._inNavbar
|
||||
};
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -74,6 +74,7 @@ var Modal = function () {
|
||||
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
|
||||
STICKY_CONTENT: '.sticky-top',
|
||||
NAVBAR_TOGGLER: '.navbar-toggler'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -81,7 +82,6 @@ var Modal = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Modal = function () {
|
||||
function Modal(element, config) {
|
||||
_classCallCheck(this, Modal);
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -65,6 +65,7 @@ var Popover = function () {
|
||||
FOCUSOUT: 'focusout' + EVENT_KEY,
|
||||
MOUSEENTER: 'mouseenter' + EVENT_KEY,
|
||||
MOUSELEAVE: 'mouseleave' + EVENT_KEY
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -72,7 +73,6 @@ var Popover = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Popover = function (_Tooltip) {
|
||||
_inherits(Popover, _Tooltip);
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -66,6 +66,7 @@ var ScrollSpy = function () {
|
||||
var OffsetMethod = {
|
||||
OFFSET: 'offset',
|
||||
POSITION: 'position'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -73,7 +74,6 @@ var ScrollSpy = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var ScrollSpy = function () {
|
||||
function ScrollSpy(element, config) {
|
||||
var _this = this;
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -51,6 +51,7 @@ var Tab = function () {
|
||||
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
|
||||
DROPDOWN_TOGGLE: '.dropdown-toggle',
|
||||
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -58,7 +59,6 @@ var Tab = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Tab = function () {
|
||||
function Tab(element) {
|
||||
_classCallCheck(this, Tab);
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -108,6 +108,7 @@ var Tooltip = function () {
|
||||
FOCUS: 'focus',
|
||||
CLICK: 'click',
|
||||
MANUAL: 'manual'
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
@@ -115,7 +116,6 @@ var Tooltip = function () {
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
var Tooltip = function () {
|
||||
function Tooltip(element, config) {
|
||||
_classCallCheck(this, Tooltip);
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+2
-1
@@ -24,9 +24,10 @@ var Util = function () {
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
|
||||
// shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
};function toType(obj) {
|
||||
function toType(obj) {
|
||||
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
|
||||
}
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -44,9 +44,9 @@
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50%;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.rounded-0 {
|
||||
border-radius: 0;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user