Colors
colorBi çend dersên karanîna rengan re wateyê vebigihînin . Piştgiriya ji bo girêdanên şêwazê bi dewletên hover re jî vedihewîne.
Colors
Bi karûbarên rengan re nivîsê rengîn bikin. Heke hûn dixwazin zencîreyan rengîn bikin, hûn dikarin .link-*çînên alîkar ên ku hene :hoverû :focusdewletan bikar bînin.
.text-sereke
.text-secondary
.text-serkeftin
.text-xeter
.text-hişyarî
.text-info
.text-ronahî
.text-tarî
.text-beden
.text-bêdeng kirin
.text-spî
.text-reş-50
.text-spî-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-*karûbar û guhêrbarên CSS-ê yên ji bo karûbarên nivîsê,
.text-black-50û
.text-white-50ji v5.1.0 ve têne derxistin. Ew ê di v6.0.0 de bêne rakirin.
Veguheztina wateya teknolojiyên arîkar
Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .visually-hiddenpolê re veşartî ye.
Nerazîbûn
Di v5.1.0 de hate zêdekirin
Ji v5.1.0 ve, karûbarên rengê nivîsê bi Sass re bi karanîna guhêrbarên CSS têne çêkirin. Ev destûrê dide guheztinên rengîn ên di dema rast de bêyî berhevkirin û guheztinên zelaliya alfa ya dînamîkî.
Çawa dixebite
Bikaranîna meya .text-primaryxwerû bihesibînin.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Em guhertoyek RGB ya xweya --bs-primary(bi nirxê 13, 110, 253) CSS-ê bikar tînin û guhêrbarek CSS-ya duyemîn, --bs-text-opacity, ji bo şefafîbûna alpha (bi nirxek xwerû bi 1xêra guhêrbarek CSS ya herêmî ve girêdidin). Ev tê vê wateyê ku her gava ku hûn .text-primarynuha bikar tînin, colornirxa weya hesabkirî ye rgba(13, 110, 253, 1). Guherbara CSS ya herêmî ya di hundurê her .text-*polê de ji pirsgirêkên mîrasiyê dûr dikeve ji ber vê yekê mînakên hêlîn ên karûbaran bixweber xwedan zelaliyek alpha-ya guhertî ne.
Mînak
Ji bo guheztina wê nezelaliyê, --bs-text-opacitybi şêwazên xwerû an şêwazên hundurîn veguhezînin.
<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>An jî, ji yek ji .text-opacitykarûbaran hilbijêrin:
<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>Taybetmendî
Carinan ji ber taybetmendiya hilbijarkek din dersên kontekstê nikarin werin sepandin. Di hin rewşan de, çareseriyek têr ev e ku hûn naveroka hêmana xwe di hêmanek <div>an bêtir semantîkî de bi çîna xwestî ve bipêçin.
Sass
Ji bilî fonksiyonên Sass-ê yên jêrîn, ji bo rengan û hêj bêtir bixwînin li ser taybetmendiyên xwerû yên CSS-ê yên tevlîhev (ango guhêrbarên CSS-ê) bixwînin.
Variables
Piraniya colorkarûbar ji hêla rengên mijara me ve têne hilberandin, ku ji guhêrbarên paleta rengên me yên gelemperî têne veguheztin.
$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;
Rengên gewr jî hene, lê tenê binkeyek tê bikar anîn da ku her amûrek çêbikin.
$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;
Qert
Dûv re rengên mijarê di nexşeyek Sass de têne danîn da ku em li ser wan bigerin da ku karûbarên xwe, guhezkerên pêkhateyan, û hêj bêtir biafirînin.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Rengên gewr jî wekî nexşeyek Sass peyda dibin. Ev nexşe ji bo hilberandina tu karûbaran nayê bikar anîn.
$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
);
Rengên RGB ji nexşeyek cûda ya Sass têne çêkirin:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Û nezelaliyên rengîn li ser wê bi nexşeya xwe ya ku ji hêla karûbarên API-yê ve tê vexwarin ava dikin:
$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
Karûbarên rengîn di API-ya karûbarên me de di nav de têne ragihandin scss/_utilities.scss. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.
"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
)
),