8000 Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev · liuwenye2010/bootstrap@0fa2c7c · GitHub
[go: up one dir, main page]
Skip to content

Commit 0fa2c7c

Browse files
mdomdo
committed
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev
2 parents 765c5e9 + c68019e commit 0fa2c7c

31 files changed

+218
-172
lines changed

‎Gruntfile.js

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,33 @@ module.exports = function (grunt) {
2323
var mq4HoverShim = require('mq4-hover-shim');
2424
var autoprefixer = require('autoprefixer')({
2525
browsers: [
26-
'Android 2.3',
27-
'Android >= 4',
28-
'Chrome >= 35',
29-
'Firefox >= 31',
26+
//
27+
// Official browser support policy:
28+
// http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#supported-browsers
29+
//
30+
'Chrome >= 35', // Exact version number here is kinda arbitrary
31+
// Rather than using Autoprefixer's native "Firefox ESR" version specifier string,
32+
// we deliberately hardcode the number. This is to avoid unwittingly severely breaking the previous ESR in the event that:
33+
// (a) we happen to ship a new Bootstrap release soon after the release of a new ESR,
34+
// such that folks haven't yet had a reasonable amount of time to upgrade; and
35+
// (b) the new ESR has unprefixed CSS properties/values whose absence would severely break webpages
36+
// (e.g. `box-sizing`, as opposed to `background: linear-gradient(...)`).
37+
// Since they've been unprefixed, Autoprefixer will stop prefixing them,
38+
// thus causing them to not work in the previous ESR (where the prefixes were required).
39+
'Firefox >= 31', // Current Firefox Extended Support Release (ESR)
3040
// Note: Edge versions in Autoprefixer & Can I Use refer to the EdgeHTML rendering engine version,
3141
// NOT the Edge app version shown in Edge's "About" screen.
3242
// For example, at the time of writing, Edge 20 on an up-to-date system uses EdgeHTML 12.
3343
// See also https://github.com/Fyrd/caniuse/issues/1928
3444
'Edge >= 12',
3545
'Explorer >= 9',
46+
// Out of leniency, we prefix these 1 version further back than the official policy.
3647
'iOS >= 7',
37-
'Opera >= 12',
38-
'Safari >= 7.1'
48+
'Safari >= 7.1',
49+
// The following remain NOT officially supported, but we're lenient and include their prefixes to avoid severely breaking in them.
50+
'Android 2.3',
51+
'Android >= 4',
52+
'Opera >= 12'
3953
]
4054
});
4155

‎dist/css/bootstrap.css

Lines changed: 16 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/bootstrap.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/bootstrap.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/bootstrap.min.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/components/card.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -130,13 +130,13 @@ You can quickly change the text alignment of any card—in its entirety or speci
130130
<a href="#" class="btn btn-primary">Go somewhere</a>
131131
</div>
132132

133-
<div class="card card-block text-center">
133+
<div class="card card-block text-xs-center">
134134
<h4 class="card-title">Special title treatment</h4>
135135
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
136136
<a href="#" class="btn btn-primary">Go somewhere</a>
137137
</div>
138138

139-
<div class="card card-block text-right">
139+
<div class="card card-block text-xs-right">
140140
<h4 class="card-title">Special title treatment</h4>
141141
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
142142
<a href="#" class="btn btn-primary">Go somewhere</a>
@@ -186,7 +186,7 @@ Add an optional header and/or footer within a card.
186186
{% endexample %}
187187

188188
{% example html %}
189-
<div class="card text-center">
189+
<div class="card text-xs-center">
190190
<div class="card-header">
191191
Featured
192192
</div>
@@ -260,39 +260,39 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
260260
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`.**
261261

262262
{% example html %}
263-
<div class="card card-inverse card-primary text-center">
263+
<div class="card card-inverse card-primary text-xs-center">
264264
<div class="card-block">
265265
<blockquote class="card-blockquote">
266266
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
267267
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
268268
</blockquote>
269269
</div>
270270
</div>
271-
<div class="card card-inverse card-success text-center">
271+
<div class="card card-inverse card-success text-xs-center">
272272
<div class="card-block">
273273
<blockquote class="card-blockquote">
274274
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
275275
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
276276
</blockquote>
277277
</div>
278278
</div>
279-
<div class="card card-inverse card-info text-center">
279+
<div class="card card-inverse card-info text-xs-center">
280280
<div class="card-block">
281281
<blockquote class="card-blockquote">
282282
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
283283
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
284284
</blockquote>
285285
</div>
286286
</div>
287-
<div class="card card-inverse card-warning text-center">
287+
<div class="card card-inverse card-warning text-xs-center">
288288
<div class="card-block">
289289
<blockquote class="card-blockquote">
290290
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
291291
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
292292
</blockquote>
293293
</div>
294294
</div>
295-
<div class="card card-inverse card-danger text-center">
295+
<div class="card card-inverse card-danger text-xs-center">
296296
<div class="card-block">
297297
<blockquote class="card-blockquote">
298298
<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
409409
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
410410
</div>
411411
</div>
412-
<div class="card card-block card-inverse card-primary text-center">
412+
<div class="card card-block card-inverse card-primary text-xs-center">
413413
<blockquote class="card-blockquote">
414414
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
415415
<footer>
@@ -419,15 +419,15 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
419419
</footer>
420420
</blockquote>
421421
</div>
422-
<div class="card card-block text-center">
422+
<div class="card card-block text-xs-center">
423423
<h4 class="card-title">Card title</h4>
424424
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
425425
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
426426
</div>
427427
<div class="card">
428428
<img class="card-img" data-src="holder.js/100px260/" alt="Card image">
429429
</div>
430-
<div class="card card-block text-right">
430+
<div class="card card-block text-xs-right">
431431
<blockquote class="card-blockquote">
432432
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
433433
<footer>

‎docs/components/utilities.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,23 @@ Assign `margin` or `padding` to an element or a subset of its sides with shortha
9494
Easily realign text to components with text alignment classes.
9595

9696
{% example html %}
97-
<p class="text-left">Left aligned text.</p>
98-
<p class="text-center">Center aligned text.</p>
99-
<p class="text-right">Right aligned text.</p>
10097
<p class="text-justify">Justified text.</p>
10198
<p class="text-nowrap">No wrap text.</p>
10299
{% endexample %}
103100

101+
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
102+
103+
{% example html %}
104+
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
105+
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
106+
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
107+
108+
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
109+
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
110+
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
111+
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
112+
{% endexample %}
113+
104114
## Text transform
105115

106116
Transform text in components with text capitalization classes.

‎docs/content/figures.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
2020
{% example html %}
2121
<figure class="figure">
2222
<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.">
23-
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
23+
<figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
2424
</figure>
2525
{% endexample %}

‎docs/content/images.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
6868
{% endhighlight %}
6969

7070
<div class="bd-example bd-example-images">
71-
<div class="text-center">
71+
<div class="text-xs-center">
7272
<img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
7373
</div>
7474
</div>
7575

7676
{% highlight html %}
77-
<div class="text-center">
77+
<div class="text-xs-center">
7878
<img src="..." class="img-rounded" alt="...">
7979
</div>
8080
{% endhighlight %}

‎docs/dist/css/bootstrap.css

Lines changed: 16 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
0