aralık

Bootstrap, bir öğenin görünümünü değiştirmek için çok çeşitli stenografi duyarlı kenar boşluğu, dolgu ve boşluk yardımcı sınıfları içerir.

Bu sayfada

Kenar boşluğu ve dolgu

Bir öğeye veya yanlarının bir alt kümesine stenografi sınıfları ile duyarlı-dostu marginveya değerler atayın. paddingBireysel özellikler, tüm özellikler ve dikey ve yatay özellikler için destek içerir. Sınıflar, ile arasında değişen varsayılan bir Sass haritasından .25remoluşturulur 3rem.

CSS Izgara düzeni modülünü mü kullanıyorsunuz? Boşluk yardımcı programını kullanmayı düşünün .

gösterim

ile arasındaki tüm kesme noktaları için geçerli olan aralık yardımcı programlarında kesme xsnoktası xxlkısaltması yoktur. Bunun nedeni, bu sınıfların baştan min-width: 0ve yukarıya uygulanması ve dolayısıyla bir medya sorgusuna bağlı olmamasıdır. Ancak kalan kesme noktaları bir kesme noktası kısaltması içerir.

{property}{sides}-{size}Sınıflar, ve for xsve {property}{sides}-{breakpoint}-{size}for sm, md, lg, xlve for formatları kullanılarak adlandırılır xxl.

Mülkiyet şunlardan biridir:

m- belirlenen sınıflar içinmargin
p- belirlenen sınıflar içinpadding

Taraflardan biri nerede :

t- ayarlanan sınıflar için margin-topveyapadding-top
b- ayarlanan sınıflar için margin-bottomveyapadding-bottom
s- ( başlangıç) LTR'de margin-leftveya RTL'de ayarlanan sınıflar içinpadding-leftmargin-rightpadding-right
e- (son) LTR'de margin-rightveya RTL'de ayarlanan sınıflar içinpadding-rightmargin-leftpadding-left
x- her ikisini de ayarlayan sınıflar için *-leftve*-right
y- her ikisini de ayarlayan sınıflar için *-topve*-bottom
marginboş - öğenin a veya paddingtüm 4 tarafını ayarlayan sınıflar için

Boyut şunlardan biridir:

0margin- veya paddingöğesini ayarlayarak ortadan kaldıran sınıflar için0
1margin- (varsayılan olarak) veya öğesini ayarlayan sınıflar paddingiçin$spacer * .25
2margin- (varsayılan olarak) veya öğesini ayarlayan sınıflar paddingiçin$spacer * .5
3margin- (varsayılan olarak) veya öğesini ayarlayan sınıflar paddingiçin$spacer
4margin- (varsayılan olarak) veya öğesini ayarlayan sınıflar paddingiçin$spacer * 1.5
5margin- (varsayılan olarak) veya öğesini ayarlayan sınıflar paddingiçin$spacer * 3
automargin- otomatik olarak ayarlayan sınıflar için

$spacers( Sass harita değişkenine girdiler ekleyerek daha fazla boyut ekleyebilirsiniz .)

Örnekler

İşte bu sınıfların bazı temsili örnekleri:

.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;
}

yatay merkezleme

Ayrıca Bootstrap , yatay kenar boşluklarını olarak ayarlayarak .mx-autosabit genişlikli blok düzeyindeki içeriği, yani içeriği display: blockve kümesi olan içeriği yatay olarak ortalamak için bir sınıf içerir .widthauto

ortalanmış eleman

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Negatif marj

CSS'de, marginözellikler negatif değerler kullanabilir ( paddingyapamaz). Bu negatif kenar boşlukları varsayılan olarak devre dışıdır , ancak ayarlanarak Sass'ta etkinleştirilebilir $enable-negative-margins: true.

Sözdizimi, varsayılan, pozitif kenar boşluğu yardımcı programlarıyla neredeyse aynıdır, ancak nistenen boyuttan önce eklenmesiyle. İşte tam tersi olan bir örnek sınıf .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Açıklık

öğesini kullanırken display: grid, gapana ızgara kapsayıcısındaki yardımcı programlardan yararlanabilirsiniz. display: gridBu, bireysel ızgara öğelerine (bir konteynerin çocukları) kenar boşluğu yardımcı programları eklemek zorunda kalmadan tasarruf sağlayabilir . $spacersGap yardımcı programları varsayılan olarak duyarlıdır ve Sass haritasına dayalı olarak yardımcı program API'miz aracılığıyla oluşturulur .

Izgara öğesi 1

Izgara öğesi 2

Izgara öğesi 3

<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>

Destek, Bootstrap'in tüm ızgara kesme noktaları için duyarlı seçeneklerin yanı sıra $spacersharitadan altı boyut ( 0– 5) içerir. .gap-autoile aynı olduğu için bir yardımcı program sınıfı yoktur .gap-0.

küstah

Haritalar

Boşluk yardımcı programları, Sass haritası aracılığıyla bildirilir ve ardından yardımcı program API'miz ile oluşturulur.

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

Yardımcı Programlar API'sı

Boşluk yardımcı programları, yardımcı program API'mizde scss/_utilities.scss. Yardımcı programlar API'sini nasıl kullanacağınızı öğrenin.

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