Bootstrap 3 Completo [portugues]

Prévia do material em texto

Maurício Samy Silva
Bootstrap 3.3.5
Aprenda a usar o framework Bootstrap para 
criar layouts CSS complexos e responsivos
7
Sumário
Agradecimentos ...................................................................................................11
Isenção de responsabilidade .................................................................................12
Sobre o autor .......................................................................................................13
Introdução ...........................................................................................................14
Capítulo 1 ■ Apresentação do Bootstrap ................................................................20
1.1 Introdução .....................................................................................20
1.1.1 Definição ................................................................................20
1.1.2 Histórico ................................................................................ 21
1.1.3 Por que usar Bootstrap ............................................................ 21
1.1.4 Seções da documentação do Bootstrap.....................................22
1.2 Ferramentas de desenvolvimento ...................................................24
1.3 Download .....................................................................................24
1.4 Templates HTML ...........................................................................27
1.5 Bootlint ........................................................................................29
1.6 Modelo CSS e o box-sizing ............................................................30
1.7 Acessibilidade ................................................................................ 31
1.8 Suporte .........................................................................................32
Capítulo 2 ■ Fundamentos ....................................................................................35
2.1 Marcação HTML ...........................................................................35
2.2 CSS reset .......................................................................................35
2.3 Sistema de grid para layout ............................................................ 37
2.4 Como é criado um grid CSS ...........................................................39
2.4.1 Container geral .......................................................................39
2.4.2 Linha de células .....................................................................40
2.4.3 Unindo células .......................................................................43
2.4.4 Criando um rodapé ................................................................46
2.4.5 Aninhando conteúdos ............................................................ 47
2.4.6 Semântica ..............................................................................49
2.4.7 Espaçando colunas .................................................................50
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.58
2.5 Grid fluido .................................................................................... 52
2.6 Grid responsivo .............................................................................53
2.7 Conclusão .....................................................................................53
Capítulo 3 ■ CSS ....................................................................................................54
3.1 Grid ..............................................................................................54
3.1.1 Introdução ..............................................................................55
3.1.2 Breakpoints ............................................................................55
3.1.3 Linhas do grid ........................................................................56
3.1.4 Colunas do grid ......................................................................57
3.1.5 Container fluido .....................................................................66
3.2 Tipografia .....................................................................................67
3.2.1 Estilização do elemento body ..................................................67
3.2.2 Estilização dos elementos h1 - h6 ............................................68
3.2.3 Estilização de elementos para textos inline ..............................69
3.2.4 Estilização do elemento abbr ..................................................70
3.2.5 Estilização do elemento address .............................................. 71
3.2.6 Estilização dos elementos blockquote e cite .............................72
3.2.7 Estilização de elementos de lista .............................................73
3.3 Códigos ........................................................................................76
3.4 Tabelas ..........................................................................................79
3.4.1 Estilização básica ....................................................................80
3.4.2 Estilização com efeito zebra .................................................... 81
3.4.3 Estilização com classes de contexto .........................................82
3.4.4 Estilização com bordas ...........................................................83
3.4.5 Estilização com efeito hover nas linhas ....................................83
3.4.6 Estilização com linhas condensadas ........................................84
3.4.7 Estilização responsiva .............................................................85
3.5 Formulários ..................................................................................86
3.5.1 Estilização de controles ...........................................................86
3.5.2 Estilização de formulário ........................................................94
3.6 Imagens ........................................................................................96
3.7 Classes auxiliares ..........................................................................97
3.7.1 Cores contextuais ....................................................................97
3.7.2 Fundos contextuais ................................................................98
3.7.3 Marcadores fechar e dropdown ................................................99
3.7.4 Flutuar ...................................................................................99
3.7.5 Clearfix a classe clearfix ...........................................................99
3.7.6 Centrar na horizontal ........................................................... 100
3.7.7 Mostrar e esconder ............................................................... 100
3.7.8 Leitores de tela e navegação por teclado ................................. 100
3.7.9 Image replacement .................................................................101
3.7.10 Mostrar e esconder por breakpoints ......................................101
3.7.11 Classes para impressão ......................................................... 102
Conheça os livros do Maujor: http://livrosdomaujor.com.br
9Sumário
3.8 Validação de formulários ............................................................. 102
3.8.1 Validação com cores .............................................................. 103
3.8.2 Validação com ícones ........................................................... 104
3.9 Temas ......................................................................................... 105
Capítulo 4 ■ Componentes ..................................................................................107
4.1 Ícones.......................................................................................... 107
4.2 Dropdown e dropup ....................................................................109
4.2.1 Alinhamento, título e item desabilitado .................................. 111
4.3 Agrupamento de botões................................................................112
4.3.1 Agrupamento em linha ..........................................................112
4.3.2 Agrupamento vertical ............................................................112
4.3.3 Agrupamento barra de ferramentas .......................................113
4.3.4 Agrupamento justificado .......................................................113
4.3.5 Dimensionamento.................................................................114
4.4 Botões dropdown .........................................................................115
4.4.1 Botões dropdown simples ......................................................115
4.4.2 Botões com ícone de abertura separado .................................116
4.4.3 Botões com ícone de abertura Glyphicon e integrado .............117
4.4.4 Dimensionamento .................................................................117
4.4.5 Botão dropup .......................................................................117
4.5 Controle input com add-on ..........................................................118
4.5.1 Texto add-on .........................................................................118
4.5.2 Botão simples add-on ............................................................119
4.5.3 Botão dropdown add-on ....................................................... 120
4.6 Navegação .................................................................................. 122
4.6.1 Aba básica ............................................................................ 122
4.6.2 Aba desabilitada................................................................... 123
4.6.3 Aba com link dropdown ....................................................... 123
4.6.4 Abas justificadas ................................................................... 124
4.6.5 Pills ..................................................................................... 124
4.7 Barra de navegação ...................................................................... 125
4.7.1 Barra de navegação básica ..................................................... 125
4.7.2 Barra de navegação fixa ........................................................ 127
4.7.3 Barra de navegação com caixa de busca ................................. 129
4.7.4 Barra de navegação com botão .............................................. 129
4.7.5 Barra de navegação com link dropdown ................................ 130
4.7.6 Barra de navegação com texto ............................................... 130
4.8 Caminho de navegação .................................................................131
4.9 Paginação ................................................................................... 132
4.9.1 Widget de paginação básica ................................................... 132
4.9.2 Dimensionamento do widget paginação ................................ 133
4.9.3 Estado dos links ................................................................... 133
4.9.4 Pager .................................................................................... 134
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.510
4.10 Rótulos e marcadores ................................................................. 135
4.11 Jumbotron ................................................................................. 136
4.11.1 Jumbotron básico ................................................................ 136
4.11.2 Jumbotron estendido .......................................................... 137
4.12 Page-header ............................................................................... 138
4.13 Thumbnail ................................................................................ 139
4.13.1 Thumbnail padrão .............................................................. 139
4.13.2 Thumbnail com conteúdos ................................................. 140
4.14 Caixas de alerta .......................................................................... 141
4.15 Barra de progresso ..................................................................... 142
4.16 Objetos de mídia ........................................................................147
4.17 Agrupamento de itens de listas ................................................... 150
4.18 Painéis ....................................................................................... 152
4.19 Mídias responsivas ..................................................................... 155
4.20 Wells ......................................................................................... 157
Capítulo 5 ■ Plugins ............................................................................................159
5.1 Introdução ................................................................................... 159
5.2 Plugins ....................................................................................... 162
5.2.1 Transições ............................................................................ 162
5.2.2 Janela modal ........................................................................ 163
5.2.3 Dropdown ........................................................................... 168
5.2.4 Scrollspy .............................................................................. 172
5.2.5 Abas .................................................................................... 178
5.2.6 Tooltip ................................................................................. 183
5.2.7 Popover ............................................................................... 188
5.2.8 Alerta .................................................................................. 192
5.2.9 Botões ................................................................................. 193
5.2.10 Collapse ............................................................................. 195
5.2.11 Carousel ............................................................................. 199
5.2.12 Affix ...................................................................................204
Capítulo 6 ■ Criando um layout com Bootstrap ....................................................207
6.1 Introdução ................................................................................... 207
6.2 Layout iMasters ..........................................................................209
6.2.1 Primeira etapa: navegação superior ........................................212
6.2.2 Segunda etapa: personalização da barra de topo ....................214
6.2.3 Terceira etapa: barra do logotipo e caixa de busca ................. 216
6.2.4 Quarta etapa: mecanismo de navegação principal ..................217
6.2.5 Quinta etapa: destaques da semana .......................................219
6.2.6 Sexta etapa: barra de notícias ................................................221
Referência .........................................................................................................225
Conheça os livros do Maujor: http://livrosdomaujor.com.br
11
Agradecimentos
Agradeço a Deus por ter me dado forças, disposição e motivação para escrever 
este livro.
Meu maior agradecimento é a você, leitor, por interessar-se em aprender as técni-
cas de construção de layout com uso do framework Bootstrap e honrar-me com 
a leitura deste livro.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
12
Isenção de responsabilidade
Todos os esforços foram feitos na elaboração deste livro para assegurar o for-
necimento de informações as mais precisas, completas e exatas. Contudo as 
informações aqui contidas são fornecidas “como estão” e sem nenhuma garantia,seja expressa, seja implícita. O autor, a editora, os distribuidores e qualquer en-
tidade envolvida direta ou indiretamente na sua comercialização não assumirão 
nenhuma responsabilidade por qualquer prejuízo ou dano, direto ou indireto, 
consequente às informações contidas neste livro.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
13
Sobre o autor
Maurício Samy Silva é graduado em Engenharia Civil pelo Instituto Militar de 
Engenharia (IME). Sua experiência com desenvolvimento de sites teve início em 
1999, motivada pela necessidade de criar um site para um clube de pesca amadora 
do qual ele era o presidente e uma espécie de faz-tudo.
Em 2002, ele teve seu primeiro contato com o site do W3C e começou a pesquisar 
e a estudar as Web Standards, tendo como fonte de consulta o material publicado 
na internet em língua inglesa.
No segundo semestre de 2003, estimulado pela completa falta de material de 
consulta gratuita na internet, ele decidiu lançar o Site do Maujor, o qual é nacio-
nalmente conhecido, hospedado em http://www.maujor.com/. A proposta inicial do 
site era divulgar a cascading style sheet (CSS), ou folha de estilo em cascata, com 
base no compartilhamento de suas experiências com tal técnica. Com a pronta 
aceitação e o sucesso crescente do site, o objetivo inicial tornou-se mais ambicioso 
e passou a ser a divulgação das Web Standards.
No início de 2006, criou o Blog do Maujor, hospedado em http://www.maujor.com/blog/, 
com propósito semelhante ao do site, mas com uma dinâmica mais ativa e a efetiva 
participação de seus leitores.
Maujor, como é conhecido o autor, é ainda um ativo frequentador de fóruns, 
escreve para vários portais brasileiros voltados a desenvolvedores web, é autor 
de artigos em inglês e de trabalhos relacionados às CSS publicados em sites in-
ternacionais sobre Web Standards.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
14
Introdução
Este livro tem por objetivo fornecer aos profissionais envolvidos com o desen-
volvimento para a web os conceitos fundamentais e as técnicas de programação 
necessárias ao desenvolvimento de interfaces responsivas com uso do framework 
Bootstrap.
Para quem foi escrito este livro
Este livro foi escrito para aquelas pessoas envolvidas na criação de sites tanto na 
área de design quanto na de desenvolvimento e programação, que desejam usar 
um framework mundialmente consagrado para criar interfaces usáveis e acessíveis 
em qualquer dispositivo, independentemente de suas características, isto é, que 
se adaptem às mais variadas resoluções de tela.
O objetivo do livro é fornecer informações detalhadas dos componentes do fra-
mework Bootstrap, estudando seus princípios e detalhando as funcionalidades 
previstas não somente pelo core (coração) do framework como também por cada 
um dos seus componentes. Explicações teóricas em linguagem corrente e clara, 
dispensando, sempre que possível, o jargão técnico avançado são acompanhadas 
de exemplos práticos explicados passo a passo e complementados por arquivo 
HTML para consulta.
Para tirar o máximo proveito dos ensinamentos contidos em cada capítulo é pré-
-requisito um razoável conhecimento de marcação HTML e das CSS e da criação 
de folhas de estilo. É desejável que o leitor tenha conhecimentos necessários para 
criar, com uso daquelas duas tecnologias, um layout simples de duas colunas.
Os conceitos e o entendimento das técnicas de desenvolvimento de interfaces 
responsivas são poderosas ferramentas de apoio na criação de sites mais aces-
síveis, enriquecendo a experiência do usuário. Profissionais da área de design, 
familiarizados com as técnicas aqui descritas, contarão com uma valiosa fonte 
de conhecimento e conceitos a empregar no planejamento das funcionalidades 
para incrementar suas criações, tornando-as universais.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
15Introdução
Os iniciantes irão se beneficiar deste livro por começar seus estudos em uma 
fonte que aborda os princípios básicos de uso de frameworks CSS e das mais 
modernas técnicas de escrita do código, ensejando uma mudança no rumo de 
seu estudo que irá reduzir a curva de aprendizado e acelerar tal processo. Não 
se intimidem com conceitos ou terminologias que lhes sejam completamente 
desconhecidos nos primeiros capítulos. Com a sequência da leitura, as dúvidas 
tenderão a desaparecer naturalmente.
Convenções tipográficas
Com a finalidade de destacar diferentes tipos de informação neste livro, adotaram-
-se algumas convenções tipográficas mostradas a seguir.
Dica
Texto contendo uma dica sobre o assunto tratado:
Dica: Para suporte nativo das funcionalidades mostradas neste capítulo, consulte 
o site http://caniuse.com.
Alerta
Texto contendo um lembrete sobre procedimento extra com relação ao assunto 
tratado:
Alerta: Convém ressaltar que o grid do Bootstrap foi criado segundo os princípios 
da filosofia mobile first e, logicamente, é responsivo. 
Terminologia
Texto estabelecendo a adoção de grafia-padrão em todo o livro para termos ou 
frases com mais de uma terminologia, uma tradução ou um significado:
Terminologia: Nos códigos desenvolvidos neste livro, adotou-se a sintaxe-padrão.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.516
Chamada
Uma chamada para uma seção anterior na qual o assunto em questão foi expli-
cado com detalhes.
Por exemplo:
Conforme estudamos no item [3.5.1.2], por padrão, os botões são estilizados com 
um padding que determina suas dimensões.
Neste exemplo, a chamada é para a seção 3.5.1.2, ou seja, capítulo 3 (o primeiro 
número indica o capítulo), item 5, subitem 1 subitem 2.
Marcação e scripts
Nas marcações e nos scripts que exemplificam a teoria, transcreveram-se somente 
os trechos que interessam ao assunto tratado. Omitiram-se os trechos que não 
dizem respeito ou não são relevantes para o entendimento do assunto, para não 
ocupar espaço desnecessário no livro.
Blocos de marcação são marcados com fonte monoespaçada:
<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Portfólio</a></li>
 <li><a href="#">Loja</a></li>
 <li><a href="#">Contato</a></li>
