Өнгө

Өнгө

Текстийг өнгөт хэрэглүүрээр будах. Хэрэв та холбоосыг өнгө болгохыг хүсвэл , болон төлөвтэй .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-ээс эхлэн текстийн өнгөт хэрэглүүрүүдийг CSS хувьсагчийг ашиглан Sass ашиглан үүсгэсэн. Энэ нь эмхэтгэлгүйгээр бодит цагийн өнгөний өөрчлөлт болон динамик альфа ил тод байдлыг өөрчлөх боломжийг олгодог.

Хэрхэн ажилладаг

Манай үндсэн .text-primaryхэрэгслийг авч үзье.

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

Бид альфа ил тод байдлын хувьд ( локал CSS хувьсагчийн ачаар өгөгдмөл утгатай) CSS хувьсагчийн --bs-primary(-ын утгатай 13, 110, 253) RGB хувилбарыг ашиглаж, хоёр дахь CSS хувьсагчийг хавсаргасан . Энэ нь та одоо ашиглах бүрт таны тооцоолсон утга байна гэсэн үг . Анги бүр доторх локал CSS хувьсагч нь өв залгамжлалын асуудлаас зайлсхийдэг тул хэрэгслүүдийн үүрлэсэн тохиолдлууд автоматаар өөрчлөгдсөн альфа ил тод байдалгүй болно.--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).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-ийн захиалгат шинж чанаруудыг (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");

Өнгөний тунгалаг байдал нь үүн дээр тулгуурлан, 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

Өнгөний хэрэгслүүдийг манай хэрэгслүүдийн API-д зарласан scss/_utilities.scss. 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
      )
    ),