Ranglar

Ranglar

Rangli yordamchi dasturlar yordamida matnni ranglang. Agar siz havolalarni rang berishni xohlasangiz , va holatlari bo'lgan .link-*yordamchi sinflardan foydalanishingiz mumkin.: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>

Shaffoflik

V5.1.0 dan boshlab matn rangi yordam dasturlari Sass yordamida CSS o'zgaruvchilari yordamida yaratiladi. Bu kompilyatsiyasiz va dinamik alfa shaffofligini o'zgartirmasdan real vaqtda rang o'zgarishiga imkon beradi.

U qanday ishlaydi

Standart .text-primaryyordamchi dasturimizni ko'rib chiqing.

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

Biz --bs-primary(qiymati bilan 13, 110, 253) CSS o'zgaruvchimizning RGB versiyasidan foydalanamiz va alfa shaffofligi uchun ikkinchi CSS o'zgaruvchisini biriktiramiz ( mahalliy CSS o'zgaruvchisi tufayli --bs-text-opacitystandart qiymat bilan ). 1Bu shuni anglatadiki .text-primary, siz hozir foydalanadigan istalgan vaqtda hisoblangan colorqiymatingiz rgba(13, 110, 253, 1). Har bir sinf ichidagi mahalliy CSS o'zgaruvchisi .text-*meros bilan bog'liq muammolardan qochadi, shuning uchun yordamchi dasturlarning ichki o'rnatilgan namunalari avtomatik ravishda o'zgartirilgan alfa shaffofligiga ega bo'lmaydi.

Misol

Ushbu shaffoflikni o'zgartirish uchun --bs-text-opacitymaxsus uslublar yoki inline uslublar orqali bekor qiling.

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

Yoki yordamchi dasturlardan birini tanlang .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>

O'ziga xoslik

Ba'zan kontekstli sinflarni boshqa selektorning o'ziga xosligi tufayli qo'llash mumkin emas. <div>Ba'zi hollarda, elementingiz tarkibini kerakli sinf bilan yoki undan ko'p semantik elementga o'rash etarli vaqtinchalik echimdir .

Sass

Quyidagi Sass funksiyalariga qo'shimcha ravishda ranglar va boshqalar uchun kiritilgan CSS maxsus xususiyatlari (aka CSS o'zgaruvchilari) haqida o'qing.

O'zgaruvchilar

Aksariyat coloryordamchi dasturlar bizning umumiy rang palitrasi o'zgaruvchilarimizdan qayta tayinlangan mavzu ranglarimiz tomonidan yaratilgan.

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

Kulrang ranglar ham mavjud, ammo har qanday yordamchi dasturlarni yaratish uchun faqat kichik to'plam ishlatiladi.

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

Xarita

Keyin mavzu ranglari Sass xaritasiga joylashtiriladi, shuning uchun biz ular orqali o'z yordamchi dasturlarimiz, komponentlar o'zgartirgichlarimiz va boshqalarni yaratishimiz mumkin.

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

Kulrang ranglar Sass xaritasi sifatida ham mavjud. Ushbu xarita hech qanday yordamchi dasturlar yaratish uchun ishlatilmaydi.

$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 ranglari alohida Sass xaritasidan yaratilgan:

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

Rang noaniqliklari esa API yordam dasturlari tomonidan iste'mol qilinadigan o'z xaritalari asosida yaratiladi:

$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

Rangli yordamchi dasturlar bizning API-da e'lon qilingan scss/_utilities.scss. API yordam dasturlarini qanday ishlatishni bilib oling.

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