aralık

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

Nasıl çalışır

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.

gösterim

ile arasındaki tüm kesme noktaları için geçerli olan aralık yardımcı programlarında kesme xsnoktası xlkı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, for xsve {property}{sides}-{breakpoint}-{size}for sm, md, lg, ve formatı kullanılarak adlandırılır xl.

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
l- ayarlanan sınıflar için margin-leftveyapadding-left
r- ayarlanan sınıflar için margin-rightveyapadding-right
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;
}

.ml-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). 4.2'den itibaren, yukarıda listelenen her sıfır olmayan tam sayı boyutu için negatif marj yardımcı programları ekledik (örneğin, 1, 2, 3, 4, 5). Bu yardımcı programlar, kesme noktalarında ızgara sütunu olukları özelleştirmek için idealdir.

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

İşte, orta ( md) kesme noktasında ve üzerinde Bootstrap ızgarasını özelleştirmeye bir örnek. .colile dolguyu artırdık ve ardından ebeveyn .px-md-5ile buna karşı koyduk ..mx-md-n5.row

Özel sütun dolgusu

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>