Bootstrap 4 Erste Schritte

Was ist Bootstrap?

Bootstrap ist ein kostenloses Frontend-Framework für schnellere und einfachere Webentwicklung
Bootstrap enthält HTML- und CSS-basierte Designvorlagen für Typografie, Formulare, Schaltflächen, Tabellen, Navigation, Modale, Bildkarussells und viele andere sowie optionale JavaScript-Plugins
Bootstrap gibt Ihnen auch die Möglichkeit, auf einfache Weise responsive Designs zu erstellen

Was ist responsives Webdesign?

Beim responsiven Webdesign geht es darum, Websites zu erstellen, die sich automatisch so anpassen, dass sie auf allen Geräten gut aussehen, von kleinen Telefonen bis hin zu großen Desktops.

Bootstrap-4-Beispiel

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
</div>
</div>

Bootstrap-Versionen

Dieses Tutorial folgt Bootstrap 4 , das 2018 veröffentlicht wurde, als Upgrade auf Bootstrap 3 , mit neuen Komponenten, schnellerem Stylesheetc, mehr Reaktionsfähigkeit usw.

Bootstrap 5 (veröffentlicht 2021) ist die neueste Version von Bootstrap ; Es unterstützt die neuesten, stabilen Versionen aller wichtigen Browser und Plattformen. Internet Explorer 11 und niedriger wird jedoch nicht unterstützt.

Der Hauptunterschied zwischen Bootstrap 5 und Bootstrap 3 & 4 besteht darin, dass Bootstrap 5 auf JavaScript anstelle von jQuery umgestellt hat .

Hinweis: Bootstrap 3 und Bootstrap 4 werden weiterhin vom Team für kritische Bugfixes und Dokumentationsänderungen unterstützt, und es ist absolut sicher, sie weiterhin zu verwenden. Es werden ihnen jedoch KEINE neuen Funktionen hinzugefügt.

Warum Bootstrap verwenden?

Vorteile von Bootstrap:

Einfach zu bedienen: Jeder, der nur über grundlegende Kenntnisse in HTML und CSS verfügt, kann mit der Verwendung von Bootstrap beginnen
Responsive Funktionen: Das responsive CSS von Bootstrap passt sich an Telefone, Tablets und Desktops an
Mobile-First-Ansatz: In Bootstrap sind Mobile-First-Stile Teil des Kernframeworks
Browserkompatibilität: Bootstrap 4 ist mit allen modernen Browsern kompatibel (Chrome, Firefox, Internet Explorer 10+, Edge, Safari und Opera)

Wo bekommt man Bootstrap 4?

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

Sie können:

Binden Sie Bootstrap 4 aus einem CDN ein
Laden Sie Bootstrap 4 von getbootstrap.com herunter

Bootstrap-4-CDN

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

jsDelivr bietet CDN-Unterstützung für CSS und JavaScript von Bootstrap. Sie müssen auch jQuery einbinden:

jsLiefern:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Ein Vorteil bei der Verwendung des Bootstrap 4 CDN:
Viele Nutzer haben Bootstrap 4 bereits von jsDelivr heruntergeladen, wenn sie eine andere Seite besucht haben. Infolgedessen wird es aus dem Cache geladen, wenn sie Ihre Website besuchen, 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 ihm am nächsten gelegenen Server bereitgestellt wird, was auch 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, benötigen Sie sie nicht.

Schließbare Warnungen
Schaltflächen und Kontrollkästchen/Radiobuttons zum Umschalten von Zuständen
Karussell für Folien, Bedienelemente und Anzeigen
Minimieren zum Umschalten des Inhalts
Dropdowns (also requires Popper.js for perfect positioning)
Modals (open and close)
Navbar (for collapsible menus)
Tooltips and popovers (also requires Popper.js for perfect positioning)
Scrollspy for scroll behavior and navigation updates

Bootstrap 4 herunterladen

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

Erste Webseite mit Bootstrap 4 erstellen

1. Fügen Sie den HTML5-Dokumenttyp hinzu

Bootstrap 4 verwendet HTML-Elemente und CSS-Eigenschaften, die den HTML5-Doctype erfordern.

Fügen Sie am Anfang der Seite immer den HTML5-Dokumenttyp zusammen mit dem lang-Attribut und dem richtigen Zeichensatz ein:

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

2. Bootstrap 4 ist Mobile-First

Bootstrap 4 ist so konzipiert, dass es auf mobile Geräte reagiert. Mobile-First-Stile sind Teil des Kernframeworks.

Um ein korrektes Rendern und Zoomen per Touch sicherzustellen, fügen Sie das folgende <meta>Tag innerhalb des <head>Elements hinzu:

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

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

3. Behälter

Bootstrap 4 erfordert auch ein enthaltendes Element, um Website-Inhalte zu umschließen.

Es stehen zwei Containerklassen zur Auswahl:

Die .containerKlasse stellt einen ansprechenden Container mit fester Breite bereit
Die .container-fluidKlasse stellt einen Container voller Breite bereit , der sich über die gesamte Breite des Darstellungsbereichs erstreckt

.Container

.Behälter-Flüssigkeit

Zwei grundlegende Bootstrap 4 Seiten

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

Container-Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

Das folgende Beispiel zeigt den Code für eine einfache Bootstrap 4-Seite (mit einem Container voller Breite):

Beispiel für Behälterflüssigkeit

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

❮ Vorherige Nächste ❯

Bootstrap-4-Tutorial

Bootstrap-4-Raster

Bootstrap 4 Andere

Bootstrap 4 Art.-Nr