Фосила

Bootstrap дорои доираи васеи маржаи стенографияи ҷавобӣ, пуркунӣ ва синфҳои утилитаҳо барои тағир додани намуди элемент мебошад.

Дар ин саҳифа

Маржа ва пуркунӣ

marginБа унсур ё paddingзермаҷмӯи паҳлӯҳои он бо синфҳои стенограммавӣ арзишҳои мувофиқ таъин кунед . Дастгирии хосиятҳои инфиродӣ, ҳама хосиятҳо ва амудӣ ва уфуқиро дар бар мегирад. Синфҳо аз харитаи пешфарзии Sass сохта шудаанд, ки .25remаз 3rem.

Истифодаи модули тарҳбандии CSS Grid? Истифодаи утилитаи гапро баррасӣ кунед .

Нота

Утилитҳои фосилавӣ, ки ба ҳама нуқтаҳои қатъшавӣ, аз 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- (оғоз) барои синфҳое, ки дар LTR margin-leftё дар RTL муқаррар шудаандpadding-leftmargin-rightpadding-right
e- (охир) барои синфҳое, ки дар LTR margin-rightё дар RTL муқаррар шудаандpadding-rightmargin-leftpadding-left
x- барои синфҳое, ки ҳарду *-leftва*-right
y- барои синфҳое, ки ҳарду *-topва*-bottom
холӣ - барои синфҳое, ки 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ба худкор муқаррар кардаанд

(Шумо метавонед бо илова кардани сабтҳо ба $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 ба таври нобаёнӣ ҷавобгӯ мебошанд ва тавассути API утилитаҳои мо дар асоси $spacersхаритаи Sass тавлид мешаванд.

Элемент 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);

API Utilities

Утилитҳои фосилавӣ дар 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
    ),