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	Luach réamhshocraithe	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 `class`í, ní chuirtear í in ainm an ranga.
`class`	Roghnach	null	Ainm an aicme ginte. Mura gcuirtear ar fáil `property`é agus gur sraith teaghráin atá ann, `class`beidh sé réamhshocraithe go dtí an chéad eilimint den `property`eagar. Mura gcuirtear ar fáil `property`é agus gur teaghrán é, `values`úsáidtear na heochracha do na `class`hainmneacha.
`css-var`	Roghnach	`false`	Boolean chun athróga CSS a ghiniúint in ionad rialacha CSS.
`css-variable-name`	Roghnach	null	Ainm saincheaptha gan réamhshocrú don athróg CSS laistigh den tacar rialacha.
`local-vars`	Roghnach	null	Léarscáil d'athróga CSS áitiúla le giniúint de bhreis ar na rialacha CSS.
`state`	Roghnach	null	Liosta de na leaganacha pseudo-aicme (m.sh., `:hover`nó `:focus`) a ghiniúint.
`responsive`	Roghnach	`false`	Boole ag tabhairt le fios ar cheart ranganna sofhreagracha a ghiniúint.
`rfs`	Roghnach	`false`	Boole chun athscálú sreabhán a chumasú le RFS .
`print`	Roghnach	`false`	Boole ag cur in iúl an gá ranganna priontála a ghiniúint.
`rtl`	Roghnach	`true`	Boole ag tabhairt le fios ar cheart fóntais a choinneáil in RTL.

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

Maoin

Ní mór an propertyeochair riachtanach a shocrú le haghaidh aon áirgiúlachta, agus caithfidh airí bailí CSS a bheith inti. Úsáidtear an t-airí seo i sraith rialacha an áirgiúlachta ginte. Nuair a fhágtar an classeochair ar lár, feidhmíonn sé freisin mar an t-ainm ranga réamhshocraithe. Smaoinigh ar an text-decorationáirgiúlacht:

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

Aschur:

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

Luachanna

Bain úsáid as an valueseochair chun a shonrú cé na luachanna don sonraithe propertyba cheart a úsáid sna hainmneacha agus na rialacha ranga a ghintear. Is féidir leis a bheith ina liosta nó ina léarscáil (suite sna fóntais nó in athróg Sass).

Mar liosta, cosúil le text-decorationfóntais :

values: none underline line-through

Mar léarscáil, cosúil le opacityfóntais :

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

Mar athróg Sass a shocraíonn an liosta nó an léarscáil, mar atá inár positionbhfóntais :

values: $position-values

Aicme

Úsáid an classrogha chun an réimír ranga a úsáidtear sa CSS tiomsaithe a athrú. Mar shampla, a athrú .opacity-*ó .o-*:

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

Aschur:

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

Más rud é class: null, gineann sé ranganna do gach ceann de na valuesheochracha:

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

Aschur:

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

CSS fóntais athraitheach

Socraigh an css-varrogha boolean trueagus ginfidh an API athróga CSS áitiúla don roghnóir a thugtar in ionad na ngnáthrialacha property: value. Cuir roghnach css-variable-nameleis chun ainm athróg CSS eile a shocrú ná ainm an ranga.

Smaoinigh ar ár n- .text-opacity-*áiseanna. Má chuirimid an css-variable-namerogha leis, gheobhaidh muid aschur saincheaptha.

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

Aschur:

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

Athróga áitiúla CSS

Bain úsáid as an local-varsrogha chun léarscáil Sass a shonrú a ghinfidh athróga áitiúla CSS laistigh de shraith rialacha an aicme fóntais. Tabhair faoi deara go bhféadfadh go mbeadh obair bhreise ag teastáil chun na hathróga CSS áitiúla sin a úsáid sna rialacha CSS ginte. Mar shampla, smaoinigh ar ár .bg-*bhfóntais:

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

Aschur:

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

Stáit

Bain úsáid as an staterogha chun éagsúlachtaí pseudo-aicme a ghiniúint. Samplaí iad pseudo-ranganna:hover agus :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; }

Sofhreagrach

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

Priontáil

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 gotrue ).

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ú.

Sáraigh fóntais

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

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

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

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

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

Bain fóntais

Bain aon cheann de na fóntais réamhshocraithe leis an map-remove()bhfeidhm 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";

Is féidir leat an map-merge()fheidhm Sass a úsáid freisin agus an eochair ghrúpa a shocrú nullchun an fóntais a bhaint.

@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 leis, bain, modhnaigh

Is féidir leat go leor fóntais a chur leis, a bhaint agus a mhodhnú go léir ag an am céanna leis an map-merge()bhfeidhm Sass . Seo mar is féidir leat na samplaí roimhe seo a chomhcheangal i léarscáil amháin níos mó.

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

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 .