Você está na página 1de 33

Desenvolvimento de

Aplicações Multimídia
Bootstrap
Prof. Sérgio Barbosa
saabarbosa@gmail.com
Visão geral
 Introdução
 Por onde começar
 Componentes
 CSS
 JavaScript

Sérgio Barbosa
Introdução
 Bootstrap é o framework (HTML, CSS e JS)
mais popular para o desenvolvimento de
projetos responsivo na web.

 Bootstrap é totalmente gratuito para baixar e


usar!!
Sérgio Barbosa
Introdução

Sérgio Barbosa
O que? Como ? Onde ?
 Bootstrap é uma estrutura de front-end livre
para desenvolvimento web mais rápida e fácil
 Bootstrap inclui modelos de design baseado
em HTML e CSS para tipografia, formas,
botões, tabelas, navegação, modais,
carrosséis de imagem e muitos outros, bem
como plugins JavaScript opcionais
 Bootstrap também lhe dá a capacidade de
facilmente criar designs responsivos
Sérgio Barbosa
O que? Como ? Onde ?
 Bootstrap foi desenvolvido por Mark Otto e
Jacob Thornton no Twitter, e lançado como
um produto de fonte aberta em agosto de
2011 no GitHub.

Sérgio Barbosa
Por que usar Bootstrap?
 Fácil de usar
 Responsividade: CSS responsivo do
Bootstrap ajusta para celulares, tablets e
desktops
 Primeira abordagem Mobile
 Compatibilidade com navegadores

Sérgio Barbosa
Pré-requisitos
Antes de começar a estudar BOOSTRAP, você
deve ter um conhecimento básico de:
HTML

CSS

JavaScript

Sérgio Barbosa
Get Started

Sérgio Barbosa
Versão para baixar
Há duas versões do Bootstrap disponíveis para
download:
Versão de produção - Compilado CSS,
JavaScript e fontes.
Versão de desenvolvimento - Fontes
JavaScript e arquivos de fonte, juntamente com
os docs.

Sérgio Barbosa
Biblioteca
Se você não deseja fazer o download e
hospedar Bootstrap, você pode incluí-lo a partir
de um CDN (Content Delivery Network).

Sérgio Barbosa
Componentes
Grid System

As colunas são reorganizadas automaticamente


dependendo do tamanho da tela (permite até 12 colunas
ao longo da página)
Sérgio Barbosa
Componentes
Estrutura básica
• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)

Sérgio Barbosa
Componentes
Tipologia
default font-size global da Bootstrap é 14px

line-height de 1.428

Aplicada ao <body> e todos os parágrafos.

• As tags h1 ... h6 para


já vem formatados!

Sérgio Barbosa
Componentes
Table
A tabela básica Bootstrap tem um
preenchimento e apenas divisores horizontais.
A classe .table acrescenta estilo básico para
uma tabela:

Sérgio Barbosa
Componentes
Table
Classes: .table-striped, .table-bordered, .table-
hover, .table-condensed, .table-responsive

Sérgio Barbosa
Componentes
Images
Classes: .img-circle, .img-thumbnail, .img-
responsive

Sérgio Barbosa
Componentes
Jumbotron and Page Header

Sérgio Barbosa
Componentes
Alerts

Sérgio Barbosa
Componentes
Button

Sérgio Barbosa
Componentes
Button dropdowns

Sérgio Barbosa
Componentes
Dropdowns

Sérgio Barbosa
Componentes
Tabs com dropdowns menu

Sérgio Barbosa
Componentes
Navbar

Sérgio Barbosa
Componentes
Vertical (Default)
Fo
rm
s

Horizontal

Sérgio Barbosa
Componentes
Class=“form-inline”

Sérgio Barbosa
Componentes
Horizontal Form

Sérgio Barbosa
Componentes
Forms suporta controles:
 input
 textarea
 checkbox
 radio
 select

Sérgio Barbosa
Componentes
Atributos Form:
 input FOCUS
 DISABLED inputs e fieldsets
 READONLY inputs
 VALIDATION STATES
 ICONS
 HIDDEN labels
Exemplo: http://www.w3schools.com/bootstrap/tryit.asp?
filename=trybs_form_horizontal_all&stacked=h

Sérgio Barbosa
Componentes
Input Sizing em Forms:
 Height e Column Sizing

Sérgio Barbosa
Componentes
Carousel
 O plug-in Carousel é um componente js que
fornece o efeito de transição de elementos, como
um carrossel (slideshow).

Sérgio Barbosa
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h
Componentes
Modal
 O plug-in Modal é uma janela de caixa de
diálogo/pop-up que é exibida no topo da página
corrente.

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
Componentes
Modal