Անցեք հիմնական բովանդակությանը Բաց թողնել փաստաթղթերի նավարկություն
in English

Գույն

Bootstrap-ն ապահովված է լայնածավալ գունային համակարգով, որը հիմնավորում է մեր ոճերն ու բաղադրիչները: Սա հնարավորություն է տալիս ավելի համապարփակ անհատականացում և ընդլայնում ցանկացած նախագծի համար:

Այս էջում

Թեմայի գույները

Մենք օգտագործում ենք բոլոր գույների ենթաբազմությունը՝ գունային սխեմաներ ստեղծելու համար ավելի փոքր գունապնակ ստեղծելու համար, որը հասանելի է նաև որպես Sass փոփոխականներ և Sass քարտեզ Bootstrap-ի scss/_variables.scssֆայլում:

Առաջնային
Երկրորդական
Հաջողություն
Վտանգ
Զգուշացում
Ինֆո
Լույս
Մութ

Այս բոլոր գույները հասանելի են որպես Sass քարտեզ, $theme-colors.

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

Ստուգեք մեր Sass քարտեզները և օղակների փաստաթղթերը ՝ այս գույները փոփոխելու համար:

Բոլոր գույները

Bootstrap-ի բոլոր գույները հասանելի են որպես Sass փոփոխականներ և Sass քարտեզ scss/_variables.scssֆայլում: Ֆայլերի չափերի ավելացումից խուսափելու համար մենք չենք ստեղծում տեքստի կամ ֆոնի գույնի դասեր այս փոփոխականներից յուրաքանչյուրի համար: Փոխարենը, մենք ընտրում ենք այս գույների ենթաբազմությունը թեմայի ներկապնակի համար :

Համոզվեք, որ վերահսկեք հակադրության հարաբերակցությունները, երբ հարմարեցնեք գույները: Ինչպես ցույց է տրված ստորև, մենք հիմնական գույներից յուրաքանչյուրին ավելացրել ենք երեք կոնտրաստ հարաբերակցություն՝ մեկը նմուշի ներկայիս գույների համար, մեկը՝ սպիտակի դեմ, և մեկը՝ սևի դեմ:

$ կապույտ#0d6efd
Կապույտ $100
Կապույտ $200
կապույտ-300 դոլար
Կապույտ $400
կապույտ-500 դոլար
Կապույտ $600
կապույտ-700 դոլար
Կապույտ $800
Կապույտ $900
$indigo#6610f2
$ indigo-100
$ indigo-200
$ indigo-300
$ indigo-400
$ indigo-500
$ indigo-600
$ indigo-700
$ indigo-800
$ indigo-900
$մանուշակագույն#6f42c1
$մանուշակագույն-100
$մանուշակագույն-200
$ մանուշակագույն-300
$մանուշակագույն-400
$մանուշակագույն-500
$մանուշակագույն-600
$մանուշակագույն-700 դոլար
$մանուշակագույն-800
$մանուշակագույն-900
$վարդագույն#d63384
վարդագույն-100 դոլար
վարդագույն-200 դոլար
վարդագույն-300 դոլար
վարդագույն-400 դոլար
վարդագույն-500 դոլար
վարդագույն-600 դոլար
վարդագույն-700 դոլար
վարդագույն-800 դոլար
վարդագույն-900 դոլար
$ կարմիր#dc3545
$ կարմիր-100
$ կարմիր-200
Կարմիր $300
Կարմիր $400
Կարմիր $500
$ կարմիր-600
կարմիր-700 դոլար
կարմիր-800 դոլար
Կարմիր $900
$նարնջագույն#fd7e14
$նարնջագույն-100
$նարնջագույն-200
$նարնջագույն-300
$նարնջագույն-400
$նարնջագույն-500
$նարնջագույն-600
$նարնջագույն-700
$նարնջագույն-800
$նարնջագույն-900
$ դեղին#ffc107
$ դեղին-100
$ դեղին-200
$ դեղին-300
$ դեղին-400
Դեղին $500
$ դեղին-600
Դեղին $700
Դեղին $800
Դեղին $900
$կանաչ#198754
$կանաչ-100
$կանաչ-200
$կանաչ-300
$կանաչ-400
$կանաչ-500
$կանաչ-600
$կանաչ-700
$կանաչ-800
$կանաչ-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
$ մոխրագույն-500#adb5bd
$ մոխրագույն-100
$ մոխրագույն-200
$ մոխրագույն-300
$ մոխրագույն-400
$ մոխրագույն-500
$ մոխրագույն-600
մոխրագույն $700
$ մոխրագույն-800
մոխրագույն $900
$ սև#000
$ սպիտակ#ֆֆֆ

Նշումներ Սասի մասին

Sass-ը չի կարող ծրագրավորել փոփոխականներ ստեղծել, ուստի մենք ձեռքով ստեղծել ենք փոփոխականներ յուրաքանչյուր երանգի և երանգի համար: Մենք նշում ենք միջին կետի արժեքը (օրինակ՝ $blue-500) և օգտագործում ենք հատուկ գունային ֆունկցիաներ՝ մեր գույները ներկելու (բացելու) կամ ստվերելու (մթնացնելու) համար Sass-ի mix()գունային ֆունկցիայի միջոցով:

Օգտագործումը mix()նույնը չէ, ինչ lighten()և darken()— առաջինը միախառնում է նշված գույնը սպիտակի կամ սևի հետ, մինչդեռ երկրորդը միայն կարգավորում է յուրաքանչյուր գույնի թեթևության արժեքը: Արդյունքը շատ ավելի ամբողջական գույների հավաքածու է, ինչպես ցույց է տրված այս CodePen ցուցադրությունում :

Մեր tint-color()և shade-color()ֆունկցիաները օգտագործվում mix()են մեր փոփոխականի կողքին $theme-color-interval, որը սահմանում է աստիճանական տոկոսային արժեք մեր արտադրած յուրաքանչյուր խառը գույնի համար: Տե՛ս scss/_functions.scssև scss/_variables.scssֆայլերը ամբողջական կոդով:

Գունավոր Sass քարտեզներ

Bootstrap-ի աղբյուր Sass ֆայլերը ներառում են երեք քարտեզներ, որոնք կօգնեն ձեզ արագ և հեշտությամբ շրջանցել գույների ցանկը և դրանց վեցանկյուն արժեքները:

  • $colorsթվարկում է մեր բոլոր առկա հիմնական ( 500) գույները
  • $theme-colorsթվարկում է բոլոր իմաստային անվանումով թեմայի գույները (ցուցադրված է ստորև)
  • $graysթվարկում է մոխրագույնի բոլոր երանգներն ու երանգները

Շրջանակներում scss/_variables.scssդուք կգտնեք Bootstrap-ի գունային փոփոխականները և Sass քարտեզը: Ահա $colorsSass քարտեզի օրինակ.

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

Ավելացնել, հեռացնել կամ փոփոխել արժեքները քարտեզի մեջ՝ թարմացնելու, թե ինչպես են դրանք օգտագործվում բազմաթիվ այլ բաղադրիչներում: Ցավոք, այս պահին ոչ բոլոր բաղադրիչներն են օգտագործում այս Sass քարտեզը: Հետագա թարմացումները կձգտեն բարելավել դա: Մինչ այդ, պլանավորեք օգտագործել ${color}փոփոխականները և այս Sass քարտեզը:

Օրինակ

Ահա, թե ինչպես կարող եք դրանք օգտագործել ձեր Sass-ում.

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

Գույնի և ֆոնային օգտակար դասերը հասանելի են նաև գունային արժեքները սահմանելու colorև background-colorօգտագործելու համար :500