Аралық

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

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

Белгілеу

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

<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,
);

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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),