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

<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

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 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(--#{$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 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,
      values: map-merge(
        $theme-colors,
        (
          "body": $body-bg,
          "white": $white,
          "transparent": transparent
        )
      )
    ),