Ka morao
Hlahisa moelelo ka ho background-color
eketsa mokhabiso ka likhahla.
'Mala oa bokamorao
Joalo ka litlelase tsa mebala ea mongolo oa maemo, beha bokamorao ba element ho sehlopha sefe kapa sefe sa maemo. Lisebelisoa tsa morao-rao ha lia hlophisoacolor
, kahoo maemong a mang u tla batla ho sebelisa .text-*
lisebelisoa tsa mebala .
<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>
Moralo oa bokamorao
Ka ho eketsa .bg-gradient
sehlopha, gradient ea mela e eketsoa joalo ka setšoantšo sa bokamorao ho bokamorao. Mokhahlelo ona o qala ka bosoeu bo batlang bo bonaletsa bo nyamelang ho ea tlase.
A na u hloka gradient ho CSS ea hau ea tloaelo? Eketsa feela background-image: var(--bs-gradient);
.
Sass
Ntle le ts'ebetso e latelang ea Sass, nahana ka ho bala ka thepa ea rona e kenyellelitsoeng ea CSS (mefuta e fapaneng ea CSS) bakeng sa mebala le tse ling.
Lintho tse fapaneng
Lisebelisoa tse ngata background-color
li hlahisoa ke mebala ea rona ea sehlooho, e abetsoeng bocha ho tsoa ho mefuta ea rona ea mebala e tloaelehileng.
$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));
Mebala ea Grayscale le eona ea fumaneha, empa ho sebelisoa karoloana feela ho hlahisa lisebelisoa life kapa life.
$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;
'Mapa
Mebala ea theme e tla beoa 'mapeng oa Sass hore re tsebe ho o pota-pota ho hlahisa lisebelisoa tsa rona, lintlafatso tsa likarolo, le tse ling.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Mebala ea Grayscale e fumaneha hape joalo ka 'mapa oa Sass. 'Mapa ona ha o sebelisoe ho hlahisa lisebelisoa.
$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
);
Metsoako
Ha ho li-mixins tse sebelisoang ho hlahisa lits'ebeletso tsa rona tsa morao-rao , empa re na le metsoako e meng bakeng sa maemo a mang moo o ka ratang ho iketsetsa li-gradients tsa hau.
@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
Lisebelisoa tsa morao-rao li phatlalatsoa ho lits'ebeletso tsa rona tsa API ho scss/_utilities.scss
. Ithute ho sebelisa lisebelisoa tsa API.
"background-color": (
property: background-color,
class: bg,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),