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

Nga Tae

Whakaatuhia te tikanga colorme te maha o nga karaehe whaipainga tae. Kei roto ko te tautoko mo te whakaahua hononga ki nga ahua hover, hoki.

Nga Tae

Whakataetae kuputuhi me nga taputapu tae. Mena kei te pirangi koe ki te whakakoi i nga hononga, ka taea e koe te whakamahi i nga .link-*karaehe kaiawhina kei a raatau :hoverme :focusnga whenua.

.kuputuhi-tuatahi

.kuputuhi-tuarua

.kupu-angitu

.tuhinga-kino

.tuhinga-tuhinga

.text-info

.kupu-marama

.kupu-pouri

.text-body

.kuputuhi-wahangu

.kuputuhi-ma

.kuputuhi-pango-50

.text-white-50

html
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Whakamutua: Me te taapiri o nga .text-opacity-*taputapu me nga taurangi CSS mo nga taputapu kuputuhi, .text-black-50a .text-white-50kua whakakorehia mai i te v5.1.0. Ka tangohia i roto i te v6.0.0.
Te kawe i te tikanga ki nga hangarau awhina

Ko te whakamahi i te tae ki te taapiri i te tikanga he tohu tirohanga noa iho, kaore e tukuna ki nga kaiwhakamahi hangarau awhina - penei i nga kaipanui mata. Me mohio kei te kitea nga korero e tohuhia ana e te tae mai i te ihirangi ake (hei tauira, te tuhinga ka kitea), ka whakaurua ranei ma etahi atu huarahi, penei i etahi atu tuhinga huna ki te .visually-hiddenakomanga.

Opacity

Kua taapirihia ki te v5.1.0

Mai i te v5.1.0, ka hangaia nga taputapu tae kuputuhi me Sass ma te whakamahi i nga taurangi CSS. Ma tenei ka taea te whakarereke i nga tae o te waa me te kore he whakahiato me nga huringa maramara alpha hihiri.

Pehea te mahi

Whakaarohia ta maatau .text-primarytaputapu taunoa.

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

Ka whakamahia e matou he putanga RGB o to maatau --bs-primary(me te uara o te 13, 110, 253) taurangi CSS me te taapiri i tetahi taurangi CSS tuarua, --bs-text-opacity, mo te marama o te alpha (me te uara taunoa he 1mihi ki tetahi taurangi CSS rohe). Ko te tikanga o nga wa ka whakamahia e koe .text-primaryinaianei, ko to coloruara tatau ko rgba(13, 110, 253, 1). Ko te taurangi CSS rohe kei roto i ia .text-*karaehe ka karo i nga take tuku iho na reira karekau nga waahanga o nga taputapu e whiwhi aunoa i te maarama alpha whakarereke.

Tauira

Hei huri i taua puatakoretanga, whakakorehia --bs-text-opacityma nga momo ritenga me nga momo raina-roto.

He kuputuhi tuatahi taunoa tenei
Ko te 50% opacity kuputuhi tuatahi tenei
html
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Ranei, whiriwhiri mai i tetahi o nga .text-opacitytaputapu:

He kuputuhi tuatahi taunoa tenei
Ko te 75% opacity kuputuhi tuatahi tenei
Ko te 50% opacity kuputuhi tuatahi tenei
Ko te 25% opacity kuputuhi tuatahi tenei
html
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

Tauwhāiti

I etahi wa kaore e taea te whakamahi i nga karaehe horopaki na te mea motuhake o tetahi atu kaiwhiriwhiri. I etahi wa, he rawaka te otinga ko te takai i nga ihirangi o to huānga ki roto i tetahi <div>huānga kupu nui ake ranei me te karaehe e hiahiatia ana.

Sass

I tua atu i nga mahi a Sass e whai ake nei, whakaarohia te panui mo o maatau taonga ritenga CSS (aka CSS taurangi) mo nga tae me etahi atu.

Taurangi

Ko te nuinga o nga colortaputapu ka hangaia e o maatau tae kaupapa, kua tohua mai i a maatau taurangi papatae tae.

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;
$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

Kei te waatea ano nga tae kirikiri, engari he waahanga iti anake ka whakamahia hei whakaputa taputapu.

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

Mapi

Ka whakauruhia nga tae kaupapa ki roto i te mapi Sass kia taea ai e tatou te huri ki runga ki te whakaputa i a maatau taputapu, whakarereke i nga waahanga, me etahi atu.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Kei te waatea ano nga tae kirikiri hei mapi Sass. Ko tenei mapi kaore e whakamahia ki te whakaputa taputapu.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

Ko nga tae RGB he mea hanga mai i tetahi mahere Sass motuhake:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

A ka hangaia nga opacities tae ki runga i o raatau ake mapi e pau ana e nga taputapu API:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

API taputapu

Ko nga taputapu tae e whakaatuhia ana i roto i o maatau taputapu API i roto i scss/_utilities.scss. Akohia me pehea te whakamahi i nga taputapu API.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),