Mettre à jour Bootstrap vers la version 3 - que dois-je faire?

102

Je suis nouveau sur Bootstrap et j'ai l'ancienne version 2.3.2.

La version 3 a été publiée. Est-ce que je remplace simplement les fichiers CSS et Javascript si je souhaite utiliser la dernière version?

twitter-bootstrap twitter-bootstrap-3 Henri
la source
Vous voudrez peut-être lire les modifications et vous assurer qu'elles ne cassent rien de ce que vous avez déjà en place, mais oui, remplacez simplement les fichiers
Patsy Issa
Oui, je veux juste m'assurer que je fais cela correctement. Je pense que Bootstrap a été la meilleure chose qui soit - c'est incroyable. J'ai hâte d'utiliser la prochaine version. Je suis sûr que je lisais quelque part que l'utilisation peut utiliser .less pour gérer les mises à jour mais je me trompe probablement.
henry
1
duplication possible du Bootstrap de Twitter avec la mise à niveau vers la v3 à l'esprit
Bass Jobsen
Notez que même si la documentation dit que tout est «fluide» dans la version 3.0, elle utilise toujours des largeurs de pixels fixes pour les conteneurs ... ce qui est un peu stupide car c'est exactement le contraire de la mise en page fluide.
Cerin

Réponses:

