Introdução ao Bootstrap 3

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (8)  (0)

Veja neste artigo uma breve introdução ao Framework Twiter Bootstrap 3. Vejam as principais novidades e mudanças incluídas nesta nova versão do framework.

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:

Listagem 1. Referências dos links para CDN.

  <!-- 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>
  

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:

Listagem 2. Referências dos links não minificados para CDN.

  <!-- 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>
  

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:

Listagem 3. Tag a ser omitida no head do documento

  <!-- Não utilizar a tag abaixo no header do seu documento html -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

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:

Listagem 4. Exemplo de override da propriedade width.

  /* exemplo de override da propriedade width */
  .container {
      width: 970px;
  }
  

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.

No link http://getbootstrap.com/examples/non-responsive/ 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.

Listagem 5. Exemplo de utilização da classe img-responsive.

  <img class="img-responsive" src="imagem1.jpg">
  

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:

Listagem 6. Exemplo básico do uso do panel.

  <div class="panel panel-default">
      <div class="panel-body">Basic panel example </div>
  </div>
  

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

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:

Listagem 7. Exemplo de panel com cabeçalho e rodapé.

  <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> 
  

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

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:

Listagem 8. Exemplo de utilização das classes personalizáveis dos panels.

  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>
  

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

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:

Listagem 9. Exemplo básico 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>
  

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

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.

Listagem 10. Exemplo de utilização da list groups com tag <a>.

  <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>
  

Veja na Figura 5 a 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:

Listagem 11. Exemplo de customização do conteúdo do componente.

  <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>
  

Veja na Figura 6 a 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:

Listagem 12. Exemplo do uso de ícones.

  <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
  

Veja na Figura 7 a 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 <i> 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.

Estou à disposição para quaisquer dúvidas. Até a próxima. Obrigado.

Links

Documentação Twiter Bootstrap 3: http://getbootstrap.com/

Página de download customizável: http://getbootstrap.com/customize/

Exemplo layout não responsivo: http://getbootstrap.com/examples/non-responsive/

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?