Bootstrap v2 para a v3

Bom dia pessoal!

Ontem foi lançada a primeira RC do Bootstrap3 como vimos no post anterior e hoje vou falar sobre as principais diferenças entre o Boostrap v2 e o v3.

Se você simplesmente atualizar os arquivos do bootstrap (css e js) esteja quase certo que seu layout vai ficar bem diferente.

O principal motivo é que basicamente o v3 é incompatível com o v2 em quase todos os aspectos pois foi reescrito do zero, segundo os desenvolvedores, sendo o principal motivo ele agora ser “mobile first”, que é uma tendência cada vez mais crescente, tendo em vista que cada vez mais temos celulares e tablets acessando a internet.

“Mobile first” nada mais é que primeiro se preocupar com o layout em resoluções pequenas e depois ajustar para o desktop.

Então vamos aos pontos principais dessas mudanças.

Visual

Como uma tendência recente, adotada inclusive pela Apple no iOS7, o visual está mais “flat”, ou seja, sem mais aqueles pequenos efeitos 3D. Os botões por exemplo estão lisos, achatados, sem aquele efeito de elevação. Apesar de não ser uma incompatibilidade, vai mudar bastante o visual do seu projeto.

Glyphicons

Update: O Glyphicon continua como parte do bootstrap: Glyphicons

Para quem usava o glyphicon, agora ele não vem mais junto com o Bootstrap, você deve baixá-lo separadamente:

http://glyphicons.getbootstrap.com

Uma grande mudança, é que o Glyphicon passou a ser uma fonte. A grande vantagem é que agora você pode definir uma cor para os ícones.

Grid

No v3, continuamos a ter o grid divido em 12 colunas, mas agora é sempre fluido, ou seja, divido usando porcentagens e não mais valores em pixels.

Não existe mais o “span*”, que passou a se chamar “col-*”. Então se antes você tinha “span4” passa a ser “col-lg-4”.

A classe “col-” possui 3 variantes:

  • col-, usada para resoluções pequenas, menos que 480px
  • col-sm-, usada para resoluções entre 480px e 768px
  • col-lg-, usada para resoluções maiores que 768px

Se você usar apenas a “col-lg-“, quando abrir num mobile as colunas vão aparecer em pilha (uma em cima da outra). Então você pode ter uma mesma linha dividida em colunas diferentes para cada resolução. Por exemplo:

A largura de cada uma das 3 colunas vai depender da resolução.

O mesmo service para “offset” e “nesting”. Vale a pena lembrar que como agora o layout é fluido, a soma das colunas internas do “nesting” devem somar 12, e não a coluna “mãe”.

Em um dos projetos que estou fazendo, o dono não quis uma resolução diferente para tablets e celulares, então como fazer isso no Bootstrap3? Simples, basta “enganar” as colunas. Como elas são porcentagens do container onde estão, se definirmos um tamanho fixo para ele, o layout vai permanecer sempre o mesmo. Exemplo:

Margem

O padrão agora de espaçamento é o “padding” e não mais o “margin”. Nas próprias colunas, antes o espaço entre elas era um “margin-left: 30px” e agora é “padding-left: 15px; padding-right: 15px”.

Em alguns casos isso não deve apresentar problemas, mas com o padding altera a largura do elemento, pode ser necessário ajuste nesse sentido.

Append e Prepend inputs

Outra mudança que tive que alterar no meu projeto foi o campo com append ou prepend.

Antes você definia um campo de email assim (note a alteração nos nomes das classes):

Agora deve ser assim:

 Breadcrumbs ou “Migalhas de pão”

Para quem usa este recurso, o Botostrap3 automaticamente acrescenta uma barra “/” ao final de cada passo, então se colocava através de código, será necessário remover.

Paginação

Antes você precisava ter um div antes da lista:

Agora você pode definir a classe diretamente na lista ul:

 Conclusão

Existem várias outras mudanças que podem atrapalhar uma atualização e pedirem mudanças, você pode conferir outras nas anotações dos desenvolvedores no github:

https://github.com/twbs/bootstrap/pull/6342

Até a próxima!

PHP developer since 1997, loves movies, music and dogs.

Um Comentário para: “Bootstrap v2 para a v3

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*