Go beakanya sekgoba
Bootstrap e akaretša mehutahuta ya diklase tša go arabela mošito, padding, le sekgoba go fetoša ponagalo ya elemente.
Margin le padding
Abela go arabela-bogwera margin
goba padding
boleng go elemente goba sehlopha se senyenyane sa mahlakore a yona ka diklase tša mongwalokopana. E akaretša thekgo ya dithoto tša motho ka o tee ka o tee, dithoto ka moka, le dithoto tša go ema le tša go rapalala. Diklase di agilwe go tšwa go mmapa wa Sass wa go se fetoge go tloga go go .25rem
ya go 3rem
.
Go šomiša modula wa peakanyo ya CSS Grid? Nagana ka go diriša sedirišwa sa go diriša sekgoba .
Notation
Didirišwa tša go arola sekgoba tšeo di šomago go dintlha ka moka tša go kgaotša, go tloga xs
go go ya go xxl
, ga di na khutsofatšo ya dintlha tša go kgaotša go tšona. Se ke ka lebaka la gore diklase tšeo di dirišwa go tloga min-width: 0
le godimo, gomme ka go realo ga di tlemilwe ke potšišo ya boraditaba. Dintlha tše di šetšego tša go kgaotša, le ge go le bjalo, di akaretša khutsofatšo ya dintlha tša go kgaotša.
Diklase di reeletšwe maina ka go šomiša sebopego {property}{sides}-{size}
sa xs
le {property}{sides}-{breakpoint}-{size}
sa sm
, md
, lg
, xl
, le xxl
.
Moo thoto e lego ye nngwe ya:
m
- bakeng sa diklase tse behamargin
p
- bakeng sa diklase tse behapadding
Moo mahlakore e lego e nngwe ya:
t
- bakeng sa diklase tse behamargin-top
kapapadding-top
b
- bakeng sa diklase tse behamargin-bottom
kapapadding-bottom
s
- (qala) bakeng sa diklase tse behamargin-left
kapapadding-left
ka LTR,margin-right
kapapadding-right
ka RTLe
- (qetellong) bakeng sa diklase tse behamargin-right
kapapadding-right
ka LTR,margin-left
kapapadding-left
ka RTLx
- bakeng sa diklase tse beha bobeli*-left
le*-right
y
- bakeng sa diklase tse beha bobeli*-top
le*-bottom
- lefeela - bakeng sa diklase tse beha a
margin
kapapadding
ka mahlakoreng ohle a 4 a elemente
Moo bogolo e lego e nngwe ya:
0
- bakeng sa diklase tse felisangmargin
kapapadding
ka ho e beha ho0
1
- (ka default) bakeng sa diklase tse behamargin
kapapadding
ho$spacer * .25
2
- (ka default) bakeng sa diklase tse behamargin
kapapadding
ho$spacer * .5
3
- (ka default) bakeng sa diklase tse behamargin
kapapadding
ho$spacer
4
- (ka default) bakeng sa diklase tse behamargin
kapapadding
ho$spacer * 1.5
5
- (ka default) bakeng sa diklase tse behamargin
kapapadding
ho$spacer * 3
auto
- bakeng sa diklase tse beha themargin
ho auto
(O ka oketša bogolo bjo bongwe ka go oketša dikeno go $spacers
phetogo ya mmapa wa Sass.)
Mehlala
Mehlala e mengwe ya boemedi ya diklase tše še:
.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;
}
Go tsepama ga go rapalala
Go tlaleletša, Bootstrap e akaretša gape le .mx-auto
sehlopha sa go tsepamiša ka go rapalala diteng tša maemo a boloko bja bophara bjo bo sa fetogego—ke gore, diteng tšeo di nago display: block
le le width
sete—ka go beakanya mapheko a go rapalala go auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Moedi wa go se loke
Ka CSS, margin
thepa ka sebelisa boleng bo mpe ( padding
ke ke). Diphetho tše tše mpe di šitišitšwe ka go ikemela , eupša di ka kgontšhwa ka go Sass ka go beakanya $enable-negative-margins: true
.
Popegopolelo e nyakile go swana le didirišwa tša go se fetoge, tša mošito wo mobotse, eupša ka tlaleletšo ya n
pele ga bogolo bjo bo kgopetšwego. Mona ke sehlopha sa mohlala seo se fapaneng le .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Sekgoba
Ge o šomiša display: grid
, o ka šomiša gap
didirišwa godimo ga setshelo sa keriti ya motswadi. Se se ka boloka go swanelwa ke go oketša didirišwa tša margin go dilo tša keriti ka botee (bana ba display: grid
setshelo). Didirišwa tša sekgoba di arabela ka go ikemela, gomme di tšweletšwa ka API ya rena ya didirišwa, yeo e theilwego godimo ga $spacers
mmapa wa Sass.
<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>
Thekgo e akaretša dikgetho tše di arabelago bakeng sa dintlha ka moka tša go kgaotša keriti ya Bootstrap, gammogo le bogolo bjo bo tshela go tšwa $spacers
mmapeng ( 0
– 5
). Ga go na .gap-auto
sehlopha sa utility ka ge e swana ka mo go atlegilego le .gap-0
.
Sass
Dimmapa
Didirišwa tša go arola sekgoba di tsebagatšwa ka mmapa wa Sass gomme ka morago tša tšweletšwa ka API ya rena ya didirišwa.
$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);
API ya Didirišwa
Didirišwa tša go arola sekgoba di tsebagaditšwe ka go API ya rena ya didirišwa ka scss/_utilities.scss
. Ithute kamoo o ka dirišago API ya didirišwa.
"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
),