Аралық

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>