rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Remove non-responsive text alignment classes

Browse Source 
These can be replaced by their `.text-xs-*` parallels.
This also avoids any complications from interactions between the responsive and non-responsive classes.
(e.g. `<div class="text-left text-md-right">`)

Refs #18300
[skip sauce]
This commit is contained in:
Chris Rebert 2015-11-22 20:53:34 -08:00
parent 2c3a592a6e
commit ade2ab1341
8 changed files with 35 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/components/card.md
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>

16
docs/components/utilities.md
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.

2
docs/content/figures.md
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 %}

4
docs/content/images.md
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 %}

2
docs/examples/album/index.html
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>

4
docs/examples/carousel/index.html
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>

10
docs/layout/grid.md
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>

3
scss/_utilities.scss
View File

@ -46,9 +46,6 @@
// Alignment
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { @include text-truncate; }