Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
in English

Värvid

Edastage tähendus läbi colorkäputäie värvikasutusklasside abil. Sisaldab ka hõljutusolekutega linkide kujundamise tuge.

Värvid

Teksti värvimine värviutiliitidega. Kui soovite linke värvida, võite kasutada .link-*abiklasse , millel on :hoverja :focusolekud.

.text-primary

.tekst-sekundaarne

.tekst-edu

.tekst-oht

.text-hoiatus

.text-info

.tekst-valgus

.tekst-tume

.text-body

.text-muted

.tekst-valge

.tekst-must-50

.text-white-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>
Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .visually-hiddenVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .

Spetsiifilisus

Mõnikord ei saa kontekstuaalseid klasse rakendada mõne teise valija spetsiifilisuse tõttu. Mõnel juhul on piisav lahendus mähkida elemendi sisu <div>soovitud klassiga semantilisse või mitmesse elementi.

Sass

Lisaks järgmistele Sassi funktsioonidele lugege meie kaasatud CSS-i kohandatud atribuute (teise nimega CSS-i muutujaid) värvide ja muu kohta.

Muutujad

Enamiku colorutiliitide loovad meie teemavärvid, mis on ümber määratud meie üldiste värvipaleti muutujate põhjal.

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

Saadaval on ka halltoonid, kuid utiliitide genereerimiseks kasutatakse ainult alamhulka.

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

Kaart

Teemavärvid lisatakse seejärel Sassi kaardile, et saaksime nende vahel ringi liikuda, et luua oma utiliite, komponentide modifikaatoreid ja muud.

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

Halltoonid on saadaval ka Sassi kaardina. Seda kaarti ei kasutata utiliitide loomiseks.

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

Utiliidide API

Värviutiliidid on deklareeritud meie utiliitide API-s scss/_utilities.scss. Siit saate teada, kuidas utiliitide API-t kasutada.

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