Atualizando o Bootstrap para a versão 3 - o que devo fazer?

102

Sou novo no Bootstrap e tenho a versão anterior 2.3.2.

A versão 3 foi lançada. Devo simplesmente substituir os arquivos CSS e Javascript se quiser usar a versão mais recente?

twitter-bootstrap  twitter-bootstrap-3 
— Henry
fonte
Você pode querer ler sobre as mudanças e certificar-se de que elas não quebram nada que você já tenha implementado, mas sim, simplesmente substitua os arquivos
— Patsy Issa
Sim, só quero ter certeza de que estou fazendo isso corretamente. Acho que o Bootstrap foi a melhor coisa de todos - é incrível. Estou ansioso para usar a próxima versão. Tenho certeza de que li em algum lugar que o uso pode usar .less para gerenciar atualizações, mas provavelmente estou errado com isso.
— Henry
1
— Bass Jobsen 01 de
Observe que embora os documentos digam que tudo é "fluido" no 3.0, ele ainda usa larguras de pixel fixas para contêineres ... o que é meio estúpido, pois é o oposto exato do layout fluido.
— Cerin,

Respostas:

134

  1. Baixe a versão mais recente em http://getbootstrap.com/ OU substitua os arquivos css e js pelas versões mais recentes ou use o CDN ( http://www.bootstrapcdn.com/ )

  2. Migre seu html, sim, leia http://bootply.com/bootstrap-3-migration-guide . Você pode tentar http://twitterbootstrapmigrator.w3masters.nl/ ou http://code.divshot.com/bootstrap3_upgrader/ (forneça uma lista de verificação também)

  3. remover html5shiv causa TB descarta suporte para IE7 e Firefox 3.x adicionar html5shiv.js para adicionar suporte de elementos HTML5 para IE8

  4. adicione respond.js ( https://github.com/scottjehl/Respond ) para suporte de consulta de mídia no IE. OBSERVAÇÃO, isso não funcionará com o CDN, consulte: Problema do IE8 com o Twitter Bootstrap 3

  5. Se você usar Glyphicons, terá que adicioná-los de http://glyphicons.getbootstrap.com/ (os ícones foram movidos para um repositório separado.) Os glifos estão de volta desde RC2 (180 glifos em formato de fonte do conjunto Glyphicon Halflings)

  6. Se você usar o componente Javascript Typeahead, terá que integrar https://github.com/twitter/typeahead.js/ (porque o javascript de typeahead foi eliminado) Consulte também: Problemas de Typeahead com Bootstrap 3.0 RC1 Ou use o plugin "antigo" : https://github.com/bassjobsen/Bootstrap-3-Typeahead , consulte também: /programming/18615964/ajax-call-in-bootstrap-3-0-typeahead/18620473

  7. Mude para a versão mais recente do jQuery 1.x (não use a versão 2.x porque o jQuery 2.x não é compatível com o IE8)

  8. Se você usar widgets de terceiros que adicionam ou inserem html ao seu código (como addthis.com, sharethis.com e Google Maps), crie um wrapper para o tamanho da caixa, consulte: Borda direita do contador AddThis ausente no Bootstrap 3 do Twitter

De outros:

Alternar bootstrap 3 para box-sizing: border-box por quê ?: https://stackoverflow.com/a/18858771/1596547

Observe que o suporte para IE7 foi eliminado. https://github.com/coliff/bootstrap-ie7 tente adicionar a parte css de volta com o uso de algum CSS condicional.

— Bass Jobsen
fonte
Isso soa como um grande empreendimento. Quanto tempo isso deve levar? 1 semana de trabalho? 1 mês? 6 meses?
— Curt de
o problema é que o BS2 não é compatível com versões anteriores do BS3, consulte também bassjobsen.weblogs.fm/…
— Bass Jobsen
1
Se eu tivesse que adivinhar, diria que pode levar alguns meses para atualizar. Brutal.
— Curt de
@Curt me mande um e-mail. Talvez eu possa te ajudar?
— Bass Jobsen
Como te envio um e-mail? Através do seu Twitter? Eu li um pouco mais da v3 e parece que é principalmente para adicionar suporte para telefones mais antigos. Nesse caso, não acho que preciso da v3.
— Curt de
22

Atualizado 2018

Bootstrap 3 a 4

Ferramenta de atualização Bootstrap 4 (isso ajudará a migrar do Bootstrap 3 para 4)

Bootstrap 2 a 3

Um candidato a lançamento (não a versão 3 final) para Bootstap 3 RC 1 foi anunciado na sexta-feira (26 de julho de 2013), então ainda não há nenhuma orientação oficial de migração.

Existem mudanças importantes para o Bootstrap 3. Não há compatibilidade com versões anteriores do 2.x, então você não pode simplesmente substituir os arquivos. No entanto, você pode encontrar algumas orientações úteis aqui no Bootply:

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

Há também uma ferramenta de migração Bootstrap em desenvolvimento: https://github.com/iatek/bootstrap-migrate

Ferramenta de atualização Bootstrap 2.x para 3: http://upgrade-bootstrap.bootply.com/v3

— Zim
fonte
1
Saudações do futuro! Aqui está a ferramenta Bootstrap 4: upgrade-bootstrap.bootply.com
— Zim
14

é quase impossível migrar do bootstrap 2.3 para o 3.0. a mudança de versão é muito drástica. Tentei atualizar meu projeto zend framework 2 com bootstrap 3.0 e o resultado foi uma bagunça (como tentar abrir com o IE 5).

Meu conselho: projeto antigo usando bootstrap 2.X vamos com bootstrap 2.x. Novo projeto inicial, comece com 3.0.

Na minha opinião, essa mudança de versão foi um grande erro da equipe de bootstrap. Eles deveriam ter feito uma atualização gradual 2.4, 2.5, 2.6 ....

— Albano
fonte
8
Eu discordo do quase impossível. A migração é totalmente possível, basta seguir as orientações fornecidas. Veja a postagem na wiki da comunidade para obter os links. Também seguindo os números de versão semântica, uma grande atualização é permitida para quebrar os contratos de interface. Portanto, o número da versão principal representa corretamente essa possível quebra.
— Jafin
1
É muito difícil migrar. Acho que este conselho é ótimo. Não é impossível, mas é difícil - nada como atualizar de versões anteriores do 2. * para outro 2. *.
— d -_- b
Não é impossível e fica muito mais fácil se você puder pesquisar / substituir padrões como span12.
— tadman
3
Posso garantir que fiz todas as substituições possíveis, mesmo em css separado, onde substituo o tema padrão do boostrap, e no código, mas não obtive um bom resultado. Não pense apenas em span12, pense em todos os span *, todos os navs, tabelas e muito mais, pense em um uso intenso e profundo de bootstrap
— albanx
Bootstrap (como muitos frameworks da web) segue o Semantic Versioning , daí a mudança de 2. * para 3, introduzindo mudanças de API incompatíveis.
— Jake Berger
0

Se você está tendo um grande aplicativo com muitos arquivos com muita personalização, todas as ferramentas provavelmente não poderiam responder à maioria dos casos que você está enfrentando.

Em primeiro lugar, é claro, recomendo tentar: https://pypi.python.org/pypi/b2tob3/0.4 mas isso não vai atender à minha necessidade, eu bifurquei esta versão e adaptei a minha para poder migrar juntos Bootstrap 2 a 3 e Font Awesome 3 a 4 juntos, alguns casos que não tratam no b23tob3-v0.4 (original) estão tentando tratar na minha versão.

Leia minha postagem aqui: http://ask.osify.com/qa/589 Encontre minha atualização no github: https://github.com/metrey/b2tob3 Você também pode encontrar o aplicativo Windows compilado lá para usar imediatamente .

SEMPRE faça backup de seus arquivos e envie tudo para o controle de origem antes de usar a ferramenta.

Boa sorte e compartilhe seu pensamento.

— Osify
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.