in English

Reng

Bootstrap ji hêla pergalek rengîn a berfireh ve tê piştgirî kirin ku şêwaz û pêkhateyên me tema dike. Ev ji bo her projeyê xwerû û dirêjkirina berfirehtir dike.

Li ser vê rûpelê

Rengên mijarê

Em komek ji hemî rengan bikar tînin da ku ji bo hilberîna nexşeyên rengan paleyek rengînek piçûktir biafirînin, di scss/_variables.scsspelê Bootstrap de wekî guhêrbarên Sass û nexşeyek Sass jî peyda dibin.

Bingehîn

Dûwemdor

Serketinî

Talûke

Gazî

Info

Sivik

Tarî

Hemî van rengan wekî nexşeyek Sass hene $theme-colors,.

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

Ji bo ku meriv van rengan çawa biguhezîne, nexşeyên Sass û belgeyên meya lûpsê binihêrin.

Hemû reng

Hemî rengên Bootstrap wekî guherbarên Sass û nexşeyek Sass di scss/_variables.scsspelê de hene. Ji bo ku em mezinahiya pelan zêde nebin, em ji bo her yek ji van guherbaran çînên rengê nivîsê an paşxanê naafirînin. Di şûna wê de, em ji bo paletek mijarek ji van rengan hildibijêrin .

Dema ku hûn rengan xweş dikin, pê ewle bin ku rêjeyên berevajîyê bişopînin. Wekî ku li jêr tê xuyang kirin, me sê rêjeyên berevajî li her yek ji rengên sereke zêde kirine -yek ji bo rengên heyî yên swatchê, yek ji bo li dijî spî, û yek ji bo li dijî reş.

$şîn#0d6efd

şîn-100 $

şîn-200 $

şîn-300 $

şîn-400 $

şîn-500 $

şîn-600 $

şîn-700 $

şîn-800 $

şîn-900 $

$indigo#6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$ binefşî#6f42c1

binefşî-100 $

binefşî - 200 $

binefşî-300 $

binefşî-400 $

binefşî-500 $

binefşî-600 $

binefşî-700 $

binefşî-800 $

binefşî-900 $

$pembe#d63384

$ pembe-100

$ pembe-200

$ pembe-300

$ pembe-400

$ pembe-500

$ pembe-600

$ pembe-700

$ pembe-800

$ pembe-900

$ sor#dc3545

$ sor-100

$ sor-200

$ sor-300

$ sor-400

$ sor-500

$ sor-600

$ sor-700

$ sor-800

$ sor-900

$ porteqalî#fd7e14

$ porteqalî-100

$ porteqalî-200

$ porteqalî-300

$ porteqalî-400

$ porteqalî-500

$ porteqalî-600

$ porteqalî-700

$ porteqalî-800

$ porteqalî-900

$zer#ffc107

$ zer-100

$ zer-200

$ zer-300

$ zer-400

$ zer-500

$ zer-600

$ zer-700

$ zer-800

$ zer-900

$ kesk#198754

$ kesk-100

$ kesk-200

$ kesk-300

$ kesk-400

$ kesk-500

$ kesk-600

$ kesk-700

$ kesk-800

$ kesk-900

$teal#20c997

$ teal-100

$ teal-200

$ teal-300

$ teal-400

$ teal-500

$ teal-600

$ teal-700

$ teal-800

$ teal-900

$cyan#0dcaf0

$ cyan-100

$ cyan-200

$ cyan-300

$ cyan-400

$ cyan-500

$ cyan-600

$ cyan-700

$ cyan-800

$ cyan-900

gewr-500 $#adb5bd

gewr-100 $

gewr-200 $

gewr-300 $

gewr-400 $

gewr-500 $

gewr-600 $

gewr-700 $

gewr-800 $

gewr-900 $

$ reş#000

$ spî#fff

Têbînî li ser Sass

Sass nikare bi bernamekî guhêrbaran çêbike, ji ber vê yekê me bi destan ji bo her reng û siya xwe guhêrbar afirandin. Em nirxa navîn diyar dikin (mînak, $blue-500) û fonksiyonên rengîn ên xwerû bikar tînin da ku bi fonksiyona rengê Sass rengên xwe reng bikin (ronî bikin) an siya bikin (tar bikin) mix().

Bikaranîn mix()ne yek e lighten()û darken()- ya berê rengê diyarkirî bi spî an reş tevlihev dike, dema ku ya paşîn tenê nirxa sivikahiya her reng eyar dike. Wekî ku di vê demoya CodePen de tê xuyang kirin , encam komek rengan pir bêkêmasî ye.

Fonksiyonên me tint-color()û li kêleka guhêrbara me bikar tînin , ku ji bo her rengê tevlihev ku em hildiberînin nirxek ji sedî gav diyar dike. Ji bo koda çavkaniyê ya tevahî pelan û pelan bibînin.shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

Nexşeyên Color Sass

Pelên Sass-a çavkaniya Bootstrap sê nexşeyan vedihewînin da ku ji we re bibin alîkar ku hûn bi lez û bez li ser navnîşek rengan û nirxên wan ên hex bigerin.

$colorshemî 500rengên me yên bingehîn () yên berdest navnîş dike
$theme-colorshemî rengên mijarê yên bi navên semantîk navnîş dike (li jêr têne xuyang kirin)
$grayshemî reng û rengên gewr navnîş dike

Di hundurê scss/_variables.scssde, hûn ê guhêrbarên rengîn ên Bootstrap û nexşeya Sass bibînin. Li vir mînakek $colorsnexşeya Sass heye:

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

Nirxên di nav nexşeyê de zêde bikin, jêbirin an biguhezînin da ku ew çawa di gelek pêkhateyên din de têne bikar anîn nûve bikin. Mixabin di vê demê de, ne her pêkhate vê nexşeya Sass bikar tîne. Nûvekirinên pêşerojê dê hewl bidin ku li ser vê çêtir bikin. Heya wê hingê, plan bikin ku hûn ${color}guhêrbar û vê nexşeya Sassê bikar bînin.

Mînak

Li vir çawa hûn dikarin van di Sass-a xwe de bikar bînin:

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

Ji bo danîn û karanîna nirxên rengan jî dersên karanîna reng û paşerojê hene.colorbackground-color500