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	Default valorem	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	null	Nomine generati classis. Si non provisum `property`est chordarum ordinatio, `class`primum elementum `property`ordinatae deficeret.
`css-var`	Libitum	`false`	Boolean generare CSS variabiles pro regulas CSS.
`local-vars`	Libitum	null	Tabula variabilium locorum CSS generandi praeter regulas CSS.
`state`	Libitum	null	Index variantium pseudo-classis (exempli, `:hover`vel `:focus`) generandi.
`responsive`	Libitum	`false`	Boolean indicans si classes responsivas generarentur.
`rfs`	Libitum	`false`	Boolean ut fluidum rescaling cum RFS .
`print`	Libitum	`false`	Boolean indicans si classes print generari necesse est.
`rtl`	Libitum	`true`	Boolean indicans si utilitas in RTL.

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

Property

Clavis requiritur propertyad quamlibet utilitatem apponi debet, et bona CSS valida continere debet. Haec proprietas in generatae utilitate regulaset usus est. Cum classclavem omiserit, etiam pro defectu classis nomen habet. text-decorationutilitatem considera :

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

Output:

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

Values

Utere valuesclavem ad specificandum qui valores ad definitos propertyadhibeantur in nominibus et regulis classis generatis. Potest esse index vel tabula (in utilitatibus vel in Sass variabilis posita).

Sicut album, sicut cum text-decorationutilitate :

values: none underline line-through

Cum charta geographica, sicut cum opacityutilitate ;

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

Sicut Sass variabilis quae ponit album vel tabulam, sicut in positionutilitatibus nostris :

values: $position-values

Classis

Optione utere classut praepositionem mutandi in CSS compilata adhibita. Exempli gratia mutare ab .opacity-*in .o-*:

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

Output:

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

CSS variabilis utilitas

css-varOptionem booleanam pone trueet API variabiles locales CSS generabit pro datis selectoris loco consuetis property: valueregulis. Nostras .text-opacity-*utilitates considera:

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

Output:

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

Locus CSS variabiles

Optione utere local-varsut describam mappam Sass quae variabiles locales CSS generabit intra regulas ordinis utilitates. Quaeso note quod opus additicium requirat ad sumendas CSS variabiles locales regulas CSS generatae. .bg-*Verbi gratia, utilitates nostras considera :

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

Output:

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

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

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

Print

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.

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

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 .

utilitas API

API explicavit

Property

Values ​​​​

Classis

CSS variabilis utilitas

Locus CSS variabiles

Foederatae

Responsivum

Print

Momentum

Using the API

Override utilitates

Addere utilitates

Modificare utilitates

Admitte responsive

Rename utilitates

Aufer utilitates

Remove utilitatem in RTL

Values