ინტერვალი

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-leftLTR-ში, margin-rightან padding-rightRTL-ში
e- (დასრულება) კლასებისთვის, რომლებიც მითითებულია margin-rightან padding-rightLTR-ში, margin-leftან padding-leftRTL-ში
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;
}

.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-ს მეშვეობით, $spacersSass რუკაზე დაფუძნებული.

ბადის პუნქტი 1

ბადის პუნქტი 2

ბადის პუნქტი 3

html

<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,
);

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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),