Տարածություն
Bootstrap-ը ներառում է սղագրության արձագանքող լուսանցքի և լիցքավորման օգտակար դասերի լայն շրջանակ՝ տարրի տեսքը փոփոխելու համար:
Ինչպես է դա աշխատում
Սղագրության դասերով տարրին կամ նրա կողմերի ենթաբազմությանը վերագրեք արձագանքող margin
կամ արժեքներ: padding
Ներառում է անհատական հատկությունների, բոլոր հատկությունների և ուղղահայաց և հորիզոնական հատկությունների աջակցություն: Դասերը կառուցված են լռելյայն Sass քարտեզից՝ սկսած .25rem
մինչև 3rem
.
Նշում
Spacing կոմունալ ծառայությունները, որոնք կիրառվում են բոլոր ընդհատումների համար, սկսած xs
մինչև xl
, չունեն ընդմիջման կետի հապավում: Դա պայմանավորված է նրանով, որ այդ դասերը կիրառվում են սկսած min-width: 0
և վերև, և, հետևաբար, կապված չեն մեդիա հարցումով: Մնացած ընդմիջման կետերը, այնուամենայնիվ, ներառում են ընդմիջման կետի հապավումը:
Դասերը անվանվում են՝ օգտագործելով ձևաչափը և համար {property}{sides}-{size}
, , , և :xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
Որտեղ գույքը մեկն է.
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
- դատարկ - դասերի համար, որոնք սահմանում են տարրի a
margin
կամpadding
բոլոր 4 կողմերում
Որտեղ չափը մեկն է.
0
- դասերի համար, որոնք վերացնում ենmargin
կամpadding
սահմանելով այն0
1
- (ըստ լռելյայն) դասերի համար, որոնք սահմանում ենmargin
կամpadding
$spacer * .25
2
- (ըստ լռելյայն) դասերի համար, որոնք սահմանում ենmargin
կամpadding
$spacer * .5
3
- (ըստ լռելյայն) դասերի համար, որոնք սահմանում ենmargin
կամpadding
$spacer
4
- (ըստ լռելյայն) դասերի համար, որոնք սահմանում ենmargin
կամpadding
$spacer * 1.5
5
- (ըստ լռելյայն) դասերի համար, որոնք սահմանում ենmargin
կամpadding
$spacer * 3
auto
- դասերի համար, որոնք սահմանելmargin
են ավտոմատ
(Դուք կարող եք ավելացնել ավելի շատ չափեր՝ ավելացնելով գրառումներ $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
և մի width
շարք՝ հորիզոնական լուսանցքները դնելով auto
.
<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>