Anotações e aplicação do conteúdo estudado na Seção 7: Boostrap 4 & Design responsivo do Curso Desenvolvimento Web Completo 2022.
Neste curso, é utilizado o Bootstrap-4 (atualmente, já foi lançada a versão 5).
Inicialmente, criar um arquivo index.html e colar o conteúdo do link disponível no conteúdo da aula (na aba Introdução).
Atributos no <head>:
- Required meta tags: são tags necessárias para o funcionamento do Bootstrap;
- <meta>: fornecem metadados estruturados sobre uma página da Web; fazem parte da seção principal de uma página da web.
- Atributo "name = viewport": é a área disponível e visualizável na interface;
- Content:
- devide-width: determina que o viewport ocupará a largura do dispositivo (a width será de acordo com o dispositivo - celular, tablet, pc, etc);
- initial-scale: define a escala (zoom) padrão. Quando gira a tela, por exemplo, o bootstrap se adapta, baseado nessa escala;
- shrink-to-fit: "encolher para caber", na aula configuramos como "no". Caso utilize esse atributo, ele encolherá o conteúdo para que caiba na visualização do site.
Configurando o bootstrap.css:
- O bootstrap.mim.css é um arquivo minified: é o mesmo arquivo de bootstrap.css, mas sem espaçamento, fazendo com que a execução seja a mesma, mas o arquivo torna-se menor. Geralmente essa versão é a mais utilizada, considerando que o carregamento é mais rápido;
- ao baixar o framework, é colocado um <link rel=> com um link que encaminha ao bootstrap cdn (uma fonte da internet para carregar o css); o professor orienta a trocar o href para o próprio bootsstrap que há dentro do arquivo - href="css/bootstrap.min.css. O problema é que, em caso de atualização, precisa baixar todos os arquivos novamente para atualizar.
- o atributo integrity são medidas de segurança para garantir que não houve alterações no arquivo CSS. Ele gera uma chave criptográfica, que é lida pelo browser. Caso tente recarregar o arquivo de outro lugar sem essa chave, não funcionará. Portanto, utiliza-se o "crossorigin", para que o browser saiba de onde está sendo carregado o arquivo. Na aula, como é carregado diretamente de dentro do site, o prof. remove esses atributos (integrity e crossover).
Optional JavaScript:
- são códigos Javascript que não são obrigatórios, podem ser removidos sem alterar o funcionamento do BS;
- o professor mantém, pois alguns dos recursos que ele ensina utilizam JS.
As classes podem ser aplicadas em diversos outros elementos e tags, como span, div, etc.
É possível também utilizar mais de uma classe por vez.
A) Display classes:
- dão maior destaque aos título;
- <h1 class="display-1"> - o texto recebe outra formatação, dando maior destaque;
- há classes de display de 1 a 4.
B) Parágrafo:
- <p class="lead"> - garante destaque ao parágrafo, mudando sua formatação.
C) Parágrafo Monospace:
- tem o mesmo espaçamento e largura para todas as letras (caracteres com mesma largura);
- aplicação: <p class="text-monospace">.
D) Classes de estilo:
- texto em negrito: <p class="font-weight-bold">;
- texto normal: <p class="font-weight-normal">;
- texto em itálico: <p class="font-italic">.
E) Transformação de textos:
- letras maiúsculas: <p class="text-uppercase"></p>;
- letras minúsculas: <p class="text-lowercase"></p>;
- primeira maiúscula: <p class="text-captalize"></p>.
F) Alinhamentos:
- à direita: <p class="text-right"></p>;
- à esquerda: <p class="text-left"></p>;
- centralizado: <p class="text-center"></p>.
G) Bloco de Citação:
- tag <blockquote> cria o bloco de citação, podendo também aplicar a class de mesmo nome;
- pode utilizar ainda a classe "blockquote-footer", que dá uma formatação especial ao bloco no rodapé;
- tag <cite> citação, para indicar um autor, por exemplo (deixa em itálico).
H) Truncate:
- classe utilizada para truncar ou cortar partes do texto;
- aplicar no <p>, por exemplo (<p class="text-truncate>) - ao expandir a tela, o texto vai aparecendo mais e, ao passar o mouse em cima, aparece o texto todo (apenas no safari).
I) Listas sem título:
- class="list-unstyled": remove o estilo da lista, sem marcadores;
- class="list-inline" (na lista) e "list-inline-item" (em cada um dos elementos dentro da lista).
A) A class="text-justify" justifica o texto.
B) Sufixos utilizados no Bootstrap:
- com o bootstrap, criamos layouts responsivos, que podem mudar muito de acordo com o dispositivo - torna os sites mais adaptivos, criando exibições independente do tamanho da tela;
- há sufixos que podemos utilizar para criar exibições diferentes de acordo com o dispositivo:
- SM: small (>= 576px);
- MD: medium (>= 768px);
- LG: large (>= 992px);
- XG: extra large (>= 1200px).
- ou seja: é possível definir alinhamentos específicos para diferentes telas;
- para aplicar os sufixos acima, utilizar class="text-sufixoDaTela-alinhamento".
C) Convertendo elementos de Block para Inline:
- class="bg-success": aplica uma cor de fundo (usado na aula apenas para mostrar o comportamento dos elementos block e inline), assim como a class="bg-warning";
- class="d-inline": transforma o elemento block em inline.
D) Convertendo elemento Inline em Block:
- class="d-block": transforma em Block.
E) Elemento Inline-Block:
- class="d-inline-block": converte o elemento para esse tipo híbrido;
- elemento inline não permite aplicar margem e padding superior, nem definir largura (já o block, permite a aplicação desses atributos);
- o inline-block, por sua vez, permite margem superior, padding e largura (como block), e mantém os elementos na mesma linha (como inline). Por isso [e chamado de híbrido.
A) Elementos flutuantes:
- class="float-left" ou "float-right";
- a div com elementos flutuantes não tem altura. Para corrigir, podemos utilizar o "clear:both" - já no bootstrap, aplicar no elemento pai (parent, que abriga a div flutuante) a class="clearfix".
B) Posicionamento fixo:
- class="fixed-top" ou "fixed-bottom".
C) Floats responsivos:
- class="float-tamanhoTela-direcao";
- apenas direções "left" e "right".
D) Colar no topo (sticky):
- class="sticky-top": "gruda" a lista no topo quando a mesma o atinge (quando o menu chega lá em cima da página).
A) Classes para formatação de textos:
- class="text-primary";
- class="text-secondary";
- class="text-success" - pode ser utilizado para exibição de mensagens de sucesso ao usuário;
- class="text-info";
- class="text-warning";
- class="text-danger";
- class="text-light";
- class="text-dark" - é a cor de texto padrão;
- class="text-white";
- class="text-black-50" - aplicada opacidade de 50% sobre a cor padrão;
- class="text-white-50" - também recebe opacidade sobre a cor branca, se tornando mais claro. Pode ser usado, por exemplo, para formatar textos que ficam sobre imagens.
B) Formatações de links:
- exatamente as mesmas classes acima.
C) Backgrounds:
- ao invés de "text", colocar "bg" nas mesmas classes acima.
- class="bg-primary";
- class="bg-secondary";
- class="bg-success";
- class="bg-info";
- class="bg-warning";
- class="bg-danger";
- class="bg-light";
- class="bg-dark";
- class="bg-white";
- class="bg-transparent".
A) Margin:
- Valor a definir, que vão de 0 até 5, sendo uma unidade de medida do CSS (REM);
- Abreviações:
- mt -> Margin Top
- mb -> Margin Bottom
- ml -> Margin Left
- mr -> Margin Right
- mx -> Margin no eixo x (horizontal) esquerda/direita
- my -> Margin no eixo y (vertical) top/bottom
- m -> Margin em todos os lados
B) Padding:
- aplicado da mesma maneira, apenas trocando o m por p;
- valor a definir (0 até 5)
- abreviações:
- pt -> Padding Top
- pb -> Padding Bottom
- pl -> Padding Left
- pr -> Padding Right
- px -> Padding no eixo x (horizontal) esquerda/direita
- py -> Padding no eixo y (vertical) top/bottom
- p -> Padding em todos os lados
A) Classes de largura:
- é possível usar classes do bootstrap para definir larguras por porcentagem;
- utilizar "w-%".
B) Classes de altura:
- também é definida em %;
- utilizar "h-%".
C) Bordas:
- há os atributos:
- border: todas as bordas
- border-top: borda superior
- border-bottom: borda inferior
- border-right: bordar direita
- border-left: borda esquerda
- possibilidades de cores de bordas:
- primary, secondary, success, info, warning, danger, light, dark, white;
- utilizar "border-cor".
D) Border radius:
- rounded - arredonda todos os lados;
- rounded-top - arredonda o topo;
- rounded-right - arredonda a direita;
- rounded-left - arredonda a esquerda;
- rounded-circle - converte em um círculo.
(Arquivo ../media-queries/index.html)
- utilizadas para fazer exibições diferentes baseado no tamanho do dispositivo = conceio de layout responsivo.
A) Tipos de mídias (Media types):
- all – todos os dispositivos;
- aural – sintetizadores de voz;
- braille – leitores de Braille;
- embossed – impressoras de Braille;
- handheld – dispositivos de mão (como celulares com telas pequenas);
- print – impressoras convencionais;
- projection – apresentações de slides;
- screen – monitores coloridas;
- tty – teleimpressores e terminais;
- tv – televisores.
B) Exemplos:
- de utilização: <link rel="stylesheet" media="print" href="print.css" />;
- de resoluções de telas:
- 320 pixels – Smartphones no modo retrato;
- 480 pixels – Smartphones no modo paisagem;
- 600 pixels – Tablets pequenos. Ex: Amazon Kindle (600×800);
- 768 pixels – Tablets maiores em modo retrato. Ex: iPad (768×1024);
- 1024 pixels – Tablets maiores em modo paisagem, monitores antigos;
- 1200 pixels – Monitores wide.
C) Links de media queries no Bootstrap.
D) Exemplos de utilização media queries: @media (min-width: tamanho da tela) {formatação a ser aplicada pra essa categoria}.
(Arquivo ../media-queries/index.html)
As definições de larguras mínimas para exibição do site são chamadas de breakpoint (pontos de quebra ou pontos de interrupção). Ou seja, nesses pontos são feitas as mudanças de layout (define formatações específicas para cada tipo de dispositivo).
No site do bootstrap há os valores padrão de width. São combinados valores de max e min width para definir intervalos de tamanhos de dispositivos.
A) Botões:
- a formatação padrão é: class="btn";
- formatação específicas: btn-primary, btn-secondary, btn-success, btn-info, btn-warning, btn-danger, btn-light, btn-dark, btn-link;
- utilizar a classe "btn" junto com a classe de formatação, ex: "btn btn-dark";
- é possível aplicar a formatação de botões em diferentes tags, como link, button, input (submit, reset, etc);
- para inserir contorno, utilizar class="btn btn-outline-formatação";
- há também diferentes opções de tamanho de botão: btn-lg, btn-sm, btn-block (botão bloco ocupa todo o espaçamento disponível);
- podemos controlar os estados do botão: active, disabled, alternar entre estados (incluir o atributo data-toggle="button").
B) Grupos de botões:
- horizontal: class="btn-group" na <div>;
- vertical: class="btn-group-vertical" na <div>;
- toolbar: class="btn-toolbar" na <div>;
- botões dropdown: na <div> externa, incluir class="dropdown-toggle" e data-toggle="dropdown". Em seguida, adicionar à <div> que agrupa os links class="dropdown-menu", e em cada um dos links, class="dropdown-item".
- obs: "dropdown-divider", quando aplicado em uma div entre os links, cria um divisor entre eles.
Disponibilizada a documentação oficial sobre Navs (Navegação) para consulta.
A) Navegação simples/abas:
- <ul class="nav"> -> os itens passam a ser exibidos inline;
- <li class="nav-item"> -> define que trata-se de um item da navegação;
- <a href="" class="nav-link"> -> insere o link na navegação;
- devem ser definidos os 3 parâmetros listados;
- as classes nav-item e nav-link determinam o espaçamento entre os itens;
- há também diferentes tipos de navegação:
- nav-pills -> no exemplo: <ul class="nav nav-pills"> e <a href="" class="nav-link active"> - usar para indicar qual a página ativa no momento;
- nav-tabs: navegação por abas -> no exemplo: <ul class="nav nav-tabs"> e <a href="" class="nav-link active">.
- podemos também alinhar a navegação: (por padrão, fica à esquerda)
- justify-content-center: <ul class="nav nav-tabs justify-content-center"> -> alinha o menu de navegação centralizado;
- justify-content-end: alinha a navegação à direita;
- flex-column: deixa a estrutura em colunas.
- há também a classe disabled, que inativa um link, mudando dua cor, indicando que está inativo para o usuário.
B) Barra de Navegação Simples:
- a class="navbar" cria uma barra de navegação; para isso, aplicar:
- <nav class="nav-bar">
- <ul class="navbar-nav">;
- <li class="nav-item"> e
- <a href="" class="nav-link">.
- entretando, inserindo apenas o descrito acima, a navegação ficará à direita e o logo, à esquerda. Portanto, inserir outra class: <nav class="navbar navbar-expand-tamanhodatela">, para adequar esse "espaçamento" ao dispositivo específico;
- class="navbar-brand": indica que o item é o logo da barra de navegação;
- é possível também utilizar backgrounds, utilizando duas classes:
- na <nav>, inserir: navbar-dark ou navbar-light;
- podemos aplicar também o bg dentro desta class.
A) Barra de navegação com menu responsivo:
- cria um menu hamburguer (estrutura que "esconde" o menu de navegação de um site e deixa a página mais “limpa”, usado especialmente em dispositivos com telas menores);
- criar um botão para o menu hamburguer, utilizando:
- <button class="navbar-toggler" data-toggle:"collapse" data-target="#nav-target">;
- <span class="navbar-toggler-icon">;
- criar uma div que englobe toda a ul, e inserir a class="collapse navbar-collapse" e o id="nav-target";
- portanto, devemos definir o data-toggle="collapse" e em seguida o data-target (item que queremos exibir ou ocultar quando o botão for clicado).
A) Barra de navegação com formulário:
- inserido dentro da <nav>, imediatamente antes do seu fechamento:
- <form class="form-inline">
- <input type="text" class="form-control" placeholder="pesquisar"> e
- < button class="btn btn-outline-success">
- caso coloque o formulário dentro da div que controla o menu hamburguer, ele também ficará oculto em telas menores, assim como a barra de navegação, no exemplo da aula anterior.
B) Barra de navegação com menu dropdown:
- são menus em que aparecem outras opções quando clicamos;
- definir:
- class="dropdown" no <li>;
- class="dropdown-toggled" e data-toggle="dropdown" no <a>;
- class="dropdown-menu" na <div>;
- class="dropdown-item" no <a> que fica dentro da div.
C) Cores:
- podem ser aplicadas as mesmas cores para bg (bg-primary, bg-secondary, bg-success, bg-info, bg-warning, bg-danger, bg-light, bg-dark) e navbar (dark e light), já estudadas anteriormente.
D) Alinhamentos:
- class="navbar fixed-top" -> fixa a barra de navegação no topo da página;
- class="navbar fixed-bottom" -> fixa a barra de navegação no fim da página;
- class="navbar sticky-top" -> após passar pela barra de navegação, ela é fixada.
A) Listas:
- aplicar class="list-group" na <ul> e class="list-item" nas <li>;
- a classe "active" deixa o item selecionado como "ativo".
B) Classe flush:
- <ul class="list-group list-group-flush">;
- a lista terá apenas bordas superior e inferior (não possui borda lateral e arredondamento no canto);
- a classe "active" deixa o item selecionado como "ativo".
C) Classes contextuais:
- inserir: class=list-group-item-opçãoescolhida;
- opções: primary, secondary, success, info, warning, danger, light, dark.
D) Badges:
- são muito comuns nos e-mails;
- classe: badge-opçãoescolhida;
- opções: primary, secondary, success, info, warning, danger, light, dark.
E) Breadcrumb:
-
usadas para identificar o local em que o usuário encontra-se no site;
-
aplicar:
- <ol class="breadcrumb">;
- <li class="breadcrumb-item"> e selecionar o item ativo incluindo "active" na class escolhida.
A) Elementos de texto (como label, input, email):
- <div> é utilizada para agrupar os elementos (como label e input), podendo ainda aplicar na div a class="form-group" para dar espaçamento.
- no <input> podemos usar a class="form-control", que da formatação na caixa de texto -> podemos usar essa classe tambem em selects e textareas;
- há também as opções sm e lg, que alteram o tamanho da caixa de texto (exemplo: "form-control-lg");
- o atributo "readonly" deixa o campo cinza e impede que o usuário clique;
- a classe "form-text" é a formatação padrão para textos dentro de um formulário.
B) Inputs tipo file:
- podemos utilizar a class="form-control-file" para selecionar um arquivo;
- temos outra opção, que é aplicar a class="custom-file" na div, na label a class="custom-file-label", e no input class="custom-file-input".
C) Range:
- no input, a class="custom-range" altera a formatação.
D) Button:
- classes btn, conforme já estudado em aulas anteriores.
E) Formulários inline:
- aplicasa a class="form-inline" na tag <form>.
F) Validação de formulário:
- a validação é feira via JS, e as classes são aplicadas a partir dela;
- classes: is-valid, is-invalid, invalid-feedback, valid-feedback.
A) Grupo prepend:
- o conteúdo é exibido antes da caixa de texto;
- <div class="input-group-prepend">, e na span usar class="input-group-text".
B) Grupo append:
- input vem primeiro, depois a div com o span (com @gmail.com);
- nesse caso, <div class="input-group-append">.
C) URL customizada:
- utiliza-se também o prepend, como no caso A.
D) Moeda:
- combinação do prepend para o cifrão, e o append para as casas decimais.
E) Ckeckbox / radio:
- input-group-prepend aplicada na div.
F) Múltiplos inputs:
- aplicam-se as mesmas funcionalidades acima; verificar que a formatação fica como "uma coisa só", com os cantos arredondados, apesar de serem múltimos inputs.
G) Pesquisas:
- também utiliza append.
A) Alertas:
- usados principalmente para envia mensagens aos usuários.
- class="alert" aplica espaçamento interno; se incluir outra classe, como class="alert alert-primary", adicionará cor;
- primary, secondary, success, danger, warning, info, light, dark.
B) Alerta com botão fechar:
- aplicar classe "alert-dismissible" na div;
- aplicar class="close" na tag button;
- adicionar o atributo data-dismiss="alert".
C) Alerta com mais conteúdos:
- adicionar os conteúdos e utilizar as mesmas classes explicadas anteriormente.
D) Barra de progresso:
- na div externa, aplicar a class="progress" (aplica o fundo cinza);
- na div interna, utilizar a class="progress-bar w-75" - lembrar de definir a largura, a qual indica a %;
- ao invés do w, pode usar diretamente style="width: 45%;" ou digitar diretamente a porcentagem entre a div de abertura e fechamento.
- observações:
- para alterar cores: na div interna, definir cor com bg-cor;
- para definir altura, definir style="height: 2px;" no lugar da width;
- listrada: aplicar classe "progress-bar-striped" na div interna;
- animado: adicionar classe "progress-bar-animated" na div interna.
E) Múltiplas barras:
- inserir várias divs internas para cada %.
- a tag <thead> agrupa os cabeçalhos da tabela.
- a tag <tbody> agrupa conteúdos da tabela.
- a tag <tfoot> define o rodapé da tabela.
Diferenciar o conteúdo do cabeçalho permite definir scrolls diferentes.
A) Tabelas:
- class="table" traz uma formatação específica para a tabela;
- table-cor define uma cor à tabela (como class="table-dark);
- podemos aplicar a class="thead-dark" para deixar apenas o cabeçalho escuro;
- table-striped deixa a tabela com cores alternadas;
- table-bordered: insere borda; (podemos combinar table-bordered e table-striped)
- é possível aplicar também as Classes contextuais (table-success, table-danger, etc);
- classe "table-sm" define uma configuração de trmano menor.
- classe "table-responsive:
B) Paginação:
- pode ser usada dentro da tabela;
- aplicação:
- <ul class="pagination">;
- <li class="page-item">
- <a href="" class="page-link">.
- classe "active" seleciona o número, como se o usuário estivasse naquela página, "disabled" desativa.
- classe "justify-content-alinhamento desejado" (center ou end, esquerda já vem como padrão);
- tamanho da tabela: utilizar a classe "position-tamanho", podendo ser sm ou lg;
- setas: « ; e » ; (l de left e r de right);
- a class="sr-only" quer dizer "screen reader only" - ou seja, o conteúdo nao aparecerá, apenas será lido em caso de uso de leitor de tela (como exemplo, o prof. insere as setas, e "oculta" a palavra "Próximo", sendo lido apenas por leitores de tela, para pessoas com deficiência visual, por exemplo).
É um recurso novo, adicionado na versão 4 do Bootstrap.
A) Para utilizar um card simples:
- <div class="card"> para definir o card.
- <div class="card-body"> no body do card.
- <h4 class="card-title"> define o título.
- <h6 class="card-subtitle"> para subtítulo.
- <p class="card-text"> para o texto.
B) para inserir imagem, <img class="card-img-bottom">;
- o prof. disponibiliza o site: https://unsplash.com/developers para gerar imagens randômicas, podendo inclusive informar o tamanho desejado, e posteriormente incluir no src da tag img.
- pode atribuir "top" ou "bottom" à imagem, que não define sua localização no card, e sim as configurações de bordas e arredondamentos.
C) para que o conteúdo do card fique sobre a imagem:
- utilizar <img class="card-img">, e
- no lugar de <div class="card-body">, inserir - <div class="card-img-overlay"> no body do card;
- na <div class="card">, é possível atribuir também classes como "text-white".
D) inserindo cabeçalho:
- incluir uma div para cabeçalho, antes da div do body do card;
- atribuir class="card-header".
E) rodapé:
- abaixo do card body, incluir uma div com class="card-footer";
- podemos inclusive alinhar o texto com class "right", "left" e "center".
F) cartão com navegação:
- <ul class="nav nav-tabs card-header-tabs">;
- card-header-tabs garante configurações específicas para cabeçalho.
- <li class="nav-item">;
- <a class="nav-link active" href="">;
- podemos aplicar "disabled" ou "active".
A) Cartão com cores de fundo:
- para aplicar cor de fundo, usar a class "bg-cor", já estudada anteriormente, na div que define o card.
B) Inserindo bordas:
- "border-cor" na div que define o card.
C) Cartão com colunas:
- criar uma div, onde serão inseridos os cards, e atribuir a class="card-columns".
Jumbotron é uma classe que permite definir uma área de destaque no site.
A) Jumbotron: class="jumbotron" na div externa.
B) Alinhamento de imagens:
- class="media", e class="media-body" -> alinha a imagem ao lado do título do conteúdo;
- alinhamentos: align-self-ALINHAMENTO (start, center, end).
- start alinha no topo;
- center alinha no centro da mídia;
- end alinha ao final do media-body.
C) Listas com imagens:
- ul: class="list-unstyled";
- li: class="media";
- img: aplicar alinhamento e espaçamento desejados;
- div após img: class="media-body".
Arquivo font-awesome.html.
Acessar o link: https://getbootstrap.com/docs/4.0/extend/icons/ (Documentação Oficial Bootstrap > Extend > Icons).
Os ícones se comportam como letras: permitem alterar cores e tavanhos, por exemplo.
Na aula, são utilizados Iconic, que estava fora do ar quando iniciei a aula, e Font Awesome.
Fazer download das versões de cada um dos links. É possível também copiar o link e utiizá-lo, sem a necessidade de fazer download.
A) Iconic:
- pode ser usado como link (atributo da tag img);
- inserir no HTML:
- <link href="iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">;
- escolher um ícone -> usar basicamente a class="oi oi-nomeDoIcone";
- definições: podemos alterar tamanho e cor;
- podem ser aplicados em span, tag i, etc.
B) Font Awesome:
- usa basicamente a mesma estrutura;
- inserir no HTML:
- <link href="link rel="stylesheet" href="fontawesome/css/all.css">.
O Sistema de Grid permite definir as áreas que um determinado conteúdo ocupa.
O Sistema utiliza um total de 12 grids - dentro de uma determinada área, podemos criar os layouts (ex: criar uma área que ocupe um número específico de grids).
São 12 colunas, que definem as larguras máximas que podemos utilizar. Há também 12 colunas dentro da área disponível para montagem do layout.
A estrutura das grids é esquematizada nas três imagens localizadas na pasta "imagens-grid-aula 25".
É disponibilizado também o conteúdo da Documentação de Sistema grid no site do Bootstrap.
Nos parâmetros de grid, há cinco "breakpoints", que definem como será a exibição para um determinado tamanho de dispositivo. Devemos criar um container para aplicar essas classes (extra small, small, medium, large e extra large).
O conteúdo da aula foi desenvolvido no arquivo grid.html.
No Bootstrap, quando utilizamos uma "class=row", criamos um flex container.
Tamanhos de dispositivos:
- extra small: classe col-numeroDeColunas;
- small: classe col-sm-numeroDeColunas;
- medium: classe col-md-numeroDeColunas;
- large: classe col-lg-numeroDeColunas;
- extra large: classe col-xl-numeroDeColunas.
Por mais que aumente o tamanho do container, ele permanece ocupando a proporção determinada.
Podemos definir, por exemplo, o grid para um dispositivo medium. Todod os dispositivos maiores que ele seguirão a mesma configuração (duas colunas lado a lado, por exemplo). Dispositivos menores, nesse caso, colocarão os conteúdos um abaixo do outro (coluna).
O conteúdo da aula foi desenvolvido no arquivo grid.html.
O container é usado para abrigar todos os conteúdos. Há dois tipos de container:
- aquele que centraliza o conteúdo (class="container");
- um container fluido, que preenche toda a área de conteúdos (class="container-fluid"). A row, por sua vez, ocupa todo o espaço delimitado pelo container. Dentro dela é que utilizamos o sistema de grid com 12 colunas.
A) Largura fixa:
- apenas escrever a classe "col", de coluna, cria uma largura fixa para todas as divs.
B) Largura automática (auto-layout):
- podemos definir uma largura específica (como col-4) para cada uma das divs.
- o problema é que não se ajusta de acordo com o dispositivo.
- ao definir apenas algumas das larguras, as demais divs ocuparão o espaço excedente.
C) Largura igual empilhada:
- definir o tamanho do dispositivo (como col-sm).
- ao reduzir o tamanho do dispositivo, empilhará as divs (é responsivo até ddeterminado tamanho, depois empilha).
D) Ordenado:
- para ordenar, usar a class="order-numero".
- colocar esse número em ordem crescente, da maior (1) pra menor prioridade.
E) Offset:
- são espaçamentos entre os elementos.
- class="offset-tamanhoDispositivo-espaçamento";
- o espaçamento insetido na classe acima indica quando espaços irá "pular".
- podemos também utilizar offset para múltiplos alinhamentos.
G) Aninhamento:
- é possível colocar uma row dentro da outra (aninhamento);
- cada row define um grio de 12 colunas; cada vez que cria uma nova row, pode utilizar um novo grid de 12 colunas.
O conteúdo da aula foi desenvolvido no arquivo grid.html.
Ao criar a row, cria-se um flex container automaticamente, e os flex itens ficam em seu interior.
A) Alinhamento vertical:
- aplica os alinhamentos no flex-items;
- class="align-items-ALINHAMENTO", sendo as opções: start, center, end.
B) Alinhamento vertical individual:
- aplicar alinhamentos diretamente nos flex-items;
- class="align-self-ALINHAMENTO", sendo as opções: start, center, end.
C) Alinhamento horizontal nas colunas:
- aplicar o alinhamento diretamente no flex container;
- class="justify-content-ALINHAMENTO", sendo as opções: start, center, end.
D) Distribuição:
- aplicado no flex container;
- distribui espaçamento entre os itens;
- class="justify-content-ALINHAMENTO", sendo as opções: around, between, end.
E) Removendo espaçamento:
- class="no-gutters".
O conteúdo da aula foi desenvolvido no arquivo grid.html.
Usando flexbox sem aplicar row.
A) Flex container e flex itens (d-flex, flex-row, flex-column, flex-row-reverse):
- podemos não utilizar a classe row, apenas utilizar a class="d-flex";
- podemos também definir a direção: flex-row, flex-column, flex-row-reverse.
B) Alinhamento horizontal: justify-content-ALINHAMENTO (start, center, end, around e between).
C) Colunas (d-flex, flex-column, flex-column-reverse).
D) Alinhamento vertical: align-items-ALINHAMENTO (start, center, end, baseline e stretch).
E) Alinhamento self: align-self-ALINHAMENTO (start, center, end, baseline e stretch.
A) Margin right/left auto (mr-auto, ml-auto).
B) Margin bottom/top auto (mb-auto, mt-auto).
C) Wrap (flex-wrap, flex-nowrap).
- nowrap = um item ao lado do outro; se não couber, aparece a barra de rolagem (é o padrão).
- flex-wrap = quebra os itens para a próxima linha.