Introdução ao Bootstrap 3

Este artigo tem como objetivo apresentar algumas novidades que vieram junto com a terceira versão do framework Twiter Bootstrap. A primeira mudança que podemos notar é o novo design desta versão: aqueles efeitos gradientes que predominam na versão 2 já não estão presentes na nova versão.

Bootstrap CDN

Podemos a partir de agora fazer a importação dos arquivos do framework através do recurso de CDN’s. Os links para utilização podem ser vistos na Listagem 1.

Observe nos links da Listagem 1 que cada um se refere à sua versão minificada, porém, é possível acessarmos a versão não minificada dos links. Para isto, basta removermos a extensão min do nome do arquivo. Veja na Listagem 2 como ficaria:

Desabilitar recursos responsivos

Para os que já conhecem ou trabalharam com o framework, é sabido que umas das vantagens de sua utilização são os seus recursos responsivos. Nesta versão é possível desabilitar estes recursos, sendo incluídos na própria documentação do framework os passos para desabilita-los. Veja abaixo:

1. Omitir a tag <meta name=”viewport”>, conforme Listagem 3 abaixo:
<!-- Não utilizar a tag abaixo no header do seu documento html --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Listagem 3. Tag a ser omitida no head do documento
2. Fazer um override da propriedade width da classe container no próprio arquivo css do framework ou em outro arquivo css. Veja no exemplo da Listagem 4 abaixo:
/* exemplo de override da propriedade width */ .container { width: 970px; }
Listagem 4. Exemplo de override da propriedade width
3. Não utilizar classes que tenham comportamento expansível, como por exemplo: navbar-collapse.
4. Utilizar a classe col-xs-* para determinar as larguras das grid no layout.

Responsive Images

Utilizando a classe img-responsive podemos fazer com que as imagens de nosso site e/ou aplicação se adaptem ao tamanho da tela do dispositivo que o usuário estiver utilizando. Veja o exemplo da Listagem 5.

Este é um recurso muito bom para nós desenvolvedores, mas é importante ter em mente que em se tratando do conceito responsivo, ou seja, se adaptar em quaisquer dispositivos, não basta apenas utilizar no caso das imagens, o “redimensionamento”; devemos levar em consideração o tamanho desta imagem em relação à conexão do usuário, analisar se determinada imagem em determinada resolução ficará com um mínimo de entendimento para o usuário.

Panels

Os panels funcionam como boxes que podemos guardar/agrupar alguns elementos do nosso DOM. Este componente deixa nosso site/aplicativo com uma melhor organização e mais profissional. Veja na Listagem 6 um exemplo simples:

Veja na Figura 1 como fica a representação do código da Listagem 6.

Panel with heading and footer

Podemos acrescentar facilmente ao nosso panel um cabeçalho e rodapé. Veja na Listagem 7 abaixo:

Veja na Figura 2 como fica a representação do código da Listagem 7.

Contextual alternatives

Assim como em outros componentes, o Bootstrap nós dá algumas classes de personalização que se encaixam em determinados contextos. No panel funciona dá mesma maneira, basta adicionar a classe ao elemento div e ver o resultado. Veja na Listagem 8 a utilização destas classes:

Veja na Figura 3 como fica a representação do código da Listagem 8.

Além dos exemplos descritos acima, podemos combinar os panels com outros componentes conforme nossa necessidade, por exemplo, com tabelas ou list groups.

List Groups

List groups é um componente que nos permite dar ao usuário uma exibição mais organizada e elegante de listas de elementos. Podemos também combiná-lo com uma série de outros componentes conforme nossa necessidade.

Veja na Listagem 9 um exemplo básico da utilização de list groups:

Veja na Figura 4 como fica a representação do código da Listagem 9.

Podemos utilizar a tag <a> ao invés de uma lista <ul>, dando assim ao componente um visual elegante e ter ainda um efeito ao posicionar o cursor do mouse sobre o link. Veja no exemplo da Listagem 10.

Veja na Figura 5 a representação do código da Listagem 10.

Podemos ainda fazer uma simples customização no conteúdo do componente e adequá-lo conforme nossa necessidade. Veja na Listagem 11 um exemplo:

Veja na Figura 6 a representação do código da Listagem 11.

Observe que na Listagem 11 apenas modificamos o conteúdo interno no item da lista, ou seja, podemos utilizar o componente de diversas formas de acordo com a necessidade de cada projeto.

Mudanças

Ícones

Os ícones foram separados em um repositório a parte, e também foram adicionados mais ícones tendo agora cerca de 200 deles a nossa disposição. A sintaxe de uso mudou, agora devemos utilizar além da classe referente ao ícone devemos também utilizar sua classe base. Veja na Listagem 12 um exemplo:

Veja na Figura 7 a representação do código da Listagem 12.

Observe que utilizamos a classe base glyphicon e depois a classe referente ao ícone conforme dito anteriormente. Veja que utilizamos a tag <span>, porém você pode utilizar também a tag <span> conforme a versão 2 do Bootstrap.

Grids

O sistema de grids do Bootstrap 3 sofreu algumas alterações em sua sintaxe, na versão 2 utilizávamos a classe .span* para determinar a largura de nossos grids, neste versão utilizaremos as classes .col-xs-*, .col-sm-*, .col-md-*, .col-lg-* conforme nossa necessidade. Veja na Tabela 1 uma breve descrição sobre cada uma destas.

Chegamos ao fim deste artigo, está foi apenas uma breve introdução a algumas mudanças ocorridas nesta versão 3 do Bootstrap.