Litir

Litir

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

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

Ógegnsæi

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.

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

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