in English

Reňk

“Bootstrap” stilimizi we komponentlerimizi mowzuk açýan giň reňk ulgamy bilen goldanýar. Bu, islendik taslama üçin has giňişleýin özleşdirmäge we giňeltmäge mümkinçilik berýär.

Bu sahypada

Mowzuk reňkleri

Reňk shemalaryny döretmek üçin has kiçi reňk palitrasyny döretmek üçin ähli reňkleriň bir bölegini ulanýarys, Sass üýtgeýjileri we Bootstrap scss/_variables.scssfaýlynda Sass kartasy.

Başlangyç

Ikinji

Üstünlik

Howp

Duýduryş

Maglumat

Lightagtylyk

Garaňky

Bu reňkleriň hemmesi Sass kartasy hökmünde elýeterlidir , $theme-colors.

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

Bu reňkleri nädip üýtgetmelidigi barada Sass kartalarymyzy we aýlaw resminamalarymyzy gözden geçiriň .

Colorshli reňkler

Bootstrap reňkleriniň hemmesi Sass üýtgeýjileri we scss/_variables.scssfaýlda Sass kartasy hökmünde elýeterlidir. Faýl ululyklarynyň köpelmeginiň öňüni almak üçin, bu üýtgeýänleriň her biri üçin tekst ýa-da fon reňk synplaryny döretmeýäris. Munuň ýerine mowzuk palitrasy üçin bu reňkleriň bir bölegini saýlaýarys .

Reňkleri düzeniňizde kontrast derejelerine gözegçilik ediň. Aşakda görkezilişi ýaly, esasy reňkleriň hersine üç sany kontrast gatnaşygy goşduk - biri swatchyň häzirki reňkleri, biri ak reňk, beýlekisi gara reňk.

$ gök# 0d6efd

$ 100

gök-200 $

$ gök-300

gök-400 $

$ gök-500

$ gök-600

gök-700 $

$ gök-800

gök-900 $

$ indigo# 6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$ gyrmyzy# 6f42c1

$ gyrmyzy-100

$ gyrmyzy-200

$ gyrmyzy-300

$ gyrmyzy-400

$ gyrmyzy-500

$ gyrmyzy-600

$ gyrmyzy-700

$ gyrmyzy-800

$ gyrmyzy-900

$ gülgüne# d63384

$ gülgüne-100

$ gülgüne-200

$ gülgüne-300

$ gülgüne-400

$ gülgüne-500

$ gülgüne-600

gülgüne-700

$ gülgüne-800

gülgüne-900 $

$ gyzyl# dc3545

$ gyzyl-100

$ gyzyl-200

$ gyzyl-300

$ 400

$ gyzyl-500

$ gyzyl-600

gyzyl-700 $

$ gyzyl-800

$ 900

$ apelsin# fd7e14

$ apelsin-100

$ apelsin-200

$ apelsin-300

apelsin-400

$ apelsin-500

$ apelsin-600

apelsin-700

$ apelsin-800

apelsin-900

$ sary# ffc107

$ 100

sary-200 $

sary-300 $

sary-400 $

sary-500 $

sary-600 $

sary-700 $

sary-800 $

sary-900 $

$ ýaşyl# 198754

$ ýaşyl-100

$ 200

$ ýaşyl-300

$ 400

$ ýaşyl-500

$ ýaşyl-600

ýaşyl-700 $

ýaşyl-800 $

ýaşyl-900 $

$ çaý# 20c997

$ 100

$ 200

çaý-300

çaý-400

$ 500

çaý-600

$ 700

çaý-800

çaý-900

$ sian# 0dcaf0

$ cyan-100

$ cyan-200

$ cyan-300

$ cyan-400

$ cyan-500

$ cyan-600

$ cyan-700

$ cyan-800

$ cyan-900

çal-500 $# adb5bd

$ çal-100

$ 200

çal-300 $

çal-400 $

çal-500 $

çal-600 $

çal-700 $

çal-800 $

çal-900 $

$ gara# 000

$ ak#fff

Sass barada bellikler

Sass programma taýdan üýtgeýjileri döredip bilmeýär, şonuň üçin her reňk üçin üýtgeýjileri el bilen döredip, özümize kölege berýäris. Orta nokadyň bahasyny kesgitleýäris (mysal üçin $blue-500) we Sassyň reňk funksiýasy arkaly reňklerimizi reňklemek (ýeňilleşdirmek) ýa-da kölegelemek (garalamak) üçin ýörite reňk funksiýalaryny ulanýarys mix().

Ulanmak mix()birmeňzeş däl lighten()we darken()- öňki görkezilen reňki ak ýa-da gara bilen garyşdyrýar, ikinjisi diňe her reňkiň ýeňillik bahasyny sazlaýar. Netijede , bu CodePen demosynda görkezilişi ýaly has doly reňkler toplumy .

Biziň tint-color()we shade-color()funksiýalarymyz , öndürýän her garyşyk reňk üçin basgançak göterim bahasyny kesgitleýän üýtgeýjimiz mix()bilen bilelikde ulanylýar. Doly çeşme kody üçin faýllara we faýllara $theme-color-intervalserediň .scss/_functions.scssscss/_variables.scss

Reňk Sass kartalary

“Bootstrap” -yň çeşmesi Sass faýllary, reňkleriň sanawyny we olaryň alty bahalaryny çalt we aňsatlyk bilen öwrenmäge kömek etmek üçin üç kartany öz içine alýar.

$colorsbar bolan esasy ( 500) reňklerimizi görkezýär
$theme-colorssemantiki taýdan atlandyrylan mowzuk reňkleriniň sanawyny görkezýär (aşakda görkezilýär)
$graysçal reňkleriň we reňkleriň sanawyny görkezýär

Içinde scss/_variables.scssBootstrap reňk üýtgeýjilerini we Sass kartasyny taparsyňyz. $colorsSass kartasynyň mysaly :

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

Kartanyň içindäki bahalary goşuň, aýyryň ýa-da üýtgediň, beýleki köp böleklerde ulanylyşyny täzeläň. Gynansagam, häzirki wagtda her bir komponent bu Sass kartasyny ulanmaýar. Geljekdäki täzelenmeler bu meselede gowulaşmaga çalyşar. Oňa çenli ${color}üýtgeýänleri we bu Sass kartasyny ulanmagy meýilleşdiriň.

Mysal

Sass-da bulary nädip ulanyp bilersiňiz:

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

Reňk bahalaryny düzmek we ulanmak üçin reňk we fon peýdaly sapaklar hem bar .colorbackground-color500