Xim

Bootstrap tau txais kev txhawb nqa los ntawm cov xim uas nws kim heev uas cov ntsiab lus peb cov qauv thiab cov khoom. Qhov no ua rau muaj kev hloov kho ntau dua thiab txuas ntxiv rau txhua qhov haujlwm.

Ntawm nplooj ntawv no

Xim xim

Peb siv subset ntawm tag nrho cov xim los tsim ib tug me me xim palette rau tsim xim schemes, kuj muaj raws li Sass variables thiab ib daim ntawv qhia Sass nyob rau hauv Bootstrap cov scss/_variables.scssntaub ntawv.

Thawj

Secondary

Kev vam meej

Kev phom sij

Ceeb toom

Cov ntaub ntawv

Teeb

Tsaus

Tag nrho cov xim no muaj nyob rau hauv daim ntawv qhia Sass, $theme-colors.

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

Mus saib peb Sass maps thiab loops docs kom hloov cov xim no.

Txhua xim

Txhua Bootstrap xim muaj nyob rau hauv Sass variables thiab Sass daim ntawv qhia hauv scss/_variables.scsscov ntaub ntawv. Txhawm rau zam kom tsis txhob muaj cov ntaub ntawv ntau ntxiv, peb tsis tsim cov ntawv nyeem lossis cov chav kawm xim tom qab rau txhua qhov sib txawv no. Xwb, peb xaiv ib pawg ntawm cov xim no rau lub ntsiab palette .

Nco ntsoov saib xyuas qhov sib piv piv thaum koj hloov xim. Raws li qhia hauv qab no, peb tau ntxiv peb qhov sib piv rau txhua qhov xim tseem ceeb - ib qho rau cov xim tam sim no, ib qho rau tawm tsam dawb, thiab ib qho rau tawm tsam dub.

$ xiav#0d6 efv

$ xiav-100

$ xiav-200

$ xiav-300

$ xiav-400

xiav-500 $

$ xiav-600

xiav-700 $

$ xiav-800

$ xiav-900

$indigo#6610f 2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$500

$ indigo-600

$700

$ indigo-800

$ indigo-900

$ liab#6f42c1

$ liab-100

$ liab-200

$liab-300

$ liab-400

$ liab-500

$ liab-600

$ liab-700

$ liab-800

$ liab-900

$pink#d63384

$pink-100

$pink-200

$pink-300

$pink-400

$pink-500

$pink-600

$pink-700

$pink-800

$pink-900

$red#dc3545

$red-100

$red-200

$red-300

$red-400

$red-500

$red-600

$red-700

$red-800

$ liab-900

$txiv kab ntxwv#f7e14

$ txiv kab ntxwv-100

$ txiv kab ntxwv-200

$ txiv kab ntxwv-300

$ txiv kab ntxwv-400

$ txiv kab ntxwv-500

$ txiv kab ntxwv-600

$ txiv kab ntxwv-700

$ txiv kab ntxwv-800

$ txiv kab ntxwv-900

$ daj#fc107

$ daj-100

$ daj-200

$ daj-300

$ daj-400

$ daj-500

$ daj-600

$ daj-700

$ daj-800

$ daj-900

$ ntsuab#198754

$ ntsuab-100

$ ntsuab-200

$ ntsuab-300

$ ntsuab-400

$ ntsuab-500

$ ntsuab-600

ntsuab-700 $

$ ntsuab-800

$ ntsuab-900

$teal#20c997

$-100

$-200

$ 300

Nqe - 400 $

$-500

$-600

Nqe - 700 $

Nqe - 800 $

Nqe - 900 $

$cyan#0dcaf 0

$ 100 hli

$cyan-200

$ 300

$-400

$500

$ 600

$ 700 hli

$ 800

$ 900

Grey - $ 500#adb5bd

Grey - $ 100

Grey - 200 $

grey-300$

Grey - 400 $

Grey - $ 500

grey-600 $

Grey - 700 $

grey-800 $

grey-900 $

$dub#000

$ dawb#fff

Sau ntawv rau Sass

