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	Vlera e paracaktuar	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 i hartës, `class`nuk është i lidhur me emrin e klasës.
`class`	Fakultative	i pavlefshëm	Emri i klasës së krijuar. Nëse nuk ofrohet dhe `property`është një grup vargjesh, `class`do të jetë i paracaktuar në elementin e parë të `property`grupit. Nëse nuk ofrohet dhe `property`është një varg, `values`çelësat përdoren për `class`emrat.
`css-var`	Fakultative	`false`	Boolean për të gjeneruar variabla CSS në vend të rregullave CSS.
`css-variable-name`	Fakultative	i pavlefshëm	Emër i personalizuar i paprefiksuar për variablin CSS brenda grupit të rregullave.
`local-vars`	Fakultative	i pavlefshëm	Harta e variablave lokale CSS për të gjeneruar përveç rregullave të CSS.
`state`	Fakultative	i pavlefshëm	Lista e varianteve pseudo-klasë (p.sh., `:hover`ose `:focus`) për të gjeneruar.
`responsive`	Fakultative	`false`	Boolean që tregon nëse duhet të krijohen klasa të përgjegjshme.
`rfs`	Fakultative	`false`	Boolean për të mundësuar rishkallëzimin e lëngjeve me RFS .
`print`	Fakultative	`false`	Boolean që tregon nëse duhet të krijohen klasa printimi.
`rtl`	Fakultative	`true`	Boolean që tregon nëse programi duhet të mbahet në RTL.

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

Prona

Çelësi i kërkuar propertyduhet të vendoset për çdo mjet dhe duhet të përmbajë një veti të vlefshme CSS. Kjo veti përdoret në grupin e rregullave të programit të gjeneruar. Kur classçelësi hiqet, ai shërben gjithashtu si emri i paracaktuar i klasës. Merrni parasysh text-decorationdobinë:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

Prodhimi:

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

Vlerat

Përdorni valuesçelësin për të specifikuar se cilat vlera për të specifikuarit propertyduhet të përdoren në emrat dhe rregullat e klasave të gjeneruara. Mund të jetë një listë ose hartë (e vendosur në shërbimet komunale ose në një variabël Sass).

Si një listë, si me text-decorationshërbimet komunale :

values: none underline line-through

Si një hartë, si me opacityshërbimet komunale :

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

Si një variabël Sass që përcakton listën ose hartën, si në positionshërbimet tona :

values: $position-values

Klasa

Përdorni classopsionin për të ndryshuar prefiksin e klasës të përdorur në CSS të përpiluar. Për shembull, për të ndryshuar nga .opacity-*në .o-*:

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

Prodhimi:

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

If class: null, gjeneron klasa për secilin nga valuesçelësat:

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

Prodhimi:

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

Shërbimet e ndryshueshme CSS

Vendosni css-varopsionin boolean në truedhe API do të gjenerojë variabla lokale CSS për përzgjedhësin e dhënë në vend të property: valuerregullave të zakonshme. Shtoni një opsional css-variable-namepër të vendosur një emër të ndryshëm variabli CSS nga emri i klasës.

Merrni parasysh shërbimet tona .text-opacity-*. Nëse shtojmë css-variable-nameopsionin, do të marrim një dalje të personalizuar.

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

Prodhimi:

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

Variablat lokale CSS

Përdorni local-varsopsionin për të specifikuar një hartë Sass që do të gjenerojë variabla lokale CSS brenda grupit të rregullave të klasës së shërbimeve. Ju lutemi vini re se mund të kërkojë punë shtesë për të konsumuar ato variabla lokale CSS në rregullat e krijuara të CSS. Për shembull, merrni parasysh .bg-*shërbimet tona:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

Prodhimi:

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

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

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

Printo

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.

Anuloni shërbimet

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

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/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";

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/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";

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/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";

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/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";

Hiq shërbimet

Hiqni ndonjë nga shërbimet e paracaktuara me map-remove()funksionin 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";

Mund të përdorni gjithashtu map-merge()funksionin Sass dhe të vendosni tastin e grupit për nulltë hequr programin.

@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";

Shtoni, hiqni, modifikoni

Mund të shtoni, hiqni dhe modifikoni shumë shërbime të gjitha menjëherë me map-merge()funksionin Sass . Ja se si mund të kombinoni shembujt e mëparshëm në një hartë më të madhe.

@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";

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 .