ክፍተት
ቡትስትራፕ የአንድን ንጥረ ነገር ገጽታ ለማሻሻል ሰፊ የአጭር እጅ ምላሽ ሰጪ ህዳግ፣ ንጣፍ እና ክፍተት መገልገያ ክፍሎችን ያካትታል።
ህዳግ እና ንጣፍ
ምላሽ ሰጪ-ወዳጃዊ margin
ወይም padding
እሴቶችን ለአጭር እጅ ክፍሎች ላሉት ንጥረ ነገር ወይም የጎኖቹ ንዑስ ስብስብ መድብ። ለግለሰብ ንብረቶች፣ ሁሉም ንብረቶች እና አቀባዊ እና አግድም ባህሪያት ድጋፍን ያካትታል። ክፍሎች የተገነቡት ከነባሪ Sass ካርታ እስከ እስከ ድረስ .25rem
ነው 3rem
።
የሲኤስኤስ ግሪድ አቀማመጥ ሞጁሉን እየተጠቀሙ ነው? ክፍተቱን መጠቀም ያስቡበት መገልገያ .
ማስታወሻ
በሁሉም መግቻ ነጥቦች ላይ የሚተገበሩ የርቀት መገልገያዎች ከ xs
እስከ xxl
, በውስጣቸው ምንም የእረፍት ነጥብ ምህጻረ ቃል የላቸውም። ይህ የሆነበት ምክንያት እነዚያ ክፍሎች ከ min-width: 0
እና በላይ ስለሚተገበሩ በመገናኛ ብዙኃን መጠይቅ ስላልተያዙ ነው። የተቀሩት መግቻ ነጥቦች ግን የማቋረጫ ነጥብ ምህጻረ ቃልን ያካትታሉ።
ክፍሎቹ የተሰየሙት {property}{sides}-{size}
ለ xs
እና {property}{sides}-{breakpoint}-{size}
ለ sm
፣፣፣፣፣ md
እና ቅርጸት lg
በመጠቀም xl
ነው xxl
።
ንብረቱ ከሚከተሉት አንዱ በሆነበት፡-
m
- ለተዘጋጁ ክፍሎችmargin
p
- ለተዘጋጁ ክፍሎችpadding
ጎኖቹ አንዱ የት ነው፡-
t
- ለተዘጋጁት ክፍሎችmargin-top
ወይምpadding-top
b
- ለተዘጋጁት ክፍሎችmargin-bottom
ወይምpadding-bottom
s
- (ጀምር) ለተዘጋጁmargin-left
ወይምpadding-left
በኤልቲአር፣margin-right
ወይምpadding-right
በ RTL ውስጥ ላሉ ክፍሎችe
- (መጨረሻ) ለተዘጋጁmargin-right
ወይምpadding-right
በኤልቲአር፣margin-left
ወይምpadding-left
በ RTL ውስጥ ላሉ ክፍሎችx
- ሁለቱንም*-left
እና ለሚያዘጋጁ ክፍሎች*-right
y
- ሁለቱንም*-top
እና ለሚያዘጋጁ ክፍሎች*-bottom
- ባዶ - አንድ
margin
ወይምpadding
በሁሉም የንጥሉ 4 ጎኖች ላይ ለሚዘጋጁ ክፍሎች
መጠኑ ከሚከተሉት ውስጥ አንዱ ከሆነ ፡-
0
- ለሚያስወግዱ ክፍሎችmargin
ወይምpadding
በማዘጋጀት0
1
- (በነባሪ) ለክፍሎችmargin
ወይምpadding
ለሚያዘጋጁ$spacer * .25
2
- (በነባሪ) ለክፍሎችmargin
ወይምpadding
ለሚያዘጋጁ$spacer * .5
3
- (በነባሪ) ለክፍሎችmargin
ወይምpadding
ለሚያዘጋጁ$spacer
4
- (በነባሪ) ለክፍሎችmargin
ወይምpadding
ለሚያዘጋጁ$spacer * 1.5
5
- (በነባሪ) ለክፍሎችmargin
ወይምpadding
ለሚያዘጋጁ$spacer * 3
auto
-margin
ወደ አውቶማቲክ ለሚያዘጋጁ ክፍሎች
$spacers
(ወደ Sass ካርታ ተለዋዋጭ ግቤቶችን በመጨመር ተጨማሪ መጠኖችን ማከል ይችላሉ ።)
ምሳሌዎች
የእነዚህ ክፍሎች አንዳንድ ተወካዮች ምሳሌዎች እዚህ አሉ
.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;
}
አግድም መሃል
በተጨማሪም Bootstrap እንዲሁም .mx-auto
ቋሚ ስፋት ያለው የማገጃ ደረጃ ይዘትን - ማለትም ይዘት ያለው display: block
እና width
ስብስብ - አግድም ህዳጎቹን ወደ auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
አሉታዊ ህዳግ
በCSS ውስጥ margin
ንብረቶች አሉታዊ እሴቶችን ሊጠቀሙ ይችላሉ ( padding
አይቻልም)። እነዚህ አሉታዊ ህዳጎች በነባሪነት ተሰናክለዋል ፣ ነገር ግን በ Sass ውስጥ በማቀናበር ማንቃት ይችላሉ $enable-negative-margins: true
።
አገባቡ ከነባሪው፣ አወንታዊ የኅዳግ መገልገያዎች ጋር ተመሳሳይ ነው፣ ነገር ግን n
ከተጠየቀው መጠን በፊት ሲጨመር። .mt-1
ከዚህ ተቃራኒ የሆነ ክፍል ምሳሌ ይኸውና
.mt-n1 {
margin-top: -0.25rem !important;
}
ክፍተት
በሚጠቀሙበት ጊዜ በወላጅ ፍርግርግ መያዣ display: grid
ላይ መገልገያዎችን መጠቀም ይችላሉ ። gap
ይህ በግለሰብ ፍርግርግ እቃዎች ( display: grid
የመያዣ ልጆች) ላይ የኅዳግ መገልገያዎችን ከመጨመር ይቆጥባል። የጋፕ መገልገያዎች በነባሪነት ምላሽ ይሰጣሉ፣ እና በ $spacers
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>
ድጋፍ ለሁሉም የBootstrap ፍርግርግ መግቻ ነጥቦች እና እንዲሁም $spacers
ከካርታው ስድስት መጠኖች ( 0
- 5
) ምላሽ ሰጪ አማራጮችን ያካትታል። ከ ጋር ተመሳሳይ ስለሆነ ምንም አይነት .gap-auto
የመገልገያ ክፍል የለም .gap-0
።
ሳስ
ካርታዎች
የክፍተት መገልገያዎች በ Sass ካርታ ይታወቃሉ ከዚያም በእኛ መገልገያዎች ኤፒአይ ይፈጠራሉ።
$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);
መገልገያዎች ኤፒአይ
የቦታ መጠቀሚያዎች በእኛ መገልገያዎች ኤፒአይ ውስጥ ይታወቃሉ scss/_utilities.scss
። የመገልገያ ኤፒአይን እንዴት መጠቀም እንደሚችሉ ይወቁ።
"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
),