Sfondi
Përcillni kuptimin përmes background-colordhe shtoni dekorimin me gradient.
Ngjyrë e sfondit
Ngjashëm me klasat kontekstuale të ngjyrave të tekstit, vendosni sfondin e një elementi për çdo klasë kontekstuale. Shërbimet e sfondit nuk vendosencolor , kështu që në disa raste do të dëshironi të përdorni .text-* shërbimet e ngjyrave .
<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>Gradient i sfondit
Duke shtuar një .bg-gradientklasë, një gradient linear shtohet si imazh i sfondit në sfond. Ky gradient fillon me një të bardhë gjysmë transparente e cila zbehet deri në fund.
Keni nevojë për një gradient në CSS tuaj të personalizuar? Thjesht shtoni background-image: var(--bs-gradient);.
Opaciteti
Shtuar në v5.1.0Që nga v5.1.0, background-colorshërbimet krijohen me Sass duke përdorur variabla CSS. Kjo lejon ndryshime të ngjyrave në kohë reale pa kompilim dhe ndryshime dinamike të transparencës alfa.
Si punon
Merrni parasysh programin tonë të paracaktuar .bg-success.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Ne përdorim një version RGB të ndryshores sonë --bs-success(me vlerën e 25, 135, 84) CSS dhe bashkangjitëm një ndryshore të dytë CSS, --bs-bg-opacity, për transparencën alfa (me një vlerë të paracaktuar 1falë një ndryshoreje lokale CSS). Kjo do të thotë në çdo kohë që përdorni .bg-successtani, colorvlera juaj e llogaritur është rgba(25, 135, 84, 1). Variabla lokale CSS brenda çdo .bg-*klase shmang çështjet e trashëgimisë, kështu që instancat e ndërlidhura të shërbimeve nuk kanë automatikisht një transparencë alfa të modifikuar.
Shembull
Për të ndryshuar atë paqartësi, anashkaloni --bs-bg-opacitynëpërmjet stileve të personalizuara ose stileve inline.
<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>Ose, zgjidhni nga ndonjë prej .bg-opacityshërbimeve:
<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
Përveç funksionalitetit të mëposhtëm Sass, merrni parasysh të lexoni për veçoritë tona të personalizuara të CSS (të njohura si variablat CSS) për ngjyrat dhe më shumë.
Variablat
Shumica e background-colorshërbimeve gjenerohen nga ngjyrat tona të temës, të ricaktuara nga variablat tona të përgjithshme të paletës së ngjyrave.
$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));
Ngjyrat në shkallë gri janë gjithashtu të disponueshme, por vetëm një nëngrup përdoret për të gjeneruar ndonjë shërbim.
$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;
Harta
Ngjyrat e temave vendosen më pas në një hartë Sass, në mënyrë që ne të mund t'i kalojmë ato për të gjeneruar shërbimet tona, modifikuesit e komponentëve dhe më shumë.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ngjyrat në shkallë gri janë gjithashtu të disponueshme si një hartë Sass. Kjo hartë nuk përdoret për të krijuar ndonjë shërbim.
$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
);
Ngjyrat RGB krijohen nga një hartë e veçantë Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Dhe paqartësitë e ngjyrave të sfondit ndërtohen mbi atë me hartën e tyre që konsumohet nga API-ja e shërbimeve:
$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");
Përzierjet
Asnjë miks nuk përdoret për të gjeneruar programet tona të sfondit , por ne kemi disa përzierje shtesë për situata të tjera ku dëshironi të krijoni gradientët tuaj.
@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);
}
Utilities API
Shërbimet e sfondit janë deklaruar në API të shërbimeve tona në scss/_utilities.scss. Mësoni se si të përdorni API të shërbimeve.
"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
)
),