Hulpprogramma's voor lay-out

Voor een snellere mobielvriendelijke en responsieve ontwikkeling bevat Bootstrap tientallen hulpprogrammaklassen voor het weergeven, verbergen, uitlijnen en plaatsen van inhoud.

Veranderendisplay

Gebruik onze weergavehulpprogramma's voor het snel wisselen van algemene waarden van de displayeigenschap. Combineer het met ons rastersysteem, inhoud of componenten om ze in specifieke viewports te tonen of te verbergen.

Flexbox-opties

Bootstrap 4 is gebouwd met flexbox, maar niet elk element displayis gewijzigd, display: flexomdat dit veel onnodige overschrijvingen zou toevoegen en onverwacht het belangrijkste browsergedrag zou veranderen. De meeste van onze componenten zijn gebouwd met flexbox ingeschakeld.

Als je display: flexiets aan een element moet toevoegen, doe dat dan met .d-flexof een van de responsieve varianten (bijv. .d-sm-flex). Je hebt deze klasse of displaywaarde nodig om het gebruik van onze extra flexbox-hulpprogramma's voor dimensionering, uitlijning, spatiëring en meer toe te staan.

Marge en opvulling

Gebruik de marginen padding spacing-hulpprogramma's om te bepalen hoe elementen en componenten worden verdeeld en gedimensioneerd. Bootstrap 4 bevat een schaal met vijf niveaus voor spatiëringshulpprogramma's, gebaseerd op een 1remstandaardwaardevariabele $spacer. Kies waarden voor alle viewports (bijv. .mr-3voor margin-right: 1rem), of kies responsieve varianten om specifieke viewports te targeten (bijv. .mr-md-3om te margin-right: 1rembeginnen bij het mdbreekpunt).

Schakelaarvisibility

Als omschakelen displayniet nodig is, kunt u visibilityvan een element wisselen met onze zichtbaarheidshulpprogramma's . Onzichtbare elementen hebben nog steeds invloed op de lay-out van de pagina, maar worden visueel verborgen voor bezoekers.