Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
in English

API taputapu

Ko te API whaipainga he taputapu-a-Sass hei whakaputa i nga karaehe whaipainga.

I tenei wharangi

Ka hangaia nga taputapu Bootstrap me to maatau API whaipainga ka taea te whakamahi ki te whakarereke, ki te whakaroa ranei i a maatau huinga taunoa o nga karaehe whaipainga ma te Sass. Ko ta maatau API whaipainga kei runga i te raupapa o nga mapi Sass me nga mahi mo te whakaputa whanau o nga karaehe me nga momo whiringa. Mena kaore koe i te mohio ki nga mapi Sass, panuihia nga tuhinga a Sass whaimana hei timata.

Kei $utilitiesroto i te mapi a maatau taputapu katoa a muri ake ka hanumi ki to $utilitiesmapi ritenga, mena kei reira. Kei roto i te mahere whaipainga he rarangi matua o nga roopu whaipainga e whakaae ana ki nga whiringa e whai ake nei:

Kōwhiringa Momo Uara taunoa Whakaahuatanga
property E hiahiatia ana – Te ingoa o te taonga, he aho, he huinga aho ranei (hei tauira, he papa whakapae, he tawhē ranei).
values E hiahiatia ana – Te rarangi o nga uara, he mapi ranei ki te kore koe e hiahia kia rite te ingoa o te akomanga ki te uara. Mena nullka whakamahia hei mapi mapi, kaore i te whakahiato.
class Kōwhiringa null Ingoa o te akomanga i hangaia. Ki te kore e whakaratohia propertyhe huinga aho, classka taunoa ki te huānga tuatahi o te propertyhuinga.
css-var Kōwhiringa false Boolean hei whakaputa i nga taurangi CSS hei utu mo nga ture CSS.
local-vars Kōwhiringa null Mahere o nga taurangi CSS rohe hei whakaputa i tua atu i nga ture CSS.
state Kōwhiringa null Rarangi o nga momo momo karaehe (hei tauira, :hover) :focushei whakaputa.
responsive Kōwhiringa false Boolean e tohu ana mena ka mahia nga karaehe urupare.
rfs Kōwhiringa false Boolean kia taea ai te whakaheke wai me te RFS .
print Kōwhiringa false Boolean e tohu ana mena me hanga nga karaehe ta.
rtl Kōwhiringa true Ko te Boolean e tohu ana mena ka mau te whaipainga ki RTL.

API whakamarama

Ka taapirihia nga taurangi whaipainga katoa ki te $utilitiestaurangi kei roto i ta maatau _utilities.scsspepa ahua. He penei te ahua o ia roopu taputapu:

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

Ko wai e whakaputa ana i nga mea e whai ake nei:

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

Taonga

Ko te kī e hiahiatia ana propertyme tautuhi mo tetahi taputapu, me whai taonga CSS whaimana. Ka whakamahia tenei taonga i roto i te huinga ture o te taputapu i hangaia. Ina classmahue te kī, ka noho hei ingoa karaehe taunoa. Whakaarohia te text-decorationwhaipainga:

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

Putanga:

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

Uara

Whakamahia te valueskī hei whakapūtā ko ēhea uara mō te mea kua tohua propertyhei whakamahi ki ngā ingoa akomanga me ngā ture kua hangaia. Ka taea he rarangi, he mapi ranei (whakaturia ki nga taputapu, ki tetahi taurangi Sass ranei).

Hei rarangi, penei me nga text-decorationtaputapu :

values: none underline line-through

Hei mapi, penei me nga opacitytaputapu :

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

Hei taurangi Sass e whakatakoto ana i te raarangi, i te mapi ranei, penei i a maatau positiontaputapu :

values: $position-values

Karaehe

Whakamahia te classkōwhiringa ki te huri i te pimua akomanga i whakamahia i roto i te CSS whakahiato. Hei tauira, ki te huri mai .opacity-*ki .o-*:

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

Putanga:

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

Nga taputapu rereke CSS

Tautuhia te css-varkowhiringa boolean ki truea ka whakaputahia e te API nga taurangi CSS paetata mo te kaiwhiriwhiri kua hoatu hei utu mo nga property: valueture o mua. Whakaarohia a maatau .text-opacity-*taputapu:

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

Putanga:

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

Taurangi CSS rohe

Whakamahia te local-varskōwhiringa ki te whakapūtā mapi Sass ka whakaputa i nga taurangi CSS rohe i roto i te huinga ture o te karaehe whaipainga. Kia mahara ka hiahiatia he mahi taapiri hei kai i aua taurangi CSS rohe i roto i nga ture CSS i hangaia. Hei tauira, whakaarohia a maatau .bg-*taputapu:

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

