Delen via


Bootstrap-overzicht

Bootstrap is een front-endframework waarmee u webinterfaces kunt ontwerpen met kant-en-klare CSS- en JavaScript-onderdelen voor gemeenschappelijke elementen zoals navigatie, formulieren en knoppen. Het heeft ook een responsief rasterlay-outsysteem dat uw site aanpast voor apparaten met verschillende schermformaten, zoals telefoons en tablets. Door gebruik te maken van het Bootstrap-lay-outsysteem, kunt u een enkele site maken die er goed uitziet op alle apparaten die uw klanten mogelijk gebruiken.

Power Pages-sjablonen gebruiken standaard Bootstrap-onderdelen met minimale aangepaste stijlen. Met behulp van deze sjablonen kunt u eenvoudig het thema (lettertypen, kleuren enz.) wijzigen, zodat het consistent aansluit bij uw merk en voorkeuren op de hele site.

Power Pages ondersteunt Bootstrap versie 3.3.6 en Bootstrap versie 5. Bootstrap versie 5 biedt verbeterde gebruikerservaringsfuncties (UX) en nieuwe onderdelen zoals accordeon-, offcanvas- en RTL-ondersteuning.

Voor nieuwe Power Pages-sites moet u Bootstrap versie 5 instellen in uw omgeving. U kunt ook uw bestaande Bootstrap-websites van versie 3 migreren naar versie 5.

Bootstrap aanpassen

Als u Bootstrap wilt aanpassen, wijzigt u de waarden van variabelen en downloadt u vervolgens een versie van Bootstrap die is gecompileerd op basis van uw aangepaste waarden.

De kracht van Bootstrap-variabelen is dat ze alle stijlen in het framework definiëren, en niet slechts één element. De variabele @font-size-base specificeert bijvoorbeeld de standaardgrootte van de tekst op uw site: hoofdtekst, kopteksten en alle andere tekstelementen. Een H1-kop kan worden gedefinieerd als 300 procent van @font-size-base. Door deze ene variabele in te stellen, bepaalt u de gehele typografische schaal van uw website op consistente wijze.

U kunt een aangepaste versie van Bootstrap maken via de officiële Bootstrap-site of een site van derden gebruiken die mogelijk een eenvoudiger interface of vooraf ontworpen thema's biedt. De officiële Bootstrap-aanpassingssite bevat meer informatie over Bootstrap-aanpassing.

Als u een aangepaste versie van Bootstrap downloadt, bevat deze de volgende mapstructuur:

css/
    |-- bootstrap.min.css 
img/
    |-- glyphicons-halflings-white.png 
    |-- glyphicons-halflings.png 
js/ 
    |-- bootstrap.min.js

Afhankelijk van de aanpassingstoepassing die u hebt gebruikt, kan de directorystructuur ook alleen bootstrap.min.css bevatten. Dit is het bestand dat uw aanpassingen bevat. De overige bestanden zijn hetzelfde voor alle aangepaste versies van Bootstrap en zijn al opgenomen in uw website.

Volgende stappen

Zie ook