Bootstrap

Frontend-Web-Framework

Bootstrap ist ein freies Frontend-CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche, optionale JavaScript-Erweiterungen.
CSS-Framework
Prototyping
Sass/CSS
Quadrant
Frameworks
Mein Level

Bootstrap selbst gehört zu den beliebtesten Frameworks für die Frontend-Entwicklung von Websites, was nicht zuletzt daran liegt, dass das Tool Vorlagen für CSS und HTML bereitstellt, mit denen man relativ unkompliziert modernes Webdesign umsetzen kann. Layout, Schriftarten, Buttons und verschiedenste Navigationselemente lassen sich schnell und einfach gestalten und platzieren.

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Ursprünglich für Twitter entwickelt, steht das Framework nun schon seit einiger Zeit als Open-Source-Projekt für alle kostenlos bereit. Wenn man sich für Bootstrap als Framework entscheidet, stellt sich nur noch die Frage nach der Version, Version 4 ist die aktuelle stable Version, mit Version 5.0.3 wurde jetzt die erste nutzbare Beta-Version des Frameworks veröffentlicht.

Bootstrap Version 5

Auch das Bootstrap-Framework hat sich im Laufe der Zeit weiterentwickelt und so wurde vor kurzem die Beta-Version des Frameworks veröffentlicht, die eine Menge von Verbesserungen mit sich bringt. Die wichtigsten habe ich hier für Sie zusammengefasst.


Kein jQuery mehr
Um sich die Arbeit mit JavaScript zu vereinfachen, nutzen viele Webdesigner und Entwickler die freie Bibliothek jQuery. Auch in Bootstrap war diese jahrelang enthalten. Nun hat man sich aber entschieden, die Unterstützung mit der neuen Version zu beenden. Man geht davon aus, dass Nutzer von Bootstrap 5 nicht mehr auf die Bibliothek angewiesen sind. Auch ohne jQuery lassen sich mit dem Framework schnell und einfach die gleichen Effekte wie bisher generieren: Dafür verwendet man entweder weiterentwickelten JavaScript-Code oder man schwenkt auf HTML und CSS um.

Der Verzicht sorgt dafür, dass Projekte, die mit Bootstrap umgesetzt werden, nun deutlich schlanker sind. Die Dateigrößen und damit auch die Ladezeiten sollen geringer ausfallen, was wiederum zu einer verbesserten User Experience führt.


CSS Custom Properties eingeführt
Da der Internet Explorer nun nicht mehr unterstützt wird, kann sich Bootstrap 5 noch mehr auf moderne Webdesgin-Techniken fokussieren. Dazu gehören auch CSS Custom Properties: Diese Technik war bereits seit längerem in Sass und Less bekannt, hat nun aber auch in das klassische CSS Einzug gefunden. Die Properties (oft auch als Variablen bezeichnet) machen das Gestalten mit CSS sehr viel einfacher. Außerdem lassen sich damit moderne Layout-Varianten realisieren.


Grid erweitert
Bereits in Version 4 des Frontend-Frameworks konnte man seine Layouts mithilfe von CSS Grids erstellen. Dies bleibt auch in Bootstrap 5 so, es gibt aber Erweiterungen. Mit xxl hat das Team eine zusätzliche Größenordnung eingeführt. Außerdem hat man weitere Klassen für Vertical Spacing geschaffen.


Neue Utilities API
Um die Flexibilität zu steigern und die Weiterentwicklung von Bootstrap noch weiter voranzutreiben, gibt es in Bootstrap 5 einen neuen Weg, eigene Libraries und Toolkits einzubinden. Hatte man zuvor nur die Möglichkeit, per Klasse externe Bibliotheken und Werkzeuge in ein Projekt einzugliedern, wurde nun eine eigene Schnittstelle mit Sass entwickelt. Darüber lassen sich sowohl eigene Utilities einbinden als auch die von Bootstrap gelieferten entfernen, sollte man sie nicht für das eigene Projekt gebrauchen.


Weitere Informationen zu Bootstrap finden Sie unter
getbootstrap.com

Möchten Sie noch mehr erfahren?

Sie benötigen Hilfe bei ihrem Webprojekt?Lassen Sie uns gemeinsam ihr nächstes Projekt rocken!