Позадина

Пренесете го значењето преку background-colorи додајте декорација со градиенти.

На оваа страница

Боја на позадина

Слично на класите на бои на контекстуален текст, поставете ја позадината на елементот на која било контекстуална класа. Услужните програми за заднина не се поставуваатcolor , така што во некои случаи ќе сакате да користите .text-* алатки за боја .

.бг-основно

.бг-секундарна

.бг-успех

.бг-опасност

.бг-предупредување

.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-предупредување.bg-градиент

.bg-info.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;

Карта

Боите на темите потоа се ставаат во мапата 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
);

Мешавини

Не се користат мешавини за генерирање на нашите алатки за заднина , но имаме некои дополнителни мешавини за други ситуации каде што би сакале да креирате сопствени градиенти.

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