Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Webdesign – Grundlagen

Responsive Framework: Twitter Bootstrap

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bootstrap ist ein beliebtes CSS-Framework, das auch die wichtigsten Komponenten fürs RWD mitbringt. Sehen Sie hier, wie Sie Bootstrap optimal nutzen.

Transkript

Beim Responsive Web Design können wir nicht einfach Entwürfe in Photoshop oder ähnlich machen und dann ganz zum Schluss an die Umsetzung im Browser gehen. Der Entwicklungsprozess sollte schon früher im Browser stattfinden, damit Sie den flüssigen Kontext immer vor Augen haben. Für solche Zwecke und noch für mehr gibt es Frameworks wie Bootstrap. Sie sehen hier die Startseite von Bootstrap. Und seit Version 3 übrigens gibt es eine Änderung von Bootstrap. Das ist nämlich jetzt inzwischen Mobile First konstruiert. Das finde ich eine sehr schöne und wichtige Entwicklung, weil sie so zeigt wohin es allgemein geht. Denn in der ursprünglichen Version davor war Bootstrap standardmäßig nicht einmal responsive. Man musste die responsive Komponente extra aktivieren. Und jetzt ist es responsive von Haus aus und außerdem Mobile First. Wie fängt man mit Bootstrap an? Dafür muss man sich erst einmal die Dateien runterladen und dann brauchen Sie ein kleines Grundgerüst. Wenn Sie die Dateien herunterladen, dann haben Sie folgende Komponente. Schauen wir uns das hier einmal an. Sie haben dann einen CSS-Ordner und Sie haben einen JavaScript-Ordner. Und es gibt die Dateien immer in der normalen und in der minifizierten Variante. Sie brauchen auch so ein Template, wo diese Dateien eingebunden werden. Und das habe ich mir hier einmal kopiert. Und das können wir uns einmal anschauen. So schaut das aus. Sie sehen hier, wir haben natürlich die Viewport-Angabe. Und dann erfolgt das Einbinden der CSS-Datei, die benötigt wird. Hier müssen Sie natürlich immer schauen, dass es für Ihr Projekt die Pfade auch stimmen. jQuery wird benötigt. Und Sie müssen dann noch die Bootstrap-Datei, die JavaScript-Datei selbst einbinden. Sie könnten hier dann auch noch respond.js einbinden lassen, was aber nicht standardmäßig bei Bootstrap dabei ist. Was können wir aber machen und wie beginnen wir am besten? Das ist jetzt hier natürlich eine ganz leere Datei. Wenn ich die mal hier kurz aufrufe, dann steht da noch sehr wenig drinnen und wir erkennen auch noch nicht den Nutzen von Bootstrap. Deswegen ist es besser, Sie verwenden eins von den vorgefertigten Beispielen als Basis. Schauen wir uns einmal an was hier zur Verfügung steht. Dann sehen Sie hier Beispiele, die Sie direkt nutzen können, wo es schon eine prinzipielle Aufteilung gibt. Und ich habe mich mal hier für ein Beispiel entschieden und habe mir den Code hier runtergeladen. Das heißt, ich bin hier an die Quellcode-Ansicht gegangen, man kann das natürlich auch anders machen und habe mir alles was innerhalb von Body steht hier heruntergeladen. Und das habe ich dann hier in diesem Beispiel integriert. Wenn wir dieses hier einmal ausführen, dann sehen Sie, wir haben die Struktur wie eben auch zu sehen. Und was gibt es jetzt schon an responsive Komponenten, die interessant sind? Ich mache es dafür einmal kleiner. Und Sie sehen, das passt sich alles an. Und ganz nett, hier realisiert die Navigation. Da scheint da nur ein Button und die klappt sich dann über das andere. Und bei großem Viewport hingegen sind die Punkte nebeneinander angeordnet. Wie wird das realisiert? Bootstrap basiert wie auch andere Templates darauf, dass Sie bestimmte Klassen an bestimmten Stellen angeben müssen. Und diese Klassen sind vordefiniert und bewirken dann die gewünschte Funktionalität. Und Sie sehen das dann hier, wie das im Beispiel aussieht. Und jetzt gibt es natürlich eine große Reihe von Komponenten und eine große Anzahl von Klassen, die man dann immer dafür verwenden kann. Eine Sache möchte ich, dass wir uns anschauen, weil sie gerade fürs Responsive Web Design sehr interessant ist. Und das ist eine Reihe von Klassen, die hier beschrieben sind. Ich bin jetzt hier auf der Seite CSS und habe dann Responsive Utilities, diese Tabelle hier aufgerufen. Sie haben jetzt hier auch bestimmte Klassen, die immer widerspiegeln, ob dann das entsprechende Element auf einem Device angezeigt werden soll oder nicht. Sie können zum Beispiel Klasse .visible-sm für Small verwenden, dann ist es nur auf einem kleinen Gerät sichtbar, bei den anderen nicht. Und entsprechend haben Sie auch Klassen für Zwischengrößen und für die großen Devices. Und es gibt auch Klassen, um gezielt etwas nur zu verstecken. Das ist natürlich recht praktisch und das habe ich hier einmal schon im Beispiel angewandt. Wenn wir ein bisschen nach hier unten gehen, dann habe ich h3-Überschriften ergänzt. Hier steht immer sichtbar, die hat keine besondere Klasse erhalten. Hingegen diese hier hat die Klasse erhalten visible-sm. Das heißt, die ist nur was kleinem Viewport zu sehen. Und diese hier visible-lg ist nur bei breitem Viewport. Wenn wir uns dieses Beispiel jetzt nochmal genauer ansehen, dann sehen Sie hier dieser Text nur bei breitem Viewport. Und das hier ist immer sichtbar. Und jetzt machen wir es mal richtig klein. Immer sichtbar ist natürlich auch da. Und jetzt haben wir diese Überschrift, die ist eben nur bei kleinem Viewport zu sehen. Und die andere hier ist ausgeblendet. Das ist natürlich sehr praktisch, dass uns Twitter Bootstrap für solche Fälle gleich Klassen zur Verfügung stellt. Man sollte aber natürlich nicht deswegen jetzt viele Elemente bei kleinen Viewports ausblenden lassen, weil das schlecht ist für die Performance. Bootstrap beinhaltet natürlich viele viele weitere Komponenten, die Sie nutzen können. Hier bin ich einmal bei den Buttons, die automatisch zur Verfügung gestellt werden. Und diese können Sie dann auch noch als Dropdown-Variante nutzen. Und auch wenn dann dahinter eine JavaScript-Funktionalität steht, lösen Sie das aus über bestimmte Klassen. Also, es ist sehr komfortabel in der Bedienung. Sie sehen, es gibt hier noch viele viele Sachen mehr. Für die Anordnung von Elementen ist natürlich interessant, dass Bootstrap mit einem Raster-System kommt, wo Sie eben die Aufteilung definieren können und damit auch Ihre Elemente anordnen. Und das ist natürlich sehr praktisch eben, wenn man so einen Prototyping macht, also, wenn man ersten Entwurf eben dann auch im Browser erstellt. Wie geht das Ganze? Sie brauchen das umfassende Element muss die Klasse Row haben. Und dann definieren Sie über andere bestimmte Klassennamen wie genau die Aufteilung sein soll. Und insgesamt müssen diese Zeilen sich auf die Gesamtanzahl an möglichen Spalten addieren. Die ist im Beispiel 12. Sie sehen also das ergibt 12, 8+4 ergibt 12. Andere Aufteilung ist 4+4+4 auch 12, 6+6 auch 12. Und das wird dann hier immer durch die Klassen festgelegt. Bootstrap ist insgesamt ein schönes Tool zum einen zum raschen Prototyping, das heißt, damit Sie die Wirkung von Komponenten direkt im Browser anschauen können. Und zum anderen können Sie Bootstrap auch als Inspiration nutzen: wie lassen sich einzelne Komponente realisieren, wie kann ich Buttons machen, eine Dropdown-Liste et cetera.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 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!