Apresentação - Introdução Ao Boostrap

INTRODUÇÃO AO BOOSTRAP
TATIANA SILVA DE ALENCAR

Framework para
desenvolvimento front-end;
HTML + CSS + JavaScript
O QUE É O (JQuery);
BOOTSTRAP? Inicialização de projetos
(bootstrap);
Código aberto.
 Mark e Jacob do Twitter criaram, em 2010,
o Twitter Bootstrap;
 Agora: Bootstrap (only!);
UM POUCO  Timeline:
DE HISTÓRIA  V1: 2011

 V2: 2012 (web design responsivo);
 V3: 2013 (mobile-first design);
 V4: 2015 (vesrão alpha);
 V4: 2017 (versão beta).
DOWNLOAD
 Download: http://getbootstrap.com/docs/3.3/getting-started/#download
 Referência aos arquivos Bootstrap:

 Na tag meta:
 <link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 Ao final do documento, antes de fechar a tag body:

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
USO DO BOOTSTRAP
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<title>Example Bootstrap</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/cs
s/bootstrap.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-
3.3.1.slim.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boo
tstrap.min.js"></script>
</body>
</html>
CORES
CORES/ESTADOS
SISTEMA DE GRIDS
SISTEMA DE GRIDS
 Divide a página
em 12 colunas:
estrutura que
define um espaço
vertical e horizon-
tal.
 Definir linhas
(row) para não
ter colisão no
layout.
SISTEMA DE GRIDS - ROW
<div class="container">
<div class="row">
</div>
</div>
SISTEMA DE GRIDS – EXEMPLO DE LAYOUT
12 colunas
3 colunas 9 colunas
logotipo navbar
10 colunas 2 colunas
article aside
12 colunas - footer
SISTEMA DE GRIDS - GUTTER
Gutter: espaçamento padrão entre elementos
12 colunas
3 colunas 9 colunas
logotipo navbar
10 colunas 2 colunas
article aside
12 colunas - footer
SISTEMA DE GRIDS - DISPOSITIVOS
col-md col-sm
col-xs
col-lg
CONTAINER
 Fixo:
 <div class=“container”></div>
 Fluido:
 <div class=“container-fluid”></div>
EXEMPLO – CONTAINER FIXO
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">Teste1</div>
</div>
</div>
EXEMPLO – CONTAINER FLUIDO
<div class="container-fluid">
<div class="row">
</div>
</div>
TIPOGRAFIA
TIPOGRAFIA
 Cabeçalhos:
 <h1>h1 - 36px</h1>
 <h2>h2 - 30px</h2>
 <h3>h3 - 24px</h3>
 <h4>h4 - 18px</h4>
 <h5>h5 - 14px</h5>
 <h6>h6 - 12px</h6>
TIPOGRAFIA
 Alinhamento do texto:
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

<p class="text-left">Texto alinhado à esquerda</p>
<p class="text-center">Texto alinhado ao centro</p>
<p class="text-right">Texto alinhado à direita</p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum</p>
<p class="text-nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
TIPOGRAFIA
 Alinhamento do texto:
TIPOGRAFIA
 Tamanho do texto:
 <p class="text-lowercase">TEXTO EM LETRAS MINÚSCULAS</p>
 <p class="text-uppercase">texto em letras maiúsculas</p>
 <p class="text-capitalize">primeira letra em caixa alta</p>
TABELAS
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
<th>Pizza</th>
<th>Descrição</th>
<th>Preço</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mussarela</td>
<td>Mussarela, tomate, azeitona e orégano</td>
<td>R$ 15,00</td>
</tr>
<tr>
<td>Calabresa</td>
<td>Calabresa, tomate, azeitona e orégano</td>
<td>R$ 15,00</td>
</tr>
</tbody>
</table>
FORMULÁRIOS
FORM.CONTROL
 width: 100%
<form>
<input type="text" class="form-control"/>
<input type="text"/>
</form>
FORM.CONTROL
<form>
<select class="form-control">
<option>teste</option>
</select>
<textarea class="form-control" cols="30"
rows="10"></textarea>
</form>
FORM.INLINE
 width: auto
 display: inline block
<form class="form-inline">
</select>
</form>
LARGURA DOS ELEMENTOS
<form class="form-horizontal">
<div class="col-md-4">
</div>
<div class="col-md-8">
</select>
</div>
</form>
DIFERENTES TAMANHOS DE INPUT

<input type="text" class="form-control input-sm"/>
<input type="text" class="form-control input-lg"/>
BOTÕES
.BTN .BTN.GROUP
<div class="btn-group">
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
</div>
DROPDOWN
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Abrir
</button>
<ul class="dropdown-menu">
<li><a href="#">Ação</a></li>
<li role="separator" class="divider"></li>
</ul>
</div>
CLASSES AUXILIARES
IMAGENS
 <img src="img/bootstrap-stack.png" class="img-responsive"

alt="logo Bootstrap">
 <img src="img/bootstrap-stack.png" class="center-block"
 <img src="img/bootstrap-stack.png" class="img-rounded"
 <img src="img/bootstrap-stack.png" class="img-circle"
 <img src="img/bootstrap-stack.png" class="img-thumbnail"
 <img src="img/bootstrap-stack.png" class="img-responsive
center-block img-rounded" alt="logo Bootstrap">
HIDDEN
<div class="hidden">Esconde</div>
<div class="hidden-xs">Esconde</div>
<div class="hidden-sm">Esconde</div>
<div class="hidden-md">Esconde</div>
<div class="hidden-lg">Esconde</div>
VISIBLE
<div class="visible-xs">Mobile</div>
<div class="visible-sm">Tablet</div>
<div class="visible-md">Monitor médio</div>
<div class="visible-lg">Monitor grande</div>
VISIBLE
<div class="visible-xs">Mobile</div>
<div class="visible-sm">Tablet</div>
<div class="visible-md">Monitor médio</div>
<div class="visible-lg">Monitor grande</div>
BACKGROUND
<div class="bg-primary">fundo</div>
<div class="bg-info">fundo</div>
<div class="bg-warning">fundo</div>
<div class="bg-success">fundo</div>
<div class="bg-danger">fundo</div>
DOCUMENTAÇÃO
 Componentes: https://getbootstrap.com/docs/3.3/components/
 Customização: https://getbootstrap.com/docs/3.3/customize/
TAREFA
 Usar o Bootstrap, consultando a documentação, para criar o site da pizzaria.

 Aplicar diretivas de acessibilidade da WCAG.
HOME PAGE – DISPLAYS GRANDES
CARDÁPIO – DISPLAYS GRANDES
PEDIDO – DISPLAYS GRANDES
HOME PAGE – DISPLAYS MÉDIOS
CARDÁPIO – DISPLAYS MÉDIOS
PEDIDO – DISPLAYS MÉDIOS

Apresentação - Introdução Ao Boostrap

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apresentação - Introdução Ao Boostrap

Enviado por

Direitos autorais:

Formatos disponíveis

INTRODUÇÃO AO BOOSTRAP

TATIANA SILVA DE ALENCAR

DE HISTÓRIA  V1: 2011

 Referência aos arquivos Bootstrap:

 Ao final do documento, antes de fechar a tag body:

Gutter: espaçamento padrão entre elementos

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

<input type="text" class="form-control"/>

 <img src="img/bootstrap-stack.png" class="img-responsive"

 Usar o Bootstrap, consultando a documentação, para criar o site da pizzaria.

Você também pode gostar