mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-10 22:24:19 +01:00
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev
This commit is contained in:
commit
9cd634fb46
@ -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.
|
||||||
|
@ -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`.
|
||||||
|
@ -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%;
|
||||||
|
@ -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/).
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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.
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user