Ààyè

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

Bawo ni o ṣe n ṣiṣẹ

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.

Akọsilẹ

Awọn ohun elo aye aye ti o kan si gbogbo awọn aaye fifọ, lati xssi xl, 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, ati xl.

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
l- fun awọn kilasi ti o ṣeto margin-lefttabipadding-left
r- fun awọn kilasi ti o ṣeto margin-righttabipadding-right
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;
}

.ml-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). Bi ti 4.2, a ti ṣafikun awọn ohun elo ala odi fun gbogbo iwọn nomba odidi ti a ṣe akojọ loke ( fun apẹẹrẹ 1,,,,,,, 2) . Awọn ohun elo wọnyi jẹ apẹrẹ fun isọdi awọn gotters iwe akoj kọja awọn aaye fifọ.345

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

Eyi ni apẹẹrẹ ti isọdi akoj Bootstrap ni agbedemeji ( md) breakpoint ati loke. A ti pọ si .colpadding .px-md-5ati lẹhinna tako iyẹn pẹlu .mx-md-n5lori obi .row.

Aṣa ọwọn òwú

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>