Nsima

Kopesa ndimbola na nzela background-colormpe kobakisa décoration na ba gradients.

Na lokasa oyo

Color ya fond

Ndenge moko na ba classes ya couleur ya texte contextuel, tia fond ya élément na classe contextuelle nionso. Ba utilitaires ya fond ezo se mettre tecolor , yango wana na ba cas misusu okolinga kosalela .text-* ba utilitaires ya couleur .

.bg-ya yambo

.bg-ya mibale

.bg-kolonga

.bg-likámá

.bg-kebisi ya kokebisa

.bg-ya sango

.bg-pole na yango

.bg-molili ya molili

.bg-nzoto

.bg-mondele ya pembe

.bg-ezali polele

html

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

Na kobakisa .bg-gradientclasse, gradient linéaire ebakisami lokola image ya fond na ba fond. Gradient oyo ebandi na pembe semi-transparent oyo esili tii na se.

Ozali na mposa ya gradient na CSS na yo ya momesano? Bakisa kaka background-image: var(--bs-gradient);.

.bg-ya liboso.bg-gradient

.bg-ya mibale.bg-gradient

.bg-elonga.bg-gradient

.bg-likama.bg-gradient

.bg-kebisi.bg-gradient

.bg-info.bg-gradient ya ndenge ya kosala

.bg-pole.bg-gradient

.bg-molili.bg-gradient

Opacité

Ebakisami na v5.1.0

Kobanda na v5.1.0, .background-color ba utilitaires esalemi na Sass na kosalelaka ba variables ya CSS. Yango epesaka nzela na mbongwana ya langi na ntango ya solosolo kozanga ete bábongola compilation mpe bábongola transparence alpha dynamique.

Ndenge oyo esalaka

.bg-successTala utilitaire na biso ya défaut .

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

Tosalelaka version RGB ya variable na biso --bs-success(na valeur ya 25, 135, 84) CSS mpe tokangisi variable CSS ya mibale, --bs-bg-opacity, mpo na transparence alpha (na valeur par défaut 1grâce na variable CSS locale). Yango elingi koloba ntango nyonso oyo osaleli .bg-successsikoyo, colormotuya na yo oyo otángi ezali rgba(25, 135, 84, 1). Variable CSS locale na kati ya .bg-*classe moko na moko e éviter ba problèmes ya héritage donc ba instances nestées ya ba utilitaires ezala automatiquement te na transparence alpha modifiée.

Ndakisa

Mpo na kobongola opacité wana, bolongola --bs-bg-opacityna nzela ya ba styles personnalisés to ba styles ya kati.

Oyo ezali fond ya succès par défaut

Oyo eza 50% opacité succès fond

html

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

To, pona kati na moko ya ba .bg-opacityutilités:

Oyo ezali fond ya succès par défaut

Oyo ezali 75% opacité succès fond

Oyo eza 50% opacité succès fond

Oyo ezali 25% opacité succès fond

Oyo eza 10% opacité succès fond

html

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

En plus ya fonctionnalité ya Sass oyo elandi, kanisá kotanga na ntina ya ba propriétés personnalisées na biso ya CSS oyo ekotisami (aka variables CSS) mpo na ba couleurs mpe mingi mosusu.

Ba variables oyo ezali

Ba background-colorutilitaires mingi esalemaka na ba couleurs na biso ya thème, ezongisami na ba variables na biso ya palette ya couleur générique.

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

Ba couleurs ya gris ezali pe, kasi kaka sous-ensemble nde esalelamaka pona kobimisa ba utilitaires nionso.

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

Karte

Na nsima, batyaka balangi ya motó ya likambo na kati ya karte ya Sass mpo tokoka kosala boucle likoló na yango mpo na kobimisa ba utilitaires na biso, ba modificateurs ya ba composants, mpe makambo mosusu.

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

Ba couleurs ya gris ezali pe lokola carte ya Sass. Carte oyo esalelamaka te mpo na kobimisa ba utilités moko te.

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

Ba couleurs ya RGB esalemi na carte ya Sass ekeseni:

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

Mpe ba opacité ya couleur ya fond etongami likolo ya yango na carte na bango moko oyo e consommé na API ya ba utilitaires:

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

Ba mixins

No mixins are used to generate our background utilities , kasi tozali na mwa ba mixins ya kobakisa mpo na makambo mosusu epai olingi kosala ba gradients na yo moko.

@mixin gradient-bg($color: null) {
  background-color: $color;

  @if $enable-gradients {
    background-image: var(--#{$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 ba utilitaires

Ba utilitaires ya fond esakolami na API ya ba utilitaires na biso na scss/_utilities.scss. Yekola ndenge ya kosalela API ya ba utilitaires.

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