ርሕቀት ምግባር

ቡትስትራፕ ንመልክዕ ሓደ ባእታ ንምቕያር ሰፊሕ ዝርዝር ናይ ኣቋራጭ ምላሽ ዝህብ ወሰን፣ ፓዲንግን ክፍተት ዩቲሊቲ ክፍልታትን የጠቓልል።

ኣብዚ ገጽ

ወሰንን ፓዲንግን

ንሓደ ባእታ ወይ ንኡስ ስብስብ ጎድኑ ምስ ኣቋራጭ ክፍልታት ምላሽ ዝህብ marginወይ ክብርታት ምምዳብ። paddingንውልቃዊ ንብረታት፣ ንኹሎም ንብረታት፣ ከምኡ’ውን ንቐጥታውን ኣግማድን ንብረታት ዝግበር ደገፍ የጠቓልል። ክፍልታት ካብ ነባሪ ሳስ ካርታ ካብ .25remክሳብ 3rem.

ናይ CSS Grid ኣቀማምጣ ሞዱል ምጥቃም? ኣብ ክንድኡ ነቲ ጋፕ ዩቲሊቲ ምጥቃም ኣብ ግምት ኣእቱ ።

ምልክት ምግባር

ንኹሎም ነጥብታት ምብታኽ ዝምልከቱ ናይ ርሕቀት መገልገሊታት፣ ካብ xsክሳብ xxl፣ ኣብኦም ዝኾነ ናይ ምብታኽ ምሕጻር የብሎምን። min-width: 0እዚ ዝኾነሉ ምኽንያት ድማ እቶም ክፍልታት ካብን ላዕልን ዝትግበሩ ስለዝኾኑ ፡ በዚ ኸኣ ብናይ ሚድያ ሕቶ ስለዘይቅየዱ እዩ። እቶም ዝተረፉ ነጥብታት ምብታኽ ግን፡ ምሕጻር ነጥቢ ምብታኽ ዘጠቓልሉ እዮም።

እቶም ክፍልታት {property}{sides}-{size}ን xs, , , ከምኡውን . {property}{sides}-{breakpoint}-{size}_smmdlgxlxxl

ንብረት ሓደ ካብ ዝኾነሉ ፤

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ኣብ RTL
e- (end) ንዝተቐመጡ ክፍልታት margin-rightወይ padding-rightኣብ LTR፣ margin-leftወይ padding-leftኣብ RTL
x- ንኽልቲኡ ዘቐምጡ ክፍልታትን *-left...*-right
y- ንኽልቲኡ ዘቐምጡ ክፍልታትን *-top...*-bottom
ባዶ - ንሓደ marginወይ paddingኣብ ኩሉ 4 ጎድኒ ናይቲ ባእታ ዘቐምጡ ክፍልታት

ዓቐን ሓደ ካብ ዝኾነሉ ፤

0margin- ነቶም ነቲ ወይ 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- ንናይ marginto 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: blockwidthauto

ማእከል ዝገበረ ባእታ

<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: gridGap utilities ብነባሪ ምላሽ ዝህቡ እዮም፣ ብመንገዲ utilities APIና ድማ ይፍጠሩ፣ ኣብ $spacersSass map ተመርኲሶም።

ሽቦ ኣቕሓ 1

ሽቦ ኣቕሓ 2

ሽቦ ነጥቢ 3

html ዝብል ጽሑፍ ኣሎ።

<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,
);

ዩቲሊቲስ ኤፒኣይ

ስፔሲንግ ዩቲሊቲስ ኣብ ዩቲሊቲስና ኤፒኣይ ኣብ 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),