Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
in English

API nafamaba

Nafama API ye baarakɛminɛn ye min sinsinnen bɛ Sass kan walasa ka nafama kalasiw lawuli.

Nin ɲɛ in kan

Bootstrap nafalanw bɛ Dabɔ ni an ka nafalan API ye wa u bɛ Se ka Kɛ ka an ka nafalanw kulu fɔlɔw ladilan walima k’u janya Sass fɛ. An ka nafama API sinsinnen bɛ Sass kartiw ni baarakɛcogo dɔw kan walasa ka kalasi denbayaw lawuli ni sugandi suguya caman ye. Ni aw ma Sass kartiw dɔn, aw bɛ kalan kɛ sanfɛ Sass docs ofisiyaliw kan walasa ka baara daminɛ.

An $utilitieska nafamafɛnw bɛɛ bɛ karti in kɔnɔ, wa kɔfɛ, a bɛ fara i ka $utilitieskarti ladamulen kan, ni o bɛ yen. Nafamafɛnw karti kɔnɔ, nafabɔjɛkuluw lisɛli bɛ yen minnu bɛ sɔn nin sugandiliw ma:

Cogo Ka sɛbɛen masin na Nafa min bɛ sɔrɔ a daminɛ na Cogojirali
property Laɲininnen – . Nafolo tɔgɔ, o bɛ se ka kɛ sɛrɛ ye walima sɛrɛw lajɛlen (misali la, padding horizontal walima margins).
values Laɲininnen – . Nafaw lisɛli, walima karti ni i t’a fɛ kalan tɔgɔ ni nafa ka kɛ kelen ye. Ni nulla bɛ baara kɛ i n’a fɔ karti kilisi, classa tɛ prepended ka kalan tɔgɔ.
class Wajibi tɛ fu Kalanso min bɛ sɔrɔ, o tɔgɔ. Ni a ma di ani ni propertya ye sɛrɛw sɛrɛkili ye, classa bɛna default kɛ sɛrɛkili kɔnɔfɛn fɔlɔ ye property. Ni a ma Di ani ni propertya ye sɛrɛ ye, valueskilisi bɛ Kɛ classtɔgɔw la.
css-var Wajibi tɛ false Boolean ka CSS bεε lajεlen CSS sariyaw nɔ na.
css-variable-name Wajibi tɛ fu Tɔgɔ ladamulen min tɛ ɲɛbila ye CSS fɛn caman sɛgɛsɛgɛli la sariyasen kɔnɔ.
local-vars Wajibi tɛ fu Sigida CSS bεε bεε ka karti ka bεn ka fara CSS sariyaw kan.
state Wajibi tɛ fu Liste des pseudo-classe variants (misali la, :hoverwalima :focus) ka generate.
responsive Wajibi tɛ false Boolean min b’a jira ni jaabi kalanw ka kan ka lawuli.
rfs Wajibi tɛ false Boolean walasa ka se ka ji sɛgɛsɛgɛli kɛ ni RFS ye .
print Wajibi tɛ false Boolean min b’a jira ni sɛbɛnni kalanw ka kan ka lawuli.
rtl Wajibi tɛ true Boolean min b’a jira ni nafa ka kan ka mara RTL kɔnɔ.

API ye ɲɛfɔli kɛ

Nafamafɛnw bεε bε Fàra bεnkansεbεn $utilitieskan an ka _utilities.scssstylesheet kɔnɔ. Nafamafɛnw kulu kelen-kelen bɛɛ bɛ i n’a fɔ nin cogo in na:

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

Min bɛ ninnu Bɔ:

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

Ta

Kilisi wajibiyalen propertyka kan ka sigi nafa suguya o suguya kama, wa a ka kan ka kɛ ni CSS nafolomafɛn ye min bɛ se ka kɛ. Nin nafolo in bɛ baara kɛ ni nafalan min bɛ sɔrɔ, o ka sariyaw kɔnɔ. Ni classkilisi bɔra, a fana bɛ kɛ kalasi tɔgɔ dafalen ye. Nafa min bɛ yen, o jateminɛ text-decoration:

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

Bɔli: 1 .

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

Nafaw

