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 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ɛ Variable for the class tɔgɔ n'i t'a fɛ a ka kɛ kelen ye ni property ye. Ni i ma kilisi di classani propertykilisi ye sɛrɛw ka sɛrɛw ye, kalasi tɔgɔ bɛ kɛ sɛrɛkili kɔnɔfɛn fɔlɔ ye property.
state Wajibi tɛ List of pseudo-class variants like :hoverwalima :focuska generate for the utility. Nafa fɔlɔ tɛ yen.
responsive Wajibi tɛ Boolean min b’a jira ni jaabi kalanw ka kan ka lawuli. falseka kɛɲɛ ni a daminɛ ye.
rfs Wajibi tɛ Boolean ka se ka jilama sɛgɛsɛgɛli kɛ. Aw ye RFS ɲɛ lajɛ walasa ka a dɔn o bɛ baara kɛ cogo min na. falseka kɛɲɛ ni a daminɛ ye.
print Wajibi tɛ Boolean min b’a jira ni sɛbɛnni kalanw ka kan ka lawuli. falseka kɛɲɛ ni a daminɛ ye.
rtl Wajibi tɛ Boolean min b’a jira ni nafa ka kan ka mara RTL kɔnɔ. trueka kɛɲɛ ni a daminɛ ye.

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

Laadalata kalasi ɲɛbila

Baara kɛ ni classsugandi ye walasa ka kalasi daminɛcogo Changer min bɛ kɛ CSS lajɛlen kɔnɔ:

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

Bɔli: 1 .

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

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

Nafamafɛnw minnu bɛ jaabi di

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

Nafamafɛnw caman cili

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

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.

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 .