ዩቲሊቲ ኤፒኣይ

ዩቲሊቲ ኤፒኣይ ኣብ ሳስ ዝተመስረተ መሳርሒ ኮይኑ ዩቲሊቲ ክፍልታት ንምፍጣር ዝሕግዝ እዩ።

ኣብዚ ገጽ

ቡትስትራፕ ዩቲሊቲታት ብዩቲሊቲ ኤፒኣይና ዝፍጠሩ ኮይኖም ብመንገዲ ሳስ ኣቢልና ነባሪ ስብስብ ዩቲሊቲ ክፍልታትና ንምቕያር ወይ ንምንዋሕ ክንጥቀመሎም ንኽእል። ናትና ዩቲሊቲ ኤፒኣይ ኣብ ዝተፈላለዩ ኣማራጺታት ዘለዎም ስድራቤታት ክፍልታት ንምፍጣር ኣብ ተኸታታሊ ሳስ ካርታታትን ተግባራትን ዝተመርኮሰ እዩ። ምስ ካርታታት ሳስ ዘይትፋለጡ እንተኾይንኩም ፡ ንኽትጅምሩ ኣብ ወግዓዊ ዶክስ ሳስ ኣንብቡ።

እቲ $utilitiesካርታ ኩሎም ዩቲሊቲታትና ዝሓዘ ኮይኑ ድሒሩ ምስቲ ብሕታዊ $utilitiesካርታኻ ይወሃሃድ፣ እንተሃልዩ። እቲ ናይ ዩቲሊቲ ካርታ ነዞም ዝስዕቡ ኣማራጺታት ዝቕበሉ ቁልፊ ዘለዎ ዝርዝር ናይ ዩቲሊቲ ጉጅለታት ዝሓዘ እዩ።

መማረጺ	ዓይነት	ነባሪ ዋጋ	መግለፂ
`property`	ዘድሊ	– 1999 ዓ.ም.	ስም ናይቲ ንብረት፣ እዚ ሕብረ ቃላት ወይ ስርርዕ ሕብረ ቃላት (ንኣብነት፣ ኣግማድ መሸፈኒ ወይ ወሰን) ክኸውን ይኽእል።
`values`	ዘድሊ	– 1999 ዓ.ም.	ዝርዝር ክብርታት፣ ወይ ስም ክፍሊ ምስቲ ዋጋ ሓደ ክኸውን እንተዘይደሊኻ ካርታ። `null`ከም መፍትሕ ካርታ ዝጥቀም እንተኾይኑ ኣይጥርንፍን እዩ።
`class`	ዘይናይግድን	ከንቱ	ስም ናይቲ ዝተፈጥረ ክፍሊ። እንተዘይተዋሂቡን `property`ስርርዕ ሕብረ ቃላት እንተኾይኑን `class`፡ ብነባሪ ናብቲ ቀዳማይ ባእታ ናይቲ `property`ስርርዕ ክኸውን እዩ።
`css-var`	ዘይናይግድን	`false`	ቡልያን ኣብ ክንዲ ሕግታት CSS ተለዋዋጢ CSS ንምፍጣር።
`local-vars`	ዘይናይግድን	ከንቱ	ካርታ ናይ ከባብያዊ CSS ተለዋዋጢ ረቛሒታት ብዘይካ ሕግታት CSS ንምፍጣር።
`state`	ዘይናይግድን	ከንቱ	ዝርዝር ናይ ስውር-ደርቢ ፍልልያት (ንኣብነት `:hover`፡ ወይ `:focus`) ንምፍጣር።
`responsive`	ዘይናይግድን	`false`	ምላሽ ዝህቡ ክፍልታት ክፈጥሩ ኣለዎም እንተኾይኑ ዘመልክት ቡልያን።
`rfs`	ዘይናይግድን	`false`	ቡልያን ንፈሳሲ ዳግመ-ምዕቃን ብ RFS ንምኽኣል .
`print`	ዘይናይግድን	`false`	ናይ ሕትመት ክፍልታት ምፍጣር ዘድልዮም እንተኾይኑ ዘመልክት ቡልያን።
`rtl`	ዘይናይግድን	`true`	ቡልያን ዩቲሊቲ ኣብ RTL ክቕመጥ ኣለዎ እንተኾይኑ ዝሕብር።

ኤፒኣይ መብርሂ ሂቡ።

$utilitiesኩሎም ናይ ዩቲሊቲ ተቐያየርቲ ኣብቲ ኣብ ውሽጢ _utilities.scssቅዲ ጽሑፍና ዘሎ ተለዋዋጢ ይውሰኹ ። ነፍሲ ወከፍ ጉጅለ ዩቲሊቲ ከምዚ ዝስዕብ ይመስል፤

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ኣየናይ እዩ ነዞም ዝስዕቡ ዘውፅእ፤

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

ንብረት

