Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
in English

Ngjyrë

Bootstrap mbështetet nga një sistem i gjerë ngjyrash që thekson stilet dhe komponentët tanë. Kjo mundëson personalizim dhe shtrirje më gjithëpërfshirëse për çdo projekt.

Ngjyrat e temave

Ne përdorim një nëngrup të të gjitha ngjyrave për të krijuar një gamë më të vogël ngjyrash për gjenerimin e skemave të ngjyrave, të disponueshme gjithashtu si variabla Sass dhe një hartë Sass në scss/_variables.scssskedarin e Bootstrap.

fillore
E mesme
Sukses
Rrezik
Paralajmërim
Informacion
Drita
E errët

Të gjitha këto ngjyra janë të disponueshme si një hartë Sass, $theme-colors.

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

Shikoni hartat tona Sass dhe dokumentet e sytheve për mënyrën e modifikimit të këtyre ngjyrave.

Të gjitha ngjyrat

Të gjitha ngjyrat e Bootstrap janë të disponueshme si variabla Sass dhe një hartë Sass në scss/_variables.scssskedar. Për të shmangur rritjen e madhësive të skedarëve, ne nuk krijojmë klasa të ngjyrave të tekstit ose sfondit për secilën prej këtyre variablave. Në vend të kësaj, ne zgjedhim një nëngrup të këtyre ngjyrave për një paletë temash .

Sigurohuni që të monitoroni raportet e kontrastit ndërsa personalizoni ngjyrat. Siç tregohet më poshtë, ne kemi shtuar tre raporte kontrasti në secilën prej ngjyrave kryesore - një për ngjyrat aktuale të modelit, një kundër të bardhës dhe një kundër të zezës.

$blu#0d6efd
Blu - 100 dollarë
Blu - 200 dollarë
Blu - 300 dollarë
Blu - 400 dollarë
Blu - 500 dollarë
Blu - 600 dollarë
Blu - 700 dollarë
Blu - 800 dollarë
Blu - 900 dollarë
$lloj#6610f2
indigo-100 dollarë
$ indigo-200
$ indigo-300
$ indigo-400
indigo-500 dollarë
indigo-600 dollarë
indigo-700 dollarë
indigo-800 dollarë
indigo-900 dollarë
$vjollcë#6f42c1
vjollcë-100 dollarë
vjollcë - 200 dollarë
vjollcë-300 dollarë
vjollcë-400 dollarë
vjollcë-500 dollarë
vjollcë-600 dollarë
vjollcë-700 dollarë
vjollcë-800 dollarë
vjollcë-900 dollarë
$rozë#d63384
rozë-100 dollarë
rozë - 200 dollarë
rozë-300 dollarë
rozë-400 dollarë
rozë-500 dollarë
rozë-600 dollarë
rozë-700 dollarë
rozë-800 dollarë
rozë-900 dollarë
$ e kuqe#dc3545
e kuqe - 100 dollarë
e kuqe - 200 dollarë
e kuqe - 300 dollarë
e kuqe - 400 dollarë
e kuqe - 500 dollarë
e kuqe - 600 dollarë
e kuqe - 700 dollarë
e kuqe-800 dollarë
e kuqe-900 dollarë
$ portokalli#fd7e14
portokalli-100 dollarë
portokalli - 200 dollarë
portokalli-300 dollarë
portokalli-400 dollarë
portokalli-500 dollarë
portokalli-600 dollarë
portokalli-700 dollarë
portokalli-800 dollarë
portokalli-900 dollarë
$ e verdhë#ffc107
e verdhë-100 dollarë
e verdhë-200 dollarë
e verdhë-300 dollarë
e verdhë-400 dollarë
e verdhë-500 dollarë
e verdhë-600 dollarë
e verdhë-700 dollarë
e verdhë-800 dollarë
e verdhë-900 dollarë
$gjelbër#198754
e gjelbër - 100 dollarë
e gjelbër - 200 dollarë
e gjelbër-300 dollarë
jeshile-400 dollarë
e gjelbër-500 dollarë
e gjelbër-600 dollarë
e gjelbër-700 dollarë
e gjelbër - 800 dollarë
e gjelbër-900 dollarë
$kafkëz#20c997
100 dollarë
200 dollarë
300 dollarë
400 dollarë
500 dollarë
600 dollarë
700 dollarë
800 dollarë
900 dollarë
$cyan#0dcaf0
Cyan-100 dollarë
Cyan-200 dollarë
Cyan-300 dollarë
Cyan-400 dollarë
Cyan-500 dollarë
Cyan-600 dollarë
Cyan-700 dollarë
Cyan-800 dollarë
Cyan-900 dollarë
gri-500 dollarë#adb5bd
gri - 100 dollarë
gri - 200 dollarë
gri-300 dollarë
gri - 400 dollarë
gri-500 dollarë
gri - 600 dollarë
gri-700 dollarë
gri-800 dollarë
gri-900 dollarë
$i zi#000
$ e bardhë#fff

