Buuka ku bigambo ebikulu Buuka ku docs navigation
in English

Ebyeemabega

Tuusa amakulu okuyita mu background-colorera osseeko okuyooyoota nga olina gradients.

Langi y’emabega

Okufaananako ne kiraasi za langi z’ebiwandiiko eby’omutwe, teeka ennyuma y’ekintu ku kiraasi yonna ey’ensonga. Background utilities teziteekawo ,color kale mu mbeera ezimu ojja kwagala okukozesa .text-* color utilities .

.bg-ekisookerwako
.bg-ekyokubiri
.bg-obuwanguzi
.bg-akabi
.bg-okulabula
.bg-amawulire
.bg-ekitangaala
.bg-ekizikiza
.bg-omubiri
.bg-enjeru
.bg-obutangaavu
<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>

Okukyukakyuka okw’emabega

Nga ogattako .bg-gradientkiraasi, linear gradient eyongerwako nga ekifaananyi eky’emabega ku bifaananyi eby’emabega. Gradienti eno etandika n’enjeru etali ntangaavu (semi-transparent white) egenda wansi.

Oyagala gradient mu CSS yo eya custom? Okwongerako kyokka background-image: var(--bs-gradient);.

.bg-ekisookerwako.bg-ekisengejja
.bg-ekyokubiri.bg-ekisengejja
.bg-obuwanguzi.bg-okukyusakyusa
.bg-akabi.bg-gradient
.bg-okulabula.bg-gradient
.bg-amawulire.bg-okukyusakyusa
.bg-ekitangaala.bg-ekisengejja
.bg-ekizikiza.bg-ekisengejja

Obutategeera bulungi

Yayongerwako mu v5.1.0

Okuva ku v5.1.0, background-colorebikozesebwa bikolebwa ne Sass nga tukozesa enkyukakyuka za CSS. Kino kisobozesa enkyukakyuka za langi mu kiseera ekituufu awatali kukuŋŋaanya n’enkyukakyuka za alpha transparency ezikyukakyuka.

Engeri gye kikola

Lowooza ku .bg-successutility yaffe eya default.

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

Tukozesa enkyusa ya RGB eyaffe --bs-success(n’omuwendo gwa 25, 135, 84) enkyukakyuka ya CSS era ne tugattako enkyukakyuka ya CSS eyokubiri, --bs-bg-opacity, olw’obwerufu bwa alpha (n’omuwendo ogusookerwako 1olw’enkyukakyuka ya CSS ey’omu kitundu). Ekyo kitegeeza nti essaawa yonna gy’okozesa .bg-successkati, omuwendo gwo ogubaliriddwa colorguba rgba(25, 135, 84, 1). Enkyukakyuka ya CSS ey’ekitundu munda mu buli .bg-*kiraasi yeewala ensonga z’obusika kale ebikozesebwa ebiteekeddwa mu kisenge eby’ebikozesebwa tebiba na bwerufu bwa alpha obukyusiddwa mu ngeri ey’otoma.

Eky'okulabirako

Okukyusa opacity eyo, override --bs-bg-opacitynga oyita mu custom styles oba inline styles.

Kino kye kibeera eky'obuwanguzi ekisookerwako
Eno ye 50% opacity obuwanguzi background
<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>

Oba, londa okuva mu kimu ku .bg-opacitybikozesebwa:

Kino kye kibeera eky'obuwanguzi ekisookerwako
Eno ye 75% opacity obuwanguzi background
Eno ye 50% opacity obuwanguzi background
Eno ye 25% opacity obuwanguzi background
Eno ye 10% opacity obuwanguzi background
<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 nga bwe kiri

Ng’oggyeeko enkola ya Sass eno wammanga, lowooza ku kusoma ku bintu byaffe eby’ennono ebya CSS ebiteekeddwamu (aka CSS variables) ku langi n’ebirala.

Enkyukakyuka ezikyukakyuka

Ebisinga obungi background-colorebikozesebwa bikolebwa langi zaffe ez’omulamwa, eziddamu okuweebwa okuva mu nkyukakyuka zaffe eza langi ez’enjawulo.

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

Langi za enzirugavu nazo ziriwo, naye ekitundu ekitono kyokka kye kikozesebwa okukola ebikozesebwa byonna.

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

Maapu

Langi z’omulamwa olwo ziteekebwa mu maapu ya Sass tusobole okuzikolako okukola ebikozesebwa byaffe, ebikyusa ebitundu, n’ebirala.

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

Langi za Grayscale nazo zisangibwa nga maapu ya Sass. Maapu eno tekozesebwa kukola bikozesebwa byonna.

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

Langi za RGB zikolebwa okuva ku maapu ya Sass ey’enjawulo:

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

Era opacities za langi ez'emabega zizimba ku ekyo ne maapu yaabwe ekozesebwa API y'ebikozesebwa:

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

Ebirungo ebitabuddwa

No mixins are used to generate our background utilities , naye tulina mixins endala ez'embeera endala mw'oyagala okukola gradients zo.

@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);
}

Ebikozesebwa API

Ebikozesebwa eby'emabega birangiriddwa mu API yaffe ey'ebikozesebwa mu scss/_utilities.scss. Yiga engeri y'okukozesaamu API y'ebikozesebwa.

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