Litir
Komdu merkingu í gegn color
með handfylli af litabúnaðartímum. Inniheldur stuðning við stíltengla með sveimastöðu líka.
Litir
Litaðu texta með litatólum. Ef þú vilt lita tengla geturðu notað .link-*
hjálparklasana sem hafa :hover
og :focus
rí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>
.text-opacity-*
tólum og CSS breytum fyrir textaforrit,
.text-black-50
og
.text-white-50
eru ú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-hidden
bekknum.
Ó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-primary
tó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-primary
núna er reiknað color
gildi þ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-opacity
með 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-opacity
tó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 color
tó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
)
),