Bootstrap: Componentes e Layouts

Programao para Web II
Unidade 2 Bootstrap
Prof. Henrique Santos
henrique@cotemig.com.br
Sumrio
Introduo
Responsive Design
Comeando a usar o Bootstrap
Alguns Componentes do Bootstrap
Formulrios
Carrossel de Slides
Modal
Consideraes Finais
Introduo
O que Bootstrap (BS)?
Framework para criao de interface web

o Gratuito, cdigo-aberto, e multi-navegador.
Utiliza de classes CSS e cdigos JS para

formatao fcil e rpida do front-end.
o Possui templates prontos para componentes
teis como Carrossel de Imagens,
Mensagens de Alertas, cones, etc.
Especializa em responsive design

o Foco para dispositivos mveis em primeiro
lugar (mobile first).
4
Histria do Bootstrap
Primeira verso lanada em 2011

o Criado por Mark Otto e Jacob Thornton para
ser usado internamente no Twitter.
Verso atual a 3.3.6

o Nova verso 4 deve ser lanada em breve
Atualmente bastante popular

o O projeto com mais estrelas do GitHub, com
mais 90 mil estrelas.
E 38 mil forks no GitHub.
Download e Ajuda
Ambos disponveis na pgina oficial:
http://getbootstrap.com/
Para ajuda basta clicar nas abas e

verificar/adaptar os cdigos de exemplo.
o Outros materiais para consulta esto listados
no final desses slides, caso necessite de
mais ajuda.
Responsive Design
Responsive Design
Responsive Design o conceito de

projetar sua interface para que ela se
adapte para diferentes dispositivos.
o A abordagem de uma interface para tudo
no apropriada atualmente.
Tamanhos de Telas de Dispositivos
Abordagem: Mobile First

Abordagem onde se preocupa primeiro com
o projeto da interface para dispositivos
mveis, e depois adaptar para as demais
plataformas.
10
Bootstrap e Responsive Design
O Bootstrap foi construdo sob os

conceitos de Responsive Design e
Mobile First.
o Isso feito atravs de uma Grade flexvel
que se adapta a tela do usurio.
o O framework recomenda sempre comear
pelo projeto Mobile primeiro.
o Veremos os recursos disso a medida que
so apresentados os elementos de
Bootstrap.
11
Comeando a usar
o Bootstrap
12
Incluindo o Bootstrap
Para adicionar Bootstrap na sua pgina

preciso colocar cdigos no <head>
(cdigo de ex. no prximo slide).
o Meta tag definindo o charset da pgina
(opcional, porm muito recomendado).
o Meta tag para setar o viewport
o Importar o arquivo CSS do Bootstrap
o Importar o arquivo JS do Bootstrap (opcional
se no usar recursos JS do framework)
Se for usar JS do Bootstrap, deve-se tambm

importar o jQuery 1.31 antes.
13
Incluindo o Bootstrap
<meta charset="iso-8859-1" /> 

<meta name="viewport"
content="width=device-width, initial-scale=1"/>

<link href="css/bootstrap.min.css"
rel="stylesheet" />

<script src="js/jquery.1.31.min.js"></script>

<script src="js/bootstrap.min.js"></script>
14
Containers
Este um dos principais componentes do

framework, usado no HTML com o
atributo class.
o Normalmente usando um <div>
Basicamente existem dois containers:

o container: uma rea de tamanho fixo (que
depende do dispositivo), com padding. o
container mais usado no geral.
o container-fluid: uma rea que ocupa toda
tela do dispositivo, sem padding.
15
Exemplo: Container
<body>
<div class="container">
<h1>Al Bootstrap!</h1>
<p>Texto de exemplo aqui.</p>
</div>
</body>
Veja o funcionamento no navegador, depois

troque a classe para container-fluid e veja
a diferena.
16
Grade do Bootstrap
Uma das grandes vantagens do
framework para responsive design seu
sistema de grade flexvel.
Todo container pode ser divido em linhas
(classe row), e estas linhas so divididas
em at 12 colunas (classes col-xx-yy)
o xx pode ser: xs, sm, md, lg

o yy poder ser qualquer nmero de 1 a 12.
Seus elementos podem ocupar quantas

colunas desejar (que no ultrapasse 12).
17
Grade do Bootstrap
Representao visual das 12 colunas
Exemplo de duas divs ocupando 5 e 7 cols.

