Vor Kurzem habe ich das Frontend-Framework Bootstrap kurz vorgestellt. Heute möchte ich näher auf die Responsive-Eigenschaften eingehen und kurz erklären, wie man diese aktiviert.
In der Standard-Version hat ein Bootstrap Layout eine feste Breite von 960px. Erst wenn man die CSS-Datei bootstrap-responsive.css mit im Header einbindet, fängt die Webseite an sich automatisch an die Größe anzupassen. Die automatische Anpassung erfolgt über CSS Media-Queries. Es werden folgende Auflösungen unterstützt: kleiner 480px Breite, kleiner 767px Breite, größer 786px Breite, größer 980px Breite und größer 1200px Breite.
An dieser Beispiel-Seite lässt ich gut erkennen, wie die Seite sich an verschiedene Auflösungen anpasst. Mehr zu den Responsive Eigenschaften von Bootstrap findet man in der Dokumentation.