Utility API

Mae'r API cyfleustodau yn offeryn seiliedig ar Sass i gynhyrchu dosbarthiadau cyfleustodau.

Ar y dudalen hon

Cynhyrchir cyfleustodau Bootstrap gyda'n API cyfleustodau a gellir eu defnyddio i addasu neu ymestyn ein set ddiofyn o ddosbarthiadau cyfleustodau trwy Sass. Mae ein API cyfleustodau yn seiliedig ar gyfres o fapiau Sass a swyddogaethau ar gyfer cynhyrchu teuluoedd o ddosbarthiadau gydag opsiynau amrywiol. Os ydych chi'n anghyfarwydd â mapiau Sass, darllenwch ar y dogfennau Sass swyddogol i ddechrau.

Mae'r $utilitiesmap yn cynnwys ein holl gyfleustodau ac fe'i cyfunir yn ddiweddarach â'ch $utilitiesmap personol, os yw'n bresennol. Mae'r map cyfleustodau yn cynnwys rhestr allweddi o grwpiau cyfleustodau sy'n derbyn yr opsiynau canlynol:

Opsiwn	Math	Disgrifiad
`property`	Angenrheidiol	Enw'r priodwedd, gall hyn fod yn llinyn neu'n gyfres o linynnau (ee padinau llorweddol neu ymylon).
`values`	Angenrheidiol	Rhestr o werthoedd, neu fap os nad ydych am i enw'r dosbarth fod yr un fath â'r gwerth. Os caiff `null`ei ddefnyddio fel allwedd map, nid yw'n cael ei lunio.
`class`	Dewisol	Yn amrywio ar gyfer enw'r dosbarth os nad ydych am iddo fod yr un fath â'r eiddo. Rhag ofn na fyddwch yn darparu'r `class`allwedd a'r `property`allwedd yw amrywiaeth o linynnau, enw'r dosbarth fydd elfen gyntaf yr `property`arae.
`state`	Dewisol	Rhestr o amrywiadau ffug-ddosbarth fel `:hover`neu `:focus`i gynhyrchu ar gyfer y cyfleustodau. Dim gwerth rhagosodedig.
`responsive`	Dewisol	Boolean yn nodi a oes angen cynhyrchu dosbarthiadau ymatebol. `false`yn ddiofyn.
`rfs`	Dewisol	Boole i alluogi ail-raddio hylif. Edrychwch ar dudalen RFS i ddarganfod sut mae hyn yn gweithio. `false`yn ddiofyn.
`print`	Dewisol	Boolean yn nodi a oes angen cynhyrchu dosbarthiadau argraffu. `false`yn ddiofyn.
`rtl`	Dewisol	Boolean yn nodi a ddylid cadw cyfleustodau yn RTL. `true`yn ddiofyn.

Esboniad API

Mae'r holl newidynnau cyfleustodau yn cael eu hychwanegu at y $utilitiesnewidyn yn ein _utilities.scsstaflen arddull. Mae pob grŵp o gyfleustodau yn edrych rhywbeth fel hyn:

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

Sy'n allbynnu'r canlynol:

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

Rhagddodiad dosbarth personol

Defnyddiwch yr classopsiwn i newid y rhagddodiad dosbarth a ddefnyddir yn y CSS a luniwyd:

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

Allbwn:

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

Gwladwriaethau

Defnyddiwch yr stateopsiwn i gynhyrchu amrywiadau ffug-ddosbarth. Esiamplau ffug-ddosbarthiadau yw :hovera :focus. Pan ddarperir rhestr o daleithiau, crëir enwau dosbarth ar gyfer y ffug-ddosbarth hwnnw. Er enghraifft, i newid didreiddedd ar hofran, ychwanegwch state: hovera byddwch yn dod i .opacity-hover:hovermewn i'ch CSS a luniwyd.

Angen dosbarthiadau ffug lluosog? Defnyddiwch restr o gyflyrau wedi'u gwahanu gan ofod: state: hover focus.

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

Allbwn:

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

Cyfleustodau ymatebol

