mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-30 15:24:08 +03:00
Code Activity

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

Browse Source
This commit is contained in:
Mark Otto
2015-11-29 19:54:20 -08:00
parent 765c5e9c07 c68019e5d0
commit 0fa2c7c486
31 changed files with 218 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/card.md
+11 -11
View File
@@ -130,13 +130,13 @@ You can quickly change the text alignment of any card—in its entirety or speci
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card card-block text-center">
<div class="card card-block text-xs-center">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card card-block text-right">
<div class="card card-block text-xs-right">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
@@ -186,7 +186,7 @@ Add an optional header and/or footer within a card.
{% endexample %}
{% example html %}
<div class="card text-center">
<div class="card text-xs-center">
<div class="card-header">
Featured
</div>
@@ -260,7 +260,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
{% example html %}
<div class="card card-inverse card-primary text-center">
<div class="card card-inverse card-primary text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -268,7 +268,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-success text-center">
<div class="card card-inverse card-success text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -276,7 +276,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-info text-center">
<div class="card card-inverse card-info text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -284,7 +284,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-warning text-center">
<div class="card card-inverse card-warning text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -292,7 +292,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-danger text-center">
<div class="card card-inverse card-danger text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -409,7 +409,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card card-block card-inverse card-primary text-center">
<div class="card card-block card-inverse card-primary text-xs-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
@@ -419,7 +419,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
</footer>
</blockquote>
</div>
<div class="card card-block text-center">
<div class="card card-block text-xs-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@@ -427,7 +427,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
<div class="card">
<img class="card-img" data-src="holder.js/100px260/" alt="Card image">
</div>
<div class="card card-block text-right">
<div class="card card-block text-xs-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
docs/components/utilities.md
+13 -3
View File
@@ -94,13 +94,23 @@ Assign `margin` or `padding` to an element or a subset of its sides with shortha
Easily realign text to components with text alignment classes.
{% example html %}
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
{% endexample %}
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
{% example html %}
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
{% endexample %}
## Text transform
Transform text in components with text capitalization classes.
docs/content/figures.md
+1 -1
View File
@@ -20,6 +20,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
{% example html %}
<figure class="figure">
<img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
<figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
</figure>
{% endexample %}
docs/content/images.md
+2 -2
View File
@@ -68,13 +68,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
{% endhighlight %}
<div class="bd-example bd-example-images">
<div class="text-center">
<div class="text-xs-center">
<img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
</div>
</div>
{% highlight html %}
<div class="text-center">
<div class="text-xs-center">
<img src="..." class="img-rounded" alt="...">
</div>
{% endhighlight %}
docs/dist/css/bootstrap.css
+16 -17
View File
@@ -3154,6 +3154,10 @@ input[type="button"].btn-block {
margin-bottom: 0;
}
.input-group .form-control:focus, .input-group .form-control:active, .input-group .form-control:hover {
z-index: 3;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
@@ -3251,7 +3255,7 @@ input[type="button"].btn-block {
}
.input-group-btn > .btn:focus, .input-group-btn > .btn:active, .input-group-btn > .btn:hover {
z-index: 2;
z-index: 3;
}
.input-group-btn:first-child > .btn,
@@ -3265,6 +3269,13 @@ input[type="button"].btn-block {
margin-left: -1px;
}
.input-group-btn:last-child > .btn:focus, .input-group-btn:last-child > .btn:active, .input-group-btn:last-child > .btn:hover,
.input-group-btn:last-child > .btn-group:focus,
.input-group-btn:last-child > .btn-group:active,
.input-group-btn:last-child > .btn-group:hover {
z-index: 3;
}
.c-input {
position: relative;
display: inline;
@@ -4273,16 +4284,16 @@ a.label:focus, a.label:hover {
border-radius: .3rem;
}
.jumbotron-hr {
border-top-color: #d0d5d8;
}
@media (min-width: 544px) {
.jumbotron {
padding: 4rem 2rem;
}
}
.jumbotron-hr {
border-top-color: #d0d5d8;
}
.jumbotron-fluid {
padding-right: 0;
padding-left: 0;
@@ -5579,18 +5590,6 @@ button.close {
border: 0;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
.text-justify {
text-align: justify !important;
}
docs/dist/css/bootstrap.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap.min.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/examples/album/index.html
+1 -1
View File
@@ -44,7 +44,7 @@
</div>
</div>
<section class="jumbotron text-center">
<section class="jumbotron text-xs-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
docs/examples/carousel/index.html
+2 -2
View File
@@ -51,7 +51,7 @@
<div class="carousel-item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
<div class="carousel-caption text-xs-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
@@ -71,7 +71,7 @@
<div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right">
<div class="carousel-caption text-xs-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
docs/layout/grid.md
+5 -5
View File
@@ -62,23 +62,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
<thead>
<tr>
<th></th>
<th class="text-center">
<th class="text-xs-center">
Extra small<br>
<small>&lt;544px</small>
</th>
<th class="text-center">
<th class="text-xs-center">
Small<br>
<small>&ge;544px</small>
</th>
<th class="text-center">
<th class="text-xs-center">
Medium<br>
<small>&ge;768px</small>
</th>
<th class="text-center">
<th class="text-xs-center">
Large<br>
<small>&ge;992px</small>
</th>
<th class="text-center">
<th class="text-xs-center">
Extra large<br>
<small>&ge;1200px</small>
</th>