Замина
Маъноро тавассути background-colorградиентҳо интиқол диҳед ва ороишро илова кунед.
Ранги замина
Монанди синфҳои ранги матнии контекстӣ, заминаи элементро ба ҳама гуна синфи контекстӣ таъин кунед. Утилитҳои замина насб карда намешавандcolor , аз ин рӯ дар баъзе мавридҳо шумо мехоҳед аз .text-* утилитаҳои ранг истифода баред .
<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>Градиенти замина
Бо илова кардани .bg-gradientсинф, градиенти хатӣ ҳамчун тасвири замина ба замина илова карда мешавад. Ин градиент бо сафеди нимшаффоф оғоз меёбад, ки то поён пажмурда мешавад.
Оё ба шумо дар CSS фармоишии худ градиент лозим аст? Танҳо илова кунед background-image: var(--bs-gradient);.
Шаффофият
Дар v5.1.0 илова карда шудааст
Аз v5.1.0, утилитаҳо background-colorбо Sass бо истифода аз тағирёбандаҳои CSS тавлид мешаванд. Ин имкон медиҳад, ки дар вақти воқеӣ тағир додани ранг бидуни тартиб ва тағироти шаффофияти динамикии алфа.
Он чӣ гуна кор мекунад
Утилити пешфарзи моро баррасӣ кунед .bg-success.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Мо версияи RGB-и тағирёбандаи CSS-и --bs-successхудро (бо арзиши ) истифода мебарем ва барои шаффофияти алфа 25, 135, 84як тағирёбандаи дуюми CSS -ро замима мекунем (бо арзиши пешфарз ба шарофати тағирёбандаи маҳаллии CSS). Ин маънои онро дорад, ки ҳар вақте, ки шумо ҳоло истифода мекунед , арзиши ҳисобшудаи шумо . Тағйирёбандаи локалии CSS дар дохили ҳар як синф аз мушкилоти меросӣ канорагирӣ мекунад, аз ин рӯ намунаҳои лонашудаи утилитаҳо ба таври худкор шаффофияти тағирёфтаи алфа надоранд.--bs-bg-opacity1.bg-successcolorrgba(25, 135, 84, 1).bg-*
Мисол
Барои тағир додани он шаффофият, --bs-bg-opacityтавассути сабкҳои фармоишӣ ё сабкҳои дохилиро аз байн баред.
<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>Ё, аз яке аз барномаҳои .bg-opacityкоммуналӣ интихоб кунед:
<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, дар бораи хосиятҳои фармоишии CSS (тағйирёбандаҳои CSS) барои рангҳо ва ғайра хонед.
Тағйирёбандаҳо
Аксари background-colorутилитҳо бо рангҳои мавзӯии мо тавлид мешаванд, ки аз тағирёбандаҳои палитраи рангҳои умумии мо дубора таъин шудаанд.
$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));
Рангҳои хокистарранг низ дастрасанд, аммо барои тавлиди ҳама гуна утилитаҳо танҳо зермаҷмӯа истифода мешаванд.
$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;
Харита
Пас аз он рангҳои мавзӯъ ба харитаи Sass ҷойгир карда мешаванд, то мо метавонем онҳоро аз болои онҳо гардиш карда, утилитаҳои худ, тағирдиҳандаҳои ҷузъҳо ва ғайраро тавлид кунем.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Рангҳои хокистарранг инчунин ҳамчун харитаи Sass дастрасанд. Ин харита барои тавлиди ягон утилитаҳо истифода намешавад.
$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
);
Рангҳои RGB аз харитаи алоҳидаи Sass тавлид мешаванд:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Ва ношаффофияти рангҳои пасзамина дар он бо харитаи худ, ки аз ҷониби утилитаҳои API истифода мешавад, сохта мешаванд:
$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");
Миксинҳо
Барои тавлиди утилитаҳои пасзаминаи мо ягон миксин истифода намешавад , аммо мо барои дигар ҳолатҳое, ки шумо мехоҳед градиентҳои худро эҷод кунед, чанд миксҳои иловагӣ дорем.
@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 Utilities
Утилитҳои замина дар API утилитаҳои мо дар scss/_utilities.scss. Омӯзед, ки чӣ тавр истифода бурдани API-и коммуналӣ.
"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
)
),