Bootstrap 3 Grundkurs

Passend für alle Gerätetypen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Durch Bestimmung des Viewports, dem Setzen von Media-Abfragen und anderen hilfreichen Settings wird eine für unterschiedliche Endgeräte optimierte Ausgabe möglich.
05:01

Transkript

Das sich Bootstrap auf die Fahnen geschrieben hat ein Framework zu sein, das sehr viel Rücksicht nimmt auf kleinere Ausgabe-Geräte, also auf Smartphones genauso wie auf Tablets, ist es jetzt mal spannend zu schauen, wo und wie da diese Knackpunkte sind, wo die Umsetzung stattfindet. Eine der ersten Punkte, wo angesetzt wird, ist hier im Bereich des meta tags, wo eben ein so genannter Viewport angegeben wird. Und mit dieser Angabe des Viewports und der automatischen Einstellung auf die Geräte Größe, schaffen Sie eine 100% Skalierbarkeits- Inhalte dieser Seite. Und es ist sogar so, dass Sie sich eigentlich wehren müssen, falls Sie diese Skalierbarkeit nicht wollen. Dann müssen Sie nämlich hier beim Viewport noch einen kleinen Ansatz hinzufügen, nämlich das der Benutzer diese Seite nicht skalieren kann. Das kann dann sein, wenn Sie einfach Inhalte haben, die beim skalieren unkenntlich werden würden, oder die, die Sinnhaftigkeit verlieren täten. Das ist also dieser eine Punkt wo angesetzt wird. Es gibt aber auch noch einen ganz wesentlichen Punkt eben im Zusammenhang mit der Spaltenbildung und das zeige ich Ihnen am besten auf der Seite selber. Wo nämlich hier ein Beispiel angegeben wird. Sie haben weiter oben die Möglichkeit sich eine Tabelle anzusehen in der hinterlegt ist, wie groß die einzelnen Oberflächen prinzipiell sein müssen, damit ein bestimmtes Ereignis eintritt. Und Sie werden sich vielleicht schon hier angesehen haben, es gibt auf jeden Fall immer die Notwendigkeit eine alles umfassenden Container anzubieten. Und die Größe dieses Containers richtet sich jetzt eben nach dem Gerät. Und je nachdem welches Präfix ich verwende, kann ich dann sagen für welches Ausgabegerät ich das besondere Einstellungen treffen möchte. Aber die Geräte selber werden eben durch ihre Weite definiert und es gibt bestimmte Größenangaben, die dann den maximalen großen Wert so zu sagen beschreiben. Und ich habe dann hier unten die Möglichkeit, dass ich mir das ganze leibhaftig anschauen kann. Denn es gibt natürlich die Möglichkeit, dass Sie für mehrere Geräte ganz gezielte Angaben machen. Es kann also sein, dass Sie nicht einfach wollen, dass sämtliche Ihrer Spalten unmotiviert klein schrumpfen, sondern es kann sein, dass sie bei den Spalten unterschiedliche Wertigkeiten erzeugen wollen, und diese Wertigkeiten dann ganz gerne umgesetzt haben wollen, auch wenn sich die Dimension des Ausgabegeräts verkleinert. Und wenn Sie hier genau schauen, haben Sie jetzt hier nicht mehr nur eine Spaltenangabe, sondern hier stehen 2 Spaltenangaben für 2 unterschiedliche Ausgabegrößen. Dieses wäre eine Spaltengröße für eine sehr minimale große Ausgabe und dieses ist die Spalten Angabe für ganz klassisch große Bildschirme. Wie sich das ganze jetzt auswirkt, wenn man die Seite verkleinert, zeige ich Ihnen am besten hier, indem ich die Anzeige hier verkleinere. Und wir müssen jetzt nur die Anzeige erneuern, damit wir einen vernünftigen Eintrag bekommen. Und hier sind wir jetzt bei dem Beispiel, wo Sie jetzt sehen können was passiert. Auf der anderen Seite haben wir hier eine Spalte die eben für kleine Ausgabe Geräte die gesamte Breite in Anspruch nimmt, dadurch das 12 als gesamt Spalten Anzeige gewählt wird, und hier haben wir eben eine Spalten-Angabe, die mit der Hälfte des Platzes auskommt. Und das Ergebnis auf diesem kleinen Gerät wäre jetzt also, dass ich hier sehr wohl eine über die ganze Breite gehende Spalte habe, die Ihnen natürlich dann auch optisch mehr Gewicht darstellt und darunter eine kleinere Ausgabefläche die eben nach unten wandert. Und im Gegensatz dazu, habe ich dann hier eine Aufteilung wo im tatsächlichen Gebrauch sich nicht viel ändern wird, aber trotzdem die Größen Ordnungen den Ausgabegeräten zugeordnet werden können. Und das macht die Stärke aus und das können auch Sie dann im Design, falls notwendig, für sich selbst in Anspruch nehmen und umsetzen. Damit und auch noch mit anderen Möglichkeiten wie z. B., dass die Absätze verschwinden lassen können, sorgt Bootstrap dafür, dass die optimale Ausgabe des Inhalts für die einzelnen Geräte erreicht wird.

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!