Reňkler
colorBirnäçe sanly peýdaly sapaklar bilen many beriň . Hover ştatlary bilen baglanyşyklary düzmek üçin goldawy hem öz içine alýar.
Reňkler
Teksti reňk enjamlary bilen reňkläň. Salgylary reňklemek isleseňiz, bar bolan we ýagdaýy bolan .link-*kömekçi synplaryny ulanyp bilersiňiz .:hover:focus
.text-başlangyç
.text-ikinji
.text-üstünlik
.text-howp
.text-duýduryş
.text-info
ýagtylyk
.text-dark
.text-body
.text
.text-ak
.text-black-50
.text-white-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>.text-opacity-* Tekst hyzmatlary üçin peýdaly we CSS üýtgeýjileriň
goşulmagy bilen
.text-black-50we
.text-white-50v5.1.0 görnüşinde köneldi. Olar v6.0.0-da aýrylar.
Kömekçi tehnologiýalara many bermek
Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .visually-hiddensynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.
Açlyk
V5.1.0 goşuldy
V5.1.0-a görä, CSS üýtgeýjilerini ulanyp, Sass bilen tekst reňk enjamlary döredilýär. Bu, düzülmezden we dinamiki alfa aýdyňlygy üýtgemezden hakyky reňk üýtgemegine mümkinçilik berýär.
Bu nähili işleýär
Adaty .text-primarypeýdalylygymyza serediň.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
CSS üýtgeýjimiziň RGB wersiýasyny ulanýarys we alfa aç-açanlygy üçin ( ýerli CSS üýtgeýjiniň kömegi bilen başlangyç bahasy --bs-primarybilen 13, 110, 253) ikinji CSS üýtgeýjisini dakýarys. Diýmek , indi ulananyňyzda hasaplanan bahaňyz . Her synpyň içindäki ýerli CSS üýtgeýjisi miras meselesinden gaça durýar, şonuň üçin kommunal hyzmatlaryň içerki üýtgedilen alfa aç-açanlygy ýok.--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).text-*
Mysal
Şol düşnüksizligi üýtgetmek üçin, --bs-text-opacityadaty stilleriň ýa-da içerki stilleriň üstünden ýazyň.
<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>Ora-da haýsydyr bir .text-opacitykömekçi enjamdan birini saýlaň:
<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>Aýratynlygy
Käwagt başga bir saýlaýjynyň aýratynlygy sebäpli kontekst sapaklary ulanylyp bilinmez. Käbir ýagdaýlarda, elementiň mazmunyny <div>islenýän synp bilen has semantik elemente örtmek üçin ýeterlik iş bar.
Sass
Aşakdaky Sass funksiýasyna goşmaça, reňkler we ş.m. üçin goşulan CSS aýratyn häsiýetlerimiz (aka CSS üýtgeýjileri) hakda okamagy göz öňünde tutuň.
Üýtgeýjiler
Kärhanalaryň köpüsi color, umumy reňk palitrasy üýtgeýjilerimizden düzülen mowzuk reňklerimiz bilen döredilýär.
$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;
Çal reňkli reňkler hem bar, ýöne islendik kömekçi enjamlary öndürmek üçin diňe bir bölek ulanylýar.
$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;
Karta
Soňra mowzuk reňkleri Sass kartasyna goýulýar, şonuň üçin hyzmatlarymyzy, komponent üýtgedijilerimizi we başgalary döretmek üçin olaryň üstünden aýlanyp bileris.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Çal reňkli reňkler Sass kartasy hökmünde hem elýeterlidir. Bu karta haýsydyr bir kömekçi enjam döretmek üçin ulanylmaýar.
$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 reňkleri aýratyn Sass kartasyndan emele gelýär:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Reňk aç-açanlygy, kommunal hyzmatlar API tarapyndan sarp edilýän öz kartasy bilen gurulýar:
$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
Reňk hyzmatlary biziň peýdaly API-de yglan edilýär scss/_utilities.scss. Utilities API-ni nähili ulanmalydygyny öwreniň.
"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
)
),