باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

باکگراوند

مانا لە ڕێگەی background-colorو زیادکردنی ڕازاندنەوە بە گرادێنتەکان.

ڕەنگی باكگراوند

هاوشێوەی پۆلەکانی ڕەنگی دەقی کۆنتێکست، پاشبنەمای توخمێک بۆ هەر پۆلێکی کۆنتێکست دابنێ. سوودمەندییەکانی پاشبنەما ڕێکناخرێن بۆیەcolor لە هەندێک حاڵەتدا دەتەوێت .text-* سوودمەندییەکانی ڕەنگ بەکاربهێنیت .

.bg-سەرەکی
.bg-لاوەکی
.bg-سەرکەوتن
.bg-مەترسی
.bg-ئاگادارکردنەوە
.bg-زانیاری
.bg-ڕووناکی
.bg-تاریک
.bg-جەستە
.bg-سپی
.bg-شەفاف
<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);.

.bg-primary.bg-گرادێنت
.bg-لاوەکی.bg-gradient
.bg-success.bg-گرادێنت
.bg-مەترسی.bg-gradient
.bg-ئاگادارکردنەوە.bg-gradient
.bg-info.bg-گرادێنت
.bg-light.bg-گرادێنت
.bg-dark.bg-گرادێنت

ناڕوونی

لە 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مان هاوپێچ دەکەین، --bs-bg-opacity, بۆ شەفافیەتی ئەلفا (بە بەهای پێشوەختە 1بەهۆی گۆڕاوێکی CSSی ناوخۆیی). واتە هەر کاتێک ئێستا بەکاری بهێنیت ، بەهای .bg-successحیسابکراوەکەت بریتییە لە . گۆڕاوەی CSSی ناوخۆیی لە ناو هەر پۆلێکدا خۆی لە کێشەکانی میرات دەپارێزێت بۆیە نموونە هێلانەییەکانی سوودمەندەکان بە شێوەیەکی ئۆتۆماتیکی شەفافیەتی ئەلفا دەستکاریکراویان نییە.colorrgba(25, 135, 84, 1).bg-*

نموونە

بۆ گۆڕینی ئەو ناڕوونییە، --bs-bg-opacityلە ڕێگەی ستایلە تایبەتەکان یان ستایلە ناو هێڵەکانەوە سەرپێچی بکە.

ئەمە پاشخانی سەرکەوتنی پێشوەختەیە
ئەمەش 50% پاشبنەمای سەرکەوتنی ناڕوونییە
<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خزمەتگوزارییەکان هەڵبژێرە:

ئەمە پاشخانی سەرکەوتنی پێشوەختەیە
ئەمەش 75% پاشبنەمای سەرکەوتنی ناڕوونییە
ئەمەش 50% پاشبنەمای سەرکەوتنی ناڕوونییە
ئەمەش 25% پاشبنەمای سەرکەوتنی ناڕوونییە
ئەمەش پاشخانی سەرکەوتنی ناڕوونی 10% یە
<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;

نەخشە

پاشان ڕەنگەکانی تەوەر دەخرێنە ناو نەخشەی ساسەوە بۆ ئەوەی بتوانین بەسەریاندا لوپ بکەین بۆ دروستکردنی سوودمەندییەکانمان، دەستکاریکەری پێکهاتەکان و زۆر شتی تر.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

هەروەها ڕەنگی خۆڵەمێشی وەک نەخشەی ساس بەردەستە. ئەم نەخشەیە بۆ دروستکردنی هیچ سوودمەندێک بەکارناهێنرێت.

$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 ی سوودمەندیەکان

سوودمەندییەکانی پاشبنەما لە 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
      )
    ),