API faayidaa

APIn faayidaa meeshaa Sass irratti hundaa'ee gitaalee faayidaa uumuuf gargaarudha.

Fuula kana irratti

Faayidaaleen Bootstrap API faayidaa keenyaa wajjin kan uumaman yoo ta'u, tuuta gita faayidaa durtii keenyaa karaa Sass fooyyessuuf ykn dheeressuuf fayyadamuun ni danda'ama. APIn faayidaa keenyaa maatii gitaa filannoo adda addaa qaban maddisiisuudhaaf kaartaa Sass fi faankishiniiwwan walduraa duubaan jiran irratti hundaa'a. Yoo kaartaa Sass hin beekne ta'e, jalqabuuf docs Sass ofiisaa irratti ol dubbisi.

Kaartaan $utilitiesfaayidaa keenya hunda kan of keessaa qabuu fi booda $utilitieskaartaa amala keessanii wajjin walitti makama, yoo jiraate. Kaartaan faayilii tarree furtuu gareewwan faayidaa kanneen filannoowwan armaan gadii fudhatan of keessaa qaba:

Filannoo	Akaakuu	Ibsa
`property`	Kan barbaadamu	Maqaa qabeentaa, kun dhangii ykn tarree dhangiiwwanii ta'uu danda'a (fkn, paadiingii qajeelaa ykn margaa).
`values`	Kan barbaadamu	Tarree gatiiwwanii, ykn kaartaa yoo maqaan gitaa gatii wajjin tokko akka ta'u hin barbaanne. Yoo `null`akka furtuu kaartaa fayyadame, hin qindaa'u.
`class`	Dirqama kan hinta'in	Jijjiiramaa maqaa gitaaf yoo qabeentaa wajjin tokko akka ta'u hin barbaanne. Yoo furtuu hin kennine `class`fi `property`furtuun tarree dhangiiwwanii ta'e, maqaan gitaa qaama jalqabaa `property`tarree ta'a.
`state`	Dirqama kan hinta'in	Tarree garaagarummaa gita sobaa akka `:hover`ykn `:focus`faayiliidhaaf uumuuf. Gatii durtii hin qabu.
`responsive`	Dirqama kan hinta'in	Boolii yoo gitaawwan deebii kennan uumamuu qaban agarsiisu. `false`akka durtiitti.
`rfs`	Dirqama kan hinta'in	Boolean dhangala'aa irra deebiin madaaluu dandeessisuuf. Kun akkamitti akka hojjetu baruuf fuula RFS ilaalaa . `false`akka durtiitti.
`print`	Dirqama kan hinta'in	Boolii yoo gitawwan maxxansaa uumamuu qaban agarsiisu. `false`akka durtiitti.
`rtl`	Dirqama kan hinta'in	Boolii kan agarsiisu yoo faayidaan RTL keessatti qabamuu qaba. `true`akka durtiitti.

APIn ibseera

Jijjiiramoonni faayidaa hundi jijjiiramaa barruu akkaataa $utilitieskeenya keessa jirutti dabalamu. _utilities.scssTokkoon tokkoon garee faayilii waan akkanaa fakkaata:

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

Kan kanneen armaan gadii baasu:

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

Durtii gita amala

classDurtii gitaa CSS qindaa'e keessatti fayyadamu jijjiiruuf filannoo fayyadami :

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

Bu’aa: 1.1.

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

Naannoolee

stateJijjiiramoota gita sobaa uumuuf filannoo fayyadami . Fakkeenyaaf gita sobaa :hoverfi :focus. Yeroo tarreen haalataalee kennaman, maqaawwan gitaa gita-sobaa sanaaf uumamu. Fakkeenyaaf, opacity on hover jijjiiruuf, dabali fi CSS kee qindaa'e keessa state: hoverni argatta ..opacity-hover:hover

Gitoota sobaa dachaa barbaadduu? Tarree haalata iddoodhaan adda baafame fayyadami: state: hover focus.

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

