Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
in English

Matimu

Ku hundzisela nhlamuselo hi ku tirhisa background-colorna ku engetela ku khavisa hi swirhendzevutani.

Muhlovo wa le ndzhaku

Ku fana na titlilasi ta mihlovo ya tsalwa ra mongo, veka ndzhaku ka elemente eka tlilasi yihi na yihi ya mongo. Switirhisiwa swa le ndzhaku a swi vekiwicolor , kutani eka swiyimo swin'wana u ta lava ku tirhisa .text-* switirhisiwa swa mihlovo .

.bg-xiyimo xa le henhla
.bg-xiyimo xa le henhla
.bg-ku humelela
.bg-khombo
.bg-xitsundzuxo
.bg-vuxokoxoko
.bg-ku vonakala
.bg-munyama
.bg-miri wa swilo
.bg-yo basa
.bg-ku va erivaleni
<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>

Xirhendzevutani xa le ndzhaku

Hi ku engetela .bg-gradienttlilasi, ku engeteriwa linear gradient tanihi xifaniso xa le ndzhaku eka swifaniso swa le ndzhaku. Gradient leyi yisungula hi semi-transparent white leyinga nyamalala kuya ehansi.

Xana u lava gradient eka CSS ya wena ya ntolovelo? Ntsena engetela background-image: var(--bs-gradient);.

.bg-xisungula.bg-xirhendzevutani
.bg-xiyimo xa vumbirhi.bg-gradient
.bg-ku humelela.bg-gradient
.bg-khombo.bg-gradient
.bg-xitsundzuxo.bg-gradient
.bg-info.bg-xihlamusela-marito
.bg-ku vonakala.bg-gradient
.bg-munyama.bg-xirhendzevutani

Ku nga voni kahle

Ku engeteriwe eka v5.1.0

Ku sukela eka v5.1.0, background-colorswitirhisiwa swi endliwa hi Sass hi ku tirhisa swilo leswi cinca-cincaka swa CSS. Leswi swi pfumelela ku cinca ka mihlovo ya nkarhi wa xiviri handle ka nhlengeleto na ku cinca ka ku vonakala ka alpha loku cinca-cincaka.

Ndlela leyi swi tirhaka ha yona

Anakanya hi .bg-successxitirhisiwa xa hina xa ntolovelo.

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

Hi tirhisa RGB version ya hina --bs-success(leyi nga na nkoka wa 25, 135, 84) CSS variable naswona hi namarhetile CSS variable ya vumbirhi, --bs-bg-opacity, ya alpha transparency (leyi nga na default value 1hi khensa CSS variable ya laha kaya). Sweswo swi vula leswaku nkarhi wun’wana ni wun’wana lowu u wu tirhisaka .bg-successsweswi, ntikelo wa wena lowu hlayiweke colori rgba(25, 135, 84, 1). Xihlawulekisi xa CSS xa laha kaya endzeni ka .bg-*tlilasi yin’wana na yin’wana xi papalata timhaka ta ndzhaka leswaku swikombiso leswi pfanganisiweke swa switirhisiwa a swi vi na ku vonakala ka alpha loku cinciweke hi ku tisungulela.

Xikombiso

Ku cinca opacity yoleyo, tlula --bs-bg-opacityhi ku tirhisa switayele swa ntolovelo kumbe switayele swa le ndzeni ka layini.

Lexi i xivumbeko xa ku humelela xa xiviri
Lexi i 50% wa ku humelela ka opacity endzhaku
<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>

Kumbe, hlawula eka yin’wana ni yin’wana ya .bg-opacityswitirhisiwa:

Lexi i xivumbeko xa ku humelela xa xiviri
Lexi i 75% wa ku humelela ka opacity endzhaku
Lexi i 50% wa ku humelela ka opacity endzhaku
Lexi i 25% wa ku humelela ka opacity endzhaku
Lexi i 10% wa ku humelela ka opacity endzhaku
<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

Ku engetela eka ntirho wa Sass lowu landzelaka, anakanya hi ku hlaya hi swihlawulekisi swa hina swa ntolovelo swa CSS leswi katsiweke (aka swilo leswi cinca-cincaka swa CSS) swa mihlovo na swin’wana.

Swilo leswi cinca-cincaka

Switirhisiwa swo tala background-colorswi endliwa hi mihlovo ya hina ya nhlokomhaka, leyi averiweke nakambe ku suka eka swilo swa hina leswi cinca-cincaka swa phalete ya mihlovo ya xivumbeko xa le henhla.

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

Mihlovo ya greyscale na yona ya kumeka, kambe ku tirhisiwa ntsena ntlawa lowutsongo ku humesa switirhisiwa swihi na swihi.

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

Mepe

Mihlovo ya theme yi tlhela yi vekiwa eka mepe wa Sass leswaku hi ta kota ku loop ehenhla ka yona ku humesa switirhisiwa swa hina, swicinci swa swiphemu, na swin’wana.

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

Mihlovo ya greyscale yitlhela yi kumeka tani hi mepe wa Sass. Mepe lowu a wu tirhisiwi ku endla switirhisiwa swihi na swihi.

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

Mihlovo ya RGB yi endliwa ku suka eka mepe wa Sass lowu hambaneke:

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

Naswona ti-opacities ta mihlovo ya le ndzhaku ti aka eka sweswo hi mepe wa tona lowu dyiwaka hi API ya switirhisiwa:

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

Ti- mixins

No mixins are used to generate our background utilities , kambe hi na ti mixins tin’wana to engetela eka swiyimo swin’wana laha u nga tsakelaka ku tiendlela ti gradient ta wena.

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

Switirhisiwa swa le ndzhaku swi tivisiwile eka API ya hina ya switirhisiwa hi scss/_utilities.scss. Dyondza ndlela yo tirhisa API ya switirhisiwa.

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