Mit Bootstrap kannst du komplexe Webseiten und Webapps bauen und diese sehr gut deine Anforderungen anpassen. Wenn du Bootstrap lernen willst, bist du hier genau richtig. In diesem Anfänger-Tutorial zeige ich dir anhand von Schritt-für-Schritt Beispielen, wie du eine simple Webseite baust, die auf allen Geräten kompatibel ist.
Was ist Bootstrap?
Bootstrap ist ein Front-End-Framework, mit dem du sehr schnell responsive Websites erstellen kannst. Ursprünglich wurde Bootstrap von Twitter entwickelt, jedoch wird das beliebte Framework mittlerweile für die Entwicklung viele Webanwendungen und WordPress-Themes benutzt.
Die Hauptmerkmale von Bootstrap lassen sich in drei einfachen Sätzen erklären:
- Bootstrap ist ein kostenloses Frontend-Framework für eine schnellere und einfachere Webentwicklung.
- Bootstrap enthält HTML- und CSS-basierte Designvorlagen für Typografie, Formulare, Schaltflächen, Tabellen, Navigation, Modelle und viele andere, sowie optionale JavaScript-Plugins.
- Bootstrap gibt dir die Möglichkeit, einfache responsive Designs zu erstellen, ohne sich in CSS zu verlieren.
Was sind die Vorteile von Bootstrap?
- Einfach zu bedienen: Jeder, der über grundlegende Kenntnisse in HTML und CSS verfügt, kann mit Bootstrap starten.
- Responsiveness: Das responsive CSS von Bootstrap passt sich an Smartphones, Tablets und PCs an.
- Mobile-First: In Bootstrap sind Mobile-First-Styles Teil des Haupt-Frameworks.
- Browser-Kompatibilität: Bootstrap 4 ist mit allen gängigen Browsern kompatibel (Chrome, Firefox, Internet Explorer 10+, Edge, Safari und Opera).
Zunächst müssen wir uns die neueste Version von Bootstrap besorgen. Legen wir also los.
1. Lege eine einfache HTML-Datei an
Als ersten Schritt werden wir eine einfache HTML-Datei als Basis für unsere Bootstrap-Übungen anlegen.
Öffne dafür einen Texteditor deiner Wahl (Sublime Text, Notepad, N++ usw.) und erstelle eine neue Textdatei mit dem Namen "index.html".
Hast du die Datei erstellt? Sehr gut. Füge jetzt die folgende HTML-Vorlage ein:
<!DOCTYPE html>
<html>
<head>
<title>Mein erstes Bootstrap Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Denk daran, deine Datei zu speichern.
Jetzt kostenlosen Crashkurs sichern (Online Programmieren, keine Installation nötig)
2. Bootstrap einbinden oder downloaden
Um Bootstrap nutzen zu können, musst du es in deiner Webseite integrieren.
Dazu hast du zwei Möglichkeiten:
- Du kannst es auf der offiziellen Bootstrap-Webseite herunterladen und dann lokal einbinden oder
- du kannst es online über einen CDN einbinden
Der Einfachheit halber werden wir in diesem Bootstrap Tutorial die Online-Einbindung über den CDN demonstrieren.
Das Bootstrap-Framework besteht aus vielen verschiedenen Dateien und Ordnern, darunter CSS- und JavaScript-Dateien. Um diese Dateien einzubinden, müssen wir ein paar Codes in deine index.html einfügen.
2.1 CSS einbinden
Der folgende Code wird in den <head>-Bereich deiner index.html eingefügt:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
2.2 jQuery einbinden
Um die volle Funktionsvielfalt von Bootstrap ausschöpfen zu können, müssen wir zusätzlich die jQuery-Bibliothek einbinden. Füge das folgende Skript for das schließende </body>-Tag ein:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2.3 JavaScript für Bootstrap laden
Deine letzte Handlung, um Bootstrap zum Laufen zu bringen, ist die JavaScript-Bibliothek wie folgt vor das schließende </body>-Tag einzufügen:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
2.4 Zusammenfassung zum Einbinden
Fassen wir kurz zusammen, wie deine index.html Datei jetzt aussehen sollte:
<!DOCTYPE html>
<html>
<head>
<title>Mein erstes Bootstrap Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
3. Design deiner Webseite erstellen
Gut, das war zweifellos eine Menge Vorarbeit. Aber schwer, war die Einbindung ja nicht, oder? Jetzt kann der Spaß beginnen.
Wenn du deine index.html derzeit anklickst (mit einem beliebigen Browser öffnen), dann solltest du nur einen weißen Hintergrund sehen. Es ist Zeit deine Webseite mit Leben zu füllen.
3.1 Navigationsmenü erstellen
Zunächst wollen wir ein Navigationsmenü oben auf deiner Webseite anzeigen. Ich muss dir ja nicht sagen, dass die Navigation das Durchsuchen deiner Seite für den Besucher wesentlich erleichtert. Um eine Navigation einzufügen, benötigen wir die navbar Klasse. Diese gehört zu den Standardelementen von Bootstrap. Sobald du dieses Element in deinem Code einbindest, ist die Navigation bereits responsive.
Wohooo! Das bedeutet, dass sich das Menü auf kleinen Bildschirmen automatisch anpasst.
Hier ist eine Vorlage, die du in deine index.html
einfügen kannst. Füge den Code hinter das <body>-Tag ein.
Navigation-Code:
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Mein Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über Mich</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
Das war jetzt viel Code auf einmal. Hier eine ausführliche Erklärung dazu:
- navbar-expand-md - Diese Klasse gibt an, an welcher Stelle die Navigationsleiste von einem vertikalen bzw. Hamburger-Menü zu einem horizontalen Menü (in voller Breite) erweitert wird. In diesem Fall haben wir sie auf mittelgroße Bildschirme eingestellt. Bei Bootstrap sind das alle Bildschirme die größer sind als 768px.
- navbar-brand - Diese Klasse kann für dein Firmenlogo oder Branding benutzt werden. Wenn du bereits eine Bilddatei hast, kannst du diese hier über HTML (<img src="" usw.) einbinden.
- navbar-toggler - Der Toggler ist der "Umschalter" für ein zugeklapptes Menü. Es ist die Klasse, die kontrolliert, wann ein verstecktes Menü angezeigt wird und vice versa.
- navbar-toggler-icon - Kannst du erraten was das ist? Richtig. Es ist ein simples Icon, auf das der Webseiten-Besucher klickt, um das Menü zu öffnen.
- navbar-nav - Die Klasse enthält die einzelnen <ul> Listenelement für das Menü. Die einzelnen Listenelemente haben die Klasse
nav-item
und die Links haben die Klassenav-link
. Klingt logisch.
Wenn du den Code in deine Datei eingefügt hast, denk daran diese zu speichern. Öffne die Datei ... sie sollte jetzt so aussehen:
Die Navigation sieht schon vielversprechend aus. Aber das Design können wir noch schöner machen.
3.2 Design anpassen
Um unsere Bootstrap-Seite etwas ansprechender zu machen, werden wir unseren eigenen CSS-Code einfügen. Diesen Code kannst du entweder im <head>-Bereich über <style></style>-Tags einfügen oder in eine externe CSS-Datei auslagern.
Genau das machen wir jetzt. Lege dazu eine leere Textdatei an und speichere sie unter dem Namen styles.css
, dort wo du auch deine index.html
gespeichert hast.
Hast du die style.css Datei angelegt?
Dann füge jetzt folgenden Code in den Header-Bereich deiner index.html
ein:
<link rel="stylesheet" type="text/css" href="styles.css">
Ab jetzt kannst du deinen eigenen CSS-Code direkt in deine Webseite einbinden. Um beispielsweise die Navigationsleiste und deren Elemente zu designen, kannst du folgenden CSS-Code in deine styles.css
einfügen.
CSS-Code für styles.css:
body {
padding: 0;
margin: 0;
background: #f9f9f9;
}
/*-- Navigationsleiste --*/
.navbar {
background:#005ea9;
}
.nav-link,
.navbar-brand {
color: white;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover,
.navbar-brand:hover {
color: white;
text-decoration: underline;
}
.navbar-collapse {
justify-content: flex-end;
}
Hier ist das Resultat:
Sieht schon ganz ordentlich aus.
3.3 Überschrift und Einleitungstext einfügen
Jetzt möchtest du wahrscheinlich mal etwas Inhalt auf deiner neuen Webseite darstellen. Eine Überschrift und etwas Text würden sich gut eignen. Auf diese Weise weiß dein Webseitenbesucher sofort, worum es bei deiner Seite geht.
Um diese Textelemente zu erstellen, füge einfach folgenden HTML-Code in deine index.html
hinter das </nav>-Tag ein. Du kannst den Text natürlich nach deinen Wünschen ergänzen.
<div class="meintext">
<h1>Ich lerne Bootstrap auf LerneProgrammieren.de</h1>
<p>Bootstrapo Lerno Waro Nocho Nio So Einfacho. Lorem ipsum dolor sit amet, Bootstrapo Lerno Waro Nocho Nio So Einfacho. Lorem ipsum dolor sit amet, Bootstrapo Lerno Waro Nocho Nio So Einfacho. Lorem ipsum dolor sit amet, Bootstrapo Lerno Waro Nocho Nio So Einfacho.</p>
</div>
Um den Text auch ansprechen zu gestalten, füge noch folgenden CSS-Code in deine styles.css
ein:
.meintext {
left: 50%;
position: absolute;
top: 40%;
transform: translate(-50%, -55%);
text-align: center;
}
.meintext h1 {
color: #005ea9;
}
.meintext p {
color: #535353;
font-size: 1.4rem;
line-height: 1.6;
}
Cool. Hier ist das Resultat:
Jetzt kostenlosen Crashkurs sichern (Online Programmieren, keine Installation nötig)
3.4 Buttons hinzufügen
Fehlt nur noch ein Button unter dem Text. Es gibt viele einfache Möglichkeiten, Buttons und Schaltflächen in Bootstrap einzufügen. In diesem Tutorial wollen wir einen einfachen Button mit dem Text "Geheimer Button" anzeigen. Füge den folgenden Code in den <meintext> Container ein.
<button class="btn btn-outline-secondary btn-lg">Geheimer Button</button>
Hier ist das fertige Resultat:
Dieses Spiel könnten wir jetzt noch Stunden weiterführen. Ich denke aber, dass du die Grundzüge von Bootstrap an dieser Stelle verstanden hast. Fassen wir das Gelernte aus dieser Anleitung zusammen.
Fazit zu Bootstrap 4
Bootstrap ist ein Open-Source Framework, das du in wenigen Schritten einbinden und kostenlos benutzen kannst. Dadurch kannst du schnelle Prototypen entwerfen, komplexe Webseiten bauen oder deine ersten Schritte in der Frontend-Entwicklung wagen.
Wie du hier gelernt hast, sind für Bootstrap einfache Kenntnisse in HTML und CSS notwendig. Ein paar Erfahrungen mit jQuery können auch hilfreich sein. Letzereres ist aber optional. Fertige Content Management Systeme wie WordPress sind in der Bedienung natürlich intuitiver und einfacher anzuwenden, jedoch bietet Bootstrap eine weitere gute Alternative, wenn du Webseiten schnell und zuverlässig erstellen willst.
In diesem Bootstrap Tutorial für Anfänger hast du gelernt, wo du Bootstrap beziehen kannst, wie du es in deine Website einbindest und eine einfache Landing Page erstellst. Mit dem Framework kannst du deine Webseite noch um weitere Navigationen, Buttons, Animationen und Interaktionen erweitern.
Jetzt bist du gefragt: Du solltest jetzt genug über Bootstrap gelernt haben, um deine Webseite selbständig auszubauen.
Wenn du noch tiefer in die Materie einsteigen willst, lege ich dir unseren Bootstrap Schnellstar-Kurs ans Herz. Hier benutzt du das Framework in einem Online-Editor, ohne jemals den Browser verlassen zu müssen. Installationen sind auch nicht notwendig. Wenn du als Anfänger schnell in Bootstrap einsteigen willst, kann ich dir den Schnellstart-Kurs wärmstens empfehlen.
Hat dir dieses Tutorial zum Bootstrap Lernen gefallen? Lasse es mich in den Kommentaren wissen.
- Programmiere echte Apps als Anfänger
- Keine Installation, sofort loslegen
- Komplett praxisbezogen
- Zugriff auf Online-Editor