Shënime mbi Sass

Sass nuk mund të gjenerojë variabla në mënyrë programore, kështu që ne vetë krijuam variabla për çdo nuancë dhe hije. Ne specifikojmë vlerën e pikës së mesit (p.sh., $blue-500) dhe përdorim funksionet e personalizuara të ngjyrave për të ngjyrosur (ndriçuar) ose hije (errësuar) ngjyrat tona nëpërmjet mix()funksionit të ngjyrave të Sass.

Përdorimi mix()nuk është i njëjtë si lighten()dhe - e darken()para përzien ngjyrën e specifikuar me të bardhën ose të zezën, ndërsa e dyta rregullon vetëm vlerën e butësisë së secilës ngjyrë. Rezultati është një grup shumë më i plotë ngjyrash, siç tregohet në këtë demonstrim të CodePen .

Funksionet tona tint-color()dhe shade-color()përdoren mix()së bashku me $theme-color-intervalndryshoren tonë, e cila specifikon një vlerë përqindjeje të shkallëzuar për çdo ngjyrë të përzier që prodhojmë. Shikoni skedarët scss/_functions.scssdhe scss/_variables.scsspër kodin e plotë burimor.

Hartat me ngjyra Sass

Skedarët burimor Sass të Bootstrap përfshijnë tre harta për t'ju ndihmuar të shikoni shpejt dhe me lehtësi një listë ngjyrash dhe vlerat e tyre heks.

  • $colorsliston të gjitha 500ngjyrat tona bazë ( ) të disponueshme
  • $theme-colorsliston të gjitha ngjyrat e temave të emërtuara semantikisht (treguar më poshtë)
  • $graysliston të gjitha nuancat dhe nuancat e grisë

Brenda scss/_variables.scss, do të gjeni variablat e ngjyrave të Bootstrap dhe hartën Sass. Këtu është një shembull i $colorshartës 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
);

Shtoni, hiqni ose modifikoni vlerat brenda hartës për të përditësuar mënyrën se si ato përdoren në shumë komponentë të tjerë. Fatkeqësisht në këtë kohë, jo çdo komponent e përdor këtë hartë Sass. Përditësimet e ardhshme do të përpiqen ta përmirësojnë këtë. Deri atëherë, planifikoni të përdorni ${color}variablat dhe këtë hartë Sass.

Shembull

Ja se si mund t'i përdorni këto në Sass tuaj:

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

Klasat e përdorimit të ngjyrave dhe sfondit janë gjithashtu të disponueshme për vendosjen colordhe background-colorpërdorimin e 500vlerave të ngjyrave.

Gjenerimi i shërbimeve komunale

Shtuar në v5.1.0

Bootstrap nuk përfshin colordhe background-colorprograme ndihmëse për çdo variabël ngjyrash, por ju mund t'i gjeneroni ato vetë me API-në tonë të shërbimeve dhe hartat tona të zgjeruara Sass të shtuara në v5.1.0.

  1. Për të filluar, sigurohuni që të keni importuar funksionet, variablat, përzierjet dhe shërbimet tona.
  2. Përdorni map-merge-multiple()funksionin tonë për të bashkuar shpejt disa harta Sass së bashku në një hartë të re.
  3. Bashkoni këtë hartë të re të kombinuar për të zgjeruar çdo mjet me një {color}-{level}emër klase.

Ja një shembull që gjeneron shërbime të ngjyrave të tekstit (p.sh., .text-purple-500) duke përdorur hapat e mësipërm.

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

Kjo do të gjenerojë .text-{color}-{level}shërbime të reja për çdo ngjyrë dhe nivel. Ju mund të bëni të njëjtën gjë edhe për çdo shërbim dhe pronë tjetër.