Mit diesem kleinen Tutorial m\u00f6chte ich dieses Mal zeigen, wie sich Inhalte mit dem Gridsystem f\u00fcr unterschiedliche Endger\u00e4te optimiert darstellen lassen.<\/p>\n
Extra CSS oder Einstellungen \u00fcber den StyleEdit 3 sind diesmal nicht notwendig. Alles was wir heute brauchen, ist der Content Manager und das grundlegende Verst\u00e4ndnis, wie das Gridsystem funktioniert.<\/p>\n
<\/p>\n\n
Vorbereitungen<\/h2>\n
Zun\u00e4chst brauchen wir nat\u00fcrlich einen Text, den wir im Shop anzeigen lassen wollen. In meinem Fall wird es sich dabei um Blindtext handeln, der f\u00fcr den illustrativen Zweck allerdings v\u00f6llig ausreichend sein sollte.<\/p>\n
Zus\u00e4tzlich ben\u00f6tigen wir nat\u00fcrlich noch ein paar Bilder, die im sp\u00e4teren Verlauf sinnvoll im Text platziert werden sollen.<\/p>\n
Zuallererst m\u00f6chte ich mich aber mit einigen erkl\u00e4rungsw\u00fcrdigen Begriffen besch\u00e4ftigen, die dabei helfen werden, zu verstehen, was ich in diesem Tutorial mache.<\/p>\n
Begriffserkl\u00e4rungen<\/h2>\n
Das Gridsystem von Bootstrap funktioniert auf Basis von HTML und CSS. Im HTML werden an den betreffenden Elementen bestimmte Klassen (im Sinne von Erkennungsmerkmalen) angeh\u00e4ngt, sodass das CSS die Elemente ansprechen und dann die korrekte Aufteilung der Elemente \u00fcbernehmen kann. Folgende Klassen werden wir im Verlauf kennenlernen und benutzen:<\/p>\n
Allgemeine Spaltenverteilung<\/h3>\n\n- row:<\/em> Eine \u201cReihe\u201d, Container-Element f\u00fcr eine Anzahl von col-Elementen (Spalten). Wichtig: Es sollte immer ein HTML-Element mit der Klasse row<\/em> geben, welches dann die nachfolgenden HTML-Elemente mit den Klassen col-<\/em> hat.<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n <div class=\"col-xs-12\">[...]<\/div>\r\n <\/div><\/pre>\n
\n- col-xs-*<\/em>: Das Element mit dieser Klasse erh\u00e4lt die Anzahl an Spalten in der mobilen Ansicht, wie angegeben. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12). XS steht f\u00fcr Extra Small, also sehr kleine Anzeigeger\u00e4te.<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- eine Spalte in der mobilen Ansicht -->\r\n<div class=\"col-xs-1\">[...]<\/div>\r\n<!-- zwei Spalten in der mobilen Ansicht -->\r\n<div class=\"col-xs-2\">[...]<\/div>\r\n<!-- drei Spalten in der mobilen Ansicht -->\r\n<div class=\"col-xs-3\">[...]<\/div>\r\n<!-- etc. -->\r\n<\/div><\/pre>\n
\n- col-sm-*<\/em>: Das Element mit dieser Klasse erh\u00e4lt die Anzahl an Spalten in der Ansicht f\u00fcr Tablets im Portrait-Modus, wie angegeben. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12). SM steht f\u00fcr small to medium, also kleinere bis mittelgrosse Anzeiger\u00e4te.<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- eine Spalte in der Portrait-Ansicht -->\r\n<div class=\"col-sm-1\">[...]<\/div>\r\n<!-- zwei Spalten in der Portrait-Ansicht -->\r\n<div class=\"col-sm-2\">[...]<\/div>\r\n<!-- drei Spalten in der Portrait-Ansicht -->\r\n<div class=\"col-sm-3\">[...]<\/div>\r\n<!-- etc. -->\r\n<\/div><\/pre>\n
\n- col-md-*<\/em>: Das Element mit dieser Klasse erh\u00e4lt die Anzahl an Spalten in der Ansicht f\u00fcr Tablets im Landscape-Modus, wie angegeben. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12). MD kann man mit Medium Devices \u00fcbersetzen, also mittelgrosse Anzeigeger\u00e4te.<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- eine Spalte in der Landscape-Ansicht -->\r\n<div class=\"col-md-1\">[...]<\/div>\r\n<!-- zwei Spalten in der Landscape-Ansicht -->\r\n<div class=\"col-md-2\">[...]<\/div>\r\n<!-- drei Spalten in der Landscape-Ansicht -->\r\n<div class=\"col-md-3\">[...]<\/div>\r\n<!-- etc. -->\r\n<\/div><\/pre>\n
\n- col-lg-*<\/em>: Das Element mit dieser Klasse erh\u00e4lt die Anzahl an Spalten in der Ansicht f\u00fcr Desktop-PCs und Laptops, wie angegeben. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12). LG steht dabei simpel f\u00fcr large, also gro\u00dfe Anzeigeger\u00e4te.<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- eine Spalte in der Desktopansicht -->\r\n<div class=\"col-lg-1\">[...]<\/div>\r\n<!-- zwei Spalten in der Desktopansicht -->\r\n<div class=\"col-lg-2\">[...]<\/div>\r\n<!-- drei Spalten in der Desktopansicht -->\r\n<div class=\"col-lg-3\">[...]<\/div>\r\n<!-- etc. -->\r\n<\/div><\/pre>\nOffsets<\/h3>\n\n- col-xs-offset-*<\/em>: Das Element mit dieser Klasse wird in der mobilen Ansicht um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- sechs Spalten in der mobilen Ansicht, um eine Spalte nach rechts einger\u00fcckt -->\r\n<div class=\"col-xs-6 col-xs-offset-1\">[...]<\/div>\r\n<\/div><\/pre>\n
\n- col-sm-offset-*<\/em>: Das Element mit dieser Klasse wird in der Ansicht f\u00fcr Tablets im Portrait-Modus um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- sechs Spalten in der Portrait-Ansicht, um eine Spalte nach rechts einger\u00fcckt -->\r\n<div class=\"col-sm-6 col-sm-offset-1\">[...]<\/div>\r\n<\/div><\/pre>\n
\n- col-md-offset-*:<\/em> Das Element mit dieser Klasse wird in der Ansicht f\u00fcr Tablets im Landscape-Modus um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- sechs Spalten in der Landscape-Ansicht, um eine Spalte nach rechts einger\u00fcckt -->\r\n<div class=\"col-md-6 col-md-offset-1\">[...]<\/div>\r\n<\/div><\/pre>\n
\n- col-lg-offset-*<\/em>: Das Element mit dieser Klasse wird in der Desktop-Ansicht um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- sechs Spalten in der Desktop-Ansicht, um eine Spalte nach rechts einger\u00fcckt -->\r\n<div class=\"col-lg-6 col-lg-offset-1\">[...]<\/div>\r\n<\/div><\/pre>\nVerkettungen von Klassen<\/h3>\n
Es ist zu beachten, dass eine Verkettung der Klassen m\u00f6glich ist, sodass wir eine unterschiedliche Aufteilung der Spalten f\u00fcr die unterschiedlichen Ansichten erreichen k\u00f6nnen. Es k\u00f6nnen also in einer Anweisung die Regeln f\u00fcr verschiedengro\u00dfe Ger\u00e4te auf einmal geschrieben werden.<\/p>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<div class=\"col-xs-12 col-sm-8 col-md-6 col-lg-4\">[...]<\/div>\r\n<\/div><\/pre>\nDas Beispiel w\u00fcrde in Worte \u00fcbersetzt folgendes bedeuten: Volle Breite in der mobilen Ansicht, acht Spalten in der Ansicht Tablet-Portrait, sechs Spalten in der Ansicht Tablet-Landscape und vier Spalten in der Desktopansicht.<\/p>\n
Analog verh\u00e4lt es sich auch bei der Vergabe der Offset-Klassen, sodass auch hier unterschiedlich gro\u00dfe Einr\u00fcckungen f\u00fcr die unterschiedlichen Ansichten m\u00f6glich sind.<\/p>\n
Soll f\u00fcr aufeinanderfolgende Ansichten eine gleiche Spaltenverteilung oder Einr\u00fcckung erreicht werden, so w\u00fcrde es reichen, nur die Klasse f\u00fcr die kleinste Ansicht zu vergeben. Ein col-xs-6 w\u00fcrde also auch f\u00fcr alle anderen Ansichten sechs Spalten vergeben, wenn keine weitere Klasse f\u00fcr eine gr\u00f6\u00dfere Ansicht folgt.<\/p>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<div class=\"col-xs-6 col-md-4\">[...]<\/div>\r\n<\/div><\/pre>\nIn Worten w\u00fcrden diese Anweisungen folgendes bedeuten: In der mobilen Ansicht und in der Ansicht f\u00fcr Tablets im Portrait-Modus sei bitte sechs Spalten breit, f\u00fcr die Ansicht im Landscape-Modus und in der Desktop-Ansicht aber bitte nur vier Spalten.<\/p>\n
Gleiches Verhalten gilt auch hier f\u00fcr die Offset-Klassen, sodass hier unn\u00f6tiger Code vermieden werden kann.<\/p>\n
Sollen die Spalten aber f\u00fcr jede Ansicht individuell vergeben werden, so m\u00fcssen die jeweiligen Klassen auch entsprechend genutzt werden. Dies ist in Ausnahmef\u00e4llen erforderlich, wenn bestimmte Inhalte es erfordern, dass sie in einer Ansicht anders dargestellt werden m\u00fcssen.<\/p>\n
Automatisches Anpassen von Bildern oder anderen Inhalten<\/h3>\n\n- img-responsive:<\/strong> Diese Klasse an ein Bildelement angeh\u00e4ngt bewirkt, dass sich das Bild immer dem in seinem Container verf\u00fcgbaren Platz anpasst.<\/li>\n
- embed-responsive:<\/strong> Diese Klasse wird in einem HTML-Element ben\u00f6tigt, welches einen externen Inhalt, wie ein iframe oder ein Video, beinhalten soll, dass sich automatisch an die Aufl\u00f6sung des Endger\u00e4tes anpasst. Das Seitenverh\u00e4ltnis, in welchem der externe Inhalt angezeigt werden soll, kann \u00fcber die beiden nachfolgenden Klassen konfiguriert werden.<\/li>\n
- embed-responsive-16by9:<\/strong> Zeigt einen externen Inhalt im Seitenverh\u00e4ltnis von 16 zu 9 an.<\/li>\n
- embed-responsive-4by3:<\/strong> Zeigt einen externen Inhalt im Seitenverh\u00e4ltnis von 4 zu 3 an.<\/li>\n
- embed-responsive-item:<\/strong> Der externe Inhalt, der responsiv eingebunden werden soll, ben\u00f6tigt diese Klasse, damit die Anpassung an die Bildschirmaufl\u00f6sung korrekt funktioniert.<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<!-- 16:9 aspect ratio -->\r\n<div class=\"embed-responsive embed-responsive-16by9\">\r\n<iframe class=\"embed-responsive-item\" src=\"...\"><\/iframe>\r\n<\/div>\r\n\r\n<!-- 4:3 aspect ratio -->\r\n<div class=\"embed-responsive embed-responsive-4by3\">\r\n<iframe class=\"embed-responsive-item\" src=\"...\"><\/iframe>\r\n<\/div><\/pre>\nInhalte f\u00fcr bestimmte Aufl\u00f6sungen verstecken oder anzeigen<\/h3>\n
In manchen F\u00e4llen kann es allerdings sinnvoll sein, das Bild auszublenden, wenn es zu klein werden w\u00fcrde. Alternativ k\u00f6nnte f\u00fcr kleinere Ansichten ein anderes Bild hinterlegt werden, welches stattdessen angezeigt wird. Wie das funktioniert erkl\u00e4re ich im Folgenden.<\/p>\n
\n- hidden-xs:<\/strong> Ein Element mit dieser Klasse ist nur in der mobilen Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.<\/li>\n
- visible-xs:<\/strong> Ein Element mit dieser Klasse wird nur in der mobilen Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar.<\/li>\n
- hidden-sm:<\/strong> Ein Element mit dieser Klasse ist nur in der Portrait-Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.<\/li>\n
- visible-sm:<\/strong> Ein Element mit dieser Klasse wird nur in der Portrait-Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar<\/li>\n
- hidden-md:<\/strong> Ein Element mit dieser Klasse ist nur in der Landscape-Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.<\/li>\n
- visible-md:<\/strong> Ein Element mit dieser Klasse wird nur in der Landscape-Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar.<\/li>\n
- hidden-lg:<\/strong> Ein Element mit dieser Klasse ist nur in der Desktop-Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.<\/li>\n
- visible-lg:<\/strong> Ein Element mit dieser Klasse wird nur in der Desktop-Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar.<\/li>\n<\/ul>\n
Zur Veranschaulichung der unterschiedlichen Klassen hier noch eine kleine Tabelle. Diese ist auch hier einsehbar:<\/a><\/p>\n![\"Tabelle](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/Screenshot-2018-2-26-CSS-\u00b7-Bootstrap.png\")
<\/a>Abb. 1: Tabelle zur Veranschaulichung der Sichtbarkeit<\/p><\/div>\n
Texte und andere Inhalte vorbereiten<\/h2>\n
Nachdem wir nun die wichtigsten Klassen zum responsiven Gliedern von Texten gezeigt haben, k\u00f6nnen wir uns um die eigentliche Arbeit k\u00fcmmern: Wir brauchen einen Text und Bilder beziehungsweise andere Inhalte, die wir als Content in den Shop einbauen wollen.<\/p>\n
F\u00fcr mein Beispiel werde ich einen automatisch generierten Blindtext, sowie einige Testbilder und ein Testvideo verwenden. Diese sollten den Zweck der Veranschaulichung gut erf\u00fcllen.<\/p>\n
Folgende Bilder werden verwendet. Hier zur Veranschaulichung verkleinert:<\/p>\n
![\"\"](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/testbild1-150x150.png\")
<\/a>![\"\"](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/testbild2.png\")
<\/a>![\"\"](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/testbild3.png\")
<\/a><\/p>\nFolgendes Video soll von extern eingebunden werden:<\/p>\n
https:\/\/player.vimeo.com\/video\/163276989<\/a><\/p>\nFolgender Text soll verwendet werden:<\/p>\n
\u201cLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.<\/i>\u201d<\/span><\/p>\nDamit w\u00e4ren unsere Vorbereitungen abgeschlossen und wir k\u00f6nnen uns darum k\u00fcmmern, den Text wie gew\u00fcnscht zu formatieren.<\/p>\n
Tipp: <\/b>
\nNutzt zum Formatieren der Texte einen Texteditor mit so genannter Syntax-Highlighting-Funktion. Damit behaltet ihr einen besseren \u00dcberblick \u00fcber euren Text.<\/div>\nTexte und andere Inhalte passend anordnen<\/h2>\n
Nachdem wir nun alle relevanten Begriffe gekl\u00e4rt und alle Inhalte zusammen gesammelt haben, die wir f\u00fcr unseren Content ben\u00f6tigen, k\u00f6nnen wir damit beginnen, die Texte, Bilder und externen Inhalte in die gew\u00fcnschte Reihenfolge zu bringen.<\/p>\n
Gew\u00fcnschter Inhalt \u00fcber die gesamte Breite<\/h3>\n
Soll ein Inhalt \u00fcber die gesamte verf\u00fcgbare Breite angezeigt werden, so wird folgendes HTML ben\u00f6tigt. Da in meinem Beispiel in allen Ansichten der Inhalt \u00fcber die gesamte Breite angezeigt werden soll, wird nur die Klasse col-xs-12<\/em> ben\u00f6tigt.<\/p>\nEin Bild \u00fcber die gesamte Breite anzeigen:<\/p>\n
<div class=\"row\">\r\n<!-- Ein Bild \u00fcber die gesamte verf\u00fcgbare Breite -->\r\n<div class=\"col-xs-12\">\r\n<img class=\"img-responsive\" src=\"pfad\/zum\/bild.png\" alt=\"Beispielbild\"\/>\r\n<\/div>\r\n<\/div><\/pre>\nDies w\u00fcrde folgende Ausgabe im Shop erzeugen:<\/p>\n
![\"Bildausgabe](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/Screenshot-2018-2-26-feature-Testseite1.png\")
<\/a>Abb. 2: Einbindung eines Testbildes \u00fcber die gesamte Breite. Da das Bild nur 800px breit ist, ist noch ein kleiner Rand rechts zu sehen<\/p><\/div>\n
Text \u00fcber die gesamte Breite anzeigen<\/h3>\n<div class=\"row\">\r\n<!-- Ein Text \u00fcber die gesamte verf\u00fcgbare Breite -->\r\n<div class=\"col-xs-12\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div><\/pre>\nDieser Text w\u00fcrde im Shop dann wie folgt angezeigt werden:<\/p>\n
![\"Textausgabe](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/Screenshot-2018-2-26-feature-Testseite3.png\")
<\/a>Abb. 3: Einbindung eines Textes \u00fcber die gesamte Breite des Shops<\/p><\/div>\n
Einen externen Inhalt \u00fcber die gesamte Breite anzeigen<\/h3>\n<div class=\"row\">\r\n<!-- Ein Video \u00fcber die gesamte verf\u00fcgbare Breite -->\r\n<div class=\"col-xs-12\">\r\n<div class=\"embed-responsive embed-responsive-16by9\">\r\n<iframe class=\"embed-responsive-item\" src=\"https:\/\/player.vimeo.com\/video\/163276989?color=00599d&title=0&byline=0&portrait=0?autoplay=1\"><\/iframe>\r\n<\/div>\r\n<\/div>\r\n<\/div><\/pre>\nDies w\u00fcrde folgendes Video im 16:9 Format \u00fcber die gesamte Seite anzeigen:<\/p>\n
![\"Videoausgabe](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/Screenshot-2018-2-26-feature-Testseite4.png\")
<\/a>Abb. 4: Beispielhafte Einbindung eines Videos<\/p><\/div>\n
Ein einger\u00fcckter Inhalt<\/h3>\n
Soll ein Inhalt ein St\u00fcckchen einger\u00fcckt dargestellt werden, so ist das mit den oben genannten offset-Klassen m\u00f6glich. Da das Vorgehen hier f\u00fcr alle Inhalte analog ist, zeige ich dies nur anhand eines einzelnen Beispiels:<\/p>\n
<div class=\"row\">\r\n<!-- Ein Text mit einer Spalte Einr\u00fcckung -->\r\n<div class=\"col-xs-offset-1 col-xs-11\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div><\/pre>\nDas obige Beispiel w\u00fcrde einen Text erzeugen, der um eine Spalte in allen Ansichten einger\u00fcckt ist.<\/p>\n
![\"Einger\u00fcckter](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/abb5.1.png\")
<\/a>Abb 5: Beispielhafte Einbindung eines einger\u00fcckten Inhalts<\/p><\/div>\n
Sollen f\u00fcr die unterschiedlichen Ansichten unterschiedlich starke Einr\u00fcckungen verwendet werden, m\u00fcssen die offset-Klassen der jeweiligen Ansichten verwendet werden und die Spaltenanzahl des Inhalts ist entsprechend anzupassen.<\/p>\n
<div class=\"row\">\r\n<!-- Ein Text \u00fcber die gesamte verf\u00fcgbare Breite -->\r\n<div class=\"col-xs-offset-1 col-md-offset-2 col-xs-11 col-md-10\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div><\/pre>\nDieses modifizierte Beispiel w\u00fcrde einen Text erzeugen, der in der mobilen und in der Portrait-Ansicht um eine Spalte einger\u00fcckt ist und ab der Landscape-Ansicht um zwei Spalten einger\u00fcckt wird.<\/p>\n
Mehrere Inhalte nebeneinander<\/h3>\n
Um mehrere Inhalte gut lesbar und gegliedert anzuzeigen, bietet es sich hin und wieder an, diese auch nebeneinander anzuzeigen. Wie sich mehrere Inhalte nebeneinander anordnen lassen, m\u00f6chte ich im folgenden Beispiel veranschaulichen.<\/p>\n
<!-- Drei Inhalte nebeneinander -->\r\n<div class=\"row\">\r\n<div class=\"col-xs-12 col-md-4\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild1.png\" \/>\r\n<\/div>\r\n\r\n<div class=\"col-xs-12 col-md-8 col-lg-4\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n\r\n<div class=\"col-xs-12 col-lg-4\">\r\n<br class=\"hidden-lg\">\r\n<div class=\"embed-responsive embed-responsive-16by9\">\r\n<iframe class=\"embed-responsive-item\" src=\"https:\/\/player.vimeo.com\/video\/163276989?color=00599d&title=0&byline=0&portrait=0?autoplay=1\"><\/iframe>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<br>\r\n<!-- Ein Text \u00fcber die gesamte Breite -->\r\n<div class=\"row\">\r\n<div class=\"col-xs-12\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n<br>\r\n<!-- Ein Text und ein Bild, die sich die Breite zu gleichen Teilen aufteilen -->\r\n<div class=\"row\">\r\n<div class=\"col-xs-12 col-md-6\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n\r\n<div class=\"col-xs-12 col-md-6\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild2.png\" \/>\r\n<\/div>\r\n<\/div>\r\n\r\n<br>\r\n<!-- Ein Text \u00fcber die gesamte Breite -->\r\n<div class=\"row\">\r\n<div class=\"col-xs-12\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n<br>\r\n<!-- Ein Bild und ein Text, die sich die Breite im Verh\u00e4ltnis eins zu drei teilen -->\r\n<div class=\"row\">\r\n<div class=\"col-xs-12 col-md-3\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild3.png\" \/>\r\n<\/div>\r\n\r\n<div class=\"col-xs-12 col-md-9\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div><\/pre>\nDas hier verwendete Beispiel vereint so gut wie alle vorherigen Beispiele in sich.<\/p>\n
Dieses w\u00fcrde einen Content erzeugen, welcher in der mobilen Ansicht alle Inhalte \u00fcber die gesamte Breite anzeigt, um eine gute Lesbarkeit zu gew\u00e4hrleisten.<\/p>\n
Ab der Landscape-Ansicht, in der wieder ausreichend Platz zur Anzeige zur Verf\u00fcgung steht, werden die Inhalte wieder nebeneinander dargestellt. Ausnahme ist hier der erste Inhaltsblock, der erst ab der Desktop-Ansicht dreispaltig wird, um die Lesbarkeit weiterhin zu gew\u00e4hrleisten.<\/p>\n
In der Landscape-Ansicht wird das Video noch in einer extra Zeile angezeigt. Dar\u00fcber hinaus wird an der Stelle noch eine kleine Besonderheit verwendet, die ich im folgenden Abschnitt genauer erkl\u00e4ren m\u00f6chte. Hier wird ein Seitenumbruch zwischen Text und Video platziert, welcher erst ab der Desktop-Ansicht ausgeblendet wird.<\/p>\n
Dieser dient dazu einen kleinen Abstand zwischen Text und Video zu schaffen, so lange diese Elemente untereinander dargestellt werden, da diese sonst zu nahe beieinander liegen w\u00fcrden.<\/p>\n
Wie das Beispiel dann live aussehen w\u00fcrde, zeigen die folgenden Bilder:<\/p>\n
Mobile Ansicht<\/h4>\n
<\/p>\n
![\"Beispiel](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/abb6.png\")
<\/a>Abb. 6: Beispiel f\u00fcr mobile Ansicht<\/p><\/div>\n
\nPortrait-Ansicht<\/h4>\n
<\/p>\n
![\"Beispiel](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/abb7-e1520342998794.png\")
<\/a>Abb. 7: Beispiel f\u00fcr die Portrait-Ansicht<\/p><\/div>\n
\nLandscape-Ansicht<\/h4>\n
<\/p>\n
![\"Beispiel](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/abb8.png\")
<\/a>Abb. 8: Beispiel f\u00fcr die Landscape-Ansicht<\/p><\/div>\n
\nDesktop-Ansicht<\/h4>\n
<\/p>\n
![\"Beispiel](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/abb9.png\")
<\/a>Abb. 9: Beispiel f\u00fcr die Desktop-Ansicht<\/p><\/div>\n
Inhalte je nach Ansicht anzeigen oder ausblenden<\/h3>\n
Je nach eingebundenem Inhalt kann es notwendig sein, dass dieser nur f\u00fcr bestimmte Ansichten angezeigt wird oder in bestimmten Ansichten durch eine alternative Darstellung ausgetauscht werden soll. Dies l\u00e4sst sich mit den hidden-*<\/em>– und visible-*<\/em>– Klassen umsetzen.<\/p>\nSollen zum Beispiel s\u00e4mtliche Bilder und Videos aus der mobilen Ansicht entfernt werden, sodass nur noch Text angezeigt wird, kann folgendes HTML verwendet werden:<\/p>\n
<!-- Drei Inhalte nebeneinander -->\r\n<div class=\"row\">\r\n<div class=\"hidden-xs hidden-sm col-md-4\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild1.png\" \/>\r\n<\/div>\r\n\r\n<div class=\"col-xs-12 col-md-8 col-lg-4\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n\r\n<div class=\"hidden-xs hidden-sm col-md-12 col-lg-4\">\r\n<br class=\"hidden-lg\">\r\n<div class=\"embed-responsive embed-responsive-16by9\">\r\n<iframe class=\"embed-responsive-item\" src=\"https:\/\/player.vimeo.com\/video\/163276989?color=00599d&title=0&byline=0&portrait=0?autoplay=1\"><\/iframe>\r\n<\/div>\r\n\r\n<\/div>\r\n<\/div><\/pre>\nObiges Beispiel w\u00fcrde daf\u00fcr sorgen, dass auf mobilen Ger\u00e4ten und in der Portrait-Ansicht nur der Text angezeigt wird, w\u00e4hrend ab der Landscape-Ansicht wieder Bild und Video angezeigt werden.<\/p>\n
Soll ein Inhalt nur f\u00fcr eine ganz bestimmte Ansicht angezeigt werden, so l\u00e4sst sich dies \u00fcber die visible-*<\/em>-Klassen erreichen. Dies kann zum Beispiel notwendig sein, um f\u00fcr eine bestimmte Ansicht ein Bild anzuzeigen, welches genau auf die gew\u00e4hlte Ansicht angepasst ist.<\/p>\nBeispiel:<\/p>\n
<!-- Bild mit Alternative f\u00fcr mobile Ger\u00e4te -->\r\n<div class=\"row\">\r\n<div class=\"hidden-xs col-sm-12\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild1.png\" \/>\r\n<\/div>\r\n<div class=\"visible-xs col-xs-12\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild1_xs.png\" \/>\r\n<\/div>\r\n<\/div><\/pre>\nDieses Beispiel w\u00fcrde einen Inhalt erzeugen, welcher ein Bild enth\u00e4lt, welches ab der Portrait-Ansicht angezeigt wird und eine Alternative beinhaltet, die nur auf mobilen Ger\u00e4ten angezeigt werden wird. S\u00e4mtliche Beispiele k\u00f6nnen nat\u00fcrlich analog f\u00fcr die anderen Ansichten angewendet werden<\/p>\n
Schluss<\/h2>\n
Und damit sind wir auch schon wieder am Ende angelangt. Ich hoffe, ich konnte euch mit diesem kleinen Tutorial ein klein wenig n\u00e4her bringen, wie das Bootstrap-Gridsystem genutzt werden kann, um Inhalte sauber gegliedert zur Ansicht zu bringen.<\/p>\n
M\u00f6chtet ihr noch etwas wissen oder habt ihr Vorschl\u00e4ge f\u00fcr k\u00fcnftige Tutorials? Haut in die Tasten und lasst es uns wissen!<\/p>\n
\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n <div class=\"col-xs-12\">[...]<\/div>\r\n <\/div><\/pre>\n
- \n
- col-xs-*<\/em>: Das Element mit dieser Klasse erh\u00e4lt die Anzahl an Spalten in der mobilen Ansicht, wie angegeben. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12). XS steht f\u00fcr Extra Small, also sehr kleine Anzeigeger\u00e4te.<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- eine Spalte in der mobilen Ansicht -->\r\n<div class=\"col-xs-1\">[...]<\/div>\r\n<!-- zwei Spalten in der mobilen Ansicht -->\r\n<div class=\"col-xs-2\">[...]<\/div>\r\n<!-- drei Spalten in der mobilen Ansicht -->\r\n<div class=\"col-xs-3\">[...]<\/div>\r\n<!-- etc. -->\r\n<\/div><\/pre>\n
- \n
- col-sm-*<\/em>: Das Element mit dieser Klasse erh\u00e4lt die Anzahl an Spalten in der Ansicht f\u00fcr Tablets im Portrait-Modus, wie angegeben. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12). SM steht f\u00fcr small to medium, also kleinere bis mittelgrosse Anzeiger\u00e4te.<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- eine Spalte in der Portrait-Ansicht -->\r\n<div class=\"col-sm-1\">[...]<\/div>\r\n<!-- zwei Spalten in der Portrait-Ansicht -->\r\n<div class=\"col-sm-2\">[...]<\/div>\r\n<!-- drei Spalten in der Portrait-Ansicht -->\r\n<div class=\"col-sm-3\">[...]<\/div>\r\n<!-- etc. -->\r\n<\/div><\/pre>\n
- \n
- col-md-*<\/em>: Das Element mit dieser Klasse erh\u00e4lt die Anzahl an Spalten in der Ansicht f\u00fcr Tablets im Landscape-Modus, wie angegeben. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12). MD kann man mit Medium Devices \u00fcbersetzen, also mittelgrosse Anzeigeger\u00e4te.<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- eine Spalte in der Landscape-Ansicht -->\r\n<div class=\"col-md-1\">[...]<\/div>\r\n<!-- zwei Spalten in der Landscape-Ansicht -->\r\n<div class=\"col-md-2\">[...]<\/div>\r\n<!-- drei Spalten in der Landscape-Ansicht -->\r\n<div class=\"col-md-3\">[...]<\/div>\r\n<!-- etc. -->\r\n<\/div><\/pre>\n
- \n
- col-lg-*<\/em>: Das Element mit dieser Klasse erh\u00e4lt die Anzahl an Spalten in der Ansicht f\u00fcr Desktop-PCs und Laptops, wie angegeben. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12). LG steht dabei simpel f\u00fcr large, also gro\u00dfe Anzeigeger\u00e4te.<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- eine Spalte in der Desktopansicht -->\r\n<div class=\"col-lg-1\">[...]<\/div>\r\n<!-- zwei Spalten in der Desktopansicht -->\r\n<div class=\"col-lg-2\">[...]<\/div>\r\n<!-- drei Spalten in der Desktopansicht -->\r\n<div class=\"col-lg-3\">[...]<\/div>\r\n<!-- etc. -->\r\n<\/div><\/pre>\n
Offsets<\/h3>\n
- \n
- col-xs-offset-*<\/em>: Das Element mit dieser Klasse wird in der mobilen Ansicht um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- sechs Spalten in der mobilen Ansicht, um eine Spalte nach rechts einger\u00fcckt -->\r\n<div class=\"col-xs-6 col-xs-offset-1\">[...]<\/div>\r\n<\/div><\/pre>\n
- \n
- col-sm-offset-*<\/em>: Das Element mit dieser Klasse wird in der Ansicht f\u00fcr Tablets im Portrait-Modus um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- sechs Spalten in der Portrait-Ansicht, um eine Spalte nach rechts einger\u00fcckt -->\r\n<div class=\"col-sm-6 col-sm-offset-1\">[...]<\/div>\r\n<\/div><\/pre>\n
- \n
- col-md-offset-*:<\/em> Das Element mit dieser Klasse wird in der Ansicht f\u00fcr Tablets im Landscape-Modus um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- sechs Spalten in der Landscape-Ansicht, um eine Spalte nach rechts einger\u00fcckt -->\r\n<div class=\"col-md-6 col-md-offset-1\">[...]<\/div>\r\n<\/div><\/pre>\n
- \n
- col-lg-offset-*<\/em>: Das Element mit dieser Klasse wird in der Desktop-Ansicht um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<!-- sechs Spalten in der Desktop-Ansicht, um eine Spalte nach rechts einger\u00fcckt -->\r\n<div class=\"col-lg-6 col-lg-offset-1\">[...]<\/div>\r\n<\/div><\/pre>\n
Verkettungen von Klassen<\/h3>\n
Es ist zu beachten, dass eine Verkettung der Klassen m\u00f6glich ist, sodass wir eine unterschiedliche Aufteilung der Spalten f\u00fcr die unterschiedlichen Ansichten erreichen k\u00f6nnen. Es k\u00f6nnen also in einer Anweisung die Regeln f\u00fcr verschiedengro\u00dfe Ger\u00e4te auf einmal geschrieben werden.<\/p>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<div class=\"col-xs-12 col-sm-8 col-md-6 col-lg-4\">[...]<\/div>\r\n<\/div><\/pre>\n
Das Beispiel w\u00fcrde in Worte \u00fcbersetzt folgendes bedeuten: Volle Breite in der mobilen Ansicht, acht Spalten in der Ansicht Tablet-Portrait, sechs Spalten in der Ansicht Tablet-Landscape und vier Spalten in der Desktopansicht.<\/p>\n
Analog verh\u00e4lt es sich auch bei der Vergabe der Offset-Klassen, sodass auch hier unterschiedlich gro\u00dfe Einr\u00fcckungen f\u00fcr die unterschiedlichen Ansichten m\u00f6glich sind.<\/p>\n
Soll f\u00fcr aufeinanderfolgende Ansichten eine gleiche Spaltenverteilung oder Einr\u00fcckung erreicht werden, so w\u00fcrde es reichen, nur die Klasse f\u00fcr die kleinste Ansicht zu vergeben. Ein col-xs-6 w\u00fcrde also auch f\u00fcr alle anderen Ansichten sechs Spalten vergeben, wenn keine weitere Klasse f\u00fcr eine gr\u00f6\u00dfere Ansicht folgt.<\/p>\n
Beispiel:<\/p>\n
<div class=\"row\">\r\n<div class=\"col-xs-6 col-md-4\">[...]<\/div>\r\n<\/div><\/pre>\n
In Worten w\u00fcrden diese Anweisungen folgendes bedeuten: In der mobilen Ansicht und in der Ansicht f\u00fcr Tablets im Portrait-Modus sei bitte sechs Spalten breit, f\u00fcr die Ansicht im Landscape-Modus und in der Desktop-Ansicht aber bitte nur vier Spalten.<\/p>\n
Gleiches Verhalten gilt auch hier f\u00fcr die Offset-Klassen, sodass hier unn\u00f6tiger Code vermieden werden kann.<\/p>\n
Sollen die Spalten aber f\u00fcr jede Ansicht individuell vergeben werden, so m\u00fcssen die jeweiligen Klassen auch entsprechend genutzt werden. Dies ist in Ausnahmef\u00e4llen erforderlich, wenn bestimmte Inhalte es erfordern, dass sie in einer Ansicht anders dargestellt werden m\u00fcssen.<\/p>\n
Automatisches Anpassen von Bildern oder anderen Inhalten<\/h3>\n
- \n
- img-responsive:<\/strong> Diese Klasse an ein Bildelement angeh\u00e4ngt bewirkt, dass sich das Bild immer dem in seinem Container verf\u00fcgbaren Platz anpasst.<\/li>\n
- embed-responsive:<\/strong> Diese Klasse wird in einem HTML-Element ben\u00f6tigt, welches einen externen Inhalt, wie ein iframe oder ein Video, beinhalten soll, dass sich automatisch an die Aufl\u00f6sung des Endger\u00e4tes anpasst. Das Seitenverh\u00e4ltnis, in welchem der externe Inhalt angezeigt werden soll, kann \u00fcber die beiden nachfolgenden Klassen konfiguriert werden.<\/li>\n
- embed-responsive-16by9:<\/strong> Zeigt einen externen Inhalt im Seitenverh\u00e4ltnis von 16 zu 9 an.<\/li>\n
- embed-responsive-4by3:<\/strong> Zeigt einen externen Inhalt im Seitenverh\u00e4ltnis von 4 zu 3 an.<\/li>\n
- embed-responsive-item:<\/strong> Der externe Inhalt, der responsiv eingebunden werden soll, ben\u00f6tigt diese Klasse, damit die Anpassung an die Bildschirmaufl\u00f6sung korrekt funktioniert.<\/li>\n<\/ul>\n
Beispiel:<\/p>\n
<!-- 16:9 aspect ratio -->\r\n<div class=\"embed-responsive embed-responsive-16by9\">\r\n<iframe class=\"embed-responsive-item\" src=\"...\"><\/iframe>\r\n<\/div>\r\n\r\n<!-- 4:3 aspect ratio -->\r\n<div class=\"embed-responsive embed-responsive-4by3\">\r\n<iframe class=\"embed-responsive-item\" src=\"...\"><\/iframe>\r\n<\/div><\/pre>\n
Inhalte f\u00fcr bestimmte Aufl\u00f6sungen verstecken oder anzeigen<\/h3>\n
In manchen F\u00e4llen kann es allerdings sinnvoll sein, das Bild auszublenden, wenn es zu klein werden w\u00fcrde. Alternativ k\u00f6nnte f\u00fcr kleinere Ansichten ein anderes Bild hinterlegt werden, welches stattdessen angezeigt wird. Wie das funktioniert erkl\u00e4re ich im Folgenden.<\/p>\n
- \n
- hidden-xs:<\/strong> Ein Element mit dieser Klasse ist nur in der mobilen Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.<\/li>\n
- visible-xs:<\/strong> Ein Element mit dieser Klasse wird nur in der mobilen Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar.<\/li>\n
- hidden-sm:<\/strong> Ein Element mit dieser Klasse ist nur in der Portrait-Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.<\/li>\n
- visible-sm:<\/strong> Ein Element mit dieser Klasse wird nur in der Portrait-Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar<\/li>\n
- hidden-md:<\/strong> Ein Element mit dieser Klasse ist nur in der Landscape-Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.<\/li>\n
- visible-md:<\/strong> Ein Element mit dieser Klasse wird nur in der Landscape-Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar.<\/li>\n
- hidden-lg:<\/strong> Ein Element mit dieser Klasse ist nur in der Desktop-Ansicht nicht sichtbar. In allen anderen Ansichten wird dieses Element dennoch angezeigt.<\/li>\n
- visible-lg:<\/strong> Ein Element mit dieser Klasse wird nur in der Desktop-Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar.<\/li>\n<\/ul>\n
Zur Veranschaulichung der unterschiedlichen Klassen hier noch eine kleine Tabelle. Diese ist auch hier einsehbar:<\/a><\/p>\n
<\/a>Abb. 1: Tabelle zur Veranschaulichung der Sichtbarkeit<\/p><\/div>\n
Texte und andere Inhalte vorbereiten<\/h2>\n
Nachdem wir nun die wichtigsten Klassen zum responsiven Gliedern von Texten gezeigt haben, k\u00f6nnen wir uns um die eigentliche Arbeit k\u00fcmmern: Wir brauchen einen Text und Bilder beziehungsweise andere Inhalte, die wir als Content in den Shop einbauen wollen.<\/p>\n
F\u00fcr mein Beispiel werde ich einen automatisch generierten Blindtext, sowie einige Testbilder und ein Testvideo verwenden. Diese sollten den Zweck der Veranschaulichung gut erf\u00fcllen.<\/p>\n
Folgende Bilder werden verwendet. Hier zur Veranschaulichung verkleinert:<\/p>\n
<\/a><\/a><\/a><\/p>\nFolgendes Video soll von extern eingebunden werden:<\/p>\n
https:\/\/player.vimeo.com\/video\/163276989<\/a><\/p>\n
Folgender Text soll verwendet werden:<\/p>\n
\u201cLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.<\/i>\u201d<\/span><\/p>\n
Damit w\u00e4ren unsere Vorbereitungen abgeschlossen und wir k\u00f6nnen uns darum k\u00fcmmern, den Text wie gew\u00fcnscht zu formatieren.<\/p>\n
Tipp: <\/b>
\nNutzt zum Formatieren der Texte einen Texteditor mit so genannter Syntax-Highlighting-Funktion. Damit behaltet ihr einen besseren \u00dcberblick \u00fcber euren Text.<\/div>\nTexte und andere Inhalte passend anordnen<\/h2>\n
Nachdem wir nun alle relevanten Begriffe gekl\u00e4rt und alle Inhalte zusammen gesammelt haben, die wir f\u00fcr unseren Content ben\u00f6tigen, k\u00f6nnen wir damit beginnen, die Texte, Bilder und externen Inhalte in die gew\u00fcnschte Reihenfolge zu bringen.<\/p>\n
Gew\u00fcnschter Inhalt \u00fcber die gesamte Breite<\/h3>\n
Soll ein Inhalt \u00fcber die gesamte verf\u00fcgbare Breite angezeigt werden, so wird folgendes HTML ben\u00f6tigt. Da in meinem Beispiel in allen Ansichten der Inhalt \u00fcber die gesamte Breite angezeigt werden soll, wird nur die Klasse col-xs-12<\/em> ben\u00f6tigt.<\/p>\n
Ein Bild \u00fcber die gesamte Breite anzeigen:<\/p>\n
<div class=\"row\">\r\n<!-- Ein Bild \u00fcber die gesamte verf\u00fcgbare Breite -->\r\n<div class=\"col-xs-12\">\r\n<img class=\"img-responsive\" src=\"pfad\/zum\/bild.png\" alt=\"Beispielbild\"\/>\r\n<\/div>\r\n<\/div><\/pre>\n
Dies w\u00fcrde folgende Ausgabe im Shop erzeugen:<\/p>\n
<\/a>Abb. 2: Einbindung eines Testbildes \u00fcber die gesamte Breite. Da das Bild nur 800px breit ist, ist noch ein kleiner Rand rechts zu sehen<\/p><\/div>\n
Text \u00fcber die gesamte Breite anzeigen<\/h3>\n
<div class=\"row\">\r\n<!-- Ein Text \u00fcber die gesamte verf\u00fcgbare Breite -->\r\n<div class=\"col-xs-12\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div><\/pre>\n
Dieser Text w\u00fcrde im Shop dann wie folgt angezeigt werden:<\/p>\n
<\/a>Abb. 3: Einbindung eines Textes \u00fcber die gesamte Breite des Shops<\/p><\/div>\n
Einen externen Inhalt \u00fcber die gesamte Breite anzeigen<\/h3>\n
<div class=\"row\">\r\n<!-- Ein Video \u00fcber die gesamte verf\u00fcgbare Breite -->\r\n<div class=\"col-xs-12\">\r\n<div class=\"embed-responsive embed-responsive-16by9\">\r\n<iframe class=\"embed-responsive-item\" src=\"https:\/\/player.vimeo.com\/video\/163276989?color=00599d&title=0&byline=0&portrait=0?autoplay=1\"><\/iframe>\r\n<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
Dies w\u00fcrde folgendes Video im 16:9 Format \u00fcber die gesamte Seite anzeigen:<\/p>\n
<\/a>Abb. 4: Beispielhafte Einbindung eines Videos<\/p><\/div>\n
Ein einger\u00fcckter Inhalt<\/h3>\n
Soll ein Inhalt ein St\u00fcckchen einger\u00fcckt dargestellt werden, so ist das mit den oben genannten offset-Klassen m\u00f6glich. Da das Vorgehen hier f\u00fcr alle Inhalte analog ist, zeige ich dies nur anhand eines einzelnen Beispiels:<\/p>\n
<div class=\"row\">\r\n<!-- Ein Text mit einer Spalte Einr\u00fcckung -->\r\n<div class=\"col-xs-offset-1 col-xs-11\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div><\/pre>\n
Das obige Beispiel w\u00fcrde einen Text erzeugen, der um eine Spalte in allen Ansichten einger\u00fcckt ist.<\/p>\n
<\/a>Abb 5: Beispielhafte Einbindung eines einger\u00fcckten Inhalts<\/p><\/div>\n
Sollen f\u00fcr die unterschiedlichen Ansichten unterschiedlich starke Einr\u00fcckungen verwendet werden, m\u00fcssen die offset-Klassen der jeweiligen Ansichten verwendet werden und die Spaltenanzahl des Inhalts ist entsprechend anzupassen.<\/p>\n
<div class=\"row\">\r\n<!-- Ein Text \u00fcber die gesamte verf\u00fcgbare Breite -->\r\n<div class=\"col-xs-offset-1 col-md-offset-2 col-xs-11 col-md-10\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div><\/pre>\n
Dieses modifizierte Beispiel w\u00fcrde einen Text erzeugen, der in der mobilen und in der Portrait-Ansicht um eine Spalte einger\u00fcckt ist und ab der Landscape-Ansicht um zwei Spalten einger\u00fcckt wird.<\/p>\n
Mehrere Inhalte nebeneinander<\/h3>\n
Um mehrere Inhalte gut lesbar und gegliedert anzuzeigen, bietet es sich hin und wieder an, diese auch nebeneinander anzuzeigen. Wie sich mehrere Inhalte nebeneinander anordnen lassen, m\u00f6chte ich im folgenden Beispiel veranschaulichen.<\/p>\n
<!-- Drei Inhalte nebeneinander -->\r\n<div class=\"row\">\r\n<div class=\"col-xs-12 col-md-4\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild1.png\" \/>\r\n<\/div>\r\n\r\n<div class=\"col-xs-12 col-md-8 col-lg-4\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n\r\n<div class=\"col-xs-12 col-lg-4\">\r\n<br class=\"hidden-lg\">\r\n<div class=\"embed-responsive embed-responsive-16by9\">\r\n<iframe class=\"embed-responsive-item\" src=\"https:\/\/player.vimeo.com\/video\/163276989?color=00599d&title=0&byline=0&portrait=0?autoplay=1\"><\/iframe>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<br>\r\n<!-- Ein Text \u00fcber die gesamte Breite -->\r\n<div class=\"row\">\r\n<div class=\"col-xs-12\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n<br>\r\n<!-- Ein Text und ein Bild, die sich die Breite zu gleichen Teilen aufteilen -->\r\n<div class=\"row\">\r\n<div class=\"col-xs-12 col-md-6\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n\r\n<div class=\"col-xs-12 col-md-6\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild2.png\" \/>\r\n<\/div>\r\n<\/div>\r\n\r\n<br>\r\n<!-- Ein Text \u00fcber die gesamte Breite -->\r\n<div class=\"row\">\r\n<div class=\"col-xs-12\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n<br>\r\n<!-- Ein Bild und ein Text, die sich die Breite im Verh\u00e4ltnis eins zu drei teilen -->\r\n<div class=\"row\">\r\n<div class=\"col-xs-12 col-md-3\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild3.png\" \/>\r\n<\/div>\r\n\r\n<div class=\"col-xs-12 col-md-9\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n<\/div><\/pre>\n
Das hier verwendete Beispiel vereint so gut wie alle vorherigen Beispiele in sich.<\/p>\n
Dieses w\u00fcrde einen Content erzeugen, welcher in der mobilen Ansicht alle Inhalte \u00fcber die gesamte Breite anzeigt, um eine gute Lesbarkeit zu gew\u00e4hrleisten.<\/p>\n
Ab der Landscape-Ansicht, in der wieder ausreichend Platz zur Anzeige zur Verf\u00fcgung steht, werden die Inhalte wieder nebeneinander dargestellt. Ausnahme ist hier der erste Inhaltsblock, der erst ab der Desktop-Ansicht dreispaltig wird, um die Lesbarkeit weiterhin zu gew\u00e4hrleisten.<\/p>\n
In der Landscape-Ansicht wird das Video noch in einer extra Zeile angezeigt. Dar\u00fcber hinaus wird an der Stelle noch eine kleine Besonderheit verwendet, die ich im folgenden Abschnitt genauer erkl\u00e4ren m\u00f6chte. Hier wird ein Seitenumbruch zwischen Text und Video platziert, welcher erst ab der Desktop-Ansicht ausgeblendet wird.<\/p>\n
Dieser dient dazu einen kleinen Abstand zwischen Text und Video zu schaffen, so lange diese Elemente untereinander dargestellt werden, da diese sonst zu nahe beieinander liegen w\u00fcrden.<\/p>\n
Wie das Beispiel dann live aussehen w\u00fcrde, zeigen die folgenden Bilder:<\/p>\n
Mobile Ansicht<\/h4>\n
<\/p>\n
<\/a>Abb. 6: Beispiel f\u00fcr mobile Ansicht<\/p><\/div>\n
\nPortrait-Ansicht<\/h4>\n
<\/p>\n
<\/a>Abb. 7: Beispiel f\u00fcr die Portrait-Ansicht<\/p><\/div>\n
\nLandscape-Ansicht<\/h4>\n
<\/p>\n
<\/a>Abb. 8: Beispiel f\u00fcr die Landscape-Ansicht<\/p><\/div>\n
\nDesktop-Ansicht<\/h4>\n
<\/p>\n
<\/a>Abb. 9: Beispiel f\u00fcr die Desktop-Ansicht<\/p><\/div>\n
Inhalte je nach Ansicht anzeigen oder ausblenden<\/h3>\n
Je nach eingebundenem Inhalt kann es notwendig sein, dass dieser nur f\u00fcr bestimmte Ansichten angezeigt wird oder in bestimmten Ansichten durch eine alternative Darstellung ausgetauscht werden soll. Dies l\u00e4sst sich mit den hidden-*<\/em>– und visible-*<\/em>– Klassen umsetzen.<\/p>\n
Sollen zum Beispiel s\u00e4mtliche Bilder und Videos aus der mobilen Ansicht entfernt werden, sodass nur noch Text angezeigt wird, kann folgendes HTML verwendet werden:<\/p>\n
<!-- Drei Inhalte nebeneinander -->\r\n<div class=\"row\">\r\n<div class=\"hidden-xs hidden-sm col-md-4\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild1.png\" \/>\r\n<\/div>\r\n\r\n<div class=\"col-xs-12 col-md-8 col-lg-4\">\r\n<p>\r\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\r\n<\/p>\r\n<\/div>\r\n\r\n<div class=\"hidden-xs hidden-sm col-md-12 col-lg-4\">\r\n<br class=\"hidden-lg\">\r\n<div class=\"embed-responsive embed-responsive-16by9\">\r\n<iframe class=\"embed-responsive-item\" src=\"https:\/\/player.vimeo.com\/video\/163276989?color=00599d&title=0&byline=0&portrait=0?autoplay=1\"><\/iframe>\r\n<\/div>\r\n\r\n<\/div>\r\n<\/div><\/pre>\n
Obiges Beispiel w\u00fcrde daf\u00fcr sorgen, dass auf mobilen Ger\u00e4ten und in der Portrait-Ansicht nur der Text angezeigt wird, w\u00e4hrend ab der Landscape-Ansicht wieder Bild und Video angezeigt werden.<\/p>\n
Soll ein Inhalt nur f\u00fcr eine ganz bestimmte Ansicht angezeigt werden, so l\u00e4sst sich dies \u00fcber die visible-*<\/em>-Klassen erreichen. Dies kann zum Beispiel notwendig sein, um f\u00fcr eine bestimmte Ansicht ein Bild anzuzeigen, welches genau auf die gew\u00e4hlte Ansicht angepasst ist.<\/p>\n
Beispiel:<\/p>\n
<!-- Bild mit Alternative f\u00fcr mobile Ger\u00e4te -->\r\n<div class=\"row\">\r\n<div class=\"hidden-xs col-sm-12\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild1.png\" \/>\r\n<\/div>\r\n<div class=\"visible-xs col-xs-12\">\r\n<img alt=\"Beispielbild\" class=\"img-responsive\" src=\"images\/testbild1_xs.png\" \/>\r\n<\/div>\r\n<\/div><\/pre>\n
Dieses Beispiel w\u00fcrde einen Inhalt erzeugen, welcher ein Bild enth\u00e4lt, welches ab der Portrait-Ansicht angezeigt wird und eine Alternative beinhaltet, die nur auf mobilen Ger\u00e4ten angezeigt werden wird. S\u00e4mtliche Beispiele k\u00f6nnen nat\u00fcrlich analog f\u00fcr die anderen Ansichten angewendet werden<\/p>\n
Schluss<\/h2>\n
Und damit sind wir auch schon wieder am Ende angelangt. Ich hoffe, ich konnte euch mit diesem kleinen Tutorial ein klein wenig n\u00e4her bringen, wie das Bootstrap-Gridsystem genutzt werden kann, um Inhalte sauber gegliedert zur Ansicht zu bringen.<\/p>\n
M\u00f6chtet ihr noch etwas wissen oder habt ihr Vorschl\u00e4ge f\u00fcr k\u00fcnftige Tutorials? Haut in die Tasten und lasst es uns wissen!<\/p>\n
\n - visible-xs:<\/strong> Ein Element mit dieser Klasse wird nur in der mobilen Ansicht angezeigt. In allen anderen Ansichten ist dieses Element nicht sichtbar.<\/li>\n
- embed-responsive:<\/strong> Diese Klasse wird in einem HTML-Element ben\u00f6tigt, welches einen externen Inhalt, wie ein iframe oder ein Video, beinhalten soll, dass sich automatisch an die Aufl\u00f6sung des Endger\u00e4tes anpasst. Das Seitenverh\u00e4ltnis, in welchem der externe Inhalt angezeigt werden soll, kann \u00fcber die beiden nachfolgenden Klassen konfiguriert werden.<\/li>\n
- img-responsive:<\/strong> Diese Klasse an ein Bildelement angeh\u00e4ngt bewirkt, dass sich das Bild immer dem in seinem Container verf\u00fcgbaren Platz anpasst.<\/li>\n
- col-lg-offset-*<\/em>: Das Element mit dieser Klasse wird in der Desktop-Ansicht um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
- col-md-offset-*:<\/em> Das Element mit dieser Klasse wird in der Ansicht f\u00fcr Tablets im Landscape-Modus um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
- col-sm-offset-*<\/em>: Das Element mit dieser Klasse wird in der Ansicht f\u00fcr Tablets im Portrait-Modus um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
- col-xs-offset-*<\/em>: Das Element mit dieser Klasse wird in der mobilen Ansicht um die angegebene Anzahl an Spalten nach rechts einger\u00fcckt. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12).<\/li>\n<\/ul>\n
- col-lg-*<\/em>: Das Element mit dieser Klasse erh\u00e4lt die Anzahl an Spalten in der Ansicht f\u00fcr Desktop-PCs und Laptops, wie angegeben. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12). LG steht dabei simpel f\u00fcr large, also gro\u00dfe Anzeigeger\u00e4te.<\/li>\n<\/ul>\n
- col-md-*<\/em>: Das Element mit dieser Klasse erh\u00e4lt die Anzahl an Spalten in der Ansicht f\u00fcr Tablets im Landscape-Modus, wie angegeben. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12). MD kann man mit Medium Devices \u00fcbersetzen, also mittelgrosse Anzeigeger\u00e4te.<\/li>\n<\/ul>\n
- col-sm-*<\/em>: Das Element mit dieser Klasse erh\u00e4lt die Anzahl an Spalten in der Ansicht f\u00fcr Tablets im Portrait-Modus, wie angegeben. Der Stern dient hier als Platzhalter f\u00fcr die verf\u00fcgbare Anzahl an Spalten (Minimum: 1, Maximum: 12). SM steht f\u00fcr small to medium, also kleinere bis mittelgrosse Anzeiger\u00e4te.<\/li>\n<\/ul>\n