livro-bootstrap.pdf

8/10/2019 livro-bootstrap.pdf

1/42


2/42

Bootstrap 3Framework front-end para desenvolvimento web e mobile

Daniel Schmitz

This book is for sale athttp://leanpub.com/livro-bootstrap

This version was published on 2014-01-21

This is aLeanpubbook. Leanpub empowers authors and publishers with the Lean Publishingprocess.Lean Publishingis the act of publishing an in-progress ebook using lightweight tools andmany iterations to get reader feedback, pivot until you have the right book and build traction onceyou do.

2013 - 2014 Daniel Schmitz
http://leanpub.com/manifestohttp://leanpub.com/http://leanpub.com/livro-bootstrap


3/42

Also ByDaniel SchmitzAngularJS na prtica
http://leanpub.com/livro-angularJShttp://leanpub.com/u/danielschmitz


4/42

Contedo

Introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1O que Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1O que podemos fazer com Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1O que no Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1O que voc precisa para testar o Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Exemplos do livro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Conceitos iniciais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Instalao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Tudo compilado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3CDN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3No esquea do jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Template bsico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Caractersticas do Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Desenvolvimento web responsivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6A classecontainer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Grid System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Diferenciando o tamanho dos dispositivos . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Trabalhando com offsets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Colunas aninhadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Tipografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Alinhamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Criando nfase ao texto com cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Abreviao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Blockquotes (citaes) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Tabela simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20


5/42

CONTEDO

Listras em zebra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Bordas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Destacando linhas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Tabelas menores (condensadas) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Linhas contextuais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Mesclando classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Compreendo o form-group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Formulrio in-line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Formulrios horizontais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Componentes suportados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Checkbox e radio na horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Controles estticos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Campos desabilitados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Validaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Tamanho dos campos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Texto para ajuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Botes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Tamanho dos botes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Botes em grupo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34cones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Botes dropdown (menu) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Inputs diferenciados com group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36


6/42

IntroduoO que Bootstrap

O Bootstrap , basicamente, um kit bsico contendo diversos componentes web prontos para quevoc possa desenvolver a sua aplicao web/mobile de forma mais fcil e objetiva, sem necessitarum slido conhecimento em Javascript e CSS para isso.

Este framework est estritamente ligado ao front-end e a camada View do padro MVC. Ele nointerfere 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), noqual a equipe de desenvolvimento usa para o desenvolvimento desta aplicao, e como o resultadoficou muito bom, resolveram disponibilizar de forma gratuita para a comunidade. Com o avano doproduto, tendo ajuda de diversos desenvolvedores, o framework front-end evolui para esta terceiragerao, 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 emdiferentes dispositivos. Tambm podemos criar telas com tabelas, formulrios, janelas e controlescomplexos. Pode-se facilmente criar um sistema web, apenas utilizando este framework, tomandoas devidas precaues.

Tambm possvel criar um site inteiro, apenas com o Bootstrap, como iremos rever nos diversosexemplos desta obra.

O que no Bootstrap

Qualquer tarefa que no envolva o desenho da tela, no est relacionado com Bootstrap. Isso envolve,por exemplo, realizar obindentre variveis javascript e seus respectivos camposinput, ou calculardatas ou fornecer formas de validar algum processo. Tudo que no visual ou no ligado ao html,o Bootstrap no tem domnio.


7/42

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


8/42

Conceitos iniciaisInstalao

A instalao do framework est diretamente ligada a incluir no documento html que voc precisacriar algumas bibliotecas Javascript e css. Existem diversas formas para que voc possa incluir estasbibliotecas, use a forma que achar mais conveniente para o seu projeto.

Tudo compilado

Javascript uma linguagem interpretada, mas quando dizemos compilado estamos fazendo umareferncia a forma como o cdigo est organizado, isto , todo o cdigo javascript est em uma nicalinha, 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 urlhttp://getbootstrap.com/getting-started/e clicar no boto Download Bootstrap. Nesta obra, estaremos utilizando averso 3.0.0, mas talvez na poca que esteja baixando a biblioteca, pode-se estar em uma versosuperior.

Aps baixar o arquivobootstrap-3.0.0-dist.zipvoc pode extra-lo para o seu projeto e comeara usar o framework, conforme veremos logo adiante.

CDN

