värit
Välitä merkitys läpi colorkourallisen värien käyttöluokkien avulla. Sisältää myös tuen linkkien muotoilulle leijutustiloissa.
värit
Väritä tekstiä väriapuohjelmilla. Jos haluat värittää linkkejä, voit käyttää .link-*auttajaluokkia, joissa on :hoverja :focustilat.
.text-primary
.teksti-toissijainen
.teksti-menestys
.teksti-vaara
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-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-*apuohjelmat ja CSS-muuttujat
tekstiapuohjelmiin , .text-black-50ja
ne poistetaan käytöstä versiosta 5.1.0 alkaen. .text-white-50Ne poistetaan versiossa 6.0.0.
Tarkoituksen välittäminen avustaville tekniikoille
Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (esim. näkyvä teksti) tai sisällytetään vaihtoehtoisin keinoin, kuten .visually-hiddenluokan mukana piilotettu lisäteksti.
Peittävyys
Lisätty versioon 5.1.0
V5.1.0:sta lähtien tekstin väriapuohjelmat luodaan Sassilla CSS-muuttujien avulla. Tämä mahdollistaa reaaliaikaiset värimuutokset ilman kokoamista ja dynaamisia alfa-läpinäkyvyyden muutoksia.
Kuinka se toimii
Harkitse .text-primaryoletusapuohjelmaamme.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Käytämme --bs-primary(arvolla 13, 110, 253) CSS-muuttujamme RGB-versiota ja liitämme toisen CSS-muuttujan, --bs-text-opacity, alfa-läpinäkyvyyttä varten (oletusarvo 1paikallisen CSS-muuttujan ansiosta). Tämä tarkoittaa, että aina kun käytät .text-primarynyt, laskettu colorarvosi on rgba(13, 110, 253, 1). Kunkin .text-*luokan sisällä oleva paikallinen CSS-muuttuja välttää periytymisongelmat, joten apuohjelmien sisäkkäisillä esiintymillä ei ole automaattisesti modifioitua alfa-läpinäkyvyyttä.
Esimerkki
Voit muuttaa tätä peittävyyttä ohittamalla --bs-text-opacitymukautettuja tyylejä tai upotettuja tyylejä.
<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>Tai valitse jokin .text-opacityapuohjelmista:
<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>Spesifisyys
Joskus kontekstuaalisia luokkia ei voida käyttää toisen valitsimen spesifisyyden vuoksi. Joissakin tapauksissa riittävä kiertotapa on kääriä elementin sisältö <div>halutun luokan semanttiseen elementtiin tai useampaan semanttiseen elementtiin.
Sass
Seuraavien Sass-toimintojen lisäksi kannattaa lukea mukana toimitetut mukautetut CSS-ominaisuudet (eli CSS-muuttujat) väreille ja muille.
Muuttujat
Useimmat colorapuohjelmat luodaan teemaväreillämme, jotka on määritetty uudelleen yleisistä väripalettimuuttujistamme.
$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;
Harmaasävyvärit ovat myös saatavilla, mutta vain osajoukkoa käytetään apuohjelmien luomiseen.
$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;
Kartta
Teeman värit lisätään sitten Sass-karttaan, jotta voimme kiertää niitä luodaksemme apuohjelmia, komponenttien muokkaajia ja paljon muuta.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Harmaasävyvärit ovat saatavilla myös Sass-kartana. Tätä karttaa ei käytetä apuohjelmien luomiseen.
$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-värit luodaan erillisestä Sass-kartasta:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Ja värien läpinäkyvyydet rakentuvat tähän omalla kartalla, jota apuohjelmien API kuluttaa:
$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
Väriapuohjelmat on ilmoitettu utilities API:ssa scss/_utilities.scss. Opi käyttämään apuohjelmien sovellusliittymää.
"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
)
),