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	Gatii durtii	Ibsa
`property`	Kan barbaadamu	– 1. .	Maqaa qabeentaa, kun dhangii ykn tarree dhangiiwwanii ta'uu danda'a (fkn, paadiingii qajeelaa ykn margaa).
`values`	Kan barbaadamu	– 1. .	Tarree gatiiwwanii, ykn kaartaa yoo maqaan gitaa gatii wajjin tokko akka ta'u hin barbaanne. Yoo `null`akka furtuu kaartaa fayyadame, `class`maqaa gitaatti hin durfamu.
`class`	Dirqama kan hinta'in	duwwaa	Maqaa gita uumame. Yoo hin kennamne fi `property`tarree dhangiiwwanii ta'e, `class`durtii gara qaama jalqabaa `property`tarreetti ni ta'a. Yoo hin kennamne fi `property`tarree ta'e, `values`furtuuwwan `class`maqaawwaniif fayyadamu.
`css-var`	Dirqama kan hinta'in	`false`	Boolii jijjiiramoota CSS bakka seera CSS uumuuf.
`css-variable-name`	Dirqama kan hinta'in	duwwaa	Maqaa durtii hin qabne amala jijjiiramaa CSS tuuta seeraa keessaa.
`local-vars`	Dirqama kan hinta'in	duwwaa	Kaartaa jijjiiramoota CSS naannoo seera CSS irratti dabalataan uumuuf.
`state`	Dirqama kan hinta'in	duwwaa	Tarree garaagarummaa gita sobaa (fkn, `:hover`ykn `:focus`) uumuuf.
`responsive`	Dirqama kan hinta'in	`false`	Boolii yoo gitaawwan deebii kennan uumamuu qaban agarsiisu.
`rfs`	Dirqama kan hinta'in	`false`	RFS waliin dhangala'aa irra deebiin madaaluu dandeessisuuf Boolii .
`print`	Dirqama kan hinta'in	`false`	Boolii yoo gitawwan maxxansaa uumamuu qaban agarsiisu.
`rtl`	Dirqama kan hinta'in	`true`	Boolii kan agarsiisu yoo faayidaan RTL keessatti qabamuu qaba.

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

Qabeenya

Furtuun barbaadamu propertyfaayilii kamiifuu saaguu qaba, akkasumas qabeentaa CSS sirrii qabaachuu qaba. Qabeentiin kun tuuta seeraa faayilii uumame keessatti fayyadama. Yeroo classfurtuun hafu, akkasumas akka maqaa gita durtii tajaajila. Mee text-decorationfaayidaa isaa ilaali:

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

Bu’aa: 1.1.

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

Duudhaalee

Maqaawwan gitaa fi seerota uumaman keessatti valuesgatiiwwan ifteessamaniif kamtu fayyadamuu akka qabu ifteessuuf furtuu fayyadami . propertyTarree ykn kaartaa ta'uu danda'a (faayidaa keessatti ykn jijjiiramaa Sass keessatti saaga).

Akka tarreetti, akka text-decorationutilities wajjin :

values: none underline line-through

Akka kaartaa, akka opacityutilities wajjin :

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

Akka jijjiiramaa Sass kan tarree ykn kaartaa saagutti, akkuma positionfaayidaa keenya keessatti :

values: $position-values

Kutaa

classDurtii gitaa CSS qindaa'e keessatti fayyadamu jijjiiruuf filannoo fayyadami . Fakkeenyaaf, gara garaatti .opacity-*jijjiiruuf .o-*:

$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 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

Yoo , tokkoon tokkoo furtuuwwaniif class: nullgitaalee maddisiisa :values

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

Bu’aa: 1.1.

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

Faayidaa jijjiiramaa CSS

css-varFilannoo boolii gara saagi truefi APIn jijjiiramoota CSS naannoo filannoo kennameef bakka property: valueseera barame ni uuma. css-variable-nameMaqaa jijjiiramaa CSS adda ta'e maqaa gitaa irraa saaguuf filannoo dabali .

.text-opacity-*Mee faayidaa keenya ilaali . Yoo filannoo itti daballe css-variable-name, firii amala arganna.

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

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

Jijjiiramoota CSS naannoo

local-varsKaartaa Sass kan jijjiiramoota CSS naannoo tuuta seeraa gita faayidaa keessaa uumu ifteessuuf filannoo fayyadami . Jijjiiramoota CSS naannoo sana seera CSS uumaman keessatti fayyadamuuf hojii dabalataa barbaaduu akka danda'u hubadhu. Fakkeenyaaf, .bg-*faayidaa keenya ilaali:

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

Bu’aa: 1.1.

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

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

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

Maxxansa

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.

Faayidaaleen irra darbuu

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

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

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

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

Faayidaa (utilities) balleessi

Faayidaa durtii kamiyyuu map-remove()faankishinii Sass waliin haqi .

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

Akkasumas map-merge()faankishinii Sass fayyadamuu fi furtuu garee nullgara faayilii haquuf saaguu dandeessa.

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

Dabaluu, balleessuu, fooyyessuu

Faayidaa hedduu yeroo tokkotti dabaluu, haquu fi fooyyessuu dandeessa map-merge()faankishinii Sass tiin . Fakkeenyota duraanii akkamitti akka kaartaa guddaa tokkotti walitti makuu dandeessu kunooti.

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

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 .