Matimu
Ku hundzisela nhlamuselo hi ku tirhisa background-colorna ku engetela ku khavisa hi swirhendzevutani.
Muhlovo wa le ndzhaku
Ku fana na titlilasi ta mihlovo ya tsalwa ra mongo, veka ndzhaku ka elemente eka tlilasi yihi na yihi ya mongo. Switirhisiwa swa le ndzhaku a swi vekiwicolor , kutani eka swiyimo swin'wana u ta lava ku tirhisa .text-* switirhisiwa swa mihlovo .
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Xirhendzevutani xa le ndzhaku
Hi ku engetela .bg-gradienttlilasi, ku engeteriwa linear gradient tanihi xifaniso xa le ndzhaku eka swifaniso swa le ndzhaku. Gradient leyi yisungula hi semi-transparent white leyinga nyamalala kuya ehansi.
Xana u lava gradient eka CSS ya wena ya ntolovelo? Ntsena engetela background-image: var(--bs-gradient);.
Ku nga voni kahle
Ku engeteriwe eka v5.1.0
Ku sukela eka v5.1.0, background-colorswitirhisiwa swi endliwa hi Sass hi ku tirhisa swilo leswi cinca-cincaka swa CSS. Leswi swi pfumelela ku cinca ka mihlovo ya nkarhi wa xiviri handle ka nhlengeleto na ku cinca ka ku vonakala ka alpha loku cinca-cincaka.
Ndlela leyi swi tirhaka ha yona
Anakanya hi .bg-successxitirhisiwa xa hina xa ntolovelo.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Hi tirhisa RGB version ya hina --bs-success(leyi nga na nkoka wa 25, 135, 84) CSS variable naswona hi namarhetile CSS variable ya vumbirhi, --bs-bg-opacity, ya alpha transparency (leyi nga na default value 1hi khensa CSS variable ya laha kaya). Sweswo swi vula leswaku nkarhi wun’wana ni wun’wana lowu u wu tirhisaka .bg-successsweswi, ntikelo wa wena lowu hlayiweke colori rgba(25, 135, 84, 1). Xihlawulekisi xa CSS xa laha kaya endzeni ka .bg-*tlilasi yin’wana na yin’wana xi papalata timhaka ta ndzhaka leswaku swikombiso leswi pfanganisiweke swa switirhisiwa a swi vi na ku vonakala ka alpha loku cinciweke hi ku tisungulela.
Xikombiso
Ku cinca opacity yoleyo, tlula --bs-bg-opacityhi ku tirhisa switayele swa ntolovelo kumbe switayele swa le ndzeni ka layini.
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>Kumbe, hlawula eka yin’wana ni yin’wana ya .bg-opacityswitirhisiwa:
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>Sass
Ku engetela eka ntirho wa Sass lowu landzelaka, anakanya hi ku hlaya hi swihlawulekisi swa hina swa ntolovelo swa CSS leswi katsiweke (aka swilo leswi cinca-cincaka swa CSS) swa mihlovo na swin’wana.
Swilo leswi cinca-cincaka
Switirhisiwa swo tala background-colorswi endliwa hi mihlovo ya hina ya nhlokomhaka, leyi averiweke nakambe ku suka eka swilo swa hina leswi cinca-cincaka swa phalete ya mihlovo ya xivumbeko xa le henhla.
$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;
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0));
Mihlovo ya greyscale na yona ya kumeka, kambe ku tirhisiwa ntsena ntlawa lowutsongo ku humesa switirhisiwa swihi na swihi.
$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;
Mepe
Mihlovo ya theme yi tlhela yi vekiwa eka mepe wa Sass leswaku hi ta kota ku loop ehenhla ka yona ku humesa switirhisiwa swa hina, swicinci swa swiphemu, na swin’wana.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Mihlovo ya greyscale yitlhela yi kumeka tani hi mepe wa Sass. Mepe lowu a wu tirhisiwi ku endla switirhisiwa swihi na swihi.
$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
);
Mihlovo ya RGB yi endliwa ku suka eka mepe wa Sass lowu hambaneke:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Naswona ti-opacities ta mihlovo ya le ndzhaku ti aka eka sweswo hi mepe wa tona lowu dyiwaka hi API ya switirhisiwa:
$utilities-bg: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
)
);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
Ti- mixins
No mixins are used to generate our background utilities , kambe hi na ti mixins tin’wana to engetela eka swiyimo swin’wana laha u nga tsakelaka ku tiendlela ti gradient ta wena.
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient);
}
}
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color);
}
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
}
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
API ya switirhisiwa
Switirhisiwa swa le ndzhaku swi tivisiwile eka API ya hina ya switirhisiwa hi scss/_utilities.scss. Dyondza ndlela yo tirhisa API ya switirhisiwa.
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),