Utility API

Tha an API goireasach na inneal stèidhichte air Sass gus clasaichean goireis a ghineadh.

Air an duilleig seo

Bithear a’ cruthachadh goireasan Bootstrap leis an API goireasach againn agus faodar an cleachdadh gus an seata bunaiteach de chlasaichean goireis againn atharrachadh no a leudachadh tro Sass. Tha an API goireasach againn stèidhichte air sreath de mhapaichean Sass agus gnìomhan airson teaghlaichean de chlasaichean a ghineadh le diofar roghainnean. Mura h-eil thu eòlach air mapaichean Sass, leugh suas air na docaichean oifigeil Sass airson tòiseachadh.

Tha $utilitiesa h-uile goireas againn air a’ mhapa agus thèid a chur còmhla nas fhaide air adhart leis a’ $utilitiesmhapa àbhaisteach agad, ma tha e ann. Anns a’ mhapa ghoireasan tha liosta iuchrach de bhuidhnean goireis a ghabhas ris na roghainnean a leanas:

Roghainn	Seòrsa	Luach bunaiteach	Tuairisgeul
`property`	A dhìth	-	Ainm an togalaich, faodaidh seo a bhith na shreang no sreath de shreathan (me, pleadhagan còmhnard no oirean).
`values`	A dhìth	-	Liosta luachan, no mapa mura h-eil thu airson gum bi ainm a’ chlas co-ionann ris an luach. Ma thèid `null`a chleachdadh mar iuchair mapa, `class`chan eil e air a chur ri ainm a' chlas.
`class`	Roghainneil	null	Ainm a 'chlas a chaidh a chruthachadh. Mura tèid a thoirt seachad agus `property`gur e sreath de shreathan a th’ ann, `class`bidh e bunaiteach don chiad eileamaid den `property`raon. Mura h-eil e air a sholarachadh agus `property`gur e sreang a th’ ann, thèid na `values`h-iuchraichean a chleachdadh airson nan `class`ainmean.
`css-var`	Roghainneil	`false`	Boolean gus caochladairean CSS a ghineadh an àite riaghailtean CSS.
`css-variable-name`	Roghainneil	null	Ainm gnàthaichte gun ro-leasachan airson an caochladair CSS taobh a-staigh an t-seata riaghailtean.
`local-vars`	Roghainneil	null	Mapa de chaochladairean CSS ionadail ri ghineadh a bharrachd air riaghailtean CSS.
`state`	Roghainneil	null	Liosta de chaochlaidhean clas-brèige (me, `:hover`no `:focus`) airson gineadh.
`responsive`	Roghainneil	`false`	Boolean a’ nochdadh am bu chòir clasaichean freagairteach a chruthachadh.
`rfs`	Roghainneil	`false`	Boolean gus ath-sgèileadh lionn a chomasachadh le RFS .
`print`	Roghainneil	`false`	Boolean ag innse a bheil feum air clasaichean clò-bhualaidh a chruthachadh.
`rtl`	Roghainneil	`true`	Boolean a’ nochdadh am bu chòir goireasachd a chumail ann an RTL.

API air a mhìneachadh

Tha a h-uile caochladair goireis air an cur ris a’ $utilitieschaochladair taobh a-staigh ar _utilities.scssduilleag stoidhle. Bidh gach buidheann de ghoireasan a’ coimhead rudeigin mar seo:

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

A bheir a-mach na leanas:

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

Seilbh

Feumaidh an propertyiuchair a tha a dhìth a bhith air a shuidheachadh airson goireas sam bith, agus feumaidh seilbh CSS dligheach a bhith ann. Tha an togalach seo air a chleachdadh ann an riaghailtean a’ ghoireas gineadh. Nuair a thèid an classiuchair fhàgail a-mach, bidh e cuideachd na ainm clas bunaiteach. Beachdaich air an text-decorationgoireas:

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

Toradh:

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

Luachan

Cleachd an valuesiuchair gus sònrachadh dè na luachan airson na chaidh a shònrachadh propertya bu chòir a chleachdadh anns na h-ainmean agus na riaghailtean clas a chaidh a chruthachadh. Faodaidh e a bhith na liosta no mapa (suidhichte anns na goireasan no ann an caochladair Sass).

Mar liosta, mar le text-decorationgoireasan :

values: none underline line-through

Mar mhapa, mar le opacitygoireasan :

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

Mar caochladair Sass a tha a’ suidheachadh an liosta no a’ mhapa, mar anns na positiongoireasan againn :

values: $position-values

Clas

Cleachd an classroghainn gus an ro-leasachan clas a chaidh a chleachdadh anns an CSS a chaidh a chur ri chèile atharrachadh. Mar eisimpleir, airson atharrachadh .opacity-*bho .o-*:

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

Toradh:

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

Ma tha class: null, cruthaich clasaichean airson gach aon de na h- valuesiuchraichean:

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

Toradh:

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

Goireasan caochlaideach CSS

Suidhich an css-varroghainn boolean trueagus cruthaichidh an API caochladairean CSS ionadail airson an roghnaichear a chaidh a thoirt seachad an àite nan property: valueriaghailtean àbhaisteach. Cuir roghainn css-variable-nameris gus ainm caochlaideach CSS a shuidheachadh seach ainm a’ chlas.

Beachdaich air na .text-opacity-*goireasan againn. Ma chuireas sinn an css-variable-nameroghainn ris, gheibh sinn toradh àbhaisteach.

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

Toradh:

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

Caochladairean CSS ionadail

