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.
Kenar boşluğu ve dolgu
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
.
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 xs
noktası xxl
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, ve for xs
ve {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, xl
ve 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çinmargin-top
veyapadding-top
b
- ayarlanan sınıflar içinmargin-bottom
veyapadding-bottom
s
- ( başlangıç) LTR'demargin-left
veya RTL'de ayarlanan sınıflar içinpadding-left
margin-right
padding-right
e
- (son) LTR'demargin-right
veya RTL'de ayarlanan sınıflar içinpadding-right
margin-left
padding-left
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;
}
.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-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). 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 n
istenen 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
, gap
ana ızgara kapsayıcısındaki yardımcı programlardan yararlanabilirsiniz. display: grid
Bu, bireysel ızgara öğelerine (bir konteynerin çocukları) kenar boşluğu yardımcı programları eklemek zorunda kalmadan tasarruf sağlayabilir . $spacers
Gap 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 .
<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 $spacers
haritadan altı boyut ( 0
– 5
) içerir. .gap-auto
ile 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
),