Seit mehr als einem Jahr ist jetzt Bootstrap 4 veröffentlicht. Lohnt sich der Umstieg, werden sich viele fragen. Welche Vorteile gibt es in der Version 4 und wieviel Aufwand ist mit einer Umstellung verbunden.
Die wesentlichste Änderung ist die Umstellung auf Flex
Flex ist eine Display-Typ den alle Modernen Browser mittlerweile beherrschen.
Neben display:block oder display:inline gibt es jetzt auch display:flex.
Die Klassen container und container-fluid 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ünschte Darstellung.
Es funktioniert nichts mehr
Bindet man jetzt blauäugig 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.
Geht man dann step für step auf die Suche, welchen Klassen es jetzt nicht mehr gibt oder anders heißen, merkt man schnell, dass es eine ganze Menge sind. Manchmal verstehe ich auch die Logik, warum der Name einer Klasse geändert wurde überhaupt nicht. So wird z.B. aus der Klasse img-responsive, die Bootstrap 3 zur responsiven Größen Anpassung von Bilder gut Dienste geleistet hat, jetzt img-fluid.
So gibt es auch keinen btn-default mehr, der heißt jetzt btn-secondary. Das Carousel und der Pager funktioniert nicht mehr etc.
Das Panel gibt es nicht mehr, ein ähnliches Element heißt jetzt Card. Es sind leider fast überall Anpassungen notwendig.
Wie Flexbox arbeitet
Die Nutzung von Flex bietet eine Vielzahl von neuen Möglichkeiten. Eigentlich ist es damit sogar möglich das komplette Grid-Design mit Row und Column abzulösen. Dennoch ist das bekannte Grid mit seinen 12 Spalten in leicht abgewandelter Form erhalten geblieben. Nachfolgend ein Beispiel mit drei gleich großen Spalten. Bei der kleinste Breite des Displays braucht man nun nicht mehr die Größe 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ür Margin.
<div class="row bg-secondary"> <div class="p-2 col" style="background:yellow">col 1</div> <div class="p-2 col" style="background:orange">col 2</div> <div class="p-2 col" style="background:cyan">col 3</div> </div>Im zweiten Beispiel fällt vielleicht auf, das bei den Spalten gar keine Breitenangaben stehen. Wenn die Breite nicht angegeben ist, wird sie automatisch aus der zur Verfügung 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 erhält. <div class="row bg-secondary"> <div class="p-2 col" style="background:yellow">col 1</div> <div class="p-2 col-6" style="background:orange">col 2</div> <div class="p-2 col" style="background:cyan">col 3</div> </div>
Im 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ügt und wir die gleiche Breite erhalten wollen. flexy-grow bewirkt, dass die mittlere Splate so breit wie möglich wird. <div class="d-flex bg-secondary" style="margin-left:-15px;margin-right:-15px;"> <div class="p-2 bg-info" style="width:25%">col 1</div> <div class="p-2 bg-warning flex-grow-1">col 2</div> <div class="p-2 bg-primary" style="width:25%">col 3</div> </div>
(wird fortgesetzt)