Matimu
Ku hundzisela nhlamuselo hi ku tirhisa background-colorna ku engetela ku khavisa hi swirhendzevutani.
Muhlovo wa le ndzhaku
Ku fana na titlilasi ta mihlovo ya tsalwa ra mongo, veka ndzhaku ka elemente eka tlilasi yihi na yihi ya mongo. Switirhisiwa swa le ndzhaku a swi vekiwicolor , kutani eka swiyimo swin'wana u ta lava ku tirhisa .text-* switirhisiwa swa mihlovo .
<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>Xirhendzevutani xa le ndzhaku
Hi ku engetela .bg-gradienttlilasi, ku engeteriwa linear gradient tanihi xifaniso xa le ndzhaku eka swifaniso swa le ndzhaku. Gradient leyi yisungula hi semi-transparent white leyinga nyamalala kuya ehansi.
Xana u lava gradient eka CSS ya wena ya ntolovelo? Ntsena engetela background-image: var(--bs-gradient);.
Sass
Ku engetela eka ntirho wa Sass lowu landzelaka, anakanya hi ku hlaya hi swihlawulekisi swa hina swa ntolovelo swa CSS leswi katsiweke (aka swilo leswi cinca-cincaka swa CSS) swa mihlovo na swin’wana.
Swilo leswi cinca-cincaka
Switirhisiwa swo tala background-colorswi endliwa hi mihlovo ya hina ya nhlokomhaka, leyi averiweke nakambe ku suka eka swilo swa hina leswi cinca-cincaka swa phalete ya mihlovo ya xivumbeko xa le henhla.
$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));
Mihlovo ya greyscale na yona ya kumeka, kambe ku tirhisiwa ntsena ntlawa lowutsongo ku humesa switirhisiwa swihi na swihi.
$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;
Mepe
Mihlovo ya theme yi tlhela yi vekiwa eka mepe wa Sass leswaku hi ta kota ku loop ehenhla ka yona ku humesa switirhisiwa swa hina, swicinci swa swiphemu, na swin’wana.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Mihlovo ya greyscale yitlhela yi kumeka tani hi mepe wa Sass. Mepe lowu a wu tirhisiwi ku endla switirhisiwa swihi na swihi.
$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
);
Ti- mixins
No mixins are used to generate our background utilities , kambe hi na ti mixins tin’wana to engetela eka swiyimo swin’wana laha u nga tsakelaka ku tiendlela ti gradient ta wena.
@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);
}
API ya switirhisiwa
Switirhisiwa swa le ndzhaku swi tivisiwile eka API ya hina ya switirhisiwa hi scss/_utilities.scss. Dyondza ndlela yo tirhisa API ya switirhisiwa.
"background-color": (
property: background-color,
class: bg,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),