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.

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

$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, ní chuirtear le chéile í.
class Roghnach null Ainm an aicme ginte. Mura gcuirtear ar fáil propertyé agus gur sraith teaghráin atá ann, classbeidh sé réamhshocraithe go dtí an chéad eilimint den propertyeagar.
css-var Roghnach false Boolean chun athróga CSS a ghiniúint in ionad rialacha CSS.
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: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; }

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. Smaoinigh ar ár n- .text-opacity-*áiseanna:

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

Aschur:

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 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 :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; }

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

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