Տարածություն
Bootstrap-ը ներառում է սղագրության արձագանքող լուսանցքի, լիցքավորման և բացերի օգտակար դասերի լայն շրջանակ՝ տարրի տեսքը փոփոխելու համար:
Լուսանցք և լիցք
Սղագրության դասերով տարրին կամ նրա կողմերի ենթաբազմությանը վերագրեք արձագանքող margin
կամ արժեքներ: padding
Ներառում է անհատական հատկությունների, բոլոր հատկությունների և ուղղահայաց և հորիզոնական հատկությունների աջակցություն: Դասերը կառուցված են լռելյայն Sass քարտեզից՝ սկսած .25rem
մինչև 3rem
.
Օգտագործո՞ւմ եք CSS Grid դասավորության մոդուլը: Մտածեք օգտագործել gap կոմունալ ծրագիրը :
Նշում
Spacing կոմունալ ծառայությունները, որոնք կիրառվում են բոլոր ընդհատումների համար, սկսած xs
մինչև xxl
, չունեն ընդմիջման կետի հապավում: Դա պայմանավորված է նրանով, որ այդ դասերը կիրառվում են սկսած min-width: 0
և վերև, և, հետևաբար, կապված չեն մեդիա հարցումով: Մնացած ընդմիջման կետերը, այնուամենայնիվ, ներառում են ընդմիջման կետի հապավումը:
Դասերը անվանվում են՝ օգտագործելով ձևաչափը և {property}{sides}-{size}
համար , , , և :xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
Որտեղ գույքը մեկն է.
m
- դասերի համար, որոնք սահմանված ենmargin
p
- դասերի համար, որոնք սահմանված ենpadding
Որտեղ կողմերից մեկն է.
t
- դասերի համար, որոնք սահմանում ենmargin-top
կամpadding-top
b
- դասերի համար, որոնք սահմանում ենmargin-bottom
կամpadding-bottom
s
- (սկիզբ) դասերի համար, որոնք սահմանված ենmargin-left
կամpadding-left
LTR-ումmargin-right
կամpadding-right
RTL-ումe
- (վերջ) դասերի համար, որոնք սահմանված ենmargin-right
կամpadding-right
LTR-ումmargin-left
կամpadding-left
RTL-ում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;
}
.ms-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
կարող): Այս բացասական լուսանցքները լռելյայն անջատված են , բայց կարող են միացվել Sass-ում` կարգավորելով $enable-negative-margins: true
:
Շարահյուսությունը գրեթե նույնն է, ինչ լռելյայն, դրական լուսանցքի կոմունալ ծրագրերը, բայց n
նախքան պահանջվող չափի ավելացումով: Ահա մի դասի օրինակ, որը հակառակն է .mt-1
.
.mt-n1 {
margin-top: -0.25rem !important;
}
Բացը
Օգտագործելիս display: grid
կարող եք օգտվել gap
մայր ցանցի կոնտեյների կոմունալ ծառայություններից: Սա կարող է խնայել առանձին ցանցի տարրերին մարգինալ ծառայություններ ավելացնելու անհրաժեշտությունը ( display: grid
տարայի երեխաներ): Gap կոմունալ ծառայությունները լռելյայնորեն արձագանքում են և ստեղծվում են մեր Utilities API-ի միջոցով՝ հիմնված $spacers
Sass քարտեզի վրա:
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Աջակցությունը ներառում է արձագանքող ընտրանքներ Bootstrap-ի բոլոր ցանցի բեկման կետերի համար, ինչպես նաև $spacers
քարտեզի վեց չափսերի համար ( 0
– 5
): Չկա .gap-auto
օգտակար դաս, քանի որ այն արդյունավետորեն նույնն է, ինչ .gap-0
.
Սաս
Քարտեզներ
Spacing կոմունալ ծառայությունները հայտարարագրվում են Sass քարտեզի միջոցով և այնուհետև ստեղծվում մեր կոմունալ ծառայությունների API-ի միջոցով:
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
Utilities API
Spacing կոմունալ ծառայությունները հայտարարված են մեր Utilities API-ում scss/_utilities.scss
: Իմացեք, թե ինչպես օգտագործել կոմունալ ծառայությունների API-ը:
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),