Aralyk
“Bootstrap” elementiň daşky görnüşini üýtgetmek üçin stenografiki täsirli margin we padding peýdaly synplaryň giň toplumyny öz içine alýar.
Bu nähili işleýär
Haýsydyr bir elemente ýa-da onuň taraplarynyň bir bölegini stenografiýa sapaklary bilen jogap margin
beriň padding
. Aýry-aýry häsiýetleri, ähli häsiýetleri we dik we kesel häsiýetleri goldaýar. Sapaklar adaty Sass kartasyndan başlap üýtgeýär .25rem
.3rem
Bellik
Fromhli arakesmelere degişli aralyk hyzmatlary xs
, xl
olarda aralyk gysgaltmasy ýok. Sebäbi bu sapaklar min-width: 0
ýokary we ýokary derejede ulanylýar we şeýlelik bilen media soragy bilen baglanyşykly däl. Galan bölekler bolsa, nokat gysgaltmasyny öz içine alýar.
Sapaklar ,,,,,,,,,,,,,,,,,,,,,,,,,,, {property}{sides}-{size}
_ xs
_ {property}{sides}-{breakpoint}-{size}
_ sm
_ md
_ lg
_xl
Gozgalmaýan emläk :
m
- düzülen sapaklar üçinmargin
p
- düzülen sapaklar üçinpadding
Taraplaryň biri :
t
- düzýän sapaklar üçinmargin-top
ýa-dapadding-top
b
- düzýän sapaklar üçinmargin-bottom
ýa-dapadding-bottom
l
- düzýän sapaklar üçinmargin-left
ýa-dapadding-left
r
- düzýän sapaklar üçinmargin-right
ýa-dapadding-right
x
- ikisini hem kesgitleýän sapaklar üçin*-left
we*-right
y
- ikisini hem kesgitleýän sapaklar üçin*-top
we*-bottom
- boş - elementiň 4 tarapyny ýa-
margin
da hemme tarapyny düzýän sapaklar üçinpadding
Ululygy nirede :
0
- ýok edýänmargin
ýa-dapadding
ony düzýän sapaklar üçin0
1
margin
- (tertip boýunça) ýa-da düzýän synplarpadding
üçin$spacer * .25
2
margin
- (tertip boýunça) ýa-da düzýän synplarpadding
üçin$spacer * .5
3
margin
- (tertip boýunça) ýa-da düzýän synplarpadding
üçin$spacer
4
margin
- (tertip boýunça) ýa-da düzýän synplarpadding
üçin$spacer * 1.5
5
margin
- (tertip boýunça) ýa-da düzýän synplarpadding
üçin$spacer * 3
auto
margin
- awtomatik sazlaýan sapaklar üçin
$spacers
( Sass kartasynyň üýtgeýjisine ýazgylar goşup has köp ululyk goşup bilersiňiz .)
Mysallar
Ine, bu synplaryň käbir wekilçilikli mysallary:
.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;
}
Gorizontal merkezleşdirme
Mundan başga-da, “Bootstrap ” keseligine çäkleri kesgitlemek arkaly .mx-auto
keseligine merkezleşdirilen kesgitli giňlikdäki blok derejesindäki mazmuny, ýagny mazmuny display: block
we width
toplumyny öz içine alýar auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Ativearamaz margin
CSS-de margin
häsiýetler otrisatel bahalary ulanyp biler ( padding
edip bilmeýär). 4.2 - e görä 1
, ýokarda sanalan her nol däl bitewi ululyk üçin negatiw margin kömeklerini goşduk (meselem ,,,, ) . Bu kömekçi enjamlar, gözenek sütünleriniň böleklerini kesmek üçin amatlydyr.2
3
4
5
Sintaksis, deslapky, polo positiveitel margin kömekleri bilen deňdir, ýöne n
talap edilýän ululykdan öň goşulmagy bilen. Ine, munuň tersi bolan mysal synpy .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
md
Ine, orta ( ) aralyk nokadynda we ýokarda Bootstrap toruny sazlamagyň mysaly . .col
Padding bilen köpeltdik, soň bolsa ene-atanyň .px-md-5
garşysyna çykdyk ..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>