Fono
Transdonu signifon background-colorkaj aldonu dekoracion per gradientoj.
Fona koloro
Simile al la kuntekstaj tekstaj kolorklasoj, agordu la fonon de elemento al iu ajn kunteksta klaso. Fonaj iloj ne agordascolor , do en iuj kazoj vi volos uzi .text-* kolorajn ilojn .
<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>Fona gradiento
Aldonante .bg-gradientklason, linia gradiento estas aldonita kiel fonbildo al la fonoj. Ĉi tiu gradiento komenciĝas per duontravidebla blanka kiu fadas al la fundo.
Ĉu vi bezonas gradienton en via kutima CSS? Nur aldonu background-image: var(--bs-gradient);.
Opakeco
Aldonita en v5.1.0Ekde v5.1.0, background-colorutilecoj estas generitaj kun Sass uzante CSS-variablojn. Ĉi tio permesas realtempajn kolorŝanĝojn sen kompilo kaj dinamikaj alfa-travideblecoj.
Kiel ĝi funkcias
Konsideru nian defaŭltan .bg-successilon.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Ni uzas RGB-version de nia --bs-success(kun la valoro de 25, 135, 84) CSS-variablo kaj aldonis duan CSS-variablon, --bs-bg-opacity, por la alfa-travidebleco (kun defaŭlta valoro 1danke al loka CSS-variablo). Tio signifas kiam ajn vi uzas .bg-successnun, via komputita colorvaloro estas rgba(25, 135, 84, 1). La loka CSS-variablo ene de ĉiu .bg-*klaso evitas heredajn problemojn, do nestitaj okazoj de la utilecoj ne aŭtomate havas modifitan alfa-travideblecon.
Ekzemplo
Por ŝanĝi tiun opakecon, anstataŭigu --bs-bg-opacityper kutimaj stiloj aŭ enliniaj stiloj.
<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>Aŭ elektu el iu ajn el la .bg-opacityutilecoj:
<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
Aldone al la sekva Sass-funkcio, konsideru legi pri niaj inkluzivitaj CSS-propraj propraĵoj (alinome CSS-variabloj) por koloroj kaj pli.
Variabloj
Plej multaj background-colorutilecoj estas generitaj de niaj etkoloroj, reasignitaj de niaj ĝeneralaj koloraj variabloj.
$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));
Grizskalaj koloroj ankaŭ haveblas, sed nur subaro estas uzata por generi iujn ajn servaĵojn.
$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;
Mapo
Temkoloroj tiam estas metitaj en Sass-mapon por ke ni povu cirkuli super ili por generi niajn utilecojn, komponantajn modifaĵojn kaj pli.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Grizskalaj koloroj ankaŭ haveblas kiel Sass-mapo. Ĉi tiu mapo ne estas uzata por generi ajnajn ilojn.
$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-koloroj estas generitaj de aparta Sass-mapo:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Kaj fonkoloraj opakaĵoj konstruas sur tio kun sia propra mapo konsumita de la utileco API:
$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");
Miksinoj
Neniuj miksaĵoj estas uzataj por generi niajn fonajn utilecojn , sed ni havas kelkajn pliajn miksaĵojn por aliaj situacioj, kie vi ŝatus krei viajn proprajn gradientojn.
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$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);
}
Utilaĵoj API
Fonaj utilecoj estas deklaritaj en nia utileco API en scss/_utilities.scss. Lernu kiel uzi la utilecojn API.
"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
)
),