Putanga:

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

Whenua

Whakamahia te statekōwhiringa ki te whakaputa rerekētanga akomanga pseudo. Ko nga tauira pseudo-classes he :hoverme :focus. Ina whakaratohia he rarangi o nga kawanatanga, ka hangaia nga ingoa akomanga mo taua akomanga pseudo. Hei tauira, ki te huri i te opacity i runga i te whakaparo, taapiri state: hoverka uru koe .opacity-hover:hoverki to CSS kua whakahiato.

Me maha nga akomanga pseudo? Whakamahia he rarangi wehewehe mokowhiti o nga kawanatanga state: hover focus:.

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

Putanga:

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

Whakautu

Tāpirihia te responsiveboolean ki te whakaputa taputapu urupare (hei tauira, .opacity-md-25) puta noa i nga waahi pakaru katoa .

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

Putanga:

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

Tā

Ma te whakaahei i te printkowhiringa ka whakaputa ano@media print { ... } i nga karaehe whaipainga mo te taa, ka whakamahia noa i roto i te patai pāpāho.

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

Putanga:

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

Hiranga

Ko nga taputapu katoa i hangaia e te API ko !importantte whakarite kia takahia e ratou nga waahanga me nga karaehe whakarereke i runga i te whakaaro. Ka taea e koe te huri i tenei tautuhinga puta noa i te ao me te $enable-important-utilitiestaurangi (taunoa ki te true).

Ma te whakamahi i te API

Inaianei kua mohio koe ki te mahi a te API taputapu, ako me pehea te taapiri i o ake karaehe ritenga me te whakarereke i o maatau taputapu taunoa.

Whakakorehia nga taputapu

Whakakorehia nga taputapu o naianei ma te whakamahi i taua kii. Hei tauira, mena kei te pirangi koe ki etahi atu karaehe whaipainga rerenga urupare, ka taea e koe tenei:

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

Tāpiri taputapu

Ka taea te taapiri i nga taputapu hou ki te $utilitiesmahere taunoa me te map-merge. Tirohia o maatau kōnae Sass e hiahiatia ana ka _utilities.scsskawemai i te tuatahi, katahi ka whakamahi map-mergehei taapiri i o taputapu taapiri. Hei tauira, me pehea te taapiri i tetahi cursortaputapu urupare me nga uara e toru.

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

Whakarerekehia nga taputapu

$utilitiesWhakarerekehia nga taputapu kei roto i te mahere taunoa map-getme nga map-mergemahi. I roto i te tauira i raro nei, kei te taapirihia e matou he uara taapiri ki nga widthtaputapu. Tīmatahia ki te tuatahi map-mergeka whakapūtā ko tēhea whaipainga e hiahia ana koe ki te whakarerekē. Mai i reira, tikina te "width"mapi kohanga ki map-gette uru me te whakarereke i nga whiringa me nga uara o te taputapu.

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

Whakahohehia te urupare

Ka taea e koe te whakaahei i nga karaehe urupare mo te huinga taputapu o naianei karekau i te whakautu taunoa. Hei tauira, kia borderaro mai nga karaehe:

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

Ma tenei ka whakaputa i nga rereketanga urupare .bordermo .border-0ia waahi pakaru. Ka penei te ahua o to CSS hanga:

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

Whakaingoa ano nga taputapu

Kei te ngaro nga taputapu v4, kua whakamahia ranei ki tetahi atu tikanga whakaingoa? Ka taea te whakamahi i nga taputapu API ki te whakakore i nga hua classo tetahi taputapu kua hoatu—hei tauira, ki te whakaingoa ano .ms-*i nga taputapu ki te tawhito .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 ),
    ),
  )
);

Tango taputapu

Tango tetahi o nga taputapu taunoa ma te tautuhi i te matua roopu ki null. Hei tauira, ki te tango i a maatau widthtaputapu katoa, hangahia he $utilities map-mergetaapiri "width": nullki roto.

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

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

Tango taputapu i RTL

Ko etahi o nga keehi he uaua ki te whakaahua RTL , penei i nga wehenga raina i te reo Arapi. No reira ka taea te whakaheke i nga taputapu mai i te putanga RTL ma te whakarite i te rtlwhiringa ki false:

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

Putanga:

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

Kaore tenei e whakaputa i tetahi mea i roto i te RTL, he mihi ki te mana whakahaere RTLCSSremove .