Түстөр

Түстөр

Түстүү утилиталар менен текстти түскө бөлүңүз. Шилтемелерди түскө боёгуңуз келсе, анда жана абалдары бар .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(маани менен 13, 110, 253) CSS өзгөрүлмөбүздүн RGB версиясын колдонобуз жана --bs-text-opacityальфа ачыктыгы үчүн ( 1жергиликтүү CSS өзгөрмөсүнөн улам демейки мааниге ээ) экинчи CSS өзгөрмөсүн тиркебиз. Бул сиз .text-primaryазыр колдонгонуңузда, эсептелген маанисиңизди colorбилдирет rgba(13, 110, 253, 1). Ар бир .text-*класстын ичиндеги локалдык CSS өзгөрмөлөрү мурастоо маселелеринен качат, андыктан утилиталардын уяланган инстанциялары автоматтык түрдө альфа тунуктугун өзгөртпөйт.

Мисал

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

Өзгөчөлүк

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

Sass

Төмөнкү 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
);

RGB түстөрү өзүнчө Sass картасынан түзүлөт:

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

Жана түстүү тунук эместиктер 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");

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