Background
Taurira zvinorehwa kuburikidza background-color
uye wedzera kushongedza nema gradients.
Ruvara rwekumashure
Zvakafanana nemakirasi emavara emavara mavara, isa kumashure kwechinhu kune chero kirasi yemamiriro. Background utilities haigadzike ,color
saka mune dzimwe nguva unozoda kushandisa .text-*
color utilities .
<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
Nekuwedzera .bg-gradient
kirasi, mutsara gradient inowedzerwa semufananidzo wekumashure kune kumashure. Iyi gradient inotanga nechena semi-pachena iyo inodzima ichienda pasi.
Iwe unoda gradient mune yako tsika CSS? Ingo wedzera background-image: var(--bs-gradient);
.
Sass
Pamusoro peiyo inotevera Sass mashandiro, funga kuverenga nezve yedu inosanganisirwa CSS tsika zvivakwa (aka CSS zvinosiyana) zvemavara nezvimwe.
Variables
Zvishandiso zvakawanda background-color
zvinogadzirwa nemavara edingindira redu, anopihwazve kubva kune yedu generic color palette akasiyana.
$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));
Grayscale mavara anowanikwawo, asi chete subset inoshandiswa kugadzira chero zvinoshandiswa.
$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;
Map
Mavara edingindira anozoiswa mumepu yeSass kuti tigone kutenderera pamusoro pawo kuti tigadzire zvatinoshandisa, zvinogadzirisa zvinhu, nezvimwe.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Grayscale mavara anowanikwawo semepu yeSass. Mepu iyi haishandiswe kugadzira chero chekushandisa.
$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
);
Mixins
Hapana mamixins anoshandiswa kugadzira yedu yekumashure zvishandiso , asi isu tine mamwe masanganiswa emamwe mamiriro apo iwe waungade kugadzira yako 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);
}
Purogiramu inonzi Utilities
Zvishandiso zvepashure zvinoziviswa mune zvedu zvekushandisa API mu scss/_utilities.scss
. Dzidza mashandisiro ezvishandiso API.
"background-color": (
property: background-color,
class: bg,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),