{"id":109,"date":"2019-01-04T11:30:12","date_gmt":"2019-01-04T10:30:12","guid":{"rendered":"http:\/\/www.b2b-shop-system.de\/blog\/?p=109"},"modified":"2019-01-07T13:32:29","modified_gmt":"2019-01-07T12:32:29","slug":"bootstrap-3-vs-bootstrap-4","status":"publish","type":"post","link":"https:\/\/www.b2b-shop-system.de\/blog\/2019\/01\/04\/bootstrap-3-vs-bootstrap-4\/","title":{"rendered":"Bootstrap 3 vs Bootstrap 4"},"content":{"rendered":"

\"\"Seit mehr als einem Jahr ist jetzt Bootstrap 4 ver\u00f6ffentlicht. Lohnt sich der Umstieg, werden sich viele fragen. Welche Vorteile gibt es in der Version 4 und wieviel Aufwand ist mit einer Umstellung verbunden.<\/strong><\/p>\n

Die wesentlichste \u00c4nderung ist die Umstellung auf Flex<\/h2>\n

Flex ist eine Display-Typ den alle Modernen Browser mittlerweile beherrschen.
\nNeben display:block<\/em> oder display:inline<\/em> gibt es jetzt auch display:flex<\/em>.
\nDie Klassen container<\/em> und container-fluid<\/em> gibt es auch in Bootstrap 3. Der Unterschied jedoch ist , dass sie jetzt in flex dargestellt werden und an alle Kind-Elemente vererbt wird. Flex erleichtert oder vereinfacht an vielen Stellen die gew\u00fcnschte Darstellung.<\/p>\n

Es funktioniert nichts mehr<\/h2>\n

Bindet man jetzt blau\u00e4ugig die Bootstrap 4 Dateien in eine bestehende Bootstrap 3 Website ein, ist man doch erstaunt, dass die Seite nicht mehr wiederzuerkennen ist und das nicht im positiven Sinne.
\nGeht man dann step f\u00fcr step auf die Suche, welchen Klassen es jetzt nicht mehr gibt oder anders hei\u00dfen, merkt man schnell, dass es eine ganze Menge sind. Manchmal verstehe ich auch die Logik, warum der Name einer Klasse ge\u00e4ndert wurde \u00fcberhaupt nicht. So wird z.B. aus der Klasse img-responsive<\/em>, die Bootstrap 3 zur responsiven Gr\u00f6\u00dfen Anpassung von Bilder gut\u00a0 Dienste geleistet hat, jetzt img-fluid<\/em>.
\nSo gibt es auch keinen btn-default<\/em> mehr, der hei\u00dft jetzt btn-secondary<\/em>. Das Carousel und der Pager funktioniert nicht mehr etc.
\nDas Panel gibt es nicht mehr, ein \u00e4hnliches Element hei\u00dft jetzt Card. Es sind leider fast \u00fcberall Anpassungen notwendig.<\/p>\n

Wie Flexbox arbeitet<\/h2>\n

Die Nutzung von Flex bietet eine Vielzahl von neuen M\u00f6glichkeiten. Eigentlich ist es damit sogar m\u00f6glich das komplette Grid-Design mit\u00a0 Row und Column abzul\u00f6sen.\u00a0 Dennoch ist das bekannte Grid mit seinen 12 Spalten in leicht abgewandelter Form erhalten geblieben. Nachfolgend ein Beispiel mit drei gleich gro\u00dfen Spalten. Bei der kleinste Breite des Displays braucht man nun nicht mehr die Gr\u00f6\u00dfe anzugeben. Deshalb steht satt col-xs nur col dort. Das p-2 (oder p-*) ist auch etwas Neues. Es bewirkt ein Padding der Stufe 2. Ebenso gibt es das auch f\u00fcr Margin.<\/p>\n

<div class=\"row  bg-secondary\"><\/span>\r\n\t<div class=\"p-2 col\" style=\"background:yellow\"><\/span>col 1<\/span><\/div><\/span>\r\n\t<div class=\"p-2 col\" style=\"background:orange\"><\/span>col 2<\/span><\/div><\/span>\r\n\t<div class=\"p-2 col\" style=\"background:cyan\"><\/span>col 3<\/span><\/div><\/span>\r\n<\/div>\r\n\"\"\r\n\r\nIm zweiten Beispiel f\u00e4llt vielleicht auf, das bei den Spalten gar keine Breitenangaben stehen. Wenn die Breite nicht angegeben ist, wird sie automatisch aus der zur Verf\u00fcgung stehenden Breite berechnet und auf die Spalten aufgeteilt. Bei der mittleren Spalte ist jetzt die Breite 6, womit Spalte 1 und Spalte 3 jeweils die Breite 3\u00a0 erh\u00e4lt.<\/span>\r\n\r\n<div class=\"row bg-secondary\">\r\n\t<div class=\"p-2 col\" style=\"background:yellow\">col 1<\/div>\r\n\t<div class=\"p-2 col-6\" style=\"background:orange\">col 2<\/div>\r\n\t<div class=\"p-2 col\" style=\"background:cyan\">col 3<\/div>\r\n<\/div>\r\n\"\"\r\n\r\nIm dritten Beispiel nutzen wir Flex, um das gleiche Ergebnis zu erzielen. Das margin-left\/right wird hier benutzt, weil die  Klasse row dies automatisch hinzuf\u00fcgt und wir die gleiche Breite erhalten wollen. flexy-grow bewirkt, dass die mittlere Splate so breit wie m\u00f6glich wird.<\/span>\r\n\r\n<div class=\"d-flex bg-secondary\" style=\"margin-left:-15px;margin-right:-15px;\">\r\n\t<div class=\"p-2 bg-info\" style=\"width:25%\">col 1<\/div>\r\n\t<div class=\"p-2 bg-warning flex-grow-1\">col 2<\/div>\r\n\t<div class=\"p-2 bg-primary\" style=\"width:25%\">col 3<\/div>\r\n<\/div> \r\n\"\"\r\n\r\n\r\n \r\n<\/span><\/pre>\n
(wird fortgesetzt)<\/p>\n","protected":false},"excerpt":{"rendered":"
Seit mehr als einem Jahr ist jetzt Bootstrap 4 ver\u00f6ffentlicht. Lohnt sich der Umstieg, werden sich viele fragen. Welche Vorteile<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-109","post","type-post","status-publish","format-standard","hentry","category-allgemein"],"_links":{"self":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/posts\/109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":4,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/posts\/109\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/posts\/109\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/categories?post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/tags?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}