Warna
Sampaikan makna melalui colorsegelintir kelas utiliti warna. Termasuk sokongan untuk penggayaan pautan dengan keadaan tuding juga.
Warna
Warnakan teks dengan utiliti warna. Jika anda ingin mewarnakan pautan, anda boleh menggunakan .link-*kelas pembantu yang mempunyai :hoverdan :focusmenyatakan.
.teks-utama
.teks-menengah
.teks-kejayaan
.teks-bahaya
.teks-amaran
.teks-maklumat
.teks-cahaya
.teks-gelap
.teks-badan
.teks diredam
.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>Menyampaikan makna kepada teknologi bantuan
Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .visually-hiddenkelas.
Kekhususan
Kadangkala kelas konteks tidak boleh digunakan kerana kekhususan pemilih lain. Dalam sesetengah kes, penyelesaian yang mencukupi ialah membungkus kandungan elemen anda dalam satu <div>atau lebih elemen semantik dengan kelas yang dikehendaki.
Sass
Selain fungsi Sass berikut, pertimbangkan untuk membaca tentang sifat tersuai CSS kami yang disertakan (aka pembolehubah CSS) untuk warna dan banyak lagi.
Pembolehubah
Kebanyakan colorutiliti dijana oleh warna tema kami, ditetapkan semula daripada pembolehubah 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 kelabu juga tersedia, tetapi hanya subset digunakan untuk menjana sebarang utiliti.
$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 kemudiannya dimasukkan ke dalam peta Sass supaya kami boleh menggelungkannya untuk menjana utiliti kami, pengubah suai komponen dan banyak lagi.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Warna skala kelabu juga tersedia sebagai peta Sass. Peta ini tidak digunakan untuk menjana sebarang utiliti.
$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
);
API Utiliti
Utiliti warna diisytiharkan dalam API utiliti kami dalam scss/_utilities.scss. Ketahui cara menggunakan API utiliti.
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),