in English

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>

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.

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

Utilities API

Litaforrit eru tilgreind í forritaskilum okkar í scss/_utilities.scss. Lærðu hvernig á að nota utilities API.

    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          "white": $white,
          "body": $body-color,
          "muted": $text-muted,
          "black-50": rgba($black, .5),
          "white-50": rgba($white, .5),
          "reset": inherit,
        )
      )
    ),