<div class="col-sm-5">
18
Grade adaptvel ao Dispositivo
Existem 4 tipos de colunas que definem

diferentes tamanhos de dispositivos.
o Trata-se do xx no col-xx-yy.
Os 4 tipos so: xs, sm, md, lg.

Extra Sm.
Small
Medium
Large
col-xs-*
col-sm-*
col-md-*
col-lg-*
Dispositivo Fones
Tablets
Laptops
Desktops
Tela
< 768px
>=768px
>=992px
>=1200px
Container
Auto
750px
970px
1170px
Coluna
Auto
~62px
~81px
~97px
Classe
19
Exemplo de Grade
<div class="row">
<div class="col-xs-12 col-sm-6">
<p>Texto 1.</p>
</div>
<div class="col-xs-12 col-sm-6">
<p>Texto 2.</p>
</div>
</div>
</div>
Nesse exemplo, para dispositivos xs os

textos ficaro um embaixo do outro, para os
demais dispositivos um do lado do outro.
20
Exerccio I
Implemente uma pgina web (padro
HTML5) que tenha o seguinte
comportamento conforme a resoluo:
>=768 e <992px
<768px
>=992px
21
Deslocamento de Colunas (offset)
Se quiser que algum elemento pule

colunas use a classe col-xx-offset-yy.
o Onde xx o tamanho do dispositivo (xs, sm,
md, lg) e yy a quantidade de colunas.
Exemplo:
<div class=
"col-sm-4
col-sm-offset-2">
22
Colunas Aninhadas
Podemos subdividir colunas em outras

linhas e colunas.
o Ou seja, estamos aninhando colunas em
outras colunas.
o A linha interna, tambm possui 12 colunas.
<div class="row">
<div class="col-xs-9">
23
Alguns Componentes
do Bootstrap
24
Jumbotron
Jumbotron coloca uma nfase maior

sobre um contedo especial
o Por padro trata-se de uma caixa-cinza com
um texto grande, muito usado para logo e
ttulo de um site.
Comumente usado com div

ou header (se for o ttulo do site).
o Pode estar contido dentro de um container
(mas no obrigatrio).
25
Exemplo: Jumbotron
<header class="jumbotron">
<div class="row">
<div class="col-xs-12">
<h1> Meu Site: Ttulo </h1>
<p> Subttulo do site. </p>
</div>
</div>
</div>
</header>
Nesse cdigo o Jumbotron est fora do

container (mas seu contedo est dentro de
um container).
26
cones (Glyphicons, Glyphs)
Bootstrap possui 250 cones.

o getbootstrap.com/components/#glyphicons
Normalmente usamos a tag <span> e a

classe ser o nome do cone.
<a href="./config.html">
<span class="glyphicon glyphicon-cog"></span>
Configuraes </a>
<button type="button" class="btn">
<span class="glyphicon glyphicon-search">
</span> Buscar </button>
27
Imagens com Responsive Design

Adapte a imagem automaticamente ao
tamanho da tela, colocando a classe
img-responsive.
<img class="img-responsive"
src="./imagens/exemplo.png"
alt="Exemplo" />
Outros efeitos adicionais para imagens:

o Cantos-arrendondados: img-rounded
o Crculo: img-circle
o Miniatura: img-thumbnail
28
Navbar
Barra de navegao (menu) do site
No HTML5 usamos a tag <nav>
(no use <div> para navegao).
o Coloque tambm navbar-default ou

navbar-inverse para formatao/cores.
Dentro do <nav> coloque os links em

uma lista <ul> com as classes nav e
navbar-nav.
o Para o link ativo/atual coloque a classe
active no <li>.
o No necessrio usar row e col.
29
Exemplo: Navbar
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a> Home </a></li>
<li><a href="pag1.html">Menu 1</a></li>
<li><a href="pag2.html">Menu 2</a></li>
</ul>
</div>
</nav>
Troque a classe navbar-default para

navbar-inverse e veja a diferena.
Adicione a classe navbar-fixed-top em
<nav> para manter a barra fixada no
30
Navbar Ttulo
Para colocar um ttulo na barra de

navegao, criamos um <div> com a
classe navbar-header antes da lista de
links.
o E a classe navbar-brand no link do ttulo.
<nav class="navbar navbar-default">

<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand"
href="index.html">Nome do Site</a>
</div>
<ul class="nav navbar-nav">
...
31
Navbar Alinhamento a Direita
Use a classe navbar-right para alinhar

