Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

Renkler

colorBir avuç renk yardımcı sınıfıyla anlamı aktarın . Vurgulu durumları olan bağlantıların stillendirilmesi için de destek içerir.

Renkler

Metni renk araçlarıyla renklendirin. Bağlantıları renklendirmek istiyorsanız, ve durumları olan .link-*yardımcı sınıfları kullanabilirsiniz.:hover:focus

.text-birincil

.text-ikincil

.text-başarı

.text-tehlike

.text-uyarı

.text-bilgi

.text-ışık

.text-dark

.text-body

.text-sessiz

.text-beyaz

.text-siyah-50

.text-beyaz-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>
Kullanımdan.text-opacity-* Kaldırma : Metin yardımcı programları için yardımcı programların ve CSS değişkenlerinin eklenmesiyle .text-black-50ve .text-white-50v5.1.0'dan itibaren kullanımdan kaldırılmıştır. Bunlar v6.0.0'da kaldırılacaktır.
Yardımcı teknolojilere anlam taşıma

Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .visually-hiddensınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

opaklık

v5.1.0'da eklendi

v5.1.0'dan itibaren metin rengi yardımcı programları, CSS değişkenleri kullanılarak Sass ile oluşturulur. Bu, derleme ve dinamik alfa saydamlığı değişiklikleri olmadan gerçek zamanlı renk değişikliklerine izin verir.

Nasıl çalışır

Varsayılan .text-primaryyardımcı programımızı düşünün.

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

Alfa şeffaflığı için ( --bs-primarydeğeri ile ) CSS değişkenimizin RGB versiyonunu kullanıyoruz 13, 110, 253ve ikinci bir CSS değişkeni ekledik, , ( yerel bir CSS değişkeni sayesinde varsayılan bir değerle). Bu, şimdi kullandığınız her zaman , hesaplanan değerinizin . Her sınıfın içindeki yerel CSS değişkeni, devralma sorunlarını önler, böylece yardımcı programların iç içe geçmiş örnekleri otomatik olarak değiştirilmiş bir alfa saydamlığına sahip olmaz.--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).text-*

Örnek

Bu opaklığı değiştirmek için --bs-text-opacityözel stiller veya satır içi stiller aracılığıyla geçersiz kılın.

Bu varsayılan birincil metindir
Bu %50 opaklığa sahip birincil metindir
<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>

Veya yardımcı programlardan herhangi birini seçin .text-opacity:

Bu varsayılan birincil metindir
Bu, %75 opaklığa sahip birincil metindir
Bu %50 opaklığa sahip birincil metindir
Bu, %25 opaklığa sahip birincil metindir
<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>

özgüllük

Bazen, başka bir seçicinin özgüllüğü nedeniyle bağlamsal sınıflar uygulanamaz. Bazı durumlarda, öğenizin içeriğini <div>istenen sınıfa sahip bir veya daha fazla anlamsal öğeye sarmak yeterli bir geçici çözümdür.

küstah

Aşağıdaki Sass işlevine ek olarak, renkler ve daha fazlası için dahil edilen CSS özel özelliklerimiz (diğer adıyla CSS değişkenleri) hakkında okumayı düşünün .

Değişkenler

Çoğu coloryardımcı program, genel renk paleti değişkenlerimizden yeniden atanan tema renklerimiz tarafından oluşturulur.

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

Gri tonlamalı renkler de mevcuttur, ancak herhangi bir yardımcı program oluşturmak için yalnızca bir alt küme kullanılır.

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

Harita

Tema renkleri daha sonra bir Sass haritasına yerleştirilir, böylece yardımcı programlarımızı, bileşen değiştiricilerimizi ve daha fazlasını oluşturmak için bunların üzerinde dolaşabiliriz.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Gri tonlamalı renkler, Sass haritası olarak da mevcuttur. Bu harita herhangi bir yardımcı program oluşturmak için kullanılmaz.

$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 renkleri ayrı bir Sass haritasından oluşturulur:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Ve renk opaklıkları, yardımcı programlar API'sı tarafından tüketilen kendi haritalarıyla bunun üzerine kuruludur:

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

Yardımcı Programlar API'sı

Renk yardımcı programları, yardımcı program API'mizde scss/_utilities.scss. Yardımcı programlar API'sini nasıl kullanacağınızı öğrenin.

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