Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

Dugduubee

Hiika karaa dabarsuu background-colorfi faaya garagalchaatiin dabaluu.

Halluu duubbee

Gitoota halluu barruu yaadannoo wajjin walfakkaata, duubbee elementii gara gita yaadannoo kamiyyuu saagi. Faayidaaleen duubbee hin saagin , kanaafuu haala tokko tokko keessatti color.text-* faayidaa halluu fayyadamuu barbaadda .

.bg-tokkoffaa
.bg-lammaffaa
.bg-milkaa'ina
.bg-balaa
.bg-akeekkachiisa
.bg-odeeffannoo
.bg-ifaa
.bg-dukkana
.bg-qaama
.bg-adii
.bg-iftoomina kan qabu
<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>

Garaagarummaa duubbee

Gitaa dabaluudhaan .bg-gradient, garagalchi sararaawaa akka fakkii duubbee duubbeetti dabalama. Giraadiyaantiin kun adii walakkaa iftoomina qabuun kan jalqabu yoo ta'u kunis gara jalaatti ba'a.

CSS amala kee keessatti garaagarummaa si barbaachisa? Itti dabaluu qofa background-image: var(--bs-gradient);.

.bg-duraa.bg-gradient
.bg-lammaffaa.bg-gradient
.bg-milkaa'ina.bg-gradient
.bg-balaa.bg-gradient
.bg-akeekkachiisa.bg-gradient
.bg-info.bg-garaagarummaa
.bg-ifaa.bg-gradient
.bg-dukkana.bg-gradient

Opaasitii

v5.1.0 keessatti dabalameera

v5.1.0 irraa eegalee, background-colorfaayidaan jijjiiramoota CSS fayyadamuun Sass waliin uumamu. Kunis jijjiirama halluu yeroo dhugaa qindeessaa fi jijjiirama iftoomina alfaa daayinamikii malee hayyama.

Akkaataa itti hojjetu

.bg-successMee faayidaa keenya durtii ilaali .

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

Jijjiiramaa CSS keenyaa --bs-success(gatii 25, 135, 84) gosa RGB fayyadamnee jijjiiramaa CSS lammaffaa, --bs-bg-opacity, iftoomina alfaadhaaf (gatii durtii waliin 1galata jijjiiramaa CSS naannoo) walitti qabsiifna. Kana jechuun yeroo kamiyyuu amma fayyadamtu , gatii .bg-successshallagame kee . Jijjiiramaan CSS naannoo tokkoon tokkoo gita keessaa dhimmoota dhaalaa irraa fagaata kanaaf fakkeenyonni faayilii ofumaan iftoomina alfaa fooyya'e hin qabaatan.colorrgba(25, 135, 84, 1).bg-*

Fakkeenya

Opaasitii sana jijjiiruuf, --bs-bg-opacitykaraa akkaataa amala ykn akkaataa sarara keessaa irra darbi.

Kun duubbee milkaa'ina durtii dha
Kun 50% opacity milkaa'ina duubbee dha
<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>

Yookiin, faayidaa kamiyyuu keessaa filadhu .bg-opacity:

Kun duubbee milkaa'ina durtii dha
Kun 75% opacity milkaa'ina duubbee dha
Kun 50% opacity milkaa'ina duubbee dha
Kun 25% opacity milkaa'ina duubbee dha
Kun 10% opacity milkaa'ina duubbee dha
<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 jedhama

Dalagaa Sass armaan gadii dabalatee, waa'ee amaloota amala CSS keenya hammataman (aka jijjiiramoota CSS) halluuwwanii fi kkf dubbisuu yaadaa.

Jijjiiramoota

Faayidaaleen baay'een background-colorhalluuwwan mata duree keenyaatiin kan uumaman yoo ta'u, jijjiiramoota paaletii halluu waliigalaa keenyaa irraa irra deebi'amee ramadama.

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

Halluuwwan halluu diimaas ni jiru, garuu tuuta xiqqaa qofti faayidaa kamiyyuu uumuuf fayyadama.

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

Kaartaa

Halluuwwan mata duree sana booda kaartaa Sass keessa kaa'amu kanaaf isaan irratti loop gochuun faayidaa keenya, fooyyessitoota qaamaa fi kkf maddisiisuu dandeenya.

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

Halluuwwan halluu diimaa akka kaartaa Sass ttis ni argamu. Kaartaan kun faayidaa kamiyyuu maddisiisuudhaaf hin oolu.

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

Halluuwwan RGB kaartaa Sass adda ta'e irraa uumamu:

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

Akkasumas opacities halluu duubbee sana irratti kaartaa mataa isaanii kan API faayiliitiin nyaatamuun ijaaru:

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

Mixins jedhaman

No mixins are used to generate our background utilities , garuu haalawwan biroo bakka ati garaagarummaa mataa keetii uumuu barbaadduuf mixins dabalataa tokko tokko qabna.

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

Faayidaaleen duubbee API faayidaa keenya keessatti bara scss/_utilities.scss. Akkaataa API faayilii itti fayyadamtu baradhu.

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