Bylchu
Mae Bootstrap yn cynnwys ystod eang o ddosbarthiadau cyfleustodau ymyl ymatebol llaw-fer a phadin i addasu ymddangosiad elfen.
Sut mae'n gweithio
Neilltuo gwerthoedd ymatebol-gyfeillgar i elfen neu is-set o'i ochrau gyda dosbarthiadau llaw-fer margin
. padding
Yn cynnwys cefnogaeth ar gyfer eiddo unigol, pob eiddo, ac eiddo fertigol a llorweddol. Mae dosbarthiadau'n cael eu hadeiladu o fap Sass rhagosodedig yn amrywio .25rem
o 3rem
.
Nodiant
Nid oes gan gyfleustodau bylchu sy'n berthnasol i bob torbwynt, o xs
i xl
, dalfyriad torbwynt ynddynt. Mae hyn oherwydd bod y dosbarthiadau hynny'n cael eu cymhwyso o min-width: 0
ac i fyny, ac felly nid ydynt yn rhwym wrth ymholiad cyfryngau. Mae'r torbwyntiau sy'n weddill, fodd bynnag, yn cynnwys talfyriad torbwynt.
Enwir y dosbarthiadau gan ddefnyddio'r fformat {property}{sides}-{size}
ar gyfer xs
ac {property}{sides}-{breakpoint}-{size}
ar gyfer sm
, md
, lg
, a xl
.
Lle mae eiddo yn un o:
m
- ar gyfer dosbarthiadau sy'n gosodmargin
p
- ar gyfer dosbarthiadau sy'n gosodpadding
Lle mae ochrau yn un o:
t
- ar gyfer dosbarthiadau sy'n gosodmargin-top
neupadding-top
b
- ar gyfer dosbarthiadau sy'n gosodmargin-bottom
neupadding-bottom
l
- ar gyfer dosbarthiadau sy'n gosodmargin-left
neupadding-left
r
- ar gyfer dosbarthiadau sy'n gosodmargin-right
neupadding-right
x
- ar gyfer dosbarthiadau sy'n gosod y ddau*-left
a*-right
y
- ar gyfer dosbarthiadau sy'n gosod y ddau*-top
a*-bottom
- wag - ar gyfer dosbarthiadau sy'n gosod
margin
neupadding
ar bob un o 4 ochr yr elfen
Lle mae maint yn un o:
0
- ar gyfer dosbarthiadau sy'n dileu'rmargin
neupadding
drwy ei osod i0
1
- (yn ddiofyn) ar gyfer dosbarthiadau sy'n gosod ymargin
neupadding
i$spacer * .25
2
- (yn ddiofyn) ar gyfer dosbarthiadau sy'n gosod ymargin
neupadding
i$spacer * .5
3
- (yn ddiofyn) ar gyfer dosbarthiadau sy'n gosod ymargin
neupadding
i$spacer
4
- (yn ddiofyn) ar gyfer dosbarthiadau sy'n gosod ymargin
neupadding
i$spacer * 1.5
5
- (yn ddiofyn) ar gyfer dosbarthiadau sy'n gosod ymargin
neupadding
i$spacer * 3
auto
- ar gyfer dosbarthiadau sy'n gosod ymargin
i auto
(Gallwch ychwanegu mwy o feintiau trwy ychwanegu cofnodion at y $spacers
newidyn map Sass.)
Enghreifftiau
Dyma rai enghreifftiau cynrychioliadol o’r dosbarthiadau hyn:
.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;
}
Canoli llorweddol
Yn ogystal, mae Bootstrap hefyd yn cynnwys .mx-auto
dosbarth ar gyfer cynnwys lefel bloc lled sefydlog wedi'i ganoli'n llorweddol - hynny yw, cynnwys sydd â display: block
set width
- trwy osod yr ymylon llorweddol i auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Ymyl negyddol
Yn CSS, margin
gall eiddo ddefnyddio gwerthoedd negyddol ( padding
ni all). O 4.2 ymlaen, rydym wedi ychwanegu cyfleustodau ymyl negyddol ar gyfer pob maint cyfanrif heb fod yn sero a restrir uchod (ee, 1
, 2
, , 3
, 4
, 5
). Mae'r cyfleustodau hyn yn ddelfrydol ar gyfer addasu cwteri colofnau grid ar draws torbwyntiau.
Mae'r gystrawen bron yr un fath â'r cyfleustodau ymyl cadarnhaol diofyn, ond gydag ychwanegiad n
cyn y maint y gofynnwyd amdano. Dyma ddosbarth enghreifftiol sy'n groes i .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Dyma enghraifft o addasu'r grid Bootstrap yn y torbwynt cyfrwng ( md
) ac uwch. Rydyn ni wedi cynyddu'r .col
padin .px-md-5
ac yna wedi gwrthweithio hynny gyda'r .mx-md-n5
rhiant .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>