Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
in English

Spalvos

Perteikite prasmę naudodami colorkeletą spalvų naudingumo klasių. Apima stiliaus nuorodų su užvedimo būsenomis palaikymą.

Spalvos

Nuspalvinkite tekstą naudodami spalvų programas. Jei norite nuspalvinti nuorodas, galite naudoti .link-*pagalbines klases , kuriose yra :hoverir :focusbūsenos.

.text-primary

.tekstas-antrinis

.tekstas-sėkmė

.tekstas-pavojus

.teksto įspėjimas

.text-info

.tekstas-šviesa

.tekstas-tamsus

.text-body

.tekstas nutildytas

.tekstas-baltas

.tekstas-juodas-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>
Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .visually-hiddenklasėje.

Specifiškumas

Kartais kontekstinės klasės negali būti taikomos dėl kito parinkiklio specifikos. Kai kuriais atvejais pakanka apeiti elemento turinį į vieną <div>ar daugiau semantinio elemento su norima klase.

Sass

Be toliau pateiktų Sass funkcijų, apsvarstykite galimybę perskaityti apie mūsų įtrauktas pasirinktines CSS ypatybes (dar žinomas kaip CSS kintamieji), skirtas spalvoms ir kt.

Kintamieji

Daugumą colorpaslaugų generuoja mūsų temos spalvos, perskirtos iš mūsų bendrųjų spalvų paletės kintamųjų.

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

Taip pat galimos pilkos spalvos spalvos, tačiau bet kokioms komunalinėms paslaugoms generuoti naudojamas tik poaibis.

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

Žemėlapis

Tada temos spalvos įtraukiamos į Sass žemėlapį, kad galėtume per jas pereiti ir generuoti savo komunalines paslaugas, komponentų modifikatorius ir kt.

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

Pilkos spalvos spalvos taip pat galimos kaip Sass žemėlapis. Šis žemėlapis nenaudojamas jokioms komunalinėms paslaugoms generuoti.

$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

Spalvų paslaugos nurodytos mūsų paslaugų API scss/_utilities.scss. Sužinokite, kaip naudoti paslaugų 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,
        )
      )
    ),