Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
in English

Utility API

Is uirlis é an API fóntais atá bunaithe ar Sass chun ranganna fóntais a ghiniúint.

Ar an leathanach seo

Gintear fóntais Bootstrap lenár API fóntais agus is féidir iad a úsáid chun ár sraith ranganna fóntais réamhshocraithe a mhodhnú nó a leathnú trí Sass. Tá ár n-API fóntais bunaithe ar shraith léarscáileanna agus feidhmeanna Sass chun teaghlaigh ranganna a ghiniúint le roghanna éagsúla. Mura bhfuil cur amach agat ar léarscáileanna Sass, léigh suas ar na doiciméid oifigiúla Sass le tosú.

Tá $utilitiesár n-áiseanna go léir sa léarscáil agus cumasctar é níos déanaí le do $utilitiesléarscáil shaincheaptha, má tá sé i láthair. Tá liosta eochrach de ghrúpaí áirgiúlachta sa léarscáil áirgiúlachta a ghlacann leis na roghanna seo a leanas:

Rogha Cineál Cur síos
property Ag teastáil Ainm an airí, is féidir teaghrán nó sraith teaghráin a bheith anseo (m.sh., stuáil chothrománach nó imeall).
values Ag teastáil Liosta luachanna, nó léarscáil mura dteastaíonn uait go mbeadh ainm an ranga mar an gcéanna leis an luach. Má nullúsáidtear é mar eochair léarscáile, ní chuirtear le chéile í.
class Roghnach Athróg d’ainm an ranga mura dteastaíonn uait go mbeadh sé mar an gcéanna leis an airí. Sa chás nach soláthraíonn tú an classeochair agus propertyis sraith teaghráin í an eochair, is é ainm an ranga an chéad eilimint den propertyeagar.
state Roghnach Liosta de na leaganacha pseudo-aicme mhaith :hovernó :focusa ghiniúint le haghaidh an áirgiúlacht. Gan luach réamhshocraithe.
responsive Roghnach Boole ag tabhairt le fios an gá ranganna sofhreagracha a ghiniúint. falsede réir réamhshocraithe.
rfs Roghnach Boole chun athscálú sreabhán a chumasú. Breathnaigh ar leathanach an RFS le fáil amach conas a oibríonn sé seo. falsede réir réamhshocraithe.
print Roghnach Boole ag cur in iúl an gá ranganna priontála a ghiniúint. falsede réir réamhshocraithe.
rtl Roghnach Boole ag tabhairt le fios ar cheart fóntais a choinneáil in RTL. truede réir réamhshocraithe.

API mínithe

Cuirtear gach athróg áirgiúlachta leis an $utilitiesathróg laistigh dár _utilities.scssstílbhileog. Breathnaíonn gach grúpa fóntais rud éigin mar seo:

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

A aschuireann na nithe seo a leanas:

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

Réimír ranga saincheaptha

Úsáid an classrogha chun an réimír ranga a úsáidtear sa CSS tiomsaithe a athrú:

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

Aschur:

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

Stáit

Bain úsáid as an staterogha chun éagsúlachtaí pseudo-aicme a ghiniúint. Samplaí iad pseudo-ranganna :hoveragus :focus. Nuair a chuirtear liosta stáit ar fáil, cruthaítear ainmneacha ranga don pseudo-class sin. Mar shampla, chun teimhneacht a athrú ar ainlíon, cuir leis state: hoveragus gheobhaidh tú .opacity-hover:hoverdo CSS tiomsaithe.

An riachtanas is gá pseudo-ranganna iolracha? Bain úsáid as liosta stáit spásscartha: state: hover focus.

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

Aschur:

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

Fóntais sofhreagracha

Cuir an responsiveBoole leis chun fóntais shofhreagracha a ghiniúint (m.sh., .opacity-md-25) thar gach brisphointe .

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

Aschur:

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

Fóntais a athrú

Bain úsáid as an eochair chéanna a shárú fóntais atá ann cheana féin. Mar shampla, más mian leat ranganna breise freagrúla fóntais thar maoil, is féidir leat é seo a dhéanamh:

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

printAgus an rogha á chumasú ginfear ranganna áirgiúlachta le haghaidh priontála, nach gcuirtear i bhfeidhm ach amháin laistigh den @media print { ... }cheist meán.

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

Aschur:

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

Tábhacht

Áirítear ar na fóntais go léir a ghineann an API !importantchun a chinntiú go sáraíonn siad comhpháirteanna agus aicmí modhnóirí mar a bhí beartaithe. Is féidir leat an socrú seo a scoránaigh go domhanda leis an $enable-important-utilitiesathróg (réamhshocraithe go true).

Ag baint úsáide as an API

Anois go bhfuil tú eolach ar conas a oibríonn an API fóntais, foghlaim conas do ranganna saincheaptha féin a chur leis agus ár bhfóntais réamhshocraithe a mhodhnú.

Cuir fóntais leis

Is féidir fóntais nua a chur leis an $utilitiesléarscáil réamhshocraithe le map-merge. Déan cinnte go bhfuil ár gcomhaid Sass riachtanacha agus _utilities.scssiompórtáilte ar dtús, ansin bain úsáid as an map-mergechun do chuid fóntais bhreise a chur leis. Mar shampla, seo conas cursorfóntais sofhreagrach a chur leis le trí luach.

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

Fóntais a mhodhnú

Athraigh na fóntais atá sa $utilitiesléarscáil réamhshocraithe le map-getagus map-mergefeidhmeanna. Sa sampla thíos, táimid ag cur luach breise leis na widthfóntais. Tosaigh le ceann tosaigh map-mergeagus ansin sonraigh cén áirgiúlacht is mian leat a mhodhnú. Ón áit sin, beir leat an "width"léarscáil neadaithe map-getchun roghanna agus luachanna an áirgiúlachta a rochtain agus a mhodhnú.

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

Cumasaigh sofhreagrach

Is féidir leat ranganna sofhreagracha a chumasú do thacar fóntais atá ann cheana féin nach bhfuil freagrúil faoi láthair de réir réamhshocraithe. Mar shampla, chun na borderranganna a dhéanamh sofhreagrach:

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

Cruthóidh sé seo anois éagsúlachtaí sofhreagracha de .borderagus .border-0do gach briseadhphointe. Beidh cuma mar seo ar do CSS ginte:

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

Athainmnigh fóntais

Fóntais v4 in easnamh, nó úsáidte le gnás ainmniúcháin eile? Is féidir an API fóntais a úsáid chun toradh classáirgiúlachta ar leith a shárú - mar shampla, chun .ms-*fóntais a athainmniú go sean .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 ),
    ),
  )
);

Bain fóntais

Bain aon cheann de na fóntais réamhshocraithe tríd an eochair ghrúpa a shocrú go null. Mar shampla, chun ár n- widtháiseanna go léir a bhaint, cruthaigh $utilities map-mergeagus cuir "width": nulllaistigh de.

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

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

Bain fóntais i RTL

Bíonn sé deacair stíleáil RTL a dhéanamh i gcásanna áirithe imeallacha , mar shampla briseadh líne san Araibis. Mar sin is féidir fóntais a scaoileadh ó aschur RTL tríd an rtlrogha a shocrú go false:

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

Aschur:

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

Ní dhéanann sé seo aschur aon rud in RTL, a bhuíochas leis an treoir rialaithe RTLCSSremove .