Anzeige
Anzeige
UX & Design

Das bringt die neue Version des CSS-Frameworks: Bootstrap 3

Bootstrap ist eines der beliebtesten CSS-Frameworks, um mit vordefinierten CSS-Klassen und JavaScript-Modulen effizient Websites aufzubauen. Die neue Version 3 bringt weitreichende Neuerungen mit sich, die vor allem dem Mobile-First-Ansatz Rechnung tragen – aber auch Entwickler zum Umdenken zwingen.

7 Min.
Artikel merken
Anzeige
Anzeige

Die Vorteile eines CSS-Frameworks liegen auf der Hand: Elemente, die sich projektübergreifend wiederholen, aber dennoch immer wieder neu definiert werden müssen, liefert ein CSS-Framework wie Bootstrap als vorgefertigten Style. So hat man fast alles immer zur Hand, was man bei der Gestaltung einer Website benötigen könnte. Bootstrap ist mit mittlerweile über 56.000 Sternen und 19.000 Forks bei GitHub das wohl erfolgreichste CSS-Framework.

Anzeige
Anzeige

Das ursprünglich aus dem Hause Twitter stammende Framework erhielt vor kurzem ein massives Update und ist jetzt in der Version 3 zum Download verfügbar. Rund neun Monate dauerte die Entwicklung von Bootstrap 3. Dabei gab es über 2.700 Commits von 319 Entwicklern. Außerdem verringerte sich das minifizierte CSS um 20 Prozent – von 127 auf 97 Kilo-Byte. Daneben gibt es aber auch noch weitere, wichtige Neuerungen.

Bootstrap 3 liefert nun standardmäßig Flat-Design, verzichtet also auf plastische Effekte.
Bootstrap 3 liefert nun standardmäßig Flat-Design, verzichtet also auf plastische Effekte.

Minimalistisches Design

Bootstrap 3 zeigt sich zudem von einer flachen Seite: Die Buttons mit plastischen Effekten sind allesamt verschwunden und auch sonst machen alle Komponenten einen sehr minimalistischen und aufgeräumten Eindruck. Diese Entscheidung folgte dabei nicht etwa dem derzeitigen Flat-Design-Trend, sondern hatte pragmatischere Gründe: Wer bereits mit Bootstrap 2 gearbeitet hat weiß, dass man viele Komponenten aufgrund ihres vordefinierten Stils im eigenen Stylesheet anpassen musste. Diese vordefinierte Optik bringt zudem unnötige Kilobytes auf die Waage. Gut also, dass die klassische Bootstrap-Optik nun nicht mehr Bestandteil des Frameworks ist, sondern nur ein optionales Theme.

Anzeige
Anzeige

Mobile First, Always Responsive

Bootstrap 3 verfolgt nun zudem auch konsequent den Mobile-First-Ansatz. Das bedeutet, dass alle Komponenten so gebaut sind, dass sie zunächst für mobile Geräte optimiert sind. Mit steigender Viewport-Größe wachsen diese dann mit. Dies funktioniert zwar auch bei einem „normalen“ Responsive-Design-Ansatz. Beim Mobile-First-Ansatz konzentrieren sich die Entwickler jedoch zunächst auf mobile Geräte und entwickeln die Anwendung für eine optimale mobile Performance.

Anzeige
Anzeige

Während man die Responsive-Design-Funktionalität in Bootstrap 2 noch als separates Stylesheet einbinden musste, sind alle Elemente in Bootstrap 3 von Beginn an responsive. Was für viele Webworker eine angenehme Änderung ist, könnte für einige zum Problem werden. Aber auch nicht responsive Websites lassen sich weiterhin mit dem Framework realisieren. Hierfür muss der Entwickler lediglich einige Klassen anpassen und den Meta-Viewport aus dem Header des HTML-Dokuments entfernen. Details zu diesem Prozess finden sich im Abschnitt „Disabling Responsiveness“ auf der Website von Bootstrap [1]. Beim Einsatz von Grids und Navbars gestaltet sich die Anpassung jedoch etwas komplizierter. Bootstrap liefert auf seiner Website ein nicht responsives Beispiel für einen solchen Fall [2].

Box-Model und Grid System

