Renkler
colorBir avuç renk yardımcı sınıfıyla anlamı aktarın . Vurgulu durumları olan bağlantıların stillendirilmesi için de destek içerir.
Renkler
Metni renk araçlarıyla renklendirin. Bağlantıları renklendirmek istiyorsanız, ve durumları olan .link-*yardımcı sınıfları kullanabilirsiniz.:hover:focus
.text-birincil
.text-ikincil
.text-başarı
.text-tehlike
.text-uyarı
.text-bilgi
.text-ışık
.text-dark
.text-body
.text-sessiz
.text-beyaz
.text-siyah-50
.text-beyaz-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>Yardımcı teknolojilere anlam taşıma
Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .visually-hiddensınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.
özgüllük
Bazen, başka bir seçicinin özgüllüğü nedeniyle bağlamsal sınıflar uygulanamaz. Bazı durumlarda, öğenizin içeriğini <div>istenen sınıfa sahip bir veya daha fazla anlamsal öğeye sarmak yeterli bir geçici çözümdür.
küstah
Aşağıdaki Sass işlevine ek olarak, renkler ve daha fazlası için dahil edilen CSS özel özelliklerimiz (diğer adıyla CSS değişkenleri) hakkında okumayı düşünün .
Değişkenler
Çoğu coloryardımcı program, genel renk paleti değişkenlerimizden yeniden atanan tema renklerimiz tarafından oluşturulur.
$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;
Gri tonlamalı renkler de mevcuttur, ancak herhangi bir yardımcı program oluşturmak için yalnızca bir alt küme kullanılır.
$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
Tema renkleri daha sonra bir Sass haritasına yerleştirilir, böylece yardımcı programlarımızı, bileşen değiştiricilerimizi ve daha fazlasını oluşturmak için bunların üzerinde dolaşabiliriz.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Gri tonlamalı renkler, Sass haritası olarak da mevcuttur. Bu harita herhangi bir yardımcı program oluşturmak için kullanılmaz.
$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
);
Yardımcı Programlar API'sı
Renk yardımcı programları, yardımcı program API'mizde scss/_utilities.scss. Yardımcı programlar API'sini nasıl kullanacağınızı öğrenin.
"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,
)
)
),