abẹlẹ
Ṣe afihan itumọ nipasẹ background-colorati ṣafikun ohun ọṣọ pẹlu awọn gradients.
Awọ abẹlẹ
Iru si awọn kilasi awọ ọrọ ọrọ ọrọ, ṣeto abẹlẹ ti ohun kan si eyikeyi kilasi ọrọ-ọrọ. Awọn ohun elo abẹlẹ ko ṣetocolor , nitorina ni awọn igba miiran iwọ yoo fẹ lati lo .text-* awọn ohun elo awọ .
<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>Isalẹ abẹlẹ
Nipa fifi .bg-gradientkilaasi kan kun, itusilẹ laini kan jẹ afikun bi aworan abẹlẹ si awọn abẹlẹ. Yi gradient bẹrẹ pẹlu kan ologbele-sihin funfun eyi ti ipare jade si isalẹ.
Ṣe o nilo gradient ninu aṣa CSS rẹ? Kan fi kun background-image: var(--bs-gradient);.
Òótọ́
Fi kun v5.1.0Bi ti v5.1.0, background-colorawọn ohun elo ti wa ni ipilẹṣẹ pẹlu Sass nipa lilo awọn oniyipada CSS. Eyi ngbanilaaye fun awọn ayipada awọ ni akoko gidi laisi akopọ ati awọn iyipada akoyawo alpha ti o ni agbara.
Bawo ni o ṣe n ṣiṣẹ
Ro wa aiyipada .bg-successIwUlO.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
A lo ẹya RGB ti wa --bs-success(pẹlu iye ti 25, 135, 84) oniyipada CSS ati so oniyipada CSS keji, --bs-bg-opacity, fun akoyawo alpha (pẹlu iye aiyipada kan 1ọpẹ si oniyipada CSS agbegbe). Iyẹn tumọ si nigbakugba ti o ba lo .bg-successni bayi, coloriye iṣiro rẹ jẹ rgba(25, 135, 84, 1). Oniyipada CSS agbegbe inu .bg-*kilasi kọọkan yago fun awọn ọran ogún nitoribẹẹ awọn iṣẹlẹ itẹle ti awọn ohun elo ko ni ni akoyawo alpha ti a yipada laifọwọyi.
Apeere
Lati yi opaity yẹn pada, danu --bs-bg-opacitynipasẹ awọn aṣa aṣa tabi awọn aza inline.
<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>Tabi, yan lati eyikeyi ninu awọn .bg-opacityohun elo:
<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
Ni afikun si iṣẹ ṣiṣe Sass atẹle, ronu kika nipa awọn ohun-ini aṣa CSS ti o wa pẹlu wa (awọn oniyipada CSS) fun awọn awọ ati diẹ sii.
Awọn oniyipada
Pupọ background-colorawọn ohun elo jẹ ipilẹṣẹ nipasẹ awọn awọ akori wa, ti a tun sọtọ lati awọn oniyipada paleti awọ jeneriki wa.
$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));
Awọn awọ grayscale tun wa, ṣugbọn ipin kan nikan ni a lo lati ṣe ipilẹṣẹ eyikeyi awọn ohun elo.
$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;
Maapu
Lẹhinna a fi awọn awọ akori sinu maapu Sass kan ki a le lu wọn lati ṣe agbekalẹ awọn ohun elo wa, awọn iyipada paati, ati diẹ sii.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Awọn awọ greyscale tun wa bi maapu Sass kan. Maapu yii kii ṣe lati ṣe ipilẹṣẹ eyikeyi awọn ohun elo.
$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
);
Awọn awọ RGB jẹ ipilẹṣẹ lati maapu Sass lọtọ:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Ati awọn aye awọ abẹlẹ kọ lori iyẹn pẹlu maapu tiwọn ti o jẹ nipasẹ API awọn ohun elo:
$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");
Mixins
Ko si awọn apopọ ti a lo lati ṣe ipilẹṣẹ awọn ohun elo isale wa , ṣugbọn a ni diẹ ninu awọn apopọ afikun fun awọn ipo miiran nibiti o fẹ ṣẹda awọn gradients tirẹ.
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$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 Awọn ohun elo
Awọn ohun elo abẹlẹ jẹ ikede ninu awọn ohun elo API ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.
"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
)
),