Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
in English

Keeb kwm

Qhia lub ntsiab lus los ntawm background-colorthiab ntxiv kho kom zoo nkauj nrog gradients.

Xim tom qab

Zoo ib yam li cov chav kawm ntawv xim xim, teeb lub keeb kwm yav dhau ntawm ib lub caij rau txhua chav kawm ntawv. Cov khoom siv hauv qab tsis tau teeb tsacolor , yog li qee zaum koj yuav xav siv cov khoom siv .text-* xim .

.bg-pem hauv ntej
.bg-secondary
.bg-ua tiav
.bg-kev phom sij
.bg- ceeb toom
.bg-info
.bg-sib
.bg - tsaus
.bg cev
.bg-dawb
.bg-pob tshab
<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>

Background gradient

Los ntawm kev ntxiv ib .bg-gradientchav kawm, ib txoj kab gradient ntxiv raws li cov duab hauv qab rau cov keeb kwm yav dhau. Qhov gradient no pib nrog ib nrab pob tshab dawb uas ploj mus rau hauv qab.

Koj puas xav tau gradient hauv koj qhov kev cai CSS? Tsuas yog ntxiv background-image: var(--bs-gradient);.

.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient

Opacity

Ntxiv hauv v5.1.0

Raws li ntawm v5.1.0, background-colorcov khoom siv hluav taws xob tau tsim nrog Sass siv CSS hloov pauv. Qhov no tso cai rau kev hloov xim ntawm lub sijhawm tiag tiag yam tsis muaj kev sib sau ua ke thiab kev hloov pauv alpha pob tshab.

Nws ua haujlwm li cas

Xav txog peb qhov kev .bg-successsiv hluav taws xob tsis zoo.

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

Peb siv ib qho RGB version ntawm peb --bs-success(nrog tus nqi ntawm 25, 135, 84) CSS sib txawv thiab txuas ib tug thib ob CSS kuj sib txawv, --bs-bg-opacity, , rau lub alpha pob tshab (nrog rau lub neej ntawd tus nqi 1ua tsaug rau lub zos CSS variable). Qhov ntawd txhais tau tias txhua lub sijhawm koj siv .bg-successtam sim no, koj cov colornqi suav yog rgba(25, 135, 84, 1). Lub zos CSS kuj sib txawv hauv txhua .bg-*chav kawm zam cov teeb meem qub txeeg qub teg yog li cov piv txwv ntawm cov khoom siv hluav taws xob tsis tuaj yeem muaj qhov hloov pauv alpha pob tshab.

Piv txwv

Txhawm rau hloov qhov opacity, override --bs-bg-opacityntawm kev cai style lossis inline styles.

Qhov no yog default success background
Qhov no yog 50% opacity kev vam meej tom qab
<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>

Los yog, xaiv los ntawm ib qho ntawm cov .bg-opacitykhoom siv hluav taws xob:

Qhov no yog default success background
Qhov no yog 75% opacity kev vam meej tom qab
Qhov no yog 50% opacity kev vam meej tom qab
Qhov no yog 25% opacity kev vam meej tom qab
Qhov no yog 10% opacity kev vam meej tom qab
<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

Ntxiv rau cov haujlwm Sass hauv qab no, xav txog kev nyeem txog peb cov khoom siv CSS suav nrog (aka CSS variables) rau xim thiab ntau dua.

Hloov pauv

Cov background-colorkhoom siv feem ntau yog tsim los ntawm peb cov ntsiab lus xim, muab rov qab los ntawm peb cov xim palette sib txawv.

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

Greyscale xim kuj muaj, tab sis tsuas yog ib qho subset yog siv los tsim cov khoom siv.

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

Daim ntawv qhia

Cov ntsiab lus xim raug muab tso rau hauv Sass daim ntawv qhia yog li peb tuaj yeem hla lawv los tsim peb cov khoom siv hluav taws xob, cov khoom hloov kho, thiab ntau dua.

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

Greyscale xim kuj muaj raws li daim ntawv qhia Sass. Daim ntawv qhia no tsis yog siv los tsim cov khoom siv hluav taws xob.

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

RGB xim yog tsim los ntawm ib daim ntawv qhia Sass cais:

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

Thiab tom qab xim opacities tsim rau qhov ntawd nrog lawv tus kheej daim ntawv qhia uas tau noj los ntawm cov khoom siv API:

$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

Tsis muaj cov mixins siv los tsim peb cov khoom siv tom qab , tab sis peb muaj qee qhov sib xyaw ntxiv rau lwm qhov xwm txheej uas koj xav tsim koj tus kheej gradients.

@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);
}

Utilities API

Cov khoom siv tom qab tau tshaj tawm hauv peb cov khoom siv hluav taws xob API hauv scss/_utilities.scss. Kawm paub siv cov khoom siv hluav taws xob API li cas.

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