Bootstrap 5: Erste Schritte

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Was ist Bootstrap?

  • Bootstrap ist ein kostenloses Frontend-Framework für eine schnellere und einfachere Webentwicklung

  • Bootstrap umfasst HTML- und CSS-basierte Designvorlagen für Typografie, Formulare, Schaltflächen, Tabellen, Navigation, Modalitäten, Bildkarussells und viele andere sowie optionale JavaScript-Plugins

  • Bootstrap bietet Ihnen außerdem die Möglichkeit, ganz einfach responsive Designs zu erstellen

Was ist Responsive Webdesign?

Beim Responsive Webdesign geht es darum, Websites zu erstellen, die sich automatisch anpassen Sie sehen auf allen Geräten gut aus, vom kleinen Telefon bis zum großen Desktop-PC.

Beispiel für Bootstrap 5

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

Probieren Sie es selbst aus →

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

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Bootstrap-Versionen

Bootstrap 5 (veröffentlicht 2021) ist die neueste Version von Bootstrap (veröffentlicht 2013); mit neuen Komponenten, schnellerem Stylesheet und mehr Reaktionsfähigkeit.

Bootstrap 5 unterstützt die neuesten, stabilen Versionen aller gängigen Browser und Plattformen. Allerdings wird Internet Explorer 11 und niedriger nicht unterstützt.

Der Hauptunterschied zwischen Bootstrap 5 und Bootstrap 3 und 4 besteht darin Bootstrap 5 ist auf Vanilla-JavaScript anstelle von jQuery umgestiegen.

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 jedoch KEINE neuen Funktionen hinzugefügt ihnen.

Warum Bootstrap verwenden?

Vorteile von Bootstrap:

  • Einfach zu verwenden: Jeder mit nur Grundkenntnissen in HTML und CSS 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 5 ist mit allen modernen Browsern (Chrome, Firefox, Edge, Safari und Opera) kompatibel. Beachten Sie: Wenn Sie Unterstützung für IE11 und älter benötigen, müssen Sie diese verwenden entweder BS4 oder BS3.

Wo bekommt man Bootstrap 5?

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

Du kannst:

  • Binden Sie Bootstrap 5 von einem CDN ein

  • Laden Sie Bootstrap 5 von getbootstrap.com herunter

Bootstrap 5 CDN

Wenn Sie Bootstrap 5 nicht selbst herunterladen und hosten möchten, können Sie es über ein CDN (Content Delivery Network) einbinden.

jsDelivr bietet CDN-Unterstützung für Bootstraps CSS und JavaScript:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Latest compiled JavaScript -->
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Ein Vorteil der Verwendung des Bootstrap 5 CDN:
Viele Benutzer haben bereits heruntergeladen Bootstrap 5 von jsDelivr beim Besuch eine andere Seite. Dadurch wird es beim Besuch Ihrer Website 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 dort anfordert, diese bereitgestellt wird vom nächstgelegenen Server, was auch zu einer schnelleren Ladezeit führt.

JavaScript?
Bootstrap 5 verwendet JavaScript für verschiedene Zwecke Komponenten (wie Modalitäten, Tooltips, Popovers usw.). Wenn Sie jedoch nur das verwenden CSS-Teil von Bootstrap, Sie brauchen sie nicht.

Bootstrap 5 herunterladen

Wenn Sie Bootstrap 5 selbst herunterladen und hosten möchten, gehen Sie zu https://getbootstrap.com/, und befolgen Sie die dortigen Anweisungen.

Erstellen Sie Ihre erste Webseite mit Bootstrap 5

1. Fügen Sie den HTML5-Dokumenttyp hinzu

Bootstrap 5 verwendet HTML-Elemente und CSS-Eigenschaften, die erforderlich sind der HTML5-Dokumenttyp.

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

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

2. Bootstrap 5 ist Mobile-First

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

Um eine ordnungsgemäße Darstellung und Touch-Zoomung sicherzustellen, fügen Sie das folgende -Tag innerhalb von hinzu <head> Element:

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

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

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

3. Container

Bootstrap 5 erfordert außerdem ein enthaltendes Element zum Umschließen von Site-Inhalten.

Es stehen zwei Containerklassen zur Auswahl:

  1. Die Klasse .container stellt einen reaktionsfähigen Container mit fester Breite bereit

  2. Die Klasse .container-fluid stellt einen Container in voller Breite bereit, der sich über die gesamte Breite des Ansichtsfensters erstreckt

.container
.container-fluid

Zwei grundlegende Bootstrap-5-Seiten

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

Container-Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

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

Beispiel für eine Behälterflüssigkeit

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>