Rename `.col-xs` to `.col` + some other cleanup (#21222)
* Use `breakpoint-min` instead of a counter * Remove 'xs' from flexbox grid
This commit is contained in:
Starsam80
Mark Otto
parent
4393da18f6
commit
08e36a3cc9
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
|
|
|||
|
|
@ -17,27 +17,29 @@
|
|||
@include make-gutters($gutters);
|
||||
}
|
||||
|
||||
$breakpoint-counter: 0;
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
// Logic is a little reversed here: `breakpoint-min` returns false when it's the smallest breakpoint.
|
||||
$min: not breakpoint-min($breakpoint, $breakpoints);
|
||||
|
||||
$breakpoint-counter: ($breakpoint-counter + 1);
|
||||
|
||||
@if $breakpoint-counter == 1 {
|
||||
@for $i from 1 through $columns {
|
||||
// Allow columns to stretch full width below their breakpoints
|
||||
@for $i from 1 through $columns {
|
||||
@if $min {
|
||||
.col-#{$i} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
} @else {
|
||||
.col-#{$breakpoint}-#{$i} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $breakpoint-counter != 1 {
|
||||
// Allow columns to stretch full width below their breakpoints
|
||||
.col-#{$breakpoint} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
|
||||
@for $i from 1 through $columns {
|
||||
.col-#{$breakpoint}-#{$i} {
|
||||
@if $enable-flex {
|
||||
@if $min {
|
||||
.col {
|
||||
@extend %grid-column;
|
||||
}
|
||||
} @else {
|
||||
.col-#{$breakpoint} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
}
|
||||
|
|
@ -46,24 +48,35 @@
|
|||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
||||
@if $enable-flex {
|
||||
.col-#{$breakpoint} {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-#{$breakpoint}-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
@if $min {
|
||||
.col {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
} @else {
|
||||
.col-#{$breakpoint} {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-#{$breakpoint}-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through $columns {
|
||||
@if $breakpoint-counter == 1 {
|
||||
@if $min {
|
||||
.col-#{$i} {
|
||||
@include make-col($i, $columns);
|
||||
}
|
||||
}
|
||||
@if $breakpoint-counter != 1 {
|
||||
} @else {
|
||||
.col-#{$breakpoint}-#{$i} {
|
||||
@include make-col($i, $columns);
|
||||
}
|
||||
|
|
@ -72,12 +85,11 @@
|
|||
|
||||
@each $modifier in (pull, push) {
|
||||
@for $i from 0 through $columns {
|
||||
@if $breakpoint-counter == 1 {
|
||||
@if $min {
|
||||
.#{$modifier}-#{$i} {
|
||||
@include make-col-modifier($modifier, $i, $columns)
|
||||
}
|
||||
}
|
||||
@if $breakpoint-counter != 1 {
|
||||
} @else {
|
||||
.#{$modifier}-#{$breakpoint}-#{$i} {
|
||||
@include make-col-modifier($modifier, $i, $columns)
|
||||
}
|
||||
|
|
@ -87,17 +99,16 @@
|
|||
|
||||
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
||||
@for $i from 0 through ($columns - 1) {
|
||||
@if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0
|
||||
@if $breakpoint-counter == 1 {
|
||||
.offset-#{$i} {
|
||||
@include make-col-modifier(offset, $i, $columns)
|
||||
}
|
||||
}
|
||||
@if $breakpoint-counter != 1 {
|
||||
.offset-#{$breakpoint}-#{$i} {
|
||||
@include make-col-modifier(offset, $i, $columns)
|
||||
}
|
||||
}
|
||||
@if not $min or $i != 0 { // Avoid emitting useless .offset-xs-0
|
||||
@if $min {
|
||||
.offset-#{$i} {
|
||||
@include make-col-modifier(offset, $i, $columns)
|
||||
}
|
||||
} @else {
|
||||
.offset-#{$breakpoint}-#{$i} {
|
||||
@include make-col-modifier(offset, $i, $columns)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue