Bootstrap auf Version 3 aktualisieren - was muss ich tun?

102

Ich bin neu in Bootstrap und habe die ältere Version 2.3.2.

Version 3 wurde veröffentlicht. Ersetze ich einfach die CSS- und Javascript-Dateien, wenn ich die neueste Version verwenden möchte?

twitter-bootstrap twitter-bootstrap-3 Henry
quelle
Vielleicht möchten Sie sich über die Änderungen informieren und sicherstellen, dass sie nichts beschädigen, was Sie bereits installiert haben, aber ja, ersetzen Sie einfach die Dateien
Patsy Issa
Ja, ich möchte nur sicherstellen, dass ich das richtig mache. Ich denke, dass Bootstrap das Beste war, was es je gab - es ist erstaunlich. Ich bin sehr daran interessiert, die nächste Version zu verwenden. Ich bin mir sicher, dass ich irgendwo gelesen habe, wo mit .less Updates verwaltet werden können, aber ich bin wahrscheinlich falsch.
Henry
1
Mögliches Duplikat von Writing Twitter's Bootstrap mit Blick auf ein Upgrade auf v3
Bass Jobsen
Beachten Sie, dass in den Dokumenten, obwohl in 3.0 alles als "flüssig" bezeichnet wird, für Container immer noch feste Pixelbreiten verwendet werden ... was ziemlich dumm ist, da dies genau das Gegenteil des flüssigen Layouts ist.
Cerin

Antworten:

