Source

ინტერვალი

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ავტო

(შეგიძლიათ დაამატოთ მეტი ზომა $spacersSass რუკის ცვლადში ჩანაწერების დამატებით.)

მაგალითები

აქ მოცემულია ამ კლასების რამდენიმე წარმომადგენლობითი მაგალითი:

.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 py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>