Fons
Nododiet nozīmi background-color
un pievienojiet dekorāciju ar gradientiem.
Fona krāsa
Līdzīgi kā kontekstuālā teksta krāsu klasēs, iestatiet elementa fonu uz jebkuru kontekstuālo klasi. Fona utilītas netiek iestatītascolor
, tāpēc dažos gadījumos vēlēsities izmantot .text-*
krāsu utilītas .
<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 gradients
Pievienojot .bg-gradient
klasi, foniem kā fona attēls tiek pievienots lineārs gradients. Šis gradients sākas ar daļēji caurspīdīgu baltu krāsu, kas izzūd līdz apakšai.
Vai pielāgotajā CSS jums ir nepieciešams gradients? Vienkārši pievienojiet background-image: var(--bs-gradient);
.
Necaurredzamība
Pievienots v5.1.0
Sākot ar v5.1.0, background-color
utilītas tiek ģenerētas ar Sass, izmantojot CSS mainīgos. Tas ļauj mainīt krāsu reāllaikā bez kompilācijas un dinamiskām alfa caurspīdīguma izmaiņām.
Kā tas strādā
Apsveriet mūsu noklusējuma .bg-success
utilītu.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Mēs izmantojam sava CSS mainīgā --bs-success
(ar vērtību 25, 135, 84
) RGB versiju un pievienojam otru CSS mainīgo , --bs-bg-opacity
alfa caurspīdīgumam (ar noklusējuma vērtību 1
, pateicoties vietējam CSS mainīgajam). Tas nozīmē, ka jebkurā laikā, kad izmantojat .bg-success
tagad, jūsu aprēķinātā color
vērtība ir rgba(25, 135, 84, 1)
. Vietējais CSS mainīgais katrā .bg-*
klasē novērš mantojuma problēmas, tāpēc ligzdotajiem utilītu gadījumiem automātiski nav modificētas alfa caurspīdīguma.
Piemērs
Lai mainītu šo necaurredzamību, ignorējiet, --bs-bg-opacity
izmantojot pielāgotos stilus vai iekļautos stilus.
<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>
Vai arī izvēlieties kādu no .bg-opacity
utilītprogrammām:
<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
Papildus tālāk norādītajai Sass funkcionalitātei apsveriet iespēju izlasīt informāciju par mūsu iekļautajiem CSS pielāgotajiem rekvizītiem (aka CSS mainīgajiem) krāsām un citiem.
Mainīgie lielumi
Lielāko daļu background-color
utilītu ģenerē mūsu motīvu krāsas, kas ir atkārtoti piešķirtas no mūsu vispārīgajiem krāsu paletes mainīgajiem.
$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));
Ir pieejamas arī pelēktoņu krāsas, taču utilītu ģenerēšanai tiek izmantota tikai apakškopa.
$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;
Karte
Pēc tam motīvu krāsas tiek ievietotas Sass kartē, lai mēs varētu tām pāriet, lai ģenerētu utilītas, komponentu modifikatorus un daudz ko citu.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Pelēktoņu krāsas ir pieejamas arī kā Sass karte. Šī karte netiek izmantota utilītu ģenerēšanai.
$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 krāsas tiek ģenerētas no atsevišķas Sass kartes:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Un fona krāsu necaurredzamība balstās uz to, izmantojot savu karti, ko patērē utilītu 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");
Maisījumi
Fona utilītprogrammu ģenerēšanai netiek izmantoti maisījumi , taču mums ir daži papildu maisījumi citām situācijām, kad vēlaties izveidot savus gradientus.
@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);
}
Utilities API
Fona utilītas ir deklarētas mūsu utilītu API valodā scss/_utilities.scss
. Uzziniet, kā izmantot utilītu 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
)
),