Ààyè

Bootstrap pẹlu titobi pupọ ti ala idahun shorthand, padding, ati awọn kilasi IwUlO aafo lati yipada irisi eroja kan.

Lori iwe yi

Ala ati òwú

Fi ore- ifojusi margintabi paddingawọn iye si ipin tabi ipin ti awọn ẹgbẹ rẹ pẹlu awọn kilasi kukuru. Pẹlu atilẹyin fun awọn ohun-ini ẹni kọọkan, gbogbo awọn ohun-ini, ati awọn ohun-ini inaro ati petele. Awọn kilasi jẹ itumọ lati maapu Sass aiyipada ti o wa .25remlati 3rem.

Lilo CSS Akoj module akọkọ bi? Gbero lilo ohun elo aafo dipo.

Akọsilẹ

Awọn ohun elo aye aye ti o kan si gbogbo awọn aaye fifọ, lati xssi xxl, ko ni abbreviation breakpoint ninu wọn. Eyi jẹ nitori awọn kilasi wọnyẹn lo lati min-width: 0ati si oke, ati nitorinaa ko ṣe adehun nipasẹ ibeere media kan. Awọn aaye isinmi ti o ku, sibẹsibẹ, pẹlu abbreviation kan breakpoint.

Awọn kilasi naa jẹ orukọ ni lilo ọna kika {property}{sides}-{size}fun xsati {property}{sides}-{breakpoint}-{size}fun sm, md, lg, xl, ati xxl.

Nibo ohun-ini jẹ ọkan ninu:

m- fun awọn kilasi ti o ṣetomargin
p- fun awọn kilasi ti o ṣetopadding

Nibo ni awọn ẹgbẹ jẹ ọkan ninu:

t- fun awọn kilasi ti o ṣeto margin-toptabipadding-top
b- fun awọn kilasi ti o ṣeto margin-bottomtabipadding-bottom
s- (bẹrẹ) fun awọn kilasi ti o ṣeto margin-lefttabi padding-leftni LTR, margin-righttabi padding-rightni RTL
e- (opin) fun awọn kilasi ti o ṣeto margin-righttabi padding-rightni LTR, margin-lefttabi padding-leftni RTL
x- fun awọn kilasi ti o ṣeto awọn mejeeji *-leftati*-right
y- fun awọn kilasi ti o ṣeto awọn mejeeji *-topati*-bottom
òfo - fun awọn kilasi ti o ṣeto a margintabi paddinglori gbogbo 4 mejeji ti awọn ano

Nibo ni iwọn jẹ ọkan ninu:

0- fun awọn kilasi ti o yọkuro margintabi paddingnipa eto si0
1- (nipa aiyipada) fun awọn kilasi ti o ṣeto margintabi paddingsi$spacer * .25
2- (nipa aiyipada) fun awọn kilasi ti o ṣeto margintabi paddingsi$spacer * .5
3- (nipa aiyipada) fun awọn kilasi ti o ṣeto margintabi paddingsi$spacer
4- (nipa aiyipada) fun awọn kilasi ti o ṣeto margintabi paddingsi$spacer * 1.5
5- (nipa aiyipada) fun awọn kilasi ti o ṣeto margintabi paddingsi$spacer * 3
auto- fun awọn kilasi ti o ṣeto marginsi adaṣe

(O le ṣafikun awọn iwọn diẹ sii nipa fifi awọn titẹ sii si $spacersoniyipada maapu Sass.)

Awọn apẹẹrẹ

Eyi ni diẹ ninu awọn apẹẹrẹ aṣoju ti awọn kilasi wọnyi:

.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;
}

Petele aarin

Ni afikun, Bootstrap tun pẹlu .mx-autokilaasi kan fun didimule aarin-iwọn dina akoonu ipele ipele—iyẹn ni, akoonu ti o ni display: blockati widthṣeto kan—nipa tito awọn ala petele si auto.

Ano aarin

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Ala odi

Ni CSS, marginawọn ohun-ini le lo awọn iye odi ( paddingko le). Awọn ala odi wọnyi jẹ alaabo nipasẹ aiyipada , ṣugbọn o le muu ṣiṣẹ ni Sass nipa tito $enable-negative-margins: true.

Sintasi naa fẹrẹ jẹ kanna bi aiyipada, awọn ohun elo ala-ilẹ rere, ṣugbọn pẹlu afikun nṣaaju iwọn ti o beere. Eyi ni kilasi apẹẹrẹ ti o jẹ idakeji .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Aafo

Nigbati o ba nlo display: grid, o le lo awọn gapohun elo lori apoti akoj obi. Eyi le fipamọ sori nini lati ṣafikun awọn ohun elo ala si awọn ohun akoj kọọkan (awọn ọmọ ti display: grideiyan). Awọn ohun elo aafo jẹ idahun nipasẹ aiyipada, ati pe o jẹ ipilẹṣẹ nipasẹ API awọn ohun elo wa, da lori $spacersmaapu Sass.

Ohun elo grid 1

Akoj nkan 2

Ohun elo grid 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>

Atilẹyin pẹlu awọn aṣayan idahun fun gbogbo awọn aaye fifọ akoj Bootstrap, bakanna bi awọn iwọn mẹfa lati $spacersmaapu ( 0– 5). Ko si .gap-autokilasi ohun elo bi o ṣe jẹ imunadoko bi .gap-0.

Sass

Awọn maapu

Awọn ohun elo ayeraye jẹ ikede nipasẹ maapu Sass ati lẹhinna ṣe ipilẹṣẹ pẹlu API awọn ohun elo wa.

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

API Awọn ohun elo

Awọn ohun elo aye ni a kede ni API awọn ohun elo wa ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

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