Rach gu prìomh shusbaint Air adhart gu seòladh docs
in English

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 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 nulla chleachdadh mar iuchair mapa, chan eil e air a chur ri chèile.
class Roghainneil Atharrachadh airson ainm a’ chlas mura h-eil thu airson gum bi e an aon rud ris an togalach. Air eagal ‘s nach toir thu seachad an classiuchair agus propertyis e sreath de shreathan a bhios ann an iuchair, is e ainm a’ chlas a’ chiad eileamaid den propertyraon.
state Roghainneil Liosta de chaochlaidhean clas-brèige mar :hoverno :focusa ghineadh airson a’ ghoireas. Gun luach bunaiteach.
responsive Roghainneil Boolean a’ nochdadh a bheil feum air clasaichean freagairteach a chruthachadh. falsea ghnàth.
rfs Roghainneil Boolean gus ath-sgèileadh lionn a chomasachadh. Thoir sùil air duilleag RFS gus faighinn a-mach mar a tha seo ag obair. falsea ghnàth.
print Roghainneil Boolean ag innse a bheil feum air clasaichean clò-bhualaidh a chruthachadh. falsea ghnàth.
rtl Roghainneil Boolean a’ nochdadh am bu chòir goireasachd a chumail ann an RTL. truea ghnàth.

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

Ro-leasachan clas gnàthaichte

Cleachd an classroghainn gus an ro-leasachan clas a chleachdadh anns an CSS a chaidh a chur ri chèile atharrachadh:

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

Toradh:

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

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

Goireasan freagairteach

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

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

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.

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

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

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

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

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

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

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

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

Thoir air falbh goireasan

Thoir air falbh gin de na goireasan bunaiteach le bhith a’ suidheachadh iuchair a’ chuantail gu null. Mar eisimpleir, gus na widthgoireasan againn uile a thoirt air falbh, cruthaich $utilities map-mergeagus cuir ris an taobh a "width": null-staigh.

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

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

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 .