Аралық

Bootstrap элементтің көрінісін өзгерту үшін стенографиялық жауап беретін маржаның, толтырудың және бос орынның қызметтік сыныптарының кең ауқымын қамтиды.

Бұл бетте

Маржа және толтыру

Стенографиялық сыныптары бар элементке немесе оның жақтарының ішкі жиынына жауап беретін қолайлы marginнемесе мәндерді тағайындаңыз. paddingЖеке сипаттарды, барлық сипаттарды және тік және көлденең сипаттарды қолдауды қамтиды. Сыныптар әдепкі Sass картасынан бастап жасалады .25rem.3rem

CSS Grid орналасу модулін пайдалану керек пе? Gap утилитасын пайдалануды қарастырыңыз .

Белгілеу

xs-дан бастап барлық тоқтау нүктелеріне қолданылатын аралық утилиталарда xxlтоқтау нүктесінің аббревиатурасы жоқ. Себебі бұл сыныптар бастап min-width: 0және одан жоғары қолданылады және осылайша медиа сұрауымен байланысты емес. Дегенмен, қалған тоқтау нүктелері тоқтау нүктесінің аббревиатурасын қамтиды.

Сыныптар , , , және {property}{sides}-{size}үшін xsжәне {property}{sides}-{breakpoint}-{size}үшін пішімі арқылы аталады .smmdlgxlxxl

Бұл жерде мүлік мыналардың бірі болып табылады:

m- белгіленген сыныптар үшінmargin
p- белгіленген сыныптар үшінpadding

Мұндағы жақтардың бірі:

t- белгіленген сыныптар үшін margin-topнемесеpadding-top
b- белгіленген сыныптар үшін margin-bottomнемесеpadding-bottom
smargin-left- (бастау) немесе padding-leftLTR-де margin-rightнемесе padding-rightRTL - де орнатылған сыныптар үшін
e- (соңы) LTR немесе RTL- margin-rightде орнатылған сыныптар үшінpadding-rightmargin-leftpadding-left
x*-left- екеуін де орнататын сыныптар үшін*-right
y*-top- екеуін де орнататын сыныптар үшін*-bottom
бос – элементтің барлық 4 жағында a marginнемесе орнататын сыныптар үшінpadding

Мұндағы өлшемдердің бірі:

0margin- жою немесе paddingоны орнату арқылы сыныптар үшін0
1margin- (әдепкі бойынша) немесе параметрін орнатқан сыныптар paddingүшін$spacer * .25
2margin- (әдепкі бойынша) немесе параметрін орнатқан сыныптар paddingүшін$spacer * .5
3margin- (әдепкі бойынша) немесе параметрін орнатқан сыныптар paddingүшін$spacer
4margin- (әдепкі бойынша) немесе параметрін орнатқан сыныптар paddingүшін$spacer * 1.5
5margin- (әдепкі бойынша) немесе параметрін орнатқан сыныптар paddingүшін$spacer * 3
automargin- автоматты күйге орнатқан сыныптар үшін

$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және жиынды) көлденең орталықтандыруға арналған сыныпты қамтиды .widthauto

Орталықтандырылған элемент

<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балалары) маржа утилиталарын қосу қажеттілігін үнемдей алады . Gap утилиталары әдепкі бойынша жауап береді және Sass картасына display: gridнегізделген API утилиталары арқылы жасалады .$spacers

1-тор элементі

2-тор элементі

3-тор элементі

<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

Аралық утилиталар біздің 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
    ),