Você está na página 1de 63

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" /> <!-- charset -->
<!-- viewport -->
<meta name="viewport"
content="width=device-width, initial-scale=1"/>
<!-- Importando CSS -->
<link href="css/bootstrap.min.css"
rel="stylesheet" />
<!-- Importando jQuery 1.31 -->
<script src="js/jquery.1.31.min.js"></script>
<!-- Importando cdigos JS do Bootstrap -->
<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">

<div class="col-sm-7">

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="container">
<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">

<div class="col-sm-6">

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="col-sm-5">

<div class="col-sm-7">
<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="container">
<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.
<!--coloque depois do ul do navbar-->
<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">
&times; </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>
<div class="form-group">
<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 -->
<button type="submit" class="btn btn-default">
Enviar </button>
<!-- link formatado como boto -->
<a class="btn btn-primary" role="button" href="#">
No Parece Link </a>
<!-- input -->
<input type="submit" class="btn btn-success" />
<input type="button" class="btn btn-info"
value="informao" />
<!-- botao formatado como link -->
<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">
<div class="form-group">
<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>
<div class="form-group">
<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


<div class="form-group">
<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">
<!-- Slides de Imagens -->
<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)
<div class="item active">
<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).

<!-- Indicadores de slides -->


<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.

<div class="item active">


<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">&times;</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