Ein Leitfaden für Anfänger zum Erstellen einer responsiven Website mit Bootstrap – Teil 1

Zuletzt aktualisiert am 5. Juni 2019

Dieser Artikel soll Webentwicklern beibringen, die Grundprinzipien des Bootstrap-Frameworks zu verwenden, um schnell und effektiv responsive Websites zu erstellen. Dies reduziert die Produktionskosten und ermöglicht es Unternehmen, ihre Entwickler in die Lage zu versetzen, Websites und Seiten mit Leichtigkeit zu verwalten und zu erstellen. Ich werde den Prozess des Herunterladens des Bootstrap-Frameworks und die Vorteile der Verwendung dieses Frameworks für Ihre Webentwicklungsbemühungen durchgehen.

Was ist Bootstrap?

Laut der offiziellen Bootstrap-Website (getbootstrap.com) ist „Bootstrap das beliebteste HTML-, CSS- und JavaScript-Framework für die Entwicklung von reaktionsschnellen und mobilen ersten Projekten im Web“. Einfacher ausgedrückt ist Bootstrap ein außergewöhnlich einfaches Framework, das dazu beiträgt, die Front-End-Webentwicklung zu beschleunigen und Entwickler mit unterschiedlichen Fähigkeiten anzusprechen.

Warum Bootstrap verwenden?

Das Potenzial zum Entwerfen von Websites für verschiedene Medien, einschließlich großer Displays, normaler Displays, Telefone und Tablets, macht Bootstrap unglaublich attraktiv und zu einer intelligenten Wahl für die Erstellung von Webinhalten. Ein Framework wie Bootstrap bietet generische Funktionen, die leicht geändert werden können, um die Website für eine Vielzahl von Funktionen und Reaktionsfähigkeit zu optimieren, die keine harte Codierung erfordern. Kurz gesagt, es ist eine der einfachsten Möglichkeiten, eine Website zu erstellen und im Gegensatz zu einer WordPress-Site immer noch die Möglichkeit zu haben, sie anzupassen.

Wie man anfängt

