{"id":12027,"date":"2018-05-23T10:42:31","date_gmt":"2018-05-23T10:42:31","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=12027"},"modified":"2018-07-20T14:11:10","modified_gmt":"2018-07-20T14:11:10","slug":"bootstrap-3-rastersystem-und-medienabfragen","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/","title":{"rendered":"Bootstrap 3: Rastersystem und Media Queries"},"content":{"rendered":"<p>Bootstrap bietet viele\u00a0Vorteile f\u00fcr Webdesigner.\u00a0 Insbesondere\u00a0macht das Framework die Erstellung\u00a0von responsive\u00a0Websites\u00a0m\u00f6glich. In diesem Beitrag wird ausf\u00fchrlich erkl\u00e4rt, wie man Layouts f\u00fcr verschiedene Endger\u00e4te erstellen kann.<\/p>\n<p><span style=\"font-weight: 400;\">2011 haben Mark Otto und Jacob Thorton es geschafft, das leistungsf\u00e4higste CSS-Framework zu entwickeln. Bootstrap ist heute unter Webentwicklern gut bekannt und geh\u00f6rt zu popul\u00e4rsten Open-Source-Frameworks weltweit. Als Bootstrap 3 ver\u00f6ffentlicht wurde, gab es wesentliche \u00c4nderungen gegen\u00fcber der letzten Version. Der Hauptunterschied lag in den Rastersystemen. Wenn sich Bootstrap 2 auf zwei Bildschirmgr\u00f6\u00dfen \u00a0(Desktop und Mobil) orientierte, verf\u00fcgt Bootstrap 3 \u00fcber ein Mobile-First-basiertes Rastersystem, das Spalten \u00fcber verschiedene Endger\u00e4te - <\/span><span style=\"font-weight: 400;\">Smartphones, Tablets, Desktops und gro\u00dfe Desktops - skaliert. Dieser<\/span><span style=\"font-weight: 400;\">\u00a0Trend verst\u00e4rkt sich in der\u00a04. Version des Frameworks.<\/span><\/p>\n<table>\n<tbody>\n<tr style=\"background-color: #ebebeb;\">\n<td style=\"text-align: center;\" width=\"33%\">\n<h4>Bootstrap 2<\/h4>\n<\/td>\n<td style=\"text-align: center;\" width=\"34%\">\n<h4>Bootstrap 3<\/h4>\n<\/td>\n<td style=\"text-align: center;\" width=\"33%\">\n<h4>Bootstrap 4<\/h4>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #fcfcfc;\">\n<td style=\"text-align: center;\" width=\"319\">Das erstellte Raster funktioniert auf Desktops und stapelt, wenn die Browsergr\u00f6\u00dfe unter 767px liegt. Diese Einschr\u00e4nkung ergibt sich dadurch, dass Ihr nur 1 Raster in Desktop-Browsern definieren k\u00f6nnt. Auf mobilen Ger\u00e4ten erstellt Ihr ein Raster, dessen Spalten \u00fcbereinander angeordnet werden.<\/td>\n<td style=\"text-align: center;\" width=\"319\">Das neue Bootsrap Rastersystem richtet sich auf Mobil-First aus. Wenn Ihr eine bestimmte Rastergr\u00f6\u00dfe festlegt, ist das ein Raster f\u00fcr <strong>dieses und gr\u00f6\u00dferes Darstellungsfeld.<\/strong><\/td>\n<td style=\"text-align: center;\" width=\"319\">Die neue Bootstrap-Version bietet ein verbessertes Rastersystem mit einer neuen Stufe, mit der sich mobile Nutzer besser als je zuvor ansprechen lassen. Zus\u00e4tzlich haben <strong>semantische Mixins<\/strong> das gro\u00dfe Update erfahren. Jetzt k\u00f6nnt Ihr von \u00fcberall aus auf ben\u00f6tigte Mixins zugreifen<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 style=\"text-align: center;\"><span style=\"font-weight: 400;\">Bootstrap 3 Beispiele von Spalten<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Es\u00a0mag auf den ersten Blick ein wenig\u00a0kompliziert erscheinen, daher\u00a0kommen wir ohne Beispiele nicht aus. Stellen wir uns vor, Ihr\u00a0wollt eine Website erstellen, die folgenderweise dargestellt wird:<\/span><\/p>\n<ul>\n<li>1 Spalte auf extra kleinen Ger\u00e4ten<\/li>\n<li>2 Spalten auf kleinen und mittleren Ger\u00e4ten<\/li>\n<li>4 Spalten auf gro\u00dfen Ger\u00e4ten<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Da das Rastersystem jetzt auf mobilen Ger\u00e4ten\u00a0<strong>kaskadiert<\/strong>, wird der Code so \u00a0aussehen.<\/span><\/p>\n<pre class=\" language-markup\" data-title=\"markup\"><code class=\" language-markup\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div\u00a0<span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>row<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div\u00a0<span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>col-sm-6 col-lg-3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n               Das ist ein Teil Eures Rasters\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div\u00a0<span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>col-sm-6 col-lg-3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        Das ist ein Teil Eures Rasters.\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div\u00a0<span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>col-sm-6 col-lg-3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        Das ist ein Teil Eures Rasters.\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>    \r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div\u00a0<span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>col-sm-6 col-lg-3<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        Das ist ein Teil Eures Rasters.\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>    \r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><span style=\"font-weight: 400;\">Wir brauchen f\u00fcr extra kleine Ger\u00e4te keine\u00a0Spaltenanzahl zu definieren, weil eine Spalte standardm\u00e4\u00dfig ist. Die Rastergr\u00f6\u00dfe muss f\u00fcr kleine Ger\u00e4te bestimmt werden. F\u00fcr\u00a0<strong>mittlere Ger\u00e4te <\/strong>sollte man\u00a0diese Einstellungen nicht vornehmen.\u00a0<\/span><span style=\"font-weight: 400;\">Das liegt an der Kaskadierung des Rasters. Wenn Ihr also die Gr\u00f6\u00dfe f\u00fcr <strong>sm<\/strong> definiert, wird diese Rastergr\u00f6\u00dfe f\u00fcr <strong>sm<\/strong>, <strong>md<\/strong> und <strong>lg<\/strong> angewendet. Weiter behandeln wir verschiedene Rastergr\u00f6\u00dfen und erkl\u00e4ren an Beispielen, wie Ihr\u00a0darauf Layouts aufbauen.<\/span><\/p>\n<h3 style=\"text-align: center;\"><span style=\"font-weight: 400;\">Rastergr\u00f6\u00dfen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Das ist der beste Teil des neuen Rastersystems. Ihr k\u00f6nnt damit eine Website erstellen, die\u00a0in 4 verschiedenen Browsern angezeigt wird. Unten seht Ihr Klassen-Pr\u00e4fix\u00a0 f\u00fcr das\u00a0Bootstrap-<wbr \/>Raster.<\/span><\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"php\"><span class=\"sumo_twilighter_highlighted twilighter-299735e9\">.<\/span><span class=\"sumo_twilighter_highlighted twilighter-299735e9\">col<\/span><span class=\"sumo_twilighter_highlighted twilighter-299735e9\">-<\/span><span class=\"sumo_twilighter_highlighted twilighter-299735e9\">xs<\/span><span class=\"sumo_twilighter_highlighted twilighter-299735e9\">-<\/span><span class=\"sumo_twilighter_highlighted twilighter-299735e9\">$\t<\/span>extra kleine Smartphones   bis<span class=\"sumo_twilighter_highlighted twilighter-299735e9\"> 768px<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<pre class=\"php\"><span class=\"sumo_twilighter_highlighted twilighter-218fab37\">.<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\">col<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\">-<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\">sm<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\">-<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\">$\t<\/span>kleine Ger\u00e4te\t   <span class=\"sumo_twilighter_highlighted twilighter-218fab37\">Tablets 768px <\/span>und gr\u00f6\u00dfer\r\n<span class=\"sumo_twilighter_highlighted twilighter-218fab37\">.<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\">col<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\">-<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\">md<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\">-<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\">$\t<\/span>mittelere Ger\u00e4te<span class=\"sumo_twilighter_highlighted twilighter-218fab37\">\tDesktops 992px <\/span>und gr\u00f6\u00dfer<\/pre>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"php\">.col-lg-$\tgro\u00dfe Ger\u00e4te\tgro\u00dfe Desktops 1200px und gr\u00f6\u00dfer<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Die offizielle<a href=\"http:\/\/getbootstrap.com\/css\/#grid\" target=\"_blank\" rel=\"nofollow\"> Dokumentation zu Bootstrap<\/a> gibt einen viel umfassenderen Einblick dar\u00fcber, wie das Raster funktioniert. Macht Euch damit vertraut, um eine bessere \u00dcbersicht \u00fcber Gr\u00f6\u00dfen von Spalten, L\u00fccken, maximalen Spaltengr\u00f6\u00dfen, Seitenbreiten zu bekommen.<\/p>\n<h3 style=\"text-align: center;\"><span style=\"font-weight: 400;\">Standardm\u00e4\u00dfige Gr\u00f6\u00dfen f\u00fcrs Bootstrap-Raster <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Manchmal m\u00fcsst Ihr Media Queries einsetzen, damit Eure \u00a0Website so funktioniert, wie Ihr es wollt. Es ist wichtig standardm\u00e4\u00dfige Gr\u00f6\u00dfen zu kennen, um das Raster\u00a0 erweitern zu k\u00f6nnen.\u00a0<\/span><\/p>\n<h3 style=\"text-align: center;\"><span style=\"font-weight: 400;\">Bootstrap 3 Media Queries und Breakpoints<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bootstrap 3 ist ein auf dem Mobile First-Prinzip basierendes Frontend-Framework. Wir haben die richtige Reihenfolge f\u00fcr Media Queries angegeben. F\u00fcr den Fall, wenn einige Menschen die Mobil First-Methode nicht einsetzen, folgen nicht-mobile erste Breakpoints weiter. Beide Varianten werden technisch funktionieren. <strong>Min-width<\/strong>: Bezieht sich auf alles, was gr\u00f6\u00dfer als angegebene Bildschirmbreite oder der gleich ist. <strong>Max-width:<\/strong> Bezieht sich auf alles, was kleiner als angegebene Bildschirmbreite oder der gleich ist.<\/span><\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"php\">\/*==================================================\r\n=            Bootstrap 3 Media Queries             =\r\n==================================================*\/\r\n\u00a0\r\n\u00a0\r\n\u00a0\r\n\u00a0\r\n\t\/*==========  Mobile-First-Methode  ==========*\/\r\n\u00a0\r\n\t\/* Custom, iPhone Retina *\/\r\n\t@media only screen and (min-width : 320px){\r\n\u00a0\r\n\t}\r\n\u00a0\r\n\t\/* Extra Small Devices, Phones *\/\r\n\t@media only screen and (min-width : 480px){\r\n\u00a0\r\n\t}\r\n\u00a0\r\n\t\/* Small Devices, Tablets *\/\r\n\t@media only screen and (min-width : 768px){\r\n\u00a0\r\n\t}\r\n\u00a0\r\n\t\/* Medium Devices, Desktops *\/\r\n\t@media only screen and (min-width : 992px){\r\n\u00a0\r\n\t}\r\n\u00a0\r\n\t\/* Large Devices, Wide Screens *\/\r\n\t@media only screen and (min-width : 1200px){\r\n\u00a0\r\n\t}\r\n\u00a0\r\n\u00a0\r\n\u00a0\r\n\t\/*==========  nicht-mobile Methode  ==========*\/\r\n\u00a0\r\n\t\/* Large Devices, Wide Screens *\/\r\n\t@media only screen and (max-width : 1200px){\r\n\u00a0\r\n\t}\r\n\u00a0\r\n\t\/* Medium Devices, Desktops *\/\r\n\t@media only screen and (max-width : 992px){\r\n\u00a0\r\n\t}\r\n\u00a0\r\n\t\/* Small Devices, Tablets *\/\r\n\t@media only screen and (max-width : 768px){\r\n\u00a0\r\n\t}\r\n\u00a0\r\n\t\/* Extra Small Devices, Phones *\/\r\n\t@media only screen and (max-width : 480px){\r\n\u00a0\r\n\t}\r\n\u00a0\r\n\t\/* Custom, iPhone Retina *\/\r\n\t@media only screen and (max-width : 320px){\r\n\u00a0\r\n\t}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3 style=\"text-align: center;\"><span style=\"font-weight: 400;\">Bootstrap 2.3.2 Media Queries Breakpoints<\/span><\/h3>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"php\">\/*=====================================================\r\n=            Bootstrap 2.3.2 Media Queries            =\r\n=====================================================*\/\r\n@media only screen and (max-width : 1200px){\r\n\u00a0\r\n}\r\n\u00a0\r\n@media only screen and (max-width : 979px){\r\n\u00a0\r\n}\r\n\u00a0\r\n@media only screen and (max-width : 767px){\r\n\u00a0\r\n}\r\n\u00a0\r\n@media only screen and (max-width : 480px){\r\n\u00a0\r\n}\r\n\u00a0\r\n@media only screen and (max-width : 320px){\r\n\u00a0\r\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3 style=\"text-align: center;\">Responsive Dienstprogramme<\/h3>\n<p><span style=\"font-weight: 400;\">Genau wie Bootstrap 2 bietet Bootstrap 3 responsive Dienstprogramme zum Ausblenden und Anzeigen von Elementen basierend auf der Browsergr\u00f6\u00dfe. Das soll uns auch helfen, das Rastersystem zu definieren.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"php\">.visible-xs\r\n.visible-sm\r\n.visible-md\r\n.visible-lg\r\n.hidden-xs\r\n.hidden-sm\r\n.hidden-md\r\n.hidden-lg<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-12764\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/2018\/05\/Bootstrap-1.jpg\" alt=\"\" width=\"994\" height=\"587\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2018\/05\/Bootstrap-1.jpg 994w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2018\/05\/Bootstrap-1-300x177.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2018\/05\/Bootstrap-1-768x454.jpg 768w\" sizes=\"(max-width: 994px) 100vw, 994px\" \/><\/p>\n<p>Das funktioniert, denn wir k\u00f6nnen \u00a0bestimmte Elemente je nach Gr\u00f6\u00dfe anzeigen lassen. \u00a0In unseren Beispielen zeigen wir eine zus\u00e4tzliche Sidebar auf gro\u00dfen Desktops.<\/p>\n<h3 style=\"text-align: center;\"><span style=\"font-weight: 400;\">Beispiele<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Hier sind einige Beispiele f\u00fcr Raster, die Ihr erstellen k\u00f6nnt. Wir werden auf Basis-Websites eingehen, die\u00a0viele\u00a0Leute gern haben, und zeigen, wie es einfach ist, diese mit dem Raster von Bootstrap 3 zu erstellen.<\/span><\/p>\n<h4 style=\"text-align: center;\">Einfach: Gro\u00dfe Bildschirme vs. Mobilger\u00e4te<\/h4>\n<p><span style=\"font-weight: 400;\">Man nehme beispielsweise an, Ihr braucht eine Website mit <strong>einer Spalte<\/strong> auf extra kleinen (Smartphones) und kleinen (Tablets) Endger\u00e4ten, mit einem <strong>zweispaltigen Layout<\/strong> auf mittleren Endger\u00e4ten (mittleren Desktops) und mit \u00a0<strong>vier Spalten<\/strong> auf gro\u00dfen Endger\u00e4ten (Desktops).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hier ist der Code f\u00fcr diese Beispiele:<\/span><\/p>\n<pre>            &lt;div class=\"row\"&gt;\r\n                &lt;div class=\"col-md-6 col-lg-3\"&gt;\r\n                    &lt;div class=\"visible-lg text-success\"&gt;Large Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-md text-warning\"&gt;Medium Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-sm text-primary\"&gt;Small Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-xs visible-sm text-danger\"&gt;Extra Small and Small Devices&lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-md-6 col-lg-3\"&gt;\r\n                    &lt;div class=\"visible-lg text-success\"&gt;Large Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-md text-warning\"&gt;Medium Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-sm text-primary\"&gt;Small Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-xs visible-sm text-danger\"&gt;Extra Small and Small Devices&lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-md-6 col-lg-3\"&gt;\r\n                    &lt;div class=\"visible-lg text-success\"&gt;Large Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-md text-warning\"&gt;Medium Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-sm text-primary\"&gt;Small Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-xs visible-sm text-danger\"&gt;Extra Small and Small Devices&lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-md-6 col-lg-3\"&gt;\r\n                    &lt;div class=\"visible-lg text-success\"&gt;Large Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-md text-warning\"&gt;Medium Devices!&lt;\/div&gt;\r\n                     &lt;div class=\"visible-sm text-primary\"&gt;Small Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-xs visible-sm text-danger\"&gt;Extra Small and Small Devices&lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n<\/pre>\n<h4 style=\"text-align: center;\">Mittel: Zus\u00e4tzliche Spalte auf gro\u00dfen Desktops anzeigen lassen<\/h4>\n<p><span style=\"font-weight: 400;\">Da ist ein interessantes Moment, das M\u00f6glichkeiten des neuen Rastersystems gut veranschaulicht. Beispielsweise\u00a0braucht Ihr eine Website mit einer Sidebar und einem Hauptinhalt. Das sollte als eine Spalte auf <strong>extra kleinen Endger\u00e4ten<\/strong> angezeigt werden - der Hauptcontent und eine Sidebar dar\u00fcber. \u00a0Auf <strong>kleinen und mittleren Endger\u00e4ten<\/strong> sollten die Sidebar und der Hauptcontent nebeneinander untergebracht werden. Und auf <strong>gro\u00dfen Endger\u00e4ten<\/strong> m\u00f6chten wir den freien Platz verwenden - eine zus\u00e4tzliche Sidebar einf\u00fcgen, um mehr Inhalte zu platzieren.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Wir erstellen das Hauptlayout mit 6 Spalten auf gro\u00dfen Ger\u00e4ten, um Platz f\u00fcr unsere zweite Sidebar zu schaffen. Dies ist eine gro\u00dfartige M\u00f6glichkeit, den Platz auf gr\u00f6\u00dferen Desktops zu nutzen. Und hier ist der Code f\u00fcr dieses Beispiel.<\/span><\/p>\n<pre>            &lt;div class=\"row\"&gt;\r\n                &lt;div class=\"col-sm-9 col-lg-6 text-danger\"&gt;\r\n                    I am the main content.\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-sm-3 text-warning\"&gt;\r\n                    I am the main sidebar.\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-lg-3 visible-lg text-success\"&gt;\r\n                    I am the secondary sidebar that only shows up on LARGE devices.\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n<\/pre>\n<p><a href=\"https:\/\/www.templatemonster.com\/blog\/es\/wp-content\/uploads\/2018\/05\/Bootstrap-2.jpg\" target=\"_blank\" class=\"broken_link\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-10632\" src=\"https:\/\/www.templatemonster.com\/blog\/es\/wp-content\/uploads\/2018\/05\/Bootstrap-2.jpg\" sizes=\"(max-width: 1078px) 100vw, 1078px\" srcset=\"https:\/\/www.templatemonster.com\/blog\/es\/wp-content\/uploads\/2018\/05\/Bootstrap-2.jpg 1078w, https:\/\/www.templatemonster.com\/blog\/es\/wp-content\/uploads\/2018\/05\/Bootstrap-2-300x48.jpg 300w, https:\/\/www.templatemonster.com\/blog\/es\/wp-content\/uploads\/2018\/05\/Bootstrap-2-768x123.jpg 768w, https:\/\/www.templatemonster.com\/blog\/es\/wp-content\/uploads\/2018\/05\/Bootstrap-2-1024x164.jpg 1024w\" alt=\"\" width=\"1078\" height=\"173\" \/><\/a><\/p>\n<h4 style=\"text-align: center;\">Fortgeschritten: Verschiedene Raster f\u00fcr jede Bildschirmgr\u00f6\u00dfe<\/h4>\n<p><span style=\"font-weight: 400;\">Das ist ein etwas komplizierteres Beispiel. Angenommen, wir m\u00f6chten, dass alle unserer Spalten stapeln. F\u00fcr <strong>extra kleine Endger\u00e4te<\/strong> lassen wir 2 Spalten festlegen, f\u00fcr <strong>kleine Ger\u00e4te<\/strong> - 3 Spalten, <strong>f\u00fcr mittlere<\/strong> - 4 Spalten und f\u00fcr gro\u00dfe - 6 Spalten (die werden nur auf gro\u00dfen Bildschirmen angezeigt)<\/span><\/p>\n<div class=\"row\">\n<p class=\"col-lg-3 visible-lg text-success\">I am the secondary sidebar that only shows up on LARGE devices.<\/p>\n<\/div>\n<pre>            &lt;div class=\"row\"&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\"&gt;\r\n                    I'm content!\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\"&gt;\r\n                    I'm content!\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\"&gt;\r\n                    I'm content!\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\"&gt;\r\n                    I'm content!\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\"&gt;\r\n                    I'm content!\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg\"&gt;\r\n                    I'm content only visible on large devices!\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n<\/pre>\n<p><a href=\"https:\/\/www.templatemonster.com\/blog\/es\/wp-content\/uploads\/2018\/05\/Bootstrap-3.jpg\" target=\"_blank\" class=\"broken_link\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-10633\" src=\"https:\/\/www.templatemonster.com\/blog\/es\/wp-content\/uploads\/2018\/05\/Bootstrap-3.jpg\" sizes=\"(max-width: 988px) 100vw, 988px\" srcset=\"https:\/\/www.templatemonster.com\/blog\/es\/wp-content\/uploads\/2018\/05\/Bootstrap-3.jpg 988w, https:\/\/www.templatemonster.com\/blog\/es\/wp-content\/uploads\/2018\/05\/Bootstrap-3-300x58.jpg 300w, https:\/\/www.templatemonster.com\/blog\/es\/wp-content\/uploads\/2018\/05\/Bootstrap-3-768x148.jpg 768w\" alt=\"\" width=\"988\" height=\"190\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Jetzt kommen wir zu \u00dcbungen. Lasst uns mit Beispielen und Code-Schnipseln auseinandersetzen. W<\/span><span style=\"font-weight: 400;\">ie Ihr sehen k\u00f6nnt, wenn die Gr\u00f6\u00dfe des Browsers kleiner wird, lassen sich die Spalten formatieren. Der Inhalt in jeder Spalte beginnt ebenfalls zu stapeln.<\/span><\/p>\n<h3 style=\"text-align: center;\">Das ist eine Rastertaktik!<\/h3>\n<p><span style=\"font-weight: 400;\">Wie Ihr seht, ist es einfach, komplexe und dynamische Sites mit dem Bootstrap 3-Raster zu erstellen -\u00a0\u00a0von mobilen 2-Spalten-Websites bis hin zum komplexen Ein- und Ausblenden von Elementen auf gro\u00dfen Desktops.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hoffentlich, aufgrund dieser Beispiele bekommt Ihr Vorstellungen von der Flexibilit\u00e4t des neuen Rastersystems.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Gl\u00fcckliche Kodierung!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Wenn Ihr bereits eine HTML-basierte Website mit einem Admin-Panel habt, dann sollten f\u00fcr Euch <\/span><a href=\"https:\/\/www.templatemonster.com\/de\/type\/adminbereich-vorlagen\/\" target=\"_blank\"><span style=\"font-weight: 400;\">Admin-Designs<\/span><\/a><span style=\"font-weight: 400;\"> interessant sein, die mit Bootstrap erstellt wurden. Diese <\/span><a href=\"https:\/\/www.templatemonster.com\/de\/bootstrap-website-templates\/\" target=\"_blank\"><span style=\"font-weight: 400;\">Bootstrap-Templates<\/span><\/a><span style=\"font-weight: 400;\"> zeigen Euch die volle Power von Bootstrap 3!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dieser Artikel wurde von Ahmed Faisal\u00a0verfasst. Hier geht es zur <\/span><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.templatemonster.com\/blog\/bootstrap-3-grid-system-guide\/\" target=\"_blank\">Originalversion<\/a>\u00a0auf Englisch<\/span><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap bietet viele\u00a0Vorteile f\u00fcr Webdesigner.\u00a0 Insbesondere\u00a0macht das Framework die Erstellung\u00a0von responsive\u00a0Websites\u00a0m\u00f6glich. In diesem Beitrag wird ausf\u00fchrlich erkl\u00e4rt, wie man Layouts f\u00fcr verschiedene Endger\u00e4te erstellen kann. 2011 haben Mark Otto und Jacob Thorton es geschafft, das leistungsf\u00e4higste CSS-Framework zu entwickeln. Bootstrap ist heute unter Webentwicklern gut bekannt und geh\u00f6rt zu popul\u00e4rsten Open-Source-Frameworks weltweit. Als Bootstrap 3 [&hellip;]<\/p>\n","protected":false},"author":1657845,"featured_media":12028,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19,16],"tags":[41,183],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Rastersystem und Media Queries: Was bietet Bootstrap 3 f\u00fcr Responsive Design<\/title>\n<meta name=\"description\" content=\"Mit dem Rastersystem von Bootstrap 3 lassen sich responsive Website-Layouts erstellen, die auf jedem Endger\u00e4t gut angezeigt werden.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rastersystem und Media Queries: Was bietet Bootstrap 3 f\u00fcr Responsive Design\" \/>\n<meta property=\"og:description\" content=\"Mit dem Rastersystem von Bootstrap 3 lassen sich responsive Website-Layouts erstellen, die auf jedem Endger\u00e4t gut angezeigt werden.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Deutscher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/templatemonster.de\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-23T10:42:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-07-20T14:11:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2018\/04\/featured_image14.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olga Kulmann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olga Kulmann\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/\"},\"author\":{\"name\":\"Olga Kulmann\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130\"},\"headline\":\"Bootstrap 3: Rastersystem und Media Queries\",\"datePublished\":\"2018-05-23T10:42:31+00:00\",\"dateModified\":\"2018-07-20T14:11:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/\"},\"wordCount\":1087,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"keywords\":[\"Bootstrap\",\"Codierung\"],\"articleSection\":[\"Anleitungen\",\"Webentwicklung\"],\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/\",\"url\":\"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/\",\"name\":\"Rastersystem und Media Queries: Was bietet Bootstrap 3 f\u00fcr Responsive Design\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#website\"},\"datePublished\":\"2018-05-23T10:42:31+00:00\",\"dateModified\":\"2018-07-20T14:11:10+00:00\",\"description\":\"Mit dem Rastersystem von Bootstrap 3 lassen sich responsive Website-Layouts erstellen, die auf jedem Endger\u00e4t gut angezeigt werden.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 3: Rastersystem und Media Queries\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/de\/#website\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"name\":\"TemplateMonster Deutscher Blog\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\",\"name\":\"MonsterPost Deutschland\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Deutschland\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg\",\"https:\/\/www.facebook.com\/templatemonster.de\/\",\"https:\/\/twitter.com\/TM_Deutschland\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130\",\"name\":\"Olga Kulmann\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Olga Kulmann\"},\"description\":\"Olga Kulmann ist Mitglied des deutschen Marketer-Teams von TemplateMonster. Ihr Interessenkreis umfasst von Online-Marketing \u00fcber E-Commerce bis hin zum Webdesign. Olgas Anliegen ist es, die Blogleser mit besten Erfahrungen und gepr\u00fcftem Expertenwissen in diesen Bereichen vertraut zu machen. Olga auf Facebook.\",\"url\":\"https:\/\/monsterspost.com\/de\/author\/kulmann\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Rastersystem und Media Queries: Was bietet Bootstrap 3 f\u00fcr Responsive Design","description":"Mit dem Rastersystem von Bootstrap 3 lassen sich responsive Website-Layouts erstellen, die auf jedem Endger\u00e4t gut angezeigt werden.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/","og_locale":"de_DE","og_type":"article","og_title":"Rastersystem und Media Queries: Was bietet Bootstrap 3 f\u00fcr Responsive Design","og_description":"Mit dem Rastersystem von Bootstrap 3 lassen sich responsive Website-Layouts erstellen, die auf jedem Endger\u00e4t gut angezeigt werden.","og_url":"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/","og_site_name":"TemplateMonster Deutscher Blog","article_publisher":"https:\/\/www.facebook.com\/templatemonster.de\/","article_published_time":"2018-05-23T10:42:31+00:00","article_modified_time":"2018-07-20T14:11:10+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2018\/04\/featured_image14.jpg","type":"image\/jpeg"}],"author":"Olga Kulmann","twitter_card":"summary_large_image","twitter_creator":"@TM_Deutschland","twitter_site":"@TM_Deutschland","twitter_misc":{"Verfasst von":"Olga Kulmann","Gesch\u00e4tzte Lesezeit":"9 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/"},"author":{"name":"Olga Kulmann","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130"},"headline":"Bootstrap 3: Rastersystem und Media Queries","datePublished":"2018-05-23T10:42:31+00:00","dateModified":"2018-07-20T14:11:10+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/"},"wordCount":1087,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"keywords":["Bootstrap","Codierung"],"articleSection":["Anleitungen","Webentwicklung"],"inLanguage":"de-DE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/","url":"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/","name":"Rastersystem und Media Queries: Was bietet Bootstrap 3 f\u00fcr Responsive Design","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/#website"},"datePublished":"2018-05-23T10:42:31+00:00","dateModified":"2018-07-20T14:11:10+00:00","description":"Mit dem Rastersystem von Bootstrap 3 lassen sich responsive Website-Layouts erstellen, die auf jedem Endger\u00e4t gut angezeigt werden.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/de\/bootstrap-3-rastersystem-und-medienabfragen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/de\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 3: Rastersystem und Media Queries"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/de\/#website","url":"https:\/\/monsterspost.com\/de\/","name":"TemplateMonster Deutscher Blog","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/de\/#organization","name":"MonsterPost Deutschland","url":"https:\/\/monsterspost.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Deutschland"},"image":{"@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg","https:\/\/www.facebook.com\/templatemonster.de\/","https:\/\/twitter.com\/TM_Deutschland"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130","name":"Olga Kulmann","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Olga Kulmann"},"description":"Olga Kulmann ist Mitglied des deutschen Marketer-Teams von TemplateMonster. Ihr Interessenkreis umfasst von Online-Marketing \u00fcber E-Commerce bis hin zum Webdesign. Olgas Anliegen ist es, die Blogleser mit besten Erfahrungen und gepr\u00fcftem Expertenwissen in diesen Bereichen vertraut zu machen. Olga auf Facebook.","url":"https:\/\/monsterspost.com\/de\/author\/kulmann\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/12027"}],"collection":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/users\/1657845"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/comments?post=12027"}],"version-history":[{"count":39,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/12027\/revisions"}],"predecessor-version":[{"id":12796,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/12027\/revisions\/12796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media\/12028"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media?parent=12027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/categories?post=12027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/tags?post=12027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}