Sa'y
Bootstrap oipytyvõ peteĩ sistema de colores amplio omoĩva tema ñande estilo ha componente-kuéra. Kóva ombokatupyry personalización ha extensión atyguasuvéva oimeraẽva proyecto-pe g̃uarã.
Umi colores de tema rehegua
Jaipuru peteĩ subconjunto opaite saꞌi rehegua jajapo hag̃ua peteĩ saꞌi saꞌi michĩvéva ñamoheñói hag̃ua esquema saꞌi rehegua, ojeguerekóva avei Sass mbaꞌekuaarã ramo ha peteĩ Sass mapa Bootstrap scss/_variables.scss
vore ryepýpe.
Opa ko’ã sa’y ojeguereko peteĩ mapa Sass ramo, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ehecháke ore Sass mapa ha bucle docs mba’éichapa ikatu remoambue ko’ã sa’y.
Opaite sa’ykuéra
Opaite Bootstrap saꞌi ojeguereko Sass mbaꞌekuaarã ramo ha peteĩ Sass mapa scss/_variables.scss
vore ryepýpe. Ani hag̃ua oñembohetave vore tuichakue, ndajajapói jehaipyre térã tapykuehoha saꞌi mboꞌepy peteĩteĩ koꞌã mbaꞌekuaarãme g̃uarã. Upéva rangue, jaiporavo peteĩ subconjunto ko’ã color-gui peteĩ paleta tema rehegua .
Ejesareko katuete umi relación de contraste rehe emohenda aja umi sa’y. Ohechaukaháicha koꞌape, romoĩkuri mbohapy relación contraste peteĩteĩ umi saꞌi tenondeguápe —peteĩva umi saꞌi koꞌag̃agua swatch rehegua, peteĩva morotĩva rehe ha peteĩva morotĩva rehe.
Notas sobre Sass rehegua
Sass ndaikatúi ogenera programáticamente umi variable, upévare rojapo manualmente umi variable opaite tinte ha sombra-pe g̃uarã orejehegui. Jaikuaauka pe valor punto medio rehegua (techapyrã, $blue-500
) ha jaipuru umi función color personalizada ñatintávo (ñamohesakã) térã ñamopytũ hag̃ua ñande colorkuéra Sass mix()
función color rupive.
Jepuru mix()
ndahaꞌei peteĩchagua lighten()
ha darken()
—pe peteĩha ombojeheꞌa pe saꞌi ojeꞌevaꞌekue morotĩ térã morotĩva ndive, ha ipahaguéva katu omohenda peteĩteĩva saꞌi valor tesape rehegua añoite. Pe resultado ha’e peteĩ suite hetaiteve hekoitépe umi sa’y rehegua, ojehechaukaháicha ko CodePen demostración -pe .
Ñande tint-color()
ha shade-color()
función oipuru mix()
ñande $theme-color-interval
variable ykére, ohechaukáva peteĩ valor porcentual escalonado peteĩteĩva color mixto jajapóvape g̃uarã. Ehecha umi scss/_functions.scss
ha scss/_variables.scss
vorekuéra kódigo fuente henyhẽva rehegua.
Mapas de color Sass rehegua
Bootstrap vore Sass ypykue oguereko mbohapy mapa nepytyvõ hag̃ua pyaꞌe ha ndahasýi ojejapo hag̃ua peteĩ lista saꞌi ha ivalór hexagonal rehegua.
$colors
omoĩ opaite ñande base (500
) colores ojeguerekóva$theme-colors
omoĩ opaite tema sa’y oñembohérava semánticamente (ojehechauka iguýpe) .$grays
omoĩ opaite tinte ha sombra gris rehegua
, ryepýpe scss/_variables.scss
, rejuhúta Bootstrap sa’y ñemoambue ha Sass mapa. Ko’ápe oĩ peteĩ techapyrã $colors
Sass mapa rehegua:
$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
);
Emoĩ, eipe’a térã emoambue mba’ekuaarã mapa ryepýpe embopyahu hag̃ua mba’éichapa ojepuru heta ambue componente-pe. Ñambyasy ko’ã momento-pe, ndaha’éi opaite componente oipurúva ko mapa Sass. Umi actualización oútava oñeha’ãta omoporãve ko mba’e. Upe peve, eplanea eipuru hagua umi ${color}
variable ha ko mapa Sass rehegua.
Tembiecharã
Ko’ápe ojehecha mba’éichapa ikatu reipuru ko’ãva nde Sass-pe:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Ojeguereko avei umi clase utilidad color ha fondocolor
rehegua oñemboguapy ha background-color
ojepuru hag̃ua umi 500
valor color rehegua.
Ogenera haguã servicios públicos
Oñemoĩve v5.1.0-pe
Bootstrap ndoikéiva color
ha background-color
utilidad opaite color variable-pe g̃uarã, ha katu ikatu emoheñói ko’ãva ndete voi ore utilidad API ha ore Sass mapa oñembotuicháva oñembojoapýva v5.1.0-pe.
- Eñepyrũ hag̃ua, eñangareko emoinge hague ore rembiaporã, mbaꞌekuaarã, mixin ha tembipururã.
- Eipuru ore
map-merge-multiple()
función embojoaju pyaꞌe hag̃ua heta Sass mapa oñondive peteĩ mapa pyahúpe. - Embojoaju ko mapa pyahu oñembojoajúva embohape hag̃ua oimeraẽva utilidad peteĩ
{color}-{level}
mbo’esyry réra reheve.
Ko’ápe oĩ peteĩ techapyrã omoheñóiva utilidad jehaipyre sa’y rehegua (techapyrã, .text-purple-500
) oipurúvo umi tembiaporã yvategua.
@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";
Péicha omoheñóita .text-{color}-{level}
utilidad pyahu opaite color ha nivel-pe g̃uarã. Ikatu rejapo upéicha avei oimeraẽ ambue utilidad ha propiedad rehe avei.