ርሕቀት ምግባር
ቡትስትራፕ ንመልክዕ ሓደ ባእታ ንምቕያር ሰፊሕ ዝርዝር ናይ ኣቋራጭ ምላሽ ዝህብ ወሰን፣ ፓዲንግን ክፍተት ዩቲሊቲ ክፍልታትን የጠቓልል።
ወሰንን ፓዲንግን
ንሓደ ባእታ ወይ ንኡስ ስብስብ ጎድኑ ምስ ኣቋራጭ ክፍልታት ምላሽ ዝህብ margin
ወይ ክብርታት ምምዳብ። padding
ንውልቃዊ ንብረታት፣ ንኹሎም ንብረታት፣ ከምኡ’ውን ንቐጥታውን ኣግማድን ንብረታት ዝግበር ደገፍ የጠቓልል። ክፍልታት ካብ ነባሪ ሳስ ካርታ ካብ .25rem
ክሳብ 3rem
.
ናይ CSS Grid ኣቀማምጣ ሞዱል ምጥቃም? ነቲ ናይ ክፍተት ዩቲሊቲ ምጥቃም ኣብ ግምት ኣእቱ ።
ምልክት ምግባር
ንኹሎም ነጥብታት ምብታኽ ዝምልከቱ ናይ ርሕቀት መገልገሊታት፣ ካብ 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
- (start) ንዝሰርዑ ክፍልታትmargin-left
ወይpadding-left
ኣብ LTR፣margin-right
ወይpadding-right
ኣብ RTLe
- (end) ንዝተቐመጡ ክፍልታትmargin-right
ወይpadding-right
ኣብ LTR፣margin-left
ወይpadding-left
ኣብ RTLx
- ንኽልቲኡ ዘቐምጡ ክፍልታትን*-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
to auto ዘቐምጡ ክፍልታት
$spacers
(ኣብቲ ናይ ሳስ ካርታ ተለዋዋጢ ኣታዊታት ብምውሳኽ ተወሳኺ ዓቐናት ክትውስኽ ትኽእል ኢኻ ።)
ኣብነታት
ገለ ውክልና ዘለዎም ኣብነታት ናይዞም ክፍልታት እነሆ፤
.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;
}
ልኡል ማእከል ምግባር
ብተወሳኺ፡ ቡትስትራፕ ንኣግማድ-ስፍሓት ደረጃ ብሎክ ትሕዝቶ ብኣግማድ ማእከል ንምግባር ዝሕግዝ ክፍሊ እውን የጠቓልል -ማለት ፡ ዘለዎ .mx-auto
ትሕዝቶን ስብስብን-ነቶም ኣግማድ ወሰን ናብ .display: block
width
auto
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
ኣሉታዊ ወሰን እዩ።
ኣብ CSS margin
፡ ንብረታት ኣሉታዊ ክብርታት ክጥቀሙ ይኽእሉ ( padding
ኣይክእሉን)። እዞም ኣሉታዊ ወሰናት ብነባሪ ክስረዙ እዮም ፣ ግን ኣብ ሳስ ብቅጥዒ ክኽፈቱ ይኽእሉ $enable-negative-margins: true
።
እቲ ስነ-ቓል ዳርጋ ምስቲ ነባሪ፣ ኣወንታዊ ወሰን ዩቲሊቲታት ሓደ እዩ፣ ግን n
ቅድሚ እቲ ዝተሓተተ ዓቐን ምስ ምውሳኽ። ኣብዚ ሓደ ኣብነት ክፍሊ ኣሎ ንሱ ድማ ኣንጻር ናይ .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
ክፍተት
፡ ክትጥቀም ከለኻ ፡ ኣብቲ ወላዲ ሽቦ መትሓዚ ንዘለዉ ዩቲሊቲታት display: grid
ክትጥቀም ትኽእል ኢኻ ። እዚ ድማ ኣብ ውልቃዊ ሽቦ ኣቑሑት (ደቂ ናይ ሓደ ኮንተይነር) gap
ማርጅን ዩቲሊቲታት ምውሳኽ ምግዳድ ክቑጥብ ይኽእል ። display: grid
Gap utilities ብነባሪ ምላሽ ዝህቡ እዮም፣ ብመንገዲ utilities APIና ድማ ይፍጠሩ፣ ኣብ $spacers
Sass map ተመርኲሶም።
<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
.
ሳስ
ካርታታት
ስፔሲንግ ዩቲሊቲታት ብመንገዲ ሳስ ካርታ ይእወጁ ድሕሪኡ ብዩቲሊቲታትና ኤፒኣይ ይፍጠሩ።
$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
),