උපයෝගිතා API

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

මෙම පිටුවේ

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

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

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

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

අභිරුචි පන්ති උපසර්ගය

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 මත පාරාන්ධතාව වෙනස් කිරීමට, එකතු කරන්න 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; }
}

උපයෝගිතා වෙනස් කිරීම

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

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

වැදගත්කම

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

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

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

උපයෝගිතා එකතු කරන්න

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