Wozu Bootstrap dient: Das Erste-Schritte-Handbuch

In diesem Handbuch werden wir gemeinsam sehen,   wofür Bootstrap ist   , eines der am häufigsten verwendeten Front-End-Frameworks der Welt, jetzt in Version 4. Es ist ein Projekt, das in Twitter geboren wurde, im bereits fernen 2013 in den Köpfen von Mark Otto und Jacob Thornton. Mit diesem   Einführungsleitfaden   versuchen wir, die Fragen zu beantworten, die sich Neulinge stellen könnten, und bieten eine solide Grundlage für den Einstieg.

Beginnen wir mit einer Prämisse. Die   Entwicklung einer Website von Grund auf   führt unweigerlich dazu, dass man in die Designprozesse bestimmter Bereiche einsteigen muss, bei der Erstellung von Layouts, Styles und allgemein allem, was maßgebend sein kann, ein   homogenes Designsystem, das in den verschiedenen Seiten wiederverwendet werden kann des Antrags.

Obwohl Webdesigns manchmal sehr unterschiedlich aussehen können, ist es nicht zu leugnen, dass es einige   gemeinsame Elemente gibt. Durchsuchen Sie einfach das Internet, um es zu verstehen. Die allermeisten Websites haben beispielsweise ein Logo (meist in der oberen linken Ecke), eine Suchleiste, eine Kopfzeile, ein Hauptmenü, eine Fußzeile.

Niemand zwingt uns, diese Elemente zu verwenden, aber es ist eine gute Praxis, dies zu tun. Uns zu sagen sind die UI-Richtlinien, denen wir uns niemals entziehen dürfen. Benutzer „erwarten“ tatsächlich, Objekte in bestimmten Bereichen der Seite zu finden.

Unabhängig von ihrer Position kehren einige Komponenten jedoch sicherlich über alle Sites hinweg wieder: Denken Sie beispielsweise an Buttons, Modals, Jumbotrons und ähnliche modulare Elemente. Das Erstellen des Taggings dieser Elemente für jedes Projekt von Grund auf kann sich sicherlich wiederholen und wertvolle Zeit in Anspruch nehmen.

Daher die Notwendigkeit, auf eine Reihe von Stilen und modularen Komponenten zählen zu können, die einfach zu erweitern und wiederverwendbar sind. Bootstrap hilft uns genau dabei: Verwenden Sie eine Sammlung von Tools, um Websites und Webanwendungen zu erstellen. Darin enthalten sind Designvorlagen, die auf der Beziehung zwischen HTML und CSS basieren und für Typografie, Schnittstellenkomponenten, Schaltflächen und mehr nützlich sind.

Inhaltsverzeichnis

  • Warum Bootstrap verwenden?
  • So starten Sie mit Bootstrap
  • Reaktionsschnell: das 12-Säulen-System
  • Die offizielle Dokumentation
  • Bootstrap-Alternativen
  • Schlussfolgerungen

Warum Bootstrap verwenden?

Wir haben diese Frage im Vorwort bereits teilweise beantwortet, aber es ist in Ordnung, noch ein paar Worte zu verlieren, um die Leistungsfähigkeit dieses Frameworks für die Frontend-Entwicklung besser zu verstehen.

Bootstrap ist in vielen Situationen nützlich. So kann es beispielsweise vorkommen, dass Sie eine kleine Webseite erstellen müssen, ohne über Grafik- oder Webdesign-Kenntnisse zu verfügen. Der Fall zum Beispiel eines Entwicklers, sehr geschickt in der Programmierung, weniger im Design, der noch verschönern und die Arbeit angenehm machen möchte.

