mirror of
https://github.com/Hopiu/bootstrap.git
synced 2026-03-18 21:40:24 +00:00
Merge branch 'v4-dev' into v4-forms-cleanup
This commit is contained in:
Mark Otto
commit
4a064209ba
24 changed files with 642 additions and 465 deletions
22
ISSUE_TEMPLATE.md
Normal file
22
ISSUE_TEMPLATE.md
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
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
|
||||
|
|
@ -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,36 +101,22 @@ 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;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
hr {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
|
|
@ -132,67 +125,73 @@ samp {
|
|||
font-size: 1em;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
button {
|
||||
hr {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
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,28 +201,40 @@ 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;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*::before,
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
BIN
dist/css/bootstrap.css.map
vendored
BIN
dist/css/bootstrap.css.map
vendored
Binary file not shown.
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
BIN
dist/css/bootstrap.min.css.map
vendored
BIN
dist/css/bootstrap.min.css.map
vendored
Binary file not shown.
|
|
@ -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: Navs
|
||||
- title: Navbar
|
||||
- title: Breadcrumb
|
||||
- title: Pagination
|
||||
- title: Progress
|
||||
- title: List group
|
||||
- title: Modal
|
||||
- title: Scrollspy
|
||||
- title: Tooltips
|
||||
- title: Navs
|
||||
- title: Navbar
|
||||
- title: Pagination
|
||||
- title: Popovers
|
||||
- title: Collapse
|
||||
- title: Carousel
|
||||
- title: Progress
|
||||
- title: Scrollspy
|
||||
- title: Tag
|
||||
- title: Tooltips
|
||||
- title: Utilities
|
||||
|
||||
# - title: Extend
|
||||
|
|
|
|||
|
|
@ -7,3 +7,8 @@
|
|||
code: zh
|
||||
description: Bootstrap 4 中文文档教程
|
||||
url: http://boot4.com/
|
||||
|
||||
- name: Japanese
|
||||
code: ja
|
||||
description: Bootstrap 4 日本語リファレンス
|
||||
url: http://bootstrap4.jp/
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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,36 +101,22 @@ 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;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
hr {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
|
|
@ -132,67 +125,73 @@ samp {
|
|||
font-size: 1em;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
button {
|
||||
hr {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
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,28 +201,40 @@ 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;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*::before,
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
BIN
docs/dist/css/bootstrap.css.map
vendored
BIN
docs/dist/css/bootstrap.css.map
vendored
Binary file not shown.
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
BIN
docs/dist/css/bootstrap.min.css.map
vendored
BIN
docs/dist/css/bootstrap.min.css.map
vendored
Binary file not shown.
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -171,6 +171,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $custom-select-disabled-color;
|
||||
cursor: $cursor-disabled;
|
||||
background-color: $custom-select-disabled-bg;
|
||||
}
|
||||
|
||||
// Hides the default caret in IE11
|
||||
&::-ms-expand {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */
|
||||
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
//
|
||||
// 1. Set default font family to sans-serif.
|
||||
// 2. Prevent iOS and IE text size adjust after device orientation change,
|
||||
// without disabling user zoom.
|
||||
// 1. Change the default font family in all browsers (opinionated).
|
||||
// 2. Prevent adjustments of font size after orientation changes in IE and iOS.
|
||||
//
|
||||
|
||||
html {
|
||||
|
|
@ -13,7 +12,7 @@ html {
|
|||
}
|
||||
|
||||
//
|
||||
// Remove default margin.
|
||||
// Remove the margin in all browsers (opinionated).
|
||||
//
|
||||
|
||||
body {
|
||||
|
|
@ -24,43 +23,39 @@ body {
|
|||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
// Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
// and Firefox.
|
||||
// Correct `block` display not defined for `main` in IE 11.
|
||||
// Add the correct display in IE 9-.
|
||||
// 1. Add the correct display in Edge, IE, and Firefox.
|
||||
// 2. Add the correct display in IE.
|
||||
//
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
details, // 1
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main,
|
||||
main, // 2
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
summary { // 1
|
||||
display: block;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
// Add the correct display in IE 9-.
|
||||
//
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent modern browsers from displaying `audio` without controls.
|
||||
// Remove excess height in iOS 5 devices.
|
||||
// Add the correct display in iOS 4-7.
|
||||
//
|
||||
|
||||
audio:not([controls]) {
|
||||
|
|
@ -69,12 +64,20 @@ audio:not([controls]) {
|
|||
}
|
||||
|
||||
//
|
||||
// Address `[hidden]` styling not present in IE 8/9/10.
|
||||
// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
|
||||
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
//
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct display in IE 10-.
|
||||
// 1. Add the correct display in IE.
|
||||
//
|
||||
|
||||
template, // 2
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +85,7 @@ template {
|
|||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove the gray background color from active links in IE 10.
|
||||
// Remove the gray background on active links in IE 10.
|
||||
//
|
||||
|
||||
a {
|
||||
|
|
@ -90,41 +93,49 @@ a {
|
|||
}
|
||||
|
||||
//
|
||||
// Improve readability of focused elements when they are also in an
|
||||
// active/hover state.
|
||||
// Remove the outline on focused links when they are also active or hovered
|
||||
// in all browsers (opinionated).
|
||||
//
|
||||
|
||||
a {
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
&:hover {
|
||||
outline: 0;
|
||||
}
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
// Text-level semantics
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
// 1. Remove the bottom border in Firefox 39-.
|
||||
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
//
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
border-bottom: none; // 1
|
||||
text-decoration: underline; // 2
|
||||
text-decoration: underline dotted; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
//
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
//
|
||||
// Address styling not present in Safari and Chrome.
|
||||
// Add the correct font weight in Chrome, Edge, and Safari.
|
||||
//
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct font style in Android 4.3-.
|
||||
//
|
||||
|
||||
dfn {
|
||||
|
|
@ -132,8 +143,8 @@ dfn {
|
|||
}
|
||||
|
||||
//
|
||||
// Address variable `h1` font-size and margin within `section` and `article`
|
||||
// contexts in Firefox 4+, Safari, and Chrome.
|
||||
// Correct the font size and margin on `h1` elements within `section` and
|
||||
// `article` contexts in Chrome, Firefox, and Safari.
|
||||
//
|
||||
|
||||
h1 {
|
||||
|
|
@ -142,16 +153,16 @@ h1 {
|
|||
}
|
||||
|
||||
//
|
||||
// Address styling not present in IE 8/9.
|
||||
// Add the correct background and color in IE 9-.
|
||||
//
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent and variable font size in all browsers.
|
||||
// Add the correct font size in all browsers.
|
||||
//
|
||||
|
||||
small {
|
||||
|
|
@ -159,7 +170,8 @@ small {
|
|||
}
|
||||
|
||||
//
|
||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
// Prevent `sub` and `sup` elements from affecting the line height in
|
||||
// all browsers.
|
||||
//
|
||||
|
||||
sub,
|
||||
|
|
@ -170,27 +182,27 @@ sup {
|
|||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Embedded content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove border when inside `a` element in IE 8/9/10.
|
||||
// Remove the border on images inside links in IE 10-.
|
||||
//
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Correct overflow not hidden in IE 9/10/11.
|
||||
// Hide the overflow in IE.
|
||||
//
|
||||
|
||||
svg:not(:root) {
|
||||
|
|
@ -201,7 +213,20 @@ svg:not(:root) {
|
|||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address margin not present in IE 8/9 and Safari.
|
||||
// 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
// 2. Correct the odd `em` font sizing in all browsers.
|
||||
//
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace; // 1
|
||||
font-size: 1em; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct margin in IE 8.
|
||||
//
|
||||
|
||||
figure {
|
||||
|
|
@ -209,106 +234,106 @@ figure {
|
|||
}
|
||||
|
||||
//
|
||||
// Address differences between Firefox and other browsers.
|
||||
// 1. Add the correct box sizing in Firefox.
|
||||
// 2. Show the overflow in Edge and IE.
|
||||
//
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Contain overflow in all browsers.
|
||||
//
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Address odd `em`-unit font size rendering in all browsers.
|
||||
//
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
box-sizing: content-box; // 1
|
||||
height: 0; // 1
|
||||
overflow: visible; // 2
|
||||
}
|
||||
|
||||
// Forms
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
// styling of `select`, unless a `border` property is set.
|
||||
//
|
||||
|
||||
//
|
||||
// 1. Correct color not being inherited.
|
||||
// Known issue: affects color of disabled elements.
|
||||
// 2. Correct font properties not being inherited.
|
||||
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
// Change font properties to `inherit` in all browsers (opinionated).
|
||||
//
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; // 1
|
||||
font: inherit; // 2
|
||||
margin: 0; // 3
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
//
|
||||
// Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
// Restore the font weight unset by the previous rule.
|
||||
//
|
||||
|
||||
button {
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
//
|
||||
// Show the overflow in IE.
|
||||
// 1. Show the overflow in Edge.
|
||||
// 2. Show the overflow in Edge, Firefox, and IE.
|
||||
//
|
||||
|
||||
button,
|
||||
input, // 1
|
||||
select { // 2
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
// All other form control elements do not inherit `text-transform` values.
|
||||
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
// Correct `select` style inheritance in Firefox.
|
||||
// Remove the margin in Safari.
|
||||
// 1. Remove the margin in Firefox and Safari.
|
||||
//
|
||||
|
||||
button,
|
||||
select {
|
||||
input,
|
||||
select,
|
||||
textarea { // 1
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the inheritence of text transform in Edge, Firefox, and IE.
|
||||
// 1. Remove the inheritence of text transform in Firefox.
|
||||
//
|
||||
|
||||
button,
|
||||
select { // 1
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
// and `video` controls.
|
||||
// 2. Correct inability to style clickable `input` types in iOS.
|
||||
// 3. Improve usability and consistency of cursor style between image-type
|
||||
// `input` and others.
|
||||
// Change the cursor in all browsers (opinionated).
|
||||
//
|
||||
|
||||
button,
|
||||
html input[type="button"], // 1
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
cursor: pointer; // 3
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
//
|
||||
// Re-set default cursor for disabled elements.
|
||||
// Restore the default cursor to disabled elements unset by the previous rule.
|
||||
//
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and border in Firefox 4+.
|
||||
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
// controls in Android 4.
|
||||
// 2. Correct the inability to style clickable types in iOS.
|
||||
//
|
||||
|
||||
button,
|
||||
html [type="button"], // 1
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the inner border and padding in Firefox.
|
||||
//
|
||||
|
||||
button::-moz-focus-inner,
|
||||
|
|
@ -318,60 +343,16 @@ input::-moz-focus-inner {
|
|||
}
|
||||
|
||||
//
|
||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
// the UA stylesheet.
|
||||
// Restore the focus styles unset by the previous rule.
|
||||
//
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
button:-moz-focusring,
|
||||
input:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
//
|
||||
// It's recommended that you don't attempt to style these elements.
|
||||
// Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
//
|
||||
// 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
// 2. Remove excess padding in IE 8/9/10.
|
||||
//
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
// `font-size` values of the `input`, it causes the cursor style of the
|
||||
// decrement button to change from `default` to `text`.
|
||||
//
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
//
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
// Safari (but not Chrome) clips the cancel button when the search input has
|
||||
// padding (and `textfield` appearance).
|
||||
//
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Define consistent border, margin, and padding.
|
||||
// Change the border, margin, and padding in all browsers (opinionated).
|
||||
//
|
||||
|
||||
fieldset {
|
||||
|
|
@ -381,17 +362,23 @@ fieldset {
|
|||
}
|
||||
|
||||
//
|
||||
// 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
// 1. Correct the text wrapping in Edge and IE.
|
||||
// 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
// 3. Remove the padding so developers are not caught out when they zero out
|
||||
// `fieldset` elements in all browsers.
|
||||
//
|
||||
|
||||
legend {
|
||||
border: 0; // 1
|
||||
padding: 0; // 2
|
||||
box-sizing: border-box; // 1
|
||||
color: inherit; // 2
|
||||
display: table; // 1
|
||||
max-width: 100%; // 1
|
||||
padding: 0; // 3
|
||||
white-space: normal; // 1
|
||||
}
|
||||
|
||||
//
|
||||
// Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
// Remove the default vertical scrollbar in IE.
|
||||
//
|
||||
|
||||
textarea {
|
||||
|
|
@ -399,27 +386,39 @@ textarea {
|
|||
}
|
||||
|
||||
//
|
||||
// Don't inherit the `font-weight` (applied by a rule above).
|
||||
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
// 1. Add the correct box sizing in IE 10-.
|
||||
// 2. Remove the padding in IE 10-.
|
||||
//
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
// Tables
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove most spacing between table cells.
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
//
|
||||
|
||||
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;
|
||||
//
|
||||
// Correct the odd appearance of search inputs in Chrome and Safari.
|
||||
//
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the inner padding and cancel buttons in Chrome on OS X and
|
||||
// Safari on OS X.
|
||||
//
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -200,6 +200,8 @@ pre {
|
|||
margin-top: 0;
|
||||
// Reset browser default of `1em` to use `rem`s
|
||||
margin-bottom: 1rem;
|
||||
// Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -266,6 +268,8 @@ textarea {
|
|||
//
|
||||
|
||||
table {
|
||||
// No longer part of Normalize since v4
|
||||
border-collapse: collapse;
|
||||
// Reset for nesting within parents with `background-color`.
|
||||
background-color: $table-bg;
|
||||
}
|
||||
|
|
@ -353,7 +357,6 @@ legend {
|
|||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
// border: 0;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
|
|
|
|||
|
|
@ -382,8 +382,10 @@ $custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='h
|
|||
$custom-select-padding-x: .75rem !default;
|
||||
$custom-select-padding-y: .375rem !default;
|
||||
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
|
||||
$custom-select-color: $input-color !default;
|
||||
$custom-select-color: $input-color !default;
|
||||
$custom-select-disabled-color: $gray-light !default;
|
||||
$custom-select-bg: #fff !default;
|
||||
$custom-select-disabled-bg: $gray-lighter !default;
|
||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||
$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
|
||||
$custom-select-border-width: $input-btn-border-width !default;
|
||||
|
|
@ -580,6 +582,8 @@ $card-bg: #fff !default;
|
|||
|
||||
$card-link-hover-color: #fff !default;
|
||||
|
||||
$card-img-overlay-padding: 1.25rem !default;
|
||||
|
||||
$card-deck-margin: .625rem !default;
|
||||
|
||||
$card-columns-sm-up-column-gap: 1.25rem !default;
|
||||
|
|
@ -792,6 +796,8 @@ $carousel-caption-width: 70% !default;
|
|||
$carousel-caption-sm-up-width: 60% !default;
|
||||
$carousel-caption-color: #fff !default;
|
||||
|
||||
$carousel-icon-width: 20px !default;
|
||||
|
||||
|
||||
// Close
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue