Төсләр

Мәгънәне colorтөсле файдалы класслар аша җиткерегез. Ховер штатлары белән стильләштерү өчен ярдәм дә кертә.

Бу биттә

Төсләр

Текстны төсле ярдәм белән буягыз. Әгәр дә сез сылтамаларны төсләргә телисез икән, сез ярдәмче классларын .link-*куллана аласыз .:hover:focus

.text-primary

.text-secondary

.text-уңыш

.text-куркыныч

.text-кисәтү

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-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>

Ярдәмче технологияләргә мәгънә җиткерү

Мәгънә өстәү өчен төс куллану визуаль күрсәткеч кенә бирә, ул ярдәмче технологияләр кулланучыларга җиткерелмәячәк - экран укучылары кебек. Төс белән күрсәтелгән мәгълүматның эчтәлектән ачык булуын (мәсәлән, күренгән текст), яки .visually-hiddenкласс белән яшерелгән өстәмә текст кебек альтернатив чаралар аша кертелүен тәэмин итегез.

Specзенчәлек

Кайвакыт контекст классларны бүтән селекторның үзенчәлеге аркасында кулланып булмый. <div>Кайбер очракларда, сезнең элементның эчтәлеген кирәкле класс белән семантик элементка төрү өчен җитәрлек эш .

Сасс

Түбәндәге Sass функциясенә өстәп, төсләр һәм башкалар өчен безнең кертелгән CSS махсус характеристикалары (CSS үзгәрүчәннәре) турында укыгыз.

Variзгәрешләр

Күпчелек 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,
        )
      )
    ),