Գույն
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
ֆայլում: Ֆայլերի չափերի ավելացումից խուսափելու համար մենք չենք ստեղծում տեքստի կամ ֆոնի գույնի դասեր այս փոփոխականներից յուրաքանչյուրի համար: Փոխարենը, մենք ընտրում ենք այս գույների ենթաբազմությունը թեմայի գունապնակի համար :
Համոզվեք, որ վերահսկեք հակադրության հարաբերակցությունները, երբ հարմարեցնեք գույները: Ինչպես ցույց է տրված ստորև, մենք հիմնական գույներից յուրաքանչյուրին ավելացրել ենք երեք կոնտրաստ հարաբերակցություն՝ մեկը նմուշի ներկայիս գույների համար, մեկը՝ սպիտակի դեմ, և մեկը՝ սևի դեմ:
Նշումներ Սասի մասին
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 քարտեզը: Ահա $colors
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
);
Ավելացնել, հեռացնել կամ փոփոխել արժեքները քարտեզի մեջ՝ թարմացնելու, թե ինչպես են դրանք օգտագործվում բազմաթիվ այլ բաղադրիչներում: Ցավոք, այս պահին ոչ բոլոր բաղադրիչներն են օգտագործում այս Sass քարտեզը: Հետագա թարմացումները կձգտեն բարելավել դա: Մինչ այդ, պլանավորեք օգտագործել ${color}
փոփոխականները և այս Sass քարտեզը:
Օրինակ
Ահա, թե ինչպես կարող եք դրանք օգտագործել ձեր Sass-ում.
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Գույնի և ֆոնային օգտակար դասերը հասանելի են նաև գունային արժեքները սահմանելու color
և background-color
օգտագործելու համար :500
Արտադրող կոմունալ ծառայություններ
Ավելացված է v5.1.0-ում
Bootstrap-ը չի ներառում color
և background-color
կոմունալ ծրագրեր յուրաքանչյուր գունային փոփոխականի համար, բայց դուք կարող եք դրանք ստեղծել ինքներդ մեր օգտակար API-ի և v5.1.0-ում ավելացված մեր ընդլայնված Sass քարտեզների միջոցով:
- Սկսելու համար համոզվեք, որ ներմուծել եք մեր գործառույթները, փոփոխականները, միքսները և կոմունալ ծառայությունները:
- Օգտագործեք մեր
map-merge-multiple()
գործառույթը՝ մի քանի Sass քարտեզներ արագ միացնելու համար նոր քարտեզում: {color}-{level}
Միավորեք այս նոր համակցված քարտեզը՝ դասի անունով ցանկացած օգտակար ծրագիր ընդլայնելու համար :
Ահա մի օրինակ, որը ստեղծում է տեքստի գույնի կոմունալ ծառայություններ (օրինակ՝ .text-purple-500
)՝ օգտագործելով վերը նշված քայլերը:
@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";
Սա կստեղծի նոր .text-{color}-{level}
կոմունալ ծառայություններ յուրաքանչյուր գույնի և մակարդակի համար: Նույնը կարող եք անել նաև ցանկացած այլ կոմունալ և գույքի համար: