გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

Ფერები

გამოხატეთ მნიშვნელობა colorრამდენიმე ფერის სასარგებლო კლასებით. ასევე მოიცავს სტილის ბმულების მხარდაჭერას hover მდგომარეობებთან ერთად.

Ფერები

ტექსტის გაფერადება ფერადი კომუნალური საშუალებებით. თუ გსურთ ბმულების შეღებვა, შეგიძლიათ გამოიყენოთ .link-*დამხმარე კლასები , რომლებსაც აქვთ :hoverდა :focusმდგომარეობები.

.ტექსტი-პირველადი

.ტექსტი-მეორადი

.ტექსტი-წარმატება

.ტექსტი-საშიშროება

.ტექსტ-გაფრთხილება

.ტექსტი-ინფორმაცია

.ტექსტი-სინათლე

.ტექსტი-ბნელი

.ტექსტი-სხეული

.ტექსტი დადუმდა

.ტექსტი-თეთრი

.ტექსტი-შავი-50

.ტექსტი-თეთრი-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>
დამხმარე ტექნოლოგიების მნიშვნელობის გადმოცემა

მნიშვნელობის დასამატებლად ფერის გამოყენება მხოლოდ ვიზუალურ მითითებას იძლევა, რომელიც არ იქნება გადაცემული დამხმარე ტექნოლოგიების მომხმარებლებს - როგორიცაა ეკრანის წამკითხველები. დარწმუნდით, რომ ფერით აღნიშული ინფორმაცია ან აშკარაა თავად შინაარსიდან (მაგ. ხილული ტექსტი), ან შეტანილია ალტერნატიული საშუალებებით, როგორიცაა დამატებითი ტექსტი, რომელიც დამალულია .visually-hiddenკლასში.

სპეციფიკა

ზოგჯერ კონტექსტური კლასების გამოყენება შეუძლებელია სხვა სელექტორის სპეციფიკის გამო. ზოგიერთ შემთხვევაში, საკმარისი გამოსავალია თქვენი ელემენტის შინაარსის შეფუთვა <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
);

Utilities API

ფერადი უტილიტები გამოცხადებულია ჩვენს Utilities API-ში scss/_utilities.scss. ისწავლეთ როგორ გამოიყენოთ Utilities API.

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