Sass tsis tuaj yeem programmatically tsim qhov sib txawv, yog li peb manually tsim cov hloov pauv rau txhua qhov xim thiab ntxoov ntxoo peb tus kheej. Peb qhia kom meej tus nqi nruab nrab (piv txwv li, $blue-500) thiab siv cov xim kev cai rau tint (lighten) lossis ntxoov ntxoo (tsaus) peb cov xim ntawm Sass cov mix()xim muaj nuj nqi.

Kev siv mix()tsis zoo ib yam li lighten()thiab darken()- yav dhau los muab cov xim tshwj xeeb nrog xim dawb lossis xim dub, thaum lub sijhawm tom kawg tsuas yog kho tus nqi lightness ntawm txhua xim. Qhov tshwm sim yog ib qho kev ua tiav ntau ntawm cov xim, raws li qhia hauv CodePen demo .

Peb tint-color()thiab shade-color()kev ua haujlwm siv mix()nrog rau peb $theme-color-intervalqhov sib txawv, uas qhia txog tus nqi feem pua ntawm txhua qhov sib xyaw xim peb tsim. Saib cov ntawv scss/_functions.scssthiab scss/_variables.scsscov ntaub ntawv rau tag nrho qhov chaws.

Xim Sass maps

Bootstrap qhov chaw Sass cov ntaub ntawv suav nrog peb daim ntawv qhia los pab koj sai thiab yooj yim voj hla cov npe ntawm cov xim thiab lawv cov txiaj ntsig hex.

$colorsteev tag nrho peb lub hauv paus ( 500) xim
$theme-colorssau tag nrho cov npe semantically lub ntsiab xim (pom hauv qab no)
$grayssau tag nrho cov tints thiab ntxoov grey

Tsis pub dhau scss/_variables.scss, koj yuav pom Bootstrap cov xim sib txawv thiab Sass daim ntawv qhia. Nov yog ib qho piv txwv ntawm $colorsSass map:

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

Ntxiv, tshem tawm, lossis hloov kho qhov tseem ceeb hauv daim duab qhia kev hloov kho lawv siv li cas hauv ntau lwm yam. Hmoov tsis zoo nyob rau lub sijhawm no, tsis yog txhua yam khoom siv siv daim ntawv qhia Sass no. Cov kev hloov tshiab yav tom ntej yuav siv zog los txhim kho qhov no. Txog thaum ntawd, npaj rau kev siv cov ${color}hloov pauv thiab daim ntawv qhia Sass no.

Piv txwv

Nov yog qhov koj tuaj yeem siv cov no hauv koj Sass:

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

Cov chav kawm siv xim thiab keeb kwm yav dhau los kuj muaj rau kev teeb tsa colorthiab background-colorsiv cov 500xim xim.

Tsim cov khoom siv hluav taws xob

Ntxiv hauv v5.1.0

Bootstrap tsis suav nrog colorthiab background-colorcov khoom siv rau txhua qhov sib txawv ntawm cov xim, tab sis koj tuaj yeem tsim cov no koj tus kheej nrog peb cov khoom siv API thiab peb cov ntawv txuas ntxiv Sass ntxiv hauv v5.1.0.

Txhawm rau pib, xyuas kom tseeb tias koj tau import peb cov haujlwm, hloov pauv, mixins, thiab cov khoom siv hluav taws xob.
Siv peb lub map-merge-multiple()luag haujlwm kom nrawm nrawm ntau Sass maps ua ke hauv daim ntawv qhia tshiab.
Ua ke daim ntawv qhia tshiab no ua ke kom txuas tau cov khoom siv hluav taws xob nrog lub {color}-{level}npe chav kawm.

Nov yog ib qho piv txwv uas tsim cov ntawv siv xim xim (xws li, .text-purple-500) siv cov kauj ruam saum toj no.

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

Qhov no yuav tsim cov .text-{color}-{level}khoom siv tshiab rau txhua qhov xim thiab qib. Koj tuaj yeem ua tib yam rau lwm yam khoom siv thiab khoom siv.