Warna-warna
Nepikeun harti ngaliwatan colorsakeupeul kelas utiliti warna. Ngawengku rojongan pikeun styling Tumbu kalawan kaayaan hover, teuing.
Warna-warna
Ngawarnaan téks nganggo utilitas warna. Upami anjeun hoyong ngawarnaan tautan, anjeun tiasa nganggo .link-*kelas pembantu anu gaduh :hoversareng :focusnagara.
.téks-primér
.téks-sekundér
.teks-sukses
.téks-bahaya
.téks-warning
.téks-inpo
.téks-lampu
.téks-poék
.téks-awak
.téks-muted
.téks-bodas
.téks-hideung-50
.téks-bodas-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>Nepikeun harti kana téknologi anu ngabantosan
Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .visually-hiddenkelas.
Spésifikasi
Kadang-kadang kelas kontekstual teu tiasa diterapkeun kusabab spésifisitas pamilih anu sanés. Dina sababaraha kasus, hiji workaround cukup pikeun mungkus eusi unsur anjeun dina <div>atawa leuwih unsur semantik jeung kelas dipikahoyong.
Sass
Salian pungsionalitas Sass di handap ieu, pertimbangkeun maca ngeunaan sipat khusus CSS kami anu kalebet (alias variabel CSS) pikeun warna sareng seueur deui.
Variabel
Kaseueuran colorutilitas didamel ku warna téma kami, ditugaskeun deui tina variabel palet warna umum kami.
$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;
Warna grayscale oge sadia, tapi ngan sawaréh dipaké pikeun ngahasilkeun sagala utiliti.
$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;
Harita
Warna téma teras dilebetkeun kana peta Sass ku kituna urang tiasa ngurilingan aranjeunna pikeun ngahasilkeun utilitas, modifier komponén, sareng seueur deui.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Warna Grayscale ogé sayogi salaku peta Sass. Peta ieu henteu dianggo pikeun ngahasilkeun utilitas.
$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
);
Utiliti API
Utiliti warna dinyatakeun dina API utilitas kami di scss/_utilities.scss. Diajar kumaha ngagunakeun Utiliti 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,
)
)
),