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 `null`ka whakamahia hei mapi mapi, `class`karekau e tuu ki te ingoa o te akomanga.
`class`	Kōwhiringa	null	Ingoa o te akomanga i hangaia. Ki te kore e whakaratohia `property`he huinga aho, `class`ka taunoa ki te huānga tuatahi o te `property`huinga. Ki te kore e whakaratohia `property`he aho, `values`ka whakamahia nga ki mo nga `class`ingoa.
`css-var`	Kōwhiringa	`false`	Boolean hei whakaputa i nga taurangi CSS hei utu mo nga ture CSS.
`css-variable-name`	Kōwhiringa	null	Ritenga ingoa kore-whakamua mo te taurangi CSS kei roto i te huinga ture.
`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`) `:focus`hei 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; }

Mēnā class: null, ka whakaputa akomanga mō ia valueskī:

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

Putanga:

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

Nga taputapu rereke CSS

Tautuhia te css-varkowhiringa boolean ki truea ka whakaputahia e te API nga taurangi CSS rohe mo te kaiwhiriwhiri kua hoatu hei utu mo nga property: valueture o mua. Tāpirihia he kōwhiringa css-variable-namehei tautuhi i te ingoa taurangi CSS rereke i te ingoa akomanga.

Whakaarohia o maatau .text-opacity-*taputapu. Mena ka taapirihia te css-variable-namewhiringa, ka whiwhi tatou i te putanga ritenga.

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

Putanga:

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

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).

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

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

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

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

Tango taputapu

Tangohia tetahi o nga taputapu taunoa me te map-remove()mahi Sass .

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

Ka taea hoki e koe te whakamahi i te map-merge()mahi Sass me te tautuhi i te taviri roopu ki nullte tango i te taputapu.

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

Tāpiri, tango, whakarerekē

Ka taea e koe te taapiri, te tango, me te whakarereke i nga taputapu maha i te wa kotahi me te map-merge()mahi Sass . Anei me pehea e taea ai e koe te whakakotahi i nga tauira o mua ki tetahi mapi nui ake.

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

Tango taputapu i RTL

Ko etahi take o te taha ka uaua 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 .