Mga kolor
Ipahayag ang kahulogan pinaagi colorsa pipila ka mga klase sa gamit sa kolor. Naglakip sa suporta alang sa pag-istilo sa mga link nga adunay hover states, usab.
Mga kolor
Kolori ang teksto gamit ang mga gamit sa kolor. Kung gusto nimo nga kolori ang mga link, mahimo nimong gamiton ang mga .link-*klase sa katabang nga adunay :hoverug :focusestado.
.text-primary
.text-secondary
.teks-kalamposan
.text-kakuyaw
.text-warning
.text-info
.text-kahayag
.text-ngitngit
.text-lawas
.text-muted
.text-puti
.text-black-50
.text-puti-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>Paghatag kahulogan sa mga teknolohiya sa pagtabang
Ang paggamit og kolor aron makadugang og kahulogan naghatag lamang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor mahimong dayag gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .visually-hiddenklase.
Espesipiko
Usahay ang mga klase sa konteksto dili magamit tungod sa espesipiko sa lain nga tigpili. Sa pipila ka mga kaso, ang usa ka igo nga solusyon mao ang pagputos sa sulud sa imong elemento sa usa <div>o daghan pa nga elemento sa semantiko nga adunay gusto nga klase.
Sass
Dugang pa sa mosunod nga Sass functionality, ikonsiderar ang pagbasa bahin sa among gilakip nga CSS custom properties (aka CSS variables) para sa mga kolor ug uban pa.
Mga variable
Kadaghanan sa colormga utilities namugna pinaagi sa among mga kolor sa tema, gi-reassign gikan sa among generic color palette variables.
$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;
Anaa usab ang mga grayscale nga kolor, apan usa ra ka subset ang gigamit aron makamugna og bisan unsang mga gamit.
$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;
Mapa
Ang mga kolor sa tema gibutang dayon sa usa ka mapa sa Sass aron ma-loop namo kini aron makamugna ang among mga utilities, component modifiers, ug uban pa.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ang mga grayscale nga kolor magamit usab isip usa ka mapa sa Sass. Kini nga mapa wala gigamit sa pagmugna og bisan unsang mga utilities.
$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
Ang mga gamit sa kolor gideklarar sa among mga utilities API sa scss/_utilities.scss. Pagkat-on unsaon paggamit ang mga 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,
)
)
),