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);.
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
);
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,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),