Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

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 nullakka furtuu kaartaa fayyadame, hin qindaa'u.
class Dirqama kan hinta'in duwwaa Maqaa gita uumame. Yoo hin kennamne fi propertytarree dhangiiwwanii ta'e, classdurtii gara qaama jalqabaa propertytarreetti ni ta'a.
css-var Dirqama kan hinta'in false Boolii jijjiiramoota CSS bakka seera CSS uumuuf.
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, :hoverykn :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; }

Faayidaa jijjiiramaa CSS

css-varFilannoo boolii gara saagi truefi APIn jijjiiramoota CSS naannoo filannoo kennameef bakka property: valueseera barame ni uuma. .text-opacity-*Mee faayidaa keenya ilaali :

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

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

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 faayilii 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/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 faayilii 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 .