ინტერვალი
Bootstrap მოიცავს სტენოგრამაზე პასუხისმგებელი მარჟის, padding და gap უტილიტა კლასების ფართო სპექტრს ელემენტის გარეგნობის შესაცვლელად.
ზღვარი და ბალიშები
მიანიჭეთ საპასუხო მეგობრული margin
ან padding
მნიშვნელობები ელემენტს ან მისი მხარეების ქვეჯგუფს სტენოგრამის კლასებით. მოიცავს ინდივიდუალური თვისებების, ყველა თვისების და ვერტიკალური და ჰორიზონტალური თვისებების მხარდაჭერას. კლასები აგებულია ნაგულისხმევი Sass რუქიდან დაწყებული .25rem
.3rem
იყენებთ CSS Grid განლაგების მოდულს? განიხილეთ gap უტილიტის გამოყენება .
აღნიშვნა
Spacing Utilities, რომლებიც ვრცელდება ყველა წყვეტის წერტილზე, დან xs
მდე xxl
, არ აქვთ წყვეტის წერტილის აბრევიატურა. ეს იმიტომ ხდება, რომ ეს კლასები გამოიყენება ზემოდან და ზემოდან min-width: 0
და, შესაბამისად, არ არის შეზღუდული მედია მოთხოვნით. თუმცა, დარჩენილი წყვეტების წერტილები შეიცავს წყვეტის წერტილის აბრევიატურას.
კლასები დასახელებულია ფორმატის {property}{sides}-{size}
გამოყენებით xs
და {property}{sides}-{breakpoint}-{size}
for 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
- ცარიელი - კლასებისთვის, რომლებიც ადგენენ ელემენტის
margin
ანpadding
ოთხივე მხარეს
სადაც ზომა არის ერთ-ერთი:
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 ნაგულისხმევად რეაგირებს და იქმნება ჩვენი 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 რუკაზე და შემდეგ გენერირებულია ჩვენი Utilities 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 გამოცხადებულია ჩვენს Utilities API-ში scss/_utilities.scss
. ისწავლეთ როგორ გამოიყენოთ Utilities 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
),