Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
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ɛ Kɛ i n'a fɔ karti kilisi, a tɛ Lajɛ.
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.
css-var Wajibi tɛ false Boolean ka CSS bεε lajεlen CSS sariyaw nɔ na.
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ɛn caman sɛgɛsɛgɛli la).

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

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

Aw bɛ css-varboolean sugandili sigi ka kɛ trueani API bɛna sigida CSS fɛn caman sɛgɛsɛgɛli kɛ sugandili dilen kama property: valuesariyaw nɔ na minnu bɛ kɛ tuma bɛɛ. An ka .text-opacity-*nafamafɛnw jateminɛ:

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

Bɔli: 1 .

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

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 o kilisi kelen ye. Misali la, n’i b’a fɛ ka jaabi-falen-falen nafama-kalanso wɛrɛw sɔrɔ, i bɛ se k’o 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/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

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 don ani ka utilité ka sugandiliw ni nafaw ladilan.

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

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

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

O bɛna kɛ 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/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

Nafamafɛnw bɔ yen

Aw bɛ nafalanw dɔ bɔ yen ni kulu kilisi sigili ye null. Misali la, walasa k’an ka widthnafalanw bɛɛ Bɔ yen, i bɛ a Dabɔ $utilities map-mergeani ka dɔ Fàra a kan "width": null.

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

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

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 .