Nsima
Kopesa ndimbola na nzela background-color
mpe kobakisa décoration na ba gradients.
Color ya fond
Ndenge moko na ba classes ya couleur ya texte contextuel, tia fond ya élément na classe contextuelle nionso. Ba utilitaires ya fond ezo se mettre tecolor
, yango wana na ba cas misusu okolinga kosalela .text-*
ba utilitaires ya couleur .
<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>
Gradient ya fond
Na kobakisa .bg-gradient
classe, gradient linéaire ebakisami lokola image ya fond na ba fond. Gradient oyo ebandi na pembe semi-transparent oyo esili tii na se.
Ozali na mposa ya gradient na CSS na yo ya momesano? Bakisa kaka background-image: var(--bs-gradient);
.
Opacité
Ebakisami na v5.1.0
Kobanda na v5.1.0, background-color
ba utilitaires esalemi na Sass na kosalelaka ba variables ya CSS. Yango epesaka nzela na mbongwana ya langi na ntango ya solosolo kozanga ete bábongola compilation mpe bábongola transparence alpha dynamique.
Ndenge oyo esalaka
.bg-success
Tala utilitaire na biso ya défaut .
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Tosalelaka version RGB ya variable na biso --bs-success
(na valeur ya 25, 135, 84
) CSS mpe tokangisi variable CSS ya mibale, --bs-bg-opacity
, mpo na transparence alpha (na valeur par défaut 1
grâce na variable CSS locale). Yango elingi koloba ntango nyonso oyo osaleli .bg-success
sikoyo, color
motuya na yo oyo otángi ezali rgba(25, 135, 84, 1)
. Variable CSS locale na kati ya .bg-*
classe moko na moko e éviter ba problèmes ya héritage donc ba instances nestées ya ba utilitaires ezala automatiquement te na transparence alpha modifiée.
Ndakisa
Mpo na kobongola opacité wana, bolongola --bs-bg-opacity
na nzela ya ba styles personnalisés to ba styles ya kati.
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>
To, pona kati na moko ya ba .bg-opacity
utilités:
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
Sass oyo azali
En plus ya fonctionnalité ya Sass oyo elandi, kanisá kotanga na ntina ya ba propriétés personnalisées na biso ya CSS oyo ekotisami (aka variables CSS) mpo na ba couleurs mpe mingi mosusu.
Ba variables oyo ezali
Ba background-color
utilitaires mingi esalemaka na ba couleurs na biso ya thème, ezongisami na ba variables na biso ya palette ya couleur générique.
$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));
Ba couleurs ya gris ezali pe, kasi kaka sous-ensemble nde esalelamaka pona kobimisa ba utilitaires nionso.
$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;
Karte
Na nsima, batyaka balangi ya motó ya likambo na kati ya karte ya Sass mpo tokoka kosala boucle likoló na yango mpo na kobimisa ba utilitaires na biso, ba modificateurs ya ba composants, mpe makambo mosusu.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ba couleurs ya gris ezali pe lokola carte ya Sass. Carte oyo esalelamaka te mpo na kobimisa ba utilités moko te.
$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
);
Ba couleurs ya RGB esalemi na carte ya Sass ekeseni:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Mpe ba opacité ya couleur ya fond etongami likolo ya yango na carte na bango moko oyo e consommé na API ya ba utilitaires:
$utilities-bg: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
)
);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
Ba mixins
No mixins are used to generate our background utilities , kasi tozali na mwa ba mixins ya kobakisa mpo na makambo mosusu epai olingi kosala ba gradients na yo moko.
@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 ba utilitaires
Ba utilitaires ya fond esakolami na API ya ba utilitaires na biso na scss/_utilities.scss
. Yekola ndenge ya kosalela API ya ba utilitaires.
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),