• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bootstrap 4 und extrem geändertes Layout bei Dropdown

NetAktiv

Senior HTML'ler
Hallo,

ich habe mal erste Gehversuche mit Bootstrap Version 3.5 unternommen. Auf einer Beispielseite fand ich dann die neuen Outline Klasse für Buttons und musste feststellen, dass mein altes Layout mit dem neuen Bootstrap 4 Alpha doch um einiges anders aussieht. Einen Teil der Begründung fand ich bei http://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm.

Ein Problem, wofür ich bisher keine Lösung habe, ist das völlig unterschiedliche Aussehen von Dropdown Menüs (siehe Bilder Upload). Ich habe auch mal meine Testseite http://bootstrap.netaktiv.de bereit gestellt, da kann man zwischen Bootstrap 3 und 4 umschalten, um einen Eindruck zu bekommen.

Was muss ich bei Bootstrap 4 tun, dass meine Dropdowns ohne eigene CSS Definitionen wieder so ansehnlich wie unter 3.5 werden.

Grüße, Rainer

boot3.gif boot4.gif
 
Zuletzt bearbeitet:
Werbung:
Nun habe ich mal selbst weiter geforscht und gefunden, dass im CSS von Bootstrap V4 der unten folgende für die Formatierung der Liste verantwortliche Eintrag nicht vorhanden ist. Statt dessen gibt es eine neue Klasse .dropdown-item, mit der man die Links explizit versehen muss Ich frage mich nun, warum man bei Versionswechsel nicht darauf achtet, dass die Aufwärtskompatibilität doch möglichst gewahrt bleibt.

HTML:
/* Fehlt in Bootstrap V4 */
.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

HTML:
.dropdown-item {
  display: block;
  width: 100%;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.5;
  color: #373a3c;
  text-align: inherit;
  white-space: nowrap;
  background: none;
  border: 0;
}
 
Zuletzt bearbeitet:
Ich frage mich nun, warum man bei Versionswechsel nicht darauf achtet, dass die Aufwärtskompatibilität doch möglichst gewahrt bleibt.

Es macht schon mal generell ganz einfach keinen Sinn, ein CSS Framework zu aktualisieren.
Bestehende Websites basieren weiterhin auf Bootstrap 3, neue machst du hingegen mit Bootstrap 4.
So einfach ist das.

Schließlich ist Bootstrap ja kein fertiges Programm, sondern "nur" eine umfangreiche Vorlage unter Anwendung von Best-practices, damit nicht von 0 gestartet werden muss.

Achja, die wichtigsten (wenn nicht alle) Neuerungen sollten hier stehen:
http://v4-alpha.getbootstrap.com/migration/
 
Zuletzt bearbeitet:
Werbung:
Hallo scbawik,

wenn eine Migration keine Sinn machen würde, wäre ja die Seite deines Hinweises auch sinnlos. Ich denke, neue Versionen haben meist neue Funktionen und Bugfixes und werden gepflegt, eine Migration kann durchaus sinnvoll sein. Man kann natürlich nicht alleine aus Kompatibilitätsgründen immer alles von Version zu Version mitschleppen. Aber wenn man sich nicht Vollzeit mit dem Thema auseinandersetzt und dann Beispiele aus dem Netz nicht funktionieren, weil man aus welchen Gründen auch immer, mal eine Klasse kurzerhand umbenennt wie input-lg nach form-control-lg oder ein paar andere Klassen ersatzlos streicht, wie btn-xs, dann macht das zumindest mir eine Menge an eigentlich unnötiger Arbeit, die Ursachen zu erforschen.

Grüße, Rainer
 
dann macht das zumindest mir eine Menge an eigentlich unnötiger Arbeit

Eben.
Genau deshalb macht es auch keinen Sinn, einfach so aus einer Laune heraus zu aktualisieren. v3 ist immer noch die stable, v4 erst im alpha. Bugs wirst du also in v3 heute und in den nächsten Jahren eher nicht finden. Viel wahrscheinlicher dass v4 welche enthält.

Außerdem, von welchen neuen Funktionen würdest du denn überhaupt profitieren? Du hast sie ja bisher auch nicht eingesetzt, also wirst du sie ohne tiefergehende Änderungen/Erweiterungen deines bestehenden Codes auch nach der Migration nicht nutzen.

Sicherheit, welche sonst ein wichtiges Argument für eine Aktualisierung ist, ist im Falle von Bootstrap ja nicht relevant - hat damit überhaupt nichts zu tun.

Was ich insgesamt sagen wollte:
Eine Migration auf eine neue Major-Version ist immer mit Arbeit verbunden und so lange man nicht die neuen Funktionen nutzt, keine zukünftigen Kompatibiltätsprobleme in Sicht sind und auch weder Stabilität noch Sicherheit gefährdet sind, ist eine Migration Zeitverschwendung.

Und ja, zum Link.
Wenn man einen trifitigen Grund hat und die Neuerungen nutzt, kann man natürlich migrieren.
Dafür ist dieser Link. Noch viel mehr hilft er aber v3-Benutzern, sich an v4 zu gewöhnen.
 
Zuletzt bearbeitet:
Das Problem existierte schon beim Wechsel von Bootstrap 2 > 3 im Jahre 2013. Damals wurden die Grid-Klassen umbenannt, was eine Migration von größeren Projekten sehr aufwendig gestaltete.

Bootstrap ist gerade mal in einer frühen Alpha. Bis zu einem RC kann noch ein Jahr vergehen, und wer weiß, was sich in der Zeit noch alles ändert. Interessant ist es wegen des Flex-Layouts, aber dafür gibt es auch Alternativen, wie z.B. Angular Material oder Google Polymer, die ich von der UI auch besser finde.
 
Werbung:
Zurück
Oben