Kolore
Bootstrap-ek gure estiloak eta osagaiak gaitzen dituen kolore-sistema zabal batek onartzen du. Horrek edozein proiekturako pertsonalizazio eta hedapen zabalagoak ahalbidetzen ditu.
Gaiaren koloreak
Kolore guztien azpimultzo bat erabiltzen dugu kolore-eskemak sortzeko kolore-paleta txikiagoa sortzeko, Sass aldagai gisa eta Sass mapa Bootstrap-en scss/_variables.scss
fitxategian ere eskuragarri.
Kolore horiek guztiak Sass mapa gisa daude eskuragarri $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ikusi gure Sass maps and loops dokumentuak kolore hauek nola aldatu jakiteko.
Kolore guztiak
Bootstrap kolore guztiak Sass aldagai gisa eta Sass mapa gisa eskuragarri daude scss/_variables.scss
fitxategian. Fitxategien tamaina handitzea ekiditeko, ez ditugu testu- edo atzeko planoko kolore-klaserik sortzen aldagai horietako bakoitzarentzat. Horren ordez, kolore horien azpimultzo bat aukeratzen dugu gai-paleta baterako .
Ziurtatu kontraste-erlazioak kontrolatzen dituzula koloreak pertsonalizatzen dituzun bitartean. Behean erakusten den moduan, hiru kontraste-erlazio gehitu dizkiogu kolore nagusi bakoitzari: bat laginaren uneko koloreetarako, bat zuriaren aurkakoa eta bestea beltzaren aurkakoa.
Sass-i buruzko oharrak
Sassek ezin du programazioz aldagairik sortu, beraz, eskuz sortu ditugu geuk tonu eta tonu bakoitzerako aldagaiak. Erdiko puntuaren balioa zehazten dugu (adibidez, $blue-500
) eta kolore-funtzio pertsonalizatuak erabiltzen ditugu gure koloreak tindatzeko (argitzeko) edo itzaltzeko (iluntzeko) Sassen mix()
kolore funtzioaren bidez.
Erabiltzea mix()
ez da berdina lighten()
eta darken()
—lehenak zehaztutako kolorea zuriarekin edo beltzarekin nahasten du, bigarrenak, berriz, kolore bakoitzaren argitasunaren balioa soilik doitzen du. Emaitza kolore multzo askoz osatuagoa da, CodePen demo honetan erakusten den bezala .
Gure tint-color()
eta shade-color()
funtzioak mix()
gure $theme-color-interval
aldagaiarekin batera erabiltzen dira, ekoizten dugun kolore misto bakoitzeko portzentaje-balio mailakatu bat zehazten duena. Ikusi scss/_functions.scss
eta scss/_variables.scss
fitxategiak iturburu-kode osoa ikusteko.
Kolore Sass mapak
Bootstrap-en iturburuko Sass fitxategiek hiru mapa biltzen dituzte kolore-zerrenda eta haien balio hexadezikoen gainean azkar eta erraz errepasatzen laguntzeko.
$colors
gure eskuragarri dauden oinarrizko (500
) kolore guztiak zerrendatzen ditu$theme-colors
semantikoki izendatzen diren gai-kolore guztiak zerrendatzen ditu (behean erakusten dira)$grays
grisen tonu eta tonu guztiak zerrendatzen ditu
-ren barruan scss/_variables.scss
, Bootstrap-en kolore-aldagaiak eta Sass mapa aurkituko dituzu. $colors
Hona hemen Sass maparen adibide bat :
$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
);
Gehitu, kendu edo aldatu balioak mapan, beste osagai askotan nola erabiltzen diren eguneratzeko. Zoritxarrez, momentu honetan, osagai guztiek ez dute Sass mapa hau erabiltzen. Etorkizuneko eguneraketak hori hobetzen ahaleginduko dira. Ordura arte, planifikatu ${color}
aldagaiak eta Sass mapa hau erabiltzeko.
Adibidea
Hona hemen nola erabil ditzakezun zure Sass-en:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Kolore eta atzeko planoko erabilgarritasun klaseak ere eskuragarri daude kolore-balioak ezartzeko color
eta background-color
erabiltzeko .500
Utilitateak sortzea
v5.1.0 bertsioan gehitu da
Bootstrap-ek ez ditu kolore-aldagai guztientzako erabilgarritasunik, baina zuk zeuk sor ditzakezu gure utilitateen APIarekincolor
eta v5.1.0-n gehitutako Sass mapa hedatuak.background-color
- Hasteko, ziurtatu gure funtzioak, aldagaiak, nahasketak eta utilitateak inportatu dituzula.
- Erabili gure
map-merge-multiple()
funtzioa Sass mapa anitz azkar batzeko mapa berri batean. - Batu mapa konbinatu berri hau
{color}-{level}
klase-izen batekin edozein utilitate zabaltzeko.
.text-purple-500
Hona hemen goiko urratsak erabiliz testu-kolorearen erabilgarritasunak sortzen dituen adibide bat (adibidez, ).
@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";
Honek erabilgarritasun berriak sortuko .text-{color}-{level}
ditu kolore eta maila guztietarako. Gauza bera egin dezakezu beste edozein erabilgarritasun eta jabetzarekin ere.