in English

Ranglar

colorBir nechta rang foydali sinflari bilan ma'noni o'tkazing . Hover holatlari bilan uslublar havolalarini qo'llab-quvvatlashni ham o'z ichiga oladi.

Ushbu sahifada

Ranglar

Rangli yordamchi dasturlar yordamida matnni ranglang. Agar siz havolalarni rang berishni xohlasangiz , va holatlari bo'lgan .link-*yordamchi sinflardan foydalanishingiz mumkin.:hover:focus

.matn-asosiy

.matn-ikkinchi darajali

.matn-muvaffaqiyat

.text-xavf

.matn-ogohlantirish

.text-info

.matn nuri

.matn-qorong'i

.matn-tanasi

.matn ovozsiz

.matn-oq

.matn-qora-50

.matn-oq-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>

Eskirish:.text-opacity-* Matn yordam dasturlari uchun yordamchi dasturlar va CSS o'zgaruvchilari qo'shilgan holda .text-black-50va .text-white-505.1.0 dan boshlab eskirgan. Ular 6.0.0 versiyasida olib tashlanadi.

Yordamchi texnologiyalarga ma'no etkazish

Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan belgilangan ma'lumotlar mazmunning o'zidan (masalan, ko'rinadigan matn) aniq bo'lishiga yoki .visually-hiddensinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.

Shaffoflik

5.1.0 versiyasiga qo'shilgan

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.

Bu standart asosiy matn

Bu 50% shaffoflikdagi asosiy matn

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

Bu standart asosiy matn

Bu 75% shaffoflikdagi asosiy matn

Bu 50% shaffoflikdagi asosiy matn

Bu 25% shaffoflik asosiy matn

<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 funksiyasidan tashqari, 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'plamdan foydalaniladi.

$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

Mavzu ranglari Sass xaritasiga joylashtiriladi, shunda 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
      )
    ),