Académique Documents
Professionnel Documents
Culture Documents
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.
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
Sérgio Barbosa
Componentes
Tipologia
default font-size global da Bootstrap é 14px
line-height de 1.428
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