Keeb kwm
Qhia lub ntsiab lus los ntawm background-colorthiab ntxiv kho kom zoo nkauj nrog gradients.
Xim tom qab
Zoo ib yam li cov chav kawm ntawv xim xim, teeb lub keeb kwm yav dhau ntawm ib lub caij rau txhua chav kawm ntawv. Cov khoom siv hauv qab tsis tau teeb tsacolor , yog li qee zaum koj yuav xav siv cov khoom siv .text-* xim .
<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>Background gradient
Los ntawm kev ntxiv ib .bg-gradientchav kawm, ib txoj kab gradient ntxiv raws li cov duab hauv qab rau cov keeb kwm yav dhau. Qhov gradient no pib nrog ib nrab pob tshab dawb uas ploj mus rau hauv qab.
Koj puas xav tau gradient hauv koj qhov kev cai CSS? Tsuas yog ntxiv background-image: var(--bs-gradient);.
Opacity
Ntxiv hauv v5.1.0
Raws li ntawm v5.1.0, background-colorcov khoom siv hluav taws xob tau tsim nrog Sass siv CSS hloov pauv. Qhov no tso cai rau kev hloov xim ntawm lub sijhawm tiag tiag yam tsis muaj kev sib sau ua ke thiab kev hloov pauv alpha pob tshab.
Nws ua haujlwm li cas
Xav txog peb qhov kev .bg-successsiv hluav taws xob tsis zoo.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Peb siv ib qho RGB version ntawm peb --bs-success(nrog tus nqi ntawm 25, 135, 84) CSS sib txawv thiab txuas ib tug thib ob CSS kuj sib txawv, --bs-bg-opacity, , rau lub alpha pob tshab (nrog rau lub neej ntawd tus nqi 1ua tsaug rau lub zos CSS variable). Qhov ntawd txhais tau tias txhua lub sijhawm koj siv .bg-successtam sim no, koj cov colornqi suav yog rgba(25, 135, 84, 1). Lub zos CSS kuj sib txawv hauv txhua .bg-*chav kawm zam cov teeb meem qub txeeg qub teg yog li cov piv txwv ntawm cov khoom siv hluav taws xob tsis tuaj yeem muaj qhov hloov pauv alpha pob tshab.
Piv txwv
Txhawm rau hloov qhov opacity, override --bs-bg-opacityntawm kev cai style lossis inline styles.
<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>Los yog, xaiv los ntawm ib qho ntawm cov .bg-opacitykhoom siv hluav taws xob:
<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
Ntxiv rau cov haujlwm Sass hauv qab no, xav txog kev nyeem txog peb cov khoom siv CSS suav nrog (aka CSS variables) rau xim thiab ntau dua.
Hloov pauv
Cov background-colorkhoom siv feem ntau yog tsim los ntawm peb cov ntsiab lus xim, muab rov qab los ntawm peb cov xim palette sib txawv.
$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));
Greyscale xim kuj muaj, tab sis tsuas yog ib qho subset yog siv los tsim cov khoom siv.
$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;
Daim ntawv qhia
Cov ntsiab lus xim raug muab tso rau hauv Sass daim ntawv qhia yog li peb tuaj yeem hla lawv los tsim peb cov khoom siv hluav taws xob, cov khoom hloov kho, thiab ntau dua.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Greyscale xim kuj muaj raws li daim ntawv qhia Sass. Daim ntawv qhia no tsis yog siv los tsim cov khoom siv hluav taws xob.
$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 xim yog tsim los ntawm ib daim ntawv qhia Sass cais:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Thiab tom qab xim opacities tsim rau qhov ntawd nrog lawv tus kheej daim ntawv qhia uas tau noj los ntawm cov khoom siv 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");
Mixins
Tsis muaj cov mixins siv los tsim peb cov khoom siv tom qab , tab sis peb muaj qee qhov sib xyaw ntxiv rau lwm qhov xwm txheej uas koj xav tsim koj tus kheej gradients.
@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
Cov khoom siv tom qab tau tshaj tawm hauv peb cov khoom siv hluav taws xob API hauv scss/_utilities.scss. Kawm paub siv cov khoom siv hluav taws xob API li cas.
"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
)
),