እቲ ዝድለ propertyመፍትሕ ንዝኾነ ዩቲሊቲ ክቕመጥ ኣለዎ፣ ከምኡውን ቅኑዕ ናይ CSS ንብረት ክሕዝ ኣለዎ። እዚ ባህሪ ኣብቲ ናይቲ ዝተፈጥረ ዩቲሊቲ ስብስብ ሕግታት ይጥቀም። እቲ classመፍትሕ ምስ ዝግደፍ፡ ከም ነባሪ ስም ክፍሊ እውን የገልግል። ነቲ text-decorationዩቲሊቲ ንርአ፤

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

ውጽኢት፤

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

ክብርታት

ኣብቲ ዝተፈጥረ ኣስማት ክፍልታትን ሕግታትን valuesንዝተገልጸ ኣየኖት ክብርታት ክጥቀሙ ከምዘለዎም ንምግላጽ ነቲ መፍትሕ ተጠቐም ። propertyዝርዝር ወይ ካርታ ክኸውን ይኽእል (ኣብ ዩቲሊቲስ ወይ ኣብ ሳስ ተለዋዋጢ ተቐሚጡ)።

ከም ዝርዝር፡ ከም ምስ text-decorationዩቲሊቲስ :

values: none underline line-through

ከም ካርታ፡ ከም ምስ opacityዩቲሊቲስ :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

ከም ሓደ ናይ Sass ተለዋዋጢ ዝርዝር ወይ ካርታ ዘቐምጥ፣ ከምቲ ኣብ positionዩቲሊቲታትና ዘሎ :

values: $position-values

ክፍሊ

classኣብቲ ዝተጠርነፈ CSS ዝጥቀመሉ ቅድመ-ጥብቆ ክፍሊ ንምቕያር ነቲ ኣማራጺ ተጠቐም ። ንኣብነት ካብ ናብ .opacity-*ንምቕያር .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ውጽኢት፤

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

CSS ተለዋዋጢ ዩቲሊቲታት

css-varነቲ ቡልያን ኣማራጺ ናብ ኣቐምጦ እሞ እቲ ኤፒኣይ ኣብ ክንዲ እቶም ልሙድ ሕግታት trueንዝተዋህበ መምረጺ ሎካል CSS ተለዋዋጢ ክፈጥር እዩ ። ንመገልገሊታትና property: valueኣብ ግምት ኣእትዉ ፤.text-opacity-*

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

ውጽኢት፤

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }

ናይ ከባቢ CSS ተለዋዋጢ ረቛሒታት

local-varsኣብ ውሽጢ ናይቲ ዩቲሊቲ ክፍሊ ሕግታት ስብስብ ናይ ከባቢ CSS ተለዋዋጢ ረቛሒታት ዘመንጩ ናይ Sass ካርታ ንምግላጽ ነቲ ኣማራጺ ተጠቐም ። ኣብቲ ዝፍጠር ሕግታት CSS ነቶም ናይ ከባቢ CSS ተለዋዋጢ ረቛሒታት ንምውሳድ ተወሳኺ ስራሕ ከድልዮ ከም ዝኽእል ኣስተውዕል። ንኣብነት .bg-*፡ ንመገልገሊታትና ንርአ፤

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

ውጽኢት፤

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

ግዝኣታት

stateናይ ሓሶት ክፍሊ ፍልልያት ንምፍጣር ነቲ ኣማራጺ ተጠቐም ። ኣብነት ናይ ሓሶት :hoverክፍልታትን :focus. ዝርዝር ግዝኣታት ክቐርብ ከሎ፡ ኣስማት ክፍልታት ናይቲ ስውር-ክፍሊ ይፍጠሩ። ንኣብነት ኣብ hover ንዘሎ opacity ንምቕያር add ንገብር እሞ ኣብቲ ዝተጠርነፈ CSS state: hoverክትኣቱ ኢኻ ።.opacity-hover:hover

ብዙሓት ናይ ሓሶት ክፍልታት የድልዩኻ? ብቦታ ዝተፈለየ ዝርዝር ግዝኣታት ተጠቐም፦ state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ውጽኢት፤

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

ምላሽ ዝህብ

ኣብ ኩሎም ነጥብታት ምብታኽ ምላሽ ዝህቡ ዩቲሊቲታት (ንኣብነት, ) responsiveንምፍጣር ቡልያን ወስኹ ።.opacity-md-25

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ውጽኢት፤

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

ሕትመት

printነቲ ኣማራጺ ምኽፋት ንሕትመት ዝኸውን ናይ ዩቲሊቲ ክፍልታት እውን@media print { ... } ክፈጥር እዩ፣ እዚኦም ድማ ኣብ ውሽጢ እቲ ናይ ሚድያ ሕቶ ጥራይ እዮም ዝትግበሩ።

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ውጽኢት፤

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

ኣገዳስነት

ኩሎም ብኤፒኣይ ዝፍጠሩ ዩቲሊቲታት !importantከምቲ ዝተሓሰበሉ ንኣካላትን መቐየሪ ክፍልታትን ከም ዝሽፍኑ ንምርግጋጽ ዘጠቓልሉ እዮም። ነዚ ቅጥዒ ብዓለም ደረጃ በቲ $enable-important-utilitiesተለዋዋጢ ክትቅይሮ ትኽእል ኢኻ (ነባሪ ናብ true).

