Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
in English

Колеры

Перадайце сэнс colorз дапамогай некалькіх карысных класаў колеру. Уключае таксама падтрымку стылізацыі спасылак са станамі навядзення.

Колеры

Размаляваць тэкст з дапамогай каляровых утыліт. Калі вы хочаце размаляваць спасылкі, вы можаце выкарыстоўваць .link-*дапаможныя класы , якія маюць станы :hoverі .:focus

.тэкст-перш

.тэкст-друг

.тэкст-поспех

.text-danger

.тэкст-папярэджанне

.text-info

.text-light

.text-dark

.text-body

.тэкст без гуку

.тэкст-бел

.тэкст-чорны-50

.тэкст-белы-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>
Перадача значэння дапаможных тэхналогій

Выкарыстанне колеру для дадання сэнсу забяспечвае толькі візуальную індыкацыю, якая не будзе перададзена карыстальнікам дапаможных тэхналогій, такіх як праграмы чытання з экрана. Пераканайцеся, што інфармацыя, пазначаная колерам, альбо відавочная з самага змесціва (напрыклад, бачнага тэксту), альбо ўключана з дапамогай альтэрнатыўных сродкаў, такіх як дадатковы тэкст, схаваны разам з .visually-hiddenкласам.

Спецыфіка

Часам кантэкстныя класы не могуць быць ужытыя з-за спецыфікі іншага селектара. У некаторых выпадках дастатковым абыходным шляхам з'яўляецца абгарнуць змесціва вашага элемента ў <div>семантычны элемент або больш з патрэбным класам.

Сас

У дадатак да наступных функцыянальных магчымасцей Sass, падумайце прачытаць пра нашы ўключаныя карыстальніцкія ўласцівасці CSS (яны ж зменныя CSS) для колераў і многае іншае.

Пераменныя

Большасць colorутыліт ствараюцца колерамі нашай тэмы, перапрызначанымі з нашых агульных зменных каляровай палітры.

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

Таксама даступныя колеры адценняў шэрага, але для стварэння якіх-небудзь утыліт выкарыстоўваецца толькі частка.

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

Карта

Затым колеры тэмы змяшчаюцца ў карту Sass, каб мы маглі перабіраць іх для стварэння ўтыліт, мадыфікатараў кампанентаў і шмат іншага.

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

Колеры адценняў шэрага таксама даступныя ў выглядзе карты Sass. Гэтая карта не выкарыстоўваецца для стварэння якіх-небудзь утыліт.

$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 утыліт

Каляровыя ўтыліты заяўлены ў нашым API утыліт у scss/_utilities.scss. Даведайцеся, як выкарыстоўваць 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,
        )
      )
    ),