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