መገልገያ ኤፒአይ

የመገልገያ ኤፒአይ የመገልገ�� ክፍሎችን ለመፍጠር Sass ላይ የተመሰረተ መሳሪያ ነው።

በዚህ ገጽ ላይ

የቡትስትራፕ መገልገያዎች የሚመነጩት በእኛ የመገልገያ ኤፒአይ ነው እና ነባሪ የመገልገያ ክፍሎችን በ Sass ለማሻሻል ወይም ለማራዘም ጥቅም ላይ ሊውሉ ይችላሉ። የእኛ የመገልገያ ኤፒአይ በተለያዩ አማራጮች የክፍል ቤተሰቦችን ለማፍራት በተከታታይ Sass ካርታዎች እና ተግባራት ላይ የተመሰረተ ነው። ስለ Sass ካርታዎች የማያውቁት ከሆኑ ለመጀመር በይፋዊው የ Sass ሰነዶች ላይ ያንብቡ።

ካርታው ሁሉንም መገልገያዎቻችንን ይይዛል እና በኋላ ካለ ብጁ ካርታዎ $utilitiesጋር ይዋሃዳል ። $utilitiesየመገልገያ ካርታው የሚከተሉትን አማራጮች የሚቀበሉ የመገልገያ ቡድኖች ዝርዝር ይዟል፡

አማራጭ	ዓይነት	ነባሪ እሴት	መግለጫ
`property`	ያስፈልጋል	–	የንብረቱ ስም ፣ ይህ ሕብረቁምፊ ወይም የሕብረቁምፊዎች ድርድር ሊሆን ይችላል (ለምሳሌ ፣ አግድም ንጣፍ ወይም ህዳጎች)።
`values`	ያስፈልጋል	–	የእሴቶች ዝርዝር፣ ወይም የክፍል ስም ከዋጋው ጋር አንድ አይነት እንዲሆን ካልፈለጉ ካርታ። `null`እንደ ካርታ ቁልፍ ጥቅም ላይ የሚውል ከሆነ `class`ለክፍል ስም አልተዘጋጀም።
`class`	አማራጭ	ባዶ	የተፈጠረው ክፍል ስም። ካልቀረበ እና `property`የሕብረቁምፊዎች ድርድር ከሆነ፣ `class`በነባሪነት ወደ `property`ድርድር የመጀመሪያው አካል ይሆናል። ካልቀረበ እና `property`ሕብረቁምፊ ከሆነ, `values`ቁልፎቹ ለስሞቹ ጥቅም ላይ ይውላሉ `class`.
`css-var`	አማራጭ	`false`	ከCSS ደንቦች ይልቅ የCSS ተለዋዋጮችን ለመፍጠር ቡሊያን።
`css-variable-name`	አማራጭ	ባዶ	በደንቡ ውስጥ ላለው የ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ቁልፍ ለማንኛውም መገልገያ መዋቀር አለበት፣ እና እሱ የሚሰራ የሲኤስኤስ ንብረት መያዝ አለበት። ይህ ንብረት በተፈጠረው የመገልገያ ደንብ ውስጥ ጥቅም ላይ ይውላል። ቁልፉ ሲቀር 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ዝርዝር ወይም ካርታ ሊሆን ይችላል (በመገልገያዎች ውስጥ ወይም በ Sass ተለዋዋጭ የተቀመጠ)።

እንደ ዝርዝር ፣ እንደ 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; }

ከሆነ class: null፣ ለእያንዳንዱ valuesቁልፎች ክፍሎችን ያመነጫል፡-

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

ውጤት፡

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

CSS ተለዋዋጭ መገልገያዎች

css-varየቦሊያን አማራጩን ያዋቅሩት እና ኤፒአይ ከተለመዱት ደንቦች trueይልቅ ለተሰጠው መራጭ የአካባቢ CSS ተለዋዋጮችን ያመነጫል ። ከክፍል ስም የተለየ የሲኤስኤስ ተለዋዋጭ ስም ለማዘጋጀት property: valueአማራጭ ያክሉ ።css-variable-name

የእኛን .text-opacity-*መገልገያዎች ግምት ውስጥ ያስገቡ. አማራጩን ከጨመርን css-variable-nameብጁ ውፅዓት እናገኛለን።

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

ውጤት፡

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 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. የግዛቶች ዝርዝር ሲቀርብ፣ ለዚያ አስመሳይ ክፍል የክፍል ስሞች ይፈጠራሉ። ለምሳሌ፣ በማንዣበብ ላይ ግልጽነት ለመለወጥ፣ ያክሉ state: hoverእና .opacity-hover:hoverወደ የእርስዎ የተቀናበረ CSS ያስገባሉ።

በርካታ አስመሳይ ክፍሎች ይፈልጋሉ? በክፍተ-የተለያዩ የግዛት ዝርዝር 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. የሚያስፈልጉን የ Sass ፋይሎችን ያረጋግጡ እና _utilities.scssመጀመሪያ ከመጡ በኋላ map-mergeተጨማሪ መገልገያዎችን ለመጨመር ይጠቀሙ። ለምሳሌ፣ ምላሽ cursorሰጭ መገልገያ ከሶስት እሴቶች ጋር እንዴት እንደሚታከል እነሆ።

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

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

@import "bootstrap/scss/utilities/api";

መገልገያዎችን አስተካክል።

በነባሪ $utilitiesካርታ ውስጥ ያሉትን መገልገያዎች map-getእና map-mergeተግባራት ያስተካክሉ። ከዚህ በታች ባለው ምሳሌ ላይ ለፍጆታዎቹ ተጨማሪ እሴት እየጨመርን ነው width። በመነሻ ይጀምሩ map-mergeእና የትኛውን መገልገያ ማሻሻል እንደሚፈልጉ ይግለጹ። ከዚያ ሆነው የመገልገያውን አማራጮች እና እሴቶች ለመድረስ እና ለማሻሻል "width"አብሮ የተሰራውን ካርታ ያውጡ።map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@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%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

ምላሽ ሰጪን አንቃ

በአሁኑ ጊዜ በነባሪ ምላሽ ላልሆኑ የመገልገያዎች ስብስብ ምላሽ ሰጪ ክፍሎችን ማንቃት ይችላሉ። ለምሳሌ፣ borderክፍሎቹን ምላሽ ሰጪ ለማድረግ፡-

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

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

@import "bootstrap/scss/utilities/api";

ይህ አሁን ለእያንዳንዱ መግቻ ነጥብ ምላሽ ሰጪ ልዩነቶች .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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

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

@import "bootstrap/scss/utilities/api";

መገልገያዎችን ያስወግዱ

ማናቸውንም ነባሪ መገልገያዎችን በ map-remove()Sass ተግባር ያስወግዱ ።

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

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

map-merge()እንዲሁም የ Sass ተግባርን መጠቀም እና nullመገልገያውን ለማስወገድ የቡድን ቁልፉን ማዘጋጀት ይችላሉ።

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

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

@import "bootstrap/scss/utilities/api";

አክል፣ አስወግድ፣ አስተካክል።

map-merge()በ Sass ተግባር ብዙ መገልገያዎችን ማከል፣ ማስወገድ እና መቀየር ይችላሉ ። የቀደሙትን ምሳሌዎች ወደ አንድ ትልቅ ካርታ እንዴት ማጣመር እንደሚችሉ እነሆ።

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

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

በ 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 ውስጥ ምንም ነገር አያወጣም፣ ለ RTLCSS removeየቁጥጥር መመሪያ ምስጋና ይግባው ።