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

Boyutun şunlardan biri olduğu yer:

• 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

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