Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Ààyè

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

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 ( 05). 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
    ),