HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap- Erste Schritte

❮ Vorherige Nächste ❯

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-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-Geschichte

Bootstrap wurde von Mark Otto und Jacob Thornton bei Twitter entwickelt und im August 2011 als Open-Source-Produkt auf GitHub veröffentlicht.

Im Juni 2014 war Bootstrap das Projekt Nr. 1 auf GitHub!

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 3 sind Mobile-First-Stile Teil des Kernframeworks
  • Browserkompatibilität: Bootstrap ist mit allen modernen Browsern kompatibel (Chrome, Firefox, Internet Explorer, Edge, Safari und Opera)

Bootstrap-Versionen

Dieses Tutorial folgt Bootstrap 3 , das 2013 veröffentlicht wurde. Wir behandeln jedoch auch neuere Versionen; Bootstrap 4 (veröffentlicht 2018) und Bootstrap 5 (veröffentlicht 2021) .

Bootstrap 5 ist die neueste Version von Bootstrap ; mit neuen Komponenten, schnelleren Stylesheets, mehr Reaktionsfähigkeit usw. 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.

Wo bekommt man Bootstrap?

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

Sie können:

  • Laden Sie Bootstrap von getbootstrap.com herunter
  • Bootstrap aus einem CDN einbinden

Bootstrap herunterladen

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

Bootstrap-CDN

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

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

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

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

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Ein Vorteil der Nutzung des Bootstrap CDN:
Viele Nutzer haben Bootstrap bereits beim Besuch einer anderen Seite von MaxCDN heruntergeladen. 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
Bootstrap verwendet jQuery für JavaScript-Plugins (wie Modale, Tooltips usw.). Wenn Sie jedoch nur den CSS-Teil von Bootstrap verwenden, benötigen Sie jQuery nicht.

Erstellen Sie die erste Webseite mit Bootstrap

1. Fügen Sie den HTML5-Dokumenttyp hinzu

Bootstrap 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 3 ist Mobile-First

Bootstrap 3 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:

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

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 benötigt auch ein enthaltendes Element, um Website-Inhalte zu umschließen.

Es stehen zwei Containerklassen zur Auswahl:

  1. Die .containerKlasse stellt einen ansprechenden Container mit fester Breite bereit
  2. 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-Seiten

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

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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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-Seite (mit einem Container voller Breite):

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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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 ❯