werna-werna

Nerangake makna liwat colorkaro sawetara kelas sarana werna. Kalebu dhukungan kanggo tautan gaya karo status hover.

Ing kaca iki

werna-werna

Werna teks kanthi utilitas warna. Yen sampeyan pengin link colorize, sampeyan bisa nggunakake .link-*kelas helper sing duwe :hoverlan :focusnegara.

.teks-utama

.teks-sekunder

.teks-sukses

.teks-bebaya

.text-warning

.teks-info

.teks-lampu

.teks-peteng

.teks-awak

.text-muted

.teks-putih

.teks-ireng-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>

Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .visually-hiddenkelas.

Kekhususan

Kadhangkala kelas kontekstual ora bisa ditrapake amarga kekhususan pamilih liyane. Ing sawetara kasus, solusi sing cukup yaiku mbungkus konten unsur sampeyan ing unsur <div>semantik utawa luwih karo kelas sing dikarepake.

Sass

Saliyane fungsi Sass ing ngisor iki, coba maca babagan properti khusus CSS sing kalebu (alias variabel CSS) kanggo warna lan liya-liyane.

Variabel

Umume colorutilitas digawe saka warna tema, ditugasake maneh saka variabel palet warna umum.

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

Werna werna abu-abu uga kasedhiya, nanging mung subset sing digunakake kanggo ngasilake keperluan apa wae.

$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

Werna tema banjur dilebokake ing peta Sass supaya kita bisa ngubengi kanggo ngasilake utilitas, modifier komponen, lan liya-liyane.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Werna werna abu-abu uga kasedhiya minangka peta Sass. Peta iki ora digunakake kanggo ngasilake utilitas.

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

Utilities API

Utilitas warna diumumake ing API keperluan kita ing scss/_utilities.scss. Sinau carane nggunakake API keperluan.

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