Die besten Bootstrap-Tutorials für Responsive Web Design

Bootstrap ist ein beliebtes Front-End-Framework für die Webentwicklung. Es enthält vorgefertigte Komponenten und Designelemente zum Gestalten von HTML-Inhalten. Moderne Browser wie Chrome, Firefox, Opera, Safari und Internet Explorer unterstützen Bootstrap.

Bootstrap enthält ein responsives Grid-System für unterschiedliche Layouts. Es ist ein guter Ausgangspunkt für die Erstellung einer mobilfreundlichen Website. Es enthält auch optionale JavaScript-Funktionen wie zusammenklappbare Inhalte, Karussells und Modalitäten.

Versionsgeschichte

Twitter hat das Bootstrap-Framework ursprünglich als internes Tool entwickelt. Sie haben es im August 2011 als Open Source-Projekt veröffentlicht.

Bootstrap 2 wurde im Januar 2012 veröffentlicht. Eines der Hauptmerkmale war die Einführung des 12-Spalten-Responsive-Grid-Systems. Bootstrap 3 erschien im August 2013 und wechselte zu einem flachen Design und einem Mobile-First-Ansatz. Bootstrap 4 ist ab August 2017 in der Beta-Version verfügbar und enthält jetzt Sass und Flexbox.

Bootstrap 4 war zwei Jahre in der Entwicklung, bevor 2017 einige Beta-Versionen veröffentlicht wurden, während die erste stabile Version im Januar 2018 veröffentlicht wurde. Einige bemerkenswerte Änderungen umfassen:

  • Von Less zu Sass gewechselt;
  • Umzug in Flexbox und verbessertes Rastersystem;
  • Hinzugefügte Karten (Ersetzen von Vertiefungen, Miniaturansichten und Feldern);
  • Und vieles mehr!

Zum Zeitpunkt des Schreibens ist die neueste Version von Bootstrap 4.1.3. Wenn Sie über Neuigkeiten zu Ankündigungen auf dem Laufenden bleiben möchten, folgen Sie diesen hier.

Installation

Es gibt zwei Hauptoptionen, um Bootstrap zu Ihrem Webprojekt hinzuzufügen. Sie können auf öffentlich zugängliche Quellen verlinken oder das Framework direkt herunterladen.

Verknüpfung mit einer anderen Quelle

Sie können Bootstrap-CSS hinzufügen, indem Sie ein Element auf Ihrer Webseite verwenden, das auf ein Content Delivery Network (CDN) verweist:

Das Hinzufügen der JavaScript-Elemente von Bootstrap ähnelt den Elementen, die normalerweise am unteren Rand Ihres '' -Tags platziert werden. Möglicherweise müssen Sie zuerst einige Abhängigkeiten einfügen. Achten Sie besonders auf die angegebene Reihenfolge:

Hinweis: Dies sind nur Beispiele und können ohne vorherige Ankündigung geändert werden. In einem CDN finden Sie aktuelle Links, die Sie in Ihr Projekt aufnehmen können.

Herunterladen / Installieren

Sie können die Bootstrap-Quelldateien mit Bower, Composer, Meteor oder npm herunterladen und installieren. Dies ermöglicht eine bessere Kontrolle und die Option, Module nach Bedarf ein- oder auszuschließen.

npm install bootstrap

gem 'bootstrap', '~> 4.1.3'

Hinweis: Dies sind nur Beispiele und können ohne vorherige Ankündigung geändert werden. Die aktuellsten Links finden Sie auf der leeren Website 'rel =' nofollow '> Bootstrap.

Das Bootstrap Grid System

Das Grid-System ist ein Mobile-First-Flexbox-System zum schnellen Erstellen von Layouts in allen Formen und Größen, die für alle Geräte geeignet sind. Es basiert auf einem 12-Spalten-Layout und verfügt über mehrere Ebenen, eine für jeden Medienabfragebereich.

Bootstrap enthält vordefinierte Rasterklassen für die Verwendung in Markups. Weitere Details und Beispiele finden Sie unter //getbootstrap.com/docs/4.1/layout/grid/.

Boostrap-Funktionen

Mehr Informationen:

Bootstrap verfügt über eine ausführliche Dokumentation mit vielen Beispielen und eine HTML-Vorlage für den Einstieg (diese Vorlage enthält nur ein Skript; sie enthält keine Einrichtung des Grid-Systems, wenn Sie danach suchen).

Darüber hinaus finden Sie sowohl kostenlose als auch kostenpflichtige Themen, die auf dem Bootstrap-Framework aufbauen, um ein individuelleres und eleganteres Erscheinungsbild zu erzielen.

Bootstrap-Ressourcen:

Bootstraps offizieller Blog

Inspiration für die Bootstrap-Site

Präsentation von Websites, die mit Bootstrap erstellt wurden

HTML-Linter für Projekte mit Bootstrap

Designelemente und Codefragmente für Bootstrap

Code-, Design- und Add-On-Ressourcen für Bootstrap

Erste Schritte mit dem Bootstrap-Tutorial

Die Verwendung von Bootstrap erleichtert das Entwerfen einer vollständig ansprechenden Website und ist ein lernenswertes Framework.

Was ist eine responsive Website?

