rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Remove 'xs' from text utilities (#21217)

Browse Source
This commit is contained in:
Starsam80 2016-11-26 21:33:46 -07:00 committed by Mark Otto
parent eb5ad730ee
commit b1e8d60348
11 changed files with 52 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_layouts/simple.html
View File

@ -2,7 +2,7 @@
layout: default
---
<div class="bd-pageheader text-xs-center text-sm-left">
<div class="bd-pageheader text-center text-sm-left">
<div class="container">
<h1>{{ page.title }}</h1>
<p class="lead">

38
docs/components/card.md
View File

@ -151,13 +151,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-xs-center">
<div class="card card-block text-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-xs-right">
<div class="card card-block text-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>
@ -209,7 +209,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
{% endexample %}
{% example html %}
<div class="card text-xs-center">
<div class="card text-center">
<div class="card-header">
Featured
</div>
@ -229,7 +229,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.float-*-*` utility class for proper alignment.
{% example html %}
<div class="card text-xs-center">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs float-left">
<li class="nav-item">
@ -252,7 +252,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
{% endexample %}
{% example html %}
<div class="card text-xs-center">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills float-left">
<li class="nav-item">
@ -333,7 +333,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-xs-center">
<div class="card card-inverse card-primary text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -341,7 +341,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-success text-xs-center">
<div class="card card-inverse card-success text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -349,7 +349,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-info text-xs-center">
<div class="card card-inverse card-info text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -357,7 +357,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-warning text-xs-center">
<div class="card card-inverse card-warning text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -365,7 +365,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-danger text-xs-center">
<div class="card card-inverse card-danger text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -383,7 +383,7 @@ Cards include their own variant classes for quickly changing the `background-col
In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
{% example html %}
<div class="card card-outline-primary text-xs-center">
<div class="card card-outline-primary text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -391,7 +391,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-outline-secondary text-xs-center">
<div class="card card-outline-secondary text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -399,7 +399,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-outline-success text-xs-center">
<div class="card card-outline-success text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -407,7 +407,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-outline-info text-xs-center">
<div class="card card-outline-info text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -415,7 +415,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-outline-warning text-xs-center">
<div class="card card-outline-warning text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -423,7 +423,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-outline-danger text-xs-center">
<div class="card card-outline-danger text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -542,7 +542,7 @@ Only applies to small devices and above.
<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-xs-center">
<div class="card card-block card-inverse card-primary text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
@ -552,7 +552,7 @@ Only applies to small devices and above.
</footer>
</blockquote>
</div>
<div class="card card-block text-xs-center">
<div class="card card-block text-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>
@ -560,7 +560,7 @@ Only applies to small devices and above.
<div class="card">
<img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
</div>
<div class="card card-block text-xs-right">
<div class="card card-block text-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>

12
docs/components/progress.md
View File

@ -18,19 +18,19 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
{% example html %}
<div class="text-xs-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
<div class="text-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
<div class="text-xs-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
<div class="text-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
<div class="text-xs-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
<div class="text-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
<div class="text-xs-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
<div class="text-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
<div class="text-xs-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
<div class="text-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
{% endexample %}
@ -39,7 +39,7 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that.
{% example html %}
<div class="text-xs-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
<div class="text-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
<progress class="progress" value="25" max="100" aria-describedby="example-caption-6">
<div class="progress">
<span class="progress-bar" style="width: 25%;"></span>

2
docs/content/figures.md
View File

@ -21,6 +21,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 rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>
{% endexample %}

4
docs/content/images.md
View File

@ -65,13 +65,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/utilities/respon
{% endhighlight %}
<div class="bd-example bd-example-images">
<div class="text-xs-center">
<div class="text-center">
<img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners">
</div>
</div>
{% highlight html %}
<div class="text-xs-center">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
{% endhighlight %}

2
docs/examples/album/index.html
View File

@ -43,7 +43,7 @@
</div>
</div>
<section class="jumbotron text-xs-center">
<section class="jumbotron text-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-xs-left">
<div class="carousel-caption text-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-xs-right">
<div class="carousel-caption text-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>

2
docs/examples/dashboard/index.html
View File

@ -92,7 +92,7 @@
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
<h1>Dashboard</h1>
<section class="row text-xs-center placeholders">
<section class="row text-center placeholders">
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>

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-xs-center">
<th class="text-center">
Extra small<br>
<small>&lt;576px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Small<br>
<small>&ge;576px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Medium<br>
<small>&ge;768px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Large<br>
<small>&ge;992px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Extra large<br>
<small>&ge;1200px</small>
</th>

6
docs/utilities/typography.md
View File

@ -30,9 +30,9 @@ Easily realign text to components with text alignment classes.
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-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-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>

14
scss/utilities/_text.scss
View File

@ -12,9 +12,17 @@
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.text-#{$breakpoint}-left { text-align: left !important; }
.text-#{$breakpoint}-right { text-align: right !important; }
.text-#{$breakpoint}-center { text-align: center !important; }
$min: breakpoint-min($breakpoint, $grid-breakpoints);
@if $min {
.text-#{$breakpoint}-left { text-align: left !important; }
.text-#{$breakpoint}-right { text-align: right !important; }
.text-#{$breakpoint}-center { text-align: center !important; }
} @else {
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
}
}
}