Fonas
Perteikite prasmę background-color
ir papuoškite gradientais.
Fono spalva
Panašiai kaip kontekstinio teksto spalvų klasėse, nustatykite elemento foną į bet kurią kontekstinę klasę. Fono paslaugų programos nenustatytoscolor
, todėl kai kuriais atvejais norėsite naudoti .text-*
spalvų paslaugų programas .
<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>
Fono gradientas
Pridėjus .bg-gradient
klasę, linijinis gradientas pridedamas kaip fono paveikslėlis prie fonų. Šis gradientas prasideda nuo pusiau permatomos baltos spalvos, kuri išnyksta iki apačios.
Ar jums reikia tinkinto CSS gradiento? Tiesiog pridėkite background-image: var(--bs-gradient);
.
Neskaidrumas
Pridėta 5.1.0 versijoje
Nuo 5.1.0 versijos background-color
komunalinės paslaugos generuojamos naudojant Sass naudojant CSS kintamuosius. Tai leidžia keisti spalvas realiuoju laiku be kompiliavimo ir dinaminių alfa skaidrumo pakeitimų.
Kaip tai veikia
Apsvarstykite mūsų numatytąjį .bg-success
įrankį.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Naudojame savo CSS kintamojo --bs-success
(su reikšme 25, 135, 84
) RGB versiją ir pridedame antrą CSS kintamąjį , --bs-bg-opacity
kad būtų alfa skaidrumas (numatytoji reikšmė 1
dėl vietinio CSS kintamojo). Tai reiškia, kad bet kuriuo metu, kai naudojate .bg-success
dabar, jūsų apskaičiuota color
vertė yra rgba(25, 135, 84, 1)
. Vietinis CSS kintamasis kiekvienoje .bg-*
klasėje išvengia paveldėjimo problemų, todėl įdėtieji paslaugų egzemplioriai automatiškai neturi modifikuoto alfa skaidrumo.
Pavyzdys
Norėdami pakeisti šį neskaidrumą, nepaisykite --bs-bg-opacity
naudodami tinkintus arba įterptus stilius.
<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>
Arba pasirinkite bet kurią iš .bg-opacity
paslaugų:
<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
Be toliau pateiktų „Sass“ funkcijų, apsvarstykite galimybę perskaityti apie mūsų įtrauktas pasirinktines CSS ypatybes (dar žinomas kaip CSS kintamieji), skirtas spalvoms ir kt.
Kintamieji
Daugumą background-color
paslaugų generuoja mūsų temos spalvos, perskirtos iš mūsų bendrųjų spalvų paletės kintamųjų.
$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));
Galimos ir pilkos spalvos spalvos, tačiau bet kokioms komunalinėms paslaugoms generuoti naudojamas tik poaibis.
$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;
Žemėlapis
Tada temos spalvos įtraukiamos į Sass žemėlapį, kad galėtume per jas pereiti ir generuoti savo komunalines paslaugas, komponentų modifikatorius ir kt.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Pilkos tonų spalvos taip pat galimos kaip Sass žemėlapis. Šis žemėlapis nenaudojamas jokioms komunalinėms paslaugoms generuoti.
$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 spalvos generuojamos iš atskiro Sass žemėlapio:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Ir fono spalvų neskaidrumas grindžiamas tuo, naudojant savo žemėlapį, kurį naudoja paslaugų 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");
Mišiniai
Jokie mišiniai nenaudojami kuriant mūsų fonines priemones , tačiau turime keletą papildomų mišinių, skirtų kitoms situacijoms, kai norite sukurti savo 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
Foninės paslaugos nurodytos mūsų paslaugų API scss/_utilities.scss
. Sužinokite, kaip naudoti paslaugų 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
)
),