Web-Layout erstellen mit Open-Source-Framework Bootstrap

Dank Bootstrap zaubern Sie rasch Webseiten mit allen gängigen und auch komplexen Komponenten. Wir zeigen Ihnen anhand eines Beispiellayouts die Funktionsweise.

Lesezeit: 8 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen 24 Beiträge
Von
  • Florence Maurice
Inhaltsverzeichnis

Bootstrap ist ein äußerst beliebtes OpenSource-Frontend-Framework zur Erstellung von Webseiten. Es bietet alle gängigen Komponenten: von einfachen Buttons über gestylte Formularelemente und Karten bis hin zum Raster zur Anordnung der Bereiche. Aber auch komplexere Bestandteile wie Slider, ausklappende Navigationsleisten, Tooltipps, modale Fenster und viele mehr stehen für die rasche Nutzung bereit. Bootstrap ist natürlich responsiv, die erstellten Layouts passen sich an die unterschiedlichsten Bildschirme an.

Um Bootstrap zu nutzen, brauchen Sie ein HTML-Grundgerüst mit Verweisen auf die Bootstrap-CSS- und JavaScript-Dateien. Danach können Sie die Bootstrap-Klassen einsetzen und erhalten die gewünschte Formatierung. Zudem können Sie Bootstrap über Sass an Ihre Bedürfnisse anpassen und zum Beispiel das Farbschema ändern.

Bootstrap ist beispielsweise sinnvoll, wenn Sie gute Vorlagen für die Gestaltung von Komponenten suchen oder wenn Sie eine einfache Webvisitenkarte für ein Projekt erstellen möchten. Das Framework wird aber auch bei größeren Projekten benutzt oder in Kombination mit React oder Vue - eben überall, wo schnell gestylte Komponenten benötigt werden.

Immer mehr Wissen. Das digitale Abo für IT und Technik.

  • Zugriff auf alle Inhalte von heise+
  • exklusive Tests, Ratgeber & Hintergründe: unabhängig, kritisch fundiert
  • c't, iX, Technology Review, Mac & i, Make, c't Fotografie direkt im Browser lesen
  • einmal anmelden – auf allen Geräten lesen - monatlich kündbar
  • erster Monat gratis, danach monatlich 9,95 €
  • Wöchentlicher Newsletter mit persönlichen Leseempfehlungen des Chefredakteurs
GRATIS-Monat beginnen Jetzt GRATIS-Monat beginnen Mehr Informationen zu heise+