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

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

Ebirungo ebitabuddwa

Tewali mixins zikozesebwa okukola background utilities zaffe , 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,
      values: map-merge(
        $theme-colors,
        (
          "body": $body-bg,
          "white": $white,
          "transparent": transparent
        )
      )
    ),