Um mit Bootstrap zu beginnen, müssen Sie die offizielle Bootstrap-Website (http://getbootstrap.com/) besuchen. Bootstrap ist ein Open-Source-Projekt und wird auf GitHub gehostet, entwickelt und gepflegt; Dadurch haben Benutzer Zugriff auf den Quellcode und können den vollen Umfang des Frameworks als Tool zum Erstellen von Websites verstehen.

Es gibt drei Möglichkeiten, die aktuelle Version von Bootstrap (v3.3.6) herunterzuladen: Sie können eine kompilierte Version von Bootstrap herunterladen, Sie können den Bootstrap-Quellcode herunterladen und Sie können das Bootstrap-Framework von Less nach Sass portieren. In diesem Fall schlage ich vor, dass Sie als Anfänger nur die kompilierte Version von Bootstrap herunterladen. Wenn Sie das Bootstrap-Framework in Rails-, Compass- oder Sass-only-Projekte integrieren möchten, sollten Sie den Download von Less nach Sass portieren.

Nachdem Sie die Boostrap-Datei heruntergeladen haben, sollten Sie den komprimierten Ordner entpacken, um die Struktur des kompilierten Bootstrap-Frameworks anzuzeigen. Schauen Sie unten, um die Dateistruktur zu sehen:

Jetzt können Sie diese Dateien einfach in das Dateisystem eines beliebigen Webprojekts ziehen, an dem Sie arbeiten, und mit Bootstrap arbeiten, um Ihr gewünschtes Projekt zu entwerfen und zu erstellen. Für weitere Informationen über die Funktionalität von Bootstrap, auf die wir in Teil 2 dieses Beitrags näher eingehen werden, besuchen Sie bitte die Website getboostrap.com, um die Komponenten, CSS-Features und JavaScript-Funktionen anzuzeigen, auf die mit dem Framework zugegriffen werden kann.

Sich anpassendes Design

Responsive Design ist eines der Markenzeichen des Bootstrap-Frameworks. Die Fähigkeit, mit Bootstrap reaktionsschnell zu entwickeln, ermöglicht es Entwicklern, eine einzige Website zu entwickeln, die auf allen Anzeigeplattformen richtig formatiert werden kann. Oft kann eine Website nur auf einer bestimmten Plattform oder Bildschirmgröße gut gestaltet werden und die Benutzererfahrung ist optimal. Bootstrap leistet hervorragende Arbeit, um diese Probleme zu bekämpfen, indem es Entwicklern ermöglicht, bestimmten Spalten der Webseite bestimmte Größen zuzuweisen, wenn sie auf einem kleineren Bildschirm gelesen werden. Es gibt vier Arten von Geräten, die Bootstrap bei der Erstellung responsiver Websites berücksichtigt:

• Extra kleine Geräte (Smartphones <768px)
• Kleine Geräte (Tablets >= 768px)
• Mittlere Geräte (Desktops >= 992px)
• Große Geräte (Desktops >= 1200px)

Der Entwickler kann diesen oben genannten Klassen Tags hinzufügen, um bestimmte Webinhalte so einzustellen, dass sie auf bestimmten Plattformen verkleinert, erweitert, ausgeblendet oder sichtbar sind. Dies ist äußerst hilfreich, um den Aufbau des Look-and-Feel der Website zu vereinfachen.

Grid-System

Bootstrap verfügt über ein Rastersystem, das die Hauptfunktion ist, mit der das Framework zum Entwerfen von reaktionsschnellen Websites verwendet werden kann. Alle Zeilen in Bootstrap müssen in einer Containerklasse platziert werden, und nachfolgende Zeilen können dann als bestimmte Größen definiert werden.

Hier ist ein Beispiel für eine Notation für das Rastersystem:

• Die vordefinierte Zeilenklasse erzeugt eine Zeile
• Innerhalb dieser Zeile gibt die zweite Klasse „col-md-6“ an.
• Dies bedeutet, dass die Klasse eine Spalte erstellt, die sich über 6 Spalten auf der Webseite erstreckt
• Das „md“ gibt an, dass dies nur auf mittleren Geräten oder Desktops mit weniger als oder gleich 768 px auftritt.
• Die Klasse „Offset“ bedeutet, dass diese Spalten leer bleiben. In diesem Fall beträgt der Offset 3, sodass drei Spalten leer bleiben, um einen Teil des Inhalts aufzufüllen.
  Dieses Rastersystem ermöglicht es Entwicklern, Inhaltsabschnitte schnell zu definieren und den angemessenen Abstand zwischen den Inhalten zu haben, um ein sauberes, ansprechendes Design zu erhalten.

Herausforderungen mit Bootstrap

Die Größe der JavaScript- und CSS-Dateien ist groß, wenn alle Bootstrap-Dateien direkt heruntergeladen werden. Dies kann zu einigen Herausforderungen beim Erstellen einer schnellen Seite führen. Dies liegt daran, dass nicht alle Dateien innerhalb der Bootstrap-Dateien vollständig verwendet werden und dies bedeuten kann, dass das Herunterladen unnötiger Daten ein Problem darstellen kann. Dies kann sich auf die Benutzererfahrung auswirken, also zögern Sie nicht, dies ausführlicher zu überprüfen, indem Sie den Beitrag How to Use Bootstrap Basics to Enhance User Experience (https://moz.com/ugc/how-to-use-bootstrap- Grundlagen-zur-Verbesserung-der-Benutzererfahrung).

Ich hoffe, Sie alle werden Bootstrap ausprobieren, da es ein fantastisches Framework ist, um ansprechende und saubere Website-Designs zu erstellen. Bleiben Sie dran für den nächsten Beitrag in der Reihe, der sich mit weiteren Konzepten zu Bootstrap befasst.

Autor: Esme Vazquez, Junior-Webentwickler

Ein Macher, Künstler, Gamer, Programmierer, Webentwickler und Blogger; Esme ist die Schöpferin der jüngsten Blog-Veröffentlichung Indiellect auf der Content-Management-Blog-Site Medium. Ihre aktuelle Erfahrung liegt in der Webentwicklung und Spieleentwicklung; sie arbeitet derzeit und wird in SEO bei That! Company in Leesburg, FL als Junior Web Developer. Sie strebt danach, in Zukunft Videospiele zu entwickeln, die die Schönheit der Menschheit darstellen. Wenn Sie Fragen haben, zögern Sie nicht, ihr unter @EsmeVazquez18 zu twittern und/oder sie auf LinkedIn hinzuzufügen.