Outra forma de incluir as bibliotecas do Bootstrap em seu projeto a utilizao de um serviochamado CDN, que uma forma de distribuir contedo livre atravs de servidores espalhados pelomundo. Ao invs de utilizar um servidor central para o download das bibliotecas, o CDN funcionacomo uma forma de obter esses arquivos do servidor mais prximo ao cliente. Para utilizar o CDNno Bootstrap, voc pode utilizar o seguinte template:
http://getbootstrap.com/getting-started/http://getbootstrap.com/getting-started/


9/42

Conceitos iniciais 4

No esquea do jQuery

O Bootstrap est intimamente ligado ao jQuery, que um framework Javascript para manipulaoda DOM do documento HTML. O Bootstrap precisa do jQuery, ento voc deve inclu-lo no seuprojeto. 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 arquivosjavascript 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


10/42


Veja que existem duas verses para cada arquivo css e js. Isso acontece para que voc possa escolherqual 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, sendoque inclumos a biblioteca jqueryna pastajs e criamos o arquivotemplate.htmlcom o seguintecdigo html:

template.html

Bootstrap Template

Hello, world!

Este um template bsico que podemos utilizar para a maioria dos projetos. Todo o contedoHTML vir aps a tag e antes da incluso do scriptjquery. No inclua o arquivo de scriptjquerye bootstrapna seodo seu documento html, pois isso pode degradar o tempo decarregamento da pgina.

Com o template pronto, podemos iniciar o nosso estudo sobre as diversas caractersticas que oBootstrap possui.

Sempre deixe o projeto template vazio, copiando e colando os arquivos em um novo projeto.


11/42


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 aseguir, iremos ilustrar cada caracterstica com exemplos, para que possamos compreender melhor oseu funcionamento.

Doctype

Para que o Bootstrap funcione corretamente, obrigatrio o uso da tagdoctypeno 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 onavegador o site carregado. Isso necessrio porque, sem ele, o navegador do dispositivo mobileiria deixar o tamanho de todo o site maior que a rea disponvel do dispositivo.

O Viewport configurado na tag do documento html, da seguinte forma:

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 esistemas 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 algomais simples, que demanda apenas um pouco de configurao.

Por exemplo, em uma imagem, possvel torn-la responsiva atravs da atribuio da seguinte classea tag:

Existem diversas outras tcnicas que iremos abordar ao longo desta obra.


12/42


A classecontainer

No Bootstrap, podemos criar diversos elementose assim formar uma estrutura para o desenho

da pgina. Para que o contedo possa ser centralizado corretamente, usamos a classecontainer

, queem geral a primeira classe que usamos para definir o contedo da pgina.

O uso docontainerexemplificado a seguir. Lembre-se de test-lo no navegador:

Classe Container

Bootstrap Template

Hello, world!

Aqui entra o contedo. A classe container adiciona um box centralizado no\

elemento atual.

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.

Faa isso e diminuia gradativamente a largura do navegador. Voc ir \

reparar que, a medida que a largura diminui, o contedo reposicionado

https://github.com/danielps/livro-bootstrap/blob/master/exemplos/classe-container.html
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/classe-container.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/classe-container.html


13/42

Grid SystemIntroduo

O Bootstrap trabalha com um enquadramento de divs na tela chamado degrid, no qual possvelcriar blocos horizontais de contedo. A largura destes blocos no dimensionada atravs deporcentagens 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 comdispositivos mobile quanto desktop. O uso do grid system importante porque no ser voc queir definir os tamanhos e margens de cada bloco, mas sim o framework, de acordo com a larguraatual 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 conceitoimportante neste sistema. Nesta verso do Bootstrap, voc pode configurar o tamanho de cada blocode 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


14/42

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. Nesteexemplo, usamos a configurao devices muitos pequenos e outra para devices Grandes.

Grid System

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-lg-1

.col-lg-1

.col-lg-1

.col-lg-1

.col-lg-1

.col-lg-1

.col-lg-1

.col-lg-1

.col-lg-1


15/42

Grid System 10

.col-lg-1

.col-lg-1

.col-lg-1

Voc pode ver a pgina completa deste exemploneste linke abrir o arquivo no seu navegador. Paratestar 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 seroquebrados, ficando um abaixo do outro.

Mas porque isso aconteceu? Como os blocos estavam configurados para serem exibidos em uma telagrande, ao menor sinal de que o contedo no poder mais ser exibido, o Bootstrap se encarregade garantir que os blocos de texto devam ser exibidos, colocando-os um abaixo do outro.

J nas divs configuradas atravs docol-xs-1no so quebradas, porque o framework espera queelas sejam visualizadas atravs de um dispositivo pequeno.

