in English

Culoare

Bootstrap este susținut de un sistem extins de culori care tematică stilurile și componentele noastre. Acest lucru permite personalizarea și extinderea mai cuprinzătoare pentru orice proiect.

Pe aceasta pagina

Culori tematice

Folosim un subset de toate culorile pentru a crea o paletă de culori mai mică pentru a genera scheme de culori, disponibilă și ca variabile Sass și o hartă Sass în scss/_variables.scssfișierul Bootstrap.

Primar

Secundar

Succes

Pericol

Avertizare

Info

Ușoară

Întuneric

Toate aceste culori sunt disponibile ca hartă Sass, $theme-colors.

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

Consultați documentele noastre privind hărțile și buclele Sass pentru a afla cum să modificați aceste culori.

Toate culorile

Toate culorile Bootstrap sunt disponibile ca variabile Sass și o hartă Sass în scss/_variables.scssfișier. Pentru a evita dimensiunile crescute ale fișierelor, nu creăm clase de text sau culori de fundal pentru fiecare dintre aceste variabile. În schimb, alegem un subset din aceste culori pentru o paletă de teme .

Asigurați-vă că monitorizați rapoartele de contrast pe măsură ce personalizați culorile. După cum se arată mai jos, am adăugat trei rapoarte de contrast la fiecare dintre culorile principale - unul pentru culorile curente ale specimenului, unul pentru alb și unul pentru negru.

$albastru#0d6efd

$ albastru-100

$ albastru-200

$ albastru-300

$ albastru-400

$ albastru-500

$ albastru-600

$ albastru-700

$ albastru-800

$ albastru-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$violet#6f42c1

$ violet-100

$ violet-200

$ violet-300

$ violet-400

$ violet-500

$ violet-600

$ violet-700

$ violet-800

$ violet-900

$roz#d63384

$roz-100

$roz-200

$roz-300

$roz-400

$roz-500

$roz-600

$roz-700

$roz-800

$roz-900

$red#dc3545

$red-100

$red-200

$red-300

roșu-400 USD

roșu-500 USD

roșu-600 USD

roșu-700 USD

roșu-800 USD

roșu-900 USD

$portocalie#fd7e14

$ portocaliu-100

$ portocaliu-200

$ portocaliu-300

$ portocaliu-400

$ portocaliu-500

$ portocaliu-600

$ portocaliu-700

$ portocaliu-800

$ portocaliu-900

$galben#ffc107

$galben-100

$galben-200

$galben-300

$galben-400

$galben-500

$galben-600

$galben-700

$galben-800

$galben-900

$verde#198754

$verde-100

$verde-200

$verde-300

$verde-400

$verde-500

$verde-600

$verde-700

$verde-800

$verde-900

$teal#20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cian#0dcaf0

$cian-100

$cian-200

$cian-300

$cian-400

$cian-500

$cian-600

$cian-700

$cian-800

$cian-900

$ gri-500#adb5bd

$ gri-100

$ gri-200

$ gri-300

$ gri-400

$ gri-500

$ gri-600

$ gri-700

$ gri-800

$ gri-900

$negru#000

$alb#fff

Note despre Sass

Sass nu poate genera variabile în mod programatic, așa că am creat manual variabile pentru fiecare nuanță și nuanță. Specificăm valoarea punctului de mijloc (de exemplu, $blue-500) și folosim funcții de culoare personalizate pentru a nuanța (lumina) sau a umbri (întuneca) culorile prin intermediul mix()funcției de culoare a lui Sass.

Utilizarea mix()nu este aceeași cu lighten()și darken()— prima îmbină culoarea specificată cu alb sau negru, în timp ce cea din urmă ajustează doar valoarea luminozității fiecărei culori. Rezultatul este o suită mult mai completă de culori, așa cum se arată în această demonstrație CodePen .

Funcțiile noastre tint-color()și shade-color()sunt folosite mix()alături de $theme-color-intervalvariabila noastră, care specifică o valoare procentuală în trepte pentru fiecare culoare mixtă pe care o producem. Consultați fișierele scss/_functions.scssși scss/_variables.scsspentru codul sursă complet.

Hărți color Sass

Fișierele sursă Sass ale Bootstrap includ trei hărți pentru a vă ajuta să treceți rapid și ușor peste o listă de culori și valorile lor hexadecimale.

$colorslistează toate 500culorile noastre de bază disponibile ( ).
$theme-colorslistează toate culorile temei denumite semantic (prezentate mai jos)
$grayslistează toate nuanțele și nuanțele de gri

În scss/_variables.scss, veți găsi variabilele de culoare ale Bootstrap și harta Sass. Iată un exemplu de $colorshartă 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
);

Adăugați, eliminați sau modificați valori în cadrul hărții pentru a actualiza modul în care sunt utilizate în multe alte componente. Din păcate, în acest moment, nu toate componentele utilizează această hartă Sass. Actualizările viitoare se vor strădui să îmbunătățească acest lucru. Până atunci, plănuiți să utilizați ${color}variabilele și această hartă Sass.

Exemplu

Iată cum le puteți folosi în Sass:

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

Clasele utilitare de culoare și de fundalcolor sunt, de asemenea, disponibile pentru setarea și background-colorutilizarea 500valorilor de culoare.