Bokamorago

Fetiša tlhalošo ka background-colorle go oketša mokgabišo ka dikelo.

Letlakaleng le

Mmala wa ka morao

Go swana le diklase ta mebala ya sengwalwa sa diteng, beakanya mokokotlo wa elemente go sehlopha sefe goba sefe sa seemo. Didirišwa tša ka morago ga di beakantšwecolor , ka fao maemong a mangwe o tla nyaka go šomiša .text-* didirišwa tša mebala .

.bg-ya mathomo

.bg-ya bobedi

.bg-katlego

.bg-kotsi

.bg-temošo

.bg-tshedimošo

.bg-seetša

.bg-lefsifsi

.bg-mmele

.bg-e tšhweu

.bg-e lego pepeneneng

<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>

Gradient ya lemorago

Ka go tlaleletša .bg-gradientsehlopha, kelo ya mothalo e tlaleletšwa bjalo ka seswantšho sa morago go dimelo tša morago. Gradient ye e thoma ka bošweu bjo bo sa bonagalego gabotse bjo bo fifalago go ya fase.

Na o hloka gradient ka go CSS ya gago ya tlwaelo? E no oketša ka background-image: var(--bs-gradient);.

.bg-ya mantlha.bg-gradient

.bg-bobedi.bg-gradient

.bg-katlego.bg-gradient

.bg-kotsi.bg-gradient

.bg-temošo.bg-gradient

.bg-tshedimošo.bg-gradient

.bg-seetša.bg-gradient

.bg-lefsifsi.bg-gradient

Go se bonagale gabotse

E okeditšwe ka go v5.1.0

Go tloga go v5.1.0, background-colordidirišwa di tšweletšwa ka Sass ka go šomiša diphetogo tša CSS. Se se dumelela diphetogo tša mmala tša nako ya nnete ntle le go kgoboketša le diphetogo tša go ba pepeneneng tša alpha tše di fetogago.

Kamoo e šomago ka gona

.bg-successEla hloko utility ya rena ya default .

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

Re diriša phetolelo ya RGB ya rena --bs-success(ka boleng bja 25, 135, 84) phetogo ya CSS gomme ra kgomaretša phetogo ya bobedi ya CSS, --bs-bg-opacity, bakeng sa go ba pepeneneng ga alpha (ka boleng bja go se fetoge 1ka lebaka la phetogo ya CSS ya lefelong leo). Seo se ra gore nako efe goba efe yeo o e šomišago .bg-successbjale, boleng bja gago colorbjo bo khomphutha ke rgba(25, 135, 84, 1). Phapano ya CSS ya selegae ka gare ga .bg-*sehlopha se sengwe le se sengwe e efoga ditaba tša bohwa ka fao ditiragalo tše di tsentšwego ka gare ga didirišwa ga di be le go ba pepeneneng ga alpha mo go fetotšwego ka go iketla.

Mohlala

Go fetoa go se bonagale moo, tloša --bs-bg-opacityka ditaele tša tlwaelo goba ditaele tša ka gare ga mothaladi.

Ye ke mokokotlo wa katlego wa go se fetoge

Sena ke 50% opacity katleho bokamorao

<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>

Goba, kgetha go tšwa go efe goba efe ya .bg-opacitydidirišwa:

Ye ke mokokotlo wa katlego wa go se fetoge

Sena ke 75% opacity katleho bokamorao

Sena ke 50% opacity katleho bokamorao

Sena ke 25% opacity katleho bokamorao

Sena ke 10% opacity katleho bokamorao

<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

Go tlaleletša go mošomo wo o latelago wa Sass, nagana ka go bala ka ga dithoto tša rena tša tlwaelo tša CSS tšeo di akareditšwego (aka diphetogo tša CSS) bakeng sa mebala le tše dingwe.

Diphetogo

Bontši bja background-colordidirišwa di tšweletšwa ke mebala ya rena ya sehlogo, yeo e abetšwego gape go tšwa go diphetogo tša rena tša phalete ya mebala ya kakaretšo.

$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));

Mebala ya sekala sa bohlokwa le yona e a hwetšagala, eupša go šomišwa fela sehlopha se senyenyane go tšweletša didirišwa dife goba dife.

$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;

Mmapa

Mebala ya sehlogo e gona e bewa ka gare ga mmapa wa Sass gore re kgone go loop godimo ga yona go tšweletša didirišwa tša rena, diphetoši tša dikarolo, le tše dingwe.

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

Mebala ya greyscale le yona e hwetšagala bjalo ka mmapa wa Sass. Mmapa wo ga o šomišwe go tšweletša didirišwa le ge e le dife.

$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
);

Mebala ya RGB e tšweletšwa go tšwa go mmapa wa Sass wo o arogilego:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Gomme di-opacities tša mmala wa ka morago di aga godimo ga seo ka mmapa wa bona wo o jewago ke API ya didirišwa:

$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");

Ditswaki

No mixins are used to generate our background utilities , eupša re na le di-mixin tše dingwe tša tlaleletšo bakeng sa maemo a mangwe moo o ratago go hlama di-gradient tša gago.

@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 ya Didirišwa

Didirišwa tša ka morago di tsebagaditšwe ka go API ya rena ya didirišwa ka scss/_utilities.scss. Ithute kamoo o ka dirišago API ya didirišwa.

    "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
      )
    ),