Hello, Bootstrap!

Anotações e aplicação do conteúdo estudado na Seção 7: Boostrap 4 & Design responsivo do Curso Desenvolvimento Web Completo 2022.

AULA 03 - FORMATAÇÃO DE TEXTOS

Cabeçalho 1

Cabeçalho 2

Cabeçalho 3

Cabeçalho 4

Cabeçalho 5

Cabeçalho 6

Display 1

Display 2

Display 3

Display 4

Texto Negrito

Texto Normal

Texto Itálico

Letras Maiúscula

Letras Minúscula

primeira maiúscula

Direita

Esquerda

Centralizado

Esse é um bloco de citação!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.

por Jamilton Damasceno

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

AULA 04 - ALINHAMENTO DE TEXTOS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum quam, a viverra ligula fringilla tempus. Ut tempor, dui eu semper aliquet, sem nisi pellentesque libero, suscipit porttitor risus magna vel lorem.

tela >= 576px

tela >= 768px

tela >= 992px

tela >= 1200px

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor 1
Lorem ipsum dolor 2

Lorem ipsum

Lorem ipsum dolor

AULA 05 - ELEMENTOS FLUTUANTES

Float Left

Float Right

Título do conteúdo fixo

tela >= 576px *

tela >= 768px *

tela >= 992px *

tela >= 1200px *

Item 1
Item 2
Item 3

Título do conteúdo

AULA 06 - CORES & BACKGROUNDS

Texto primary

Texto secondary

Texto success

Texto info

Texto warning

Texto danger

Texto light

Texto dark

Texto white

Texto black 50

Texto white

Link primary
Link secondary
Link success
Link info
Link warning
Link danger
Link light
Link dark
Link white

Background primary

Background secondary

Background success

Background info

Background warning

Background danger

Background light

Background dark

Background white

Background transparent

AULA 07 - MARGIN & PADDING

Margin

Conteúdo principal

Margin

Conteúdo principal

Margin

Padding

Conteúdo principal

Padding

AULA 08 - TAMANHOS & BORDAS

width 25%

width 50%

width 75%

width 100%

width auto

height 25%

height 50%

height 75%

height 100%

height auto

todas as bordas

borda superior

borda inferior

borda direita

borda esquerda

rounded

rounded top

rounded bottom

rounded right

rounded left

rounded circle

AULAS 09 E 10 - MEDIA QUERIES (ARQUIVO BREAKPOINTS.HTML)

AULA 11 - BOTÕES.

Botões

Padrão:

Exemplos de formatações específicas:

Botões com diferentes tags

Link

Botões com contorno

Tamanhos dos botões

Estados de botões

Grupos de botões - horizontal

Grupos de botões - vertical

Toolbar de botões

Botões dropdown

AULA 12 - INTRODUÇÃO: BARRA DE NAVEGAÇÃO.

Navegação simples / abas

Barra de navegação simples

AULA 13: BARRA DE NAVEGAÇÃO - PARTE 01

Barra de navegação com menu responsivo

AULA 14: BARRA DE NAVEGAÇÃO - PARTE 02

Barra de navegação com formulário

Barra de navegação com menu dropdown

Cores

Alinhamentos

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et libero id erat tristique fermentum placerat a erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ac lobortis quam. Nunc vestibulum tincidunt arcu, at scelerisque velit ornare et. Vestibulum ut malesuada nibh.

Lorem ipsum dolor sit amet

AULA 15: LISTAS

Meu item de lista 1
Meu item de lista 2
Meu item de lista 3
Meu item de lista 4

Meu item de lista 1
Meu item de lista 2
Meu item de lista 3
Meu item de lista 4

Lista normal
Lista primary
Lista secondary
Lista success
Lista info
Lista warning
Lista danger
Lista light
Lista dark

Meu item de lista 1
Meu item de lista 2
Caixa entrada 120
Rascunhos 5

AULA 16: FORMULÁRIOS

AULA 17: INPUT GROUP

Grupo prepend

Grupo append

@gmail.com

URL customizada

https://site.com/usuario/

Moeda

,00

Checkbox / radio

Múltiplos inputs

nome/e-mail

Pesquisas

AULA 18: ALERTAS & BARRA DE PROGRESSO.

Alertas

Primary você tem uma postagem pendente!

Secondary você tem uma postagem pendente!

Success Lorem ipsum dolorem

Danger Lorem ipsum dolorem

Warning Lorem ipsum dolorem

Info Lorem ipsum dolorem

Light Lorem ipsum dolorem

Dark Lorem ipsum dolorem

Alerta com botão fechar

Fechar Alerta com botão fechar

Alerta com mais conteúdos

Título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a metus in purus malesuada vulputate. Sed lacinia quam massa, eu consectetur tortor faucibus sed.

Barra de progresso

50%

40%

Altura

Listrado

70%

Animado

70%

Múltiplas barras

Painel Principal(20% de 30)

Fotos (30% de 30)

Configurações (15%)

AULAS 19 E 20: TABELAS E PAGINAÇÃO - PARTE 01.

Tabelas: table

#	Produto	Marca	Preço
00001	Iphone X	Apple	R$ 6.999
00002	Nexus 5	LG	R$ 999
00003	Notebook VAIO	Sony	R$ 1.999

Tabela escura: table-dark

#	Produto	Marca	Preço
00001	Iphone X	Apple	R$ 6.999
00002	Nexus 5	LG	R$ 999
00003	Notebook VAIO	Sony	R$ 1.999

Tabela com cabeçalho escuro: thead-dark

#	Produto	Marca	Preço
00001	Iphone X	Apple	R$ 6.999
00002	Nexus 5	LG	R$ 999
00003	Notebook VAIO	Sony	R$ 1.999

Tabela com formatações: table-striped, table-bordered, table-borderless

#	Produto	Marca	Preço
00001	Iphone X	Apple	R$ 6.999
00002	Nexus 5	LG	R$ 999
00003	Notebook VAIO	Sony	R$ 1.999

Classes contextuais: table-success, table-danger, table...

#	Produto	Marca	Preço
00001	Iphone X	Apple	R$ 6.999
00002	Nexus 5	LG	R$ 999
00003	Notebook VAIO	Sony	R$ 1.999

Tabela pequena: table-sm

#	Produto	Marca	Preço
00001	Iphone X	Apple	R$ 6.999
00002	Nexus 5	LG	R$ 999
00003	Notebook VAIO	Sony	R$ 1.999

Tabela responsiva: table-responsive

#	Produto	Marca	Preço
00001	Iphone X	Apple	R$ 6.999
00002	Nexus 5	LG	R$ 999
00003	Notebook VAIO	Sony	R$ 1.999

AULAS 19 E 20: TABELAS E PAGINAÇÃO - PARTE 02.

Paginação: pagination, page-item, page-link - active, disabled

Alinhamento: justify-content-ALINHAMENTO(center, end)

Tamanho: pagination-TAMANHO(sm, lg)

Setas

AULA 21 - CARDS (PARTE 01)

Cartão simples