Kleur
Bootstrap wordt ondersteund door een uitgebreid kleurensysteem dat onze stijlen en componenten thema's geeft. Dit maakt uitgebreidere aanpassingen en uitbreidingen voor elk project mogelijk.
Thema kleuren
We gebruiken een subset van alle kleuren om een kleiner kleurenpalet te creëren voor het genereren van kleurenschema's, ook beschikbaar als Sass-variabelen en een Sass-kaart in het scss/_variables.scss
bestand van Bootstrap.
Al deze kleuren zijn verkrijgbaar als Sass-kaart, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Bekijk onze Sass-kaarten en loops-documenten voor het wijzigen van deze kleuren.
Alle kleuren
Alle Bootstrap-kleuren zijn beschikbaar als Sass-variabelen en een Sass-kaart in scss/_variables.scss
bestand. Om grotere bestandsgroottes te voorkomen, maken we geen tekst- of achtergrondkleurklassen voor elk van deze variabelen. In plaats daarvan kiezen we een subset van deze kleuren voor een themapalet .
Zorg ervoor dat u de contrastverhoudingen in de gaten houdt terwijl u kleuren aanpast. Zoals hieronder wordt weergegeven, hebben we drie contrastverhoudingen toegevoegd aan elk van de hoofdkleuren: één voor de huidige kleuren van het staal, één voor tegen wit en één voor tegen zwart.
Opmerkingen over Sass
Sass kan geen variabelen programmatisch genereren, dus we hebben zelf handmatig variabelen gemaakt voor elke tint en tint. We specificeren de middelpuntwaarde (bijv. $blue-500
) en gebruiken aangepaste kleurfuncties om onze kleuren te tinten (lichter) of schaduw (donkerder) te maken via de kleurfunctie van Sass mix()
.
Gebruik mix()
is niet hetzelfde als lighten()
en darken()
—de eerste mengt de opgegeven kleur met wit of zwart, terwijl de laatste alleen de helderheidswaarde van elke kleur aanpast. Het resultaat is een veel completere reeks kleuren, zoals te zien is in deze CodePen-demo .
Onze tint-color()
en shade-color()
functies gebruiken mix()
naast onze $theme-color-interval
variabele, die een getrapte procentuele waarde specificeert voor elke gemengde kleur die we produceren. Zie de scss/_functions.scss
en scss/_variables.scss
bestanden voor de volledige broncode.
Sass-kaarten in kleur
De Sass-bronbestanden van Bootstrap bevatten drie kaarten waarmee u snel en gemakkelijk een lijst met kleuren en hun hexadecimale waarden kunt doorlopen.
$colors
geeft al onze beschikbare basiskleuren (500
) weer$theme-colors
geeft een overzicht van alle themakleuren met semantische namen (hieronder weergegeven)$grays
somt alle tinten en grijstinten op
Binnen scss/_variables.scss
vindt u de kleurvariabelen van Bootstrap en de Sass-kaart. Hier is een voorbeeld van de $colors
Sass-kaart:
$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
);
Voeg waarden toe, verwijder of wijzig waarden binnen de kaart om bij te werken hoe ze in veel andere componenten worden gebruikt. Helaas maakt op dit moment niet elk onderdeel gebruik van deze Sass-kaart. Toekomstige updates zullen ernaar streven dit te verbeteren. Maak tot die tijd gebruik van de ${color}
variabelen en deze Sass-kaart.
Voorbeeld
Hier leest u hoe u deze in uw Sass kunt gebruiken:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Er zijn ook hulpprogrammaklassen voor kleur en achtergrondcolor
beschikbaar voor het instellen en background-color
gebruiken van de 500
kleurwaarden.
Hulpprogramma's genereren
Toegevoegd in v5.1.0
Bootstrap bevat geen hulpprogramma color
's background-color
voor elke kleurvariabele, maar u kunt deze zelf genereren met onze hulpprogramma-API en onze uitgebreide Sass-kaarten die zijn toegevoegd in v5.1.0.
- Zorg er om te beginnen voor dat je onze functies, variabelen, mixins en utilities hebt geïmporteerd.
- Gebruik onze
map-merge-multiple()
functie om snel meerdere Sass-kaarten samen te voegen in een nieuwe kaart. - Voeg deze nieuwe gecombineerde kaart samen om elk hulpprogramma uit te breiden met een
{color}-{level}
klassenaam.
Hier is een voorbeeld dat hulpprogramma's voor tekstkleur genereert (bijv. .text-purple-500
) met behulp van de bovenstaande stappen.
@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";
Dit genereert nieuwe .text-{color}-{level}
hulpprogramma's voor elke kleur en elk niveau. U kunt hetzelfde doen voor elk ander hulpprogramma en eigendom.