Аралар
Bootstrap элементның тышкы кыяфәтен үзгәртү өчен стенограмманың җаваплы маржасын, паддингын һәм бушлык ярдәм классларын үз эченә ала.
Маргин һәм паддинг
Элементка яисә аның як өлешенә стенограмма класслары белән җаваплы дуслык margin
яки кыйммәтләр билгеләгез. padding
Аерым үзлекләр, барлык үзлекләр, вертикаль һәм горизонталь үзлекләр өчен ярдәм керә. Дәресләр Sass картасыннан алып .25rem
үзгәртелә 3rem
.
CSS челтәр макеты куллану? Бушлыкны кулланырга уйлагыз .
Искәрмә
xs
Барлык өзек нокталарына кагыла торган аралар xxl
, аларда бернинди кыскарту юк. Чөнки ул класслар өстән- min-width: 0
өстән кулланыла, һәм шулай итеп медиа соравы белән бәйләнешле түгел. Калган өзекләр, ләкин кыскартуны үз эченә ала.
Класслар ,,,, һәм {property}{sides}-{size}
өчен формат ярдәмендә атала . _xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
Кайда милек :
m
- куелган класслар өченmargin
p
- куелган класслар өченpadding
Кайда якларның берсе:
t
- куйган класслар өченmargin-top
якиpadding-top
b
- куйган класслар өченmargin-bottom
якиpadding-bottom
s
margin-left
- (башлау) якиpadding-left
LTR,margin-right
якиpadding-right
RTL класслары өченe
- (ахыр) LTRmargin-right
яки RTL класслары өченpadding-right
margin-left
padding-left
x
*-left
- икесен дә куйган класслар өчен*-right
y
*-top
- икесен дә куйган класслар өчен*-bottom
- буш - элементның 4 ягына куелган класслар
margin
өченpadding
Кайда зурлык :
0
- бетерүчеmargin
якиpadding
аны урнаштырган класслар өчен0
1
margin
- (килешү буенча) яки куйган классларpadding
өчен$spacer * .25
2
margin
- (килешү буенча) яки куйган классларpadding
өчен$spacer * .5
3
margin
- (килешү буенча) яки куйган классларpadding
өчен$spacer
4
margin
- (килешү буенча) яки куйган классларpadding
өчен$spacer * 1.5
5
margin
- (килешү буенча) яки куйган классларpadding
өчен$spacer * 3
auto
margin
- автомобильне куйган класслар өчен
$spacers
(Сез Sass картасы үзгәрүенә язулар өстәп күбрәк зурлыклар өсти аласыз .)
Мисаллар
Менә бу классларның кайбер вәкиллекле мисаллары:
.mt-0 {
margin-top: 0 !important;
}
.ms-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Горизонталь үзәкләштерү
Өстәвенә, Bootstrap шулай ук .mx-auto
горизонталь үзәкләштерелгән тотрыклы киңлек блок дәрәҗәсенең классын үз эченә ала, ягъни горизонталь кырларны display: block
куеп .width
auto
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Тискәре маржа
CSS-та margin
үзлекләр тискәре кыйммәтләрне куллана ала ( padding
булдыра алмый). Бу тискәре кырлар килешү буенча сүндерелгән , ләкин Sass'та көйләү ярдәмендә кушылырга мөмкин $enable-negative-margins: true
.
Синтаксис демократик, уңай маржа коммуналь хезмәтләре белән диярлек охшаш, ләкин n
соралган зурлыкка кадәр кушылу белән. Менә киресенчә үрнәк класс .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Гап
Кулланганда display: grid
, сез gap
челтәр челтәрендәге контейнерда куллана аласыз. Бу аерым челтәр әйберләренә ( display: grid
контейнер балалары) маржа коммуналь хезмәтләрен өстәргә туры килә. $spacers
Gap коммуналь хезмәтләре килешү буенча җаваплы, һәм Sass картасы нигезендә безнең коммуналь API аша ясала .
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Ярдәм Bootstrap челтәренең барлык нокталары өчен җаваплы вариантларны, шулай ук $spacers
картадан алты зурлыкны ( 0
- 5
) үз эченә ала. .gap-auto
Коммуналь класс юк , чөнки ул эффектив кебек .gap-0
.
Сасс
Карталар
Аралар ярдәме Sass картасы аша игълан ителә, аннары безнең коммуналь API белән ясала.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
Коммуналь API
Аралык коммуналь хезмәтләре безнең коммуналь APIда игълан ителә scss/_utilities.scss
. Коммуналь API кулланырга өйрәнегез.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),