رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

زمینه

معنی را از طریق background-colorمنتقل کنید و دکوراسیون را با شیب اضافه کنید.

رنگ پس زمینه

مشابه کلاس‌های رنگ متن متنی، پس‌زمینه یک عنصر را روی هر کلاس متنی تنظیم کنید. ابزارهای پس زمینه تنظیم نمی شوندcolor ، بنابراین در برخی موارد می خواهید از .text-* ابزارهای رنگی استفاده کنید .

.bg-primary
.bg-ثانویه
.bg-موفقیت
.bg- خطر
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-سفید
.bg-transparent
<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-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient

کدورت

اضافه شده در نسخه 5.1.0

از نسخه 5.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اکنون استفاده می کنید، مقدار محاسبه شده شما colorبرابر است با rgba(25, 135, 84, 1). متغیر CSS محلی در داخل هر .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;

نقشه

سپس رنگ‌های تم در نقشه 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);
}

Utilities API

ابزارهای پس زمینه در API ابزارهای ما در اعلان شده اند scss/_utilities.scss. با نحوه استفاده از Utilities 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
      )
    ),