باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
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-گرادێنت

ساس

جگە لەم کاراییانەی خوارەوەی 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
);

میکسینەکان

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

@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,
      values: map-merge(
        $theme-colors,
        (
          "body": $body-bg,
          "white": $white,
          "transparent": transparent
        )
      )
    ),