warna
Sampaikan makna melalui colorbeberapa kelas utilitas warna. Termasuk dukungan untuk tautan gaya dengan status melayang juga.
warna
Mewarnai teks dengan utilitas warna. Jika Anda ingin mewarnai tautan, Anda dapat menggunakan .link-*kelas pembantu yang memiliki :hoverdan :focusmenyatakan.
.teks-utama
.teks-sekunder
.teks-sukses
.text-bahaya
.text-peringatan
.text-info
.text-light
.teks-gelap
.text-body
.text-dibungkam
.teks-putih
.teks-hitam-50
.teks-putih-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-*utilitas dan variabel CSS untuk utilitas teks,
.text-black-50dan
.text-white-50tidak digunakan lagi pada v5.1.0. Mereka akan dihapus di v6.0.0.
Menyampaikan makna pada teknologi bantu
Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .visually-hiddenkelas.
Kegelapan
Ditambahkan di v5.1.0
Mulai v5.1.0, utilitas warna teks dihasilkan dengan Sass menggunakan variabel CSS. Ini memungkinkan perubahan warna waktu nyata tanpa kompilasi dan perubahan transparansi alfa dinamis.
Bagaimana itu bekerja
.text-primaryPertimbangkan utilitas default kami .
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Kami menggunakan versi RGB dari variabel CSS kami --bs-primary(dengan nilai 13, 110, 253) dan melampirkan variabel CSS kedua, --bs-text-opacity, untuk transparansi alfa (dengan nilai default 1berkat variabel CSS lokal). Itu berarti kapan pun Anda menggunakan .text-primarysekarang, nilai yang dihitung coloradalah rgba(13, 110, 253, 1). Variabel CSS lokal di dalam setiap .text-*kelas menghindari masalah pewarisan sehingga instance utilitas yang bersarang tidak secara otomatis memiliki transparansi alfa yang dimodifikasi.
Contoh
Untuk mengubah opacity itu, timpa --bs-text-opacitymelalui gaya khusus atau gaya sebaris.
<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>Atau, pilih dari salah satu .text-opacityutilitas:
<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>Kekhususan
Terkadang kelas kontekstual tidak dapat diterapkan karena kekhususan pemilih lain. Dalam beberapa kasus, solusi yang cukup adalah dengan membungkus konten elemen Anda dalam elemen <div>semantik atau lebih dengan kelas yang diinginkan.
Kelancangan
Selain fungsionalitas Sass berikut, pertimbangkan untuk membaca tentang properti kustom CSS kami yang disertakan (alias variabel CSS) untuk warna dan lainnya.
Variabel
Sebagian besar colorutilitas dihasilkan oleh warna tema kami, dipindahkan dari variabel palet warna generik kami.
$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;
Warna skala abu-abu juga tersedia, tetapi hanya sebagian yang digunakan untuk menghasilkan utilitas apa pun.
$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;
Peta
Warna tema kemudian dimasukkan ke dalam peta Sass sehingga kita dapat mengulangnya untuk menghasilkan utilitas, pengubah komponen, dan banyak lagi.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Warna skala abu-abu juga tersedia sebagai peta Sass. Peta ini tidak digunakan untuk menghasilkan utilitas apa pun.
$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
);
Warna RGB dihasilkan dari peta Sass terpisah:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Dan opacity warna dibangun di atasnya dengan peta mereka sendiri yang dikonsumsi oleh API utilitas:
$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 Utilitas
Utilitas warna dideklarasikan di API utilitas kami di scss/_utilities.scss. Pelajari cara menggunakan API utilitas.
"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
)
),