Տարածություն

Լուսանցք և լիցք

Սղագրության դասերով տարրին կամ նրա կողմերի ենթաբազմությանը վերագրեք արձագանքող marginկամ արժեքներ: paddingՆերառում է անհատական ​​հատկությունների, բոլոր հատկությունների և ուղղահայաց և հորիզոնական հատկությունների աջակցություն: Դասերը կառուցված են լռելյայն Sass քարտեզից՝ սկսած .25remմինչև 3rem.

Օգտագործո՞ւմ եք CSS Grid դասավորության մոդուլը: Մտածեք օգտագործել gap կոմունալ ծրագիրը :

Նշում

Spacing կոմունալ ծառայությունները, որոնք կիրառվում են բոլոր ընդհատումների համար, սկսած xsմինչև xxl, չունեն ընդմիջման կետի հապավում: Դա պայմանավորված է նրանով, որ այդ դասերը կիրառվում են սկսած min-width: 0և վերև, և, հետևաբար, կապված չեն մեդիա հարցումով: Մնացած ընդմիջման կետերը, այնուամենայնիվ, ներառում են ընդմիջման կետի հապավումը:

Դասերը անվանվում են՝ օգտագործելով ձևաչափը և {property}{sides}-{size}համար , , , և :xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

Որտեղ գույքը մեկն է.

• 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
• դատարկ - դասերի համար, որոնք սահմանում են տարրի a marginկամ paddingբոլոր 4 կողմերում

Որտեղ չափը մեկն է.

• 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 API-ի միջոցով՝ հիմնված $spacersSass քարտեզի վրա:

<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 քարտեզի միջոցով և այնուհետև ստեղծվում մեր կոմունալ ծառայությունների 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 API-ում scss/_utilities.scss: Իմացեք, թե ինչպես օգտագործել կոմունալ ծառայությունների 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
    ),