Bootstrap 3

Framework front-end para desenvolvimento web e mobile

Daniel Schmitz
This book is for sale at http://leanpub.com/livro-bootstrap
This version was published on 2014-01-21
This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.
2013 - 2014 Daniel Schmitz
Also By Daniel Schmitz
AngularJS na prtica
Contedo
Introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
O que Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
O que podemos fazer com Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
O que no Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
O que voc precisa para testar o Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Exemplos do livro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Conceitos iniciais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Instalao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Tudo compilado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
CDN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
No esquea do jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Template bsico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Caractersticas do Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Desenvolvimento web responsivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
A classe container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Grid System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Diferenciando o tamanho dos dispositivos . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Trabalhando com offsets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Colunas aninhadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Tipografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Alinhamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Criando nfase ao texto com cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Abreviao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Blockquotes (citaes) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Tabela simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
CONTEDO
Listras em zebra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Bordas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Destacando linhas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Tabelas menores (condensadas) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Linhas contextuais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Mesclando classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Compreendo o form-group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Formulrio in-line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Formulrios horizontais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Componentes suportados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Checkbox e radio na horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Controles estticos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Campos desabilitados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Validaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Tamanho dos campos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Texto para ajuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Botes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Tamanho dos botes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Botes em grupo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
cones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Botes dropdown (menu) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Inputs diferenciados com group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Introduo
O que Bootstrap
O Bootstrap , basicamente, um kit bsico contendo diversos componentes web prontos para que
voc possa desenvolver a sua aplicao web/mobile de forma mais fcil e objetiva, sem necessitar
um slido conhecimento em Javascript e CSS para isso.
Este framework est estritamente ligado ao front-end e a camada View do padro MVC. Ele no
interfere em nada outras tecnologias ou linguagens, pois o seu foco o desenho da sua aplicao,
sendo montado exclusivamente com html puro.
O Bootstrap nasceu como uma biblioteca ligada ao Twitter (o nome era Twitter Bootstrat), no
qual a equipe de desenvolvimento usa para o desenvolvimento desta aplicao, e como o resultado
ficou muito bom, resolveram disponibilizar de forma gratuita para a comunidade. Com o avano do
produto, tendo ajuda de diversos desenvolvedores, o framework front-end evolui para esta terceira
gerao, na qual chamamos apenas de Bootstrap.
O que podemos fazer com Bootstrap
O Bootstrap utilizado para desenhar telas em html, que sero acessadas via navegador web ou
dispositivo mobile. Tudo que voc precisa saber sobre Bootstrap , na verdade, html. Com ele,
podemos criar sites inteiros e estruturas complexas, mas que podem ser acessadas facilmente em
diferentes dispositivos. Tambm podemos criar telas com tabelas, formulrios, janelas e controles
complexos. Pode-se facilmente criar um sistema web, apenas utilizando este framework, tomando
as devidas precaues.
Tambm possvel criar um site inteiro, apenas com o Bootstrap, como iremos rever nos diversos
exemplos desta obra.
O que no Bootstrap
Qualquer tarefa que no envolva o desenho da tela, no est relacionado comBootstrap. Isso envolve,
por exemplo, realizar o bind entre variveis javascript e seus respectivos campos input, ou calcular
datas ou fornecer formas de validar algum processo. Tudo que no visual ou no ligado ao html,
o Bootstrap no tem domnio.
Introduo 2
O que voc precisa para testar o Bootstrap
Como todo o framework foi criado a partir de css e javascript, no h necessidade nenhuma de
utilizar um servidor web para executar as pginas html
Exemplos do livro
Todos os exemplos do livro esto no github: https://github.com/danielps/livro-bootstrap
Conceitos iniciais
Instalao
A instalao do framework est diretamente ligada a incluir no documento html que voc precisa
criar algumas bibliotecas Javascript e css. Existem diversas formas para que voc possa incluir estas
bibliotecas, use a forma que achar mais conveniente para o seu projeto.
Tudo compilado
Javascript uma linguagem interpretada, mas quando dizemos compilado estamos fazendo uma
referncia a forma como o cdigo est organizado, isto , todo o cdigo javascript est em uma nica
linha, sem espaos em branco e com variveis ilegveis para ns humanos. Assim, temos um arquivo
javascript/css menor e um carregamento mais rpido da biblioteca.
O primeiro passo para instalar Bootstrap baixar a biblioteca acessando a url http://getbootstrap.
com/getting-started/ e clicar no boto Download Bootstrap. Nesta obra, estaremos utilizando a
verso 3.0.0, mas talvez na poca que esteja baixando a biblioteca, pode-se estar em uma verso
superior.
Aps baixar o arquivo bootstrap-3.0.0-dist.zip voc pode extra-lo para o seu projeto e comear
a usar o framework, conforme veremos logo adiante.
CDN
Outra forma de incluir as bibliotecas do Bootstrap em seu projeto a utilizao de um servio
chamado CDN, que uma forma de distribuir contedo livre atravs de servidores espalhados pelo
mundo. Ao invs de utilizar um servidor central para o download das bibliotecas, o CDN funciona
como uma forma de obter esses arquivos do servidor mais prximo ao cliente. Para utilizar o CDN
no Bootstrap, voc pode utilizar o seguinte template:
Conceitos iniciais 4
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootst\
rap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootst\
rap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></scr\
ipt>
No esquea do jQuery
O Bootstrap est intimamente ligado ao jQuery, que um framework Javascript para manipulao
da DOM do documento HTML. O Bootstrap precisa do jQuery, ento voc deve inclu-lo no seu
projeto. O jQuery pode ser baixado pelo site http://jquery.com, sendo utilizada a verso 1.10.2.
Template bsico
Em todos os nossos exemplos, estaremos utilizando o template a seguir. A forma como os arquivos
javascript e css esto orgnizados pode ser alterada de acordo com as necessidades do seu projeto,
mas lembre-se de alterar o caminho no template para que tudo funcione perfeitamente.
Os arquivos do template obedecem a seguinte estrutura:
bootstrap/
template.html
css/
bootstrap.css
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.min.css
js/
bootstrap.js
bootstrap.min.js
jquery-1.10.2.min
fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Conceitos iniciais 5
..
Veja que existem duas verses para cada arquivo css e js. Isso acontece para que voc possa escolher
qual verso deseja. A minificada (.min.js por exemplo) bem menor e carrega mais rpido, mas
ilegvel. A verso normal maior e est legvel.
Esta estrutura a mesma criada quando extramos o arquivo bootstrap-3.0.0-dist.zip, sendo
que inclumos a biblioteca jquery na pasta js e criamos o arquivo template.html com o seguinte
cdigo html:
template.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Este um template bsico que podemos utilizar para a maioria dos projetos. Todo o contedo
HTML vir aps a tag <body> e antes da incluso do script jquery. No inclua o arquivo de script
jquery e bootstrap na seo <head> do seu documento html, pois isso pode degradar o tempo de
carregamento da pgina.
Com o template pronto, podemos iniciar o nosso estudo sobre as diversas caractersticas que o
Bootstrap possui.
..
Sempre deixe o projeto template vazio, copiando e colando os arquivos em um novo projeto.
Conceitos iniciais 6
Caractersticas do Bootstrap
Este framework possui um conjunto extenso de funcionalidades e particularidades que devem ser
compreendidas para que possamos tirar utilizar todos os recursos com eficincia. Nos tpicos a
seguir, iremos ilustrar cada caracterstica com exemplos, para que possamos compreender melhor o
seu funcionamento.
Doctype
Para que o Bootstrap funcione corretamente, obrigatrio o uso da tag doctype no documento html.
Viewport
Nesta verso, o Bootstrap foi remodelado para se adequar perfeitamente ao desenvolvimento mobile.
Com isso, necessrio informar ao navegador a metatag viewport, que indica a rea onde o
navegador o site carregado. Isso necessrio porque, sem ele, o navegador do dispositivo mobile
iria deixar o tamanho de todo o site maior que a rea disponvel do dispositivo.
O Viewport configurado na tag <head> do documento html, da seguinte forma:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Como podemos ver, o viewport acima ir renderizar toda a pgina html no tamanho do dispositivo,
em uma escala 1:1.
Desenvolvimento web responsivo
O termo responsivo vem sendo constantemente empregado no desenvolvimento de websites e
sistemas web. Ele sugere que todo o contedo de um site deve se adequar a largura do dispositivo,
que pode ser um celular, um tablet ou um navegador.
O bootstrap tem como uma de suas metas tornar o desenvolvimento de interfaces responsivas algo
mais simples, que demanda apenas um pouco de configurao.
Por exemplo, em uma imagem, possvel torn-la responsiva atravs da atribuio da seguinte classe
a tag <img>:
<img src="..." class="img-responsive">
Existem diversas outras tcnicas que iremos abordar ao longo desta obra.
Conceitos iniciais 7
A classe container
No Bootstrap, podemos criar diversos elementos <div> e assim formar uma estrutura para o desenho
da pgina. Para que o contedo possa ser centralizado corretamente, usamos a classe container, que
em geral a primeira classe que usamos para definir o contedo da pgina.
O uso do container exemplificado a seguir. Lembre-se de test-lo no navegador:
Classe Container
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
Aqui entra o contedo. A classe container adiciona um box centralizado no\
elemento atual.
<br/><br/>
<div class="container">
Aqui entra outro contedo. Ele est centralizado em relao ao contai\
ner pai. Voc pode usar o chrome/firefox e investigar a margem que criada dinam\
icamente pelo Bootstrap, de forma a deixar tudo em ordem.
<br/><br/>
<div class="container">
Faa isso e diminuia gradativamente a largura do navegador. Voc ir \
reparar que, a medida que a largura diminui, o contedo reposicionado
</div>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/classe-container.html
Grid System
Introduo
O Bootstrap trabalha com um enquadramento de divs na tela chamado de grid, no qual possvel
criar blocos horizontais de contedo. A largura destes blocos no dimensionada atravs de
porcentagens ou pixels, mas sim atravs de um sistema de 12 colunas.
Neste sistema, uma linha da tela pode ser separada em 12 blocos, ou colunas, e atravs do Bootstrap
possvel configurar estes blocos para se adequaram ao tamanho que desejarem.
A figura a seguir ilustra este processo.
Grid System
O sistema de grid a base para que voc possa desenhar uma tela que seja compatvel tanto com
dispositivos mobile quanto desktop. O uso do grid system importante porque no ser voc que
ir definir os tamanhos e margens de cada bloco, mas sim o framework, de acordo com a largura
atual da tela. Isso significa que o Bootstrap pode at definir que um bloco ir ficar abaixo do outro,
mesmo tendo a configurao horizontal.
Diferenciando o tamanho dos dispositivos
Para que possamos ver um pouco de cdigo em ao, preciso ainda conhecer outro conceito
importante neste sistema. Nesta verso do Bootstrap, voc pode configurar o tamanho de cada bloco
de acordo com o tamanho do dispositivo em questo.
O tamanho da tela determinado atravs de 4 tipos
Muito Pequeno: Definido atravs da classe .col-xs-X, onde X um nmero de 1 a 12
Grid System 9
Pequeno: Definido atravs da classe .col-sm-X, onde X um nmero de 1 a 12
Mdio: Definido atravs da classe .col-md-X, onde X um nmero de 1 a 12
Grande: Definido atravs da classe .col-lg-X, onde X um nmero de 1 a 12
Cada tipo definido atravs da largura do dispositivo, da seguinte forma:
Muito Pequeno: At 750 pixels
Pequeno: De 750 970 pixels
Mdio: De 970 1170 pixels
Grande: Acima de 1170 pixels
Vamos codificar um exemplo simples, criando 12 blocos de texto para uma pgina web. Neste
exemplo, usamos a configurao devices muitos pequenos e outra para devices Grandes.
Grid System
<div class="container">
<div class="row">
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
</div>
<div class="row">
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
Grid System 10
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
</div>
</div>
Voc pode ver a pgina completa deste exemplo neste link e abrir o arquivo no seu navegador. Para
testar como o framework se comporta, redimensione a largura do navegador de forma a diminu-
la gradativamente. Em um certo momento, voc ver que os blocos criados com .col-lg sero
quebrados, ficando um abaixo do outro.
Mas porque isso aconteceu? Como os blocos estavam configurados para serem exibidos em uma tela
grande, ao menor sinal de que o contedo no poder mais ser exibido, o Bootstrap se encarrega
de garantir que os blocos de texto devam ser exibidos, colocando-os um abaixo do outro.
J nas divs configuradas atravs do col-xs-1 no so quebradas, porque o framework espera que
elas sejam visualizadas atravs de um dispositivo pequeno.
Para melhorar o entendimento ao processo, vamos supor a seguinte situao. Imagine que, em uma
tela maior (desktop) voc deseja criar dois blocos de texto, sendo que o primeiro bloco maior que o
segundo. Agora, caso a mesma pgina seja vista em um tablet, o ideal seria exibir os contedos em
cada metade da tela.
Para configurar esses blocos de texto, necessitamos usar col-lg e col-md na mesma div, de forma que
o framework possa assumir a quantidade de blocos de acordo com o tamanho da tela. Resumindo, a
configurao das divs deve ser a seguinte:
<div class="col-lg-8 col-sm-6">
...
</div>
<div class="col-lg-4 col-sm-6">
...
</div>
Neste cdigo, dizemos para que a primeira div assuma 8 blocos (dos 12 disponveis) em uma tela
maior (desktop), mas se a tela for mdia (tablet), a mesma div ir possuir 6 blocos. As imagens a
seguir mostram as diferentes situaes de acordo com o cdigo html criado anteriormente. O cdigo
completo est neste link
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-1.html
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-2.html
Grid System 11
Divs com tela grande
Divs com tela mdia
Grid System 12
Divs com tela pequena
Trabalhando com offsets
Um offset , resumidamente, um espao em branco adicionado esquerda do bloco de contedo.
Por exemplo, se voc deseja adicionar contedo somente no segundo bloco dos 12 disponveis, voc
pode usar a seguinte classe: .com-md-offset-1 Nesta classe, usamos o md para definir o padro para
tamanhos de tela mdio, e o offset-1 para deslocar o bloco de contedo em 1 bloco.
No exemplo a seguir, criamos um bloco de contedo que omite os dois primeiros blocos, e os dois
ltimos, deixando a iterface do texto mais centralizada.
Grid System 13
Exemplo com Offset
<div class="col-md-8 col-md-offset-2">
Voc poder verificar o exemplo completo neste link.
Colunas aninhadas
Em determinadas situao necessrio inserir blocos de contedo dentre de outros blocos. Desta
forma, quando usamos as colunas aninhadas uma outra, o bloco interno assume o sistema de 12
blocos do bloco anterior.
Por exemplo, se temos um bloco com 8 colunas, e dentro deste bloco queremos criar dois blocos
centralizados, criamos ento o seguinte cdigo:
Colunas aninhadas
<div class="row">
<div class="col-md-8">
Nvel 1: .col-md-8
<div class="row">
<div class="col-md-6">
Nvel 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
</div>
</div>
Veja que os dois blocos internos possuem 6 colunas cada, e no 8, que o tamanho do bloco
pai. No exemplo a seguir, criamos uma estrutura bem conhecida para sites com muito contedo.
Visualize este cdigo html no navegador para perceber como as colunas se comportam com o
redimensionamento do navegador.
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-3.html
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-4.html
Grid System 14
Estrutura complexa envolvendo blocos aninhados
<!DOCTYPE html>
<html>
<head>
<title>Grid System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<h2>bloco 1</h2>
<p>
Lorem ipsum
</p>
<div class="row">
<div class="col-md-6">
<h2>bloco 1.1</h2>
<p>
Lorem ipsum
</p>
</div>
<div class="col-xd-6">
<h2>bloco 1.2</h2>
<p>
Lorem ipsum
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>bloco 1.3</h2>
<p>
Lorem ipsum
</p>
</div>
</div>
</div>
<div class="col-xd-4">
<h2>bloco 2</h2>
Grid System 15
<p>
Lorem ipsum
</p>
<h2>bloco 3</h2>
<p>
Lorem ipsum
</p>
</div>
</div>
</div>
</div> </div>
</body> </html>
Outro fator importante a ser considerado no Grid System que o prprio framework determina as
dimenses de cada bloco, cada elemento possui margens determinadas para caber no dispositivo
o mximo possvel. Alterar estas margens atravs de CSS no recomendado.
Tipografia
Neste captulo veremos que o Bootstrap altera toda a tipografia das tags HTML para que possam ser
utilizadas na criao de suas pginas. Inicialmente, a tag <body> recebe um tamanho de 14 pixels,
alm de outros atributos. O pargrafo <p> recebe tambm uma margem inferior , alm de uma classe
especial chamada lead, que destaca melhor o pargrafo em relao aos outros.
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</p>
Alinhamento
Pode-se tambm alinhar o texto de um paragrafo utilizando as classes text-left, text-right e
text-center, veja:
<p class="text-left">Texto alinhado esquerda</p>
<p class="text-center">Texto alinhado no centro</p>
<p class="text-right">Texto alinhado direita</p>
Resultado do cdigo HTML acima
Criando nfase ao texto com cores
possvel dar uma certo destaque a algum texto utilizando cores, ao invs do negrito (<b>) e itlico
(<i>) tradicional. Claro que possvel alterar a cor de um texto com <font color=''>, mas isso
nunca dever ser feito.
Para que tenhamos um padro lgico de cores, que so aplicados no somente a textos, mas a
botes, links e caixas de mensagens, usamos uma referncia a 6 determinas situaes. So elas: mute,
primary, success, info, warning, danger.
Cada uma delas possui uma cor especfica que padro dentro do bootstrap. Para testar o destaque
em texto, vamos ao seguinte cdigo:
Tipografia 17
<p class="text-muted">Texto "mudo" ou sem foco</p>
<p class="text-primary">Texto com um pouco de destaque</p>
<p class="text-success">Texto com alguma mensagem boa</p>
<p class="text-info">Texto de informao</p>
<p class="text-warning">Texto de aviso</p>
<p class="text-danger">Texto de perigo, erro</p>
Resultado do cdigo HTML acima
Abreviao
A abreviao um novo elemento no html 5 que utiliza a tag <abbr> em conjunto com a propriedade
title. Veja o exemplo a seguir:
<p><abbr title="HyperText Markup Language">HTML</abbr> a melhor linguagem de ma\
rcao de texto existente.</p>
Resultado do cdigo HTML acima
Blockquotes (citaes)
Esta tag usada para citar um texto com um pouco mais de nfase. A tag utilizada <blockquote>,
e o bootstrap adicionou algumas classes extras para dar mais sentido ao blockquote. Voc pode usar
<small> dentro do bloco, incluindo a tag <cite> que define o nome da pessoa citada no bloco.
Tambm pode-se utilizar a classe .pull-right para flutuar o texto para a direita.
Tipografia 18
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere era\
t a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
Resultado do cdigo HTML acima
Listas
As listas do html so criadas atravs das tags <ul>, <ol> e <dl>. O bootstrap adiciona algumas
funcionalidades extras para que possamos trabalhar melhor com estas listas. Vamos ver cada opo
a seguir.
Unstyled
Utilizando a classe list-unstyled, remove a marca da lista que pode ser o ponto para a lista formada
com <ul> ou a numerao de uma lista <ol>.
<ul class="list-unstyled">
<li>...</li>
</ul>
Lado a lado (inline)
Caso deseje agrupar os itens de uma lista lado a lado, ao invs de um abaixo do outro, utilize a classe
list-inline, da seguinte forma:
Tipografia 19
<ul class="list-inline">
<li>Lorem</li>
<li>Ipsum</li>
<li>dolor</li>
</ul>
Listas com descrio na horizontal
A tag <dl> cria listas atravs do uso do <dt> e <dd>. Cada lista possui um item que o ttulo (<dt>)
e outra que a descrio (<dd>).
No exemplo a seguir, usamos a lista no formato original, veja:
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
E com da lista no formato horizontal:
Resultado do cdigo HTML acima
..
Os exemplos deste captulo esto localizados [neste link].(https://github.com/danielps/livro-
bootstrap/blob/master/exemplos/textos.html).
Tabelas
Tabelas so a forma mais comum de organizar dados em listas, principalmente se houverem muitos
campos a serem exibidos. As tabelas foram implementadas desde o incio do HTML, atravs da tag
<table> e necessitam de uma grande quantidade de otimizao visual para que fiquem com uma
boa apresentao.
Uma tabela simples sem formatao
Com o Bootstrap, o uso de tabelas se torna algo simples e sem nenhuma customizao complexa,
bastando apenas definir a classe table, alm de algumas propriedades extras
..
Em todos os nossos exemplos, usamos tambm as tags <thead> para definir o cabealho da tabela
e <tbody> para definir o corpo da tabela.
Tabela simples
Para criar uma tabela no Bootstrap, use a tag <table> e a classe table, na seguinte forma:
<table class="table">
...
</table>
No exemplo anterior, ao aplicar a classe table, temos o seguinte resultado:
Tabelas 21
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</tbody>
</table>
Tabelas 22
Tabela com a classe table
Listras em zebra
Uma forma fcil de deixar a tabela no formato zebra, com uma linha de fundo branco e outra linha
no fundo cinza, de forma alternada, utilizar a classe table-striped, da seguinte forma:
<table class="table table-striped">
...
</table>
Tabela com a classe table-striped
Bordas
No inclua bordas usando border='1', use a classe table-bordered para que o Bootstrap possa
incluir corretamente as bordas na tabela.
Tabelas 23
<table class="table table-bordered">
...
</table>
Tabela com a classe table-bordered
Destacando linhas
O efeito hover bem conhecido por ns desenvolvedores web. Ele muda uma cor ou formato
quando o ponteiro do mouse est ativado naquele ponto. Nas tabelas, possvel adiconar esse efeito
destacando a linha que o mouse passa. Para fazer isso, voc pode usar a classe table-hover
<table class="table table-hover">
...
</table>
Tabelas menores (condensadas)
Caso o espao entre cada clula (padding e margin) da tabela estejam atrapalhando a visualizao
de um item, voc pode retir-los atravs da classe table-condensed, conforme o exemplo a seguir:
<table class="table table-condensed">
...
</table>
Tabelas 24
Linhas contextuais
possvel adicionar um contexto a uma linha de uma tabela, atravs das classes active, success,
warning ou danger. As classes devem ser aplicadas na tag <tr> que define a linha da tabela.
<table class="table">
<tbody>
<tr class="danger">...</tr>
</tbody>
</table>
Tabelas com linhas contextuais
Mesclando classes
possvel mesclar todas as classes disponveis para formatao da tabela, de forma a obter
um melhor formatao da mesma. Por exemplo, voc pode usar as classes table-striped e
table-bordered juntas.
Tabelas 25
Tabela mesclada
..
Os exemplos deste captulo esto localizados neste link.
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/tabelas.html
Formulrios
Os formulrios, cuja tag principal <form>, constituem o principal meio de entrada de dados em
pginas web. Como existem diversas formas de se criar um formulrio, podendo inclusive mesclar
formas variadas, vamos exibir a seguir as principais funcionalidades que o Bootstrap possui.
Um simples formulrio sem a formatao do Bootstrap
Compreendo o form-group
A classe form-group usada para delimitar um grupo nico de um formulrio, que na maioria das
vezes definida como um campo. Para criar um formulrio com muitos campos, necessrio criar
um formulrio com vrios elementos com a classe form-group. No exemplo a seguir, criamos um
formulrio com dois elementos, nome e email, no qual cada um definido por uma div com a classe
form-group.
<form>
<div class="form-group">
<label for="nome">Nome</label>
<input type="text" class="form-control" id="nome">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email">
</div>
</form>
Formulrios 27
Formulrio formatado com Bootstrap
Neste exemplo, podemos perceber que a largura de cada campo input foi alterada para 100%, e que
o formulrio est devidamente formatado para atender aos padres web. Esta formatao obtida
atravs da classe form-control que est presente na tag <input>. Obviamente, todo controle html
de formulrio deve possuir esta classe.
..
As diferenas entre um formulrio simples e com o bootstrap so configuradas principalmente atra-
vs da criao da <div> com a classe form-group e o campo <input> com a classe form-control.
Formulrio in-line
Um formulrio in-line aquele em que os campos ficam lado a lado. Para estes campos, necessrio
informar a largura de cada um deles. Alm disso, mesmo que os cabealhos de cada campo no
apaream, eles devem ser informados, para fins de semntica, e podem ser escondidos atravs da
classe sr-only.
No exemplo a seguir, adicionamos apenas a classe form-inline na tag <form>.
<form class="form-inline">
<div class="form-group">
<label for="nome">Nome</label>
<input type="text" class="form-control" id="nome">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email">
</div>
</form>
Formulrios 28
Formulrio inline
Podemos refinar o formulrio e incluir a classe sr-only com o objetivo de esconder os labels,
deixando-os disponveis apenas para a semntica da pgina. Tambm usamos placeholder para
definir o label do campo nele mesmo.
<form class="form-inline">
<div class="form-group">
<label for="nome" class="sr-only">Nome</label>
<input type="text" class="form-control" id="nome" placeholder="Nome">
</div>
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="text" class="form-control" id="email" placeholder="Email">
</div>
</form>
Formulrio inline sem labels
Formulrios horizontais
Estes so os tipos mais usados para a entrada de dados. Um formulrio horizontal definido pela
classe form-horizontal na tag <form> e deve ter o tamanho de cada label de cada campo definido.
Os tamanhos so definidos da mesma forma vista no captulo 3, pelo sistema de grids.
No exemplo a seguir, criamos um formulrio disposto na forma horizontal, veja:
Formulrios 29
1 <form class="form-horizontal">
2 <div class="form-group">
3 <label for="nome" class="col-sm-2 control-label">Nome</label>
4 <div class="col-sm-5">
5 <input type="text" class="form-control" id="nome" placeholder="Digite o s\
6 eu nome"/>
7 </div>
8 </div>
9 <div class="form-group">
10 <label for="email" class="col-sm-2 control-label">Email</label>
11 <div class="col-sm-5">
12 <input type="text" class="form-control" id="email" placeholder="Digite o \
13 seu email"/>
14 </div>
15 </div>
16 <div class="form-group">
17 <div class="col-sm-offset-2 col-sm-4">
18 <button type="submit" class="btn btn-default">Enviar</button>
19 </div>
20 </form>
Este exemplo contm detalhes importantes sobre o Boorstrap. Inicialmente, na linha 1, criamos o
<form> com a classe form-horizontal e logo em seguida, criamos o primeiro form-group.
Na linha 3, adicionamos a classe com-sm-2, relativa ao grid system fazendo que com o labe ocupe
2 espaos dos 12 disponveis. Tambm usamos a classe control-label que ir formatar o label de
acordo com o formulrio horizontal.
Na linha 4 inclumos uma div que possui a classe col-sm-5, que ser utilizada para inclurmos a
caixa de texto. Na linha 6 inserimos a caixa de texto com a tag input. O processo se repete para o
email, na linha 9.
Na linha 16 criamos uma div para inserir o boto de submit do formulrio. Veja que, na linha 17,
usamos a classe col-sm-offset-2 que ir gerar um offset com 2 espaos na div, fazendo com que o
boto fique alinhado a caixa de texto. Este formulrio representado na imagem a seguir:
Formulrios 30
Formulrio horizontal
Componentes suportados
O Bootstrap d suporte a todos os controles comuns do formulrio, tais como: text, password,
datetime, datetime-local, date, month, time, week, number, email, url, search, tel, e color. Alguns
deles possuem opes extras, das quais veremos a seguir.
Checkbox e radio na horizontal
O Bootstrap oferece uma opo extra a estes controles de forma a disponibilizar cada item na forma
horizontal, conforme o cdigo a seguir:
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
Controles estticos
possivel adicionar um controle esttico, na maioria das vezes, um label, em formulrios cujo o
objeto apenas informar algum campo que j foi preenchido. Esta configurao realizada atravs
da classe form-control-static.
Formulrios 31
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
Formulrio com campos estticos
Campos desabilitados
Para desabilitar um campo, basta adicionar o atributo disabled a ele, conforme o exemplo a seguir:
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled \
input here..." disabled>
..
Voc pode desabilitar um fieldset tambm: <fieldset disabled>
Validaes
O bootstrap no realiza validaes em si, claro, ele apenas oferece meios de se visualizar a validao
dos campos. A validao deve ser feita atravs de javascript, e possivel adicionar classes a classe
form-group, da seguinte forma:
Formulrios 32
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input com success</label>
<input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input com warning</label>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input com error</label>
<input type="text" class="form-control" id="inputError">
</div>
Formulrio com validao
Neste exemplo, usamos as classes has-success, has-warning e has-error para definir as validaes
Tamanho dos campos
Pode-se criar diversos tamanhos pr definidos para os campos de um formulrio. Os tamanhos mais
comuns so definidos na prpria tag input, atravs das classes input-lg, para um campo maior e
input-sm para um campo menor.
J a largura do campo deve ser configurada atravs do grid system, usando, por exemplo, col-xs,
col-sm, entre outros, conforme visto no Captulo 3, por exemplo:
Formulrios 33
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
Texto para ajuda
muito comum em formulrios inserir um texto de help abaixo do campo, como forma de
explicar algo relativo ao campo em questo. Esse texto deve ser inserido em uma tag <span
class='help-block'> logo a seguir do <input>, conforme o exemplo a seguir:
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="email" placeholder="Digite o \
seu email"/>
<span class="help-block">Informe um email vlido, pois ser verificado ap\
s a concluso do cadastro</span>
</div>
</div>
Botes
Botes fazem parte de qualquer formulrio. Com o Bootstrap voc pode criar botes para finaliades
diferentes, sendo elas: default, primary, success, info, warning, danger. Cada um desses
botes so definidos pela sua classe, da seguinte forma:
Formulrios 34
<!-- Boto padro -->
<button type="button" class="btn btn-default">Default</button>
<!-- Possui uma cor diferenciada e definido como um boto que identifica a ao\
principal de um conjunto de botes -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Boto que indica uma ao de sucesso -->
<button type="button" class="btn btn-success">Success</button>
<!-- Boto que indica uma mensagem de informao -->
<button type="button" class="btn btn-info">Info</button>
<!-- Boto que indica ateno, perigo -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Boto que indica algo potencialmente negativo, ou um erro -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Este boto assume o comportamento de um link -->
<button type="button" class="btn btn-link">Link</button>
Como podemos perceber no cdigo acima, os botes necessitam basicamente de duas classes. A
primeira a padro btn que informa ao Bootstrap que aquele elemento um boto. A segunda
justamente a forma como o boto ser, podendo indicar sucesso ou erro, por exemplo.
Tamanho dos botes
Voc pode usar as seguintes classes para definir o tamanho de um boto:
btn-lg : Large, boto grande
btn-sm : Small, boto pequeno
btn-xs : Extra Small, boto muito pequeno
Botes em grupo
Caso deseje adicionar um conjunto de botes unidos um ao outro, pode-se utilizar a classe btn-group
para isso, conforme o cdigo a seguir:
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Formulrios 35
cones
Existe uma funcionalidade no Bootstrap que usa uma biblioteca de cones prontos, que so os
Glyphicons. Para us-los, deve-se adicionar a classe do cone ao elemento.
Por exemplo, se voc deseja adicionar um cone com um sinal de busca, voc pode adicion-lo com
o seguinte cdigo:
<span class="glyphicon glyphicon-search"></span>
Os cones podem ser usados em conjunto com o boto, bastando inclu-lo da seguinte forma:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
..
Em nossa pgina de exemplos (formularios.html) existe uma lista completa de cones.
Botes dropdown (menu)
Para criar um boto com opes, deve-se um conjunto de tags html e classes conforme o codigo a
sguir:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="drop\
down">
Arquivo <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Abrir</a></li>
<li><a href="#">Salvar</a></li>
<li><a href="#">Salvar como</a></li>
<li class="divider"></li>
<li><a href="#">Fechar</a></li>
</ul>
</div>
Formulrios 36
Inicialmente criamos uma div que possui a classe btn-group, que ir agrupar tanto o boto com
o texto quanto o dropdown que abre o menu com os itens. Repare que aps a palavra Arquivo
inclumos um cone com a classe caret que uma seta para baixo.
O menu dropdown formado pelo conjunto de tags ul li, seguido da classse dropdown-menu. O
que faz o menu abrir com o clique do boto a propriedade data-toggle="dropdown" do boto, que
abre o dropdown-menu interno a div contida no btn-group.
Menu Dropdown
Inputs diferenciados com group
Uma das opes que o Bootstrap oferece na criao dos campos formar um grupo entre um input
e uma classe ou boto. Os exemplos a seguir ilustram este processo, de forma que usamos a classe
input-group para unir um texto qualquer a uma caixa de texto.
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
O resultado deste cdigo visto na imagem a seguir.
Formulrios 37
Input Group
Caso deseje adicionar um boto um input group, faa da seguinte forma:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Ir!</button>
</span>
</div>
..
Os exemplos deste captulo esto localizados neste link.
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/formularios.html