Componenten

Basisklassen

De componenten van Bootstrap zijn grotendeels gebouwd volgens een basis-modifier-naamgeving. We groeperen zo veel mogelijk gedeelde eigenschappen in een basisklasse, zoals .btn, en groeperen daarna de individuele stijlen voor elke variant in modifier-klassen, zoals .btn-primary of .btn-success.

Om onze modifier-klassen te bouwen gebruiken we @each-loops van Sass om over een Sass-map te itereren. Dat is vooral handig om varianten van een component te genereren op basis van onze $theme-colors en om responsieve varianten voor elk breakpoint te maken. Wanneer je deze Sass-maps aanpast en opnieuw compileert, zie je je wijzigingen automatisch in deze loops terug.

Bekijk onze documentatie over Sass-maps en -loops om te zien hoe je deze loops aanpast en de basis-modifier-aanpak van Bootstrap naar je eigen code uitbreidt.

Modifiers

Veel componenten van Bootstrap zijn gebouwd volgens een basis-modifier-klasse-aanpak. Dat betekent dat het gros van de styling in een basisklasse zit (bijv. .btn), terwijl stijlvariaties beperkt blijven tot modifier-klassen (bijv. .btn-danger). Deze modifier-klassen worden opgebouwd uit de $theme-colors-map, waardoor het aantal en de naam van onze modifier-klassen eenvoudig aan te passen is.

Hier zijn twee voorbeelden van hoe we over de $theme-colors-map loopen om modifiers voor de componenten .alert en .list-group te genereren.

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

Standaardwaarden: zie scss/_list-group.scss in de Bootstrap-broncode.

Responsief

Deze Sass-loops zijn bovendien niet beperkt tot kleurenmaps. Je kunt er ook responsieve variaties van je componenten mee genereren. Neem bijvoorbeeld onze responsieve uitlijning van de dropdowns, waarbij we een @each-loop voor de Sass-map $grid-breakpoints combineren met een media query-include.

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

Pas je je $grid-breakpoints aan, dan gelden je wijzigingen voor alle loops die over die map itereren.

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

Voor meer informatie en voorbeelden over het aanpassen van onze Sass-maps en -variabelen verwijzen we je naar de Sass-sectie van de Grid-documentatie.

Je eigen componenten maken

We moedigen je aan deze richtlijnen over te nemen wanneer je met Bootstrap bouwt om je eigen componenten te maken. We hebben deze aanpak zelf uitgebreid naar de eigen componenten in onze documentatie en voorbeelden. Componenten zoals onze callouts zijn precies zo gebouwd als de meegeleverde componenten, met basis- en modifier-klassen.

<div class="callout">...</div>

In je CSS zou je iets als het volgende hebben, waarbij het gros van de styling via .callout gebeurt. De unieke stijlen per variant worden vervolgens via een modifier-klasse geregeld.

// Basisklasse
.callout {}

// Modifier-klassen
.callout-info {}
.callout-warning {}
.callout-danger {}

Bij de callouts is die unieke styling niet meer dan een border-left-color. Wanneer je die basisklasse met een van die modifier-klassen combineert, krijg je je complete componentfamilie: