kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/scss/_featured-sites.scss
View File

@ -2,7 +2,7 @@
margin-right: -1px; margin-right: -1px;
margin-left: -1px; margin-left: -1px;
} }
.bd-featured-sites .col-xs-6 { .bd-featured-sites .col-6 {
padding: 1px; padding: 1px;
} }
.bd-featured-sites .img-fluid { .bd-featured-sites .img-fluid {

6
docs/assets/scss/_responsive-tests.scss
View File

@ -35,7 +35,7 @@
.responsive-utilities-test { .responsive-utilities-test {
margin-top: .25rem; margin-top: .25rem;
} }
.responsive-utilities-test .col-xs-6 { .responsive-utilities-test .col-6 {
margin-top: .5rem; margin-top: .5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
@ -50,7 +50,7 @@
} }
.visible-on, .visible-on,
.hidden-on { .hidden-on {
.col-xs-6 { .col-6 {
> .not-visible { > .not-visible {
color: #999; color: #999;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -59,7 +59,7 @@
} }
.visible-on, .visible-on,
.hidden-on { .hidden-on {
.col-xs-6 { .col-6 {
.visible { .visible {
color: #468847; color: #468847;
background-color: #dff0d8; background-color: #dff0d8;

56
docs/layout/flexbox-grid.md
View File

@ -43,21 +43,21 @@ For example, here are two grid layouts that apply to every device and viewport,
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs"> <div class="col">
1 of 2 1 of 2
</div> </div>
<div class="col-xs"> <div class="col">
1 of 2 1 of 2
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs"> <div class="col">
1 of 3 1 of 3
</div> </div>
<div class="col-xs"> <div class="col">
1 of 3 1 of 3
</div> </div>
<div class="col-xs"> <div class="col">
1 of 3 1 of 3
</div> </div>
</div> </div>
@ -73,24 +73,24 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs"> <div class="col">
1 of 3 1 of 3
</div> </div>
<div class="col-6"> <div class="col-6">
2 of 3 (wider) 2 of 3 (wider)
</div> </div>
<div class="col-xs"> <div class="col">
3 of 3 3 of 3
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs"> <div class="col">
1 of 3 1 of 3
</div> </div>
<div class="col-5"> <div class="col-5">
2 of 3 (wider) 2 of 3 (wider)
</div> </div>
<div class="col-xs"> <div class="col">
3 of 3 3 of 3
</div> </div>
</div> </div>
@ -106,24 +106,24 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row flex-items-md-center"> <div class="row flex-items-md-center">
<div class="col-xs col-lg-2"> <div class="col col-lg-2">
1 of 3 1 of 3
</div> </div>
<div class="col-12 col-md-auto"> <div class="col-12 col-md-auto">
Variable width content Variable width content
</div> </div>
<div class="col-xs col-lg-2"> <div class="col col-lg-2">
3 of 3 3 of 3
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs"> <div class="col">
1 of 3 1 of 3
</div> </div>
<div class="col-12 col-md-auto"> <div class="col-12 col-md-auto">
Variable width content Variable width content
</div> </div>
<div class="col-xs col-lg-2"> <div class="col col-lg-2">
3 of 3 3 of 3
</div> </div>
</div> </div>
@ -158,35 +158,35 @@ Use the flexbox alignment utilities to vertically align columns.
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row flex-items-top"> <div class="row flex-items-top">
<div class="col-xs"> <div class="col">
One of three columns One of three columns
</div> </div>
<div class="col-xs"> <div class="col">
One of three columns One of three columns
</div> </div>
<div class="col-xs"> <div class="col">
One of three columns One of three columns
</div> </div>
</div> </div>
<div class="row flex-items-middle"> <div class="row flex-items-middle">
<div class="col-xs"> <div class="col">
One of three columns One of three columns
</div> </div>
<div class="col-xs"> <div class="col">
One of three columns One of three columns
</div> </div>
<div class="col-xs"> <div class="col">
One of three columns One of three columns
</div> </div>
</div> </div>
<div class="row flex-items-bottom"> <div class="row flex-items-bottom">
<div class="col-xs"> <div class="col">
One of three columns One of three columns
</div> </div>
<div class="col-xs"> <div class="col">
One of three columns One of three columns
</div> </div>
<div class="col-xs"> <div class="col">
One of three columns One of three columns
</div> </div>
</div> </div>
@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns.
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs flex-top"> <div class="col flex-top">
One of three columns One of three columns
</div> </div>
<div class="col-xs flex-middle"> <div class="col flex-middle">
One of three columns One of three columns
</div> </div>
<div class="col-xs flex-bottom"> <div class="col flex-bottom">
One of three columns One of three columns
</div> </div>
</div> </div>
@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content.
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs flex-unordered"> <div class="col flex-unordered">
First, but unordered First, but unordered
</div> </div>
<div class="col-xs flex-last"> <div class="col flex-last">
Second, but last Second, but last
</div> </div>
<div class="col-xs flex-first"> <div class="col flex-first">
Third, but first Third, but first
</div> </div>
</div> </div>

5
docs/layout/grid.md
View File

@ -100,7 +100,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
</tr> </tr>
<tr> <tr>
<th class="text-nowrap" scope="row">Class prefix</th> <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-sm-</code></td>
<td><code>.col-md-</code></td> <td><code>.col-md-</code></td>
<td><code>.col-lg-</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 ### 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"> <div class="bd-example-row">
{% example html %} {% example html %}
@ -385,6 +385,7 @@ Here's the source code for creating these styles. Note that column overrides are
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
> .col,
> [class*="col-"] { > [class*="col-"] {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;

1
scss/_grid.scss
View File

@ -35,6 +35,7 @@
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
> .col,
> [class*="col-"] { > [class*="col-"] {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;

89
scss/mixins/_grid-framework.scss
View File

@ -17,27 +17,29 @@
@include make-gutters($gutters); @include make-gutters($gutters);
} }
$breakpoint-counter: 0;
@each $breakpoint in map-keys($breakpoints) { @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); // Allow columns to stretch full width below their breakpoints
@for $i from 1 through $columns {
@if $breakpoint-counter == 1 { @if $min {
@for $i from 1 through $columns {
.col-#{$i} { .col-#{$i} {
@extend %grid-column; @extend %grid-column;
} }
} @else {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column;
}
} }
} }
@if $enable-flex {
@if $breakpoint-counter != 1 { @if $min {
// Allow columns to stretch full width below their breakpoints .col {
.col-#{$breakpoint} { @extend %grid-column;
@extend %grid-column; }
} } @else {
.col-#{$breakpoint} {
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column; @extend %grid-column;
} }
} }
@ -46,24 +48,35 @@
@include media-breakpoint-up($breakpoint, $breakpoints) { @include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns // Provide basic `.col-{bp}` classes for equal-width flexbox columns
@if $enable-flex { @if $enable-flex {
.col-#{$breakpoint} { @if $min {
flex-basis: 0; .col {
flex-grow: 1; flex-basis: 0;
max-width: 100%; flex-grow: 1;
} max-width: 100%;
.col-#{$breakpoint}-auto { }
flex: 0 0 auto; .col-auto {
width: 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 { @for $i from 1 through $columns {
@if $breakpoint-counter == 1 { @if $min {
.col-#{$i} { .col-#{$i} {
@include make-col($i, $columns); @include make-col($i, $columns);
} }
} } @else {
@if $breakpoint-counter != 1 {
.col-#{$breakpoint}-#{$i} { .col-#{$breakpoint}-#{$i} {
@include make-col($i, $columns); @include make-col($i, $columns);
} }
@ -72,12 +85,11 @@
@each $modifier in (pull, push) { @each $modifier in (pull, push) {
@for $i from 0 through $columns { @for $i from 0 through $columns {
@if $breakpoint-counter == 1 { @if $min {
.#{$modifier}-#{$i} { .#{$modifier}-#{$i} {
@include make-col-modifier($modifier, $i, $columns) @include make-col-modifier($modifier, $i, $columns)
} }
} } @else {
@if $breakpoint-counter != 1 {
.#{$modifier}-#{$breakpoint}-#{$i} { .#{$modifier}-#{$breakpoint}-#{$i} {
@include make-col-modifier($modifier, $i, $columns) @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 // `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) { @for $i from 0 through ($columns - 1) {
@if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0 @if not $min or $i != 0 { // Avoid emitting useless .offset-xs-0
@if $breakpoint-counter == 1 { @if $min {
.offset-#{$i} { .offset-#{$i} {
@include make-col-modifier(offset, $i, $columns) @include make-col-modifier(offset, $i, $columns)
} }
} } @else {
@if $breakpoint-counter != 1 { .offset-#{$breakpoint}-#{$i} {
.offset-#{$breakpoint}-#{$i} { @include make-col-modifier(offset, $i, $columns)
@include make-col-modifier(offset, $i, $columns) }
} }
}
} }
} }
} }