ინტერვალი

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>