diff --git a/Dia 47 - Bootstrap/D47E1 - Inicial.html b/Dia 47 - Bootstrap/D47E1 - Inicial.html index bd1f741..d95bda7 100644 --- a/Dia 47 - Bootstrap/D47E1 - Inicial.html +++ b/Dia 47 - Bootstrap/D47E1 - Inicial.html @@ -13,10 +13,9 @@ body { margin: 0; padding: 0; - height: 100vh; display: grid; - grid-template-columns: 5fr 2fr; - grid-template-rows: 3fr 11fr 2fr; + grid-template-columns: 3fr 1fr; + grid-template-rows: 20vh 70vh 10vh; grid-template-areas: "header header" " main aside " diff --git a/_Bootstrap - Basico.txt b/_Bootstrap - Basico.txt index 6bdcae6..3467c32 100644 --- a/_Bootstrap - Basico.txt +++ b/_Bootstrap - Basico.txt @@ -6,3 +6,35 @@ Links 4.6 + +Outros: + + - O bootstrap por padrão trabalha com 12 colunas; + + +Classes de estrutura: + + container => cria uma grid; + row => cria uma linha; + col => cria uma coluna; + offset => cria um espaço em branco antes do elemento; + + OBS: col pode ter -X onde X é quantas colunas que ocupa o elemento; + + +Tamanhos (Breakpoints): + + Breakpoints juntamos as classes para definir media queries pra os elementos + + xs => extra small // > que 576 + sm => small // <= a 576 + md => medium // <= a 768 + lg => large // <= a 992 + xl => extra large // <= a 1200 + + EX: col-sm-2 => vai ocupar 2 colunas em tamanhos entre 576 até 767 + col-md-5 => vai ocupar 5 colunas em tamanhos entre 768 até 991 + + +Botões +