Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
in English

Sfondi

Përcillni kuptimin përmes background-colordhe shtoni dekorimin me gradient.

Ngjyrë e sfondit

Ngjashëm me klasat kontekstuale të ngjyrave të tekstit, vendosni sfondin e një elementi për çdo klasë kontekstuale. Shërbimet e sfondit nuk vendosencolor , kështu që në disa raste do të dëshironi të përdorni .text-* shërbimet e ngjyrave .

.bg-primare
.bg-sekondare
.bg-sukses
.bg-rrezik
.bg-paralajmërim
.bg-info
.bg-dritë
.bg-errësirë
.bg-trup
.bg-e bardhë
.bg-transparente
<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 i sfondit

Duke shtuar një .bg-gradientklasë, një gradient linear shtohet si imazh i sfondit në sfond. Ky gradient fillon me një të bardhë gjysmë transparente e cila zbehet deri në fund.

Keni nevojë për një gradient në CSS tuaj të personalizuar? Thjesht shtoni background-image: var(--bs-gradient);.

.bg-primare.bg-gradient
.bg-sekondare.bg-gradient
.bg-sukses.bg-gradient
.bg-rrezik.bg-gradient
.bg-paralajmërim.bg-gradient
.bg-info.bg-gradient
.bg-dritë.bg-gradient
.bg-errësirë.bg-gradient

Opaciteti

Shtuar në v5.1.0

Që nga v5.1.0, background-colorshërbimet krijohen me Sass duke përdorur variabla CSS. Kjo lejon ndryshime të ngjyrave në kohë reale pa kompilim dhe ndryshime dinamike të transparencës alfa.

Si punon

Merrni parasysh programin tonë të paracaktuar .bg-success.

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

Ne përdorim një version RGB të ndryshores sonë --bs-success(me vlerën e 25, 135, 84) CSS dhe bashkangjitëm një variabël të dytë CSS, --bs-bg-opacity, për transparencën alfa (me një vlerë të paracaktuar 1falë një ndryshoreje lokale CSS). Kjo do të thotë në çdo kohë që përdorni .bg-successtani, colorvlera juaj e llogaritur është rgba(25, 135, 84, 1). Variabla lokale CSS brenda çdo .bg-*klase shmang çështjet e trashëgimisë, kështu që instancat e ndërlidhura të shërbimeve nuk kanë automatikisht një transparencë alfa të modifikuar.

Shembull

Për të ndryshuar atë paqartësi, anashkaloni --bs-bg-opacitynëpërmjet stileve të personalizuara ose stileve inline.

Ky është sfondi i paracaktuar i suksesit
Ky është sfondi i suksesit me paqartësi 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>

Ose, zgjidhni nga ndonjë prej .bg-opacityshërbimeve:

Ky është sfondi i paracaktuar i suksesit
Ky është sfondi i suksesit me paqartësi 75%.
Ky është sfondi i suksesit me paqartësi 50%.
Ky është sfondi i suksesit me paqartësi 25%.
Ky është sfondi i suksesit me paqartësi 10%.
<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

Përveç funksionalitetit të mëposhtëm Sass, merrni parasysh të lexoni për vetitë tona të personalizuara të CSS (të njohura si variablat CSS) për ngjyrat dhe më shumë.

Variablat

Shumica e background-colorshërbimeve gjenerohen nga ngjyrat e temës sonë, të ricaktuara nga variablat tona të përgjithshme të paletës së ngjyrave.

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

Ngjyrat në shkallë gri janë gjithashtu të disponueshme, por vetëm një nëngrup përdoret për të gjeneruar ndonjë shërbim.

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

Harta

Ngjyrat e temave vendosen më pas në një hartë Sass, në mënyrë që ne të mund t'i kalojmë ato për të gjeneruar shërbimet tona, modifikuesit e komponentëve dhe më shumë.

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

Ngjyrat në shkallë gri janë gjithashtu të disponueshme si një hartë Sass. Kjo hartë nuk përdoret për të krijuar ndonjë shërbim.

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

Ngjyrat RGB krijohen nga një hartë e veçantë Sass:

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

Dhe paqartësitë e ngjyrave të sfondit ndërtohen mbi atë me hartën e tyre që konsumohet nga API-ja e shërbimeve:

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

Përzierjet

Asnjë miks nuk përdoret për të gjeneruar programet tona të sfondit , por ne kemi disa përzierje shtesë për situata të tjera ku dëshironi të krijoni gradientët tuaj.

@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

Shërbimet e sfondit janë deklaruar në API të shërbimeve tona në scss/_utilities.scss. Mësoni se si të përdorni API të shërbimeve.

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