Аралық

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

Бұл қалай жұмыс істейді

Стенографиялық сыныптары бар элементке немесе оның жақтарының ішкі жиынына жауап беретін қолайлы marginнемесе мәндерді тағайындаңыз. paddingЖеке сипаттарды, барлық сипаттарды және тік және көлденең сипаттарды қолдауды қамтиды. Сыныптар әдепкі Sass картасынан бастап жасалады .25rem.3rem

Белгілеу

xs-дан бастап барлық тоқтау нүктелеріне қолданылатын аралық утилиталарда xlтоқтау нүктесінің аббревиатурасы жоқ. Себебі бұл сыныптар бастап min-width: 0және одан жоғары қолданылады және осылайша медиа сұрауымен байланысты емес. Дегенмен, қалған тоқтау нүктелері тоқтау нүктесінің аббревиатурасын қамтиды.

Сыныптар , , , және {property}{sides}-{size}үшін xsжәне {property}{sides}-{breakpoint}-{size}үшін пішімі арқылы аталды .smmdlgxl

Бұл жерде мүлік мыналардың бірі болып табылады:

m- белгіленген сыныптар үшінmargin
p- белгіленген сыныптар үшінpadding

Мұндағы жақтардың бірі:

t- белгіленген сыныптар үшін margin-topнемесеpadding-top
b- белгіленген сыныптар үшін margin-bottomнемесеpadding-bottom
l- белгіленген сыныптар үшін margin-leftнемесеpadding-left
r- белгіленген сыныптар үшін margin-rightнемесеpadding-right
x*-left- екеуін де орнататын сыныптар үшін*-right
y*-top- екеуін де орнататын сыныптар үшін*-bottom
бос – элементтің барлық 4 жағында a marginнемесе орнататын сыныптар үшінpadding

Мұндағы өлшемдердің бірі:

0margin- жою немесе paddingоны орнату арқылы сыныптар үшін0
1margin- (әдепкі бойынша) немесе параметрін орнатқан сыныптар paddingүшін$spacer * .25
2margin- (әдепкі бойынша) немесе параметрін орнатқан сыныптар paddingүшін$spacer * .5
3margin- (әдепкі бойынша) немесе параметрін орнатқан сыныптар paddingүшін$spacer
4margin- (әдепкі бойынша) немесе параметрін орнатқан сыныптар paddingүшін$spacer * 1.5
5margin- (әдепкі бойынша) немесе параметрін орнатқан сыныптар paddingүшін$spacer * 3
automargin- автоматты күйге орнатқан сыныптар үшін

$spacers( Sass картасының айнымалы мәніне жазбаларды қосу арқылы қосымша өлшемдерді қосуға болады .)

Мысалдар

Міне, осы сыныптардың кейбір өкілдік мысалдары:

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

Көлденең орталықтандыру

Сонымен қатар, Bootstrap сонымен қатар көлденең жиектерді орнату арқылы .mx-autoбекітілген ен блок деңгейіндегі мазмұнды (яғни бар мазмұнды display: blockжәне жиынды) көлденең орталықтандыруға арналған сыныпты қамтиды .widthauto

Орталықтандырылған элемент

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

Теріс маржа

CSS-те marginсипаттар теріс мәндерді пайдалана алады ( paddingмүмкін емес). 4.2-ден бастап біз жоғарыда тізімделген әрбір нөлден басқа бүтін өлшемдер үшін теріс маржа утилиталарын қостық (мысалы, 1, 2, 3, 4, 5). Бұл утилиталар тоқтау нүктелері бойынша тор бағандарының ағындарын теңшеу үшін өте қолайлы.

Синтаксис әдепкі, оң маржа утилиталарымен бірдей дерлік, бірақ nсұралған өлшемге дейін қосу арқылы. Мұнда қарама-қарсы сыныптың мысалы келтірілген .mt-1:

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

Мұнда Bootstrap торын орташа ( md) тоқтау нүктесінде және одан жоғарыда теңшеудің мысалы берілген. Біз .colтолтырғышты ұлғайттық, .px-md-5содан кейін .mx-md-n5ата-анамен оған қарсы әрекет жасадық .row.

Арнайы баған толтыру

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