mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-02 16:04:07 +03:00
More reboot work, commenting out things that have been moved over
This commit is contained in:
Mark Otto
+3
-1
@@ -77,8 +77,10 @@
|
||||
- title: Page defaults
|
||||
- title: Headings and paragraphs
|
||||
- title: Lists
|
||||
- title: Preformatted text
|
||||
- title: Tables
|
||||
- title: Code blocks
|
||||
- title: Forms
|
||||
- title: Misc elements
|
||||
- title: Jumbotron
|
||||
- title: Page header
|
||||
- title: Custom forms
|
||||
|
||||
+71
-108
@@ -97,6 +97,20 @@ For simpler styling, clear hierarchy, and better spacing, description lists have
|
||||
{% endmarkdown %}
|
||||
</div>
|
||||
|
||||
## Preformatted text
|
||||
|
||||
The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
|
||||
|
||||
<div class="bd-example">
|
||||
{% markdown %}
|
||||
<pre>
|
||||
.element {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</pre>
|
||||
{% endmarkdown %}
|
||||
</div>
|
||||
|
||||
## Tables
|
||||
|
||||
Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout.
|
||||
@@ -137,99 +151,19 @@ Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-a
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## Code blocks
|
||||
## Forms
|
||||
|
||||
The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
|
||||
Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
|
||||
|
||||
<div class="bd-example">
|
||||
{% markdown %}
|
||||
<pre>
|
||||
.element {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</pre>
|
||||
{% endmarkdown %}
|
||||
</div>
|
||||
- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
|
||||
= `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
|
||||
- `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
|
||||
- `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
|
||||
- `<textarea>`s are modified to only be resizeble vertically as horizontal resizing often "breaks" page layout.
|
||||
|
||||
These changes, and more, are demonstrated below.
|
||||
|
||||
## Inline elements
|
||||
|
||||
<div class="bd-example">
|
||||
{% markdown %}
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. For example, `<section>` should be wrapped as inline. Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.
|
||||
{% endmarkdown %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h1>Address</h1>
|
||||
|
||||
<address>
|
||||
<strong>Twitter, Inc.</strong><br>
|
||||
795 Folsom Ave, Suite 600<br>
|
||||
San Francisco, CA 94107<br>
|
||||
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||||
</address>
|
||||
|
||||
<address>
|
||||
<strong>Full Name</strong><br>
|
||||
<a href="mailto:#">first.last@example.com</a>
|
||||
</address>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Blockquote</h1>
|
||||
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Tables</h1>
|
||||
|
||||
<table>
|
||||
<caption>
|
||||
This is an example table, and this is it's caption to describe the contents.
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Forms</h1>
|
||||
|
||||
<form>
|
||||
<form class="bd-example">
|
||||
<fieldset>
|
||||
<legend>Example legend</legend>
|
||||
|
||||
@@ -255,14 +189,14 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. For example,
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<formgroup>
|
||||
<p>
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
Check this checkbox
|
||||
</label>
|
||||
</formgroup>
|
||||
</p>
|
||||
|
||||
<formgroup>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Option one is this and that
|
||||
@@ -275,33 +209,23 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. For example,
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</formgroup>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="textarea">Example textarea</label>
|
||||
<textarea id="example" rows="3"></textarea>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="file">Example file</label>
|
||||
<input type="file">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="progress">Example progress bar</label>
|
||||
<progress value="25" min="0" max="100"></progress>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="range">Example range</label>
|
||||
<input type="range">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="time">Example temporal</label>
|
||||
<input type="date">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="time">Example output</label>
|
||||
<output name="result">100</output>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button type="submit">Button submit</button>
|
||||
<input type="submit" value="Input submit button">
|
||||
@@ -315,3 +239,42 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. For example,
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
## Misc elements
|
||||
|
||||
### Address
|
||||
|
||||
The `<address>` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added.
|
||||
|
||||
<div class="bd-example">
|
||||
<address>
|
||||
<strong>Twitter, Inc.</strong><br>
|
||||
795 Folsom Ave, Suite 600<br>
|
||||
San Francisco, CA 94107<br>
|
||||
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||||
</address>
|
||||
|
||||
<address>
|
||||
<strong>Full Name</strong><br>
|
||||
<a href="mailto:#">first.last@example.com</a>
|
||||
</address>
|
||||
</div>
|
||||
|
||||
### Blockquote
|
||||
|
||||
The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements.
|
||||
|
||||
<div class="bd-example">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
### Inline elements
|
||||
|
||||
The `<abbr>` element receives basic styling to make it stand the amongst paragraph text.
|
||||
|
||||
<div class="bd-example">
|
||||
Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
|
||||
</div>
|
||||
|
||||
@@ -405,12 +405,11 @@ legend {
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
output {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
@@ -440,17 +439,17 @@ h4 small, h4 .small, .h4 small, .h4 .small, h5 small, h5 .small, .h5 small, .h5
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h3, .h3 {
|
||||
h2, .h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3, .h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h4, .h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@@ -515,39 +514,6 @@ mark, .mark {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: .5rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.25rem;
|
||||
border-left: .25rem solid #eceeef;
|
||||
}
|
||||
blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
blockquote footer {
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
line-height: 1.5;
|
||||
color: #818a91;
|
||||
}
|
||||
blockquote footer:before {
|
||||
content: "\2014 \00A0";
|
||||
}
|
||||
|
||||
.blockquote-reverse {
|
||||
padding-right: 1rem;
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
border-right: .25rem solid #eceeef;
|
||||
border-left: 0;
|
||||
}
|
||||
.blockquote-reverse footer:before {
|
||||
content: "";
|
||||
}
|
||||
.blockquote-reverse footer:after {
|
||||
content: "\00A0 \2014";
|
||||
}
|
||||
|
||||
.img-responsive, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
@@ -1688,25 +1654,6 @@ label {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
input[type="radio"], input[type="checkbox"] {
|
||||
margin: 4px 0 0;
|
||||
margin-top: 1px \9;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
output {
|
||||
padding-top: 1.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #55595c;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -1761,18 +1708,6 @@ input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
|
||||
line-height: 2.65rem;
|
||||
}
|
||||
input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control, .input-group-sm > input[type="date"].input-group-addon, .input-group-sm > .input-group-btn > input[type="date"].btn, .input-group-sm input[type="date"], input[type="time"].input-sm, .input-group-sm > input[type="time"].form-control, .input-group-sm > input[type="time"].input-group-addon, .input-group-sm > .input-group-btn > input[type="time"].btn, .input-group-sm input[type="time"], input[type="datetime-local"].input-sm, .input-group-sm > input[type="datetime-local"].form-control, .input-group-sm > input[type="datetime-local"].input-group-addon, .input-group-sm > .input-group-btn > input[type="datetime-local"].btn, .input-group-sm input[type="datetime-local"], input[type="month"].input-sm, .input-group-sm > input[type="month"].form-control, .input-group-sm > input[type="month"].input-group-addon, .input-group-sm > .input-group-btn > input[type="month"].btn, .input-group-sm input[type="month"] {
|
||||
line-height: 2.025rem;
|
||||
}
|
||||
input[type="date"].input-lg, .input-group-lg > input[type="date"].form-control, .input-group-lg > input[type="date"].input-group-addon, .input-group-lg > .input-group-btn > input[type="date"].btn, .input-group-lg input[type="date"], input[type="time"].input-lg, .input-group-lg > input[type="time"].form-control, .input-group-lg > input[type="time"].input-group-addon, .input-group-lg > .input-group-btn > input[type="time"].btn, .input-group-lg input[type="time"], input[type="datetime-local"].input-lg, .input-group-lg > input[type="datetime-local"].form-control, .input-group-lg > input[type="datetime-local"].input-group-addon, .input-group-lg > .input-group-btn > input[type="datetime-local"].btn, .input-group-lg input[type="datetime-local"], input[type="month"].input-lg, .input-group-lg > input[type="month"].form-control, .input-group-lg > input[type="month"].input-group-addon, .input-group-lg > .input-group-btn > input[type="month"].btn, .input-group-lg input[type="month"] {
|
||||
line-height: 3.316667rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user