Bu’aa: 1.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; }

Faayidaa deebii kennu

Faayidaa deebii kennuu (fkn, ) tuqaawwan cabsuu hundaresponsive irratti uumuuf boolii dabali ..opacity-md-25

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

Bu’aa: 1.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; }
}

Faayidaa jijjiiruu

Furtuu walfakkaataa fayyadamuun faayidaa jiran irra darbi. Fakkeenyaaf, yoo gitaalee faayidaa dhangala'aa deebii kennuu dabalataa barbaadde, kana gochuu dandeessa:

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

Faayidaa maxxansaa

printFilannoo dandeessisuun gitaalee faayidaa maxxansaadhaafis ni@media print { ... } uuma, isaanis gaaffii miidiyaa keessaa qofa hojiirra oolu.

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

Bu’aa: 1.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; }
}

Barbaachisummaa

Faayidaaleen APIn uumaman hundi !importantakka yaadametti qaamolee fi gita fooyyessaa irra darbuu isaanii mirkaneessuuf of keessatti qabatu. Sajoo kana $enable-important-utilitiesjijjiiramaa waliin akka addunyaatti jijjiiruu dandeessa (durtii gara true).

API fayyadamuudhaan

Amma akkaataa APIn faayidaa itti hojjetu erga beektee booda, akkaataa gita amala mataa keetii itti dabaluu fi faayidaa durtii keenya fooyyessuu dandeessu baradhu.

Faayidaa itti dabali

Faayidaaleen haaraan $utilitieskaartaa durtii irratti a map-merge. Faayilota Sass keenya barbaachisoo _utilities.scssta'anii fi jalqaba akka galfaman mirkaneessi, sana booda map-mergefaayidaa dabalataa kee itti dabaluuf kan fayyadami. Fakkeenyaaf, akkaataa faayilii deebii kennuu cursorgatii sadii qabu itti dabaltu kunooti.

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

Faayidaaleen fooyyessuu

Faayidaawwan jiran $utilitieskaartaa durtii keessatti map-getfi map-mergefaankishiniiwwan waliin fooyyessi. Fakkeenya armaan gadii keessatti, gatii dabalataa faayidaa irratti dabalaa jirra width. Jalqaba irraa jalqabi map-mergesana booda faayilii kam fooyyessuu akka barbaaddu ifteessi. Achi irraa, filannoowwanii fi gatiiwwan faayilii argachuu fi fooyyessuuf "width"kaartaa man'ee waliin fidi.map-get

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

Deebii kennuu dandeessisi

Tuuta faayidaa jiruuf kan yeroo ammaa durtii deebii hin kennineef gita deebii kennuu dandeessisuu dandeessa. Fakkeenyaaf, borderdareewwan deebii akka kennan gochuuf:

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

Kunis amma jijjiiramoota deebii kennanii .borderfi .border-0tokkoon tokkoo tuqaa ciccitaa ni maddisiisa. CSS kee kan uumame akkas fakkaata:

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

Faayidaa maqaa jijjiiri

Faayidaaleen v4 dhabaman, moo walgahii moggaasaa biraa barataniiru? APIn faayidaa bu'aa classfaayilii kenname irra darbuuf fayyadamuu ni danda'ama-fakkeenyaaf, faayilii .ms-*gara duriitti maqaa jijjiiruuf .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 ),
    ),
  )
);

Faayidaa (utilities) balleessi

Furtuu garee gara null. Fakkeenyaaf, widthutilities keenya hunda balleessuuf, a uumuun keessa $utilities map-mergeitti dabali "width": null.

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

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

RTL keessatti utility haqi

Some edge cases make RTL styling difficult , kan akka sarara cabsuu Afaan Arabaatiin. Akka kanaan faayidaan firii RTL irraa rtlfilannoo gara false: .

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

Bu’aa: 1.1.

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

Kun RTL keessatti homaa hin baasu, galata qajeelfama to'annoo RTLCSSremove .