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