Keeb kwm
Qhia lub ntsiab lus los ntawm background-colorthiab ntxiv kho kom zoo nkauj nrog gradients.
Xim tom qab
Zoo ib yam li cov chav kawm ntawv xim xim, teeb lub keeb kwm yav dhau ntawm ib lub caij rau txhua chav kawm ntawv. Cov khoom siv hauv qab tsis tau teeb tsacolor , yog li qee zaum koj yuav xav siv cov khoom siv .text-* xim .
<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
Los ntawm kev ntxiv ib .bg-gradientchav kawm, ib txoj kab gradient ntxiv raws li cov duab hauv qab rau cov keeb kwm yav dhau. Qhov gradient no pib nrog ib nrab pob tshab dawb uas ploj mus rau hauv qab.
Koj puas xav tau gradient hauv koj qhov kev cai CSS? Tsuas yog ntxiv background-image: var(--bs-gradient);.
Sass
Ntxiv rau cov haujlwm Sass hauv qab no, xav txog kev nyeem txog peb cov khoom siv CSS suav nrog (aka CSS variables) rau xim thiab ntau dua.
Hloov pauv
Cov background-colorkhoom siv feem ntau yog tsim los ntawm peb cov ntsiab lus xim, muab rov qab los ntawm peb cov xim palette sib txawv.
$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));
Greyscale xim kuj muaj, tab sis tsuas yog ib lub subset yog siv los tsim cov khoom siv.
$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;
Daim ntawv qhia
Cov ntsiab lus xim raug muab tso rau hauv Sass daim ntawv qhia yog li peb tuaj yeem hla lawv los tsim peb cov khoom siv hluav taws xob, cov khoom hloov kho, thiab lwm yam.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Greyscale xim kuj muaj raws li daim ntawv qhia Sass. Daim ntawv qhia no tsis yog siv los tsim cov khoom siv hluav taws xob.
$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
Tsis muaj cov mixins siv los tsim peb cov khoom siv yav dhau los , tab sis peb muaj qee qhov sib xyaw ntxiv rau lwm qhov xwm txheej uas koj xav tsim koj tus kheej 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);
}
Utilities API
Cov khoom siv tom qab tau tshaj tawm hauv peb cov khoom siv hluav taws xob API hauv scss/_utilities.scss. Kawm paub siv cov khoom siv hluav taws xob API li cas.
"background-color": (
property: background-color,
class: bg,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),