ዩቲሊቲ ኤፒኣይ

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

ኣብዚ ገጽ

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

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

መማረጺ	ዓይነት	መግለፂ
`property`	ዘድሊ	ስም ናይቲ ንብረት፣ እዚ ሕብረ ቃላት ወይ ስርርዕ ሕብረ ቃላት (ንኣብነት፣ ኣግማድ መሸፈኒ ወይ ወሰን) ክኸውን ይኽእል።
`values`	ዘድሊ	ዝርዝር ክብርታት፣ ወይ ስም ክፍሊ ምስቲ ዋጋ ሓደ ክኸውን እንተዘይደሊኻ ካርታ። `null`ከም መፍትሕ ካርታ ዝጥቀም እንተኾይኑ ኣይጥርንፍን እዩ።
`class`	ዘይናይግድን	ተለዋዋጢ ንሽም ክፍሊ ምስቲ ንብረት ሓደ ክኸውን እንተዘይደሊኻ። መፍትሕ ዘይሃብካሉን መፍትሕ ድማ ስርርዕ ሕብረ ቃላት እንተኾይኑን፡ ስም ክፍሊ ቀዳማይ ባእታ ናይቲ ስርርዕ ክኸውን `class`እዩ ።`propertyproperty`
`state`	ዘይናይግድን	ዝርዝር ናይ ስውር-ክፍሊ ፍልልያት ከም `:hover`ወይ `:focus`ንዩቲሊቲ ንምፍጣር። ነባሪ ዋጋ የለን።
`responsive`	ዘይናይግድን	ምላሽ ዝህቡ ክፍልታት ምፍጣር ዘድልዮም እንተኾይኑ ዘመልክት ቡልያን። `false`ብነባሪ መልክዑ።
`rfs`	ዘይናይግድን	ቡልያን ንፈሳሲ ዳግመ-ምምዛን ንምኽኣል። እዚ ብኸመይ ከም ዝሰርሕ ንምፍላጥ ኣብ ገጽ RFS ርኣዩ ። `false`ብነባሪ መልክዑ።
`print`	ዘይናይግድን	ናይ ሕትመት ክፍልታት ምፍጣር ዘድልዮም እንተኾይኑ ዘመልክት ቡልያን። `false`ብነባሪ መልክዑ።
`rtl`	ዘይናይግድን	ቡልያን ዩቲሊቲ ኣብ RTL ክቕመጥ ኣለዎ እንተኾይኑ ዝሕብር። `true`ብነባሪ መልክዑ።

ኤፒኣይ መብርሂ ሂቡ።

$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; }

ብሕታዊ ቅድመ-ጥብቆ ክፍሊ

classኣብቲ ዝተጠርነፈ CSS ዝጥቀመሉ ቅድመ-ጥብቆ ክፍሊ ንምቕያር ነቲ ኣማራጺ ተጠቐም ፤

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

ውጽኢት፤

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

ግዝኣታት

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; }
}

ዩቲሊቲታት ምቕያር

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

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

ናይ ሕትመት ዩቲሊቲታት

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ካርታ ብ 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 .