Rangi
Bootstrap inaauniwa na mfumo mpana wa rangi ambao unaangazia mitindo na vipengele vyetu. Hii inawezesha ubinafsishaji wa kina zaidi na ugani kwa mradi wowote.
Rangi za mandhari
Tunatumia kikundi kidogo cha rangi zote kuunda paji la rangi ndogo zaidi kwa ajili ya kutengeneza miundo ya rangi, inayopatikana pia kama vigeu vya Sass na ramani ya Sass katika scss/_variables.scss
faili ya Bootstrap.
Rangi hizi zote zinapatikana kama ramani ya Sass $theme-colors
,.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Angalia ramani zetu za Sass na loops hati za jinsi ya kurekebisha rangi hizi.
Rangi zote
Rangi zote za Bootstrap zinapatikana kama vigeu vya Sass na ramani ya Sass katika scss/_variables.scss
faili. Ili kuepuka kuongezeka kwa ukubwa wa faili, hatuundi maandishi au madarasa ya rangi ya usuli kwa kila moja ya vigeu hivi. Badala yake, tunachagua seti ndogo ya rangi hizi kwa paleti ya mandhari .
Hakikisha unafuatilia uwiano wa utofautishaji unapobadilisha rangi kukufaa. Kama inavyoonyeshwa hapa chini, tumeongeza uwiano tatu wa utofautishaji kwa kila moja ya rangi kuu—moja kwa rangi za sasa za saa, moja kwa dhidi ya nyeupe, na moja kwa dhidi ya nyeusi.
Vidokezo vya Sass
Sass haiwezi kutoa vigeuzo kiprogramu, kwa hivyo tulitengeneza vigeugeu kwa kila rangi na kivuli sisi wenyewe. Tunabainisha thamani ya sehemu ya katikati (km, $blue-500
) na kutumia vitendakazi maalum vya rangi ili kugeuza (kuangaza) au kutia kivuli (kutia giza) rangi zetu kupitia chaguo za mix()
kukokotoa za rangi za Sass.
Kutumia mix()
si sawa lighten()
na darken()
-ya kwanza inachanganya rangi iliyobainishwa na nyeupe au nyeusi, huku ya pili ikirekebisha tu thamani ya wepesi wa kila rangi. Matokeo yake ni safu kamili zaidi ya rangi, kama inavyoonyeshwa kwenye onyesho hili la CodePen .
Yetu tint-color()
na chaguo za shade-color()
kukokotoa hutumia mix()
pamoja na $theme-color-interval
kigezo chetu, ambacho hubainisha thamani ya asilimia iliyoongezwa kwa kila rangi iliyochanganywa tunayozalisha. Tazama scss/_functions.scss
na scss/_variables.scss
faili kwa msimbo kamili wa chanzo.
Ramani za Sass za rangi
Chanzo cha faili za Sass za Bootstrap zinajumuisha ramani tatu ili kukusaidia kwa haraka na kwa urahisi kutazama orodha ya rangi na thamani zake za heksi.
$colors
huorodhesha500
rangi zetu zote za msingi ( ) zinazopatikana$theme-colors
huorodhesha rangi zote za mandhari zilizopewa jina (zinazoonyeshwa hapa chini)$grays
huorodhesha rangi na vivuli vyote vya kijivu
Ndani scss/_variables.scss
ya , utapata tofauti za rangi za Bootstrap na ramani ya Sass. Hapa kuna mfano wa $colors
ramani ya 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
);
Ongeza, ondoa, au urekebishe thamani ndani ya ramani ili kusasisha jinsi zinavyotumika katika vipengele vingine vingi. Kwa bahati mbaya kwa wakati huu, si kila sehemu inayotumia ramani hii ya Sass. Sasisho za siku zijazo zitajitahidi kuboresha juu ya hili. Hadi wakati huo, panga kutumia ${color}
vigeuzo na ramani hii ya Sass.
Mfano
Hivi ndivyo unavyoweza kutumia hizi katika Sass yako:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Madarasa ya matumizi ya rangi na usuli pia yanapatikana kwa kuweka color
na background-color
kutumia 500
thamani za rangi.
Kuzalisha huduma
Imeongezwa katika v5.1.0
Bootstrap haijumuishi color
na background-color
huduma kwa kila utofauti wa rangi, lakini unaweza kujitengenezea hizi kwa kutumia API yetu ya matumizi na ramani zetu zilizopanuliwa za Sass zilizoongezwa katika v5.1.0.
- Ili kuanza, hakikisha kuwa umeleta vipengele vyetu vya kukokotoa, vigeu, vichanganyiko na huduma zetu.
- Tumia
map-merge-multiple()
utendaji wetu kuunganisha kwa haraka ramani nyingi za Sass pamoja katika ramani mpya. - Unganisha ramani hii mpya iliyounganishwa ili kupanua matumizi yoyote kwa
{color}-{level}
jina la darasa.
Hapa kuna mfano ambao hutoa huduma za rangi ya maandishi (kwa mfano, .text-purple-500
) kwa kutumia hatua zilizo hapo juu.
@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";
Hii itatoa .text-{color}-{level}
huduma mpya kwa kila rangi na kiwango. Unaweza kufanya vivyo hivyo kwa matumizi na mali nyingine yoyote pia.