Өнгө
colorЦөөн тооны өнгөт хэрэглээний ангиудын тусламжтайгаар утгыг дамжуулаарай . Хүрэх төлөвтэй холбоосыг загварчлах дэмжлэгийг мөн багтаасан болно.
Өнгө
Текстийг өнгөт хэрэглүүрээр будах. Хэрэв та холбоосыг өнгө болгохыг хүсвэл , болон төлөвтэй .link-*туслах ангиудыг ашиглаж болно.:hover:focus
.текст-анхдагч
.текст-хоёрдогч
.текст-амжилт
.текст-аюул
.текст анхааруулга
.текст-мэдээлэл
.текст гэрэл
.текст-харанхуй
.текст-бие
.текстийг хаасан
.текст-цагаан
.текст-хар-50
.текст-цагаан-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-*Хагарал: Текст хэрэглүүрт зориулсан хэрэгслүүд болон CSS хувьсагчдыг
.text-black-50нэмсэнээр
, 5.1.0
.text-white-50-с хойш хуучирсан. Тэдгээрийг v6.0.0-д устгах болно.
Туслах технологид утгыг дамжуулах
Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (жишээ нь харагдах текст) эсвэл .visually-hiddenангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.
Тунгалаг байдал
5.1.0 хувилбар дээр нэмсэн
V5.1.0-ээс эхлэн текстийн өнгөт хэрэглүүрүүдийг CSS хувьсагчийг ашиглан Sass ашиглан үүсгэсэн. Энэ нь эмхэтгэлгүйгээр бодит цагийн өнгөний өөрчлөлт болон динамик альфа ил тод байдлыг өөрчлөх боломжийг олгодог.
Хэрхэн ажилладаг
Манай үндсэн .text-primaryхэрэгслийг авч үзье.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Бид альфа ил тод байдлын хувьд ( локал CSS хувьсагчийн ачаар өгөгдмөл утгатай) CSS хувьсагчийн --bs-primary(-ын утгатай 13, 110, 253) RGB хувилбарыг ашиглаж, хоёр дахь CSS хувьсагчийг хавсаргасан . Энэ нь та одоо ашиглах бүрт таны тооцоолсон утга байна гэсэн үг . Анги бүр доторх локал CSS хувьсагч нь өв залгамжлалын асуудлаас зайлсхийдэг тул хэрэгслүүдийн үүрлэсэн тохиолдлууд автоматаар өөрчлөгдсөн альфа ил тод байдалгүй болно.--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).text-*
Жишээ
Энэ тунгалаг байдлыг өөрчлөхийн тулд --bs-text-opacityзахиалгат загвар эсвэл шугамын хэв маягаар дамжуулан дарна уу.
<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>Эсвэл аль нэг .text-opacityхэрэгслээс сонгоно уу:
<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>Онцлог байдал
Заримдаа өөр сонгогчийн онцлогоос шалтгаалан контекст ангиудыг ашиглах боломжгүй байдаг. Зарим тохиолдолд өөрийн элементийн агуулгыг <div>хүссэн ангитай эсвэл илүү олон семантик элементээр боож өгөх нь хангалттай.
Сасс
Дараах Sass функцээс гадна өнгө болон бусад зүйлд зориулсан CSS-ийн захиалгат шинж чанаруудыг (CSS хувьсагч гэх мэт) уншина уу.
Хувьсагч
Ихэнх colorхэрэглүүрүүдийг манай өнгөт палитрын ерөнхий хувьсагчдаас дахин хуваарилсан сэдэвчилсэн өнгөөр бүтээдэг.
$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;
Саарал өнгийн өнгөнүүд бас байдаг, гэхдээ зөвхөн дэд хэсэг нь ямар ч хэрэгсэл үүсгэхэд ашиглагддаг.
$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;
Газрын зураг
Сэдвийн өнгийг Sass газрын зурагт оруулснаар бид тэдгээрийн дээгүүр давталт хийж хэрэглүүр, бүрэлдэхүүн хэсэг өөрчлөгч болон бусад зүйлийг үүсгэх боломжтой болно.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Мөн саарал өнгийн өнгийг Sass газрын зураг хэлбэрээр авах боломжтой. Энэ газрын зургийг ямар нэгэн хэрэгсэл үүсгэхэд ашигладаггүй.
$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
);
RGB өнгийг тусдаа Sass газрын зургаас үүсгэдэг:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Өнгөний тунгалаг байдал нь үүн дээр тулгуурлан, 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");
Utilities API
Өнгөний хэрэгслүүдийг манай хэрэгслүүдийн API-д зарласан scss/_utilities.scss. 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
)
),