Para melhorar o entendimento ao processo, vamos supor a seguinte situao. Imagine que, em umatela maior (desktop) voc deseja criar dois blocos de texto, sendo que o primeiro bloco maior que osegundo. Agora, caso a mesma pgina seja vista em um tablet, o ideal seria exibir os contedos emcada metade da tela.

Para configurar esses blocos de texto, necessitamos usarcol-lg e col-md namesmadiv,deformaqueo framework possa assumir a quantidade de blocos de acordo com o tamanho da tela. Resumindo, aconfigurao das divs deve ser a seguinte:

...

...

Neste cdigo, dizemos para que a primeiradiv assuma 8 blocos (dos 12 disponveis) em uma telamaior (desktop), mas se a tela for mdia (tablet), a mesma div ir possuir 6 blocos. As imagens aseguir mostram as diferentes situaes de acordo com o cdigo html criado anteriormente. O cdigocompleto estneste link

https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-1.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-2.html
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-2.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-1.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-2.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-1.html


16/42

Grid System 11

Divs com tela grande

Divs com tela mdia


17/42

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-1Nesta classe, usamos o md para definir o padro paratamanhos 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 doisltimos, deixando a iterface do texto mais centralizada.


18/42

Grid System 13

Exemplo com Offset

Voc poder verificar o exemplo completoneste link.

Colunas aninhadas

Em determinadas situao necessrio inserir blocos de contedo dentre de outros blocos. Destaforma, quando usamos as colunas aninhadas uma outra, o bloco interno assume o sistema de 12blocos do bloco anterior.

Por exemplo, se temos um bloco com 8 colunas, e dentro deste bloco queremos criar dois blocoscentralizados, criamos ento o seguinte cdigo:

Colunas aninhadas

Nvel 1: .col-md-8

Nvel 2: .col-md-6

Level 2: .col-md-6

Veja que os dois blocos internos possuem 6 colunas cada, e no 8, que o tamanho do bloco

pai. Noexemplo 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 oredimensionamento do navegador.

https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-3.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-4.html
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-4.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-3.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-4.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-3.html


19/42

Grid System 14

Estrutura complexa envolvendo blocos aninhados

Grid System

bloco 1

Lorem ipsum

bloco 1.1

Lorem ipsum

bloco 1.2

Lorem ipsum

bloco 1.3

Lorem ipsum

bloco 2


20/42

Grid System 15

Lorem ipsum

bloco 3

Lorem ipsum

Outro fator importante a ser considerado no Grid System que o prprio framework determina asdimenses de cada bloco, cada elemento possui margens determinadas para caber no dispositivoo mximo possvel. Alterar estas margens atravs de CSS no recomendado.


21/42

TipografiaNeste captulo veremos que o Bootstrap altera toda a tipografia das tags HTML para que possam serutilizadas na criao de suas pginas. Inicialmente, a tag recebe um tamanho de 14 pixels,alm de outros atributos. O pargrafo

recebe tambm uma margem inferior , alm de uma classeespecial chamadalead, que destaca melhor o pargrafo em relao aos outros.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

AlinhamentoPode-se tambm alinhar o texto de um paragrafo utilizando as classes text-left, text-right etext-center, veja:

Texto alinhado esquerda

Texto alinhado no centro

Texto alinhado direita

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 () e itlico() tradicional. Claro que possvel alterar a cor de um texto com , mas issonunca dever ser feito.

Para que tenhamos um padro lgico de cores, que so aplicados no somente a textos, mas abotes, 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 destaqueem texto, vamos ao seguinte cdigo:


22/42

Tipografia 17

Texto "mudo" ou sem foco

Texto com um pouco de destaque

Texto com alguma mensagem boa

Texto de informao

Texto de aviso

Texto de perigo, erro


Abreviao

A abreviao um novo elemento no html 5 que utiliza a tagem conjunto com a propriedadetitle. Veja o exemplo a seguir:

HTML a melhor linguagem de ma\

rcao de texto existente.


Blockquotes (citaes)

Esta tag usada para citar um texto com um pouco mais de nfase. A tag utilizada ,e o bootstrap adicionou algumas classes extras para dar mais sentido ao blockquote. Voc pode usar dentro do bloco, incluindo a tag que define o nome da pessoa citada no bloco.Tambm pode-se utilizar a classe.pull-rightpara flutuar o texto para a direita.


23/42

Tipografia 18

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere era\

t a ante.

Someone famous in Source Title


Listas

As listas do html so criadas atravs das tags , e . O bootstrap adiciona algumasfuncionalidades extras para que possamos trabalhar melhor com estas listas. Vamos ver cada opoa seguir.

