Usuli

Eleza maana kupitia background-colorna ongeza mapambo na gradients.

Katika ukurasa huu

Rangi ya usuli

Sawa na madarasa ya rangi ya maandishi ya muktadha, weka usuli wa kipengele kwa darasa lolote la muktadha. Huduma za usuli hazijawekwa ,color kwa hivyo katika hali zingine utataka kutumia .text-* huduma za rangi .

.bg-msingi

.bg-sekondari

.bg-mafanikio

.bg-hatari

.bg-onyo

.bg-maelezo

.bg-mwanga

.bg-giza

.bg-mwili

.bg-nyeupe

.bg-wazi

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

Kwa kuongeza .bg-gradientdarasa, gradient ya mstari huongezwa kama taswira ya usuli kwenye mandharinyuma. Upinde rangi huu huanza na nyeupe nusu-wazi ambayo hufifia hadi chini.

Je, unahitaji upinde rangi katika CSS yako maalum? Ongeza tu background-image: var(--bs-gradient);.

.bg-msingi.bg-gradient

.bg-sekondari.bg-gradient

.bg-success.bg-gradient

.bg-hatari.bg-gradient

.bg-onyo.bg-gradient

.bg-info.bg-gradient

.bg-mwanga.bg-gradient

.bg-giza.bg-gradient

Uwazi

Imeongezwa katika v5.1.0

Kufikia v5.1.0, background-colorhuduma zinatolewa kwa Sass kwa kutumia vigeu vya CSS. Hii inaruhusu mabadiliko ya rangi ya wakati halisi bila mkusanyiko na mabadiliko ya uwazi ya alpha.

Inavyofanya kazi

Zingatia .bg-successmatumizi yetu chaguomsingi.

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

Tunatumia toleo la RGB letu --bs-success(pamoja na thamani ya 25, 135, 84) Kigeuzi cha CSS na kuambatisha kigezo cha pili cha CSS, --bs-bg-opacity, kwa uwazi wa alpha (pamoja na thamani chaguo-msingi 1shukrani kwa utofauti wa ndani wa CSS). Hiyo inamaanisha wakati wowote unapotumia .bg-successsasa, colorthamani yako iliyokokotwa ni rgba(25, 135, 84, 1). Tofauti ya ndani ya CSS ndani ya kila .bg-*darasa huepuka maswala ya urithi ili hali zilizoorodheshwa za huduma zisiwe na uwazi wa alpha uliorekebishwa.

Mfano

Ili kubadilisha uwazi huo, batilisha --bs-bg-opacitykupitia mitindo maalum au mitindo ya ndani.

Huu ni usuli chaguomsingi wa mafanikio

Huu ni usuli wa mafanikio wa 50%.

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

Au, chagua kutoka kwa .bg-opacityhuduma zozote:

Huu ni usuli chaguomsingi wa mafanikio

Hii ni 75% ya usuli wa mafanikio ya kutoweka wazi

Huu ni usuli wa mafanikio wa 50%.

Hii ni 25% ya usuli wa mafanikio ya kutoweka wazi

Hii ni 10% ya usuli wa mafanikio ya kutoweka

<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

Kando na utendakazi ufuatao wa Sass, zingatia kusoma kuhusu sifa zetu maalum za CSS zilizojumuishwa (vigeu vya CSS) kwa rangi na zaidi.

Vigezo

Huduma nyingi background-colorhutolewa na rangi zetu za mandhari, zilizokabidhiwa upya kutoka kwa vigeu vyetu vya rangi ya jumla.

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

Rangi za rangi ya kijivu zinapatikana pia, lakini ni sehemu ndogo tu inayotumiwa kutoa huduma zozote.

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

Ramani

Kisha rangi za mandhari huwekwa kwenye ramani ya Sass ili tuweze kuzipitia ili kuzalisha huduma zetu, virekebishaji vipengele na zaidi.

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

Rangi za kijivu zinapatikana pia kama ramani ya Sass. Ramani hii haitumiwi kutengeneza huduma zozote.

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

Rangi za RGB hutolewa kutoka kwa ramani tofauti ya Sass:

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

Na opacities ya rangi ya mandharinyuma hujengwa juu ya hiyo na ramani yao wenyewe ambayo hutumiwa na API ya huduma:

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

Mchanganyiko

Hakuna michanganyiko inayotumika kutengeneza huduma zetu za mandharinyuma , lakini tunayo michanganyiko ya ziada kwa hali zingine ambapo ungependa kuunda viunzi vyako mwenyewe.

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

Huduma za usuli zinatangazwa katika API ya huduma zetu katika scss/_utilities.scss. Jifunze jinsi ya kutumia API ya huduma.

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