Introdução ao framework Bootstrap 3

1. Noções gerais
Bootstrap 3

2. ● Bootstrap é o mais popular framework HTML, CSS, e JS para desenvolvimento de
projetos responsivos e focados para dispositivos móveis na web
● Desenvolvido por colaboradores do Twitter para padronização das aplicações
internas e disponibilizado como projeto open source em agosto de 2011
● Atualmente disponível na versão 3.3.6
● O alpha da versão 4 está disponível desde 19 de agosto de 2015
O que é Bootstrap

3. ● A versão 2 do framework possuia suporte para dispositivos móveis, disponibilizado
através de arquivos separados (e opcionais)
● A versão 3 foi inteiramente reescrita e todo o suporte a dispositivos móveis foi
integrado ao core do framework, que acabou adotando a abordagem “mobile first”
● Para garantir a renderização adequada utilize a meta tag viewport
Foco em dispositivos móveis

4. * dados do Google Trends
Popularidade

5. Conteúdo do framework

6. ● Normalização do CSS
● Content-box vs Border-box
● Melhoria na renderização dos principais elementos HTML com a possibilidade de
extensão através de classes
● Diversos componentes / classes utilitárias
● Semi-semântico
● Grid system
● Tema opcional
Diretório CSS

7. ● Opcional
● Plugins baseados em JQuery
● Possibilita o uso através de marcação com data-attributes
● Possibilita o uso programático através de API
● Disponibiliza eventos para cada ação executada pelos plugins
Diretório JS

8. ● Contém aproximadamente 250 ícones da família Glyphicon Halflings
● Disponível em diversos formatos para compatibilidade com os diversos browsers
● Porque utilizar uma fonte iconográfica?
Diretório Fonts

9. ● Media Types
● Media Queries
● Media Features
● Operadores: and, not, or e only
Responsividade

10. ● XS: < 768px
● SM: >= 768px (768-991px)
● MD: >= 992px (992-1199px)
● LG: > 1200px
Dispositivos

11. ● O que é um Grid System?
● Estrutura: Container / Linha / Coluna
● Calha
● Características:
● Foco em dispositivos móveis
● Aninhável
● Deslocável
● Reordenável
O que é Grid System

12. Grid System detalhado

13. Primary Success Info Warning Danger
Palheta de cores

14. ● Cor de texto
● text-muted
● text-*
● Cor de fundo
● bg-*
● Alinhamento de texto
● text-left
● text-right
● text-center
● text-justify
Classes utilitárias

15. ● Alinhamento de elementos
● pull-left
● pull-right
● center-block
● Visibilidade
● hidden
● show
● invisible
Classes utilitárias

16. ● Visibilidade contextual
● hidden-*
● visible-*-block
● visible-*-inline
● visible-*-inline-block
● Clearfix
Classes utilitárias

17. romulo.nf@gmail.com
Dúvidas?