Kleuren

Kleuren

Kleur tekst in met kleur-utilities. Wil je links inkleuren, gebruik dan de .link-*-hulpklassen, die :hover- en :focus-states hebben.

<p class="text-primary bg-
<p class="text-secondary bg-
<p class="text-success bg-
<p class="text-danger bg-
<p class="text-warning bg-
<p class="text-info bg-
<p class="text-light bg-
<p class="text-dark bg-">.text-</p>


<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Dekking

Nieuw in v5.1.0

Sinds v5.1.0 worden tekstkleur-utilities met Sass gegenereerd via CSS-variabelen. Dat maakt kleurwijzigingen in realtime mogelijk zonder compilatie, plus dynamische aanpassingen van de alfatransparantie.

Hoe het werkt

Neem onze standaard .text-primary-utility.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

We gebruiken een RGB-versie van onze CSS-variabele --bs-primary (met de waarde 13, 110, 253) en koppelen daar een tweede CSS-variabele aan, --bs-text-opacity, voor de alfatransparantie (met standaardwaarde 1 dankzij een lokale CSS-variabele). Dat betekent dat wanneer je nu .text-primary gebruikt, je berekende color-waarde rgba(13, 110, 253, 1) is. De lokale CSS-variabele binnen elke .text-*-klasse voorkomt overervingsproblemen, zodat geneste instanties van de utilities niet automatisch een aangepaste alfatransparantie krijgen.

Voorbeeld

Om die dekking te wijzigen, overschrijf je --bs-text-opacity via eigen stijlen of inline stijlen.

<div class="text-primary">Dit is de standaard primary-tekst</div>
<div class="text-primary" style="--bs-text-opacity: .5;">Dit is primary-tekst met 50% dekking</div>

Of kies een van de .text-opacity-utilities:

<div class="text-primary">Dit is de standaard primary-tekst</div>
<div class="text-primary text-opacity-75">Dit is primary-tekst met 75% dekking</div>
<div class="text-primary text-opacity-50">Dit is primary-tekst met 50% dekking</div>
<div class="text-primary text-opacity-25">Dit is primary-tekst met 25% dekking</div>

Specificiteit

Soms kunnen contextuele klassen niet worden toegepast vanwege de specificiteit van een andere selector. In sommige gevallen is een afdoende oplossing om de content van je element in een <div> of een semantischer element met de gewenste klasse te wikkelen.

Sass

Lees naast de volgende Sass-functionaliteit ook over onze meegeleverde CSS custom properties (oftewel CSS-variabelen) voor kleuren en meer.

Variabelen

De meeste color-utilities worden gegenereerd door onze themakleuren, die opnieuw worden toegekend vanuit onze generieke kleurpaletvariabelen.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Ook grijstinten zijn beschikbaar, maar slechts een deel daarvan wordt gebruikt om utilities te genereren.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Map

Themakleuren worden vervolgens in een Sass-map gezet, zodat we eroverheen kunnen loopen om onze utilities, componentmodifiers en meer te genereren.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Grijstinten zijn ook als Sass-map beschikbaar. Deze map wordt niet gebruikt om utilities te genereren.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

RGB-kleuren worden gegenereerd uit een aparte Sass-map:

Standaardwaarden: zie scss/_maps.scss in de Bootstrap-broncode.

En kleurdekkingen bouwen daarop voort met hun eigen map die door de utilities-API wordt gebruikt:

Standaardwaarden: zie scss/_maps.scss in de Bootstrap-broncode.

Utilities-API

Kleur-utilities worden gedeclareerd in onze utilities-API in scss/_utilities.scss. Leer hoe je de utilities-API gebruikt.

Standaardwaarden: zie scss/_utilities.scss in de Bootstrap-broncode.