උපයෝගිතා API

උපයෝගිතා API යනු උපයෝගිතා පන්ති උත්පාදනය කිරීම සඳහා Sass මත පදනම් වූ මෙවලමකි.

මෙම පිටුවේ

Bootstrap උපයෝගිතා අපගේ උපයෝගිතා API සමඟ ජනනය වන අතර Sass හරහා අපගේ පෙරනිමි උපයෝගිතා පන්ති කට්ටලය වෙනස් කිරීමට හෝ දිගු කිරීමට භාවිතා කළ හැක. අපගේ උපයෝගිතා API විවිධ විකල්ප සමඟ පන්ති පවුල් උත්පාදනය කිරීම සඳහා Sass සිතියම් සහ කාර්යයන් මාලාවක් මත පදනම් වේ. ඔබ Sass සිතියම් ගැන නුහුරු නම්, ආරම්භ කිරීමට නිල Sass docs කියවන්න .

සිතියමෙහි අපගේ සියලු උපයෝගිතා අඩංගු වන අතර පසුව තිබේ නම්, ඔබේ අභිරුචි සිතියම $utilitiesසමඟ ඒකාබද්ධ වේ . $utilitiesඋපයෝගිතා සිතියමෙහි පහත විකල්ප පිළිගන්නා උපයෝගිතා කණ්ඩායම් ලැයිස්තුවක් අඩංගු වේ:

විකල්පය	ටයිප් කරන්න	පෙරනිමි අගය	විස්තර
`property`	අවශ්යයි	–	දේපලෙහි නම, මෙය තන්තුවක් හෝ තන්තු මාලාවක් විය හැකිය (උදා, තිරස් පෑඩිං හෝ මායිම්).
`values`	අවශ්යයි	–	ඔබට පන්තියේ නම වටිනාකමට සමාන වීමට අවශ්‍ය නැතිනම් අගයන් ලැයිස්තුව හෝ සිතියමක්. `null`සිතියම් යතුර ලෙස භාවිතා කරන්නේ නම් , `class`එය පන්තියේ නමට පෙරාතුව නොවේ.
`class`	විකල්ප	null	ජනනය කළ පන්තියේ නම. සපයා නොමැති නම් සහ `property`තන්තු මාලාවක් නම්, අරාවේ `class`පළමු මූලද්‍රව්‍යයට පෙරනිමි `property`වේ. සපයා නොමැති නම් සහ `property`තන්තුවක් නම්, නම් සඳහා `values`යතුරු භාවිතා වේ `class`.
`css-var`	විකල්ප	`false`	CSS රීති වෙනුවට CSS විචල්‍යයන් උත්පාදනය කිරීමට Boolean.
`css-variable-name`	විකල්ප	null	රීති කට්ටලය තුළ ඇති CSS විචල්‍යය සඳහා අභිරුචි-උපසර්ග නොකළ නම.
`local-vars`	විකල්ප	null	CSS රීති වලට අමතරව ජනනය කිරීමට දේශීය CSS විචල්‍යවල සිතියම.
`state`	විකල්ප	null	උත්පාදනය කිරීමට ව්‍යාජ පන්තියේ ප්‍රභේද ලැයිස්තුව (උදා, `:hover`හෝ ).`:focus`
`responsive`	විකල්ප	`false`	ප්‍රතිචාරාත්මක පන්ති ජනනය කළ යුතුද යන්න දක්වන බූලියන්.
`rfs`	විකල්ප	`false`	RFS සමඟින් තරල ප්‍රතිනිර්මාණය කිරීම සක්‍රීය කිරීමට බූලියන් .
`print`	විකල්ප	`false`	මුද්‍රණ පන්ති ජනනය කිරීමට අවශ්‍ය නම් බූලියන් පෙන්නුම් කරයි.
`rtl`	විකල්ප	`true`	RTL හි උපයෝගිතා තබා ගත යුතුද යන්න පෙන්නුම් කරන බූලියන්.

API පැහැදිලි කළේය

සියලුම උපයෝගිතා විචල්‍යයන් $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ලැයිස්තුවක් හෝ සිතියමක් විය හැක (උපයෝගිතා වල හෝ Sass විචල්‍යයක සකසා ඇත).

ලැයිස්තුවක් ලෙස, text-decorationඋපයෝගිතා සමඟ මෙන් :

values: none underline line-through

සිතියමක් ලෙස, opacityඋපයෝගිතා සමඟ මෙන් :

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

positionඅපගේ උපයෝගිතා වල මෙන් ලැයිස්තුව හෝ සිතියම සකසන Sass විචල්‍යයක් ලෙස :

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බූලියන් විකල්පය සකසන්න සහ API සුපුරුදු රීති trueවෙනුවට ලබා දී ඇති තේරීම සඳහා දේශීය CSS විචල්‍යයන් ජනනය කරයි. පන්තියේ නමට වඩා වෙනස් 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. ප්‍රාන්ත ලැයිස්තුවක් ලබා දුන් විට, එම ව්‍යාජ පන්තිය සඳහා පන්ති නාම නිර්මාණය වේ. උදාහරණයක් ලෙස, hover මත පාරාන්ධතාව වෙනස් කිරීමට, එකතු කරන්න 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) උත්පාදනය කිරීමට boolean එකතු කරන්න .

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

වැදගත්කම

API විසින් ජනනය කරන ලද සියලුම උපයෝගිතාවලට !importantඔවුන් අදහස් කරන පරිදි සංරචක සහ නවීකරණ පන්ති අභිබවා යන බව සහතික කිරීම ඇතුළත් වේ. ඔබට මෙම සැකසුම $enable-important-utilitiesවිචල්‍යය සමඟ ගෝලීයව ටොගල් කළ හැක (පෙරනිමිය වෙත true).

API භාවිතා කිරීම

දැන් ඔබ උපයෝගිතා API ක්‍රියා කරන ආකාරය ගැන හුරුපුරුදු බැවින්, ඔබේම අභිරුචි පන්ති එකතු කරන ආකාරය සහ අපගේ පෙරනිමි උපයෝගිතා වෙනස් කරන ආකාරය ඉගෙන ගන්න.

උපයෝගිතා අභිබවා යන්න

එකම යතුර භාවිතා කිරීමෙන් පවතින උපයෝගිතා අභිබවා යන්න. උදාහරණයක් ලෙස, ඔබට අමතර ප්‍රතිචාරාත්මක පිටාර ගැලීමේ උපයෝගිතා පන්ති අවශ්‍ය නම්, ඔබට මෙය කළ හැක:

$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 උපයෝගිතා අස්ථානගත වී තිබේද, නැතහොත් වෙනත් නම් කිරීමේ සම්මුතියකට භාවිතා කර තිබේද? ලබා දී ඇති උපයෝගීතාවයක ප්‍රතිඵලය අභිබවා යාමට උපයෝගිතා API භාවිතා කළ හැක 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පාලන විධානයට ස්තුති වන්නට .