warna

Sampaikan makna melalui colorbeberapa kelas utilitas warna. Termasuk dukungan untuk tautan gaya dengan status melayang juga.

Di halaman ini

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>

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.

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
);

API Utilitas

Utilitas warna dideklarasikan di API utilitas kami di scss/_utilities.scss. Pelajari cara menggunakan API utilitas.

    "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,
        )
      )
    ),