Wenn Sie noch nie von Bootstrap gehört haben, einem Framework, das von Twitter entwickelt wurde, um schöne Websites zu erstellen, verpassen Sie es! Mit Bootstrap ist es relativ schnell und einfach, eine Website zu erstellen, ohne über umfangreiche CSS-Kenntnisse (Cascading Style Sheets) zu verfügen. Wenn Sie noch nicht mit dem Programmieren für das Web vertraut sind, müssen Sie sich mit CSS nicht auskennen, um sich mit der Funktionsweise von Bootstrap vertraut zu machen. Sie benötigen lediglich ein einziges HTML-Dokument. Wir werfen einen Blick auf Bootstrap und zeigen Ihnen, worum es geht, wie es funktioniert und ob es eine gute Option für jede Website ist, die Sie erstellen.
Einfügen der Bootstrap-API in Ihre HTML-Datei
Sie haben einige Möglichkeiten, Bootstrap in Ihre Hauptprojektdatei einzufügen. Die erste Option besteht darin, alle erforderlichen Bootstrap-Dateien in Ihr Projekt einzufügen. Sie können dies tun, indem Sie das Paket herunterladen und in Ihren Projektordner hochladen. Natürlich müssen Sie die primäre Bootstrap-CSS-Datei mit Ihrem Dokument verknüpfen. Auf der offiziellen Website von Bootstrap finden Sie eine schrittweise Anleitung dazu.
Die andere Möglichkeit besteht darin, das Herunterladen des Pakets zu überspringen und ein Content Delivery Network (CDN) zu verwenden. Mit einem CDN können Sie die primären Bootstrap-Dateien mit Ihrem HTML-Dokument verknüpfen, ohne es jemals herunterladen zu müssen. Dies ist natürlich nicht immer eine gute Sache für professionelle Websites, da ich nicht zu schnell meine Geschäfts- oder Portfolio-Seite dem Schicksal überlassen würde, falls dieser Server jemals ausfallen sollte. Es ist am besten, die Dateien in Ihrem Projekt zu haben, aber zum Zwecke des Lernens reicht das CDN aus.
Um Bootstrap in Ihr HTML-Dokument einzufügen, müssen Sie nur den folgenden Code in das einfügen
Tag in Ihrem HTML-Dokument:Sobald diese Links in dieses Head-Tag eingefügt wurden, sollten Sie bereit sein, Bootstrap-Klassen zu verwenden. Ihr Dokument sollte ungefähr so aussehen:
Bootstrap und Klassen
Bootstrap-Elemente sind in Klassen unterteilt. Dies sind nur einige vorab geschriebene CSS-Elemente, die Sie in Ihr Markup einfügen können. Das Einfügen von Klassen in Ihr Markup ist einfach. Sie müssen lediglich den Namen der Klasse kennen, die Sie verwenden möchten, und ihn dann mit dem Wert class = "classname" auf eines Ihrer HTML-Elemente anwenden, wie in einem vorherigen Artikel erläutert.
Der schwierige Teil ist herauszufinden, wie all das zusammenarbeitet, um etwas Schönes zu schaffen. Sie können alle in Bootstrap verfügbaren Klassen direkt in der offiziellen Dokumentation nachlesen. Jetzt ist es eine andere Geschichte, Bootstrap zu beherrschen. Das können wir oder jemand anderes Ihnen nicht beibringen. Sie können Tutorial für Tutorial ansehen, aber um das Framework gut nutzen zu können, ist eine Menge Versuch und Irrtum erforderlich. Und das erfordert, dass Sie es in Ihren eigenen Projekten ausprobieren.
In diesem Sinne bitte ich Sie, mit Atom oder einem anderen Texteditor ein eigenes HTML-Projekt auf Ihrem Computer zu starten, zu überprüfen, worum es bei HTML- und CSS-Klassen geht, und dann mit Bootstrap herumzuspielen. Und wenn Sie genug Markup kennen, können Sie als Testübung sogar Ihre eigene Portfolio-Website erstellen.
Ist Bootstrap eine praktikable Option für jede Website?
Bootstrap ist ein großartiges Framework, aber ist es eine praktikable Option für jede Website, die Sie erstellen? Es hängt wirklich vom Entwickler sowie den Anforderungen des Projekts ab. In vielen professionellen Umgebungen haben Sie nicht wirklich die Wahl, welche Technologien Sie verwenden, da dies weitgehend dem Projektmanager überlassen bleibt. Wenn der Projektmanager Bootstrap verwendet, werden Sie es auch mit einer Menge benutzerdefiniertem CSS kombinieren. Dies macht Ihre Website im Allgemeinen einzigartig und unterscheidet sich von anderen Websites, die Bootstrap verwenden.
Ich persönlich sehe Bootstrap nicht als eine großartige Option für jede Website. Sicher, es kann helfen und einige Verknüpfungen bereitstellen, aber ich habe letztendlich festgestellt, dass das Entwickeln von Grund auf mit CSS der beste Weg ist, vor allem aufgrund der Kontrolle, die Sie darüber haben. Wenn Sie jedoch gerade erst mit der Webprogrammierung beginnen, ist es keine schlechte Sache, Bootstrap überhaupt zu verwenden, aber verlassen Sie sich in Ihrer Karriere nicht darauf.
Es ist erwähnenswert, dass Sie als Anfängerentwickler Bootstrap nicht für alle Projekte in Ihrem Portfolio verwenden sollten. Es kann vorkommen, dass Sie mit der API vertraut sind, sich jedoch nicht vollständig mit CSS auskennen. Das heißt, es ist gut, eine anständige Mischung aus beidem in Ihrem Portfolio zu haben (oder sogar ausschließlich CSS, da es einfach ist, Bootstrap zu kaufen).
Schließen
Das ist alles, was Bootstrap auf den Punkt bringt. Wie bereits erwähnt, empfehle ich Ihnen, ein eigenes HTML-Projekt zu starten und einige der verschiedenen Klassen zu Elementen hinzuzufügen, um mit dem Framework herumzuspielen. Hier finden Sie alle von Bootstrap angebotenen Komponenten mit Erläuterungen und Codebeispielen.
Bootstrap ist wirklich ein nettes Tool, aber denken Sie daran, sich nicht allein darauf zu verlassen! Es ist gut, mit dem Framework vertraut zu sein und sich darin auszukennen, aber auch sicherzustellen, dass Sie in CSS eintauchen, um wirklich zu verstehen, was hinter den Kulissen vor sich geht. Nicht nur das, sondern auch fundierte Kenntnisse in CSS ergänzen Bootstrap in hohem Maße und ermöglichen es Ihnen, wirklich einzigartige und schöne Websites mit Ihrer eigenen Anpassung zu erstellen.
