mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-02 16:04:07 +03:00
Code Activity

Rename .col-xs to .col + some other cleanup (#21222)

Browse Source 
* Use `breakpoint-min` instead of a counter

* Remove 'xs' from flexbox grid
This commit is contained in:
Starsam80
2016-11-27 23:47:00 -07:00
committed by Mark Otto
parent 4393da18f6
commit 08e36a3cc9
6 changed files with 86 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/scss/_featured-sites.scss
+1 -1
View File
@@ -2,7 +2,7 @@
margin-right: -1px;
margin-left: -1px;
}
.bd-featured-sites .col-xs-6 {
.bd-featured-sites .col-6 {
padding: 1px;
}
.bd-featured-sites .img-fluid {
docs/assets/scss/_responsive-tests.scss
+3 -3
View File
@@ -35,7 +35,7 @@
.responsive-utilities-test {
margin-top: .25rem;
}
.responsive-utilities-test .col-xs-6 {
.responsive-utilities-test .col-6 {
margin-top: .5rem;
margin-bottom: .5rem;
}
@@ -50,7 +50,7 @@
}
.visible-on,
.hidden-on {
.col-xs-6 {
.col-6 {
> .not-visible {
color: #999;
border: 1px solid #ddd;
@@ -59,7 +59,7 @@
}
.visible-on,
.hidden-on {
.col-xs-6 {
.col-6 {
.visible {
color: #468847;
background-color: #dff0d8;
docs/layout/flexbox-grid.md
+28 -28
View File
@@ -43,21 +43,21 @@ For example, here are two grid layouts that apply to every device and viewport,
{% example html %}
<div class="container">
<div class="row">
<div class="col-xs">
<div class="col">
1 of 2
</div>
<div class="col-xs">
<div class="col">
1 of 2
</div>
</div>
<div class="row">
<div class="col-xs">
<div class="col">
1 of 3
</div>
<div class="col-xs">
<div class="col">
1 of 3
</div>
<div class="col-xs">
<div class="col">
1 of 3
</div>
</div>
@@ -73,24 +73,24 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
{% example html %}
<div class="container">
<div class="row">
<div class="col-xs">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col-xs">
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col-xs">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col-xs">
<div class="col">
3 of 3
</div>
</div>
@@ -106,24 +106,24 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
{% example html %}
<div class="container">
<div class="row flex-items-md-center">
<div class="col-xs col-lg-2">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-12 col-md-auto">
Variable width content
</div>
<div class="col-xs col-lg-2">
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col-xs">
<div class="col">
1 of 3
</div>
<div class="col-12 col-md-auto">
Variable width content
</div>
<div class="col-xs col-lg-2">
<div class="col col-lg-2">
3 of 3
</div>
</div>
@@ -158,35 +158,35 @@ Use the flexbox alignment utilities to vertically align columns.
{% example html %}
<div class="container">
<div class="row flex-items-top">
<div class="col-xs">
<div class="col">
One of three columns
</div>
<div class="col-xs">
<div class="col">
One of three columns
</div>
<div class="col-xs">
<div class="col">
One of three columns
</div>
</div>
<div class="row flex-items-middle">
<div class="col-xs">
<div class="col">
One of three columns
</div>
<div class="col-xs">
<div class="col">
One of three columns
</div>
<div class="col-xs">
<div class="col">
One of three columns
</div>
</div>
<div class="row flex-items-bottom">
<div class="col-xs">
<div class="col">
One of three columns
</div>
<div class="col-xs">
<div class="col">
One of three columns
</div>
<div class="col-xs">
<div class="col">
One of three columns
</div>
</div>
@@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns.
{% example html %}
<div class="container">
<div class="row">
<div class="col-xs flex-top">
<div class="col flex-top">
One of three columns
</div>
<div class="col-xs flex-middle">
<div class="col flex-middle">
One of three columns
</div>
<div class="col-xs flex-bottom">
<div class="col flex-bottom">
One of three columns
</div>
</div>
@@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content.
{% example html %}
<div class="container">
<div class="row">
<div class="col-xs flex-unordered">
<div class="col flex-unordered">
First, but unordered
</div>
<div class="col-xs flex-last">
<div class="col flex-last">
Second, but last
</div>
<div class="col-xs flex-first">
<div class="col flex-first">
Third, but first
</div>
</div>
docs/layout/grid.md
+3 -2
View File
@@ -100,7 +100,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
</tr>
<tr>
<th class="text-nowrap" scope="row">Class prefix</th>
<td><code>.col-xs-</code></td>
<td><code>.col-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
@@ -329,7 +329,7 @@ Using a single set of `.col-md-*` grid classes, you can create a basic grid syst
### Example: Mobile and desktop
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.
<div class="bd-example-row">
{% example html %}
@@ -385,6 +385,7 @@ Here's the source code for creating these styles. Note that column overrides are
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;