0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-02 14:24:19 +01:00

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

This commit is contained in:
Mark Otto 2017-09-09 17:39:56 -07:00
commit 9cd634fb46
7 changed files with 13 additions and 9 deletions

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

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