lafika
Ampitahao ny dikany amin'ny alàlan'ny background-colorasio haingo misy gradient.
Loko ambadika
Mitovy amin'ny kilasy lokon'ny lahatsoratra contextual, apetraho amin'ny kilasy contextual ny lafin'ny singa iray. Tsy napetrakacolor ny kojakoja fototra , ka amin'ny tranga sasany dia te hampiasa .text-* fitaovana miloko ianao .
<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 ambadika
Amin'ny fampidirana .bg-gradientkilasy iray dia ampiana gradient tsipika ho sary lafika amin'ny lamosina. Ity gradient ity dia manomboka amin'ny fotsy semi-mangarahara izay manjavona hatrany ambany.
Mila gradient amin'ny CSS mahazatra anao ve ianao? Ampio fotsiny background-image: var(--bs-gradient);.
hatevin'ny
Nampiana v5.1.0
Amin'ny v5.1.0, ny background-colorfitaovana dia novolavolaina miaraka amin'ny Sass amin'ny alàlan'ny CSS variables. Izany dia ahafahana manova loko amin'ny fotoana tena izy tsy misy fanangonana sy fanovana mangarahara alpha mavitrika.
Ny fomba fiasa
Eritrereto ny .bg-successfitaovana ampiasainay.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Mampiasa dikan-teny RGB amin'ny anay izahay --bs-success(miaraka amin'ny sandan'ny 25, 135, 84) fari-pahaizan'ny CSS ary ampifandraisina ny fari-piadidiana CSS faharoa, --bs-bg-opacity, ho an'ny mangarahara alpha (miaraka amin'ny sanda mahazatra 1noho ny fari-piadidiana CSS eo an-toerana). Midika izany fa amin'ny fotoana rehetra ampiasainao .bg-successizao, ny colorsanda kajy dia rgba(25, 135, 84, 1). Ny fari-piadidiana CSS eo an-toerana ao anatin'ny .bg-*kilasy tsirairay dia misoroka ny olan'ny lova ka tsy manana fangarahara alpha novaina ho azy ny tranganà fampiasa amin'ny fitaovana.
OHATRA
Mba hanovana io tsy fahampiana io dia aforeto --bs-bg-opacityamin'ny alàlan'ny fomba mahazatra na fomba an-tsipika.
<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>Na, misafidiana amin'ny iray amin'ireo .bg-opacityfitaovana:
<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
Ho fanampin'ity fampiasa Sass manaraka ity, diniho ny famakiana momba ny fanananay manokana CSS nampidirina (aka CSS variables) ho an'ny loko sy ny maro hafa.
hiovaova
Ny ankamaroan'ny background-colorfitaovana dia novokarin'ny loko loha-hevitray, navaozina avy amin'ny fari-piainan'ny palette miloko.
$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));
Misy ihany koa ny loko grayscale, saingy ampahany kely ihany no ampiasaina hamoronana fitaovana.
$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;
Sarintany
Apetraka ao amin'ny sarintany Sass avy eo ny lokon'ny lohahevitra mba ahafahantsika mihodinkodina eo amboniny mba hamoronana ny kojakojantsika, ny mpanova singa, sy ny maro hafa.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ny loko grayscale dia azo alaina amin'ny sarintany Sass. Ity sari-tany ity dia tsy ampiasaina hamoronana fitaovana.
$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
);
Ny loko RGB dia novokarina avy amin'ny sarintany Sass misaraka:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Ary ny tsy fahampian'ny loko fototra dia miorina amin'ny sarintany manokana izay lanin'ny API fitaovana:
$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
Tsy misy mixins ampiasaina hamoronana kojakoja fototra , fa manana mixins fanampiny izahay ho an'ny toe-javatra hafa izay tianao hamoronana ny gradients anao manokana.
@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
Ny utilitaria an-damosina dia nambara ao amin'ny API fampiasantsika ao amin'ny scss/_utilities.scss. Ianaro ny fomba fampiasana ny utility 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
)
),