Bootstrap-Übersicht
Bootstrap ist ein Front-End-Framework, das Ihnen beim Entwerfen von Webschnittstellen mit vorgefertigten CSS- und JavaScript-Komponenten für gängige Elemente wie Navigation, Formulare und Schaltflächen hilft. Es verfügt außerdem über ein responsives Rasterlayoutsystem, das Ihre Website an Geräte mit unterschiedlichen Bildschirmgrößen, wie Telefone und Tablets, anpasst. Durch Verwenden des Bootstrap-Layoutsystems können Sie eine einzelne Website erstellen, die auf jeden Gerät gut aussieht, das Ihre Kundschaft möglicherweise verwendet.
Power Pages-Vorlagen verwenden standardmäßige Bootstrap-Komponenten mit minimalen benutzerdefinierten Stilen. Mit diesen Vorlagen können Sie das Design (Schriftarten, Farben usw.) ganz einfach ändern, um es auf Ihrer gesamten Website konsistent an Ihre Marke und Ihre Vorlieben anzupassen.
Power Pages unterstützt die Bootstrap-Version 3.3.6 und Bootstrap-Version 5. Bootstrap-Version 5 bietet verbesserte User Experience(UX)-Funktionen und neue Komponenten wie Accordion, Offcanvas und RTL-Unterstützung.
Für neue Power Pages-Websites müssten Sie Bootstrap-Version 5 in Ihrer Umgebung einrichten. Sie können auch Ihre vorhandenen Websites mit Bootstrap-Version 3 auf Version 5 migrieren.
Bootstrap anpassen
Um Bootstrap anzupassen, ändern Sie die Werte der Variablen und laden dann eine Bootstrap-Version herunter, die mit Ihren benutzerdefinierten Werten kompiliert wurde.
Die Stärke von Bootstrap-Variablen besteht darin, dass sie alle Stile im Framework definieren, nicht nur ein Element. Die Variable @font-size-base gibt beispielsweise die Standardgröße des Texts auf Ihrer Website an – Haupttext, Überschriften und alle anderen Textelemente. Eine H1-Überschrift könnte als 300 Prozent von @font-size-base definiert werden. Indem Sie diese Variable festlegen, steuern Sie die gesamte typografische Skala Ihrer Website auf eine einheitliche Weise.
Sie können eine benutzerdefinierte Version von Bootstrap über die offizielle Bootstrap-Website erstellen oder eine Website eines Drittanbieters verwenden, die möglicherweise eine einfachere Schnittstelle oder vorgefertigte Designs bietet. Auf der offiziellen Bootstrap-Website für Anpassungen finden Sie weitere Informationen zur Anpassung von Bootstrap.
Wenn Sie eine angepasste Version von Bootstrap herunterladen, weist sie die folgende Verzeichnisstruktur auf:
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
Je nach der von Ihnen verwendeten Anpassungs-Anwendung enthält die Verzeichnisstruktur möglicherweise nur bootstrap.min.css. Dies ist die Datei, die Ihre Anpassungen enthält. Die anderen Dateien sind für alle benutzerdefinierten Versionen von Bootstrap gleich und auf Ihrer Website bereits enthalten.