Eine reaktionsfähige Website ist eine Website, deren Größe geändert und die Elemente auf der Seite je nach Größe Ihres Browsers neu angeordnet werden. Wenn Sie bei einer reaktionsschnellen Website die Größe Ihres Browsers ändern, können Sie die Änderungen in Echtzeit sehen. Mit Bootstrap reagiert Ihre Website auf Sie.

So fügen Sie Ihrer Seite Bootstrap hinzu

Das Hinzufügen von Bootstrap zu Ihrer Seite ist ein schneller Vorgang. Fügen Sie einfach Folgendes zu den Tags in Ihrem Code hinzu.

Sie müssen außerdem Folgendes zwischen den bodyTags in Ihrem Code einfügen. Mit Bootstrap verwenden Sie Tags. Wenn Sie viele der Bootstrap-Funktionen verwenden, wird auf jedes Tag ein eigener Satz von Klassen angewendet, mit denen das Tag seine Aufgabe ausführen kann. In anderen Abschnitten dieses Bootstrap-Handbuchs werden weitere Beispiele für die Verwendung von Tags durch Bootstrap aufgeführt . ( Tags sind nicht exklusiv für Bootstrap, werden jedoch von Bootstrap verwendet.)

Unten finden Sie den Code, der den bodyTags in Ihrem Code hinzugefügt wird, um den Einstieg zu beenden. Beachten Sie, dass die Seite während der Erstellung des Containers leer bleibt, bis Sie dem Container Inhalt hinzufügen.

Congratulations!

Bootstrap is now working on this page

Vorlagen

Vorlagen sind vorgefertigte Toolkits, mit denen das Hochfahren einer neuen Webseite zum Kinderspiel wird. Wenn Sie eine allgemeine Vorstellung von Ihrem gewünschten Layout haben oder eine Bibliothek gängiger Layoutvorlagen nach Ideen durchsuchen möchten, nehmen Bootstrap-Vorlagen einen Großteil der Langeweile und Frustrationen beim ersten Erstellungsprozess weg. Diese Unterstützung hilft Ihnen, sich auf die Details des Projekts zu konzentrieren, anstatt sich zu fragen, warum CSS nicht zusammenarbeitet.

Loslegen

Vorlagenlinks

Navigationsleiste

Das Bootstrap-Framework bietet Ihnen Navigationsleisten für Funktionsaufrufe. Kurz gesagt, eine Navigationsleiste (auch als Navigationsleisten bezeichnet) ist eine Kopfzeile oben auf der Seite, um Navigationsinformationen anzuzeigen.

Wie benutzt man

Um Bootstrap-Navigationsleisten zu verwenden, fügen Sie oben im Element Ihrer Webseite ein Element hinzu . Es gibt verschiedene Stile, die Sie hinzufügen können, um die Anzeige Ihrer Navigationsleisten anzupassen.

Codebeispiel

Dies ist der Code, der zum Erstellen einer einfachen Navigationsleiste benötigt wird.

 Site Name 
  • Home
  • Page 1
  • Page 2
  • Page 3

Navbar-Stile

Bootstrap bietet eine Reihe von Klassen im Bootstrap-Framework, um Ihre Navigationsleisten zu formatieren. Diese Klassen sind wie folgt:

Hinzufügen von Dropdown-Menüs zur Navigationsleiste

Sie können ein Dropdown-Menü in eine Navigationsleiste einfügen. Für diese Funktion müssen Sie die Javascript-Datei von Bootstrap einschließen, damit sie funktioniert.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • Hinzufügen von Schaltflächen zur Navigationsleiste

    Sie können Schaltflächen in der Navigationsleiste hinzufügen. Die vorhandenen Bootstrap Button-Klassen funktionieren, Sie müssen die Klasse navbar-btnjedoch am Ende der Klassenliste einfügen.

    Button

    Hinzufügen von Formularen zur Navigationsleiste

    Sie können der Navigationsleiste auch Formulare hinzufügen. Dies kann für Aufgaben wie ein Suchfeld, ein Schnellanmeldungsfeld usw. verwendet werden.

     Search 

    Elemente rechts in der Navigationsleiste ausrichten

    In einigen Fällen möchten Sie möglicherweise Elemente in einer Navigationsleiste rechts ausrichten (z. B. eine Anmelde- oder Anmeldeschaltfläche). Dazu müssen Sie die navbar-rightKlasse verwenden.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3
    • Action Link #1
    • Action Link #2

    Anzeigen der Navigationsleiste unabhängig vom Bildlauf

    In einigen Fällen möchten Sie möglicherweise die Navigationsleiste unabhängig vom Bildlauf am oberen oder unteren Bildschirmrand belassen. Sie müssen dem Element entweder die Klasse navbar-fixed-topoder hinzufügen .navbar-fixed-bottom

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    Reduzieren der Navigationsleiste

    Auf einem kleinen Bildschirm (z. B. einem Telefon oder Tablet) nimmt die Navigationsleiste zu viel Platz ein. Glücklicherweise besteht die Möglichkeit, die Navigationsleiste zu reduzieren. Sie können dies anhand des folgenden Beispiels erreichen.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    Navbar Beispiele

    Original text