Maris

Ti Bootstrap ket suportado babaen ti nasaknap a sistema ti kolor a mangtema kadagiti estilo ken pasettayo. Daytoy ket mangpabalin ti ad-adu a komprehensibo a panagpasayaat ken panagpaatiddog para iti ania man a proyekto.

Iti daytoy a panid

Dagiti kolor ti tema

Usarenmi ti subgrupo dagiti amin a kolor tapno mangpartuat ti basbassit a paleta ti kolor para iti panagpataud kadagiti eskema ti kolor, a magun-od pay a kas dagiti variable ti Sass ken ti mapa ti Sass iti scss/_variables.scsspapeles ti Bootstrap.

Kangrunaan

Sekondaria

Balligi

Peggad

Pakdaar

Info nga

Silaw

Nasipnget

Amin dagitoy a kolor ket magun-odan kas mapa ti Sass, $theme-colors.

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

Kitaen dagiti Sass maps ken loops docs tayo para no kasano nga baliwan dagitoy a kolor.

Amin a kolor

Amin a kolor ti Bootstrap ket magun-od a kas dagiti variable ti Sass ken ti mapa ti Sass iti scss/_variables.scssfile. Tapno maliklikan ti immadu a kadakkel ti papeles, saantayo a mangpartuat kadagiti klase ti kolor ti teksto wenno likudan para iti tunggal maysa kadagitoy a variable. Imbes ketdi, agpilitayo ti maysa a subgrupo dagitoy a kolor para iti maysa a paleta ti tema .

Siguraduenyo a bantayan dagiti contrast ratio bayat nga i-customize-yo dagiti kolor. Kas naipakita iti baba, innayonmi ti tallo a contrast ratio iti tunggal maysa kadagiti kangrunaan a kolor—maysa para kadagiti agdama a kolor ti swatch, maysa para iti kontra puraw, ken maysa para iti kontra iti nangisit.

$asul nga# 0d6efd nga

$asul-100 nga

$asul-200 nga

$asul-300 nga

$asul-400 nga

$asul-500 nga

$asul-600 nga

$asul-700 nga

$ asul-800 nga

$ asul-900 nga

$indigo nga#6610f2 nga

$indigo-100 nga

$indigo-200 nga

$indigo-300 nga

$indigo-400 nga

$indigo-500 nga

$indigo-600 nga

$indigo-700 nga

$indigo-800 nga

$indigo-900 nga

$lila nga#6f42c1 nga

$lila-100 nga

$lila-200 nga

$lila-300 nga

$lila-400 nga

$lila-500 nga

$lila-600 nga

$lila-700 nga

$lila-800 nga

$lila-900 nga

$rosas nga#d63384 nga

$ rosas-100 nga

$ rosas-200 nga

$ rosas-300 nga

$ rosas-400 nga

$ rosas-500 nga

$ rosas-600 nga

$ rosas-700 nga

$ rosas-800 nga

$ rosas-900 nga

$nalabaga nga# dc3545 nga

$ nalabaga-100

$ nalabaga-200

$ nalabaga-300

$ nalabaga-400

$ nalabaga-500

$ nalabaga-600

$ nalabaga-700

$ nalabaga-800

$ nalabaga-900

$kahel nga# fd7e14 nga

$kahel-100 nga

$kahel-200 nga

$kahel-300 nga

$kahel-400 nga

$kahel-500 nga

$kahel-600 nga

$kahel-700 nga

$kahel-800 nga

$kahel-900 nga

$duyaw nga#ffc107 nga

$duyaw-100 nga

$duyaw-200 nga

$duyaw-300 nga

$duyaw-400 nga

$duyaw-500 nga

$duyaw-600 nga

$duyaw-700 nga

$duyaw-800 nga

$duyaw-900 nga

$berde nga#198754 nga

$berde-100 nga

$berde-200 nga

$berde-300 nga

$berde-400 nga

$berde-500 nga

$berde-600 nga

$berde-700 nga

$berde-800 nga

$ berde-900 nga

$teal nga#20c997 nga

$teal-100 nga

$teal-200 nga

$teal-300 nga

$teal-400 nga

$teal-500 nga

$teal-600 nga

$teal-700 nga

$teal-800 nga

$teal-900 nga

$cyan nga#0dcaf0 nga

$cyan-100 nga

$cyan-200 nga

$cyan-300 nga

$ cyan-400 nga

$ cyan-500 nga

$ cyan-600 nga

$ cyan-700 nga

$ cyan-800 nga

$ cyan-900 nga

