Einrichtung von Bootstrap

Bootstrap ist ein mächtiges Framework für die Gestaltung von Websites. Mit einigen Grundkenntnissen in HTML und CSS ist es möglich recht schnell konsistente und benutzerfreundliche Internetseiten zu bauen. Dazu muss Bootstrap jedoch erstmal eingerichtet werden. Alle notwendigen Schritte erkläre ich in diesem Beitrag.

Im Folgenden zeige ich, wie man Bootstrap installiert und seine erste Seite damit erstellt.

Vorraussetzungen:

1. Bootstrap downloaden

Es besteht auch die Möglichkeit sich den Bootstrap Quellcode („Download Bootstrap source“) herunterzuladen. Dies ist aber für den Einstieg nicht notwendig.

2. Bootstrap einrichten

Da Bootstrap lediglich aus CSS- und Javascript-Dateien besteht, ist keine Installation im eigenltichen Sinne notwendig. Es genügt die heruntergeladene ZIP-Datei zu entpacken.

  • entpacke die Datei „bootstrap.zip“ in den gewünschten Ziel-Ordner (z. B. /bootstrap)

Im bootstrap-Ordner sollten dann folgende Ordner angelegt worden sein:

  • css (enthält alle CSS-Dateien in verschiedenen Ausfertigungen)
  • img (enthält Icons)
  • js (enthält Javascript-Plugins)

3. Hello World – Deine erste Seite mit Bootstrap

Öffne nun den Code-Editor deiner Wahl. Ich nutze Eclipse dazu, was aber als reiner Code-Editor wohl für den Einzelnen etwas zu groß sein dürfte.

Hast du die Schritte so durchgeführt, solltest du in etwa folgendes angezeigt bekommen.

<br>Einfaches Layout mit Bootstrap - so sieht's aus

Zu sehen ist ein Stanardlayout von 940 Pixel Breite. Oben gibt es eine große Box, die ideal für Squeezepages geeignet ist. Darunter befindet sich ein Beispiel für die Einteilung des Layouts in 2 unterschiedlich große Bereiche.
Die Box 1 (links) belegt 2 Spalten, wohingegen mit der 2. Boxen (rechts) 10 Spalten umspannt werden. So lassen sich auch einfach Layouts mit Header, einem Navigations- und einem Inhaltsbereich definieren.

Erklärung des HTML-Codes

Hello World mit Bootstrap

Zeile Bemerkung
1 Hier wird festgelegt, dass es sich um ein HTML 5 Dokument handelt
5 Festlegen, dass Design auch auf Smartphones korrekt angezeigt wird
6-8 Einbindung von Bootstrap (CSS,JS und JQuery)
11 class=“container“ legt Standardlayout (12 Spalten) von 940 Pixel Breite fest
12 class=“jumbotron“ legt große Box fest
15 class=“btn btn-danger btn-lg“ erzeugt aus einem normalen Link einen großen (btn-lg), roten (btn-danger) Button (btn)
17 class=“row“ erzeugt 1 Zeile innerhalb des Layouts
18 class=“col-md-2″ lässt das div-Element über 2 Spalten gehen (normale Desktop-Ansicht)
21 Link (a-Element) wird als Button (class=“btn“) dargestellt, durch die zusätzliche Klasse „btn-primary“ wird der Button blau hervorgehoben
23 class=“col-md-10″ lässt das div-Element über 10 Spalten gehen (normale Desktop-Ansicht)
26 class=“btn btn-success“ erzeugt einen grünen (btn-success) Button

Schaut man sich den Quellcode des Hello World Beispiels für Bootstrap an, so bemerkt man schnell, dass es genüngt bestimmte CSS-Klassen zu vergebene. Über diese werden dann die  kompletten Stilvorgaben definiert, die für das Aussehen der Buttons und die Anordnung der Elemente innerhalb des Layouts verwantwortlich sind.

Noch einmal direkt zum Anschauen und Nachvollziehen:

Hast du eine Frage zu dieser Seite?
Fragen anderer Besucher zum Thema "Einrichtung von Bootstrap..."

Emmanuel fragt

Lieber Autor,
danke für diesen superbeschriebenen Einstieg in Bootstrap!
Aber leider stimmt die Erklärung des Quellcodes von "Hello World mit Bootstrap" nicht mehr überein.
Könnte man das bitte Korrigieren? - da es einsteigern eventuel sehr verwirren könnte.

Antwort von BootstrapWorld.de

Hallo Emmanuel,

vielen Dank für deinen Hinweis. Ich habe das Beispiel inklusive der fehlerhaften Grafik korrigiert, so dass nun alles korrekt mit Bootstrap 3 nachvollzogen werden kann.

Aktuell arbeite ich an einem neuen Tutorial für Bootstrap 4, was hoffentlich bald veröffentlicht wird.

Viele Grüße

Andreas

Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK