Skip to content
GitLab
Commit 4a064209 authored by Mark Otto's avatar Mark Otto
Browse files

Merge branch 'v4-dev' into v4-forms-cleanup

parents b2dd8e16 b479efb9
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 425 additions and 262 deletions
+425 -262
ISSUE_TEMPLATE.md 0 → 100644
+ 22
- 0
View file @ 4a064209
Before opening an issue:
- [Search for duplicate or closed issues](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue)
- [Validate](http://validator.w3.org/nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems
- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs
- Read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md)
When asking general "how to" questons:
- Please do not open an issue here
- Instead, ask for help on [StackOverflow, IRC, or Slack](https://github.com/twbs/bootstrap/blob/master/README.md#community)
When reporting a bug, include:
- Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
- Reduced test cases and potential fixes using [JS Bin](https://jsbin.com)
When suggesting a feature, include:
- As much detail as possible for what we should add and why it's important to Bootstrap
- Relevant links to prior art, screenshots, or live demos whenever possible
dist/css/bootstrap.css
+ 97
- 114
View file @ 4a064209
......@@ -3,7 +3,7 @@
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
......@@ -34,7 +34,6 @@ canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
......@@ -42,8 +41,12 @@ audio:not([controls]) {
height: 0;
}
[hidden],
template {
progress {
vertical-align: baseline;
}
template,
[hidden] {
display: none;
}
......@@ -51,21 +54,25 @@ a {
background-color: transparent;
}
a:active {
outline: 0;
}
a:active,
a:hover {
outline: 0;
outline-width: 0;
}
abbr[title] {
border-bottom: 1px dotted;
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bold;
font-weight: inherit;
}
b,
strong {
font-weight: bolder;
}
dfn {
......@@ -78,7 +85,7 @@ h1 {
}
mark {
background: #ff0;
background-color: #ff0;
color: #000;
}
......@@ -94,22 +101,30 @@ sup {
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border: 0;
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
figure {
margin: 1em 40px;
}
......@@ -118,81 +133,65 @@ hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
overflow: auto;
button,
input,
select,
textarea {
font: inherit;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
optgroup {
font-weight: bold;
}
button,
input,
select {
overflow: visible;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
button[disabled],
html input[disabled] {
[disabled] {
cursor: default;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
button:-moz-focusring,
input:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
......@@ -202,26 +201,38 @@ fieldset {
}
legend {
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
td,
th {
padding: 0;
[type="search"] {
-webkit-appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
@media print {
......@@ -402,6 +413,7 @@ a:not([href]):focus {
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
}
figure {
......@@ -430,6 +442,7 @@ textarea {
}
table {
border-collapse: collapse;
background-color: transparent;
}
......@@ -464,6 +477,13 @@ textarea {
border-radius: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
resize: vertical;
}
......@@ -2186,48 +2206,6 @@ select.form-control:focus::-ms-value {
font-size: 1rem;
}
_::-webkit-full-page-media.form-control,
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
line-height: 2.5rem;
}
_::-webkit-full-page-media.input-sm,
.input-group-sm _::-webkit-full-page-media.form-control,
input[type="date"].input-sm,
.input-group-sm
input[type="date"].form-control,
input[type="time"].input-sm,
.input-group-sm
input[type="time"].form-control,
input[type="datetime-local"].input-sm,
.input-group-sm
input[type="datetime-local"].form-control,
input[type="month"].input-sm,
.input-group-sm
input[type="month"].form-control {
line-height: 1.8125rem;
}
_::-webkit-full-page-media.input-lg,
.input-group-lg _::-webkit-full-page-media.form-control,
input[type="date"].input-lg,
.input-group-lg
input[type="date"].form-control,
input[type="time"].input-lg,
.input-group-lg
input[type="time"].form-control,
input[type="datetime-local"].input-lg,
.input-group-lg
input[type="datetime-local"].form-control,
input[type="month"].input-lg,
.input-group-lg
input[type="month"].form-control {
line-height: 3.166667rem;
}
.form-control-static {
min-height: 2.5rem;
padding-top: 0.5rem;
......@@ -3742,6 +3720,12 @@ input[type="button"].btn-block {
background-color: #fff;
}
.custom-select:disabled {
color: #818a91;
cursor: not-allowed;
background-color: #eceeef;
}
.custom-select::-ms-expand {
opacity: 0;
}
......@@ -4157,8 +4141,7 @@ input[type="button"].btn-block {
margin-bottom: 0.75rem;
background-color: #fff;
border-radius: 0.25rem;
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125);
border: 1px solid rgba(0, 0, 0, 0.125);
}
.card-block {
......
dist/css/bootstrap.css.map
+67 bytes (+0%)
View file @ 4a064209
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
dist/css/bootstrap.min.css
+ 1
- 1
View file @ 4a064209
This diff is collapsed.
dist/css/bootstrap.min.css.map
-93 bytes (0%)
View file @ 4a064209
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
docs/_data/nav.yml
+ 10
- 10
View file @ 4a064209
......@@ -30,28 +30,28 @@
- title: Components
pages:
- title: Alerts
- title: Breadcrumb
- title: Buttons
- title: Button group
- title: Button dropdown
- title: Card
- title: Carousel
- title: Collapse
- title: Dropdowns
- title: Forms
- title: Input group
- title: Dropdowns
- title: Jumbotron
- title: Tag
- title: Alerts
- title: Card
- title: List group
- title: Modal
- title: Navs
- title: Navbar
- title: Breadcrumb
- title: Pagination
- title: Popovers
- title: Progress
- title: List group
- title: Modal
- title: Scrollspy
- title: Tag
- title: Tooltips
- title: Popovers
- title: Collapse
- title: Carousel
- title: Utilities
# - title: Extend
......
docs/_data/translations.yml
+ 5
- 0
View file @ 4a064209
......@@ -7,3 +7,8 @@
code: zh
description: Bootstrap 4 中文文档教程
url: http://boot4.com/
- name: Japanese
code: ja
description: Bootstrap 4 日本語リファレンス
url: http://bootstrap4.jp/
docs/components/card.md
+ 12
- 0
View file @ 4a064209
......@@ -51,6 +51,8 @@ Cards support a wide variety of content, including images, text, list groups, li
</div>
{% endexample %}
Lists can be added to a card by adding a list group.
{% example html %}
<div class="card">
<ul class="list-group list-group-flush">
......@@ -61,6 +63,8 @@ Cards support a wide variety of content, including images, text, list groups, li
</div>
{% endexample %}
`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
{% example html %}
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
......@@ -70,6 +74,8 @@ Cards support a wide variety of content, including images, text, list groups, li
</div>
{% endexample %}
Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `<a>` tag.
{% example html %}
<div class="card card-block">
<h4 class="card-title">Card title</h4>
......@@ -79,6 +85,10 @@ Cards support a wide variety of content, including images, text, list groups, li
</div>
{% endexample %}
Subtitles are used by adding a `.card-subtitle` to an `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
The multiple content types can be easily combined to create the card you need. See below for an example.
{% example html %}
<div class="card">
<div class="card-block">
......@@ -170,6 +180,8 @@ Add an optional header and/or footer within a card.
</div>
{% endexample %}
Card headers can be styled by adding `.card-header` to `<h*>` elements.
{% example html %}
<div class="card">
<h3 class="card-header">Featured</h3>
......
docs/content/reboot.md
+ 1
- 1
View file @ 4a064209
......@@ -148,7 +148,7 @@ The `<pre>` element is reset to remove its `margin-top` and use `rem` units for
## Tables
Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/).
Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/).
<div class="bd-example">
<table>
......
docs/content/tables.md
+ 98
- 7
View file @ 4a064209
......@@ -4,14 +4,16 @@ title: Tables
group: content
---
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`, then extend with custom styles or our various included modifier classes.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Basic example
## Examples
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
{% example html %}
<table class="table">
......@@ -46,7 +48,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
</table>
{% endexample %}
## Inverse table
You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`.
{% example html %}
<table class="table table-inverse">
......@@ -83,7 +85,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
## Table head options
Use one of two modifier classes to make `<thead>`s appear light or dark gray.
Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear light or dark gray.
{% example html %}
<table class="table">
......@@ -420,9 +422,6 @@ Use contextual classes to color table rows or individual cells.
</table>
</div>
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
{% highlight html %}
<!-- On rows -->
<tr class="table-active">...</tr>
......@@ -441,6 +440,98 @@ Use contextual classes to color table rows or individual cells.
</tr>
{% endhighlight %}
Regular table background variants are not available with the inverse table, however, you may use [text or background utilities](/components/utilities/#contextual-colors-and-backgrounds) to achieve similar styles.
<div class="bd-example">
<table class="table table-inverse">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-success">
<th scope="row">3</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-info">
<th scope="row">5</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-warning">
<th scope="row">7</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-danger">
<th scope="row">9</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
{% highlight html %}
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
</tr>
{% endhighlight %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
## Responsive tables
Create responsive tables by wrapping any `.table` in `.table-responsive` 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.
......
docs/content/typography.md
+ 12
- 1
View file @ 4a064209
......@@ -24,7 +24,7 @@ These styles can be found within `_reboot.scss`, and the global variables are de
## Headings
All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
All HTML headings, `<h1>` through `<h6>`, are available.
<div class="bd-example bd-example-type">
<table class="table">
......@@ -66,6 +66,17 @@ All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` cla
<h6>h6. Bootstrap heading</h6>
{% endhighlight %}
`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
{% example html %}
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
{% endexample %}
### Customizing headings
Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
......
docs/dist/css/bootstrap.css
+ 97
- 114
View file @ 4a064209
......@@ -3,7 +3,7 @@
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
......@@ -34,7 +34,6 @@ canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
......@@ -42,8 +41,12 @@ audio:not([controls]) {
height: 0;
}
[hidden],
template {
progress {
vertical-align: baseline;
}
template,
[hidden] {
display: none;
}
......@@ -51,21 +54,25 @@ a {
background-color: transparent;
}
a:active {
outline: 0;
}
a:active,
a:hover {
outline: 0;
outline-width: 0;
}
abbr[title] {
border-bottom: 1px dotted;
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bold;
font-weight: inherit;
}
b,
strong {
font-weight: bolder;
}
dfn {
......@@ -78,7 +85,7 @@ h1 {
}
mark {
background: #ff0;
background-color: #ff0;
color: #000;
}
......@@ -94,22 +101,30 @@ sup {
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border: 0;
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
figure {
margin: 1em 40px;
}
......@@ -118,81 +133,65 @@ hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
overflow: auto;
button,
input,
select,
textarea {
font: inherit;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
optgroup {
font-weight: bold;
}
button,
input,
select {
overflow: visible;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
button[disabled],
html input[disabled] {
[disabled] {
cursor: default;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
button:-moz-focusring,
input:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
......@@ -202,26 +201,38 @@ fieldset {
}
legend {
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
td,
th {
padding: 0;
[type="search"] {
-webkit-appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
@media print {
......@@ -402,6 +413,7 @@ a:not([href]):focus {
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
}
figure {
......@@ -430,6 +442,7 @@ textarea {
}
table {
border-collapse: collapse;
background-color: transparent;
}
......@@ -464,6 +477,13 @@ textarea {
border-radius: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
resize: vertical;
}
......@@ -2186,48 +2206,6 @@ select.form-control:focus::-ms-value {
font-size: 1rem;
}
_::-webkit-full-page-media.form-control,
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
line-height: 2.5rem;
}
_::-webkit-full-page-media.input-sm,
.input-group-sm _::-webkit-full-page-media.form-control,
input[type="date"].input-sm,
.input-group-sm
input[type="date"].form-control,
input[type="time"].input-sm,
.input-group-sm
input[type="time"].form-control,
input[type="datetime-local"].input-sm,
.input-group-sm
input[type="datetime-local"].form-control,
input[type="month"].input-sm,
.input-group-sm
input[type="month"].form-control {
line-height: 1.8125rem;
}
_::-webkit-full-page-media.input-lg,
.input-group-lg _::-webkit-full-page-media.form-control,
input[type="date"].input-lg,
.input-group-lg
input[type="date"].form-control,
input[type="time"].input-lg,
.input-group-lg
input[type="time"].form-control,
input[type="datetime-local"].input-lg,
.input-group-lg
input[type="datetime-local"].form-control,
input[type="month"].input-lg,
.input-group-lg
input[type="month"].form-control {
line-height: 3.166667rem;
}
.form-control-static {
min-height: 2.5rem;
padding-top: 0.5rem;
......@@ -3742,6 +3720,12 @@ input[type="button"].btn-block {
background-color: #fff;
}
.custom-select:disabled {
color: #818a91;
cursor: not-allowed;
background-color: #eceeef;
}
.custom-select::-ms-expand {
opacity: 0;
}
......@@ -4157,8 +4141,7 @@ input[type="button"].btn-block {
margin-bottom: 0.75rem;
background-color: #fff;
border-radius: 0.25rem;
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125);
border: 1px solid rgba(0, 0, 0, 0.125);
}
.card-block {
......
docs/dist/css/bootstrap.css.map
+67 bytes (+0%)
View file @ 4a064209
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
docs/dist/css/bootstrap.min.css
+ 1
- 1
View file @ 4a064209
This diff is collapsed.
docs/dist/css/bootstrap.min.css.map
-93 bytes (0%)
View file @ 4a064209
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
docs/layout/overview.md
+ 43
- 0
View file @ 4a064209
......@@ -111,3 +111,46 @@ Once again, these media queries are also available via Sass mixins:
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
{% endhighlight %}
We also have media between the breakpoint's minimum and maximum widths for only the given screen size:
{% highlight scss %}
// Extra small devices (portrait phones, less than 544px)
@media (max-width: 543px) { ... }
// Small devices (landscape phones, 544px and up)
@media (min-width: 544px) and (max-width: 767px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
{% endhighlight %}
These media queries are also available via Sass mixins:
{% highlight scss %}
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
{% endhighlight %}
And finally media that spans multiple breakpoint widths:
{% highlight scss %}
// Example
// Medium devices (tablets, 768px and up) and Large devices (desktops, 992px and up)
@media (min-width: 768px) and (max-width: 1199px) { ... }
{% endhighlight %}
The Sass mixin for the above example look like that shown beneath:
{% highlight scss %}
@include media-breakpoint-between(md, lg) { ... }
{% endhighlight %}
docs/migration.md
+ 13
- 5
View file @ 4a064209
......@@ -64,7 +64,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
### Typography
- Moved all `.text-` utilities to the `_utilities.scss` file.
- Dropped the `.page-header` class entirely.
- Dropped `.page-header` as, aside from the border, all it's styles can be applied via utilities.
- `.dl-horizontal` has been dropped. Instead, use `.row` on `<dl>` and use grid column classes (or mixins) on its `<dt>` and `<dd>` children.
- Custom `<blockquote>` styling has moved to classes—`.blockquote` and the `.blockquote-reverse` modifier.
......@@ -87,22 +87,30 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
- Renamed `.control-label` to `.form-control-label`.
- Renamed `.input-lg` and `.input-sm` to `.form-control-lg` and `.form-control-sm`, respectively.
- Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now.
- Dropped `.help-block`. Use the `.text-muted` utility class instead.
- Dropped `.help-block`; superseded by the `.text-muted` utility class to reduce duplicate code.
- Horizontal forms overhauled:
- Dropped the `.form-horizontal` class requirement.
- Requires the addition of `.row` to `.form-group`.
- `.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.
### Buttons
- Renamed `.btn-default` to `.btn-secondary`.
- Dropped the `.btn-xs` class entirely.
- Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's.
- The [stateful button](http://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.
- Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
### Button group
- Dropped the `.btn-group-xs` class entirely.
- Dropped the `.btn-group-xs` class entirely given removal of `.btn-xs`.
### Dropdowns
- Switched from parent selectors to singular classes for all components, modifiers, etc.
- Dropdowns can be built with `<div>`s or `<ul>`s now.
- Rebuilt dropdown styles and markup to provide easy, built-in support for `<a>` and `<button>` based dropdown items.
- Dropdown items now require `.dropdown-item`.
- Dropdown toggles no longer require an explicit `<span class="caret"></span>`; this is now provided automatically via CSS's `::after` on `.dropdown-toggle`.
### Grid system
......
scss/.scss-lint.yml
+ 6
- 0
View file @ 4a064209
......@@ -25,6 +25,8 @@ linters:
BorderZero:
enabled: true
convention: zero # or `none`
exclude:
- _normalize.scss
ChainedClasses:
enabled: false
......@@ -103,6 +105,8 @@ linters:
LeadingZero:
enabled: true
style: exclude_zero # or 'include_zero'
exclude:
- _normalize.scss
MergeableSelector:
enabled: false
......@@ -131,6 +135,8 @@ linters:
ignore_unspecified: false
min_properties: 2
separate_groups: false
exclude:
- _normalize.scss
order:
- position
- top
......
scss/_card.scss
+ 2
- 3
View file @ 4a064209
......@@ -9,8 +9,7 @@
background-color: $card-bg;
// border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
// Doesn't use mixin so that cards always have a "border"
box-shadow: inset 0 0 0 $card-border-width $card-border-color;
border: $card-border-width solid $card-border-color;
}
.card-block {
......@@ -189,7 +188,7 @@
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
padding: $card-img-overlay-padding;
}
......
scss/_carousel.scss
+ 5
- 5
View file @ 4a064209
......@@ -125,19 +125,19 @@
top: 50%;
z-index: 5;
display: inline-block;
width: 20px;
height: 20px;
margin-top: -10px;
width: $carousel-icon-width;
height: $carousel-icon-width;
margin-top: -($carousel-icon-width / 2);
font-family: serif;
line-height: 1;
}
.icon-prev {
left: 50%;
margin-left: -10px;
margin-left: -($carousel-icon-width / 2);
}
.icon-next {
right: 50%;
margin-right: -10px;
margin-right: -($carousel-icon-width / 2);
}
.icon-prev {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment