rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Mark Otto 2016-05-08 15:25:26 -07:00
commit 4a064209ba
24 changed files with 646 additions and 469 deletions
Download patch file Download diff file Expand all files Collapse all files

26
docs/_data/nav.yml
View file

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

5
docs/_data/translations.yml
View file

@ -7,3 +7,8 @@
code: zh
description: Bootstrap 4 中文文档教程
url: http://boot4.com/
- name: Japanese
code: ja
description: Bootstrap 4 日本語リファレンス
url: http://bootstrap4.jp/

12
docs/components/card.md
View file

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

2
docs/content/reboot.md
View file

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

105
docs/content/tables.md
View file

@ -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.

13
docs/content/typography.md
View file

@ -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.

233
docs/dist/css/bootstrap.css
View file

@ -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 {

2
docs/dist/css/bootstrap.css.map vendored
View file

File diff suppressed because one or more lines are too long

2
docs/dist/css/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/dist/css/bootstrap.min.css.map vendored
View file

File diff suppressed because one or more lines are too long

43
docs/layout/overview.md
View file

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

18
docs/migration.md
View file

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