Litir

Komdu merkingu í gegn colormeð handfylli af litabúnaðartímum. Inniheldur stuðning við stíltengla með sveimastöðu líka.

Á þessari síðu

Litir

Litaðu texta með litatólum. Ef þú vilt lita tengla geturðu notað .link-*hjálparklasana sem hafa :hoverog :focusríki.

.texta-aðal

.texta-efri

.texta-árangur

.texta-hætta

.textaviðvörun

.textaupplýsingar

.texta-ljós

.texta-dökkur

.textamál

.textaþaggað

.texti-hvítur

.texti-svartur-50

.texti-hvítur-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>

Afskrift: Með því að bæta við .text-opacity-*tólum og CSS breytum fyrir textaforrit, .text-black-50og .text-white-50eru úreltar frá v5.1.0. Þau verða fjarlægð í v6.0.0.

Að miðla merkingu til hjálpartækja

Notkun lita til að bæta við merkingu gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annaðhvort augljósar af innihaldinu sjálfu (td sýnilegum texta), eða séu innifaldar með öðrum hætti, svo sem viðbótartexta sem er falinn í .visually-hiddenbekknum.

Ógegnsæi

Bætt við í v5.1.0

Frá og með v5.1.0 eru textalitaforrit búin til með Sass með því að nota CSS breytur. Þetta gerir kleift að breyta litum í rauntíma án samantektar og kraftmikilla breytinga á alfa gagnsæi.

Hvernig það virkar

Íhugaðu sjálfgefið .text-primarytól okkar.

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

Við notum RGB útgáfu af CSS breytunni okkar --bs-primary(með gildið 13, 110, 253) og festum aðra CSS breytu, --bs-text-opacity, fyrir alfa gagnsæi (með sjálfgefnu gildi 1þökk sé staðbundinni CSS breytu). Það þýðir að hvenær sem þú notar .text-primarynúna er reiknað colorgildi þitt rgba(13, 110, 253, 1). Staðbundin CSS breytan inni í hverjum .text-*flokki forðast erfðavandamál þannig að hreiður tilvik af tólunum hafa ekki sjálfkrafa breytt alfa gagnsæi.

Dæmi

Til að breyta því ógagnsæi skaltu hneka --bs-text-opacitymeð sérsniðnum stílum eða innbyggðum stílum.

Þetta er sjálfgefinn aðaltexti

Þetta er 50% ógagnsæi aðaltexti

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

Eða veldu úr einhverju af .text-opacitytólunum:

Þetta er sjálfgefinn aðaltexti

Þetta er 75% ógagnsæi aðaltexti

Þetta er 50% ógagnsæi aðaltexti

Þetta er 25% ógagnsæi aðaltexti

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

Sérhæfni

Stundum er ekki hægt að nota samhengisflokka vegna sérstöðu annars veljara. Í sumum tilfellum er nægileg lausn að vefja innihald þáttarins þíns inn í <div>merkingarþátt eða fleiri merkingarþátt með viðkomandi flokki.

Sass

Til viðbótar við eftirfarandi Sass virkni skaltu íhuga að lesa um meðfylgjandi CSS sérsniðna eiginleika okkar (aka CSS breytur) fyrir liti og fleira.

Breytur

Flest colortól eru búin til af þemalitunum okkar, endurúthlutað úr almennum litaspjaldsbreytum okkar.

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

Grátóna litir eru einnig fáanlegir, en aðeins hlutmengi er notað til að búa til hvaða tól sem er.

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

Kort

Þemalitir eru síðan settir inn á Sass kort svo við getum hringt yfir þá til að búa til tólin okkar, íhlutabreytingar og fleira.

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

Grátóna litir eru einnig fáanlegir sem Sass kort. Þetta kort er ekki notað til að búa til nein tól.

$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 litir eru búnir til úr sérstöku Sass korti:

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

Og ógagnsæi lita byggir á því með sínu eigin korti sem er notað af forritaskilum tóla:

$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

Litaforrit eru tilgreind í forritaskilum okkar í scss/_utilities.scss. Lærðu hvernig á að nota 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
      )
    ),