Dies ist sicherlich nur eines der möglichen Szenarien. Es wäre in der Tat reduzierend zu sagen, dass Bootstrap verwendet wird, um Menschen mit geringen Grafikkenntnissen zu helfen, es ist in der Tat ein gültiger Verbündeter auch für diejenigen, die täglich benutzerdefinierte Schnittstellen implementieren. Das Tool wurde übrigens geschaffen, um eine solide Grundlage zu schaffen, ein Gerüst, das im Fachjargon   Gerüst genannt wird   , um wiederkehrende Probleme wie die Reaktionsphase zu bewältigen.

Bootstrap, nicht zu vergessen, ist ein Framework, das stark auf Responsive Design basiert     und einen Ansatz verwendet, der als   Mobile First bekannt ist   . Lassen Sie uns nun versuchen, eine kurze Zusammenfassung zu machen und die Stärken der Plattform zusammenzufassen:

  • Benutzerfreundlichkeit und Implementierung
  • Solidität: jetzt in Version 4
  • Kostenloses Produkt
  • Aktualisiert teuer
  • Gültiger Community-Support

So starten Sie mit Bootstrap

Der Einstieg in Bootstrap ist sehr einfach. Gehen Sie einfach auf die offizielle Website des   Projekts und klicken Sie auf die Schaltfläche   „Start“   . Der einfachste Weg, um zu beginnen, ist die Eingabe von Ressourcen über das   CDN

Grundsätzlich fügen wir CSS- und JS-Dateien ein, indem wir sie von einer externen Site abrufen. Alternativ können wir uns entscheiden, die Bootstrap-Dateien direkt auf unserer Website zu hosten     und dann die Pfade nach unseren Bedürfnissen zu ändern.

Mein Rat ist,   das CDN zu nutzen   . Auf diese Weise sind die Ressourcen auch für Benutzer, die die Site aus verschiedenen Teilen der Welt durchsuchen, schnell zugänglich. Da Bootstrap weit verbreitet ist, hat ein Benutzer, der bereits eine Website besucht hat, die es verwendet, schnelleren Zugriff auf diese Ressourcen, da sie in ihrem Cache vorhanden sind.

Zuerst implementieren wir den Stylesheet-Aufruf. Dieses Tag muss im Kopfbereich unserer Webseite eingefügt werden.

<link rel = “stylesheet” href = “https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integer = “sha384-ggOyR0iXCbMQv3Xipma34MD + dH / 1fQ784 / j6JcY / iVo ” „Anonym“>

 

Bootstrap enthält nicht nur CSS, sondern auch einige sehr nützliche Javascript-Komponenten. Elemente wie Akkordeon, Modal, Off-Screen etc. Verwenden Sie jQuery. Um diese Funktionen auf unserer Website einzubinden, müssen wir das erforderliche JS implementieren. Bevor wir das body-Tag schließen, fügen wir diese Zeichenfolgen ein

 

<script src = “https://code.jquery.com/jquery-3.3.1.slim.min.js” Integrität = “sha384-q8i / X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6 // crossreflavin.com/crossorigin” Skript: clojizon.com/ ajax/libs/popper.js/1.14.7/umd/popper.min.js ”Integrity =“ sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrn1 <anzwrn>anonymes Skript</ Jrn1 JDZwrn1 anonymes Skript</anzwrn> JDZwrn1 anonymes Skript</anzwrn> Jrn JRR8686> JDonymous6-Skript cross86 ″ JD 86-Skript> cross86 ″ JDonymous-Skript cross86 /stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js ”integrity =“ sha384-JjSmVgyd0p3pcdn .anonym ”cross4jr07

 

 

Super, jetzt können wir loslegen! Eine solide Grundlage ist sicherlich das   erste Thema,   das Bootstrap selbst in der Dokumentation bereitstellt. Alles, was Sie tun müssen, ist, den Code zu kopieren und einzufügen, und Sie können einige kleine Experimente mit dem Framework durchführen.

Reaktionsschnell: das 12-Säulen-System

