Koulè

Bootstrap sipòte pa yon sistèm koulè vaste ki tèm estil nou yo ak konpozan. Sa pèmèt personnalisation ak ekstansyon plis konplè pou nenpòt pwojè.

Nan paj sa a

Koulè tèm

Nou itilize yon sou-ansanm tout koulè pou kreye yon palèt koulè ki pi piti pou jenere plan koulè, ki disponib tou kòm varyab Sass ak yon kat Sass nan scss/_variables.scssdosye Bootstrap la.

Prensipal

Segondè

Siksè

Danje

Avètisman

Info

Limyè

Fè nwa

Tout koulè sa yo disponib kòm yon kat Sass, $theme-colors.

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

Tcheke kat Sass ak dokiman bouk nou yo pou konnen kijan pou modifye koulè sa yo.

Tout koulè

Tout koulè Bootstrap yo disponib kòm varyab Sass ak yon kat Sass nan scss/_variables.scssdosye. Pou evite ogmante gwosè dosye, nou pa kreye tèks oswa klas koulè background pou chak nan varyab sa yo. Olye de sa, nou chwazi yon pati nan koulè sa yo pou yon palèt tèm .

Asire w ou kontwole rapò kontras jan ou personnaliser koulè. Jan yo montre pi ba a, nou te ajoute twa rapò kontras nan chak nan koulè prensipal yo - youn pou koulè aktyèl echantiyon an, youn pou kont blan, ak youn pou kont nwa.

$ble#0d6efd

$ ble-100

$ ble-200

$ ble-300

$ ble-400

$ ble-500

$ ble-600

$ ble-700

$ ble-800

$ ble-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$vyolèt#6f42c1

$ vyolèt-100

$ vyolèt-200

$ vyolèt-300

$ vyolèt-400

$ vyolèt-500

$ vyolèt-600

$ vyolèt-700

$ vyolèt-800

$ vyolèt-900

$woz#d63384

$woz-100

$woz-200

$woz-300

$woz-400

$woz-500

$woz-600

$woz-700

$woz-800

$woz-900

$wouj#dc3545

$wouj-100

$wouj-200

$wouj-300

$ wouj-400

$wouj-500

$wouj-600

$ wouj-700

$wouj-800

$ wouj-900

$oranj#fd7e14

$ zoranj-100

$ zoranj-200

$ zoranj-300

$ zoranj-400

$ zoranj-500

$ zoranj-600

$ zoranj-700

$ zoranj-800

$ zoranj-900

$jòn#ffc107

$jòn-100

$jòn-200

$jòn-300

$jòn-400

$ jòn-500

$jòn-600

$jòn-700

$jòn-800

$ jòn-900

$vèt#198754

$ vèt-100

$ vèt-200

$ vèt-300

$ vèt-400

$ vèt-500

$ vèt-600

$ vèt-700

$ vèt-800

$ vèt-900

$teal#20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$syan-700

$syan-800

$cyan-900

$gri-500#adb5bd

$gri-100

$gri-200

$gri-300

$gri-400

$gri-500

$gri-600

$gri-700

$gri-800

$gri-900

$nwa#000

$ blan#fff

Nòt sou Sass

Sass pa ka jenere varyab pwogramasyon, kidonk nou te kreye varyab manyèlman pou chak tente ak lonbraj tèt nou. Nou presize valè mitan pwen an (egzanp, $blue-500) epi sèvi ak fonksyon koulè koutim pou tente (aleje) oswa lonbraj (fè nwa) koulè nou yo atravè mix()fonksyon koulè Sass la.

Sèvi ak mix()se pa menm lighten()ak ak darken()—ansyen an melanje koulè espesifye a ak blan oswa nwa, pandan y ap lèt la sèlman ajiste valè a légèreté nan chak koulè. Rezilta a se yon seri koulè pi konplè, jan yo montre nan Demo CodePen sa a .

Nou tint-color()ak shade-color()fonksyon itilize mix()ansanm ak $theme-color-intervalvaryab nou an, ki espesifye yon valè pousantaj etap pou chak koulè melanje nou pwodwi. Gade scss/_functions.scssak scss/_variables.scssfichye yo pou tout kòd sous la.

Koulè Sass kat

Fichye Sass sous Bootstrap yo genyen twa kat pou ede w byen vit ak fasilman bouk sou yon lis koulè ak valè hex yo.

$colorsbay lis tout 500koulè baz ( ) disponib nou yo
$theme-colorsbay lis tout koulè tèm yo rele semantik (yo montre anba a)
$graysbay lis tout koulè ak tout koulè gri

Nan scss/_variables.scss, w ap jwenn varyab koulè Bootstrap ak kat Sass. Men yon egzanp $colorskat Sass la:

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

Ajoute, retire oswa modifye valè nan kat la pou mete ajou fason yo itilize yo nan anpil lòt konpozan. Malerezman nan moman sa a, se pa tout eleman ki itilize kat Sass sa a. Mizajou nan lavni yo pral fè efò pou amelyore sa a. Jiska lè sa a, planifye pou sèvi ak ${color}varyab yo ak kat Sass sa a.

Egzanp

Men ki jan ou ka itilize sa yo nan Sass ou a:

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

Koulè ak klas sèvis piblik yo disponib tou pou mete colorak background-coloritilize 500valè koulè yo.

Jenere sèvis piblik

Te ajoute nan v5.1.0

Bootstrap pa gen ladann colorak background-colorsèvis piblik pou chak varyab koulè, men ou ka jenere sa yo tèt ou ak API sèvis piblik nou an ak kat Sass pwolonje nou yo te ajoute nan v5.1.0.

Pou kòmanse, asire w ke ou te enpòte fonksyon nou yo, varyab, mixin, ak sèvis piblik.
Sèvi ak map-merge-multiple()fonksyon nou an pou byen vit rantre plizyè kat Sass ansanm nan yon nouvo kat.
Rantre nouvo kat konbine sa a pou pwolonje nenpòt sèvis piblik ak yon {color}-{level}non klas.

Men yon egzanp ki jenere sèvis piblik koulè tèks (egzanp, .text-purple-500) lè l sèvi avèk etap ki anwo yo.

@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";

Sa a pral jenere nouvo .text-{color}-{level}sèvis piblik pou chak koulè ak nivo. Ou ka fè menm bagay la tou pou nenpòt lòt sèvis piblik ak pwopriyete tou.