mmrosatab / EstudoBootstrap

Estudo Bootstrap e projetos do curso Bootstrap da Udemy

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

EstudoBootstrap

Estudo Bootstrap e projetos do curso de Bootstrap 4 da Udemy

Para utilizar o bootstrap

  • Declarar folha de estilo
  • boostrap.min.css
  • Declarar jquery e bundle
  • jquery.js
  • boostrap.bundle.min.js

Conhecendo classes do bootstrap

Classe container

A classe container apresenta propriedades que possibilitem uma largura fixa para cada tamanho de tela.

Classe container-fluid

A classe container-fluid apresenta propriedades para que a largura dos container ser expandida preencheendo toda a largura disponível.

Classes row e col

Cria linha e colunas

OBS: o sistema de grade é dividido em 12 partes, assim a soma dos itens deverá ser no máximo 12.

Ex: col-2 col-8 col-2

Classes row e col

Alie a col -,sm, md, lg e xl para que a largura das colunas se adapte ao tamanho do dispositivo.

col - : extra small sm: small lg: larger xl: extra large

Títulos

Classe display serve para aumentar o tamanho dos títulos.

Classe lead

Muda a tipografia do texto de uma div.

Tags(<>) mark,s,del, u, strong

Tags permitem destacar partes do texto.

s ou del: risca o texto u: sublinha o texto strong: deixa texto em negrito smal: reduz tamanho do texto em: deixa texto em itálico

Tratamento de imagens

Classe img-thumbnail adiciona borda em um imagem.

Classe img-thumbnail rounded adiciona borda levemente arredondada.

Classe float-left alinha imagem a esquerda. Classe float-right alinha imagem a direita.

Classe img-fluid deixa a imagem fluída.

Tratamento de tabelas

Classe table cria tabela

Classe striped colore linhas ta tabela de modo intercalado

Classe borderless retira bordas para tabela

Classe bordered coloca bordas em toda a tabela

Classe smal deixa tabela pequena

Classe table-hover destaca linha atual do mouse na tabela

Classe table dark inverte a cores da tabela

Classe thead-dark e thead-light colorem header da tabela

Classe table-active colore linhas do corpo da tabela de cinza. Classe table-primary e table-secundary colore linhas do corpo da tabela de azul. Outras cores: table-danger, table-warning, table-sucsses, table-info.

About

Estudo Bootstrap e projetos do curso Bootstrap da Udemy


Languages

Language:JavaScript 96.1%Language:HTML 3.9%