utilitas API

Utilitas API est a Sass-substructio instrumentum ad utilitatem genera generandam.

In hac pagina

Utilitas Bootstrap generatur cum utilitate nostra API et adhiberi potest ad modificandam vel extendendam nostrum defectum certae utilitatis per Sass. Utilitas nostra API fundatur in serie mappis Sass et functionibus ad generandas familias classes cum variis optionibus. Si ignotas es cum mappis Sass, lege in officiali Sass docs ut incipias.

Tabula $utilitiesgeographica continet omnes utilitates nostras et postea cum tua consuetudine inducitur $utilities, si praesens adest. Utilitas tabula continet indicem coetuum utilitatum clausularum quae sequentes optiones accipiunt:

Option	Type	Descriptio
`property`	required	Nomen proprietatis, hoc chorda vel chordarum ordinata (exempli gratia, paddding vel marginibus horizontalibus).
`values`	required	Index valorum, vel charta geographica si nomen generis non vis idem esse ac pretium. Si `null`tabula clavem adhibet, non compilata est.
`class`	Libitum	Varium pro genere nominis si idem esse quod proprietas non vis. In casu `class`clavem et `property`clavem chordarum ordinatam non praebes, classis nomen primum ordinatae erit elementum `property`.
`state`	Libitum	Index variantium pseudo-classis similis `:hover`vel `:focus`generandi ad utilitatem. Nullus defectus pretii est.
`responsive`	Libitum	Boolean indicans si classes responsivas generari necesse est. `false`per defaltam.
`rfs`	Libitum	Boolean ut liquor rescaling. Inspice RFS paginam ut cognoscas quomodo haec opera sint. `false`per defaltam.
`print`	Libitum	Boolean indicans si classes print generari necesse est. `false`per defaltam.
`rtl`	Libitum	Boolean indicans si utilitas in RTL. `true`per defaltam.

API explicavit

Omnis utilitas variabilium $utilitiesvariabili in nostro _utilities.scssstylesheet. Uniuscuiusque utilitatis aliquid simile hoc spectat:

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

Quae sequuntur outputs:

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

Consuetudo classis praeposita

Optione utere classut praepositionem mutandi in CSS compilata usus est:

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

Output:

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

Foederatae

Ope utere statead generandum variationes pseudo-classis. Exemplum pseudo-classes sunt :hoveret :focus. Cum elenchus statuum provideatur, classnomina illi pseudo-classis creantur. Exempli gratia, opacitatem mutare in volitando, adde state: hoveret habebis .opacity-hover:hoverin compilata CSS.

Pluribus pseudo-classibus opus est? Utere spatio-separato indicem civitatum: state: hover focus.

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

Output:

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

Responsivum utilitates

Boolean adde responsiveutilitates responsivas (exempli gratia .opacity-md-25) per omnes confractiones generare .

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

Output:

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

Mutantur utilitates

Vincat utilitas existentium utendo eadem clavis. Exempli gratia, si voles additis responsivis, superfluis utilibus generibus, hoc facere potes;

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

Print utilitates

Optionem printefficere ut genera utilitatis etiam generabit pro impressis, quae tantum in @media print { ... }instrumentis quaestionis adhibentur.

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

Output:

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

Momentum

Omnes utilitates ab API generatas includunt !importantut elementa et determinatio classes prout intenduntur vincant. Hanc ambitum globally $enable-important-utilitiesvariabili (defaltis true).

Using the API

Nunc ut sis nota quam utilitas opera API, disce genus morem tuum addere et defectus nostros utilitates mutare.

Addere utilitates

Novae utilitates tabulae $utilitiesdefaltae cum a map-merge. Fac limas Sass requisitas nostras et _utilities.scssprimum invectas, deinde utere map-mergeut tuis additis utilitatibus adde. Exempli gratia, hic est utilitas responsiva cursorcum tribus valoribus addere.

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

Modificare utilitates

Modificare utilitates exsistentes in $utilitiestabula geographica defalta cum map-getet map-mergefunctionibus. In exemplo infra addito valorem widthutilitatibus addimus. Incipere cum initiali map-mergeet deinde specificare quam utilitatem vis mutare. Inde tabulam nidificandam affer "width"cum map-getaccessu ac modulo optionum et bonorum utilitatum.

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

Admitte responsive

Classes responsivas efficere potes pro statuto usuum existentium, quae nunc per defaltam non respondeant. Exempli gratia, borderclasses responsivas facere:

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

Hoc nunc generabit variationes responsivas .borderet .border-0pro unoquoque breakpoint. Generatae tuae CSS videbunt sic:

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

Rename utilitates

Absentis v4 utilitates, vel ad aliam conventionem nominandi usus? Utilitas API adhiberi potest ad consequens classutilitatem datam delendi-exempli gratia, .ms-*renominandi utilitates ad vetustatem .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 ),
    ),
  )
);

Aufer utilitates

Aufer aliquem ex defectu utilitatis, ponendo clavem coetus ad null. Exempli causa, ut omnes utilitates nostras removeas , intus widthcondat $utilities map-mergeet adde ."width": null

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

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

Remove utilitatem in RTL

Nonnulli casus in margine RTL difficilem faciunt , ut in arabice linea erumpit. Sic utilitates ab output RTL excidere possunt, rtloptione ad disponendum false:

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

Output:

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

Hoc non in RTL output, per RTLCSS removeimperium directivum .