Cleachd an local-varsroghainn mapa Sass a shònrachadh a ghineas caochladairean CSS ionadail taobh a-staigh seata riaghailtean a’ chlas goireis. Thoir an aire gur dòcha gu feum e obair a bharrachd gus na caochladairean CSS ionadail sin ithe anns na riaghailtean CSS a chaidh a chruthachadh. Mar eisimpleir, beachdaich air na .bg-*goireasan againn:

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

Toradh:

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

Stàitean

Cleachd an stateroghainn gus caochlaidhean clas-brèige a ghineadh. Tha eisimpleirean de chlasaichean pseudo :hoveragus :focus. Nuair a thèid liosta de stàitean a thoirt seachad, thèid ainmean-clas a chruthachadh airson a’ chlas-brèige sin. Mar eisimpleir, gus neo-sheasmhachd atharrachadh air hover, cuir ris state: hoveragus gheibh thu a- .opacity-hover:hoversteach don CSS cruinnichte agad.

A bheil feum agad air grunn chlasaichean pseudo? Cleachd liosta de stàitean a tha air an sgaradh le àite: state: hover focus.

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

Toradh:

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

Freagarrach

Cuir am responsiveboolean ris gus goireasan freagairteach a ghineadh (me, .opacity-md-25) thar gach briseadh .

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

Toradh:

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

Clò-bhuail

Le bhith a ’ comasachadh an printroghainn cruthaichidh sin clasaichean goireis airson clò-bhualadh, nach tèid an cur an sàs ach taobh a-staigh ceist nam meadhanan.@media print { ... }

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

Toradh:

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

Cudromach

Tha a h-uile goireas a ghineadh leis an API a’ toirt a-steach !importantdèanamh cinnteach gu bheil iad a’ dol thairis air co-phàirtean agus clasaichean atharrachaidh mar a bha dùil. 'S urrainn dhut an suidheachadh seo a thionndadh gu cruinne leis a' $enable-important-utilitieschaochladair (bunaiteachan gu true).

A 'cleachdadh an API

A-nis gu bheil thu eòlach air mar a tha an API goireasan ag obair, ionnsaich mar a chuireas tu na clasaichean àbhaisteach agad fhèin ris agus atharraich na goireasan bunaiteach againn.

Thoir thairis air goireasan

Cuir thairis air na goireasan a th’ ann mar-thà le bhith a’ cleachdadh an aon iuchair. Mar eisimpleir, ma tha thu ag iarraidh clasaichean goireasach thar-shruth freagairteach a bharrachd, faodaidh tu seo a dhèanamh:

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

Cuir goireasan ris

$utilitiesFaodar goireasan ùra a chur ris a’ mhapa bunaiteach le faidhle map-merge. Dèan cinnteach gu bheil na faidhlichean Sass a tha a dhìth oirnn agus _utilities.scssair an toirt a-steach an toiseach, agus an uairsin cleachd iad map-mergegus na goireasan a bharrachd agad a chuir ris. Mar eisimpleir, seo mar a chuireas tu goireas freagairteach cursorle trì luachan ris.

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

Atharraich goireasan

Atharraich na goireasan a th’ ann mar-thà air a’ $utilitiesmhapa bunaiteach le map-getagus map-mergegnìomhan. Anns an eisimpleir gu h-ìosal, tha sinn a’ cur luach a bharrachd ris na widthgoireasan. Tòisich le toiseach map-mergeagus an uairsin sònraich dè an goireas a tha thu airson atharrachadh. "width"Às an sin, faigh am mapa neadachaidh map-getgus faighinn gu agus atharraich roghainnean agus luachan a’ ghoireas.

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

Dèan comas freagairteach

Is urrainn dhut clasaichean freagairteach a chomasachadh airson seata ghoireasan a th’ ann mar-thà nach eil freagairteach gu gnàthach. Mar eisimpleir, gus na borderclasaichean a dhèanamh freagairteach:

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

Ginidh seo a-nis atharrachaidhean freagairteach de .borderagus .border-0airson gach briseadh. Bidh an CSS a chruthaich thu a’ coimhead mar seo:

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

Ath-ainmich goireasan

A bheil goireasan v4 a dhìth, no cleachdte ri gnàthachas ainmeachaidh eile? Faodar an API goireasan a chleachdadh gus faighinn thairis classair toradh goireas sònraichte - mar eisimpleir, gus .ms-*goireasan ath-ainmeachadh gu seann .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";

Thoir air falbh goireasan

Thoir air falbh gin de na goireasan bunaiteach leis a’ map-remove()ghnìomh 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";

Faodaidh tu cuideachd an map-merge()gnìomh Sass a chleachdadh agus an iuchair buidhne a shuidheachadh nullgus an goireas a thoirt air falbh.

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

Cuir ris, thoir air falbh, atharraich

Faodaidh tu mòran ghoireasan a chur ris, a thoirt air falbh agus atharrachadh uile aig an aon àm leis a’ map-merge()ghnìomh Sass . Seo mar as urrainn dhut na h-eisimpleirean a bh’ ann roimhe a chur còmhla ann an aon mhapa nas motha.

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

Thoir air falbh goireas ann an RTL

Bidh cuid de chùisean iomaill a’ dèanamh stoidhle RTL duilich , leithid briseadh loidhne ann an Arabais. Mar sin faodar goireasan a leigeil a-mach à toradh RTL le bhith a’ suidheachadh an rtlroghainn gu false:

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

Toradh:

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

Cha bhith seo a’ toirt a-mach dad ann an RTL, le taing do stiùireadh smachd RTLCSSremove .