Baara kɛ ni valueskilisi ye walasa k’a jira nafa minnu propertyka kan ka baara kɛ ni minnu ye kofɔlenw na kalasi tɔgɔw ni sariyaw labɔlenw kɔnɔ. A bɛ se ka kɛ lisi walima karti ye (a sigilen bɛ nafalanw kɔnɔ walima Sass fɛnsɛbɛnni dɔ kɔnɔ).

I n’a fɔ lisi, i n’a fɔ ni text-decorationnafamafɛnw :

values: none underline line-through

I n’a fɔ karti, i n’a fɔ ni opacitynafamafɛnw :

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

I n’a fɔ Sass fɛnsɛbɛnni min bɛ lisi walima karti sigi, i n’a fɔ an ka positionnafalanw kɔnɔ cogo min na :

values: $position-values

Kilasi

Baara kɛ ni classsugandi ye walasa ka kalasi daminɛcogo Changer min bɛ kɛ CSS lajɛlen kɔnɔ. Misali la, ka fɛn caman Changer ka bɔ .opacity-*ka taa .o-*:

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

Bɔli: 1 .

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

Ni class: null, bɛ kalasiw lawuli valueskilisi kelen-kelen bɛɛ kama:

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

Bɔli: 1 .

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

CSS fɛn caman sɛgɛsɛgɛli nafamafɛnw

A’ ye css-varboolean sugandilen sigi trueani API bɛna sigida CSS fɛn caman sɛgɛsɛgɛli kɛ sugandili dilen na sanni property: valuesariyaw ka kɛ cogoya la min bɛ kɛ tuma bɛɛ. Aw bɛ sugandi dɔ fara a kan css-variable-namewalasa ka CSS fɛnsɛbɛnni tɔgɔ wɛrɛ sigi ka tɛmɛ kalasi tɔgɔ kan.

An ka .text-opacity-*nafamafɛnw jateminɛ. N'an ye css-variable-namesugandili Fàra a kan, an bɛ ladamu bɔli Sɔrɔ.

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

Bɔli: 1 .

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

Sigida CSS fɛn caman sɛgɛsɛgɛli

Baara kɛ ni local-varssugandi ye walasa ka Sass karti dɔ jira min bɛna sigida CSS fɛn caman sɛgɛsɛgɛli kɛ nafalan kalasi sariyaw kɔnɔ. Aw k’a kɔlɔsi ko a bɛ se ka baara wɛrɛw de wajibiya walasa ka o sigida CSS fɛn caman sɛgɛsɛgɛli kɛ CSS sariyaw kɔnɔ minnu labɛnna. Misali la, an ka .bg-*nafamafɛnw jateminɛ:

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

Bɔli: 1 .

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

Jamanakuntigiw

Baara kɛ ni statesugandi ye walasa ka pseudo-class fɛn caman ɲɔgɔnnaw lawuli. Misali la, kalansen nkalonmaw ye :hoverani :focus. Ni jamanaw lisɛli dira, kalasi tɔgɔw bɛ Dabɔ o kalasi nkalonma in kama. Misali la, walasa ka opacity Changer on hover, fara a kan state: hoverani i bɛ sɔrɔ .opacity-hover:hoveri ka CSS compilé kɔnɔ.

Aw mago bɛ pseudo-classes caman na wa? Baara kɛ ni jamanaw lisɛli ye min bɛ danfara la ni yɔrɔ ye: state: hover focus.

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

Bɔli: 1 .

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

Jaabiw

Aw bɛ responsiveboolean fara a kan walasa ka jaabi nafamafɛnw lawuli (misali la, .opacity-md-25) ka tɛmɛn breakpoints bɛɛ kan .

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

Bɔli: 1 .

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

Sɛbɛnni kɛ

printSugandili daminɛni bɛna nafalanw fana lawuli sɛbɛnni kama, minnu bɛ waleya dɔrɔn @media print { ... }kunnafonidilan ɲininkali kɔnɔ.

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

Bɔli: 1 .

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

Nafa min b’a la

Nafa minnu bɛ sɔrɔ API fɛ olu bɛɛ bɛ yen !importantwalasa k’a jira k’u bɛ yɔrɔw ni fɛn caman sɛmɛntiyalanw bɔ u nɔ na i n’a fɔ a laɲininen don cogo min na. Aw bɛ se ka nin sigicogo in wuli diɲɛ kɔnɔ ni $enable-important-utilitiesfɛn caman sɛgɛsɛgɛli ye (defaults to true).