Unstyled

Utilizando a classe list-unstyled, remove a marca da lista que pode ser o ponto para a lista formadacomou a numerao de uma lista .

...

Lado a lado (inline)

Caso deseje agrupar os itens de uma lista lado a lado, ao invs de um abaixo do outro, utilize a classelist-inline, da seguinte forma:


24/42

Tipografia 19

Lorem

Ipsum

dolor

Listas com descrio na horizontal

A tagcria listas atravs do uso doe. Cada lista possui um item que o ttulo ()e outra que a descrio ().

No exemplo a seguir, usamos a lista no formato original, veja:

......

E com da lista no formato horizontal:


Os exemplos deste captulo esto localizados [neste link].(https://github.com/danielps/livro-bootstrap/blob/master/exemplos/textos.html).


25/42

TabelasTabelas so a forma mais comum de organizar dados em listas, principalmente se houverem muitoscampos a serem exibidos. As tabelas foram implementadas desde o incio do HTML, atravs da tage necessitam de uma grande quantidade de otimizao visual para que fiquem com umaboa 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 classetable, alm de algumas propriedades extras

Em todos os nossos exemplos, usamos tambm as tagspara definir o cabealho da tabela

epara definir o corpo da tabela.

Tabela simples

Para criar uma tabela no Bootstrap, use a tage a classetable, na seguinte forma:

...

No exemplo anterior, ao aplicar a classetable, temos o seguinte resultado:


26/42


27/42

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 linhano fundo cinza, de forma alternada, utilizar a classetable-striped, da seguinte forma:

...

Tabela com a classe table-striped

Bordas

No inclua bordas usando border='1', use a classetable-bordered para que o Bootstrap possaincluir corretamente as bordas na tabela.


28/42

Tabelas 23

...

Tabela com a classe table-bordered

Destacando linhas

O efeito hover bem conhecido por ns desenvolvedores web. Ele muda uma cor ou formatoquando 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 classetable-hover

...

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 classetable-condensed, conforme o exemplo a seguir:

...


29/42

Tabelas 24

Linhas contextuais

possvel adicionar um contexto a uma linha de uma tabela, atravs das classesactive, success,

warningoudanger. As classes devem ser aplicadas na tagque define a linha da tabela.

...

Tabelas com linhas contextuais

Mesclando classes

possvel mesclar todas as classes disponveis para formatao da tabela, de forma a obterum melhor formatao da mesma. Por exemplo, voc pode usar as classes table-striped etable-borderedjuntas.


30/42

Tabelas 25

Tabela mesclada

Os exemplos deste captulo esto localizadosneste link.

https://github.com/danielps/livro-bootstrap/blob/master/exemplos/tabelas.html
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/tabelas.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/tabelas.html


31/42

FormulriosOs formulrios, cuja tag principal , constituem o principal meio de entrada de dados empginas web. Como existem diversas formas de se criar um formulrio, podendo inclusive mesclarformas 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 classeform-group usada para delimitar um grupo nico de um formulrio, que na maioria dasvezes definida como um campo. Para criar um formulrio com muitos campos, necessrio criarum formulrio com vrios elementos com a classeform-group. No exemplo a seguir, criamos umformulrio com dois elementos, nome e email, no qual cada um definido por uma div com a classeform-group.

Nome

Email


32/42

Formulrios 27

Formulrio formatado com Bootstrap

Neste exemplo, podemos perceber que a largura de cada campo inputfoi alterada para 100%, e queo formulrio est devidamente formatado para atender aos padres web. Esta formatao obtidaatravs da classeform-controlque est presente na tag . Obviamente, todo controle htmlde formulrio deve possuir esta classe.

As diferenas entre um formulrio simples e com o bootstrap so configuradas principalmente atra-vs da criao dacom a classeform-groupe o campocom a classeform-control.

Formulrio in-line

Um formulrio in-line aquele em que os campos ficam lado a lado. Para estes campos, necessrioinformar a largura de cada um deles. Alm disso, mesmo que os cabealhos de cada campo noapaream, eles devem ser informados, para fins de semntica, e podem ser escondidos atravs daclassesr-only.

No exemplo a seguir, adicionamos apenas a classeform-inlinena tag.

Nome

Email


33/42

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 paradefinir o label do campo nele mesmo.

Nome

Email

Formulrio inline sem labels

Formulrios horizontais

Estes so os tipos mais usados para a entrada de dados. Um formulrio horizontal definido pelaclasseform-horizontalna tage 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:


34/42

Formulrios 29

1

2

3 Nome

4

5

7

8

9

10 Email

11

12

14

15

16

17

18 Enviar

19

20

Este exemplo contm detalhes importantes sobre o Boorstrap. Inicialmente, na linha 1, criamos ocom a classeform-horizontale logo em seguida, criamos o primeiroform-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 classecontrol-labelque ir formatar o label deacordo com o formulrio horizontal.

Na linha 4 inclumos uma divque possui a classecol-sm-5, que ser utilizada para inclurmos acaixa de texto. Na linha 6 inserimos a caixa de texto com a tag input. O processo se repete para oemail, na linha 9.

Na linha 16 criamos umadiv para inserir o boto de submitdo formulrio. Veja que, na linha 17,usamos a classecol-sm-offset-2que ir gerar um offset com 2 espaos na div, fazendo com que oboto fique alinhado a caixa de texto. Este formulrio representado na imagem a seguir:


35/42

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. Algunsdeles 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 formahorizontal, conforme o cdigo a seguir:

1

2

3

Controles estticos

possivel adicionar um controle esttico, na maioria das vezes, um label, em formulrios cujo oobjeto apenas informar algum campo que j foi preenchido. Esta configurao realizada atravsda classeform-control-static.


36/42

Formulrios 31

Email

[email protected]

Formulrio com campos estticos

Campos desabilitados

Para desabilitar um campo, basta adicionar o atributodisableda ele, conforme o exemplo a seguir:

Voc pode desabilitar um fieldset tambm:

Validaes

O bootstrap no realiza validaes em si, claro, ele apenas oferece meios de se visualizar a validaodos campos. A validao deve ser feita atravs de javascript, e possivel adicionar classes a classeform-group, da seguinte forma:


37/42

Formulrios 32

Input com success

Input com warning

Input com error

Formulrio com validao

Neste exemplo, usamos as classeshas-success,has-warningehas-errorpara definir as validaes

Tamanho dos campos

Pode-se criar diversos tamanhos pr definidos para os campos de um formulrio. Os tamanhos maiscomuns so definidos na prpria tag input, atravs das classesinput-lg, para um campo maior einput-smpara 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:


38/42

Formulrios 33

Texto para ajuda

muito comum em formulrios inserir um texto de help abaixo do campo, como forma deexplicar algo relativo ao campo em questo. Esse texto deve ser inserido em uma tag logo a seguir do, conforme o exemplo a seguir:

Email

Informe um email vlido, pois ser verificado ap\

s a concluso do cadastro

Botes

Botes fazem parte de qualquer formulrio. Com o Bootstrap voc pode criar botes para finaliadesdiferentes, sendo elas:default, primary, success, info, warning, danger. Cada um dessesbotes so definidos pela sua classe, da seguinte forma:


39/42

Formulrios 34

Default

Primary

Success

Info

Warning

Danger

Link

Como podemos perceber no cdigo acima, os botes necessitam basicamente de duas classes. Aprimeira a padro btnque 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 grandebtn-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-grouppara isso, conforme o cdigo a seguir:

Left

Middle

Right


40/42

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 como seguinte cdigo:

Os cones podem ser usados em conjunto com o boto, bastando inclu-lo da seguinte forma:

Star

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

Arquivo

AbrirSalvar

Salvar como

Fechar


41/42

Formulrios 36

Inicialmente criamos uma divque possui a classe btn-group, que ir agrupar tanto o boto como texto quanto o dropdown que abre o menu com os itens. Repare que aps a palavra Arquivoinclumos um cone com a classecaretque uma seta para baixo.

O menu dropdown formado pelo conjunto de tagsul li

, seguido da classsedropdown-menu

. Oque faz o menu abrir com o clique do boto a propriedadedata-toggle="dropdown"do boto, queabre odropdown-menuinterno 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 uminpute uma classe ou boto. Os exemplos a seguir ilustram este processo, de forma que usamos a classeinput-grouppara unir um texto qualquer a uma caixa de texto.

@

.00

$

.00

O resultado deste cdigo visto na imagem a seguir.


42/42

Formulrios 37

Input Group

Caso deseje adicionar um boto um input group, faa da seguinte forma:

Ir!

Os exemplos deste captulo esto localizadosneste link.

https://github.com/danielps/livro-bootstrap/blob/master/exemplos/formularios.html
https://github.com/danielps/livro-bootstrap/blob/master/exemplos/formularios.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/formularios.html

livro-bootstrap.pdf

Documents