kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Merge pull request #17403 from twbs/use-px-for-window-sizes

Browse source 
Change grid and container sizes to px
This commit is contained in:
Mark Otto 2015-09-27 22:58:45 -07:00
commit 0240136e01
4 changed files with 56 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
docs/layout/grid.md
View file

@ -52,6 +52,9 @@ The above example creates three equal-width columns on small, medium, large, and
## Grid options ## Grid options
While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths.
This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units).
See how aspects of the Bootstrap grid system work across multiple devices with a handy table. See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
<div class="table-responsive"> <div class="table-responsive">
@ -61,23 +64,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
<th></th> <th></th>
<th class="text-center"> <th class="text-center">
Extra small<br> Extra small<br>
<small>&lt;34em / 480px</small> <small>&lt;544px</small>
</th> </th>
<th class="text-center"> <th class="text-center">
Small<br> Small<br>
<small>&ge;34em / 480px</small> <small>&ge;544px</small>
</th> </th>
<th class="text-center"> <th class="text-center">
Medium<br> Medium<br>
<small>&ge;45em / 720px</small> <small>&ge;768px</small>
</th> </th>
<th class="text-center"> <th class="text-center">
Large<br> Large<br>
<small>&ge;62em / 992px</small> <small>&ge;992px</small>
</th> </th>
<th class="text-center"> <th class="text-center">
Extra large<br> Extra large<br>
<small>&ge;75em / 1200px</small> <small>&ge;1200px</small>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -90,10 +93,10 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
<tr> <tr>
<th class="text-nowrap" scope="row">Container width</th> <th class="text-nowrap" scope="row">Container width</th>
<td>None (auto)</td> <td>None (auto)</td>
<td>34rem / 480px</td> <td>576px</td>
<td>45rem / 720px</td> <td>720px</td>
<td>60rem / 960px</td> <td>940px</td>
<td>72.25rem / 1156px</td> <td>1140px</td>
</tr> </tr>
<tr> <tr>
<th class="text-nowrap" scope="row">Class prefix</th> <th class="text-nowrap" scope="row">Class prefix</th>
@ -109,7 +112,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">Gutter width</th> <th class="text-nowrap" scope="row">Gutter width</th>
<td colspan="5">30px (15px on each side of a column)</td> <td colspan="5">1.875rem / 30px (15px on each side of a column)</td>
</tr> </tr>
<tr> <tr>
<th class="text-nowrap" scope="row">Nestable</th> <th class="text-nowrap" scope="row">Nestable</th>
@ -140,17 +143,18 @@ $grid-breakpoints: (
// Extra small screen / phone // Extra small screen / phone
xs: 0, xs: 0,
// Small screen / phone // Small screen / phone
sm: 34em, // 480px sm: 544px,
// Medium screen / tablet // Medium screen / tablet
md: 48em, // 768px md: 768px,
// Large screen / desktop // Large screen / desktop
lg: 62em, // 992px lg: 992px,
// Extra large screen / wide desktop // Extra large screen / wide desktop
xl: 75em // 1200px xl: 1200px
) !default; ) !default;
$grid-columns: 12; $grid-columns: 12;
$grid-gutter-width: 1.5rem; $grid-gutter-width: 1.875rem;
{% endhighlight %} {% endhighlight %}
### Mixins ### Mixins

16
scss/_variables.scss
View file

@ -90,13 +90,13 @@ $grid-breakpoints: (
// Extra small screen / phone // Extra small screen / phone
xs: 0, xs: 0,
// Small screen / phone // Small screen / phone
sm: 34em, sm: 544px,
// Medium screen / tablet // Medium screen / tablet
md: 48em, md: 768px,
// Large screen / desktop // Large screen / desktop
lg: 62em, lg: 992px,
// Extra large screen / wide desktop // Extra large screen / wide desktop
xl: 75em xl: 1200px
) !default; ) !default;
@ -105,10 +105,10 @@ $grid-breakpoints: (
// Define the maximum width of `.container` for different screen sizes. // Define the maximum width of `.container` for different screen sizes.
$container-max-widths: ( $container-max-widths: (
sm: 34rem, // 480 sm: 576px,
md: 45rem, // 720 md: 720px,
lg: 60rem, // 960 lg: 940px,
xl: 72.25rem // 1140 xl: 1140px
) !default; ) !default;

39
scss/bootstrap-grid.scss vendored
View file

@ -8,41 +8,46 @@
// Variables // Variables
// //
// Grid system
// Grid breakpoints
// //
// Define your custom responsive grid. // Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: ( $grid-breakpoints: (
// Extra small screen / phone // Extra small screen / phone
xs: 0, xs: 0,
// Small screen / phone // Small screen / phone
sm: 34em, sm: 544px,
// Medium screen / tablet // Medium screen / tablet
md: 48em, md: 768px,
// Large screen / desktop // Large screen / desktop
lg: 62em, lg: 992px,
// Extra large screen / wide desktop // Extra large screen / wide desktop
xl: 75em xl: 1200px
) !default; ) !default;
// Number of columns in the grid.
$grid-columns: 12 !default;
// Padding between columns. Gets divided in half for the left and right. // Grid containers
$grid-gutter-width: 1.5rem !default;
// Container sizes
// //
// Define the maximum width of `.container` for different screen sizes. // Define the maximum width of `.container` for different screen sizes.
$container-max-widths: ( $container-max-widths: (
sm: 34rem, // 480 sm: 576px,
md: 45rem, // 720 md: 720px,
lg: 60rem, // 960 lg: 940px,
xl: 72.25rem // 1140 xl: 1140px
) !default; ) !default;
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 1.875rem !default; // 30px
// //
// Grid mixins // Grid mixins
// //

14
scss/mixins/_breakpoints.scss
View file

@ -2,7 +2,7 @@
// //
// Breakpoints are defined as a map of (name: minimum width), order from small to large: // Breakpoints are defined as a map of (name: minimum width), order from small to large:
// //
// (xs: 0, sm: 34rem, md: 45rem) // (xs: 0, sm: 544px, md: 768px)
// //
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
@ -10,7 +10,7 @@
// //
// >> breakpoint-next(sm) // >> breakpoint-next(sm)
// md // md
// >> breakpoint-next(sm, $breakpoints: (xs: 0, sm: 34rem, md: 45rem)) // >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
// md // md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) // >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
// md // md
@ -21,8 +21,8 @@
// Minimum breakpoint width. Null for the smallest (first) breakpoint. // Minimum breakpoint width. Null for the smallest (first) breakpoint.
// //
// >> breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem)) // >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
// 34rem // 544px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name); $min: map-get($breakpoints, $name);
@return if($min != 0, $min, null); @return if($min != 0, $min, null);
@ -31,11 +31,11 @@
// Maximum breakpoint width. Null for the largest (last) breakpoint. // Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.1. // The maximum value is calculated as the minimum of the next one less 0.1.
// //
// >> breakpoint-max(sm, (xs: 0, sm: 34rem, md: 45rem)) // >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px))
// 44.9rem // 767px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints); $next: breakpoint-next($name, $breakpoints);
@return if($next, breakpoint-min($next, $breakpoints) - 0.1, null); @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
} }
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.