გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
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>
გაუქმება: უტილიტებისა და CSS ცვლადების დამატებით .text-opacity-*ტექსტური კომუნალური პროგრამებისთვის .text-black-50და .text-white-50მოძველებულია v5.1.0-დან. ისინი წაიშლება v6.0.0-ში.
დამხმარე ტექნოლოგიების მნიშვნელობის გადმოცემა

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

გამჭვირვალობა

დამატებულია v5.1.0-ში

v5.1.0-ის მდგომარეობით, ტექსტის ფერის უტილიტები გენერირდება Sass-ით CSS ცვლადების გამოყენებით. ეს საშუალებას იძლევა რეალურ დროში შეიცვალოს ფერების შედგენა და დინამიური ალფა გამჭვირვალობის ცვლილებების გარეშე.

Როგორ მუშაობს

განვიხილოთ ჩვენი ნაგულისხმევი .text-primaryპროგრამა.

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

--bs-primaryჩვენ ვიყენებთ ჩვენი (მნიშვნელობით ) CSS ცვლადის RGB ვერსიას 13, 110, 253და ვამაგრებთ მეორე CSS ცვლადს, --bs-text-opacity, ალფა გამჭვირვალობისთვის (ნაგულისხმევი მნიშვნელობით 1ადგილობრივი CSS ცვლადის წყალობით). ეს ნიშნავს, როცა ახლა იყენებთ .text-primary, თქვენი გამოთვლილი colorმნიშვნელობა არის rgba(13, 110, 253, 1). ადგილობრივი CSS ცვლადი თითოეულ .text-*კლასში თავიდან აიცილებს მემკვიდრეობის საკითხებს, ასე რომ, კომუნალური პროგრამების ჩადგმულ მაგალითებს ავტომატურად არ ექნებათ შეცვლილი ალფა გამჭვირვალობა.

მაგალითი

ამ გაუმჭვირვალობის შესაცვლელად, გადააჭარბეთ --bs-text-opacityმორგებული სტილის ან შიდა სტილის მეშვეობით.

ეს არის ნაგულისხმევი პირველადი ტექსტი
ეს არის 50% გამჭვირვალობის ძირითადი ტექსტი
<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კომუნალური სერვისიდან:

ეს არის ნაგულისხმევი პირველადი ტექსტი
ეს არის 75% გამჭვირვალობის ძირითადი ტექსტი
ეს არის 50% გამჭვირვალობის ძირითადი ტექსტი
ეს არის 25% გამჭვირვალობის ძირითადი ტექსტი
<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");

და ფერების გამჭვირვალობა ეფუძნება მას საკუთარი რუქით, რომელსაც იყენებს Utilities 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

ფერადი უტილიტები გამოცხადებულია ჩვენს Utilities API-ში scss/_utilities.scss. ისწავლეთ როგორ გამოიყენოთ Utilities 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
      )
    ),