Төсләр
Мәгънәне colorтөсле файдалы класслар аша җиткерегез. Ховер штатлары белән стильләштерү өчен ярдәм дә кертә.
Төсләр
Текстны төсле ярдәм белән буягыз. Әгәр дә сез сылтамаларны төсләргә телисез икән, сез ярдәмче классларын .link-*куллана аласыз .:hover:focus
.text-primary
.text-secondary
.text-уңыш
.text-куркыныч
.text-кисәтү
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.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-* текст ярдәме өчен коммуналь хезмәтләр һәм CSS үзгәрүчәннәр
өстәп
.text-black-50,
.text-white-50v5.1.0 буенча искерәләр. Алар v6.0.0 белән бетереләчәк.
Ярдәмче технологияләргә мәгънә җиткерү
Мәгънә өстәү өчен төс куллану визуаль күрсәткеч кенә бирә, ул ярдәмче технологияләр кулланучыларга җиткерелмәячәк - экран укучылары кебек. Төс белән күрсәтелгән мәгълүматның эчтәлектән ачык булуын (мәсәлән, күренгән текст), яки .visually-hiddenкласс белән яшерелгән өстәмә текст кебек альтернатив чаралар аша кертелүен тәэмин итегез.
Ачыклык
V5.1.0 өстәлде
V5.1.0 булганга, текст төсе ярдәмендә CSS үзгәрүчәннәрен кулланып Sass белән ясала. Бу реаль вакытта төс үзгәрүен, динамик альфа ачыклыгын үзгәртмичә мөмкинлек бирә.
Ничек бу эшли
Килешү .text-primaryярдәмен карагыз.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Без --bs-primary(кыйммәте белән ) CSS үзгәрүченең RGB версиясен кулланабыз һәм альфа ачыклыгы өчен ( CSS үзгәрүчесе аркасында килешү бәясе белән 13, 110, 253) икенче CSS үзгәрүчене бәйлибез. Димәк , сез хәзер кулланган вакытта сезнең исәпләнгән кыйммәт . Classәр класс эчендәге җирле CSS үзгәрүчесе мирас проблемаларыннан кача, шуңа күрә коммуналь хезмәтләрнең ояланган очраклары автоматик рәвештә үзгәртелгән альфа ачыклыгына ия түгел.--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).text-*
Мисал
Бу караңгылыкны үзгәртү өчен, --bs-text-opacityмахсус стильләр яки эчке стильләр аша өстәгез.
<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>Яисә, теләсә нинди .text-opacityкоммуналь хезмәтләрдән сайлагыз:
<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>Specзенчәлек
Кайвакыт контекст классларны бүтән селекторның үзенчәлеге аркасында кулланып булмый. <div>Кайбер очракларда, сезнең элементның эчтәлеген кирәкле класс белән семантик элементка төрү өчен җитәрлек эш .
Сасс
Түбәндәге Sass функциясенә өстәп, төсләр һәм башкалар өчен безнең кертелгән CSS махсус характеристикалары (CSS үзгәрүчәннәре) турында укыгыз.
Variзгәрешләр
Күпчелек colorкоммуналь хезмәтләр безнең тема төсләре белән барлыкка килә, безнең гомуми төс палитра үзгәрүләреннән.
$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;
Соры төсле төсләр дә бар, ләкин теләсә нинди коммуналь хезмәтләр ясау өчен тулы өлеш кулланыла.
$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;
Карта
Аннары тема төсләре Sass картасына куела, шуңа күрә без аларның коммуналь хезмәтләрен, компонент модификаторларын һәм башкаларны булдыру өчен алар өстендә әйләнеп чыга алабыз.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Соры төсләр Sass картасы буларак та бар. Бу карта бернинди коммуналь хезмәтләр ясау өчен кулланылмый.
$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 төсләре аерым Sass картасыннан ясалган:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Colorәм төс караңгылыгы моның нигезендә үз картасы белән төзелә, алар коммуналь API белән кулланыла:
$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");
Коммуналь API
Төсле коммуналь хезмәтләр безнең коммуналь APIда игълан ителә scss/_utilities.scss. Коммуналь API кулланырга өйрәнегез.
"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
)
),