Langi
Bootstrap ezali soutenu na système ya couleur ya monene oyo ezo thème ba styles na ba composants na biso. Yango epesaka nzela ya kosala personnalisation mpe extension ya mobimba mingi mpo na projet nyonso.
Ba couleurs ya thème
Tosalelaka sous-ensemble ya ba couleurs nionso pona kosala palette ya couleur ya moke pona ko générer ba schemes ya couleur, oyo ezali pe lokola ba variables ya Sass pe carte ya Sass na scss/_variables.scss
fichier ya Bootstrap.
Ba couleurs oyo nionso ezali lokola carte ya Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Tala ba cartes na biso ya Sass na ba docs ya ba boucles pona ndenge ya ko modifier ba couleurs oyo.
Ba couleurs nionso
Ba couleurs nionso ya Bootstrap ezali lokola ba variables ya Sass na carte ya Sass na scss/_variables.scss
fichier. Mpo na koboya bomati ya bonene ya ba fisyé, tosalaka te bakelasi ya makomi to ya langi ya nsima mpo na moko na moko ya ba variables oyo. Na esika ya kosala bongo, toponaka mwa ndambo ya balangi yango mpo na palette moko ya motó ya likambo .
Bozala sûr ya ko surveiller ba rapports ya contraste tango bozali ko personnaliser ba couleurs. Ndenge emonisami awa na nse, tobakisi ba rapports misato ya bokeseni na moko na moko ya balangi ya minene —moko mpo na balangi ya lelo ya swatch, moko mpo na contre blanc, mpe moko mpo na contre noir.
Banote na ntina na Sass
Sass ekoki ko produire programmatiquement ba variables te, yango wana tosalaki manuellement ba variables pona teinture nionso na ombre biso moko. Tolakisaka valeur ya point milieu (par exemple, $blue-500
) pe tosalelaka ba fonctions ya couleur personnalisée pona ko teindre (ko éclaircir) to ko shader (ko noir) ba couleurs na biso via mix()
fonction ya couleur ya Sass.
Kosalela mix()
ezali ndenge moko te na lighten()
mpe darken()
—oyo ya liboso esangisaka langi oyo emonisami na mpɛmbɛ to moindo, nzokande oyo ya nsuka ebongisaka kaka motuya ya pɛpɛlɛ ya langi mokomoko. Résultat ezali suite ya ba couleurs ya mobimba mingi koleka, ndenge elakisami na démonstration oyo ya CodePen .
Ba fonctions na biso tint-color()
mpe shade-color()
esalelaka mix()
pembeni ya $theme-color-interval
variable na biso, oyo elakisaka valeur ya pourcentage ya ba étapes mpo na couleur moko na moko ya mélangée oyo tobimisaka. Tala ba fisyé scss/_functions.scss
mpe scss/_variables.scss
mpo na koyeba code source mobimba.
Ba cartes ya Sass ya couleur
Ba fichiers Sass ya source ya Bootstrap ezali na ba cartes misato mpo na kosalisa yo noki mpe na pete kosala boucle likolo ya liste ya ba couleurs mpe ba valeurs hex na yango.
$colors
ezali na liste ya ba couleurs na biso nionso ya base (500
) oyo ezali$theme-colors
ezali na liste ya balangi nyonso ya motó ya likambo oyo ezali na nkombo na ndenge ya sémantique (elakisami awa na nse)$grays
ezali na liste ya ba teintures mpe ba nuances nionso ya gris
Na kati scss/_variables.scss
ya , okokuta ba variables ya couleur ya Bootstrap na carte ya Sass. Tala ndakisa ya $colors
karte 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
);
Bakisa, longola, to bongisa ba valeurs na kati ya carte mpo na ko actualiser ndenge nini esalelamaka na ba composants misusu ebele. Malheureusement na moment oyo, composant nionso te e utiliser carte oyo ya Sass. Ba mises à jour oyo ekoya ekosala makasi mpo na kobongisa likambo oyo. Kino tango wana, sala plan ya kosalela ba ${color}
variables na carte oyo ya Sass.
Ndakisa
Tala ndenge okoki kosalela oyo na Sass na yo:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Ba classes ya utilité ya couleur na fond ezali pe pona ko setting color
pe background-color
kosalela ba 500
valeurs ya couleur.
Kosala ba utilités
Ebakisami na v5.1.0
Bootstrap ezali na te color
mpe background-color
ba utilitaires mpo na variable ya couleur nionso, kasi okoki kobimisa oyo yo moko na API na biso ya utilitaires mpe ba cartes na biso ya Sass oyo epanzani oyo ebakisami na v5.1.0.
- Mpo na kobanda, sala ete okɔtisa ba fonctions na biso, ba variables, ba mixins, mpe ba utilitaires na biso.
- Salelá
map-merge-multiple()
mosala na biso mpo na kosangisa nokinoki bakarte mingi ya Sass esika moko na karte ya sika. - Sangisa carte oyo ya sika oyo esangisami mpo na koyeisa monene utilitaire nionso na
{color}-{level}
kombo ya classe.
Tala ndakisa oyo ebimisaka ba utilitaires ya couleur ya texte (par exemple, .text-purple-500
) na kosalelaka ba étapes oyo ezali likolo.
@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";
Yango ekobimisa ba .text-{color}-{level}
utilitaires ya sika mpo na couleur mpe niveau nionso. Okoki kosala mpe bongo mpo na utilité mpe biloko mosusu nyonso lokola.