134

  1. Téléchargez la dernière version sur http://getbootstrap.com/ OU remplacez les fichiers css et js par les versions les plus récentes ou utilisez CDN ( http://www.bootstrapcdn.com/ )

  2. Migrez votre html, oui, lisez bien http://bootply.com/bootstrap-3-migration-guide . Vous pouvez essayer http://twitterbootstrapmigrator.w3masters.nl/ ou http://code.divshot.com/bootstrap3_upgrader/ (fournir également une liste de contrôle)

  3. supprimer html5shiv cause TB supprime le support pour IE7 et Firefox 3.x ajouter html5shiv.js pour ajouter le support des éléments HTML5 à IE8

  4. ajoutez respond.js ( https://github.com/scottjehl/Respond ) pour la prise en charge des requêtes multimédias dans IE. REMARQUE cela ne fonctionnera pas avec CDN, voir: Problème IE8 avec Twitter Bootstrap 3

  5. Si vous utilisez Glyphicons, vous devrez les ajouter depuis http://glyphicons.getbootstrap.com/ (les icônes ont été déplacées vers un référentiel séparé.) Les glyphicons sont de retour depuis RC2 (180 glyphes au format police de l'ensemble Glyphicon Halflings)

  6. Si vous utilisez le composant Javascript Typeahead, vous devrez intégrer https://github.com/twitter/typeahead.js/ (parce que typeahead javascript est abandonné) Voir aussi: Problèmes typeahead avec Bootstrap 3.0 RC1 Ou utiliser le "vieux" plugin : https://github.com/bassjobsen/Bootstrap-3-Typeahead , voir aussi: /programming/18615964/ajax-call-in-bootstrap-3-0-typeahead/18620473

  7. Basculez vers la dernière version de jQuery 1.x (n'utilisez pas la version 2.x car jQuery 2.x ne prend pas en charge IE8)

  8. Si vous utilisez des widgets tiers qui ajoutent ou insèrent du HTML à votre code (comme addthis.com, sharethis.com et Google maps), créez un wrapper pour le dimensionnement de la boîte, voir: Bordure droite du compteur AddThis manquante avec Bootstrap 3 de Twitter

Autre:

Bootstrap 3 passe au box-sizing: border-box pourquoi?: Https://stackoverflow.com/a/18858771/1596547

Remarque: la prise en charge d'IE7 a été abandonnée. https://github.com/coliff/bootstrap-ie7 essayez de rajouter la partie css en utilisant du CSS conditionnel.

Bass Jobsen
la source
Cela ressemble à une énorme entreprise. Combien de temps cela devrait-il prendre? 1 semaine de travail? 1 mois? 6 mois?
Curt
le problème est que BS2 n'est pas rétrocompatible avec BS3, voir aussi bassjobsen.weblogs.fm
Bass Jobsen
1
Si je devais deviner, je dirais que la mise à niveau peut prendre quelques mois. Brutal.
Curt
@Curt m'envoie un e-mail. Peut-être je peux vous aider?
Bass Jobsen
Comment vous envoyer un e-mail? Via votre compte Twitter? J'ai lu un peu plus de v3 et il semble que c'est principalement pour ajouter le support des téléphones plus anciens. Si tel est le cas, je ne pense pas avoir besoin de la v3.
Curt
22

Mise à jour 2018

Bootstrap 3 à 4

Outil de mise à niveau Bootstrap 4 (cela aidera à migrer de Bootstrap 3 à 4)

Bootstrap 2 à 3

Une version candidate (pas la version finale 3) pour Bootstap 3 RC 1 a été annoncée vendredi (26 juillet 2013), il n'y a donc pas encore de directives de migration officielles.

Il y a des changements majeurs pour Bootstrap 3. Il n'y a pas de rétrocompatibilité avec 2.x, vous ne pouvez donc pas simplement remplacer les fichiers. Vous pouvez cependant trouver des conseils utiles ici sur Bootply:

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

Un outil de migration Bootstrap est également en préparation: https://github.com/iatek/bootstrap-migrate

Outil de mise à niveau Bootstrap 2.x vers 3: http://upgrade-bootstrap.bootply.com/v3

Zim
la source
1
Salutations du futur! Voici l'outil Bootstrap 4: upgrade-bootstrap.bootply.com
Zim
14

il est presque impossible de migrer de bootstrap 2.3 vers 3.0. le changement de version est très radical. J'ai essayé de mettre à jour mon projet zend framework 2 avec bootstrap 3.0 et les résultats étaient un désordre (comme essayer d'ouvrir avec IE 5).

Mon conseil: ancien projet utilisant bootstrap 2.X let avec bootstrap 2.x. Nouveau projet de départ, commencez par 3.0.

À mon avis, un tel changement de version était une très grosse erreur de la part de l'équipe d'amorçage. Ils auraient dû faire une mise à jour graduelle 2.4, 2.5, 2.6 ....

Albanx
la source
8
Je ne suis pas d'accord avec le presque impossible. Il est tout à fait possible de migrer, il vous suffit de suivre les conseils fournis. Voir l'article wiki de la communauté pour les liens. Toujours après les numéros de version sémantique, une mise à jour majeure est autorisée pour rompre les contrats d'interface. Le numéro de version majeur représente donc correctement cette rupture possible.
Jafin
1
Il est très difficile de migrer. Je pense que ce conseil est excellent. Ce n'est pas impossible, mais c'est difficile - rien de tel qu'une mise à niveau des versions antérieures de 2. * vers une autre 2. *.
d -_- b
Ce n'est pas impossible et beaucoup plus facile si vous pouvez rechercher / remplacer des modèles comme span12.
tadman
3
Je peux vous assurer que j'ai fait tout le remplacement possible, même sur des css séparés où je remplace le thème par défaut de boostrap, et dans le code, mais je n'ai pas obtenu un bon résultat. Ne pensez pas seulement à span12, pensez à tous les span *, à tous les navs, tables et plus encore, pensez à une utilisation intensive et profonde du bootstrap
albanx
Bootstrap (comme de nombreux frameworks Web) suit le versionnage sémantique , d'où le passage de 2. * à 3 introduisant des changements d'API incompatibles.
Jake Berger
0

Ce n'est pas sûr mais utilisez cette extension joomla de remplacement

renvoyer ce lien,

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

sinon, les remplacements de modèle sont le seul moyen de le faire.

Kumar Ramalingam
la source
0

Si vous avez une grosse application avec beaucoup de fichiers avec beaucoup de personnalisation, chaque outil unique ne pourrait probablement pas répondre à la plupart des cas auxquels vous êtes confronté.

Tout d'abord, bien sûr, je recommande d'essayer: https://pypi.python.org/pypi/b2tob3/0.4 mais cela ne répondra pas à mon besoin, j'ai forké cette version et j'adapte la mienne pour pouvoir migrer ensemble Bootstrap 2 à 3 et Font Awesome 3 à 4 ensemble, certains cas qui ne sont pas traités dans b23tob3-v0.4 (original) essaient de traiter dans ma version.

Lisez mon article ici: http://ask.osify.com/qa/589 Trouvez ma mise à jour dans github: https://github.com/metrey/b2tob3 Vous pouvez également y trouver l'application Windows compilée à utiliser tout de suite .

Sauvegardez TOUJOURS vos fichiers et validez tout dans le contrôle de code source avant d'utiliser l'outil.

Bonne chance et partagez votre avis.

Osify
la source