Bootstrap 3 Grundkurs

Bootstrap herunterladen, auspacken, ansehen

Testen Sie unsere 2007 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Es stehen mehrere Paketvarianten zum Download. Alle unterscheiden sich aber nur in der "Ausführlichkeit" des Materialumfangs. Für den ersten Einstieg genügt in jedem Fall der "dist"-Ordner.
06:28

Transkript

Um mit Bootstrap arbeiten zu können, muss man sich Boostrap erstmal herunterladen. Und dafür gibt es gleich mehrere Geschmacksrichtungen, also mehrere Variationsmöglichkeiten. Die prominenteste natürlich hier gleich auf der Startseite. Und ich klick' mal drauf. Bekommen tue ich jetzt die aktuellste Form Bootstrap 3.0, als ZIP Datei. Ich speicher sie mir mal auf mein Desktop. Das ist eine eher sehr ausführlich gestaltete Datei mit allem drin und dran, was einen Namen hat. Für den Anfang etwas unübersichtlich. Und deswegen gib't hier unter Getting started noch eine abgespeckte Version so zu sagen. Und auch die lade ich mir jetzt mal herunter. Und die speichert sich als 3.0-dist. Ich speicher sie ebenfalls auf meinen Desktop. Und falls Sie wirklich an pulster Zeit sein wollen, gibt es auch die Möglichkeit es direkt über GitHub herunterzuladen. Ich habe das hier schon mal vorbereitet. Das ist jetzt das ganze Repository direkt auf GitHub, und da können Sie sich jetzt entweder die Beispielen Ordner holen, die Sie tatsächlich jetzt in der neuesten Version brauchen und Sie sehen, dass da permanent weitergearbeitet wird, oder Sie haben hier die Möglichkeit sich den Master File herunterzuladen. Das heißt, ich könnte hier auf Download ZIP gehen, und bekomme jetzt eben bootstrap-master. Auch den speicher ich mir auf dem Desktop. Und habe jetzt diese 3 unterschiedlichen Versionen. Damit nicht genug, gäbe es auch die Möglichkeit, dass ich mir das ganze über einen Paketdienst installieren lassen kann. Falls Sie mit diesem Paketdienst arbeiten, geht das dann mehr oder weniger über die Kommandozeile von selbst, oder Sie können auch die Dienste eines CDN Servers in Anspruch nehmen. Bootstrap wird vom sehr renommierten CDN Server NetDNA gehostet, und auch da habe ich die Seite jetzt schon aufgemacht und haben die Möglichkeit ohne das Sie sich jetzt großartig leibhaftig etwas lokal herunterholen, einfach die entsprechenden Links einzubinden. CDN Server sind Server, die eben im Internet für's Internet unterschiedliche Dateien zur Verfügung stellen. Sie haben hier den Vorteil, dass Sie dann immer die neueste Version bei der Hand haben und eingebunden haben. Egal wofür Sie sich entscheiden, letztendlich bekommen Sie, in ein 3 Fällen bzw. 4 Fällen, eben Bootstrap als Möglichkeit damit arbeiten zu können. Schauen wir uns das ganze jetzt nochmal lokal bei mir an. Der Master ist wie gesagt das neueste und das frischeste, direkt aus dem Repository. Tagesaktuell so zu sagen. Und beinhaltet einiges an Files, die man dann gegebenenfalls sich selber zu Gemüte führen kann. Was Sie hier vielleicht vermissen sind CSS Files. Das liegt daran, dass hier mit dem Twitter eigenen System von less gearbeitet wird. Und less sind CSS Dateien, die noch kompiliert werden müssen, bevor man sie verwenden kann. Kompiliert werden können sie mit dem Twitter eigenen Kompiliersystem Recess. Wir werden uns jetzt aber noch nicht wirklich damit beschäftigen. Sas würde einen Schritt zu weit führen, sondern wir werden uns an die einfache entpackte Version von CSS halten und das ist ohne Schnörkel eben in dieser dritten, in der Distribution selbst drinnen. Und diese besteht jetzt eigentlich nur aus 3 Ordnern. Einen Ordner für die CSS Dateien, einen für die Fonts, wobei in den Fonts drinnen sind die Symbolchen, diese kleinen icons von Glyphicon, die eben seit dieser Version jetzt, seit 3.0 als Schrift abgespeichert werden und auch so wieder eingebunden werden können. Und wir haben hier noch unsere grundsätzlichen JavaScript Dateien. Übrigens braucht Bootstrap jQuery. Bootstrap arbeitet mit jQuery und hat auch dieses Eingebundene, d. h., dass müssen Sie sich noch dazu holen, wenn Sie effektiv arbeiten wollen. Und Sie sehen hier genauso wie eben auch im CSS Ordner, dass es jede Datei in 2 unterschiedlichen Varianten gibt. Nämlich in einer normalen Variante, wenn wir uns das eben mit Notepad anschauen, dann haben Sie hier einen ganz normalen CSS Datei Eintrag. Und dann gibt's das ganze noch in der minimierten Version. Da steht nichts anderes drin. Es ist nur so, dass mit einer entsprechenden Software, nämlich normalize, sämtliche Leerzeichen dazwischen entfernt wurden, um eben Platz zu sparen. Und der Platz wird wirklich gespart, wenn Sie sich anschauen was da jetzt an KP's Unterschied zu Stande kommt. Stellen Sie sich vor, Sie haben ein großes Projekt und dann kann das schon sehr viel ausmachen. Sie haben diesen Distributionszweig in allen anderen Distributionen auch drinnen, gut versteckt mittendrin hier im Ordner dist. Und da haben Sie wieder diese 3 Ordner mit denen wir dann weiter arbeiten können. Was in all den vorgefertigten Ordnern fehlt, ist eine Index html. Da ist überhaupt keine Index html Seite dabei und muss auch nicht sein, weil die können Sie selbst erstellen. Das ganze fängt dann damit an, dass Sie Ihre eigene Index html schreiben oder sich eben erste Versionen davon direkt von der Bootstrap Seite herunterholen. Aber für den Anfang jetzt, downgeloaded haben Sie diese 3 Varianten und ich schlage vor, mit der ganz normalen, für den Einstieg geeigneten, Variante zu beginnen.

Bootstrap 3 Grundkurs

Lernen Sie, wie Sie über Bootstrap 3 mit dem Gridsystem - einem ausgeklügelten Spaltensystem – beliebige Gestaltungsmöglichkeiten schnell und flexibel umsetzen können.

2 Std. 14 min (25 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!