Antônio Medeiros
Nos dispositivos móveis (Android, iOS, BlackBerry, etc.) , aquele site tradicional projetado para PC com resolução 1024x768 não é exibido de maneira adequada. Muitas vezes, os elementos na tela aparecem muito pequenos, obrigando os visitantes a aumentar o zoom e deslizar a tela pra lá e pra cá para visualizar todo o conteúdo. Não raro, o desenvolvedor desse site se preocupou em testá-lo apenas no Internet Explorer, e o resultado disso é que em alguns dispositivos o layout do site pode se tornar uma verdadeira bagunça.
Pensando em facilitar e agilizar a solução desses problemas, os desenvolvedores do Twitter lançaram o Bootstrap, um framework HTML, CSS, e JS que auxilia o desenvolvimento de sites e aplicações web responsivos, voltados principalmente aos dispositivos móveis.
Um design responsivo, explicado de maneira simples, é aquele que se adapta (responde) ao tamanho da tela do dispositivo em que é renderizado. Se um site é projetado tendo em vista tão somente dispositivos móveis, pode parecer muito grande ou espaçoso em um computador de mesa. Por outro lado, se projetado para computadores de mesa, pode parecer pequeno em dispositivos móveis. Um site responsivo exibe seu conteúdo de uma maneira em computadores de mesa e de outra maneira em dispositivos móveis, ajustando-se da melhor maneira ao espaço disponível na tela.
Não confunda design responsivo com projetar diferentes interfaces para diferentes dispositivos, como faz, por exemplo, o Facebook, ao disponibilizar uma versão para computadores tradicionais, uma versão para celulares e uma versão para tablets. Estou falando de um código só que serve para todos os dispositivos.
Esta página que você lê nesse exato momento é responsiva. Experimente abri-la em um celular, em um tablet e em um computador. Ou, mais prático: se estiver usando um computador, experimente redimensionar a janela do navegador. Você verá como o texto se adapta ao espaço disponível.
Se você utiliza como navegador o Mozilla Firefox, o Google Chrome ou o Opera, outra maneira de verificar como um site aparece em diversos dispositivos é instalar a extensão Web Developer e usar a opção Resize, View Responsive Layouts:
Sem mais conversa, vejamos como utilizar esse framework que é uma verdadeira mão na roda! Não apenas responsividade, o Bootstrap provê componentes e estilos prontos, que podem ser utilizados para tornar o site ou aplicação web mais bonita e funcional.
Primeiros passos
Vamos partir do modelo de página em conformidade com o HTML 5 (o padrão de HTML mais recente até o momento) fornecido pelo Aptana Studio (meu IDE favorito para desenvolvimento web, recomendo):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>new_file</title>
<meta name="description" content="">
<meta name="author" content="Vinicius">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<div>
<header>
<h1>new_file</h1>
</header>
<nav>
<p>
<a href="/">Home</a>
</p>
<p>
<a href="/contact">Contact</a>
</p>
</nav>
<div>
</div>
<footer>
<p>
© Copyright by Vinicius
</p>
</footer>
</div>
</body>
</html>
Vamos começar adicionando o Bootstrap a essa página. Vale observar que o Bootstrap 3.3.4 requer a biblioteca jQuery versão 1.9.1 ou mais recente. Para começar a usar o jQuery e o Bootstrap, vamos adicionar as seguintes linhas (em destaque):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>new_file</title>
<meta name="description" content="">
<meta name="author" content="Vinicius">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<header>
<h1>new_file</h1>
</header>
<nav>
<p>
<a href="/">Home</a>
</p>
<p>
<a href="/contact">Contact</a>
</p>
</nav>
<div>
</div>
<footer>
<p>
© Copyright by Vinicius
</p>
</footer>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Fazendo isso, temos um modelo bem parecido com o modelo básico apresentado no site do Bootstrap. Algumas observações:
- Adicionando o jQuery e o Bootstrap como no exemplo acima, nossos visitantes baixarão essas bibliotecas de CDNs (Content Delivery Networks). É a forma mais fácil para integrá-las ao nosso site, uma vez que não precisamos nos preocupar em hospedá-las, e a forma mais ágil para os visitantes obtê-las, pois cópias dessas bibliotecas estarão replicadas pelo globo e poderão ser baixadas do servidor mais próximo.
- Utilizamos bibliotecas adicionais (nesse caso, html5shiv e Respond.js para adicionar às versões 8 e 9 do Internet Explorer suporte a algumas propriedades do CSS 3 e alguns elementos do HTML 5, utilizados pelo Bootstrap. Essas bibliotecas só são baixadas pelo visitante caso ele utilize o Internet Explorer 8 ou o 9.
- As folhas de estilo são listadas no elemento
head, enquanto os scripts são listados no final do elementobody. Dizem que assim a página carrega mais rápido.
Se não quiser depender de servidores de terceiros para usar o Bootstrap, você também pode baixá-lo e hospedá-lo em seu próprio servidor. Clique aqui para baixar o Bootstrap versão 3.3.4 (a versão mais atual do Bootstrap até o momento). Descompacte-o em algum local no seu servidor e atualize as referências de acordo, por exemplo (supondo que você extraiu o arquivo baixado na mesma pasta do arquivo acima):
1
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
Mais exemplos do Bootstrap em ação podem ser vistos na página de exemplos do Bootstrap ou na lista de sites feitos com Bootstrap. Vale lembrar que este site que você lê agora também utiliza o Bootstrap.
Design responsivo
O design responsivo pode ser conseguido pelo Bootstrap a partir do seu sistema de grids, que provê até 12 colunas que são redimensionadas automaticamente a medida em que o tamanho do dispositivo ou do viewport aumentam. O Bootstrap fornece classes pré-definidas que facilitam a definição do layout da página.
Inicialmente, o Bootstrap requer que o conteúdo da página seja inserido dentro de um container, que pode ser de largura fixa (uma div com a classe .container) ou preencher toda a largura do viewport (uma div com a classe .container-fluid).
Dentro do container, utilizamos linhas (divs com a classe .row) para criar agrupamentos horizontais de colunas, que devem ser, na estrutura da página, as únicas descendentes das linhas.
O conteúdo deve ser inserido nas colunas. Existem diversas classes para especificar colunas, com base nos tamanhos e dispositivos desejados. Essas classes obedecem ao seguinte padrão:
.col-xs-para dispositivos muito pequenos (largura < 768px), como celulares;.col-sm-para dispositivos pequenos (768px <= largura < 992px), como tablets;.col-md-para dispositivos médios (992px <= largura < 1200px), como computadores de mesa (desktops); e.col-lg-para dispositivos grandes (largura >= 1200px)
A soma dos tamanhos das colunas em uma linha deve, preferencialmente, ser igual a 12.
O exemplo a seguir define um layout com duas colunas de igual largura (6/12, ou 50%) para um computador ou tablet (telas com largura igual ou superior a 768px). Em telas com largura inferior a 768px (celulares, por exemplo), a primeira coluna é exibida acima da segunda coluna, como se fossem duas linhas.
1
2
3
4
5
6
7
8
9
10
<div class="container exemplo">
<div class="row">
<div class="col-sm-6">
.col-sm-6
</div>
<div class="col-sm-6">
.col-sm-6
</div>
</div>
</div>
Nesta página, defini a classe .exemplo para facilitar a visualização dos exemplos:
1
2
3
.exemplo div {
border: 1px solid blue;
}
Observe que as colunas já definem espaços entre seus conteúdos.
Se mais de 12 colunas são inseridas em uma única linha, cada grupo de colunas extras irá cair, como se estivesse em uma nova linha. Observe o exemplo a seguir:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="container exemplo">
<div class="row">
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-4">
.col-sm-4
</div>
<div class="col-sm-5">
.col-sm-5
</div>
<div class="col-sm-6">
.col-sm-6
</div>
</div>
</div>
Observe também que é possível definir tamanhos diferentes para as colunas a depender do dispositivo. No exemplo a seguir, as duas colunas aparecem numa relação de 1 para 2 em tablets e computadores e numa relação de 1 para 1 em celulares.
1
2
3
4
5
6
7
8
9
10
<div class="container exemplo">
<div class="row">
<div class="col-xs-6 col-sm-4">
.col-xs-6 .col-sm-4
</div>
<div class="col-xs-6 col-sm-8">
.col-xs-6 .col-sm-8
</div>
</div>
</div>
Na ausência de uma classe que defina o tamanho para a coluna em um dispositivo particular, se aplica a regra do dispositivo menor. Então, no exemplo acima, ao definir o tamanho da coluna para tablets (.col-sm-) e não definir o tamanho da coluna para computadores (.col-md-), as colunas serão exibidas da mesma maneira nesses dispositivos.
Se não houver uma regra nem para o dispositivo atual e nem para um menor, cada coluna ocupará sua linha. Vamos modificar o exemplo acima, removendo a definição do tamanho da coluna para celulares (.col-xs-):
1
2
3
4
5
6
7
8
9
10
<div class="container exemplo">
<div class="row">
<div class="col-sm-4">
.col-sm-4
</div>
<div class="col-sm-8">
.col-sm-8
</div>
</div>
</div>
Nesse novo exemplo, nos celulares as colunas serão exibidas uma em cima da outra, como se fossem linhas. Em computadores e tablets, elas serão exibidas lado a lado, como no exemplo anterior.
O Bootstrap permite ainda exibir determinado conteúdo apenas em certos dispositivos:
1
2
3
4
5
6
7
8
9
10
11
<div class="container exemplo">
<p class="visible-xs-block hidden-print">
Esse parágrafo só aparece em celulares
</p>
<p class="hidden-sm">
Esse parágrafo não aparecerá em <em>tablets</em>
</p>
<p class="hidden-print">
Esse parágrafo não será impresso (experimente visualizar a impressão)
</p>
</div>
Esse parágrafo não aparecerá em tablets
Esse parágrafo não será impresso (experimente visualizar a impressão)
Nada melhor que ver os exemplos para compreender os princípios desse sistema de grid e aplicá-los ao seu próprio código. Treinar também é importante!
Estilos e componentes
Não apenas responsividade, o Bootstrap provê componentes e estilos prontos, que podem ser utilizados para tornar o site ou aplicação web mais bonita e funcional. Aqui, mostrarei apenas alguns exemplos e dicas.
Em relação aos estilos prontos, chamo a atenção para os formulários, bastante elegantes e funcionais. Como dicas, recomendo o gerador de forms do Bootstrap e o plugin Bootstrap Validator. Veja abaixo um exemplo de formulário construído com o auxílio do referido gerador.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<form class="form-horizontal">
<fieldset>
<legend>Um exemplo de formulário</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="nome">Nome</label>
<div class="col-md-8">
<input id="nome" name="nome" type="text" placeholder="Antônio Vinícius" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="email">E-mail</label>
<div class="col-md-8">
<input id="email" name="email" type="text" placeholder="E-mail" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="senha">Senha</label>
<div class="col-md-8">
<input id="senha" name="senha" type="password" placeholder="Senha" class="form-control input-md" required="">
<span class="help-block">Mínimo de 6 caracteres</span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="botao_enviar"></label>
<div class="col-md-8">
<button id="botao_enviar" name="botao_enviar" class="btn btn-primary">Enviar</button>
</div>
</div>
</fieldset>
</form>
Em relação aos componentes, posso citar como exemplos os Glyphicons, ícones prontos para uso que acompanham o Bootstrap (são populares também os ícones da Font Awesome, providos por terceiros), e os alertas:
1
2
3
4
5
<div class="alert alert-info" role="alert">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
<span class="sr-only">Aviso:</span>
<strong>Sem JavaScript habilitado, você não consegue utilizar o Bootstrap!</strong> Veja <a href="http://enable-javascript.com/pt/">como habilitar o JavaScript no seu navegador</a>.
</div>
Há ainda outros componentes cuja utilização envolve JavaScript, a exemplo dos diálogos:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<button type="button" class="btn btn-primary btn-lg" id="meu_botao">
Clique para exibir um exemplo de diálogo
</button>
<div class="modal fade" id="meu_dialogo" tabindex="-1" role="dialog" aria-labelledby="titulo_do_meu_dialogo">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="titulo_do_meu_dialogo">Um exemplo de diálogo</h4>
</div>
<div class="modal-body">
<p>Dentro do diálogo, você pode exibir o que quiser.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="botao_ok">OK</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
$('#meu_dialogo').modal({
show: false
});
$('#meu_botao').click(function(event){
event.preventDefault();
$('#meu_dialogo').modal('show');
});
$('#botao_ok').click(function(event){
event.preventDefault();
$('#meu_dialogo').modal('hide');
});
});
Suporte a diversos navegadores e dispositivos
O Bootstrap suporta as versões mais recentes dos navegadores mais comuns:
Assim como os dispositivos mais comuns também:
O Bootstrap não suporta oficialmente os navegadores para Linux, mas espera-se que ele funcione bem também nesses navegadores.
Se desejar mais informações sobre a compatibilidade do Bootstrap com diversos navegadores, acesse essa página.
Problemas
Pra não dizer que só falei em flores… vejamos alguns problemas que tive com a utilização do Bootstrap. E o mais importante: como contorná-los!
Internet Explorer
Oficialmente, o Bootstrap suporta o navegador Internet Explorer a partir da versão 8.
No entanto, as versões 8 e 9 do Internet Explorer não suportam alguns recursos do CSS e do HTML que o Bootstrap necessita. O contorno para esse problema já vimos: impor a utilização das bibliotecas html5shiv e Respond.js aos visitantes que estiverem utilizando essas versões do Internet Explorer. Para isso, acrescente ao head da página:
1
2
3
4
5
6
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
O site do Bootstrap também relata a existência de um bug no Internet Explorer 10 para Windows 8 e Windows Phone 8 que afeta a exibição de sites construídos com o Bootstrap nesses sistemas operacionais. Para contorná-lo, é suficiente acrescentar os seguintes CSS e JavaScript ao site:
1
2
3
4
5
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/.
*/
// See the Getting Started docs for more information:
// http://getbootstrap.com/getting-started/#support-ie10-width
(function () {
'use strict';
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}
})();
Componentes de terceiros
Os estilos do Bootstrap podem afetar a exibição de componentes de terceiros no seu site. No meu caso, tive problemas com o mecanismo de pesquisa personalizado do Google (Google Custom Search Engine) e o SyntaxHighlighter.
O site do Bootstrap mostra algumas soluções possíveis. Eu resolvi meus problemas definindo uma classe .reset-box-sizing e aplicando essa classe às divs desses componentes:
1
2
3
4
5
6
7
8
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
Considerações finais
Espero que este post tenha apresentado uma boa visão geral do potencial que o Bootstrap tem para melhorar o seu site ou aplicação web. Não tenho a intenção de esgotar o assunto aqui, até porque há muito a falar do Bootstrap. Portanto, recomendo que continue lendo o site oficial do Bootstrap. Ele é realmente a melhor fonte de informações sobre o Bootstrap. Além dele, não há nada que uma busca no Google ou no Stack Overflow não responda.
Se não quiser utilizar o tema padrão do Bootstrap, você pode encontrar bons temas, tanto pagos quanto gratuitos, nos sites a seguir:
- ShapeBootstrap (foi nele que encontrei o tema Xeon, que utilizo no site do Portugol Online)
- Bootswatch (foi nele que encontrei o tema Paper, que utilizo neste site)
- Start Bootstrap (já utilizei o modelo SB Admin em um projeto, muito bom para aplicações web)
- Bootstrap Zero
- Bootplus (uma versão modificada do Bootstrap inspirada no estilo do Google Plus)