Daneben hat Bootstrap ein Update für das Box-Modell erhalten. Wenn man einem Element eine Breite oder Höhe gibt und es zusätzlich mit einem Rahmen oder Innenabstand versieht, so ändert sich normalerweise auch die endgültige Größe des Elements. In Bootstrap 3 sind alle Elemente nun standardmäßig mit „box-sizing:border-box;“ ausgestattet, was dieses Render-Verhalten aushebelt. Das ermöglicht einfachere Größenangaben und ein verbessertes Grid-System.

Anzeige
Anzeige

Wie Bootstrap 2 enthält auch Version 3 ein Grid-System. Dieses lässt sich in bis zu 12 Spalten aufteilen, die sich dem Viewport beim Vergrößern anpassen. Hierfür kreierte Bootstrap vier Hilfsklassen, die das Grid an die unterschiedlichen Viewport-Größen der Geräte anpasst. Somit kann ein Grid-Element in den jeweiligen Media-Queries unterschiedliche
Spaltenbreiten haben, was flexiblere Layouts ermöglicht.

Grid-Element Viewport-Größe
Extra kleine Geräte weniger als 768 Pixel (.col-xs-*)
Kleine Geräte mehr als 768 Pixel (.col-sm-*)
Mittelgroße Geräte mehr als 992 Pixel (.col-md-*)
Große Geräte mehr als 1200 Pixel (.col-lg-*)

Von JavaScript bis Icon-Fonts

Um Probleme mit anderen JavaScript-Anwendungen zu vermeiden, enthält Bootstrap 3 komplett umgeschriebene Plugins und Namespaces. Dies reduziert das Risiko, dass Skripte von Drittherstellern in Konflikt mit Bootstrap-Funktionen stehen und die Funktionsweise der Bootstrap-Komponenten beeinflussen oder sogar komplett verhindern.

Außerdem ersetzt in Bootstrap 3 ein eigener Icon-Font die alten PNG-Icons. Icon-Fonts haben viele Vorteile, die Bild-Icons aus technischer Sicht nicht bieten können. So kann man zum Beispiel ohne große Umstände die Farbe der Icons via CSS ändern, ohne ein Bildbearbeitungsprogramm bemühen zu müssen. Da Icon-Fonts auf Vektoren basieren, lassen sie sich verlustfrei skalieren und verbrauchen im Vergleich zu größeren CSS-Sprites deutlich weniger Platz. Das Glyphicon getaufte Set enthält in Bootstrap 3 außerdem 40 neue Symbole.

Anzeige
Anzeige
Ein Icon-Font ersetzt in Bootstrap 3 die alten PNG-Icons. Das spart Zeit und Dateigröße.
Ein Icon-Font ersetzt in Bootstrap 3 die alten PNG-Icons. Das spart Zeit und Dateigröße.

Navigationsleiste und Modale Dialoge

Die Navigationsleiste ist nun – wie alle Komponenten von Bootstrap – von Beginn an responsive und beinhaltet einige nützliche Subkomponenten wie Dropdowns, Buttons und Text-Klassen. Daneben liefert Bootstrap 3 komplett überarbeitete Modale Dialoge: Sie nehmen nun die komplette Höhe des Viewports ein, anstatt sich auf eine festgelegte Maximalhöhe zu beschränken. Damit lassen sich die Dialoge besser an mobile Geräte anpassen und sind leichter zu bedienen.

Listen und Panels

Neu dazugekommen sind die Listen und Panels. Die sogenannten „List Groups“ sind flexible Komponenten für die Darstellung von Listen. Die grundlegendste Implementierung ist der Einsatz mit einer sogenannten „Unordered List“. Mit Hilfe der Badges-Komponente lässt sich ein Badge an der rechten Seite des Listen-Elements hinzufügen.

Listen lassen sich per List Groups miteinander verknüpfen. Hierfür definiert man sie mit einem DIV. Anchor-Tags und entsprechende Klassen stellen dann eine Verbindung her. Die Inhalte von List Groups sind nicht auf Texte beschränkt. Sie können jegliches HTML enthalten und sind somit sehr vielfältig einsetzbar.

Anzeige
Anzeige
Die Contents einer List Group sind nicht auf Texte beschränkt, sondern können auch jegliches HTML enthalten.
Die Contents einer List Group sind nicht auf Texte beschränkt, sondern können auch jegliches HTML enthalten.