ኤፒኣይ ምጥቃም

ሕጂ እቲ ናይ ዩቲሊቲስ ኤፒኣይ ብኸመይ ከም ዝሰርሕ ስለ ዝፈለጥካዮ፡ ከመይ ጌርካ ናይ ገዛእ ርእስኻ ብሕታዊ ክፍልታት ከም እትውስኽን ነባሪ ዩቲሊቲታትና ከም እትቕይርን ተማሃር።

ንመገልገሊታት ምግዳፍ

ሓደ ዓይነት መፍትሕ ብምጥቃም ንዝነበሩ ዩቲሊቲታት ምግዳፍ። ንኣብነት ተወሳኺ ምላሽ ዝህቡ ምፍሳስ ዩቲሊቲ ክፍልታት እንተደሊኻ ነዚ ክትገብር ትኽእል ኢኻ፤

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

ዩቲሊቲታት ምውሳኽ

ሓደስቲ ዩቲሊቲታት ኣብቲ ነባሪ $utilitiesካርታ ብ map-merge. ዘድልዩና ናይ ሳስ ፋይላትን መጀመርታ ከም ዝኣትዉን ኣረጋግጽ _utilities.scss፣ ድሕሪኡ map-mergeተወሳኺ ዩቲሊቲታትካ ንምውሳኽ the ተጠቐም። ንኣብነት፡ ከመይ ጌርና cursorሰለስተ ክብርታት ዘለዎ መልሲ ዝህብ ዩቲሊቲ ንውስኸሉ ኣብዚ ኣሎ።

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

ዩቲሊቲታት ምቕያር

ኣብቲ ነባሪ $utilitiesካርታ ዘለዉ ዩቲሊቲታት map-getምስን map-mergeተግባራትን ምቕያር። widthኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ ኣብ ልዕሊ እቶም ዩቲሊቲታት ተወሳኺ ዋጋ ንውስኸሎም ኣለና ። ብኢንተርነት ጀምር map-mergeድሕሪኡ ኣየናይ ዩቲሊቲ ክትቅይር ከም እትደሊ ግለጽ። ካብኡ ድማ፡ ነቲ ዝተሰነየ "width"ካርታ ምስ map-getኣምጽኦ፡ ነቲ ናይቲ ዩቲሊቲ ኣማራጺታትን ክብርታትን ንምእታውን ንምቕያርን እዩ።

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

ምላሽ ዝህብ ኣንቅሕ

ንሓደ ዝጸንሐ ስብስብ ናይቶም ኣብዚ እዋን ብነባሪ መልሲ ዘይህቡ ዩቲሊቲታት ምላሽ ዝህቡ ክፍልታት ከተኽእሎም ትኽእል ኢኻ። ንኣብነት፡ እቶም borderክፍልታት ምላሽ ዝህቡ ንምግባር፤

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

እዚ ሕጂ ንነፍሲ ወከፍ ነጥቢ ምብታኽን ንነፍሲ ወከፍን .borderምላሽ ዝህቡ ፍልልያት ከስዕብ እዩ። .border-0እቲ ዝፈጠርካዮ CSS ከምዚ ዝስዕብ ክመስል እዩ፤

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

ንመገልገሊታት ዳግማይ ስም ምሃብ

v4 ዩቲሊቲታት ዝጎደሉ፣ ወይስ ካልእ ናይ ምጽዋዕ ውዕል ለሚድካዮ? እቲ ናይ ዩቲሊቲስ ኤፒኣይ ንውጽኢት classናይ ሓደ ዝተዋህበ ዩቲሊቲ ንምግዳፍ ክውዕል ይኽእል-ንኣብነት .ms-*፡ ንዩቲሊቲታት ናብ ኣረጊት ንምስያም .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

ዩቲሊቲታት ምእላይ

ዝኾነ ካብቶም ነባሪ ዩቲሊቲታት ነቲ ናይ ጉጅለ መፍትሕ ናብ ብምቕማጥ ኣውጽእዎ null። ንኣብነት ንኹሉ widthዩቲሊቲታትና ንምእላይ a ፈጢርና ኣብ ውሽጢ $utilities map-mergeንውስኸሉ "width": null።

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

ኣብ RTL ዩቲሊቲ ምእላይ

ገለ ወሰን ጉዳያት RTL ቅዲ ኣጸጋሚ ይገብሩ , ከም መስመር ምብታኽ ኣብ ዓረብ. በዚ ኸምዚ ዩቲሊቲታት ካብ ውጽኢት RTL ነቲ rtlኣማራጺ ናብ false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

ውጽኢት፤

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

እዚ ኣብ RTL ዝኾነ ነገር ኣየውጽእን እዩ፣ ሳላ መምርሒ ምቁጽጻር RTLCSSremove .