</ul>
Trechos de marcação que merecem destaque são marcados em negrito:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script>window.jQuery || document.write('<script src="../bootstrap/js/jquery.min.js">
 <\/script>')</script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript">
 $('.dropdown-toggle').dropdown();
 </script>
<body>
<html>
Para explicar passo a passo, quando julgado conveniente, cada linha do script 
foi apresentada com suas linhas numeradas e, a seguir, os comentários foram 
referenciados ao número da linha comentada:
Conheça os livros do Maujor: http://livrosdomaujor.com.br
17Introdução
• HTML
1. <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-
target="#modalLogin">
2. Abrir janela modal
3. </button
4. <div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-
labelledby="modalLoginLabel">
5. <div class="modal-dialog" role="document">
6. <div class="modal-content">
7. <div class="modal-header">>
8. <button type="button" class="close" data-dismiss="modal" 
 aria-label="Close"> <span aria-hidden="true">&times;</span></button>
9. <h4 class="modal-title">Área administrativa</h4>
10. </div>
11. <div class="modal-body">
12 <!-- conteúdo da janela modal -->
13. </div>
14. <div class="modal-footer">
15. <button type="button" class="btn btn-default" data-dismiss="modal">
 Fechar</button>
16. </div>
17. </div> <!-- /.modal-content -->
18. </div> <!-- /.modal-dilog -->
19. </div><!-- /.modal -->
[.../c5/modal-data-toggle.html]
Código comentado:
Linha(s) Descrição
Linhas 1 a 3 Botão para abertura da janela modal. O atributo data-target deve apon-
tar para o valor do atributo id do container geral da janela; em nosso 
caso, o div#modalLogin na linha 4. Opcionalmente, em lugar de um botão 
para abrir a janela, poderíamos usar um link, e neste caso o atributo 
href do link apontaria para o id do container geral da janela; em nosso 
caso, href="#modalLogin". A classe btn definida para o link de abertura da 
janela faz com que os mecanismos internos do Bootstrap transformem 
o link em um botão. Esse botão pode ser estilizado com uso de classes 
adicionais, tal como btn-primary e btn-lg. A classe data-toggle, definida para 
aquele link, informa ao Bootstrap que a janela modal terá seu script 
de abertura e fechamento inserido automaticamente sem necessidade 
de codificação JavaScript pelo autor.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.518
Linha(s) Descrição (cont.)
Linha 4 a 19 Marcação do div container da janela modal. A classe modal é de uso 
obrigatório e informa ao Bootstrap que trata-se do container de uma 
janela modal. A classe fade faz com que o efeito de abertura seja por 
deslizamento da janela no sentido vertical, na direção de cima para 
baixo e com efeito de esmaecimento. Opcionalmente, podemos omitir 
o valor fade que produz o efeito de mostrar e esconder a janela sem 
deslizamento e esmaecimento, ou seja, abertura e fechamento fixa na 
sua posição. Sugiro fazer uma cópia do exemplo e retirar a classe fade 
verificando na prática os dois efeitos de abertura/fechamento. O atributo 
id é de livre escolha do autor.
Linhas 5 e 6 Containers auxiliares para estilização e scripts.
Arquivos para download
Os scripts mostrados no livro estão disponíveis para consulta online em 
http://livrosdomaujor.com.br/bootstrap3/codigos.html. Os arquivos foram nomeados 
com sintaxe própria, conforme o exemplo a seguir:
http://livrosdomaujor.com.br/bootstrap3/codigos/c4/botoes-dropdown.html
Este é o URL (endereço na web) do arquivo que mostra um exemplo contido no 
capítulo 4 do livro e referente à funcionalidade dropdown para botões.
Adicionalmente, ao final da marcação, há uma indicação do endereço para o 
arquivo conforme convenção mostrada no exemplo a seguir:
• HTML
<div class=”btn-group”>
 <button type="button" class="btn btn-default>EDITAR</button>
 <button type="button" class="btn btn-default dropdown-toggle" 
 data-toggle="dropdown" aria-expanded="false">
 EDITAR <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#">novo</a></li>
 <li><a href="#">abrir</a></li>
 <li><a href="#">fechar</a></li>
 <li class="divider"></li>
 <li><a href="#">salvar</a></li>
 </ul>
</div>
[.../c4/botoes-dropdown.html]
Conheça os livros do Maujor: http://livrosdomaujor.com.br
19Introdução
Destaques em geral
Palavras ou termos cujo significado deva ser destacado são grafados em itálico.
Por exemplo:
O Bootstrap oferece ainda alguns grupos de classes para estilização avançada de 
tooltip em forma diversa daquela do tooltip básico.
Variáveis
Valores variáveis em códigos são grafados em itálico.
Arquivos dos exemplos do livro
Os links para os arquivos dos exemplos deste livro constam de uma página web 
localizada em http://www.livrosdomaujor.com.br/bootstrap3/codigos.html.
Por tratar-se de um livro oferecido gratuitamente, tanto o autor como a editora se 
desobrigam de prestação de qualquer tipo de suporte técnico aos leitores.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
20
capítulo 1
Apresentação do Bootstrap
Neste capítulo, faremos a apresentação do framework Bootstrap. Veremos a de-
finição, o histórico e as razões para o uso do Bootstrap. Listaremos as seções e 
seus conteúdos onde constam os assuntos a serem tratados no livro. Mostraremos 
como criar o template mínimo para desenvolver uma aplicação, apresentaremos 
o Bootlint e abordaremos o suporte e a acessibilidade do framework.
Ao longo dos textos e das explicações contidas no livro, para não repetir exaus-
tivamente o termo “framework Bootstrap”, o abreviaremos para simplesmente 
Bootstrap. Assim, neste livro, salvo indicação contrária, Bootstrap é o mesmo que 
framework Bootstrap.
1.1 Introdução
Bootstrap é o mais popular framework JavaScript, HTML e CSS para desenvol-
vimento de sites e aplicações web responsivas e alinhadas com a filosofia mobile 
first. Torna o desenvolvimento front-end muito mais rápido e fácil. Indicado para 
desenvolvedores de todos os níveis de conhecimento, dispositivos de todos os 
tipos e projetos de todos os tamanhos.
1.1.1 Definição
O site do Bootstrap o define como um poderoso, elegante e intuitivo framework 
front-end que possibilita um desenvolvimento web de modo ágil e fácil.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
21Capítulo 1 ■ Apresentação do Bootstrap
1.1.2 Histórico
No dia 19 de agosto de 2011, Mark Otto (@mdo), um desenvolvedor trabalhando 
no Twitter, criador do Bootstrap juntamente com Jacob Thornton (@fat), anunciou 
ao mundo o lançamento do Bootstrap em um artigo publicado no blog do Twitter.
Iniciou o artigo dizendo estar feliz com o lançamento de um kit de ferramentas 
front-end destinado a agilizar o desenvolvimento de aplicações web.
Naquele artigo, relatou que no início do Twitter cada desenvolvedor usava a 
biblioteca que lhe era familiar para solucionar os problemas de front-end. Esse 
procedimento criou inconsistências, dificultando a integração, a escalabilidade e 
a manutenção das aplicações criadas por diferentes desenvolvedores da equipe.
Bootstrap foi a proposta de solução para aquelas inconsistências. Apresentada na 
primeira Twitter Hackweek realizada na semana de 22 a 29 de outubro de 2011, 
de lá saiu com sua primeira versão estável e pronta para uso.
1.1.3 Por que usar Bootstrap
No artigo de lançamento do Bootstrap, Mark Otto, ao explicar as razões para 
usar Bootstrap, começa afirmando que o coração do Bootstrap nada mais é do 
que CSS criado com LESS, um pré-processador destinado a gerar folhas de estilos 
CSS capaz de oferecer muito mais flexibilidade e poder do que as folhas de estilos 
convencionais, ou não processadas. Posteriormente foram criadas funcionalidades 
que permitem usar não somente LESS, mas também SASS como pré-processador 
CSS para o Bootstrap.
LESS e SASS são capazes de oferecer uma vasta gama de funcionalidades, tais 
como declarações CSS aninhadas, variáveis para valores de propriedades CSS, 
mixins (espécie de classe capaz de ser reusada), operadores e funções para de-
claração de cores.
Uma vez compilado via LESS ou SASS, o resultado é uma folha de estilos pura, 
cuja implementação na aplicação é muito simples; basta lincar o arquivo CSS ao 
documento. Outro benefício é que não há imagens, Flash ou JavaScript adicionais, 
somente folha de estilos.
Não é do escopo deste livro detalhar o uso dos pré-processadores LESS e SASS 
para criar folhas de estilos para o Bootstrap.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.522
1.1.4 Seções da documentação do Bootstrap
Para fins de estudo, adotaremos neste livro as mesmas cinco seções constantes do 
site do Bootstrap, conforme listadas a seguir.
• Introdução – Seção de apresentação dos fundamentos ou da fundação inicial 
para a criação com uso do Bootstrap. Nessa seção são listadas as ferramentas 
de desenvolvimento, os arquivos do download do Bootstrap e a criação do 
ambiente de desenvolvimento. São mostrados os templates HTML5 para 
criação de aplicações em layouts fixos, fluidos e responsivos.
• CSS – Nessa seção são mostradas as regras CSS comuns, tais como definições 
de valores CSS para tipografia em geral,CSS reset etc. São ainda detalhadas 
as declarações CSS para vários elementos da marcação HTML, tais como 
tabelas, formulários, botões, imagens, uso de ícones e muito mais.
• Componentes – Nessa seção se estuda a criação de componentes de interface. 
Os componentes de interface previstos no Bootstrap são listados a seguir.
• Glifos
• Dropdown
• Agrupamento de botões
• Dropdown com botões
• Grupamento de inputs
• Navegação
• Barra de navegação
• Breadcrumbs (caminho da navegação)
• Paginação
• Rótulos e marcadores
• Badges (marca de destaque)
• Jumbotron (tela de destaque)
• Page header (elemento h1)
• Thumbnails
• Alertas
• Barra de progresso
Conheça os livros do Maujor: http://livrosdomaujor.com.br
23Capítulo 1 ■ Apresentação do Bootstrap
• Objetos de mídia
• Grupamento de listas
• Painéis
• Embed responsivo
• Wells (container estilizado com bordas arredondadas, cor de fundo e 
efeito inset)
• Plugins – Nessa seção se estuda a integração dos plugins JavaScript com o 
Bootstrap. Os componentes gerados pelos plugins e as considerações sobre 
o uso da linguagem previstos no Bootstrap são listados a seguir.
• Visão geral
• Transições
• Janelas modais
• Dropdown
• Scrollspy
• Abas
• Tooltip
• Popover
• Alertas
• Botões
• Collapse
• Carousel
• Affix
• Personalização – Trata-se de uma ferramenta online para fazer download 
personalizado de acordo com as necessidades específicas de um projeto. 
Essa ferramenta encontra-se em http://getbootstrap.com/customize/ e seu uso 
é bem fácil e intuitivo.
Cada uma das seções listadas anteriormente será objeto de estudo e detalhamento 
neste livro.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.524
1.2 Ferramentas de desenvolvimento
Para desenvolver um layout e criar os componentes gráficos de uma aplicação web, 
você precisa de um editor de texto, um navegador web e obviamente a estrutura 
de arquivos do Bootstrap. Se você optou por estudar o assunto proposto neste 
livro, supõe-se que tem um conhecimento razoável de marcação HTML e folhas 
de estilos CSS, assuntos estes que não fazem parte do escopo do livro.
Não vou indicar um editor de texto e navegador web, pois como você conhece 
HTML e CSS, já usa um deles. Assim, use o editor de texto e o navegador de sua 
preferência.
1.3 Download
Na homepage do site do Bootstrap, em http://getbootstrap.com, você encontra um 
link para download do Bootstrap.
São disponibilizadas três versões para download denominadas Bootstrap, Source 
e SASS. A versão Bootstrap é a mínima requerida para criação com uso de todas 
as funcionalidades do Bootstrap, e é ela que usaremos neste livro. A versão Source 
inclui toda a documentação do Bootstrap, e a versão SASS é para uso com o pré-
-processador.
Faça o download da versão Bootstrap, descomprima o arquivo compactado em 
uma pasta de sua livre escolha, e você terá a estrutura de pastas e arquivos, como 
mostrado na figura 1.1.
Na figura 1.1, repare que existem arquivos que têm uma forma compactada (mi-
nificada – .min) e uma forma não compactada. A forma não compactada é para 
uso opcional em fase de produção, pois são arquivos comentados e estruturados 
visualmente para fácil leitura por humanos.
Depois de lançado o projeto, esses arquivos deverão ser substituídos pelos seus 
equivalentes compactados, que são mais leves e de carregamento mais rápido, mas 
não se esqueça de compactar o arquivo caso você tenha feito alguma modificação 
no original, o que é pouco provável.
A pasta-raiz obtida com a descompactação do arquivo zipado do download 
denomina-se bootstrap-versão-dist, em que versão é a versão atual do Bootstrap 
(por exemplo, bootstrap-3.3.5-dist para o download da versão 3.3.5). Na pasta-raiz 
encontram-se três subpastas – css, fonts, js –, e dentro delas, os arquivos, conforme 
mostrados na figura 1.1.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
25Capítulo 1 ■ Apresentação do Bootstrap
Figura 1.1 – Arquivos do download do Bootstrap.
Observe na figura que alguns arquivos foram destacados com a marca de uma 
bolinha. Tais arquivos podem ser apagados da pasta caso você não os use em 
fase de produção. Se usá-los, apague depois de lançado o projeto, pois, como dito 
anteriormente, devem ser substituídos pelos seus correspondentes minificados.
A seguir alguns comentários sobre a finalidade dos arquivos.
• bootstrap.css é o arquivo principal de estilização do Bootstrap em versão 
não comprimida. Usa-se a mesma versão comprimida (ou minificada) 
bootstrap.min.css. Se você pretende desenvolver uma folha de estilos persona-
lizada, dê a ela um nome tal como custom.css, e quando terminar, comprima 
o arquivo. Atrele sua folha de estilo personalizada ao documento criando 
um link para ela depois do link que aponta para bootstrap.min.css.
• bootstrap-theme.css é um arquivo de estilização do Bootstrap que adiciona 
efeitos especiais de sombras, gradientes, 3D etc. em componentes tais como 
botões, painéis, caixas de destaque etc. Usa-se a mesma versão comprimida 
(ou minificada) bootstrap-theme.min.css. Se você pretende adicionar tais efeitos 
especiais em sua interface, use este arquivo. O arquivo bootstrap-theme.min.css é 
um arquivo de uso facultativo. Nos exemplos constantes deste livro, usaremos 
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.526
esta folha de estilos. Para verificar seus efeitos na prática, comente na marcação 
da seção head do exemplo, o link que aponta para essa folha de estilos.
Alerta: Caso sua opção seja por usar os efeitos especiais de estilização, o link para 
o arquivo bootstrap-theme.min.css deverá vir na marcação HTML depois do link 
para o arquivo bootstrap.min.css.
• bootstrap.css.map e bootstrap-theme.css.map são arquivos destinados a mapear 
arquivos CSS minificados e fazê-los legíveis para humanos em ferramentas 
de debug, tipo as ferramentas do desenvolvedor nativas dos navegadores. 
Usam-se somente em fase de desenvolvimento de funcionalidades e temas 
CSS e não têm efeito sobre o produto final (o site ou a aplicação) criado.
• bootstrap.js é o arquivo, em versão não comprimida, que contém os scripts 
que fazem funcionar os plugins nativos do Bootstrap. Usa-se a mesma 
versão comprimida (ou minificada) bootstrap.min.js. Se você pretende desen-
volver scripts personalizados, dê ao arquivo um nome tal como custom.js e, 
quando terminar, comprima o arquivo. Atrele seus scripts personalizados 
ao documento criando um link para o arquivo depois do link que aponta 
para bootstrap.js.
• npm.js é o arquivo para instalação do Bootstrap com NPM (fora do escopo 
deste livro).
O arquivo denominado jquery.min.js em destaque na figura não faz parte do download. 
Caso seu projeto preveja uso de componentes que usam JavaScript (plugins na-
tivos do Bootstrap), será necessário carregar a biblioteca jQuery na versão 1.11.2 
ou posterior. Consulte o site da jQuery para decidir qual é a versão mais atual (e 
posterior à jQuery 1.11.2) indicada para os navegadores aos quais você quer servir 
seu projeto.
Assim, deve-se, obrigatoriamente, fazer o download da biblioteca no site 
http://jquery.com e ter o arquivo gravado na pasta js do download. Ele servirá 
como fallback para o caso de falha no link para um CDN, como veremos no item 
[1.4] adiante.
Essa é a configuração básica do Bootstrap necessária à criação de layouts fixos, 
fluidos e responsivos. Com apenas o arquivo CSS bootstrap.min.css lincado ao 
documento você poderá começar a explorar essa poderosa ferramenta, e com o 
progresso no estudo e a consequente necessidade de uso de componentes que 
dependem de JavaScript, irá precisar lincar também o arquivo bootstrap.min.js.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
27Capítulo 1 ■ Apresentaçãodo Bootstrap
1.4 Templates HTML
O Bootstrap foi desenvolvido e otimizado para ser usado com marcação HTML5. 
Assim o template mínimo para criar uma aplicação que use o Bootstrap é mos-
trado a seguir.
<!DOCTYPE html>
<html lang="pt-br">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Estas 3 meta tags devem obrigatoriamente ser as primeiras na seção head -->
 <!-- As demais devem vir depois delas -->
 <title>Template mínimo para uso do Bootstrap</title>
 <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- CSS do Bootstrap -->
 <!-- HTML5 shim and Respond.js para suporte dos elementos HTML5 e das media queries ao IE8 -->
	 <!--	Atenção:	Respond.js	não	funciona	em	páginas	carregadas	com	uso	do	protocolo	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>
 <h1>Título da aplicação</h1>
</body>
</html>
Com este template é possível desenvolver uma aplicação web que use as funciona-
lidades do Bootstrap que dependem apenas de estilização, por exemplo: tipografia, 
botões, painéis, seção em destaque etc. Não é possível usar as funcionalidades 
que dependem dos plugins JavaScript nativos do Bootstrap, por exemplo: barras 
de navegação, janelas modais, slideshow etc.
Alerta: Nos exemplos constantes deste livro não será considerado o suporte para 
o IE8.
Caso você queira usar, no seu projeto, os 12 plugins nativos do Bootstrap, lis-
tados na seção JavaScript do item [1.1.4], deverá incluir no template, mostrado 
anteriormente, a biblioteca jQuery e o aquivo bootstrap.min.js, como mostrado 
em destaque a seguir.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.528
...
<body>
 <h1>Título da aplicação</h1>
 <!-- jQuery (caso se use plugins JavaScript do Bootstrap) -->
 <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript">
 </script>
 <script type="text/javascript"> // fallback para jQuery
 //<![CDATA[
 (window.jQuery)||document.write('<script type="text/javascript" 
 src="../bootstrap/js/jquery.min.js"><\/script>');//]]>
 </script>
 <!-- Bootstrap -->
 <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Conforme mostrado no código, é de boa prática usar um CDN para lincar para 
a biblioteca jQuery. Em nosso caso, escolhemos o CDN da jQuery. Caso o link 
para o CDN apresente qualquer problema, existe um link alternativo (fallback) 
para um arquivo da biblioteca jQuery hospedado no servidor da aplicação e 
colocado na pasta js do download, conforme mostrado e comentado na figura 1.1.
Alternativamente, você pode usar o CDN Google, apontando para:
http://ajax.googleapis.com/ajax/libs/jquery/ultima-versao/jquery.min.js
ou o CDN da Microsoft, apontando para:
http://ajax.aspnetcdn.com/ajax/jquery/jquery-ultima-versao.js
Alerta: Ao optar por um CDN, confira se a versão que você quer usar já está 
hospedada no CDN. Cole o endereço do arquivo na caixa de endereços do 
navegador e certifique-se de que o link não está “quebrado” e aponta para o 
arquivo pretendido.
Opcionalmente, você poderá usar o CDN do Bootstrap (http://www.bootstrapcdn.com/) 
para lincar, também, os arquivos do Bootstrap como mostrado a seguir:
<!-- Versão compilada e minificada das CSS -->
<link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Tema opcional -->
Conheça os livros do Maujor: http://livrosdomaujor.com.br
29Capítulo 1 ■ Apresentação do Bootstrap
<link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Versão compilada e minificada da JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
Convém notar que o arquivo bootstrap.min.js contém todos os plugins do Bootstrap. 
É muito provável que o seu projeto use somente alguns deles. Para estas situações 
existe a possibilidade de personalizar o download, obtendo somente os plugins 
necessários ao projeto.
Convém notar que nestas situações devemos usar a versão do download perso-
nalizado e não um CDN que fornece todos os plugins.
Para personalizar o download dos plugins e também das CSS e dos componentes 
do Bootstrap, visite a página http://getbootstrap.com/customize/ no site do Bootstrap.
1.5 Bootlint
Bootlint é uma ferramenta de desenvolvimento, oficial do Bootstrap, destinada a 
examinar a marcação HTML criada para uma aplicação ou um site desenvolvido 
com uso de Bootstrap e informar aos desenvolvedores possíveis “bugs” ou não 
conformidades encontradas na marcação.
A ferramenta é fornecida em forma de bookmarklet (para ser instalada em um 
navegador); seu código e as instruções de instalação podem ser encontrados no 
GitHub em http://kwz.me/I4.
Das diversas formas de instalação, a mais simples e imediata é arrastar o código 
JavaScript do bookmarklet, que se encontra no GitHub sob o título “Getting 
Started”, subtítulo “In the browser”, para a barra de favoritos do navegador.
Depois de instalá-la como favorito no navegador, abra a página web que contém 
a marcação HTML para o Bootstrap e abra também o console do navegador. 
Limpe o console e clique no bookmarklet criado nos favoritos. Como resultado 
será aberta uma janela tipo alerta da JavaScript informando sobre a existência 
ou não de “bugs” na página.
Feche a janela e, caso existam “bugs”, eles serão descritos sumariamente no console 
do navegador e um código será fornecido. No GitHub, em http://kwz.me/I0, você 
encontra a descrição de cada código.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.530
É altamente recomendável instalar e usar esta ferramenta no seu ambiente de de-
senvolvimento verificando constantemente as marcações criadas e não deixando 
para verificar tudo no final do projeto.
1.6 Modelo CSS e o box-sizing
O Bootstrap declara, em sua folha de estilos, o moderno Modelo CSS modificado 
usando a propriedade CSS box-sizing de modo a excluir padding e margin das dimen-
sões dos boxes, conforme a regra de estilos mostrada a seguir.
* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
*:before,
*:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
Esta declaração pode conflitar com softwares de terceiros, tais como Google Maps 
e Google Search Engine, inseridos em uma página que use o Bootstrap, pelo fato 
de tais softwares usarem em suas CSS o Modelo CSS tradicional.
Assim, esteja ciente de que se o layout em sua página “quebrar” por causa da 
inserção de um widget ou outro software qualquer pertencente a terceiros, será 
necessário que você localize e isole a parte da marcação HTML onde o problema 
ocorre e crie uma folha de estilo específica para reverter o modelo CSS naquele 
trecho da marcação, ou, em lugar de uma folha de estilos específica, adicione regras 
CSS, conforme sugeridas a seguir, na folha de estilos do Bootstrap.
Como regra geral, existem duas soluções para estes casos. A primeira, reverter o 
modelo CSS para um elemento da marcação; e a segunda, para uma determinada 
região da marcação, conforme sugerido a seguir.
/* Opção 1: para um elemento da marcação */
.element {
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
Conheça os livros do Maujor: http://livrosdomaujor.com.br
31Capítulo 1 ■ Apresentação do Bootstrap
 box-sizing: content-box;
}
/* Opção 2: para uma região da marcação cujo elemento ancestral devereceber a classe 
reset-box-sizing */
.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;
}
1.7 Acessibilidade
O Bootstrap contém funcionalidades que facilitam o cumprimento das diretrizes 
de acessibilidade previstas pelo W3C.
Para criar um link que permita às tecnologias assistivas pular o menu de navegação 
e ir para o conteúdo, são previstas as classes sr-only e sr-only-focusable, que devem 
ser aplicadas a uma marcação-padrão, conforme mostrado a seguir.
<a href="#conteudo" class="sr-only sr-only-focusable">Pular para o conteúdo</a>
 <!-- menu de navegação -->
<div id="conteudo" tabindex="-1">
 <!-- Conteúdo principal da página -->
</div>
A marcação mostrada, quando for o caso de se usar, deve ser colocada no início 
da página. As classes sr-only e sr-only-focusable são nativas do Bootstrap.
A classe sr-only faz com que o texto do link não seja visível na tela, mas “visto” 
por tecnologias assistivas, tais como leitores de tela.
Para usuários sem restrições visuais que navegam com auxílio do teclado, a classe 
sr-only-focusable faz com que o texto do link se torne visível quando o link recebe o foco.
O par atributo/valor tabindex="-1" corrige bugs de foco em alguns navegadores.
O exemplo prático mostrado a seguir cria um link tipo "Pular navegação" e 
encontra-se disponível para consulta online. Não se preocupe com a marcação 
HTML que não esteja em destaque. Ela é própria do Bootstrap e será estudada 
no próximo capítulo.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.532
<a href="#conteudo" class="sr-only sr-only-focusable">Pular para o conteúdo</a>
...
<div class="row">
 <div class="col-md-6">
 <h3>Menu de navegação</h3>
 <p>Extensa lista de links</p>
 <ul>
 <li><a href="#">link</a></li>
 <!-- mais links -->
 </ul>
</div> <!-- /..col-md-6 -->
</div> <!-- /.row -->
<div class="row">
<div class="col-md-6">
 <h1 id="conteudo" tabindex="-1">Conteúdo principal da página</h1>
 <p>bla...bla...bla...bla</p>
 <!-- mais conteúdo -->
</div> <!-- /.col-md-6-->
</div> <!-- /.row -->
[.../c1/pular-navegacao.html]
Abra este arquivo em um navegador e pressione a tecla Tab. Essa ação irá revelar 
no topo da página o texto do link. A seguir, tecle Enter para navegar diretamente 
para o conteúdo da página.
1.8 Suporte
O Bootstrap foi criado para funcionar em navegadores modernos tanto em desktop 
como em dispositivos móveis. Navegadores antigos falharão na estilização, mas a 
parte funcional da página será preservada.
Quanto ao Internet Explorer, o suporte é consistente nas versões IE9 e superio-
res. Se você pretende servir sua aplicação para o IE8, deve incluir os scripts shim 
e Respond.js que se destinam a possibilitar que aquele navegador reconheça os 
elementos da HTML5 e as regras media queries respectivamente, pois ele não 
oferece suporte nativo para tais funcionalidades. Não é do escopo deste livro 
detalhar as implicações e os detalhes de funcionamento e inclusão destes scripts.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
33Capítulo 1 ■ Apresentação do Bootstrap
Os exemplos constantes deste livro não consideram o suporte para o IE8.
Observe as tabelas 1.1 e 1.2 detalhando o suporte ao Bootstrap por dispositivos 
e navegadores.
Tabela 1.1 – Suporte ao Bootstrap por navegadores
Chrome Firefox Internet Explorer Opera Safari
Android SIM SIM NÃO N/A
iOS SIM N/A N/A NÃO SIM
Mac OS X SIM SIM SIM SIM
Windows SIM SIM SIM SIM NÃO
Tabela 1.2 – Suporte ao Bootstrap pelos IE8 e IE9
Funcionalidade Internet Explorer 8 Internet Explorer 9
border-radius NÃO SIM
box-shadow NÃO SIM
transform NÃO SIM, com prefixo -ms 
transition NÃO
placeholder NÃO
Para suporte às funcionalidades HTML5 e CSS3 em geral, consulte o site caniuse 
(http://kwz.me/I5).
Isso é tudo que você precisa para começar o estudo do Bootstrap. Nos próximos 
capítulos, detalharemos as funcionalidades do Bootstrap desenvolvendo exemplos 
práticos que mostram desde a criação de simples componentes de interfaces até 
o desenvolvimento de layouts complexos.
Para os exemplos constantes deste livro, criamos uma pasta-raiz denominada 
codigos e, dentro dela, uma subpasta denominada bootstrap contendo o diretório e 
os arquivos obtidos do Bootstrap, ou seja, renomeamos a pasta bootstrap-versão-dist 
mostrada na figura 1.1 para simplesmente bootstrap e mais subpastas para os 
capítulos (c1, c2, c3, c4 etc.) contendo os arquivos dos exemplos, tudo conforme 
mostrado na figura 1.2.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.534
Figura 1.2 – Estrutura de pastas para arquivos dos exemplos do livro.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
35
capítulo 2
Fundamentos
Neste capítulo estudaremos os fundamentos do Bootstrap. Será mostrada a nor-
malização via reset de valores de propriedades CSS. Mostraremos a criação de um 
grid fixo para desenvolvimento de layouts e, no final do capítulo, estaremos cientes 
dos conceitos básicos de frameworks CSS em geral e em condições de começar o 
estudo da estrutura do grid e das funcionalidades do Bootstrap.
2.1 Marcação HTML
O Bootstrap foi criado para ser usado com a linguagem de marcação HTML5. 
As suas funcionalidades foram desenvolvidas considerando certos elementos 
exclusivos daquela linguagem, bem como de propriedades CSS avançadas que 
requerem o uso da HTML5.
Assim, a marcação HTML de uma aplicação deverá obrigatoriamente conter o 
DOCTYPE da HTML5 como mostrado a seguir.
<!DOCTYPE html>
<html lang="pt-br">
 ...
</html>
2.2 CSS reset
O termo reset no contexto de programação pode ser traduzido, usando linguagem 
não técnica, como a ação de “zerar” valores previamente definidos.
CSS reset é uma técnica inventada por Eric Meyer (http://meyerweb.com/eric/tools/css/
reset/) no ano de 2007, amplamente usada desde então, que consiste em se definir 
uma folha de estilos cuja finalidade é “zerar” valores CSS padrão dos navegadores.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.536
Todo navegador tem uma folha de estilos nativa que define as propriedades CSS 
iniciais dos elementos da marcação. Você poderá visualizar essa folha de estilos 
em ação ao criar um documento onde faça constar, por exemplo, cabeçalhos (h1, 
h2, h3 etc.), parágrafos (p), listas (ol, ul, dl) etc. Ao visualizar o documento em um 
navegador, note que os conteúdos dos elementos da marcação têm uma estilização 
inicial, sem que você tenha declarado qualquer folha de estilos. A cor de fundo 
do elemento body é branca, os textos são em preto, cabeçalhos são em negrito com 
tamanhos de fonte diferentes, a fonte é da família serif, existem margens entre 
cabeçalhos e parágrafos, listas são endentadas, e por aí vai.
Se você decidiu criar o documento sugerido, experimente visualizá-lo em diferentes 
navegadores e compare as renderizações. Vai notar, nos diferentes navegadores, 
que muitos dos estilos aplicados são os mesmos, tais como cor de fundo bran-
ca do elemento body, preta dos textos, negrito em cabeçalhos, família serif para 
fontes etc. Notará também que a renderização não é exatamente a mesma, por 
exemplo, quando se trata do posicionamento e do tamanho dos textos na página. 
Isso acontece porque cada navegador adota sua folha de estilos própria e alguns 
valores CSS nessas folhas, tais como valores para as propriedades margin, line-height, 
font-size etc., diferem de um navegador para outro. Isso em determinados casos 
pode ser desastroso para o layout e pode exigir do desenvolvedor trabalho extra 
para tratar das inconsistências entre navegadores resultantes das diferenças entre 
folhas de estilos nativas.A finalidade das CSS reset, que nada mais são do que um conjunto de declarações 
de estilos (uma folha de estilos), é padronizar, para os navegadores, a renderização 
inicial dos elementos da marcação, zerando os valores de algumas propriedades 
CSS, tais como margin e padding, e estabelecendo um valor-padrão para outras, tais 
como line-height, vertical-align, font-size, sobrescrevendo a folha de estilos nativa 
do navegador e resolvendo o problema da inconsistência de estilização inicial 
entre navegadores.
No início de 2012, Nicolas Gallagher, um desenvolvedor trabalhando 
no Twitter, e Jonathan Neal criaram o projeto denominado normalize.css 
(http://necolas.github.com/normalize.css/), cuja proposta era disponibilizar para a 
comunidade de desenvolvedores front-end uma folha de estilos reset destinada a 
padronizar a renderização nativa dos navegadores. Na página do projeto, os au-
tores discorrem sobre as diferenças e vantagens de usar normalize.css em relação 
as CSS reset de Eric Meyer.
O Bootstrap, o projeto HTML5 Boilerplate, a NASA, entre outras grandes 
companhias, atualmente usam o normalize.css. Mesmo que você já conheça as 
Conheça os livros do Maujor: http://livrosdomaujor.com.br
37Capítulo 2 ■ Fundamentos
técnicas de CSS reset, aconselho a abrir a página contendo a folha de estilos 
de normalize.css clicando o link para download do arquivo no endereço web 
http://necolas.github.com/normalize.css/. Inspecione atentamente as declarações CSS, 
especule consigo mesmo sobre a finalidade de cada uma delas e acrescente mais 
esse conhecimento ao seu acervo profissional.
A folha de estilos normalize.css foi incorporada dentro da folha de estilo do 
Bootstrap. Assim, você não precisa criar link para o arquivo normalize.css, pois ele 
já consta da folha de estilo nativa do Bootstrap.
2.3 Sistema de grid para layout
Criar layout CSS baseado em um grid inicial é uma técnica que surgiu em 2007 e 
proporcionou o aparecimento de grids prontos, publicados por seus autores, para 
uso pelos desenvolvedores web. Tais grids constituem os chamados frameworks 
CSS para criação de layouts ou simplesmente grids CSS, e o Bootstrap se baseia 
em grid.
Um dos s i stemas de g r id CSS pionei ro denomina-se Bluepr int 
(http://www.blueprintcss.org/) e é usado até hoje. Logo foram lançados outros sis-
temas, e atualmente existem dezenas deles, sendo que um dos mais conhecidos 
dos autores CSS é o sistema 960 Grid Sistem (http://960.gs/).
Usar um framework baseado em grid para desenvolver layouts CSS é um assun-
to polêmico e não é do escopo deste livro discutir a conveniência ou enumerar 
aspectos negativos e positivos do seu uso. No entendimento deste autor, dois 
aspectos são indiscutíveis quando se trata de criar um layout baseado em grid 
versus a codificação “a unha”: agilização do processo de criação e possibilidade 
de usar as funcionalidades do grid de forma modular.
A agilização do processo traz como benefício imediato a redução do tempo de 
trabalho para atingir o resultado final, e nós, desenvolvedores, sabemos muito 
bem como os prazos são curtos. Um framework para criação de layout bem pro-
jetado é de natureza modular, ou seja, possibilita ao autor usar estritamente as 
funcionalidades específicas ao seu projeto, sem a necessidade de carregar arquivos 
desnecessários.
Dica: Uma das características do Bootstrap é a sua natureza modular, materializada 
na existência de uma interface gráfica, no site do projeto, destinada a fazer o 
download personalizado do Bootstrap (http://getbootstrap.com/customize/).
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.538
O sucesso de um projeto web começa com um planejamento bem feito no qual a 
escolha das ferramentas e o detalhamento das fases do desenvolvimento são de 
importância fundamental. Assim, usar um framework grid ou codificar “a unha” 
é uma decisão que cabe à equipe de desenvolvimento.
Sem dúvidas, o inventor ou os inventores dos sistemas de grid CSS, tal como é 
conhecido atualmente, tiveram um ideia brilhante e digna de admiração, sem 
contar a enorme contribuição que fizeram ao desenvolvimento web colocando 
nas mãos dos autores uma ferramenta extremamente poderosa, ágil e fácil de 
aprender, destinada à criação de layouts CSS. Atualmente, uma quantidade con-
siderável de sites foi desenvolvida com uso de grid CSS.
O W3C lançou em abril de 2011 um Rascunho de Trabalho denominado Grid 
Layout, renomeado em 22 de março de 2012 como CSS Grid Layout, descrevendo 
funcionalidades para criação de layouts baseados em grids. Essa especificação está 
no seu início de desenvolvimento e demandará algum tempo até que possa ser 
usada em produção. O curioso é que o Internet Explorer 10 é, desde dezembro de 
2012, o único navegador que implementou as funcionalidades previstas naquela 
especificação, devendo-se usar o prefixo proprietário -ms- para declarar as regras 
CSS nela previstas. Posteriormente a especificação alterou a sintaxe, mas o IE 
continua a dar suporte à sintaxe antiga.
A ideia que inspirou o sistema de grid CSS é muito simples. Uma vez conhecido 
o mecanismo de funcionamento, somos imediatamente levados a fazer a clássica 
pergunta a nós mesmos: “Como eu não pensei nisso?”.
Grid significa malha e tecnicamente pode ser descrito como uma estrutura bi-
dimensional formada por eixos (ou linhas retas) verticais e horizontais que se 
interceptam, criando uma estrutura de malha com células definidas pelas quatro 
interseções de eixos verticais com eixos horizontais.
A diagramação dos conteúdos e a consequente criação do layout se faz com uso 
dessa malha com suas células servindo de container para conteúdos a diagramar 
(ou “layautar”). Células podem ser combinadas na horizontal e/ou na vertical de 
modo a criar containers de tamanhos diferentes.
A técnica de uso de grid em tipografia foi introduzida no currículo acadêmico 
da formação de designers na metade dos anos 70 e começou a ser usada para 
diagramar conteúdos destinados à mídia impressa. Somente por volta de 2007 
a técnica foi usada para criação de layouts CSS, e hoje em dia está amplamente 
difundida nesta área.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
39Capítulo 2 ■ Fundamentos
A figura 2.1 mostra dois exemplos de estruturas de grids.
Figura 2.1 – Grids.
2.4 Como é criado um grid CSS
A marcação HTML destinada a ser estilizada de forma a constituir um grid CSS 
é uma marcação modulada e padrão na qual os elementos que constituem a es-
trutura do layout são definidos com uso de um atributo cujo valor é previamente 
definido e serve como seletor CSS para definir as células do grid, tais como definir 
células unitárias ou combinar células horizontais de modo a formar containers 
para o layout.
2.4.1 Container geral
Vamos examinar um exemplo prático bem simples de criação de grid com a fi-
nalidade de entender o funcionamento básico das estruturas para grid. Observe 
a marcação HTML contendo uma folha de estilo incorporada mostrada a seguir.
Dica: Nos exemplos deste livro, quando for o caso, usaremos folha de estilo 
incorporada com a finalidade de facilitar a leitura e o entendimento dos códigos. 
Você com certeza conhece e sabe quando, como e por que usar folhas de estilos 
externas.
• HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.540
<meta charset="utf-8">
<title>Livro Bootstrap Maujor</title>
<style>
 body { margin: 0; font: 100% sans-serif; }
 h1 { font-size: 160%; }
 .container { width: 940px; margin: 0 auto; background: #b5b5b5; }
</style>
</head>
<body>
 <div class="container">
 <h1>Meu primeiro grid - container geral</h1>
 </div> <!-- /.container -->
</body>
</html>
[.../c2/grid-basico-1.html]
A marcação HTML mostrada, estilizada conforme a folhade estilo nela incor-
porada, cria um container geral para um grid CSS fixo com largura de 940px 
centrado na tela.
A renderização do arquivo anterior deve ficar conforme mostrado na figura 2.2.
Figura 2.2 – Container para um grid básico.
2.4.2 Linha de células
Vamos criar uma linha de células para nosso grid. Para isso precisamos definir 
quantas células colocaremos em uma linha e qual será o espaçamento entre elas. 
Escolhemos colocar em cada linha doze células separadas por 20px. Fazendo uns 
cálculos simples, chegamos à conclusão de que cada célula deverá ter 60px de 
largura, totalizando 60 x 12 = 720px, com um total de espaços de 11 x 20 = 220px. 
Somando 720 + 220, obtemos os 940px do container do layout, “fechando” as contas.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
41Capítulo 2 ■ Fundamentos
Vamos transformar essas premissas em marcação HTML e CSS. A linha de células 
será constituída pelo elemento div.row e cada uma das células por um elemento 
div.span1. Observe a seguir o acréscimo de marcação no HTML mostrado ante-
riormente.
• HTML
1. <div class="container">
2. <h1>Meu primeiro grid - linha de células</h1>
3. <div class="row">
4. <div class="span1">1</div>
5. <div class="span1">2</div>
6. <div class="span1">3</div>
7. ...
8. <div class="span1">11</div>
9. <div class="span1">12</div>
10. </div> <!-- /.row -->
11. </div> <!-- /.container -->
[.../c2/grid-basico-2.html]
Código comentado:
Linha(s) Descrição
Linhas 3 a 10 Elemento container div com a classe cujo valor é row e que será o con-
tainer das células. A tradução da palavra inglesa “row” é linha. Esse 
container é uma linha de células do grid.
Linhas 4 a 9 Doze elementos div com a classe cujo valor é span1 são as doze células 
do grid.
Para dispor uma linha contendo doze células, acrescentaremos na folha de estilos 
mostrada anteriormente as declarações em destaque no código a seguir.
• CSS
1. <style tyep="text/css">
2. body { margin: 0; font: 100% sans-serif; }
3. h1 { font-size: 160%; }
4. .container {
5. width: 940px;
6. margin: 0 auto;
7. background: #b5b5b5;
8. }
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.542
9. .row { margin-left: -20px; }
10. .span1 {
11. width: 60px;
12.		 float:	left;
13. margin-left: 20px;
14. background: #d5d5d5
15. }
16. .row:after { /* técnica moderna para clear floats */
17. content: “";
18. display: table;
19. line-height: 0;
20. clear:both;
21. }
22. </style>
Código comentado:
Linha(s) Descrição
Linha 9 Ver explicação na linha 13.
Linhas 11 Define a largura de cada célula.
Linhas 12 Flutua as células à esquerda, tirando-as da sua posição vertical padrão 
e colocando-as em linha ao lado da outra.
Linha 13 Define um espaçamento de 20px à esquerda para cada célula. Note que 
essa declaração fará com que a primeira célula da linha seja deslocada 
para a direita. Para recolocá-la em sua posição, declaramos uma margem 
negativa de 20px para o container da linha, como mostrado na linha 
9.
Linha 14 A cor de fundo #d5d5d5 visa apenas a facilitar a visualização do grid 
criando contraste com a cor do container geral #b5b5b5 (ver linha 7).
Linhas 16 a 21 Uma vez que as células div.span1 foram flutuadas dentro do seu con-
tainer div.row, esse não se estende na vertical, assumindo altura zero. 
É o clássico comportamento de containers com floats. Para estender o 
container, precisamos declarar regras CSS para fazer o conhecido clear 
floats. Nesse exemplo, adotamos a moderna técnica clear floats sem uso 
de marcação.
A marcação HTML mostrada, estilizada conforme os acréscimos das regras CSS 
apresentadas, cria uma linha de doze células conforme a proposta de layout.
A renderização do arquivo anterior deve ficar conforme mostrado na figura 2.3.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
43Capítulo 2 ■ Fundamentos
Figura 2.3 – Grid básico, linha de células.
2.4.3 Unindo células
A próxima funcionalidade que o sistema de grid proporciona, e que estudaremos 
a seguir, é a possibilidade de unir duas ou mais células adjacentes para formar 
colunas. Por exemplo: unindo-se sucessivamente quatro células adjacentes, po-
demos criar uma linha composta de três colunas.
Alerta: A partir daqui, vamos renomear o que até aqui chamamos de célula. 
Em grids CSS, as chamadas células, bem como o resultado da união de células 
adjacentes, denominam-se colunas. Assim, no exemplo mostrado na figura 2.3, 
temos 12 colunas.
Vamos exemplificar a união de células do grid tomando como objetivo a criação 
de uma estrutura de layout de duas colunas.
Uma coluna esquerda para o conteúdo principal e uma coluna direita para o con-
teúdo auxiliar, tais como navegação, parceiros etc. É nossa intenção que a coluna 
principal ocupe 2/3 da largura total da aplicação (em nosso exemplo, 940px), e 
a coluna de navegação, 1/3 daquela largura.
Observe os acréscimos e as modificações na marcação HTML.
• HTML
1. <div class="container">
2. <h1>Meu primeiro grid - criando colunas</h1>
3. <div class="row">
4. <div class="span8"><h2>Coluna principal</h2></div>
5. <div class="span4"><h2>Coluna auxiliar</h2></div>
[.../c2/grid-basico-3.html]
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.544
Código comentado:
Linha(s) Descrição
Linhas 3 e 10 Essas linhas definem o início e o final do container das células de uma 
linha do grid. Note que os elementos-filhos desse container são dois 
elementos div em lugar dos doze elementos div.span1 que tínhamos no 
exemplo anterior.
Linhas 4 e 5 Os dois elementos div, na linha, criam as colunas principal e auxiliar. 
Note que o valor do atributo class desses div termina com um número 
(span8 e span4). Esses dois números somados resultam em 12. Como você 
já deve ter concluído, o número no valor do atributo define o número 
de células a serem combinadas para formar a coluna.
O termo span em inglês, no presente contexto, pode ser traduzido para unir, abarcar 
ou abranger. Assim div.span8 deve ser lido como: um elemento div que une oito 
células do grid para criar o container de uma coluna do layout.
Para criar as duas colunas do layout, modificaremos e acrescentaremos na folha 
de estilos mostrada anteriormente as declarações em destaque no código a seguir.
• CSS
1. <style type="text/css">
2. body { margin: 0; font: 100% sans-serif; }
3. h1 { font-size: 160%; }
4. .container {
5. width: 940px;
6. margin: 0 auto;
7. background: #b5b5b5;
8. }
9. .row { margin-left: -20px; }
10. .span1 {
11. width: 60px;
12.		 float:	left;
13. margin-left: 20px;
14. background: #d5d5d5
15. }
16. .row:after {
17. content: "";
18. display: table;
19. line-height: 0;
20. clear:both;
21. }
Conheça os livros do Maujor: http://livrosdomaujor.com.br
45Capítulo 2 ■ Fundamentos
22. [class*="span"] {
23.		 float:	left;
24. margin-left: 20px;
25. background: #d5d5d5
26. }
27. .span4 { width: 300px; }
28. .span8 { width: 620px; }
29. </style>
Código comentado:
Linha(s) Descrição
Linhas 10 a 15 A declaração da largura para cada seletor span* deverá ser feita em 
regra CSS separada, assim a regra CSS contida nessa linha que declara 
valores para o seletor span1 será substituída por outras regras mostradas 
a seguir.
Linhas 22 a 26 Os valores CSS comuns a todos os seletores do tipo span* são aqui de-
clarados. O seletor [class*="span"] aplica-se a todos os elementos cujo 
valor do atributo class seja uma palavra que começa com span (vale 
para span1, span2, span3, span4 etc.).
Linha 27 Aqui se define a largura da coluna formada pela união de quatro célu-
las. A largura é obtida somando-se as larguras das células (60px) com 
a largura dosespaçamentos entre elas (20px), ou seja, 4 x 60px + 3 x 
20px = 300px.
Linha 28 Aqui se define a largura da coluna formada pela união de oito células. 
A largura é obtida somando-se as larguras das células (60px) com a 
largura dos espaçamentos entre elas (20px), ou seja, 8 x 60px + 7 x 
20px = 620px.
A marcação HTML mostrada, estilizada conforme os acréscimos e as modificações 
nas regras CSS mostradas, cria as duas colunas conforme proposto anteriormente.
A renderização do arquivo anterior deve ficar conforme mostrado na figura 2.4.
Figura 2.4 – Grid básico, criando colunas.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.546
Para contemplar todas as possibilidades de combinação de união de células, a 
folha de estilos do grid deverá conter as seguintes declarações CSS:
• CSS
.span1 { width: 60px; }
.span2 { width: 140px; } /* 2x60 + 1x20 */
.span3 { width: 220px; } /* 3x60 + 2x20 */
.span4 { width: 300px; } /* 4x60 + 3x20 */
.span5 { width: 380px; } /* 5x60 + 4x20 */
.span6 { width: 460px; } /* 6x60 + 5x20 */
.span7 { width: 540px; } /* 7x60 + 6x20 */
.span8 { width: 620px; } /* 8x60 + 7x20 */
.span9 { width: 700px; } /* 9x60 + 8x20 */
.span10 { width: 780px; } /* 10x60 + 9x20 */
.span11 { width: 860px; } /* 11x60 + 10x20 */
.span12 { width: 940px; } /* 12x60 + 11x20 */
2.4.4 Criando um rodapé
Para criar um rodapé em nosso sistema de grid básico, basta declarar na marcação 
HTML uma nova linha div.row que se estenda por toda a largura do container do 
grid div.container. O acréscimo de marcação HTML e de regra CSS é mostrado, 
em destaque, a seguir.
• HTML
1. <div class="container">
2. <h1>Meu primeiro grid - criando rodapé</h1>
3. <div class="row">
4. <div class="span8"><h2>Coluna principal</h2></div>
5. <div class="span4"><h2>Coluna auxiliar</h2></div>
10. </div> <!-- /.row das colunas -->
11. <div class="row">
12. <div class="span12"><h2>Rodapé</h2></div>
13. </div> <!-- /.row do rodapé -->
14. </div> <!-- /.container -->
[.../c2/grid-basico-4.html]
Conheça os livros do Maujor: http://livrosdomaujor.com.br
47Capítulo 2 ■ Fundamentos
• CSS
.span12 { width: 940px; background: #e5e5e5; } /* Acréscimo na folha de estilo anterior 
*/
Alerta: No arquivo para esse exemplo define-se uma cor de fundo para a linha do 
rodapé com a finalidade de destacar visualmente sua posição.
A renderização do arquivo anterior deve ficar conforme mostrado na figura 2.5.
Figura 2.5 – Grid básico, criando rodapé.
2.4.5 Aninhando conteúdos
Outra funcionalidade do sistema de grids para layout é a possibilidade de ani-
nhar colunas dentro de colunas. Suponha que desejamos criar dentro da coluna 
principal três blocos de conteúdos em linha, ou seja, na horizontal. O acréscimo 
de marcação HTML e de regra CSS é mostrado a seguir.
• HTML
1. <div class="container">
2. <h1>Meu primeiro grid - aninhamento de colunas</h1>
3. <div class="row">
4. <div class="span8">
 <h2>Coluna principal</h2>
 <div class="row">
 <div class="span2" style="background: #f5f5f5;">
 <p>Conteúdo aninhado á esquerda</p></div>
 <div class="span3" style="background: #f5f5f5;">
 <p>Conteúdo aninhado no centro</p></div>
 <div class="span3" style="background: #f5f5f5;">
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.548
 <p>Conteúdo aninhado à direita</p></div>
 </div> <!-- .row dos conteúdos aninhados-->
 </div> <!-- /.span8 coluna principal -->
5. <div class="span4"><h2>Coluna auxiliar</h2></div>
[.../c2/grid-basico-5.html]
• CSS
.span2 { width: 140px; } /* Acréscimo na folha de estilo anterior */
.span3 { width: 220px; } /* Acréscimo na folha de estilo anterior */
Alerta: No arquivo para esse exemplo define-se uma cor de fundo, com CSS inline, 
para os conteúdos aninhados, somente com a finalidade de destacar visualmente 
sua posição.
A renderização do arquivo anterior deve ficar conforme mostrado na figura 2.6.
Figura 2.6 – Grid básico, aninhamento de conteúdos.
Note que, sendo o container dos três blocos de conteúdos a coluna principal que 
é formada pela união de oito células, temos disponível, para criar os blocos, estas 
oito células. Por essa razão, optamos, em nosso exemplo, pelo primeiro bloco, que 
foi resultado da união de duas células, e o segundo e o terceiro, de três células.
Assim, cabe a pergunta: e se precisarmos de três blocos com larguras iguais? 
Com oito células disponíveis, temos duas possibilidades para múltiplos de três: 
unir seis células duas a duas e distribuir as duas células restantes entre as três 
ou tomar uma célula três vezes distribuindo as cinco células restantes entre elas.
Em ambos os casos, teríamos que criar regras CSS personalizadas.
Conheça os livros do Maujor: http://livrosdomaujor.com.br
49Capítulo 2 ■ Fundamentos
2.4.6 Semântica
Conforme foi visto, os conceitos da construção de layouts baseados em sistema 
de grid se fundamentam em uma marcação HTML com sua estrutura geral 
padronizada, na qual os nomes dos atributos class são predefinidos e servem 
de referência para estabelecer regras CSS destinadas a posicionar e formatar os 
diferentes elementos do layout.
Você deve estar se perguntando: O layout é todo construído com elementos div? 
E a semântica? A resposta é: desde que você preserve os atributos e seus valores 
predefinidos, use o elemento que você quiser em substituição ao elemento div. 
Mas lembre-se de que os elementos substitutos devem ser declarados no nível de 
bloco, como são os elementos div substituídos.
Observe o arquivo constante do item [2.4.7] reescrito de forma semântica:
• HTML
1. <div class="container">
2. <header>
3. <h1>Meu primeiro grid - semântica</h1>
4. </header>
5. <div class="row">
6. <section class="span8">
7. <header>
8. <h2>Coluna principal</h2>
9. </header>
10. <div class="row">
11. <div class="span2" style="background: #f5f5f5;">
 <p>Conteúdo aninhado á esquerda</p></div>
12. <div class="span3" style="background: #f5f5f5;">
 <p>Conteúdo aninhado no centro</p></div>
13. <div class="span3" style="background: #f5f5f5;">
 <p>Conteúdo aninhado à direita</p></div>
14. </div> <!-- .row dos conteúdos aninhados-->
15. </section> <!-- /.span8 coluna principal -->
16. <aside class="span4"><h2>Coluna auxiliar</h2></aside>
17. </div> <!-- /.row das colunas -->
18. <div class="row">
19. <footer class="span12"><h2>Rodapé</h2></footer>
20. </div> <!-- /.row do rodapé -->
21. </div> <!-- /.container -->
[.../c2/grid-basico-6.html]
Conheça os livros do Maujor: http://livrosdomaujor.com.br
Boostrap 3.3.550
O fato é que em projetos complexos a solução semântica proposta neste simples 
exemplo será inviável, e a verdade é que autores têm procurado solucionar este 
problema propondo algumas alternativas, tais como a criação de nomes de classes 
semânticos a serem processados por SASS ou LESS e outras, mas não existe uma 
solução semântica a toda prova, e este é um problema ainda não solucionado, 
comum à grande maioria dos frameworks CSS.
As versões anteriores ao IE9 do Internet Explorer não reconhecem os novos 
elementos da HTML5, por isso é necessário usar um script para forçar aqueles 
navegadores a reconhecer e estilizar tais elementos. Quando for o caso, nos exem-
plos deste livro, lincaremos para um script SHIM hospedado no CDN do Google, 
como mostrado no código a seguir.
<head>
...
<!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
Dica: Existem outros scripts que cumprem a mesma função, tal como o Modernizr. 
Use o de sua preferência e conforme as suas necessidades.
2.4.7 Espaçando colunas
No