Bootstrap-Funktionen

In diesem zweiten Artikel der Serie Lassen Sie uns mit Bootstrap-Funktionen umgehen. Es ist eine vollständige Bibliothek von Ressourcen für das Design von Websites und Anwendungen, einschließlich Vorlagen und Elementen für Formulare, Schriftarten und Menüs, unter anderem.

Bei der vorheriger Artikel Wir haben argumentiert, dass es Zeiten gibt, in denen Content Manager nicht die beste Option sind und so Das Schreiben von Code von Grund auf für eine Website ist die richtige Alternative. Das heißt aber nicht, dass wir das Rad neu erfinden müssen. Die Verwendung von Frameworks wie Bootstrap reduziert die Designzeit erheblich und erleichtert das Erzielen von Ergebnissen.

Bootstrap-Funktionen

Um die Funktionen von Bootstrap zu verstehen, müssen wir verstehen Der Paradigmenwechsel im Website-Design.

als sie auftauchten Websites mussten sich lediglich an die unterschiedlichen Monitorgrößen anpassen. Aber im Laufe der Zeit haben sich Mobiltelefone und Tablets immer mehr zum bevorzugten Zugangsmittel für Benutzer entwickelt. Die Herausforderung bestand darin, die Seiten an die verschiedenen Bildschirme anzupassen, ohne dass der Benutzer den Inhalt vergrößern, verkleinern oder verschieben muss, um ihn sehen zu können.

Grundsätzlich wurden folgende Ansätze verfolgt:

• Sich anpassendes Design: Das Design ist das gleiche, wird aber automatisch an die Größe des Bildschirms angepasst. Dieser Ansatz hat einige Probleme, wie z. B. dass der Benutzer gezwungen sein kann, bestimmte Abschnitte der Seite zu vergrößern, um sie zu sehen.
• Progressiver Fortschritt: Es beginnt mit dem Entwerfen der Website für das Gerät mit weniger Ressourcen (im Allgemeinen das Mobiltelefon, da es einen kleineren Bildschirm und einen Browser mit weniger Kompatibilität für erweiterte Funktionen hat und häufig die Verwendung eines Datentarifs für die Verbindung erfordert). Nach der Fertigstellung werden basierend auf diesem Design Funktionen hinzugefügt, um die Version für Tablets, Notebooks und Desktop-Computer zu erhalten.
• Allmählicher Abbau: Es ist der umgekehrte Weg. Die Desktop-Site wird zuerst erstellt und Funktionen werden entfernt, bis eine für Mobilgeräte optimierte Version verfügbar ist.

Da es immer einfacher ist, hinzuzufügen als zu entfernen, hat sich der progressive Fortschritt als Trend durchgesetzt. B.ootstrap zum Beispiel verfolgt den „Mobile First“-Ansatz, das heißt, dass die Basis des Designs immer die Version ist, die in der kleinsten Bildschirmgröße gezeigt werden soll, und dann werden die Änderungen festgelegt, die bei der Übergabe an die folgenden Größen vorgenommen werden.

Ein zusätzlicher Vorteil der Verwendung von Bootstrap hat damit zu tun Google priorisiert für Mobilgeräte optimierte Websites bei seinen Suchanfragen.

Ein weiteres Konzept, das wir berücksichtigen müssen, ist der Unterschied zwischen Frontend- und Backend-Design. Das Front-End-Design kümmert sich um alles, was der Benutzer sieht und womit er interagiert. Backend gruppiert, was auf dem Server gemacht wird. Ein Beispiel für ersteres ist das eines Webformulars. Das Anzeigen einer Reihe von Optionen wird als Dropdown-Menü im Frontend-Design angezeigt, die ausgewählte Option wird per E-Mail gesendet oder zu einer Datenbank hinzugefügt, im Backend-Design.

Bootstrap ist ein Framework, das Elemente des CSS-Stils und der Javascript-Programmierung kombiniert, um das Rendering zu steuern und allen Komponenten einer in HTML5 entwickelten Seite Interaktivität zu verleihen.

Zu den Dingen, die wir mit Bootstrap steuern können, gehören:

• Erreichbarkeit: Komponenten wie Menüs oder Dialoge sind mit Screenreadern kompatibel oder für Personen mit eingeschränkter Mobilität geeignet.
• Tasten: Einschließlich Maßnahmen, Stile, Zustände und Gruppierung.
• Formen:  Einschließlich Rendering, Arten von Steuerelementen und Eingabevalidierung.
• Metaphorik: Steuert den Ursprung, die Ausrichtung und die Bildschirmgröße eingefügter Bilder.
• Navigationselemente: Zum Beispiel ausblendbare Seitenleisten oder je nach Gerät vertikale oder horizontale Menüs.
• Typografie: Steuern Sie, wie verschiedene Teile des Textes angezeigt werden.
• Layout: Anpassen der Wiedergabe von Inhalten je nach Gerät

Im nächsten Artikel werden wir einige praktische Anwendungsbeispiele sehen.