in English

Rawng

Bootstrap hi color system zau tak hmangin kan style leh component te theme hmangin a support a. Hei hian eng project pawh atan customization leh extension kimchang zawk a siam thei a ni.

He page ah hian

Theme rawng hrang hrang

Color zawng zawng subset hmangin color scheme siam nan color palette te zawk kan siam a, chu chu Sass variable angin a awm bawk a, Bootstrap scss/_variables.scssfile-ah Sass map pawh a awm bawk.

Hmasa ber

Secondary lam a ni

Hlawhtling

Hlauhawm

Vaulawkna

Info

Eng

Thim

Heng rawng zawng zawng hi Sass map angin a awm vek a, $theme-colors.

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

Heng colors te hi kan siam danglam dan tur kan Sass maps leh loops docs te hi en la .

Color zawng zawng

Bootstrap color zawng zawng hi Sass variable angin a awm a, scss/_variables.scssfile-ah Sass map a awm bawk. File size tihpun loh nan heng variable tinte tan hian text emaw background color class emaw kan siam lo. Chu ai chuan theme palette atan heng colors te hi subset kan thlang zawk thin .

Color i customize lai hian contrast ratio te chu enfiah ngei ang che. A hnuaia kan hmuh ang hian, main color tinah hian contrast ratio pathum kan dah belh a—swatch-a color awm mekte tan pakhat, pakhat chu against white atan, pakhat chu against black atan.

$blue a ni#0d6efd tih a ni

$blue-100 a ni

$blue-200 a ni

$blue-300 a ni

$blue-400 a ni

$blue-500 a ni

$blue-600 a ni

$blue-700 a ni

$blue-800 a ni

$blue-900 a ni

$indigo tih a ni#6610f2 a ni

$indigo-100 a ni

$indigo-200 a ni

$indigo-300 a ni

$indigo-400 a ni

$indigo-500 a ni

$indigo-600 a ni

$indigo-700 a ni

$indigo-800 a ni

$indigo-900 a ni

$purple a ni#6f42c1 a ni

$purple-100 a ni

$purple-200 a ni

$purple-300 a ni

$purple-400 a ni

$purple-500 a ni

$purple-600 a ni

$purple-700 vel a ni

$purple-800 a ni

$purple-900 a ni

$pink a ni#d63384 a ni

$pink-100 a ni

$pink-200 a ni

$pink-300 a ni

$pink-400 a ni

$pink-500 a ni

$pink-600 a ni

$pink-700 a ni

$pink-800 a ni

$pink-900 a ni

$red a ni#dc3545 a ni

$red-100 a ni

$red-200 a ni

$red-300 a ni

$red-400 a ni

$red-500 a ni

$red-600 a ni

$red-700 a ni

$red-800 a ni

$red-900 a ni

$orange a ni#fd7e14 a ni

$orange-100 a ni

$orange-200 a ni

$orange-300 a ni

$orange-400 a ni

$orange-500 a ni

$orange-600 a ni

$orange-700 a ni

$orange-800 a ni

$orange-900 a ni

$yellow a ni#ffc107 ah hian a awm

$yellow-100 a ni

$yellow-200 a ni

$yellow-300 a ni

$yellow-400 a ni

$yellow-500 a ni

$yellow-600 a ni

$yellow-700 a ni

$yellow-800 a ni

$yellow-900 a ni

$green a ni#198754 a ni

$green-100 a ni

$green-200 a ni

$green-300 a ni

$green-400 a ni

$green-500 a ni

$green-600 a ni

$green-700 a ni

$green-800 a ni

$green-900 a ni

$teal a ni#20c997 a ni

$teal-100 a ni

$teal-200 a ni

$teal-300 a ni

$teal-400 a ni

$teal-500 a ni

$teal-600 a ni

$teal-700 a ni

$teal-800 a ni

$teal-900 a ni

$cyan a ni#0dcaf0 a ni

$cyan-100 a ni

$cyan-200 a ni

$cyan-300 a ni

$cyan-400 a ni

$cyan-500 a ni

$cyan-600 a ni

$cyan-700 a ni

$cyan-800 a ni

$cyan-900 a ni

$gray-500 a ni#adb5bd tih a ni

$gray-100 a ni

$gray-200 a ni

$gray-300 a ni

$gray-400 a ni

$gray-500 a ni

$gray-600 a ni

$gray-700 a ni

$gray-800 a ni

$gray-900 a ni

$black a ni#000 a ni

$var a ni#fff a ni

Sass chungchanga hriat tur pawimawh te

Sass hian programmatically-in variable a siam thei lo va, chuvangin tint leh shade tin atan manual-in kan siam a ni. Midpoint value (eg, $blue-500) kan tarlang a, Sass-a color function hmangin kan color te tint (lighten) emaw shade (darken) emaw turin custom color function kan mix()hmang bawk.

Using mix()is not the same as lighten()and darken()—a hmasa zawk chuan a rawng tarlan chu white emaw black emaw nen a blend a, a hnuhnung zawk chuan color tinte lightness value chauh a siamrem thung. Chumi rah chhuah chu colour suite kimchang zawk a ni a, he CodePen demo-a kan hmuh ang hian .

Kan tint-color()leh shade-color()function mix()te hian kan variable bulah kan hmang $theme-color-intervala, chu chuan kan mixed color siam apiang atan stepped percentage value a tarlang a ni. Source code kimchang chu scss/_functions.scssand files ah hian en rawh .scss/_variables.scss

Sass maps rawng hrang hrang

Bootstrap source Sass files ah hian map pathum a awm a, chu chuan color list leh an hex value te chu rang tak leh awlsam taka loop over theih a ni.

$colorskan base ( 500) color awm zawng zawng a tarlang vek
$theme-colorssemantic taka hming vuah theme color zawng zawng a tarlang vek (a hnuaia tarlan ang hian)
$graysgray tint leh shade zawng zawng a tarlang vek

, chhungah hian scss/_variables.scssBootstrap-a color variable leh Sass map te i hmu ang. $colorsSass map entir nan hetiang hian kan rawn tarlang e :

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Map chhunga value te chu component dang tam takah hman dan update turin dah belh, paih emaw, siam danglam emaw. Vanduaithlak takin tun dinhmunah chuan component zawng zawng hian he Sass map hi an hmang vek lo. Nakin lawka update lo awm turte chuan hei hi tihchangtlun tumin hma an la ang. Chumi hma chuan ${color}variable leh he Sass map hi hman dan tur ruahmanna siam rawh.

Entirna

Hengte hi i Sass-a i hman theih dan tur chu hetiang hi a ni:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Color leh background utility class hrang hrangah pawh color value setting colorleh background-colorhman theih a ni bawk.500

Utilities siam chhuah

v5.1.0 ah dah belh a ni

colorBootstrap hian color variable tin atan leh utilities a huam lo a background-color, mahse hengte hi nangmah ngeiin kan utility API leh v5.1.0-a kan extended Sass maps added hmangin i siam thei ang.

A bul tan nan kan function, variable, mixin, leh utilities te i import tawh ngei ang che.
Kan map-merge-multiple()function hmang hian Sass map tam tak chu map thara rang taka inzawmkhawmin.
{color}-{level}He combined map thar hi merge la, utility eng pawh class hming nen extend rawh.

.text-purple-500A chunga step te hmang hian text color utilities (eg, ) siam thei entirnan kan rawn tarlang e .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

.text-{color}-{level}Hei hian color leh level tin atan utility thar a siam chhuak ang . Utility leh property dang zawng zawng tan pawh chutiang bawk chuan i ti thei bawk.