Dagiti kolor
Ipaawat ti kaipapanan babaen colorti sumagmamano a klase ti utilidad ti kolor. Iramanna ti suporta para kadagiti silpo ti estilo kadagiti estado ti hover, met.
Dagiti kolor
Kolor ti teksto babaen kadagiti utilidad ti kolor. No kayatmo ti mangkolor kadagiti silpo, mabalinmo nga usaren dagiti .link-*katulongan a klase nga addaan :hoverken :focusestado.
.teksto-pangruna
.teksto-segundario
.teksto-balligi
.teksto-peggad
.teksto-a-pakdaar
.teksto-info
.teksto-silaw
.teksto-nasipnget
.teksto-bagi
.teksto-naulimek
.teksto-puraw
.teksto-nangisit-50
.teksto-puraw-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>Panangipaay ti kaipapanan kadagiti makatulong a teknolohia
Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (kas pagarigan ti makita a teksto), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .visually-hiddenklase.
Espesipiko
No dadduma dagiti klase ti konteksto ket saan a maipakat gapu ti kinaespesipiko ti sabali a mangpili. Iti sumagmamano a kaso, ti umdas a panagliklik ket ti panangibalkot ti linaon ti elementom iti maysa <div>wenno ad-adu pay a semantiko nga elemento nga addaan ti tarigagayan a klase.
Sass nga
Malaksid ti sumaganad a panagusar ti Sass, ibilang ti panagbasa maipapan kadagiti nairaman a kostumbre a tagikua ti CSSmi (aka dagiti variable ti CSS) para kadagiti kolor ken dadduma pay.
Dagiti Variable
Kaaduan kadagiti colorutilidad ket pinartuat babaen dagiti kolor ti temami, a naituding manen manipud kadagiti sapasap a variable ti paleta ti kolormi.
$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;
Dagiti kolor ti grayscale ket magun-od pay, ngem ti laeng subgrupo ti maus-usar a mangpataud ti ania man a utilidad.
$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 nga
Kalpasanna dagiti kolor ti tema ket maikabil iti mapa ti Sass tapno mabalintayo ti ag-loop kadagitoy tapno mangpataud kadagiti utilidadtayo, dagiti mangbalbaliw ti paset, ken dadduma pay.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Magun-odan met dagiti kolor ti grayscale kas mapa ti Sass. Daytoy a mapa ket saan a maus-usar a mangpataud ti ania man a utilidad.
$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
);
API dagiti utilidad
Dagiti utilidad ti kolor ket naideklara kadagiti utilidadmi nga API iti scss/_utilities.scss. Ammuem no kasano nga usaren ti 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,
)
)
),