Naggappuan
Ipaawat ti kaipapanan babaen background-color
ken mangnayon iti dekorasion nga addaan kadagiti gradient.
Kolor ti likudan
Kasla dagiti klase ti kolor ti teksto ti konteksto, ikeddeng ti likudan ti maysa nga elemento iti ania man a klase ti konteksto. Dagiti utilidad ti likudan ket saan a mangikeddengcolor
, isu nga iti dadduma a kaso ket kayatmo nga usaren .text-*
dagiti utilidad ti kolor .
<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>
Gradiente ti likudan
Babaen ti pananginayon ti maysa a .bg-gradient
klase, ti linear a panagrang-ay ket mainayon a kas ti ladawan ti likudan kadagiti likudan. Daytoy a gradient ket mangrugi iti semi-transparent a puraw a daytoy ket agkupas aginggana iti baba.
Kasapulan kadi ti gradient iti kostumbre a CSS-mo? Inayon laeng ti background-image: var(--bs-gradient);
.
Sass nga
Malaksid ti sumaganad a panagusar ti Sass, ibilang ti panagbasa maipapan kadagiti nairaman a kostumbre a tagikua ti CSSmi (aka dagiti variable ti CSS) para kadagiti kolor ken dadduma pay.
Dagiti Variable
Kaaduan kadagiti background-color
utilidad ket pinartuat babaen dagiti kolor ti temami, a naituding manen manipud kadagiti sapasap a variable ti paleta ti kolormi.
$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));
Dagiti kolor ti grayscale ket magun-od pay, ngem ti laeng subgrupo ti maus-usar a mangpataud ti ania man a utilidad.
$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 nga
Kalpasanna dagiti kolor ti tema ket maikabil iti mapa ti Sass tapno mabalintayo ti ag-loop kadagitoy tapno mangpataud kadagiti utilidadtayo, dagiti mangbalbaliw ti paset, ken dadduma pay.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Magun-odan met dagiti kolor ti grayscale kas mapa ti Sass. Daytoy a mapa ket saan a maus-usar a mangpataud ti ania man a utilidad.
$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
);
Dagiti mixin
Awan dagiti mixin a maus-usar a mangpataud kadagiti utilidadmi iti likudan , ngem addaankami kadagiti sumagmamano a kanayonan a mixin para kadagiti sabali a kasasaad a kayatmo a mangpartuat kadagiti bukodmo a gradient.
@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 dagiti utilidad
Dagiti utilidad ti likudan ket naideklara kadagiti utilidadmi nga API iti scss/_utilities.scss
. Ammuem no kasano nga usaren ti utilities API.
"background-color": (
property: background-color,
class: bg,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),