Nu si de megbe
Gblɔ gɔmesese to background-coloreye nàtsɔ atsyɔ̃ɖoɖo akpe ɖe eŋu kple ʋuʋudediwo.
Megbenyawo ƒe amadede
Abe alesi wòle le nuŋɔŋlɔ ƒe amadede ƒe hatsotso siwo le nya siwo ƒo xlãe me ene la, ɖo nu aɖe ƒe megbenyawo ɖe nya siwo ƒo xlãe ƒe hatsotso ɖesiaɖe me. Megbenyawo meɖoa dɔwɔnuwo ocolor , eyata le go aɖewo me la , àdi be yeazã .text-* amadede ƒe dɔwɔnuwo .
<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>Megbenyawo ƒe ʋuʋu
To .bg-gradientklass aɖe tsɔtsɔ kpee me la, wotsɔa linear gradient kpena ɖe megbe nɔnɔmetata ŋu abe megbe nɔnɔmetata ene ɖe megbenyawo ŋu. Gradient sia dzea egɔme kple yevu si me kɔ afã kple afã si nu yina va ɖoa ete.
Ðe nèhiã na gradient le wò CSS tɔxɛa mea? Ðeko nàtsɔe akpe ɖe eŋu background-image: var(--bs-gradient);.
Nusiwo me mekɔ o
Wotsɔe kpe ɖe eŋu le v5.1.0 me
Tso v5.1.0 dzi la, background-colorwowɔa dɔwɔnuwo kple Sass to CSS tɔtrɔwo zazã me. Esia ɖea mɔ na amadede ƒe tɔtrɔ le ɣeyiɣi ŋutɔŋutɔ me nuƒoƒoƒu kple alfa ƒe ʋuʋu ƒe tɔtrɔ si trɔna manɔmee.
Ale si wòwɔa dɔe
Bu míaƒe .bg-successdɔwɔnu si míezãna ɖaa ŋu kpɔ.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Míezãa míaƒe --bs-success(si ƒe asixɔxɔ nye 25, 135, 84) CSS tɔtrɔ ƒe RGB tɔ eye míetsɔa CSS tɔtrɔ evelia kpena ɖe eŋu, --bs-bg-opacity, na alfa ƒe ʋuʋu (kple asixɔxɔ gbãtɔ 1akpe ɖe teƒea ƒe CSS tɔtrɔ ŋu). Ema fia be ɣesiaɣi si nàzã .bg-successfifia la, wò colorasixɔxɔ si wobu akɔntae nye rgba(25, 135, 84, 1). Nutoa me CSS tɔtrɔ si le .bg-*klass ɖesiaɖe me ƒoa asa na domenyinu ƒe nyawo ale be nested instances of the utilities mekpɔa alpha transparency si woɖɔli le wo ɖokui si o.
Kpɔɖeŋu
Be nàtrɔ opacity ma la, ɖe asi le eŋu --bs-bg-opacityto atsyã tɔxɛwo alo atsyã siwo le fli me dzi.
<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>Alo, tia .bg-opacitynuzazãwo dometɔ ɖesiaɖe:
<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 ƒe nyawo
Tsɔ kpe ɖe Sass ƒe dɔwɔwɔ si gbɔna ŋu la, bu nuxexlẽ tso míaƒe CSS ƒe nɔnɔme tɔxɛ siwo le eme (si woyɔna be CSS ƒe tɔtrɔwo) ŋu na amadedewo kple bubuwo ŋu.
Nusiwo trɔna
Míaƒe tanya ƒe amadedewoe wɔa dɔwɔnu akpa gãtɔ background-color, siwo wogbugbɔ de asi na mí tso míaƒe amadede ƒe amadede ƒe tɔtrɔwo me.
$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));
Amadede siwo le amadede dzẽ me hã li, gake ƒuƒoƒo sue aɖe koe wozãna tsɔ wɔa dɔwɔnu ɖesiaɖe.
$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;
Anyigbatata
Emegbe wotsɔa tanya ƒe amadedewo dea Sass ƒe anyigbatata me ale be míate ŋu awɔ loop ɖe wo dzi atsɔ awɔ míaƒe utilities, component modifiers, kple bubuwo.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Amadede siwo le amadede dzẽ me hã li abe Sass ƒe anyigbatata ene. Womezãa anyigbatata sia tsɔ wɔa dɔwɔnu aɖeke o.
$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
);
Wowɔa RGB amadedewo tso Sass ƒe anyigbatata si le vovo me:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Eye megbe amadede ƒe opacities tu ɖe ema dzi kple woawo ŋutɔ ƒe anyigbatata si utilities API ɖu:
$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");
Nusiwo wotsɔ tsakae
No mixins are used to generate our background utilities , gake míewɔa mixins bubu aɖewo na nɔnɔme bubu siwo me nàdi be yeawɔ ye ŋutɔ yeƒe gradients le.
@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);
}
Dɔwɔnuwo ƒe API
Woɖe gbeƒã megbenyawo ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss. Srɔ̃ alesi nàzã utilities API lae.
"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
)
),