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 margin
veya değerler atayın. padding
Bireysel ö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 .25rem
oluşturulur 3rem
.
gösterim
ile arasındaki tüm kesme noktaları için geçerli olan aralık yardımcı programlarında kesme xs
noktası xl
kısaltması yoktur. Bunun nedeni, bu sınıfların baştan min-width: 0
ve 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 xs
ve {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çinmargin-top
veyapadding-top
b
- ayarlanan sınıflar içinmargin-bottom
veyapadding-bottom
l
- ayarlanan sınıflar içinmargin-left
veyapadding-left
r
- ayarlanan sınıflar içinmargin-right
veyapadding-right
x
- her ikisini de ayarlayan sınıflar için*-left
ve*-right
y
- her ikisini de ayarlayan sınıflar için*-top
ve*-bottom
margin
boş - öğenin a veyapadding
tüm 4 tarafını ayarlayan sınıflar için
Boyut şunlardan biridir:
0
margin
- veyapadding
öğesini ayarlayarak ortadan kaldıran sınıflar için0
1
margin
- (varsayılan olarak) veya öğesini ayarlayan sınıflarpadding
için$spacer * .25
2
margin
- (varsayılan olarak) veya öğesini ayarlayan sınıflarpadding
için$spacer * .5
3
margin
- (varsayılan olarak) veya öğesini ayarlayan sınıflarpadding
için$spacer
4
margin
- (varsayılan olarak) veya öğesini ayarlayan sınıflarpadding
için$spacer * 1.5
5
margin
- (varsayılan olarak) veya öğesini ayarlayan sınıflarpadding
için$spacer * 3
auto
margin
- 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-auto
sabit genişlikli blok düzeyindeki içeriği, yani içeriği display: block
ve kümesi olan içeriği yatay olarak ortalamak için bir sınıf içerir .width
auto
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatif marj
CSS'de, margin
özellikler negatif değerler kullanabilir ( padding
yapamaz). 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 n
istenen 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. .col
ile dolguyu artırdık ve ardından ebeveyn .px-md-5
ile buna karşı koyduk ..mx-md-n5
.row
<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>