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.


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
  href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
 
<!-- Optional theme -->
<link rel="stylesheet" 
 href="//netdna.bootstrapcdn.com/bootstrap/3.0.3
   /css/bootstrap-theme.min.css">
 
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3
  /js/bootstrap.min.js"></script>
Listagem 1. Referências dos links para CDN

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:


<!-- Latest CSS -->
<link rel="stylesheet" 
 href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css">
 
<!-- Optional theme -->
<link rel="stylesheet" 
href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.css">
 
<!-- Latest JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap
 /3.0.3/js/bootstrap.js"></script>
Listagem 2. Referências dos links não minificados para CDN

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:
  2. 
      <!-- 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
  3. 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:
  4. 
      /* exemplo de override da propriedade width */
      .container {
          width: 970px;
      }
      
    Listagem 4. Exemplo de override da propriedade width
  5. Não utilizar classes que tenham comportamento expansível, como por exemplo: navbar-collapse.
  6. Utilizar a classe col-xs-* para determinar as larguras das grid no layout.
Nota: Clicando aqui podemos ver um exemplo de um layout não responsivo. Aproveite para visualizar o código fonte para reforçar o entendimento.

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.


  <img class="img-responsive" src="imagem1.jpg">
Listagem 5. Exemplo de utilização da classe img-responsive

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:


<div class="panel panel-default">
    <div class="panel-body">Basic panel example </div>
</div>
Listagem 6. Exemplo básico do uso do panel

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

Representação do panel básico
Figura 1. Representação do panel básico

Panel with heading and footer

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


<div class="panel panel-default">
    <div class="panel-heading">Cabeçalho</div>
    <div class="panel-body">
        Conteúdo
    </div>
    <div class="panel-footer">Rodapé</div>
</div> 
Listagem 7. Exemplo de panel com cabeçalho e rodapé

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

Representação do panel com cabeçalho
Figura 2. Representação do panel com cabeçalho

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:


Panel default
<div class="panel panel-default">
    <div class="panel-heading">Cabeçalho</div>
    <div class="panel-body">
        Conteúdo
    </div>
</div>
Panel primary
<div class="panel panel- primary ">
    <div class="panel-heading">Cabeçalho</div>
    <div class="panel-body">
        Conteúdo
    </div>
</div>
Panel success
<div class="panel panel- success ">
    <div class="panel-heading">Cabeçalho</div>
    <div class="panel-body">
        Conteúdo
    </div>
</div>
Panel info
<div class="panel panel- info ">
    <div class="panel-heading">Cabeçalho</div>
    <div class="panel-body">
        Conteúdo
    </div>
</div>
Panel warning
<div class="panel panel- warning ">
    <div class="panel-heading">Cabeçalho</div>
    <div class="panel-body">
        Conteúdo
    </div>
</div>
Panel danger
<div class="panel panel- danger ">
    <div class="panel-heading">Cabeçalho</div>
    <div class="panel-body">
        Conteúdo
    </div>
</div>
Listagem 8. Exemplo de utilização das classes personalizáveis dos panels

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

Representação das classes personalizáveis dos panels
Figura 3. Representação das classes personalizáveis dos panels

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:


Meu list group
<ul class="list-group">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item">Item 3</li>
    <li class="list-group-item">Item 4</li>
    <li class="list-group-item">Item 5</li>
</ul>
Listagem 9. Exemplo básico de list groups

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

Representação básica de um list group
Figura 4. Representação básica de um list group

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.


  <div class="list-group">
      <a href="#" class="list-group-item active">Item 1</a>
      <a href="#" class="list-group-item">Item 2</a>
      <a href="#" class="list-group-item">Item 3</a>
      <a href="#" class="list-group-item">Item 4</a>
      <a href="#" class="list-group-item">Item 5</a>
  </div>
Listagem 10. Exemplo de utilização da list groups com tag

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

Representação do código da Listagem 10
Figura 5. 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:


<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">Item 1</h4>
    <p class="list-group-item-text">conteúdo para item 1</p>
  </a>
      
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Item 2</h4>
    <p class="list-group-item-text">conteúdo para item 2</p>
  </a>
      
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Item 3</h4>
    <p class="list-group-item-text">conteúdo para item 3</p>
  </a>
</div>
Listagem 11. Exemplo de customização do conteúdo do componente

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

Representação do código da Listagem 11
Figura 6. 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:


<span class="glyphicon glyphicon-user"></span> glyphicon glyphicon-user
<hr>
<span class="glyphicon glyphicon-warning-sign"></span> glyphicon glyphicon-warning-sign
<hr>
<span class="glyphicon glyphicon-share"></span> glyphicon glyphicon-share
Listagem 12. Exemplo do uso de ícones

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

Representação do código da Listagem 12
Figura 7. 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.

Classe Descrição
col-xs-* Pode ser utilizada para dispositivos com resolução (largura) menor que 768px. Ex.: Smarphones.
col-sm-* Pode ser utilizada para dispositivos com resoluções entre 768 até 991 pixels. Ex.: Tablets
col-md-* Pode ser utilizada para dispositivos com resoluções entre 992 até 1199 pixels. Ex.: Desktops.
col-lg-* Pode ser utilizada para dispositivos com resoluções acima de 1200 pixels. Ex.: Desktops.
Tabela 1. Tabela com breve descrição sobre o uso das classes de grids

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