Webseiten Schnellstart / Webseite Schnellstart – Modul 4 – JavaScript, Frameworks & Webseiten veröffentlichen
0%
In Bearbeitung

Webseite Schnellstart – Bootstrap

Starten wir deine erste Bootstrap-Website mit einer einfachen HTML-Datei. In unserem Beispiel erstellen wir die Datei index.html

(Du brauchst auf deinem Computer keine Dateien erstellen. Im nächsten Schritt wirst Du unsere installationsfreie Online-Lernsoftware benutzen, um Bootstrap 4 zu üben. Einfacher geht's nicht.) 

Schritt 1: HTML5-Doctype hinzufügen

Unsere HTML-Datei benötigt zunächst den HTML5-Doctype <!DOCTYPE html>

Das Hinzufügen des HTML-Doctype  ist eine Voraussetzung, damit die HTML-Elemente und CSS-Eigenschaften von Bootstrap 4 funktionieren.

Füge daher immer erst den HTML5-Doctype, zusammen mit dem lang-Attribut, in dein HTML-Dokument ein. In unserer index.html Datei sieht das wie folgt aus.

index.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
  </head>
</html>

Schritt 2: Responsiveness hinzufügen

Bootstrap 4 basiert auf dem sog. Mobile-First-Approach. Es wurde entwickelt, um die Kompatibilität mit mobilen Geräten zu gewährleisten. Der Mobile-First-Approach ist Teil des Kern-Frameworks.

Um eine korrekte Darstellung und das Zoomen zu gewährleisten, füge das folgende <meta> Tag innerhalb des <head> Elements hinzu:

<meta name="viewport" content="width=device-width, initial-scale=1">

(Optionaler) Hinweis zu diesem <meta> Tag:

  • Der Teil width=device-width legt die Breite der Website fest, die der jeweiligen Bildschirmbreite des Gerätes folgt.
  • Der Teil initial scale=1 setzt die anfängliche Zoomstufe, wenn die Seite zum ersten Mal vom Browser aufgerufen wird.

Deine Standard-HTML-Datei, in unserem Fall die index.html, sollte jetzt so aussehen:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
</html>

Schritt 3: Bootstrap einbinden

Jetzt bist du bereit Bootstrap einzubinden. Der Einfachheit halber, werden wir in den Code-Beispielen und folgenden Übungen, Bootstrap 4 über den CDN einbinden. Um Bootstrap einzubinden müssen 2 Dinge getan werden: Die CSS-Datei muss in den <head> </head> Bereich und die JavaScript-Dateien ganz unten in den <body></body> Bereich der index.html eingefügt werden.

CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Diese 4-Zeilen werden einfach kopiert und eingefügt. Einfacher geht es nicht.

Die einsatzbereite HTML-Datei sieht jetzt wie folgt aus:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>
    <!-- Hier kommt dein Bootstrap gestyltes HTML rein! -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

Wenn du einfach losprogrammieren und Bootstrap ausprobieren möchtest, ist diese letzte Ausführung der index.html-Datei ein gutes Template, welches du in jede beliebige HTML-Datei kopieren & einfügen kannst.

Schritt 4: Deine erste Bootstrap-Website: Die Container-Class

Bootstrap-Elemente werden über eine CSS-Klasse eingefügt:

class="container"

Beispiel:

<div class="container">

</div>

Eine der wichtigsten CSS-Klassen in Bootstrap ist die .container-Class. Diese Klasse stellt uns einen Container zur Verfügung, in dem wir unendlich viele HTML-Elemente einfügen können, um die Webseite mit Leben zu füllen.

Vereinfachen wir diese Erklärung mit einem Code-Beispiel:

<div class="container">
  <h1>Meine erste Bootstrap-Website</h1>
  <p>Ich lerne Bootstrap 4 mit LerneProgrammieren.de</p>
</div>

In der ersten Zeile rufen wir über das <div>-Element die .container-Klasse auf. Bootstrap stellt uns automatisch den Container zur Verfügung, in den wir in Zeile 2 eine Überschrift <h1> und in Zeile 3 einen Paragrafen <p> einbinden. Das ist auch schon die ganze Magie.

Der ausgeführte Code sieht ungefähr so aus:

Neben der .container-Class gibt es viele weitere nützliche Bootstrap-Klassen, die du später kennen lernst und selbst ausprobierst.

Zusammenfassung der Lektion

  1. Ganz Wichtig: An diesem Punkt hast du bereits den schwierigsten Teil von Bootstrap gemeistert.
  2. Du weißt bereits wie du Bootstrap in 3 einfachen Schritten in jedes HTML-Dokument einfügst und wie du Bootstrap-Klassen, z.B. den Container, aufrufst.
  3. In der kommenden Code-Übung (nächste Seite) bist du am Zug. Du wirst du alle Schritte in Ruhe üben.