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);.
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
);
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(--#{$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
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,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),