os items da barra a direita
o til para criar botes adicionais como Login
de Cadastre-se na barra.

<ul class="nav navbar-nav navbar-right">
<li> <a href="cad.html">
<span class="glyphicon glyphicon-user">
</span> Cadastre-se </a></li>
<li> <a href="log.html">
<span class="glyphicon glyphicon-log-in">
</span> Login </a></li>
</ul>
32
Exerccio II
Crie uma pgina usando o Bootstrap que
siga a seguinte estrutura.
navbar
jumbotron
Col 4 (md)
Col 4 (md)
Col 4 (md)
Rodap da pgina
33
Cores Contextuais
So classes do BootStrap para fornecer
um sentido atravs das cores.
As classes so: text-muted, text-primary,
text-success, text-info, text-warning, e
text-danger.
34
Cores de Fundo
Mesmo princpio das cores de texto
contextuais mas para o fundo
(bakground)
As classes so: bg-primary, bg-success,
bg-info, bg-warning, e bg-danger.
o Basicamente as
mesmas cores de
texto, exceto Muted.
35
Mensagens de Alertas
Muito til para sistemas web, porque
sempre precisamos alertar o usurio.
Classe alert adicionado a outra classe
contextual.
o alert-success, alert-info, alert-warning, e

alert-danger.
<div class="alert alert-success">
<strong>Successo.</strong> Cadastro
realizado com sucesso. </div>
<div class="alert alert-danger">
<strong>Erro.</strong> Problema no
Banco de Dados, contate o adm. </div>
36
Fechando Alertas
Para criar mensagens de alertas que
possam ser fechadas, crie um link dentro
do alerta com a classe close e o atributo
data-dismiss=alert
<div class="alert alert-danger">
<a class="close" data-dismiss="alert">
× </a>
<strong>Erro.</strong> Problema no Banco de
Dados, contate o adm. </div>
37
Formulrios
38
Formulrio
Formulrio deve usar a tag <form>

o No necessrio classe de formatao para
o formulrio padro. Mas se quiser existe as
opes de classe form-inline e
form-horizontal
Em bootstrap bom colocar tambm o

atributo role=form para acessibilidade
Se for usar algum campo password no
esquea de mudar o mtodo de envio
para post (perder ponto caso
contrrio).
39
Campos de Texto
Os campos de texto so <select>,

<textarea>, e alguns tipos de <input>
o Os inputs de: text, password, datetime,
datetime-local, date, month, time, week,
number, email, url, search, tel, e color.
o Coloque a classe form-control para
formatao dos campos de texto.
Crie <label> para o texto do campo e o

atributo for referindo-se ao nome/id.
Crie <div> com a classe form-group
para agrupar labels e campos.
40
Exemplo: Formulrio + Inputs

<form role="form" method="post" action="">
<div class="form-group">
<label for="txt_login"> Login: </label>
<input class="form-control" type="email"
name="txt_login" id="txt_login" />
</div>
<label for="psw_senha"> Senha: </label>
<input class="form-control" type="password"
name="psw_senha" id="psw_senha" />
</div>
<button type="submit" class="btn btn-default">
Entrar </button>
</form>
41
Ateno: Campos de Formulrio
obrigatrio criar o atributo name para os

campos de formulrios (exceto botes).
o Isso porque quando os dados forem
enviados, esse o nome para recuper-los.
o J que criamos name bom criar tambm
um id para usar com componentes JS.
o Para diminuir o texto dos exemplos nesse
material, os atributos name e id nem
sempre sero mostrados. Entretanto lembrese que name obrigatrio, e sua falta
ser penalizada em trabalhos e provas.
42
Botes
Recomendvel usar a tag <button>

sempre que possvel.
o Entretanto as classes de botes tambm
podem ser aplicadas para <a> e <input>.
Se usar <a> coloque o atributo role=button
Use a classe btn para botes

o Tambm adicione uma das classes de
formatao: btn-default, btn-link, btn-primary,
btn-success,btn-info,btn-warning, btn-danger
43
Exemplo: Botes

<button type="submit" class="btn btn-default">
Enviar </button>

<a class="btn btn-primary" role="button" href="#">
No Parece Link </a>

<input type="submit" class="btn btn-success" />
<input type="button" class="btn btn-info"
value="informao" />

