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>

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.

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

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,
      values: map-merge(
        $theme-colors,
        (
          "white": $white,
          "body": $body-color,
          "muted": $text-muted,
          "black-50": rgba($black, .5),
          "white-50": rgba($white, .5),
          "reset": inherit,
        )
      )
    ),