Төсләр

Төсләр

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

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

Ачыклык

V5.1.0 булганга, текст төсе ярдәмендә CSS үзгәрүчәннәрен кулланып Sass белән ясала. Бу реаль вакытта төс үзгәрүен, динамик альфа ачыклыгын үзгәртмичә мөмкинлек бирә.

Ничек бу эшли

Килешү .text-primaryярдәмен карагыз.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Без --bs-primary(кыйммәте белән ) CSS үзгәрүченең RGB версиясен кулланабыз һәм альфа ачыклыгы өчен ( CSS үзгәрүчесе аркасында килешү бәясе белән 13, 110, 253) икенче CSS үзгәрүчене бәйлибез. Димәк , сез хәзер кулланган вакытта сезнең исәпләнгән кыйммәт . Classәр класс эчендәге җирле CSS үзгәрүчесе мирас проблемаларыннан кача, шуңа күрә коммуналь хезмәтләрнең ояланган очраклары автоматик рәвештә үзгәртелгән альфа ачыклыгына ия түгел.--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).text-*

Мисал

Бу караңгылыкны үзгәртү өчен, --bs-text-opacityмахсус стильләр яки эчке стильләр аша өстәгез.

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Яисә, теләсә нинди .text-opacityкоммуналь хезмәтләрдән сайлагыз:

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

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

RGB төсләре аерым Sass картасыннан ясалган:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Colorәм төс караңгылыгы моның нигезендә үз картасы белән төзелә, алар коммуналь API белән кулланыла:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

Коммуналь API

Төсле коммуналь хезмәтләр безнең коммуналь APIда игълан ителә scss/_utilities.scss. Коммуналь API кулланырга өйрәнегез.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),