134

  1. Laden Sie die neueste Version von http://getbootstrap.com/ herunter ODER ERSETZEN Sie die CSS- und JS-Dateien durch die neuesten Versionen oder verwenden Sie CDN ( http://www.bootstrapcdn.com/ ).

  2. Migrieren Sie Ihr HTML, ja, lesen Sie tatsächlich http://bootply.com/bootstrap-3-migration-guide . Sie können http://twitterbootstrapmigrator.w3masters.nl/ oder http://code.divshot.com/bootstrap3_upgrader/ ausprobieren (auch Checkliste bereitstellen).

  3. Entfernen Sie html5shiv, da TB die Unterstützung für IE7 und Firefox 3.x einstellt. Fügen Sie html5shiv.js hinzu, um die Unterstützung von HTML5-Elementen für IE8 hinzuzufügen

  4. Fügen Sie reply.js ( https://github.com/scottjehl/Respond ) hinzu, um Medienabfragen im IE zu unterstützen. HINWEIS Dies funktioniert nicht mit CDN, siehe: IE8-Problem mit Twitter Bootstrap 3

  5. Wenn Sie Glyphicons verwenden, müssen Sie diese von http://glyphicons.getbootstrap.com/ hinzufügen (Symbole wurden in ein separates Repository verschoben .) Glyphicons sind seit RC2 zurück (180 Glyphen im Schriftformat aus dem Glyphicon Halflings-Set).

  6. Wenn Sie die Javascript Typeahead-Komponente verwenden, müssen Sie https://github.com/twitter/typeahead.js/ integrieren (weil Typeahead-Javascript gelöscht wird). Siehe auch: Typeahead-Probleme mit Bootstrap 3.0 RC1 Oder verwenden Sie das "alte" Plugin : https://github.com/bassjobsen/Bootstrap-3-Typeahead , siehe auch: /programming/18615964/ajax-call-in-bootstrap-3-0-typeahead/18620473

  7. Wechseln Sie zur neuesten Version von jQuery 1.x (verwenden Sie nicht die Version 2.x, da jQuery 2.x IE8 nicht unterstützt).

  8. Wenn Sie Widgets von Drittanbietern verwenden, die Ihrem Code HTML hinzufügen oder einfügen (z. B. addthis.com, sharethis.com und Google Maps), erstellen Sie einen Wrapper für die Boxgröße. Siehe: Rechter Rand des AddThis-Zählers fehlt bei Twitter's Bootstrap 3

Andere:

Bootstrap 3 wechselt zu Box-Sizing: Border-Box, warum?: Https://stackoverflow.com/a/18858771/1596547

Beachten Sie, dass die Unterstützung für IE7 eingestellt wurde. https://github.com/coliff/bootstrap-ie7 Versuchen Sie, den CSS-Teil mithilfe eines bedingten CSS wieder hinzuzufügen.

Bass Jobsen
quelle
Das klingt nach einem großen Unterfangen. Wie lange sollte das dauern? 1 Woche Arbeit? 1 Monat? 6 Monate?
Curt
Das Problem ist, dass BS2 nicht abwärtskompatibel mit BS3 ist, siehe auch bassjobsen.weblogs.fm/…
Bass Jobsen
1
Wenn ich raten müsste, würde ich sagen, dass das Upgrade einige Monate dauern kann. Brutal.
Curt
@Curt schick mir eine E-Mail. Vielleicht kann ich Dir helfen?
Bass Jobsen
Wie sende ich Ihnen eine E-Mail? Über Ihren Twitter-Handle? Ich habe ein bisschen mehr von v3 gelesen und es scheint, dass es hauptsächlich darum geht, Unterstützung für ältere Telefone hinzuzufügen. Wenn ja, glaube ich nicht, dass ich v3 brauche.
Curt
22

Aktualisiert 2018

Bootstrap 3 bis 4

Bootstrap 4-Upgrade-Tool (dies hilft bei der Migration von Bootstrap 3 auf 4)

Bootstrap 2 bis 3

Ein Release-Kandidat (nicht das endgültige Release 3) für Bootstap 3 RC 1 wurde am Freitag (26. Juli 2013) bekannt gegeben, daher gibt es noch keine offiziellen Migrationsrichtlinien.

Es gibt wichtige Änderungen für Bootstrap 3. Es gibt keine Abwärtskompatibilität mit 2.x, sodass Sie die Dateien nicht einfach ersetzen können. Eine nützliche Anleitung finden Sie jedoch hier bei Bootply:

http://bootply.com/bootstrap-3-migration-guide

Es ist auch ein Bootstrap-Migrationstool in Arbeit: https://github.com/iatek/bootstrap-migrate

Upgrade-Tool für Bootstrap 2.x auf 3: http://upgrade-bootstrap.bootply.com/v3

Zim
quelle
1
Grüße aus der Zukunft! Hier ist das Bootstrap 4-Tool: upgrade-bootstrap.bootply.com
Zim
14

Es ist fast unmöglich, von Bootstrap 2.3 auf 3.0 zu migrieren. Die Versionsänderung ist sehr drastisch. Ich habe versucht, mein zend Framework 2-Projekt mit Bootstrap 3.0 zu aktualisieren, und das Ergebnis war ein Chaos (wie der Versuch, mit IE 5 zu öffnen).

Mein Rat: Altes Projekt mit Bootstrap 2.X mit Bootstrap 2.x lassen. Neues Startprojekt, beginnen Sie mit 3.0.

Meiner Meinung nach war eine solche Versionsänderung ein sehr großer Fehler des Bootstrap-Teams. Sie sollten ein schrittweises Update 2.4, 2.5, 2.6 durchgeführt haben ....

Albanx
quelle
8
Ich bin mit dem fast Unmöglichen nicht einverstanden. Eine Migration ist durchaus möglich. Sie müssen lediglich die Anweisungen befolgen. Links finden Sie im Community-Wiki-Beitrag. Auch nach semantischen Versionsnummern ist ein größeres Upgrade zulässig, um Schnittstellenverträge zu brechen. Die Hauptversionsnummer repräsentiert also diese mögliche Unterbrechung korrekt.
Jafin
1
Es ist sehr schwierig zu migrieren. Ich denke, das ist ein großartiger Rat. Es ist nicht unmöglich, aber schwierig - nichts wie ein Upgrade von früheren Versionen von 2. * auf eine andere 2. *.
d -_- b
Es ist nicht unmöglich und viel einfacher, wenn Sie nach Mustern wie suchen / ersetzen können span12.
Tadman
3
Ich kann Ihnen versichern, dass ich alle möglichen Ersetzungen vorgenommen habe, auch auf separatem CSS, wo ich das Boostrap-Standardthema überschreibe, und im Code, aber ich habe kein gutes Ergebnis erzielt. Denken Sie nicht nur an span12, sondern an alle span *, alle Navis, Tabellen und mehr. Denken Sie an eine starke Nutzung von Bootstrap
Albanx
Bootstrap (wie viele Web-Frameworks) folgt der semantischen Versionierung , daher die Änderung von 2. * auf 3, die inkompatible API-Änderungen einführt.
Jake Berger
0

Es ist nicht sicher, aber verwenden Sie diese Rereplacer Joomla-Erweiterung

verweisen Sie auf diesen Link,

http://www.nonumber.nl/extensions/rereplacer

Andernfalls sind Vorlagenüberschreibungen die einzige Möglichkeit, dies zu tun.

Kumar Ramalingam
quelle
0

Wenn Sie eine große Anwendung mit vielen Dateien und vielen Anpassungen haben, kann jedes einzelne Tool wahrscheinlich nicht auf die meisten Fälle antworten, mit denen Sie konfrontiert sind.

Zunächst empfehle ich natürlich Folgendes: https://pypi.python.org/pypi/b2tob3/0.4, aber dies entspricht nicht meinen Anforderungen. Ich habe diese Version gegabelt und meine eigene angepasst, um zusammen migrieren zu können Bootstrap 2 bis 3 und Font Awesome 3 bis 4 zusammen, einige Fälle, die in b23tob3-v0.4 (Original) nicht behandelt werden, versuchen in meiner Version zu behandeln.

Lesen Sie meinen Beitrag hier: http://ask.osify.com/qa/589 Finden Sie mein Update in github: https://github.com/metrey/b2tob3 Dort finden Sie auch die kompilierte Windows-App, die Sie sofort verwenden können .

Sichern Sie IMMER Ihre Dateien und übertragen Sie alles in die Quellcodeverwaltung, bevor Sie das Tool verwenden.

Viel Glück und teile deine.

Osify
quelle