Das neue Panel ist eine zusätzliche Hilfskomponente, die den Content in einer Box verstaut. Mit der .panel-Klasse erhalten Container zunächst einen Border und ein Padding. Die Klasse .panel-heading erstellt eine Überschrift für das Panel. Möglich sind h1- bis h6-Headlines, die lediglich mit der .panel-title-Klasse gekennzeichnet sein müssen. Mit dem .panel-footer erhält das Panel ein abschließendes Element, das sich mit Texten, Links und Buttons versehen lässt. Mit den Kontext-Klassen von Bootstrap kann man Panels zudem hervorheben und mit einer zusätzlichen Bedeutung versehen.

Panels können außerdem Tabellen und List Groups enthalten und eignen sich somit als gut einsetzbare Informationskomponente. Einige Komponenten hat Bootstrap beim Redesign seines Frameworks jedoch auch gestrichen. Das Collapsible Panel – eine Erweiterung der neuen Panels – hat zum Beispiel das Accordion ersetzt. Auch die Submenü- und Typehead-Komponente ist zusammen mit einigen kleineren Komponenten entfallen.

Customizer

Wie sein Vorgänger lässt sich auch Bootstrap 3 mit Hilfe eines Customizers anpassen: So können Entwickler zum Beispiel eigene Werte für die Variablen der auf LESS basierten Stylesheets definieren oder nicht benötigte Komponenten ausklammern und so Dateigröße einsparen.

Anzeige
Anzeige

Den Kompilierungsprozess hat Bootstrap nach eigenen Aussagen deutlich verbessert: Die Berechnungen finden ab sofort im Browser statt. Auch bei der Handhabung von Abhängigkeiten sollen fehlerhafte Custom-Builds der Vergangenheit angehören. Alle Customizations speichert Bootstrap 3 als anonymen Gist und stellt sie für den späteren Download bereit.

Dokumentation ist King

Auch die Dokumentation haben die Bootstrap-Entwickler aufgebohrt. Sie enthält nun nicht nur Informationen zu den Komponenten und Klassen von Bootstrap, sondern auch zum Thema Browser-Support inklusive Tipps zu Bugs, Fallstricken beim Einsatz von Bootstrap und einige Work-Arounds. Den Support von Legacy-Browsern hat Bootstrap mit Version 3 eingeschränkt. Um responsive Websites im Internet Explorer 8 realisieren und Media-Queries verarbeiten zu können, benötigen Entwickler daher respond.js. Für die optimale Darstellung muss man den Kompatibilitätsmodus des IE8 blockieren.

Für die Migration von Bootstrap 2 auf Version 3 liefert die Dokumentation einen umfassenden Guide mitsamt einer Liste aller veränderten Klassen.

Anzeige
Anzeige

Fazit: Lohnt sich die Portierung?

Für Redesigns bietet das neue und schlanke Bootstrap 3 mit seinen zahlreichen
Neuerungen wie erwartet eine solide Grundlage, um spannende und flexible
Designs zu erzeugen. Die Portierung von Bootstrap 2 auf Version 3 ist jedoch ein hartes Stück Arbeit. Selbst wenn die Website komplett auf den Bootstrap-Klassen basiert und keine eigenen Anpassungen enthält, dürfte ein Update viel Zeit in Anspruch nehmen.

Im Internet kursieren zahlreiche Erweiterungen für die Bootstrap-Komponenten, die sich auch weiterhin auf die Funktionsweise von Bootstrap 2 verlassen. Eine Portierung bestehender Projekte auf Bootstrap 3 ist somit nicht unbedingt notwendig – zumal sich die Vorgängerversion Bootstrap 2.3.2 immer noch herunter
laden lässt und auch die Dokumentation weiterhin zur Verfügung steht. Lediglich
die URL hat sich durch das Erscheinen von Bootstrap 3 geändert [3].

Bootstrap 3 ist ein notwendiger Schritt, der den Marktentwicklungen Rechnung trägt: Der Mobile-First-Ansatz bedient die gestiegenen Ansprüche an die Performance mobiler Websites. Gewohnheitstiere könnten jedoch Probleme mit dem Umstieg auf die neue Version haben. Mit etwas Bootstrap-Erfahrung findet man sich zwar zurecht – die im Kopf verankerten Klassen und Konventionen durch die neuen zu ersetzen, wird aber etwas Zeit brauchen. Für Neuentwicklungen lohnt sich aber auf jeden Fall ein Blick auf die neue Version des Frameworks [4].

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare

Community-Richtlinien

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige