መገልገያ ኤፒአይ

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

በዚህ ገጽ ላይ

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

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

አማራጭ	ዓይነት	መግለጫ
`property`	ያስፈልጋል	የንብረቱ ስም ፣ ይህ ሕብረቁምፊ ወይም የሕብረቁምፊዎች ድርድር ሊሆን ይችላል (ለምሳሌ ፣ አግድም ንጣፍ ወይም ህዳጎች)።
`values`	ያስፈልጋል	የእሴቶች ዝርዝር፣ ወይም የክፍል ስም ከዋጋው ጋር አንድ አይነት እንዲሆን ካልፈለጉ ካርታ። `null`እንደ ካርታ ቁልፍ ጥቅም ላይ ከዋለ፣ አልተጠናቀረም ።
`class`	አማራጭ	ከንብረቱ ጋር አንድ አይነት እንዲሆን ካልፈለጉ ለክፍል ስም ተለዋዋጭ። ቁልፉን ካላቀረቡ `class`እና `property`ቁልፉ የሕብረቁምፊዎች ድርድር ከሆነ፣ የክፍል ስም `property`የድርድር የመጀመሪያ አካል ይሆናል።
`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. የግዛቶች ዝርዝር ሲቀርብ፣ ለዚያ አስመሳይ ክፍል የክፍል ስሞች ይፈጠራሉ። ለምሳሌ፣ በማንዣበብ ላይ ግልጽነት ለመለወጥ፣ ያክሉ 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; }
}

መገልገያዎችን መለወጥ

ተመሳሳዩን ቁልፍ በመጠቀም ያሉትን መገልገያዎች ይሽሩ። ለምሳሌ፣ ተጨማሪ ምላሽ ሰጪ የትርፍ ፍሰት መገልገያ ክፍሎችን ከፈለጉ፣ ይህን ማድረግ ይችላሉ፡-

$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. የሚያስፈልጉን የ Sass ፋይሎችን ያረጋግጡ እና _utilities.scssመጀመሪያ ከመጡ በኋላ map-mergeተጨማሪ መገልገያዎችን ለመጨመር ይጠቀሙ። ለምሳሌ፣ ምላሽ 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መገልገያዎቻችንን ለማስወገድ፣ ይፍጠሩ $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 ውስጥ ምንም ነገር አያወጣም፣ ለ RTLCSS removeየቁጥጥር መመሪያ ምስጋና ይግባው ።