Utility API

API i shërbimeve është një mjet i bazuar në Sass për të gjeneruar klasa të shërbimeve.

Në këtë faqe

Shërbimet e bootstrap krijohen me API-në tonë të shërbimeve dhe mund të përdoren për të modifikuar ose zgjeruar grupin tonë të paracaktuar të klasave të shërbimeve nëpërmjet Sass. API-ja jonë e shërbimeve bazohet në një seri hartash dhe funksionesh Sass për gjenerimin e familjeve të klasave me opsione të ndryshme. Nëse nuk jeni të njohur me hartat Sass, lexoni dokumentet zyrtare të Sass për të filluar.

Harta $utilitiespërmban të gjitha shërbimet tona dhe më vonë bashkohet me $utilitieshartën tuaj të personalizuar, nëse është e pranishme. Harta e shërbimeve përmban një listë të kyçur të grupeve të shërbimeve që pranojnë opsionet e mëposhtme:

Opsioni	Lloji	Përshkrim
`property`	E detyrueshme	Emri i pronës, ky mund të jetë një varg ose një grup vargjesh (p.sh., mbushje horizontale ose margjina).
`values`	E detyrueshme	Lista e vlerave ose një hartë nëse nuk dëshironi që emri i klasës të jetë i njëjtë me vlerën. Nëse `null`përdoret si çelës harte, ai nuk është i përpiluar.
`class`	Fakultative	Ndryshore për emrin e klasës nëse nuk dëshironi që ai të jetë i njëjtë me pronën. Në rast se nuk jepni `class`çelësin dhe `property`çelësi është një grup vargjesh, emri i klasës do të jetë elementi i parë i `property`grupit.
`state`	Fakultative	Lista e varianteve pseudo-klasë si `:hover`ose `:focus`për të gjeneruar për shërbimin. Asnjë vlerë e paracaktuar.
`responsive`	Fakultative	Boolean që tregon nëse duhet të krijohen klasa të përgjegjshme. `false`sipas parazgjedhjes.
`rfs`	Fakultative	Boolean për të mundësuar rishkallëzim të lëngut. Hidhini një sy faqes RFS për të zbuluar se si funksionon kjo. `false`sipas parazgjedhjes.
`print`	Fakultative	Boolean që tregon nëse duhet të krijohen klasa printimi. `false`sipas parazgjedhjes.
`rtl`	Fakultative	Boolean që tregon nëse programi duhet të mbahet në RTL. `true`sipas parazgjedhjes.

API shpjegohet

Të gjitha variablat e shërbimeve i shtohen $utilitiesvariablit brenda fletës sonë të _utilities.scssstilit. Çdo grup i shërbimeve duket diçka si kjo:

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

Që nxjerr sa vijon:

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

Prefiksi i personalizuar i klasës

Përdorni classopsionin për të ndryshuar prefiksin e klasës të përdorur në CSS të përpiluar:

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

Prodhimi:

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

shtetet

Përdorni stateopsionin për të gjeneruar variacione pseudo-klasë. Shembull pseudo-klasa janë :hoverdhe :focus. Kur ofrohet një listë gjendjesh, krijohen emra klasash për atë pseudo-klasë. Për shembull, për të ndryshuar opacitetin në hover, shtoni state: hoverdhe do të .opacity-hover:hoverfuteni në CSS tuaj të përpiluar.

Keni nevojë për pseudo-klasa të shumta? Përdorni një listë gjendjesh të ndarë me hapësirë: state: hover focus.

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

Prodhimi:

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

Shërbimet e përgjegjshme

Shto responsiveboolean për të gjeneruar shërbime të përgjegjshme (p.sh., .opacity-md-25) në të gjitha pikat e ndërprerjes .

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

Prodhimi:

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

Ndryshimi i shërbimeve

Anuloni shërbimet ekzistuese duke përdorur të njëjtin çelës. Për shembull, nëse dëshironi klasa shtesë të shërbimeve të tejmbushjes së përgjegjshme, mund ta bëni këtë:

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

Shërbimet e printimit

Aktivizimi i printopsionit do të gjenerojë gjithashtu klasa të shërbimeve për printim, të cilat aplikohen vetëm brenda @media print { ... }pyetjes së medias.

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

Prodhimi:

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

rëndësi

Të gjitha shërbimet e gjeneruara nga API përfshijnë !importantpër t'u siguruar që ato të anashkalojnë komponentët dhe klasat e modifikuesve siç synohet. Ju mund ta ndryshoni këtë cilësim globalisht me $enable-important-utilitiesvariablin (e parazgjedhur në true).

Duke përdorur API

Tani që jeni njohur me mënyrën se si funksionon API i shërbimeve, mësoni se si të shtoni klasat tuaja të personalizuara dhe të modifikoni shërbimet tona të paracaktuara.

Shto shërbimet komunale

Shërbimet e reja mund të shtohen në $utilitieshartën e paracaktuar me një map-merge. Sigurohuni që skedarët tanë të kërkuar Sass dhe _utilities.scsstë importohen fillimisht, më pas përdorni map-mergepër të shtuar shërbimet tuaja shtesë. Për shembull, ja se si të shtoni një mjet të përgjegjshëm cursorme tre vlera.

@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,
    )
  )
);

Ndrysho shërbimet

Modifikoni shërbimet ekzistuese në $utilitieshartën e paracaktuar me map-getdhe map-mergefunksionet. Në shembullin e mëposhtëm, ne po u shtojmë një vlerë shtesë widthshërbimeve. Filloni me një inicial map-mergedhe më pas specifikoni cilin program dëshironi të modifikoni. Nga atje, merrni "width"hartën e ndërlidhur me map-getpër të hyrë dhe modifikuar opsionet dhe vlerat e programit.

@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%),
        ),
      ),
    ),
  )
);

Aktivizo responsive

Mund të aktivizoni klasa të përgjegjshme për një grup ekzistues shërbimesh që nuk janë aktualisht të përgjegjshme si parazgjedhje. Për shembull, për t'i bërë borderklasat të përgjegjshme:

@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 ),
    ),
  )
);

Kjo tani do të gjenerojë variacione të përgjegjshme të .borderdhe .border-0për çdo pikë ndërprerjeje. CSS-ja juaj e krijuar do të duket kështu:

.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 { ... }
}

Riemërtoni shërbimet

Mungojnë shërbimet v4, apo janë përdorur në një konventë tjetër emërtimi? Utilities API mund të përdoret për të anashkaluar rezultatin classe një programi të caktuar - për shembull, për të riemërtuar .ms-*shërbimet në Oldish .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 ),
    ),
  )
);

Hiq shërbimet

Hiqni ndonjë nga shërbimet e paracaktuara duke vendosur tastin e grupit në null. Për shembull, për të hequr të gjitha widthshërbimet tona, krijoni një $utilities map-mergedhe shtoni "width": nullbrenda.

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

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

Hiq programin në RTL

Disa kuti të skajeve e bëjnë të vështirë stilimin e RTL , si p.sh. ndërprerjet e rreshtave në arabisht. Kështu, shërbimet mund të hiqen nga dalja RTL duke vendosur rtlopsionin në false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Prodhimi:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Kjo nuk nxjerr asgjë në RTL, falë direktivës së kontrollit RTLCSSremove .