Fara í aðalefni Farðu í skjalaleiðsögn
in English

Utility API

The utility API er Sass byggt tól til að búa til gagnsemi flokka.

Á þessari síðu

Bootstrap tól eru búin til með tólum API okkar og hægt er að nota til að breyta eða stækka sjálfgefið sett af tólaflokkum í gegnum Sass. Forritaskil gagnsemi okkar eru byggð á röð Sass korta og aðgerða til að búa til flokkafjölskyldur með ýmsum valkostum. Ef þú þekkir ekki Sass kort skaltu lesa upp opinberu Sass skjölin til að byrja.

Kortið $utilitiesinniheldur öll tólin okkar og er síðar sameinuð sérsniðnu $utilitieskortinu þínu, ef það er til staðar. Veitukortið inniheldur lykillista yfir veituhópa sem samþykkja eftirfarandi valkosti:

Valkostur Tegund Lýsing
property Áskilið Heiti eignarinnar, þetta getur verið strengur eða fylki strengja (td lárétt bólstrun eða spássíur).
values Áskilið Listi yfir gildi, eða kort ef þú vilt ekki að flokksnafnið sé það sama og gildið. Ef nullhann er notaður sem kortalykill er hann ekki settur saman.
class Valfrjálst Breyta fyrir flokksheitið ef þú vilt ekki að það sé það sama og eignin. Ef þú gefur ekki upp classlykilinn og propertylykillinn er fylki af strengjum, verður flokksheitið fyrsti þátturinn í propertyfylkinu.
state Valfrjálst Listi yfir gerviflokkafbrigði eins og :hovereða :focustil að búa til fyrir tólið. Ekkert sjálfgefið gildi.
responsive Valfrjálst Boolean gefur til kynna hvort búa þurfi til móttækilega flokka. falsesjálfgefið.
rfs Valfrjálst Boolean til að gera kleift að endurskala vökva. Skoðaðu RFS síðuna til að komast að því hvernig þetta virkar. falsesjálfgefið.
print Valfrjálst Boolean gefur til kynna hvort búa þurfi til prentflokka. falsesjálfgefið.
rtl Valfrjálst Boolean sem gefur til kynna hvort nota ætti að vera í RTL. truesjálfgefið.

API útskýrt

Öllum nytjabreytum er bætt við $utilitiesbreytuna í _utilities.scssstílblaðinu okkar. Hver hópur veitu lítur einhvern veginn svona út:

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

Sem gefur út eftirfarandi:

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

Sérsniðið flokksforskeyti

Notaðu classvalkostinn til að breyta flokksforskeyti sem notað er í samsettu CSS:

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

Framleiðsla:

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

Ríki

Notaðu statemöguleikann til að búa til gerviflokkaafbrigði. Dæmi um gerviflokkar eru :hoverog :focus. Þegar listi yfir ríki er veittur eru flokksnöfn búin til fyrir þann gerviflokk. Til dæmis, til að breyta ógagnsæi á sveimi skaltu bæta við state: hoverog þú munt komast .opacity-hover:hoverinn í samansetta CSS.

Þarftu marga gerviflokka? Notaðu bilaðskilinn lista yfir ríki: state: hover focus.

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

Framleiðsla:

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

Móttækileg tól

Bættu við responsiveboolean til að búa til móttækileg tól (td .opacity-md-25) yfir alla brotpunkta .

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

Framleiðsla:

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

Breyting á veitum

Hneka núverandi tólum með því að nota sama lykil. Til dæmis, ef þú vilt fá fleiri móttækilega yfirflæðisveituflokka, geturðu gert þetta:

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

Ef printvalkosturinn er virkur mun einnig myndast gagnsemisflokkar fyrir prentun, sem eru aðeins notaðir innan @media print { ... }fjölmiðlafyrirspurnarinnar.

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

Framleiðsla:

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

Mikilvægi

Öll tól sem myndast af API innihalda !importanttil að tryggja að þau hnekkja íhlutum og breytingaflokkum eins og ætlað er. Þú getur skipt um þessa stillingu á heimsvísu með $enable-important-utilitiesbreytunni (sjálfgefið er true).

Með því að nota API

Nú þegar þú ert kunnugur hvernig forritaskil tóla virka skaltu læra hvernig á að bæta við eigin sérsniðnum flokkum og breyta sjálfgefnum tólum okkar.

Bæta við tólum

Hægt er að bæta nýjum tólum við sjálfgefið $utilitieskort með map-merge. Gakktu úr skugga um að nauðsynlegar Sass skrár okkar og _utilities.scssséu fluttar inn fyrst, notaðu síðan map-mergetil að bæta við viðbótartólum þínum. Til dæmis, hér er hvernig á að bæta við móttækilegu cursortóli með þremur gildum.

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

Breyta tólum

Breyttu núverandi tólum á sjálfgefna $utilitieskortinu með map-getog map-mergeaðgerðum. Í dæminu hér að neðan erum við að bæta við viðbótarvirði við widthveiturnar. Byrjaðu á upphafsstaf map-mergeog tilgreindu síðan hvaða tól þú vilt breyta. Þaðan skaltu sækja hreiður "width"kortið með map-gettil að fá aðgang að og breyta valkostum og gildum tólsins.

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

Virkja móttækilegur

Þú getur virkjað móttækilega flokka fyrir núverandi sett af tólum sem eru ekki móttækileg sjálfgefið. Til dæmis, til að gera borderbekkina móttækilega:

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

Þetta mun nú búa til móttækileg afbrigði af .borderog .border-0fyrir hvern brotpunkt. Mynduð CSS mun líta svona út:

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

Endurnefna tól

Vantar v4 tól, eða vanur annarri nafnavenju? Hægt er að nota forritaskil tóla til að hnekkja niðurstöðu classtiltekins tóls - til dæmis til að endurnefna .ms-*tól í 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 ),
    ),
  )
);

Fjarlægðu tól

Fjarlægðu eitthvað af sjálfgefnum tólum með því að stilla hóplykilinn á null. Til dæmis, til að fjarlægja öll widthtólin okkar, búðu til $utilities map-mergeog bættu við "width": nullinnan.

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

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

Fjarlægðu tól í RTL

Sum jaðarhylki gera RTL stíl erfitt , svo sem línuskil á arabísku. Þannig er hægt að sleppa tólum úr RTL framleiðslu með því að stilla rtlvalkostinn á false:

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

Framleiðsla:

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

Þetta gefur ekki út neitt í RTL, þökk sé RTLCSS removestjórnskipuninni .