Ფერები

Ფერები

ტექსტის გაფერადება ფერადი კომუნალური საშუალებებით. თუ გსურთ ბმულების შეღებვა, შეგიძლიათ გამოიყენოთ .link-*დამხმარე კლასები , რომლებსაც აქვთ :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>

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

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

<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კომუნალური სერვისიდან:

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