Түстер

Түстер

Түс утилиталары арқылы мәтінді бояңыз. Сілтемелерді бояғыңыз келсе, және күйлері бар .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). Әр сыныптағы жергілікті CSS айнымалысы .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>

Ерекшелік

Кейде контекстік сыныптарды басқа селектордың ерекшелігіне байланысты қолдану мүмкін емес. Кейбір жағдайларда элементтің мазмұнын <div>қажетті сыныппен немесе одан да көп семантикалық элементке орау үшін жеткілікті уақытша шешім болып табылады.

Сасс

Келесі Sass функциясына қосымша, түстер және т.б. үшін енгізілген CSS теңшелетін сипаттарымыз (aka 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
      )
    ),