Asalkii hore
U gudbi macnaha background-coloroo ku dar qurxinta gradients.
midabka asalka
Si la mid ah fasallada midabka qoraalka ee macnaha guud, dhig asalka curiyaha fasal kasta oo macnaha guud ah. Isticmaalka asalka ahi ma dejiyocolor , markaa xaaladaha qaarkood waxaad u baahan doontaa inaad isticmaasho qalabka .text-* midabka .
<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>Dabaqa hoose
Marka lagu daro .bg-gradientfasal, jaanis toosan ayaa lagu daraa sida sawirka asalka ah ee galalka dambe. Jaranjaradani waxa ay ku bilaabataa caddaan badh-dhafan oo ka soo baxaysa xagga hoose.
Ma u baahan tahay gradient CSS kaaga caadada ah? Kaliya ku dar background-image: var(--bs-gradient);.
Daahfurnaanta
Lagu daray v5.1.0Sida v5.1.0, background-coloryutiilitida waxaa lagu soo saaray Sass iyadoo la adeegsanayo doorsoomayaasha CSS. Tani waxay u oggolaaneysaa isbeddelka midabka waqtiga-dhabta ah iyada oo aan la isku dubaridin iyo isbeddellada daahfurnaanta alfa ee firfircoon.
Sida ay u shaqeyso
.bg-successTixgeli utility our default .
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Waxaan isticmaalnaa nooca RGB ee our --bs-success(oo leh qiimaha 25, 135, 84) doorsoome CSS waxaana ku lifaaqnaa doorsoomaha labaad ee CSS, --bs-bg-opacity, daah-furnaanta alfa (oo leh qiime caadi ah 1iyadoo ay ugu wacan tahay doorsoomaha CSS ee maxalliga ah). Taas macnaheedu waa wakhti kasta oo aad isticmaasho hadda, qiimahaaga .bg-successla xisaabiyay waa . Doorsoomiyaha CSS ee gudaha fasal kasta waxa uu ka fogaadaa arrimaha dhaxalka si markaa tusaale ahaan tas-hiilaadka tas-hiilaadka aanay si toos ah u yeelan hufnaanta alfa oo la beddelay.colorrgba(25, 135, 84, 1).bg-*
Tusaale
Si aad u bedesho mugdigaas, ku dhaaf --bs-bg-opacityqaababka gaarka ah ama qaababka khadka
<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>Ama, ka dooro mid ka mid ah .bg-opacityadeegyada:
<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
Marka lagu daro shaqada Sass ee soo socota, tixgeli inaad akhrido wax ku saabsan guryahayada CSS ee ku jira (loo yaqaan doorsoomayaasha CSS) ee midabada iyo wax ka badan.
Kala duwanaansho
Inta badan background-colortas-hiilaadka waxa soo saara midabada mawduuceena, oo dib loogu qoondeeyay doorsoomayaasha palette midabada guud.
$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));
Midabada cawl sidoo kale waa la heli karaa, laakiin qayb-hoosaad kaliya ayaa loo isticmaalaa in lagu soo saaro agab kasta.
$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;
Maab
Midabada mawduuca ayaa markaa la geliyaa khariidadda Sass si aan u soo saarno iyaga si aan u soo saarno utility our, wax ka beddelayaasha qaybaha, iyo in ka badan.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Midabada Cawlan ayaa sidoo kale loo heli karaa khariidadda Sass ahaan. Khariidaddan looma isticmaalo in lagu dhaliyo wax adeeg ah.
$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
);
Midabada RGB waxaa laga soo saaray khariidad Sass gooni ah:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Oo midabada asalka ahi waxay ku dhistaan khariidadooda taas oo ay isticmaasho API-ga:
$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");
Isku qas
Ma jiraan wax la isku daray oo loo isticmaalo in lagu soo saaro agabkayaga asalka ah , laakiin waxaan haynaa xoogaa isku darka ah oo dheeraad ah xaaladaha kale halkaas oo aad jeclaan lahayd inaad abuurto gradients adiga kuu gaar ah.
@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
Utility-ga asalka ah waxa lagu caddeeyey adeegyadayada API gudaha scss/_utilities.scss. Baro sida loo isticmaalo API utilities.
"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
)
),