$ abuabu-500 nga# adb5bd nga

$ abuabu-100 nga

$abuabu-200 nga

$ abuabu-300 nga

$ abuabu-400 nga

$ abuabu-500 nga

$ abuabu-600 nga

$ abuabu-700 nga

$ abuabu-800 nga

$ abuabu-900 nga

$nangisit nga#000 nga

$puraw nga#fff nga

Dagiti Nota iti Sass

Saan a programatiko a mangpataud ti Sass kadagiti variable, isu a manual a nangaramidkami kadagiti variable para iti tunggal tint ken shade ti bagimi. Ikeddengmi ti pateg ti tengnga a punto (kas pagarigan, $blue-500) ken agusar kadagiti kostumbre a panagandar ti kolor tapno agtint (mangpalag-an) wenno manglinong (mangpasipnget) kadagiti kolormi babaen ti mix()panagandar ti kolor ti Sass.

Ti panagusar mix()ket saan a kapada ti lighten()ken darken()—ti immuna ket mangtimpla ti naikeddeng a kolor iti puraw wenno nangisit, bayat a ti naud-udi ket mangbalbaliw laeng ti pateg ti kinalag-an ti tunggal maysa a kolor. Ti resulta ket ti ad-adu nga amang a kompleto a suite dagiti kolor, a kas naipakita iti daytoy a CodePen a demo .

Ti tint-color()ken dagiti shade-color()panagandartayo ket agus-usar mix()a kadua ti $theme-color-intervalvariabletayo, a mangikeddeng ti addang a pateg ti porsiento para iti tunggal maysa a naglaok a kolor a pataudentayo. Kitaen ti scss/_functions.scssken scss/_variables.scssdagiti file para iti naan-anay a taudan a kodigo.

Color Sass nga mapa

Dagiti taudan a Sass a papeles ti Bootstrap ket mangiraman kadagiti tallo a mapa tapno matulongannaka a napardas ken nalaka a mang-loop iti listaan dagiti kolor ken dagiti hex a pategda.

$colorsilistana amin a magun-odantayo a base ( 500) a kolor
$theme-colorsilistana amin dagiti semantiko a nainaganan a kolor ti tema (naipakita iti baba) .
$graysilistana amin a tints ken shade ti gray

Iti uneg scss/_variables.scssti , makasarakka kadagiti variable ti kolor ti Bootstrap ken ti mapa ti Sass. Adda ditoy ti pagarigan ti $colorsmapa ti Sass:

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

Inayon, ikkaten, wenno baliwan dagiti pateg iti uneg ti mapa tapno mapabaro no kasano a maus-usar dagitoy kadagiti adu a dadduma pay a paset. Ti makadakes iti daytoy a panawen, saan a tunggal maysa a paset ket agus-usar iti daytoy a mapa ti Sass. Ikagumaan dagiti masanguanan nga update a pasayaaten daytoy. Agingga iti dayta, agplano iti panangusar kadagiti ${color}variable ken daytoy a mapa ti Sass.

Pagwadan

Kastoy no kasano nga usaren dagitoy iti Sass mo:

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

Dagiti klase ti utilidad ti kolor ken likudancolor ket magun-od pay para iti panangisaad ken background-colorpanagusar kadagiti 500pateg ti kolor.

Panagpataud kadagiti utilidad

Nainayon iti v5.1.0

Ti Bootstrap ket saan a mangiraman colorken background-colordagiti utilidad para iti tunggal maysa a variable ti kolor, ngem mabalinmo a patauden dagitoy a mismo babaen ti API ti utilidadmi ken dagiti napalawa a mapami ti Sass a nainayon iti v5.1.0.

Tapno mangrugi, siguraduen nga in-importmo dagiti function, variable, mixin, ken utilities-mi.
Usaren ti map-merge-multiple()function tayo tapno napardas nga agtipon ti adu a mapa ti Sass iti baro a mapa.
Pagtiponen daytoy baro a naitipon a mapa tapno mapalawa ti ania man a utilidad nga addaan iti {color}-{level}nagan ti klase.

Adda ditoy ti pagarigan a mangpataud kadagiti utilidad ti kolor ti teksto (kas pagarigan, .text-purple-500) babaen ti panagusar kadagiti addang iti ngato.

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

Daytoy ket mangpataud kadagiti baro a .text-{color}-{level}utilidad para iti tunggal maysa a kolor ken lebel. Mabalinmo nga aramiden met dayta para iti aniaman a sabali a utilidad ken sanikua met laeng.