Ka morao
Hlahisa moelelo ka ho background-color
eketsa mokhabiso ka likhahla.
'Mala oa bokamorao
Joalo ka litlelase tsa mebala ea mongolo oa maemo, beha bokamorao ba element ho sehlopha sefe kapa sefe sa maemo. Lisebelisoa tsa morao-rao ha lia hlophisoacolor
, kahoo maemong a mang u tla batla ho sebelisa .text-*
lisebelisoa tsa mebala .
<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>
Moralo oa bokamorao
Ka ho eketsa .bg-gradient
sehlopha, gradient ea mela e eketsoa joalo ka setšoantšo sa bokamorao ho bokamorao. Mokhahlelo ona o qala ka bosoeu bo batlang bo bonaletsa bo nyamelang ho ea tlase.
A na u hloka gradient ho CSS ea hau ea tloaelo? Eketsa feela background-image: var(--bs-gradient);
.
Opacity
E kentsoe ho v5.1.0
Ho tloha ka v5.1.0, background-color
lisebelisoa li hlahisoa ka Sass ho sebelisa mefuta-futa ea CSS. Sena se lumella liphetoho tsa 'mala oa nako ea' nete ntle le ho bokelloa le liphetoho tse hlakileng tsa alpha.
Kamoo e sebetsang kateng
Nahana ka .bg-success
lisebelisoa tsa rona tsa kamehla.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Re sebelisa mofuta oa RGB oa rona --bs-success
(o nang le boleng ba 25, 135, 84
) CSS e feto-fetohang le ho hokela mofuta oa bobeli oa CSS, --bs-bg-opacity
, bakeng sa ponaletso ea alpha (ka boleng ba kamehla bo 1
lebohang CSS ea lehae). Seo se bolela hore nako efe kapa efe eo u e sebelisang .bg-success
hona joale, boleng ba hau ba komporo color
ke rgba(25, 135, 84, 1)
. Phapang ea lehae ea CSS ka har'a .bg-*
sehlopha ka seng e qoba mathata a lefa kahoo maemo a teng a lits'ebeletso a se ke a ba le ponaletso ea alpha e fetotsoeng.
Mohlala
Ho fetola opacity eo, hlakola --bs-bg-opacity
ka mekhoa e tloaelehileng kapa mekhoa e ka har'a mela.
<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>
Kapa, khetha ho efe kapa efe ea .bg-opacity
lisebelisoa:
<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
Ntle le ts'ebetso e latelang ea Sass, nahana ka ho bala ka thepa ea rona e kenyellelitsoeng ea CSS (mefuta e fapaneng ea CSS) bakeng sa mebala le tse ling.
Lintho tse fapaneng
Lisebelisoa tse ngata background-color
li hlahisoa ke mebala ea rona ea sehlooho, e abetsoeng bocha ho tsoa ho mefuta ea rona ea mebala e tloaelehileng.
$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));
Mebala ea Grayscale le eona ea fumaneha, empa ho sebelisoa karoloana feela ho hlahisa lisebelisoa life kapa life.
$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;
'Mapa
Mebala ea theme e tla beoa 'mapeng oa Sass hore re tsebe ho o pota-pota ho hlahisa lisebelisoa tsa rona, lintlafatso tsa likarolo, le tse ling.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Mebala ea Grayscale e fumaneha hape joalo ka 'mapa oa Sass. 'Mapa ona ha o sebelisoe ho hlahisa lisebelisoa.
$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
);
Mebala ea RGB e hlahisoa 'mapeng o fapaneng oa Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
'Me li-opacities tsa mebala e ka morao li haha ho eona ka' mapa oa tsona o sebelisoang ke lisebelisoa tsa 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");
Metsoako
Ha ho li-mixins tse sebelisoang ho hlahisa lits'ebeletso tsa rona tsa morao-rao , empa re na le metsoako e meng bakeng sa maemo a mang moo o ka ratang ho iketsetsa li-gradients tsa hau.
@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
Lisebelisoa tsa morao-rao li phatlalatsoa ho lits'ebeletso tsa rona tsa API ho scss/_utilities.scss
. Ithute ho sebelisa lisebelisoa tsa 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
)
),