Siirry pääsisältöön Siirry dokumenttien navigointiin
Check
in English

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

html
<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>
Vanhentuminen : Lisätty .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.
Avustavan tekniikan merkityksen välittäminen

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

Vuodesta 5.1.0 lähtien tekstin väriapuohjelmat luodaan Sassilla CSS-muuttujien avulla. Tämä mahdollistaa reaaliaikaiset värimuutokset ilman kokoamista ja dynaamisia alfalä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ä.

Tämä on oletuksena ensisijainen teksti
Tämä on 50 %:n läpinäkyvyys ensisijainen teksti
html
<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:

Tämä on oletuksena ensisijainen teksti
Tämä on 75 %:n läpinäkyvyys ensisijainen teksti
Tämä on 50 %:n läpinäkyvyys ensisijainen teksti
Tämä on 25 %:n peittävyyttä sisältävä ensisijainen teksti
html
<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 kartallaan, 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 apuohjelmien 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
      )
    ),