Eine der Besonderheiten von Bootstrap ist zweifellos sein   Grid-System   : ein 12-Spalten-System, das es uns ermöglicht, unser Layout auf verschiedenen Geräten einfach zu organisieren. Durch das Spielen mit den 12 Säulen können Sie von Zeit zu Zeit verschiedene Layouts erstellen, ohne auf feste Elemente wie die Größe des Hauptcontainers, der Rinne (Abstand zwischen den Säulen) etc.

Erstellen Sie zunächst einen Container mit einer .container-Klasse. Auf diese Weise können Sie eine variable Anzahl von Spalten einfügen. Der Container ist also der Überbau von Bootstrap, im Inneren befindet sich ein div mit der .row-Klasse, das genau eine Zeile repräsentiert. Die Struktur setzt sich dann mit den Zellen fort.

Zellen variieren je nach Gerät: In der Praxis muss ein Suffix, das die Messung repräsentiert, in die .col-Klasse eingefügt werden: xs, sm, md oder xl. Eine detaillierte Anleitung zum   Bootstrap-Grid-System finden Sie   in der offiziellen Dokumentation.

Zusammenfassend ist die Struktur sehr dick, basierend auf abwechselnden Containern, Zeilen und Spalten. Dazu kommt noch der Flüssigkeitsbehälter, der die gesamte verfügbare Breite einnimmt.

Die offizielle Dokumentation

Die offizielle Dokumentation sollte bei der Arbeit an Bootstrap auf jeden Fall griffbereit sein. Tatsächlich finden Sie im Inneren viele Beispiele, die leicht zu verstehen und an Ihre spezifischen Bedürfnisse angepasst werden können.

Dies ist ein Link zur Dokumentation für die     Version, die ich gerade schreibe, nämlich 4.3. Dies sind gut geschriebene Ressourcen, die in Themenbereiche unterteilt sind: Layout, Inhalt, Komponenten, Dienstprogramme, Erweiterungen und Migration von früheren Versionen.

Eine gültige Hilfe für Anfänger, aber nicht nur. Zu Favoriten speichern und bei Bedarf gesichtet werden.

Bootstrap-Alternativen

Bootstrap ist definitiv nicht das einzige Frontend-Framework auf dem Markt. Tatsächlich gibt es mehrere. Manche sind leichter und schlanker, andere strukturierter. Im Folgenden finden Sie sie nach ihrem Angebot geordnet.

  • Skelett  : Diese Struktur ist zweifellos die leichteste und am einfachsten zu verwendende. Es bietet ein sehr einfaches Layout, nicht überraschend, dass es diesen Namen trägt. Im Inneren finden Sie das Rastersystem und einige Klassen zum Stylen von Knöpfen, Tabellen und anderen wichtigen Dingen nach Bedarf.
  • Bulma  : Dies ist eine in Nordeuropa weit verbreitete Struktur. Etwa 200.000 Entwickler auf der ganzen Welt verwenden es. Basierend auf flexbox ist es ein sehr einfach zu bedienendes Framework: modular, reaktionsschnell und modern.
  • Foundation  : Foundation wurde von Zurb entwickelt und ist zweifellos der Hauptkonkurrent von Bootstrap. Wir sprechen von einer extrem modularen und kapillaren Struktur, die eine Vielzahl von leicht anpassbaren Elementen enthält. Die Lernkurve ist steiler als beim Bootstrapping, aber das Ergebnis ist beeindruckend.

Schlussfolgerungen

Wie wir gesehen haben, ist Bootstrap sicherlich ein ausgezeichneter Ausgangspunkt für die Erstellung jeder Art von Website. Das Framework ist solide, mit kontinuierlicher Fehlerbehebung durch Entwickler, leicht verständlicher Dokumentation und einer sehr leichten Lernkurve, auch für Anfänger.

Wenn das für Sie nicht funktioniert, gibt es dennoch   gültige Alternativen   . Probieren Sie also einfach aus, was dieses Tool zu bieten hat.

 

Leave a Comment

Your email address will not be published.