Bootstrap 4 Get Started

Was ist Bootstrap?

Was ist Responsives Web Design?

Bei Responsive Web Design handelt es sich um die Erstellung von Websites, die sich automatisch so anpassen, dass sie auf allen Geräten, von kleinen Telefonen bis hin zu großen Desktops, gut aussehen.

Bootstrap 4 ist die neueste Version von Bootstrap; mit neuen Komponenten, schnellerem Stylesheet und mehr Reaktionsfähigkeit.

Warum sollte man Bootstrap verwenden?

Wo bekomme ich Bootstrap 4?

Es gibt zwei Möglichkeiten, Bootstrap 4 auf Ihrer eigenen Website zu verwenden.

Bootstrap 4 CDN

Wenn Sie Bootstrap 4 nicht selbst herunterladen und hosten möchten, können Sie es aus einem CDN (Content Delivery Network) einbinden.

MaxCDN bietet CDN-Unterstützung für Bootstrap's CSS und JavaScript. Sie müssen auch jQuery einschließen.

Max-CDN

<!-- Zuletzt kompiliertes und minimiertes CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Zuletzt kompiliertes Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> 

Ein Vorteil der Bootstrap 4 CDN:

Viele Benutzer haben Bootstrap 4 bereits von MaxCDN heruntergeladen, als sie eine andere Site besuchten. Daher wird es beim Besuch Ihrer Site aus dem Cache geladen, was zu einer schnelleren Ladezeit führt. Außerdem stellen die meisten CDNs sicher, dass, sobald ein Benutzer eine Datei von ihm anfordert, diese von dem Server, der ihnen am nächsten ist, bedient wird, was ebenfalls zu einer schnelleren Ladezeit führt.

jQuery und Popper?

Bootstrap 4 verwendet jQuery und Popper.js für JavaScript-Komponenten (wie Modals, Tooltips, Popovers usw.). Wenn Sie jedoch nur den CSS-Teil von Bootstrap verwenden, brauchen Sie sie nicht.

Download Bootstrap 4

Wenn Sie Bootstrap 4 selbst herunterladen und hosten möchten, gehen Sie zu https://getbootstrap.com/ und folgen Sie dort den Anweisungen.

Basis Bootstrap 4 Webseite

Bootstrap 4 wurde entwickelt, um auf mobile Geräte reagieren zu können. Mobile-First-Styles gehören zum Kern-Framework.

Fügen Sie das folgende <meta> -Tag innerhalb des <head> -Elements hinzu, um ein ordnungsgemäßes Rendering und Touch-Zooming zu gewährleisten.

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

width=device-width, legt die Breite der Seite so fest, dass sie der Bildschirmbreite des Geräts folgt (die je nach Gerät variieren kann).

initial-scale=1 legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.

Das folgende Beispiel zeigt den Code für eine grundlegende Bootstrap 4-Seite (mit einem responsiven Container fester Breite).

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Bootstrap 4 Basis-Page</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.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Meine erste Bootstrap Seite</h1>
  <p>Hier ein wenig Inhalt.</p>
</div>

</body>
</html>