Ychwanegwch y responsiveboolean i gynhyrchu cyfleustodau ymatebol (ee, .opacity-md-25) ar draws pob torbwynt .

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

Allbwn:

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

Newid cyfleustodau

Diystyru cyfleustodau presennol trwy ddefnyddio'r un allwedd. Er enghraifft, os ydych chi eisiau dosbarthiadau cyfleustodau gorlif ymatebol ychwanegol, gallwch chi wneud hyn:

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

Cyfleustodau argraffu

Bydd galluogi'r printopsiwn hefyd yn cynhyrchu dosbarthiadau cyfleustodau i'w hargraffu, a ddefnyddir yn yr @media print { ... }ymholiad cyfryngau yn unig.

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

Allbwn:

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

Pwysigrwydd

Mae'r holl gyfleustodau a gynhyrchir gan yr API yn cynnwys !importantsicrhau eu bod yn diystyru cydrannau a dosbarthiadau addasu yn ôl y bwriad. Gallwch newid y gosodiad hwn yn fyd-eang gyda'r $enable-important-utilitiesnewidyn (rhagosodiadau i true).

Gan ddefnyddio'r API

Nawr eich bod chi'n gyfarwydd â sut mae'r API cyfleustodau yn gweithio, dysgwch sut i ychwanegu eich dosbarthiadau arfer eich hun ac addasu ein cyfleustodau diofyn.

Ychwanegu cyfleustodau

Gellir ychwanegu cyfleustodau newydd at y $utilitiesmap rhagosodedig gyda map-merge. Gwnewch yn siŵr bod ein ffeiliau Sass gofynnol ac _utilities.scssyn cael eu mewnforio yn gyntaf, yna defnyddiwch y map-mergei ychwanegu eich cyfleustodau ychwanegol. Er enghraifft, dyma sut i ychwanegu cursorcyfleustodau ymatebol gyda thri gwerth.

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

Addasu cyfleustodau

Addasu cyfleustodau presennol yn y $utilitiesmap rhagosodedig gyda map-geta map-mergeswyddogaethau. Yn yr enghraifft isod, rydym yn ychwanegu gwerth ychwanegol at y widthcyfleustodau. Dechreuwch gyda cychwynnol map-mergeac yna nodwch pa gyfleustodau rydych chi am eu haddasu. "width"O'r fan honno, ewch â'r map nythu map-geti gyrchu ac addasu opsiynau a gwerthoedd y cyfleustodau.

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

Galluogi ymatebol

Gallwch alluogi dosbarthiadau ymatebol ar gyfer set bresennol o gyfleustodau nad ydynt yn ymatebol yn ddiofyn ar hyn o bryd. Er enghraifft, i wneud y borderdosbarthiadau'n ymatebol:

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

Bydd hyn nawr yn cynhyrchu amrywiadau ymatebol o .borderac .border-0ar gyfer pob torbwynt. Bydd eich CSS a gynhyrchwyd yn edrych fel hyn:

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

Ail-enwi cyfleustodau

Cyfleustodau v4 ar goll, neu wedi arfer â chonfensiwn enwi arall? Gellir defnyddio'r API cyfleustodau i ddiystyru canlyniad classcyfleustodau penodol - er enghraifft, i ailenwi .ms-*cyfleustodau i hen .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 ),
    ),
  )
);

Dileu cyfleustodau

Tynnwch unrhyw un o'r cyfleustodau rhagosodedig trwy osod yr allwedd grŵp i null. Er enghraifft, i gael gwared ar ein holl widthgyfleustodau, creu $utilities map-mergeac ychwanegu "width": nullo fewn.

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

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

Dileu cyfleustodau yn RTL

Mae rhai achosion ymyl yn gwneud steilio RTL yn anodd , fel toriadau llinell mewn Arabeg. Felly gellir gollwng cyfleustodau o allbwn RTL trwy osod yr rtlopsiwn i false:

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

Allbwn:

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

Nid yw hyn yn allbwn unrhyw beth yn RTL, diolch i gyfarwyddeb reoli RTLCSSremove .