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