Аралыгы

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

Бул бетте

Маржа жана толтуруу

Стенография класстары менен элементке же анын тараптарынын бир бөлүгүнө жооп берүүчү marginже баалуулуктарды дайындаңыз . paddingЖеке касиеттерге, бардык касиеттерге жана вертикалдык жана горизонталдык касиеттерге колдоону камтыйт. Класстар демейки Sass картасынан .25remтүзүлөт 3rem.

CSS Grid жайгашуу модулун колдонуп жатасызбы? Анын ордуна боштук программасын колдонууну карап көрүңүз .

Белгилөө

Бардык үзүлүү чекиттерине тиешелүү болгон мейкиндик утилиталарында үзүлүү 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
s- (старт) коюлган класстар үчүн margin-leftже padding-leftLTRде, margin-rightже padding-rightRTLде
e- (аягы) белгиленген класстар үчүн margin-rightже padding-rightLTRде, margin-leftже padding-leftRTLде
x*-left- жана экөөнү тең койгон класстар үчүн*-right
y*-top- жана экөөнү тең койгон класстар үчүн*-bottom
blank - элементтин бардык 4 тарабында a 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
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жана 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;
}

Gap

Колдонуу учурунда , сиз ата-эне тор контейнериндеги утилиталарды display: gridколдоно аласыз . Бул жеке тор элементтерине ( контейнердин gapбалдары) маржа утилиталарын кошуудан үнөмдөөгө болот . display: gridGap утилиталары демейки боюнча жооп берет жана $spacersSass картасынын негизинде биздин API API аркылуу түзүлөт.

Тордун 1-пункту

Тор 2-пункту

Тор 3-пункту

html

<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

Карталар

Spacing утилиталары Sass картасы аркылуу жарыяланып, андан кийин API утилиталарыбыз менен түзүлөт.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Utilities API

Spacing утилиталары биздин 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
    ),