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>
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>
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:
- Omitir a tag <meta name=”viewport”>, conforme Listagem 3 abaixo:
- 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:
- Não utilizar classes que tenham comportamento expansível, como por exemplo: navbar-collapse.
- Utilizar a classe col-xs-* para determinar as larguras das grid no layout.
<!-- Não utilizar a tag abaixo no header do seu documento html -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/* exemplo de override da propriedade width */
.container {
width: 970px;
}
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">
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>
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:
<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.
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>
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:
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.
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>
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:
<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.
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
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.
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. |
Chegamos ao fim deste artigo, está foi apenas uma breve introdução a algumas mudanças ocorridas nesta versão 3 do Bootstrap.