Bootstrap 4

Cleitom José Richter

cleitom.richter@iffarroupilha.edu.br
O que é Bootstrap?

o Bootstrap é, resumidamente, um grande arquivo CSS

com uma excelente documentação (diga-se de passagem)
e que possui dezenas e dezenas de componentes
prontos.

Primeira curiosidade: em suas versões alpha e beta, o

Bootstrap 4 considerava-se um framework. Já na sua
versão final, o termo escolhido mudou para biblioteca.

2
Como utilizar Bootstrap?

Todos as orientações para utilizar estão disponíveis em

https://getbootstrap.com/.

1. Download manual
2. Download via gerenciador de pacotes
3. Inclusão via CDN

3
Como utilizar Bootstrap?

1. Download manual

4
Como utilizar Bootstrap?

1. Download manual
Eu organizo as pastas
dos sites assim

5
Diretórios
CSS
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
Arquivos de folha de estilo do padrão Bootstrap.
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css

JS
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map

Arquivos de JavaScript com os plugins do Bootstrap.

│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

6
Diretórios
.map
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
Arquivos de mapa de código pré-processado no código fonte.
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map Mantenha o código do lado do cliente legível e depurável mesmo depois
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
de combinar, minificar ou compilar. Use mapas de origem para mapear
│ ├── bootstrap.css seu código-fonte no código compilado.
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

7
Diretórios
.min.
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
Arquivos com este sufixo são arquivos minificados ou compilados.
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

8
Diretórios
bootstrap-grid.css
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
Este arquivo contém as folhas de estilos do sistema de grade e
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map utilitários flexíveis do Bootstrap.
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

9
Diretórios
bootstrap-reboot.css
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
Este arquivo contém as folhas de estilos de re-inicialização ou
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map normalização de muitos elementos HTML.
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

10
Diretórios
bootstrap.css
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
Este arquivo contém todas as folhas de estilos do Bootstrap, o que
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map inclui o Sistema de Grade, Normalização e Componentes.
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

11
Diretórios
bootstrap.bundle.js
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
Este arquivo contém todos os scripts dos plugins do Bootstrap e a
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map biblioteca Popper.js.
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map OBS: Este arquivo não contém o jQuery.
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

12
Diretórios
bootstrap/
├── css/
bootstrap.js
Este arquivo contém apenas os scripts dos plugins do Bootstrap.
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

13
Como utilizar Bootstrap?

1. Download manual

14
Como utilizar Bootstrap?

1. Download manual Ainda falta o

jQuery

15
Como utilizar Bootstrap?
1. Download manual Ainda falta o jQuery

16
Como utilizar Bootstrap?

1. Download manual

17
Como utilizar Bootstrap?

2. Download via gerenciador de

pacotes

Primeiro instala o Node JS

18
Como utilizar Bootstrap?

2. Download via gerenciador de

pacotes Não vai ter o jQuery..
Tem que baixar
manualmente

19
Como utilizar Bootstrap?

2. Download via gerenciador de

pacotes

Daí é só
vincular os
arquivos css
e js no site
Link e script

20
Como utilizar Bootstrap?

2. Inclusão via CDN (Content Delivery Network)

21
Como utilizar Bootstrap?
2. Inclusão via CDN (Content Delivery Network)

22
Containers
Contêineres
Os contêineres são o elemento de layout
mais básico do Bootstrap e são necessários
ao usar nosso sistema de grade padrão.

24
Contêiner de Largura Fixa
Responsivo

25
Contêiner de Largura Fluido

26
Mobile First
Móvel Primeiro
Mobile First é um conceito aplicado onde o
foco inicial do desenvolvimento é direcionado
aos dispositivos móveis.

28
Responsive breakpoints
O CSS é focado por padrão na largura máxima de 576 pixels e o bootstrap se refere a esse tamanho
com a sigla xs. (extra small)
Acima desse tamanho temos a largura mínima de 576 pixels nomeada sm. (small)
Após o tamanho sm temos a largura mínima de 768 pixels nomeada md. (medium)
Depois de sm temos a largura mínima de 992 pixels nomeada lg. (large)
Por fim temos a largura mínima de 1200 pixels nomeada xl. (extra large)

29
Grid System
Sistema de Grade
O sistema de grade do Bootstrap divide a
tela em 12 colunas e 5 camadas. Isso faz com
que tenhamos de forma prática e poderosa
uma ferramenta de criação de telas
responsivas.

31
32
33
34
35