Baara kɛ ni API ye

Sisan, n’i ye nafalanw API baaracogo dɔn, i ka i yɛrɛ ka ladamu kalanw faracogo dɔn ani k’an ka nafamafɛnw caman sɛmɛntiya.

Utilities (nafamafɛnw) wuli ka bɔ a nɔ na

Nafa minnu bɛ yen, olu tiɲɛ ni baara kɛli ye ni o kilisi kelen ye. Misali la, n’i b’a fɛ ka responsive overflow utility classes wɛrɛw sɔrɔ, i bɛ se ka nin kɛ:

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

Nafamafɛnw fara a kan

Nafamafɛn kuraw bɛ se ka fara $utilitieskarti daminɛ kan ni map-merge. Aw ye aw jija an ka Sass filenw wajibiyalenw ani _utilities.scsska don fɔlɔ, o kɔ aw bɛ baara kɛ ni the ye map-mergewalasa ka aw ka nafamafɛn wɛrɛw fara a kan. Misali la, jaabi cursornafama dɔ farali cogo filɛ nin ye ni nafa saba ye.

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

Nafamafɛnw caman sɛmɛntiya

Nafa minnu bɛ yen, olu ladilan $utilitieskarti dafalen kɔnɔ ni map-getani map-mergebaarakɛcogo ye. Misali min bɛ duguma, an bɛ nafa wɛrɛ fara widthnafalanw kan. A daminɛ ni daminɛ ye map-mergeka sɔrɔ k’a jira i b’a fɛ ka nafamafɛn min sɛmɛntiya. "width"Ka bɔ yen, ka karti nested ta ni map-getwalasa ka se ka utilité ka sugandiliw ni nafaw ladilan ani ka u ladilan.

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

A’ ye jaabi di

Aw bɛ se ka jaabi kalanw daminɛ nafalanw kulu dɔ la min bɛ yen minnu tɛ jaabi di sisan ka kɛɲɛ ni u daminɛ ye. Misali la, walasa ka borderkalanw kɛ mɔgɔw ye minnu bɛ se ka jaabi di:

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

O bɛna kɛ sababu ye sisan ka jaabi caman ɲɔgɔnna caman sɔrɔ kariyɔrɔ kelen-kelen bɛɛ la .borderani .border-0ka ɲɛsin kariyɔrɔ kelen-kelen bɛɛ ma. I ka CSS min labɛnna, o bɛna kɛ nin cogo la:

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

Nafamafɛnw tɔgɔ caman wɛrɛ la

V4 nafamafɛnw tununna, walima u delila tɔgɔdacogo wɛrɛ la wa? Nafamafɛnw API bɛ se ka kɛ ka classnafalan dilen dɔ nɔfɛta wuli—misali la, ka .ms-*nafalanw tɔgɔ caman wɛrɛ kɛ ka kɛ kɔrɔlen .ml-*ye :

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

Nafamafɛnw bɔ yen

nafalanw dɔw bɔ yen ni map-remove()Sass baarakɛcogo ye .

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

Aw bɛ se fana ka baara kɛ ni map-merge()Sass baarakɛcogo ye ani ka kulu kilisi sigi nullwalasa ka nafalan bɔ.

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

Fàra ɲɔgɔn kan, ka bɔ, ka fɛn dɔw Lakodɔn

Aw bɛ se ka nafa caman fara ɲɔgɔn kan, ka bɔ yen, ani ka fɛn caman sɛmɛntiya siɲɛ kelen ni map-merge()Sass baarakɛcogo ye . Aw bɛ se ka misali tɛmɛnenw fara ɲɔgɔn kan cogo min na ka kɛ karti belebeleba kelen ye, o filɛ nin ye.

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

Nafamafɛnw bɔ RTL kɔnɔ

Edge case dɔw bɛ RTL styling gɛlɛya , i n’a fɔ line breaks Arabukan na. O cogo la nafamafɛnw bɛ se ka bɔ RTL bɔli la ni rtlsugandili sigili ye false: .

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

Bɔli: 1 .

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

O tɛ foyi bɔ RTL kɔnɔ, k’a sababu kɛ RTLCSS removecontrol directive ye .