<button class="btn btn-link">Parece Link</button>
44
Tamanho dos Campos / Botes
Tamanho vertical dos campos use as

classes input-lg e input-sm.
o Para botes use as classes:
btn-lg, btn-md, btn-sm e btn-xs
Para controlar o tamanho horizontal use

as classes de colunas e <div>
o Coloque a classe form-horizontal no <form>
o Coloque a classe control-label em <label>
o Para botes adicione a classe btn-block que
o boto ir ocupar toda <div> que foi colocada
45
Exemplo: Tamanho dos Campos

<form class="form-horizontal" role="form" method="post">
<label class="control-label col-md-1"> Login: </label>
<div class="col-md-4">
<input class="form-control" type="email"
name="txt_login" id="txt_login" />
</div> <span class="col-md-7"> </span>
</div>
<label class="control-label col-md-1"> Senha: </label>
<div class="col-md-4">
<input class="form-control" type="password"
name="psw_senha" id="psw_senha" />
</div> <span class="col-md-7"> </span>
</div>
<div class="col-md-3"> <button type="submit"
class="btn btn-primary btn-block">Entrar</button></div>
</form>
46
Agrupando Campos
O agrupamento de campos um recurso

do Bootstrap para adicionar texto ou
botes, antes ou depois de um campo
texto.
o Crie uma <div> com a classe input-group
o Crie <span> antes ou depois com a classe
input-group-addon.
Dentro do <span> coloque o texto ou

componente que ser agrupado ao <input>
principal
o O <input> principal no precisa de alterao.

47
Exemplo: Agrupando Campos

<label for="txt_preco"> Preo: </label>
<div class="input-group">
<span class="input-group-addon">R$</span>
<input type="number" class="form-control"
name="txt_preco" id="txt_preco" />
<span class="input-group-addon">,00</span>
</div>
</div>
48
Outros Campos de Formulrio
Existem outros campos de formulrios:

o Checkbox, Radio, Combobox, Listbox.
A criao desses componentes fica como

exerccio de fixao.
o Basta ir nos sites de ajuda do Bootstrap, ver
o cdigo de exemplo e adapt-lo para usar
no seu Site.
49
Carrossel de Slides
50
Carrossel de Slides
Para um carrossel simples (somente com

imagens e sem botes), basta seguir o
exemplo do prximo slide.
o O <div> principal tem que ter um id, as
classes carousel slide, e o atributo
data-ride=carousel
o A <div> interna controla os elementos do
carrossel, e tem a classe carousel-inner
o Cada imagem deve ser colocada dentro de
uma <div> com a classe item.
Uma <div> deve ter tambm a classe active

51
Exemplo: Carrossel de Imagens

<div id="crsPromo" class="carousel slide"
data-ride="carousel">

<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="imgs/nes.jpg" alt="Nintendo" />
</div>
<div class="item">
<img src="imgs/ms.jpg" alt="Master System" />
</div>
<div class="item">
<img src="imgs/atari.png" alt="Atari 7800" />
</div>
</div>
</div>
52
Carrosel com Imagens Responsive
Vamos aplicar o princpio de responsive

design nesse Carrosel de imagens.
o Em <img> coloque a classe img-responsive
Coloque tambm a classe center-block para

centralizar a imagem no carrossel.
o Se quiser fazer redimensionamento, use

style com os cdigos CSS (width, height, etc)
<img src="imgs/nes.jpg" alt="Nintendo"
class="img-responsive center-block"
style="max-height:200px" />
</div>
53
Carrosel: Botes de Dir. e Esq.
Para os botes de direita e esquerda no

carrossel, coloque o cdigo abaixo:
o O href deve referenciar o id do carrossel
o O <span> para criar um glyph
<a class="carousel-control left" href="#crsPromo"

role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left">
</span> </a>
<a class="carousel-control right" href="#crsPromo"
role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right">
</span> </a>
54
Carrossel: Indicadores
Colocar uma lista <ol> antes dos slides

de img, com a classe carouselindicators
o Cada <li> dessa lista presenta um slide do
carrossel (basta criar a quantidade certa).


<ol class="carousel-indicators">
<li data-target="#crsPromo" data-slide-to="0"
class="active"></li>
<li data-target="#crsPromo" data-slide-to="1"></li>
<li data-target="#crsPromo" data-slide-to="2"></li>
</ol>
55
Carrossel: Legendas nas Imagens
Dentro do slide do carrossel (abaixo da

img) crie uma <div> com a classe
carousel-caption.
o Dentro dessa <div> colocamos a legenda.

