Langkau ke kandungan utama Langkau ke navigasi dokumen

Sampaikan makna melalui colorsegelintir kelas utiliti warna. Termasuk sokongan untuk penggayaan pautan dengan keadaan tuding juga.

Warna

Warnakan teks dengan utiliti warna. Jika anda ingin mewarnakan pautan, anda boleh menggunakan .link-*kelas pembantu yang mempunyai :hoverdan :focusmenyatakan.

.teks-utama

.teks-menengah

.teks-kejayaan

.teks-bahaya

.teks-amaran

.teks-maklumat

.teks-cahaya

.teks-gelap

.teks-badan

.teks diredam

.teks-putih

.teks-hitam-50

.teks-putih-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>
Penamatan: Dengan penambahan .text-opacity-*utiliti dan pembolehubah CSS untuk utiliti teks, .text-black-50dan .text-white-50ditamatkan pada v5.1.0. Ia akan dialih keluar dalam v6.0.0.
Menyampaikan makna kepada teknologi bantuan

Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .visually-hiddenkelas.

Kelegapan

Ditambah dalam v5.1.0

Mulai v5.1.0, utiliti warna teks dijana dengan Sass menggunakan pembolehubah CSS. Ini membolehkan perubahan warna masa nyata tanpa kompilasi dan perubahan ketelusan alfa dinamik.

Bagaimana ia berfungsi

Pertimbangkan .text-primaryutiliti lalai kami.

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

Kami menggunakan versi RGB kami --bs-primary(dengan nilai 13, 110, 253) pembolehubah CSS dan melampirkan pembolehubah CSS kedua, --bs-text-opacity, untuk ketelusan alfa (dengan nilai lalai 1terima kasih kepada pembolehubah CSS tempatan). Ini bermakna bila-bila masa anda menggunakan sekarang, nilai .text-primarypengiraan anda ialah . Pembolehubah CSS tempatan di dalam setiap kelas mengelakkan isu pewarisan jadi contoh bersarang bagi utiliti tidak mempunyai ketelusan alfa yang diubah suai secara automatik.colorrgba(13, 110, 253, 1).text-*

Contoh

Untuk menukar kelegapan itu, ganti --bs-text-opacitymelalui gaya tersuai atau gaya sebaris.

Ini ialah teks utama lalai
Ini ialah 50% teks utama kelegapan
<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>

Atau, pilih daripada mana-mana .text-opacityutiliti:

Ini ialah teks utama lalai
Ini ialah 75% teks utama kelegapan
Ini ialah 50% teks utama kelegapan
Ini ialah 25% teks utama kelegapan
<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>

Kekhususan

Kadangkala kelas kontekstual tidak boleh digunakan kerana kekhususan pemilih lain. Dalam sesetengah kes, penyelesaian yang mencukupi ialah membungkus kandungan elemen anda dalam satu <div>atau lebih elemen semantik dengan kelas yang dikehendaki.

Sass

Selain fungsi Sass berikut, pertimbangkan untuk membaca tentang sifat tersuai CSS kami yang disertakan (aka pembolehubah CSS) untuk warna dan banyak lagi.

Pembolehubah

Kebanyakan colorutiliti dijana oleh warna tema kami, ditetapkan semula daripada pembolehubah palet warna generik kami.

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

Warna skala kelabu juga tersedia, tetapi hanya subset digunakan untuk menjana sebarang utiliti.

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

Peta

Warna tema kemudiannya dimasukkan ke dalam peta Sass supaya kami boleh menggelungkannya untuk menjana utiliti kami, pengubah suai komponen dan banyak lagi.

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

Warna skala kelabu juga tersedia sebagai peta Sass. Peta ini tidak digunakan untuk menjana sebarang utiliti.

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

Warna RGB dijana daripada peta Sass yang berasingan:

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

Dan kelegapan warna dibina di atasnya dengan peta mereka sendiri yang digunakan oleh API utiliti:

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

API Utiliti

Utiliti warna diisytiharkan dalam API utiliti kami dalam scss/_utilities.scss. Ketahui cara menggunakan API utiliti.

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