Luncat ka eusi utama Luncat ka navigasi docs
in English

Warna-warna

Nepikeun harti ngaliwatan colorsakeupeul kelas utiliti warna. Ngawengku rojongan pikeun styling Tumbu kalawan kaayaan hover, teuing.

Dina kaca ieu

Warna-warna

Ngawarnaan téks nganggo utilitas warna. Upami anjeun hoyong ngawarnaan tautan, anjeun tiasa nganggo .link-*kelas pembantu anu gaduh :hoversareng :focusnagara.

.téks-primér

.téks-sekundér

.teks-sukses

.téks-bahaya

.téks-warning

.téks-inpo

.téks-lampu

.téks-poék

.téks-awak

.téks-muted

.téks-bodas

.téks-hideung-50

.téks-bodas-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>
Nepikeun harti kana téknologi anu ngabantosan

Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .visually-hiddenkelas.

Spésifikasi

Kadang-kadang kelas kontekstual teu tiasa diterapkeun kusabab spésifisitas pamilih anu sanés. Dina sababaraha kasus, hiji workaround cukup pikeun mungkus eusi unsur anjeun dina <div>atawa leuwih unsur semantik jeung kelas dipikahoyong.

Sass

Salian pungsionalitas Sass di handap ieu, pertimbangkeun maca ngeunaan sipat khusus CSS kami anu kalebet (alias variabel CSS) pikeun warna sareng seueur deui.

Variabel

Kaseueuran colorutilitas didamel ku warna téma kami, ditugaskeun deui tina variabel palet warna umum 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 grayscale oge sadia, tapi ngan sawaréh dipaké pikeun ngahasilkeun sagala 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;

Harita

Warna téma teras dilebetkeun kana peta Sass ku kituna urang tiasa ngurilingan aranjeunna pikeun ngahasilkeun utilitas, modifier komponén, sareng seueur deui.

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

Warna Grayscale ogé sayogi salaku peta Sass. Peta ieu henteu dianggo pikeun ngahasilkeun 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
);

Utiliti API

Utiliti warna dinyatakeun dina API utilitas kami di scss/_utilities.scss. Diajar kumaha ngagunakeun Utiliti API.

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