<img src="imgs/nes.jpg" alt="Nintendo"
class="img-responsive center-block" />
<div class="carousel-caption">
<h3>Nintendo (NES)</h3>
<p>Lanado mundialmente em 1985, teve
aproximadamente 62m de consoles vendidos.</p>
</div>
</div>
56
Modal
57
Modal (Dialog)
Modal uma janela de popup que
exibida por cima da pgina principal.
Em Bootstrap um modal comea com um
<div> com a classe modal fade, dentro
do <body>.
o Setar id do modal nessa <div> (importante)

o O contedo do modal no ser exibido na
pgina principal.
58
Exemplo: Modal
<div id="dlgEx" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">×</button>
<h4 class="modal-title">Ttulo da Janela</h4>
</div>
<div class="modal-body">
<p>Contedo do Modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
59
Chamando o Modal
A forma mais simples de chamar

colocando um cdigo em um link ou
boto
o Coloque o atributo data-toggle=modal para

indicar que o boto abre um modal
o Coloque o atributo data-target=#id com o
id do modal, para indicar a janela que ser
aberta.
<button
type="button" class="btn btn-info"
data-toggle="modal" data-target="#dlgEx">
Abrir Janela Dilogo
</button>
*Para link mude <button> por <a> e type por role
60
Consideraes Finais
61
Templates de Sites
Veja nesse link exemplos de templates de
uso de sites:
www.w3schools.com/bootstrap/bootstrap_te
mplates.asp
62
Materiais de Ajuda
Consulte os seguintes links para ajuda

com componentes Bootstrap
o getbootstrap.com/css/
o www.w3schools.com/bootstrap/default.asp
o globocom.github.io/bootstrap/javascript.html
63

Bootstrap: Componentes e Layouts

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap: Componentes e Layouts

Uploaded by

Copyright:

Available Formats

Programao para Web II

O que Bootstrap (BS)?

Framework para criao de interface web

Utiliza de classes CSS e cdigos JS para

Especializa em responsive design

Primeira verso lanada em 2011

Verso atual a 3.3.6

Atualmente bastante popular

E 38 mil forks no GitHub.

Para ajuda basta clicar nas abas e

Responsive Design o conceito de

Tamanhos de Telas de Dispositivos

Abordagem: Mobile First

Bootstrap e Responsive Design

O Bootstrap foi construdo sob os

Para adicionar Bootstrap na sua pgina

Se for usar JS do Bootstrap, deve-se tambm

Este um dos principais componentes do

Basicamente existem dois containers:

Veja o funcionamento no navegador, depois

o xx pode ser: xs, sm, md, lg

Seus elementos podem ocupar quantas

Exemplo de duas divs ocupando 5 e 7 cols.

Grade adaptvel ao Dispositivo

Existem 4 tipos de colunas que definem

Os 4 tipos so: xs, sm, md, lg.

Nesse exemplo, para dispositivos xs os

Deslocamento de Colunas (offset)

Se quiser que algum elemento pule

Podemos subdividir colunas em outras

Jumbotron coloca uma nfase maior

Comumente usado com div

Nesse cdigo o Jumbotron est fora do

cones (Glyphicons, Glyphs)

Bootstrap possui 250 cones.

Normalmente usamos a tag <span> e a

Imagens com Responsive Design

Outros efeitos adicionais para imagens:

o Coloque tambm navbar-default ou

Dentro do <nav> coloque os links em

Troque a classe navbar-default para

Para colocar um ttulo na barra de

<nav class="navbar navbar-default">

Navbar Alinhamento a Direita

Use a classe navbar-right para alinhar

o alert-success, alert-info, alert-warning, e

Formulrio deve usar a tag <form>

Em bootstrap bom colocar tambm o

Os campos de texto so <select>,

Crie <label> para o texto do campo e o

Exemplo: Formulrio + Inputs

Ateno: Campos de Formulrio

obrigatrio criar o atributo name para os

Recomendvel usar a tag <button>

Se usar <a> coloque o atributo role=button

Use a classe btn para botes

Tamanho dos Campos / Botes

Tamanho vertical dos campos use as

Para controlar o tamanho horizontal use

Exemplo: Tamanho dos Campos

O agrupamento de campos um recurso

Dentro do <span> coloque o texto ou