Boas eu tenho um problema, tenho um projecto em cordova que estava a utilizar o bootstrap 3.3.7 porem neste muito tou a passar tudo para o bootstrap 4.0.0, porem pensei em deixar os 2 no projecto pois cada um tem diferentes css. Gostaria de saber se existe algum problema quanto a isso !
-
Não me parece uma boa ideia, com certeza vão haver conflitos– AnthraxisBRCommented 7/03/2018 às 15:15
-
@AnthraxisBR, Então na sua opinião é um erro?– Maria CanelasCommented 7/03/2018 às 15:18
-
Vou fazer uma resposta pra te mostrar o que pode ocorrer– AnthraxisBRCommented 7/03/2018 às 15:19
-
Aqui tem o Guia oficial para fazer a Migração getbootstrap.com/docs/4.0/migration outro ponto bem básicão é que o Grid de uma versão é bem diferente do da outra! Inclusive os "Break Point" responsivos têm medidas diferentes de uma para o outro.– hugocslCommented 7/03/2018 às 15:33
Adicione um comentário
|
1 Resposta
Na maioria das situações, o que vai ocorrer é o elemento pegar o estilo da versão do Bootstrap
que foi incluída por ultimo, como nos 2 exemplos a baixo:
Versão 4
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Botão Bootstrap 4</button>
Versão 3
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Botão com Bootstrap 3</button>
Agora, em alguns elementos, pode haver conflito, como no exemplo abaixo, onde a seta pra baixo do dropdown acaba ficando fora de posição usando um .btn-group
e .dropdown
:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown com conflito
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
</ul>
</div>
</div>
Conclusão
Além de conflitos de estilo, podem haver conflitos entre os JS das duas versões, a não ser que você divida sua aplicação em dois blocos diferentes pra cada versão do Bootstrap
não aho que seja uma boa ideia manter as duas no mesmo projeto, recomendo migração da versão antiga para a v4, ou usar a v3 nessa nova parte.
OBS:
Teste feito no Chrome Win 10.
-
-
@Humbertovieira se resolveu o seu problema podia clicar no 'check' verde ali no canto pra aceitar a resposta, assim outros usuários vão saber que essa duvida foi solucionada ;D Commented 7/03/2018 às 21:23