Проред
Bootstrap вклучува широк опсег на класи на маргина, пополнување и празнини кои одговараат на стенографија за да го модифицираат изгледот на елементот.
Маргина и баласт
Доделете респонзивни margin
или padding
вредности на елемент или подмножество од неговите страни со класи на стенографии. Вклучува поддршка за поединечни својства, сите својства и вертикални и хоризонтални својства. Класите се изградени од стандардна Sass мапа која се движи од .25rem
до 3rem
.
Го користите модулот за распоред на CSS Grid? Размислете за користење на алатката gap .
Нотација
Услужните програми за проред што важат за сите точки на прекин, од 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
во RTLe
- (крај) за класи што се поставуваатmargin-right
илиpadding-right
во LTR,margin-left
илиpadding-left
во RTLx
- за часови кои поставуваат и*-left
и*-right
y
- за часови кои поставуваат и*-top
и*-bottom
- празно - за класи кои поставуваат a
margin
илиpadding
на сите 4 страни на елементот
Каде што големината е една од:
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
auto
(Можете да додадете повеќе големини со додавање записи во $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
контејнер). Gap utilities стандардно реагираат и се генерираат преку нашите Utilities API, базирани на $spacers
картата Sass.
<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);
Utilities API
Услужните програми за проред се декларирани во нашите Utilities API во scss/_utilities.scss
. Научете како да ги користите Utilities 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
),