<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <hr class="my-2">
+ <hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
- <div class="media mt-2">
+ <div class="media mt-3">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<h4 class="media-heading">Media heading</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
<!-- Nested media object -->
- <div class="media mt-2">
+ <div class="media mt-3">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<!-- Nested media object -->
- <div class="media mt-2">
+ <div class="media mt-3">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</div>
</div>
<!-- Nested media object -->
- <div class="media mt-2">
+ <div class="media mt-3">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</div>
</div>
</li>
- <li class="media mt-2">
+ <li class="media mt-3">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
group: utilities
---
-Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
+Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `.25rem` to `3rem`.
-The classes are named using the format: `{property}{sides}-{size}`
+## Notation
+
+Spacing utilities that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`.
Where *property* is one of:
Where *size* is one of:
* `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
-* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
-* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
-* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
+* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .25` or `$spacer-y * .25`
+* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .5` or `$spacer-y * .5`
+* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
+* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
+* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
+## Examples
+
Here are some representative examples of these classes:
{% highlight scss %}
}
.ml-1 {
- margin-left: $spacer-x !important;
+ margin-left: ($spacer-x * .25) !important;
}
.px-2 {
- padding-left: ($spacer-x * 1.5) !important;
- padding-right: ($spacer-x * 1.5) !important;
+ padding-left: ($spacer-x * .5) !important;
+ padding-right: ($spacer-x * .5) !important;
}
.p-3 {
- padding: ($spacer-y * 3) ($spacer-x * 3) !important;
+ padding: $spacer-y $spacer-x !important;
}
{% endhighlight %}
y: 0
),
1: (
+ x: ($spacer-x * .25),
+ y: ($spacer-y * .25)
+ ),
+ 2: (
+ x: ($spacer-x * .5),
+ y: ($spacer-y * .5)
+ ),
+ 3: (
x: $spacer-x,
y: $spacer-y
),
- 2: (
+ 4: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
- 3: (
+ 5: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
margin-left: auto !important;
}
-@each $prop, $abbrev in (margin: m, padding: p) {
- @each $size, $lengths in $spacers {
- $length-x: map-get($lengths, x);
- $length-y: map-get($lengths, y);
-
- .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
- .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
- .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
- .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
- .#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; }
-
- // Axes
- .#{$abbrev}x-#{$size} {
- #{$prop}-right: $length-x !important;
- #{$prop}-left: $length-x !important;
- }
- .#{$abbrev}y-#{$size} {
- #{$prop}-top: $length-y !important;
- #{$prop}-bottom: $length-y !important;
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @each $prop, $abbrev in (margin: m, padding: p) {
+ @each $size, $lengths in $spacers {
+ $length-x: map-get($lengths, x);
+ $length-y: map-get($lengths, y);
+
+ @include media-breakpoint-up($breakpoint) {
+ $min: breakpoint-min($breakpoint, $grid-breakpoints);
+
+ @if $min {
+ // everything else
+ @media (min-width: $min) {
+ .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
+ .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; }
+ .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; }
+ .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; }
+ .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; }
+ .#{$abbrev}x-#{$breakpoint}-#{$size} {
+ #{$prop}-right: $length-x !important;
+ #{$prop}-left: $length-x !important;
+ }
+ .#{$abbrev}y-#{$breakpoint}-#{$size} {
+ #{$prop}-top: $length-y !important;
+ #{$prop}-bottom: $length-y !important;
+ }
+ }
+ } @else {
+ // xs
+ .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
+ .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
+ .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
+ .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
+ .#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; }
+ .#{$abbrev}x-#{$size} {
+ #{$prop}-right: $length-x !important;
+ #{$prop}-left: $length-x !important;
+ }
+ .#{$abbrev}y-#{$size} {
+ #{$prop}-top: $length-y !important;
+ #{$prop}-bottom: $length-y !important;
+ }
+ }
+
+ }
}
}
}
projects / thirdparty / bootstrap.git / commitdiff
