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 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 Taurangi mo te ingoa akomanga ki te kore koe e pirangi kia rite ki te taonga. Ki te kore koe e whakarato i te classki me propertyte matua he huinga aho, ko te ingoa o te akomanga te huānga tuatahi o te propertyhuinga.
state Kōwhiringa Rarangi o nga momo momo akomanga pseudo rite ki te whakaputa :hoverranei :focusmo te whaipainga. Karekau he uara taunoa.
responsive Kōwhiringa Boolean e tohu ana mena me hanga nga karaehe urupare. falsena te taunoa.
rfs Kōwhiringa Boolean kia taea ai te whakaheke i te wai. Tirohia te wharangi RFS kia mohio ai me pehea te mahi. falsena te taunoa.
print Kōwhiringa Boolean e tohu ana mena me hanga nga karaehe ta. falsena te taunoa.
rtl Kōwhiringa Ko te Boolean e tohu ana mena ka mau te whaipainga ki RTL. truena te taunoa.

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

Kupumua akomanga ritenga

Whakamahia te classkōwhiringa ki te huri i te pimua akomanga i whakamahia i roto i te CSS whakahiato:

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

Putanga:

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

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

Nga taputapu urupare

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

Te huri i nga taputapu

Whakakorehia nga taputapu o naianei ma te whakamahi i te ki taua. 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,
  ),
);

Ma te whakaahei i te printkowhiringa ka puta ano nga karaehe whaipainga mo te taa, ka whakamahia i roto noa i te @media print { ... }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 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.

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

Whakahohe 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 roto i te 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 .