Bootstrap ist ein interessantes Framework oder? Toolkit? Entwicklern wird völlig kostenlos von niemand anderem als Twitter.com angeboten. Laut Twitter soll Bootstrap die Entwicklung von Webapps und Websites vorantreiben.
Heute springen wir in Bootstrap und werfen einen kurzen Blick auf einige der Dinge, die es zu bieten hat. Dies sollte Ihnen helfen zu entscheiden, ob dies nur ein aufgeblähter Rahmen oder ein unglaublich nützliches Werkzeug ist, mit dem Sie Ihr nächstes Projekt ankurbeln sollten.
Was können Sie mit Bootstrap machen?
Bootstrap ist eine Art Schweizer Taschenmesser für Entwickler. Es ist einfach voll mit Tools und Dienstprogrammen, von denen einige äußerst nützlich sein werden, andere, die Sie nie berühren werden.
Das eigentliche Ziel von Bootstrap ist es, Zeit zu sparen. Twitter hat für Sie das Heben geleistet, indem es einige der besten Möglichkeiten zur Durchführung verschiedener Aufgaben untersucht und implementiert hat. Sie haben auch mehrere Schritte unternommen, um solide Grundstile auf verschiedene häufig verwendete Elemente anzuwenden.
Sollten Sie dies so nehmen wie es ist und Ihr kritisches Gehirn während der Entwicklung abschalten? Absolut nicht! Du solltest dich reinschauen, finden, was du magst und ablassen oder was du nicht änderst. Bootstrap wurde in vielen Fällen speziell für die Anpassung an individuelle Anforderungen entwickelt. Machen Sie sich also frei und machen Sie es sich zu Eigen.
Fertig machen
Wenn Sie einige der Stile implementieren möchten, mit denen wir schnell arbeiten, können Sie einfach einen Hotlink auf die Bootstrap-CSS-Datei setzen:
Wir gehen noch einen Schritt weiter und schauen uns einige der optionalen LESS-Dateien an. Es kann also hilfreich sein, einfach bei GitHub vorbeizuschauen und das gesamte Projekt herunterzuladen.
Wenn Sie alles bereit haben, können Sie fortfahren und sehen, was dieses Ding zu bieten hat. Ich werde nicht Schritt für Schritt durch jedes einzelne Feature in Bootstrap lernen, es ist ziemlich umfangreich und die Dokumentation sollte Sie behandeln. Dies ist lediglich ein kurzer Überblick über einige der Dinge, die ich für Bootstrap als nützlich empfinde und wie Sie diese schnell und einfach in Ihrem eigenen Code nutzen können.
Demo
Klicken Sie auf den Link, um Twitter Bootstrap in Aktion zu sehen. Ich habe diese Beispielseite innerhalb weniger Minuten erstellt und dabei die Techniken verwendet, die wir weiter unten besprechen.
Demo: Klicken Sie hier, um die Demo zu starten.
# 1: Ein vorgebautes Gitter
Das erste, was wir besprechen sollten, ist das Raster. Jedes gute Framework hat eines und Bootstrap macht da keine Ausnahme. Sie müssen das Raster nicht verwenden, um von der Fülle der von Bootstrap angebotenen Stile zu profitieren, aber es ist das Schlüsselelement für die Verwendung dieses Toolkits, um ein schnelles Seitenlayout ohne großen Aufwand durchzuführen.
Standardmäßig ist das Raster 940 Pixel breit und hat 16 Spalten. Jede Säule ist 40px mit einer Rinne von 20px. Wie bei 960.gs, Blueprint und anderen ist dieses Raster ein wenig schwer und erfordert einige Markierungen, die Sie vielleicht nicht mögen, aber am Ende ist es wirklich einfach zu bedienen und macht die Verwendung von Bootstrap zu einem Kinderspiel.
Das Raster arbeitet hauptsächlich für Reihen- und Spannenklassen. Zeilen sind selbsterklärend. Wenn Sie eine neue Zeile beginnen möchten, erstellen Sie ein Div und wenden Sie die Zeile an. Klasse. Alles für diese Reihe geht in dieses Div. Wenn es Zeit für eine weitere Reihe ist, schließen Sie die alte und beginnen Sie eine neue.
Für jedes div innerhalb einer Zeile wenden Sie das? Span #? Klasse mit? #? ist die Anzahl der Spalten, die das div umfassen soll.
Gitterbeispiel
Nehmen wir an, wir machten uns über ein Layout lustig, bei dem ein großes Header-Bild verwendet wurde, das die gesamte Breite der Site über vier Textspalten abdeckte. Das Markup dafür ist einfach:
Das Styling dafür wird vollständig automatisiert. Alles, was Sie tun müssen, ist, etwas Inhalt in den HTML-Code oben zu legen, und Sie haben selbst ein Layout.
Genau wie 960.gs unterstützt das Bootstrap-Raster auch Verschachtelung und Spalten. Sie können sogar die Seite flüssig machen, indem Sie alles mit einem Behälterflüssigkeit Klasse oder einfach verwenden ?Container? für feste Breite.
# 2: WENIGER
LESS, der zunehmend berühmte CSS-Präprozessor, wird hier von Twitter mit einer Tonne eingebauter Unterstützung unterstützt. Sie haben wirklich alles gegeben und viele weniger Mixins und Variablen für Sie erstellt, mit denen Sie sofort arbeiten können.
Werfen wir einen kurzen Blick auf einige der Dinge, die Sie mit Bootstrap und LESS machen können.
Passen Sie das Raster an
Das Bootstrap-Grid wurde mit LESS-Mixins und CSS-Mathematik erstellt, sodass es einfach angepasst werden kann. Ändern Sie einfach ein paar Variablen und alles wird automatisch aktualisiert. Nehmen wir beispielsweise an, Sie wollten ein zwölfspaltiges Raster anstelle eines sechzehnspaltigen Rasters. Gehen Sie einfach in "variables.less", suchen Sie die Rastervariablen und ändern Sie die Anzahl der Spalten auf zwölf. So einfach ist das.
CSS3 Ohne Ärger
Mit Bootstrap können Sie einfach einige Ihrer bevorzugten CSS3-Tricks verwenden, ohne sich manuell für jeden Browser wiederholen zu müssen. Hier finden Sie hilfreiche Mixins zum Implementieren abgerundeter Ecken, Schatten und Übergänge.
Es gibt auch Ressourcen zum Erstellen von Farbverläufen und Farbschemata mit der Magie von LESS.
Clearfix
Wenn Sie sich an das vorgefertigte Raster halten, sollten Sie die Floats nicht manuell einrichten und löschen müssen. Wenn Sie jedoch beim Layout nach Ihren eigenen Vorstellungen vorgehen, können Sie mit dem integrierten Clearfix-Mixin viel Aufwand sparen.
Um dies zu implementieren, brauchen Sie nur zu tippen .clearfix ()? in Ihrer .less-Datei. Die Struktur spiegelt die von Nicolas Gallagher verwendete Methode wider.
# 3: Navigation
Eine der nützlichsten Komponenten von Bootstrap ist das großartige Navigations-Toolkit, mit dem Sie verschiedene Arten komplexer Navigationselemente in Sekundenschnelle implementieren können.
Hauptnavigation
Zum Beispiel gibt es eine großartige Hauptnavigationsleiste, die scharf aussieht, ein einfaches Custom Branding ermöglicht und sogar beim Scrollen dabei ist (oben angezeigt). Das Markup scheint unnötig schwer zu sein, macht es aber einfach, ein wirklich schickes Menü zu erstellen (auch Unterstützung für Dropdowns).
Tabs
Sie können auch problemlos ein Navigationsschema mit Registerkarten implementieren. Dieses Markup sieht viel schöner aus und könnte nicht einfacher sein. Einfach das hinzufügen Registerkarten Klasse zu einer ungeordneten Liste und fertig!
Sogar mehr
Bootstrap hört dort nicht auf. Dort finden Sie ähnliche Konstrukte zum Erstellen von Navigationspfaden, Seitenumbruch und mehr. Die meisten davon werden wie Registerkarten mit einer einfachen Klasse implementiert.
Denken Sie daran, dass das gesamte Standard-Styling geändert werden kann. Auch wenn Sie den verwendeten Stil nicht unbedingt mögen, sind diese Tools äußerst hilfreich, um die grundlegende Struktur Ihrer Navigationen in kürzester Zeit zum Laufen zu bringen.
# 4: Galerien
Mit Bootstrap sind Bildergalerien weitgehend automatisiert. Wie bei Tabs benötigen sie in diesem Fall lediglich eine ungeordnete Liste mit einer speziellen Klasse Mediengitter?. Wenn dies angewendet wird, führt die Galerie die Layoutarbeit automatisch aus, wobei die Größe Ihrer Bilder berücksichtigt wird. Allerdings empfiehlt Twitter die Verwendung von Größen wie 90, 210 und 330, die gut zum Layout passen.
Fazit
Dieser Artikel soll Ihnen einen kurzen Einblick in einige der großartigen Tools geben, die Ihnen in Twitter Bootstrap zur Verfügung stehen. Egal, ob Sie nach einem schnellen Weg suchen, um ein komplexes Layout auszuführen, oder einfach nur schöne UI-Elemente wie Registerkarten und Schaltflächen wünschen, mit Bootstrap haben Sie alles.
Es gibt Dinge hier und da, mit denen ich vielleicht nicht einverstanden bin, aber im Großen und Ganzen glaube ich, dass es Twitter gelungen ist, wirklich nützliche Tools zu erstellen. Ich freue mich immer wieder, dass Unternehmen der Webdesign-Community kostenlos wertvolle Ressourcen zur Verfügung stellen. Kennen Sie ähnliche Tools von anderen Unternehmen? Lass es uns in den Kommentaren wissen.
Bootstrap
Bootstrap ist ein Open Source-Toolkit für die Entwicklung mit HTML, CSS und JS. In unserer Serie finden Sie Tipps und Ideen für die Arbeit mit Bootstrap sowie inspirierende Vorlagen, um schnell loszulegen!