web-dev-qa-db-fra.com

Mise à jour de Bootstrap vers la version 3, que dois-je faire?

Je suis nouveau dans Bootstrap et possède l'ancienne version 2.3.2.

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

twitter-bootstraptwitter-bootstrap-3
102
henry

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

  2. Migrez votre code html, oui, lisez 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 car TB supprime la prise en charge d'IE7 et de Firefox 3.x ajoutez html5shiv.js pour ajouter la prise en charge des éléments HTML5 à IE8

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

  5. Si vous utilisez des glyphiques, vous devrez les ajouter à partir de http://glyphicons.getbootstrap.com/ (les icônes ont été déplacées vers un référentiel séparé.) Les glyphiques sont de retour depuis RC2 (180 glyphes en format de police du jeu Glyphicon Halflings)

  6. Si vous utilisez le composant Javascript Typeahead, vous devrez intégrer https://github.com/Twitter/typeahead.js/ (car javascript a été supprimé). Voir aussi: Problèmes liés à Typeahead avec Bootstrap 3.0 RC1 Ou utilisez le "vieux" plug-in: https://github.com/bassjobsen/Bootstrap-3-Typeahead , voir aussi: https://stackoverflow.com/questions/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 code HTML dans votre code (comme addthis.com, sharethis.com et Google maps), créez un wrapper pour la taille de la boîte, voir: La bordure droite du compteur AddThis manque avec Twitter Bootstrap 3

Autre:

Bootstrap 3 bascule vers la taille d'une boîte: border-box pourquoi ?: https://stackoverflow.com/a/18858771/1596547

Remarque Le support pour IE7 a été supprimé. https://github.com/coliff/bootstrap-ie7 essayez d’ajouter la partie css avec l’utilisation de certains CSS conditionnels.

134
Bass Jobsen

Mise à jour 2018

Bootstrap 3 à 4

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

Bootstrap 2 à 3

Une version finale (non la version finale 3) de Bootstap 3 RC 1 a été annoncée vendredi 26 juillet 2013, il n’ya donc pas encore de guide officiel de migration.

Il y a des changements majeurs pour Bootstrap 3. Il n'y a pas de compatibilité ascendante 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

22
Zim

il est presque impossible de migrer de bootstrap 2.3 à 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 ont été désastreux (par exemple, essayer d'ouvrir avec IE 5).

Mon conseil: ancien projet utilisant bootstrap 2.X laissé 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 bootstrap. Ils auraient dû faire une mise à jour progressive 2.4, 2.5, 2.6 ....

13
albanx

Je viens de migrer vers la version 3.0.3 et cette application python https://pypi.python.org/pypi/b2tob3/0.4 a rendu la tâche assez facile.

1
Ramesh

J'ai créé un plugin grunt pour automatiser la mise à niveau de bootstrap 2.3 à 3.0 html.

Découvrez-le sur https://github.com/jdewit/grunt-html-upgrader

0
jdewit

Ce n'est pas sûr, mais utilisez cette extension rereplacer joomla

renvoyer ce lien,

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

sinon, les remplacements de modèles sont le seul moyen de procéder.

0
Kumar Ramalingam

Si vous avez une grosse application avec beaucoup de fichiers avec beaucoup de personnalisation, tous les outils possibles ne pourraient probablement pas répondre à la plupart des cas auxquels vous faites face.

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 mis cette version à la fourche et adapté ma propre version capable de migrer ensemble Bootstrap 2 à 3 et Font Awesome 3 à 4 ensemble, certains cas non traités dans b23tob3-v0.4 (original) tentent de traiter dans ma version.

Lisez mon post ici: http://ask.osify.com/qa/589 Trouvez ma mise à jour dans github: https://github.com/metrey/b2tob3 Vous peut également y trouver l'application Windows compilée à utiliser immédiatement.

TOUJOURS sauvegarder vos fichiers et tout enregistrer dans le contrôle de source avant d'utiliser l'outil.

Bonne chance et partagez votre bien.

0
Osify

Deux outils en ligne pour la mise à niveau vers Bootstrap 3:

DE bootply

DE divshot

0
令狐葱