Na palestra anterior,
aprendemos sobre design responsivo.
Também mencionamos brevemente que o sistema de grade Bootstrap é
projetado para suportar sites responsivos.
Como a grade Bootstraps suporta isso?
E o que exatamente a grade Bootstrap envolve,
que nos permite projetar sites responsivos?
Vamos falar um pouco mais de detalhes sobre o sistema de grade Bootstrap
e como ele suporta a capacidade de resposta em seguida.
Vimos o uso da meta tag viewport na lição anterior,
quando fizemos o exercício inicial sobre a configuração do Bootstrap em nossa página index.html.
Referi-me, então, brevemente, a esta linha específica do código.
Vamos tentar entender por que usamos isso em nossa página index.html.
O que estamos especificando aqui é que,
quando nossa página da web está sendo processada pelo navegador em um determinado dispositivo, então,
sua renderização no navegador levará em consideração o tamanho da tela e
adaptará automaticamente a renderização da página à largura da tela dos dispositivos.
Dessa forma, então temos classes responsivas,
classes CSS embutidas em nossa estrutura de interface do usuário, em
seguida, que irá garantir que a nossa página web é
corretamente processado para esse tamanho de tela particular.
É aqui que o sistema de grade Bootstrap vem em nosso resgate e
nos permite projetar sites responsivos.
Então, novamente, enfatizando este ponto,
grade Bootstrap é projetado para ser responsivo.
Você já viu o que isso significa na palestra anterior,
e móvel primeiro, que já discutimos na palestra anterior e depois fluido,
adaptando-se automaticamente à largura da tela.
A grade Bootstrap aproveita o layout de flexbox CSS.
O layout CSS flexbox, que está sendo suportado
pelas versões mais recentes dos vários navegadores,
permite opções de layout muito mais simples e flexíveis em CSS.
Agora, a discussão real de
como o layout CSS flexbox funciona está além do escopo deste curso,
vamos nos restringir a como CSS flexbox está sendo
aproveitado pelo Bootstrap para seu sistema de grade.
Anteriormente Bootstrap tinha seu próprio sistema de grade que era anterior ao layout CSS flexbox,
mas a versão mais recente do Bootstrap
fez o layout CSS flexbox como o padrão para a grade Bootstrap.
Este layout flexbox pode facilmente lidar com
conteúdo dinâmico e pode adaptar os contêineres ao conteúdo dinâmico,
e também pode facilmente se adaptar ao tamanho desconhecido
do conteúdo real fechado dentro dos contêineres.
O layout flexbox também suporta layout independente de direção.
O que o layout flexbox traz para as grades Bootstrap é a capacidade de
fazer um alinhamento vertical fácil do conteúdo dentro de um elemento pai.
Veremos o uso disso no exercício que se segue.
Além disso, ele permite fácil reordenação do conteúdo
em diferentes dispositivos e resoluções de tela com a ajuda de consultas de mídia. Mais uma
vez, veremos um pouco disso no exercício sobre como o Bootstrap
aproveita isso para apoiar maneiras interessantes de colocar conteúdo para fora.
Além disso, esse conteúdo em si,
os contêineres de conteúdo também podem ser projetados para ser colunas de altura igual para que
o contêiner de conteúdo com
a maior altura determine a altura de todos os contêineres restantes que estão dispostos na mesma linha.
Vamos agora falar um pouco mais de detalhes sobre a grade Bootstrap e como ela realmente funciona.
A forma como a grade Bootstrap funciona,
é aplicando um contêiner mais à camada mais externa.
Podemos usar uma div para
definir o elemento para o qual aplicamos a classe recipiente em geral.
O recipiente é a unidade mais externa dentro da qual o conteúdo real é colocado para fora.
Bootstrap suporta tanto a classe contêiner que é um layout de largura fixa,
o que significa que o próprio conteúdo é restrito a uma largura fixa na tela.
Esta classe de contêiner permite que essa largura fixa se adapte automaticamente
ao tamanho da tela usando consultas de mídia para que
é onde o design responsivo entra em nosso resgate.
Mais tarde, veremos como este contêiner se ajustará a diferentes tamanhos de tela.
Agora, também temos a flexibilidade de usar em
outro fluido de contêiner clássico que permite que
o recipiente se adapte automaticamente ao tamanho da tela.
Mas o recipiente de largura fixa,
corrige o tamanho da largura de layout real.
Dentro do recipiente, o conteúdo será colocado para fora na forma de linhas,
então normalmente o que nós faria é dentro
e fora de div para o qual aplicamos a classe container,
nós vamos incluir um div interno para o qual vamos aplicar a classe linha.
Assim, o conteúdo em si será dividido verticalmente em várias linhas.
E uma vez que isso é dividido em linhas, dentro de cada linha,
você pode então layout do conteúdo usando colunas.
Assim, cada linha em Bootstrap,
será dividido em 12 colunas de tamanho igual.
Agora, você pode projetar seu conteúdo para ocupar qualquer número dessas 12 colunas.
Assim, e o fato de que o próprio conteúdo se adapta à
largura da tela e a própria linha que está sendo
fechada dentro do recipiente se adaptará automaticamente à largura
da tela, e também às colunas,
as colunas 12 serão determinadas.
Suas larguras serão determinadas pela linha por si só.
Então, o que significa que, para tamanhos de tela diferentes,
qualquer que seja o conteúdo que você layout, todas essas 12 colunas
se ajustarão automaticamente à largura permitida para o conteúdo.
Então, é assim que a capacidade de resposta é
incorporada na forma de grade Bootstrap de colocar para fora o conteúdo.
Então, como exatamente fazemos o layout do conteúdo?
Falaremos sobre isso nos próximos slides.
A grade Bootstrap em si,
disponibiliza-nos cinco classes para especificar tamanhos de tela diferentes por padrão.
Há uma classe padrão que visa todos os tamanhos de tela,
começando de extra pequeno a extra grande.
Assim, toda a gama de larguras de tela em termos Bootstrap,
é dividida em
tamanhos de tela extra pequeno, pequeno, médio, grande e extra grande.
Em seguida, veja como essas diferentes classes
de tamanhos de tela são determinadas em detalhes em um dos slides posteriores.
Então, dentro do seu código,
você identificará a especificação de layout
especificando sm para o tamanho da tela pequena,
md para médio, lg para grande
e xl para tamanhos de tela extra grande.
Então, quando você faz o layout,
como vimos no slide anterior,
cada linha em um sistema de grade Bootstrap é dividida em 12 colunas.
Agora, vamos layout conteúdo usando o que é chamado como as classes de coluna.
Para as classes de coluna,
podemos especificar como o layout é feito para diferentes larguras de tela.
Veja os detalhes disso nos slides subsequentes mais tarde.
Mas deixe-me chamar rapidamente sua atenção para como especificamos os tamanhos das colunas.
Eles podem especificar os tamanhos das colunas como col,
que é uma das classes que eles vão dizer col-sm para
pequeno e col-md para médio e grande e extra grande e assim por diante.
Agora, essas classes de coluna são usadas para especificar
exatamente quantas colunas em uma linha cada pedaço de conteúdo ocupará.
Como é que isto funciona?
Veremos isso no próximo slide.
Então, voltando ao nosso Bootstrap Grid,
suponha que temos um pedaço de conteúdo e queremos estabelecer a paz do conteúdo.
Podemos especificar que o conteúdo é fechado dentro de outra div,
ao qual aplicamos classe coluna,
como por exemplo, col-sm-5.
Então, nesse caso, o que estamos especificando é que, para tamanhos
de tela pequenos a extra grandes, esse conteúdo ocupará cinco colunas dessas 12 colunas.
Agora, você vai me perguntar imediatamente, e
sobre o smock extra?
Se não for explicitamente especificado para o lockette inteligente extra
por toda a amplitude das 12 colunas,
eles podem especificar explicitamente a partir de
qual intervalo o layout da coluna ocupará quantas colunas.
Então, neste caso particular,
quando eu especificar que eu só chamá-los de sm-5,
o que eu quero dizer é que este conteúdo particular que é fechado dentro dessas div,
ocupará cinco colunas para todos os tamanhos de tela,
de pequeno todo o caminho para extra grande.
Agora, vemos agora que fora das 12 colunas,
já ocupamos cinco colunas.
Ainda restam sete colunas.
Eu poderia pegar outro pedaço de conteúdo e, em seguida, posicioná-lo à direita deste,
defendendo outro div e, em seguida, aplicando a coluna sm-7.
Agora, neste caso,
você vê que 5 mais 7 é igual a 12.
Então, esses dois pedaços de conteúdo que estão fechados nas duas divs,
agora serão posicionados lado a lado,
e a soma total deles está ocupando toda a largura da coluna 12.
Então, é assim que podemos especificar e o trabalho com as 12 colunas
na definição do layout da camada atual.
Com o uso do layout de caixa flexível CSS, o
Bootstrap também suporta o que é chamado de colunas de layout automático.
Então, neste caso,
eu posso simplesmente especificar a
coluna sm sem especificar quantas colunas é suposto ocupar.
Mas no caso de eu especificar três Doobs largura coluna sm no meu
cânhamo 5, então a grade bootstrap irá automaticamente posicionar esses conteúdos dentro dessas divs
, lado a lado,
de modo que cada um deles recebe um terço da largura total.
Então, uma vez que temos 12 colunas aqui,
cada um desses três terá quatro colunas cada.
E isso é automaticamente cuidado pelo mecanismo de layout de bootstraps.
Agora, podemos especificar explicitamente
o número de colunas que uma determinada parte do conteúdo ocupa.
Então, por exemplo, suponha que eu especifique três classes de coluna,
mas o meio eu especificar coluna sm 6.
Então o que acontece é, quando o bootstrap faz o layout,
o do meio ocupará seis colunas,
e então os pedaços de conteúdo esquerdo e direito ocuparão o que for deixado de fora.
Então, das 12 colunas que temos,
se 6 colunas que ocupam a parte do meio do conteúdo,
então deixamos conosco mais 6 colunas e que serão igualmente
divididas entre o conteúdo e os dois lados desta coluna do meio.
Então, cada um deles terá colunas livres de espaço cada.
Então, é assim que o layout é feito automaticamente com Bootstrap.
No exercício, veremos várias combinações de uso deste tipo de
especificações de quantas colunas cada pedaço de conteúdo ocupará no layout de cores.
Esta tabela resume a forma como o Bootstrap trata
as diferentes grades de tela e, consequentemente, como você identifica essas grades de tela.
Então, como eu especifiquei anteriormente,
Bootstrap divide todo o intervalo de largura da tela em 5 classes.
As telas extra pequenas são aquelas cujas grades estão abaixo de 776 pixels.
Pequenas telas são aquelas que estão entre 576 e abaixo de 768 pixels.
Telas médias de 768 a 992,
grandes de 992 a 1200 e qualquer coisa sobre 1200 pixels de largura
é tratada como uma tela extra grande.
Então, é assim que o Bootstrap Grid padrão é configurado.
Agora, uma vez que você se sentir confortável com o Bootstrap,
você também pode configurar essas divisões você mesmo.
Mas para este curso,
vamos ficar com a configuração padrão que o bootstrap suporta.
Agora, o comportamento da grade, neste caso,
é que o que é colocado para fora para extra pequeno,
será horizontal em todos os momentos,
para os bits mais altos eles serão recolhidos para 2start largura,
mas horizontal sobre os pontos de quebra.
Veremos como isso funciona em um curto espaço de tempo com alguns exemplos.
Agora, vimos o uso do contêiner no slide anterior.
Para telas extra pequenas,
a largura do contêiner é determinada automaticamente pela largura da tela.
Mas para pequeno, médio,
grande e extra grande,
a largura do recipiente é conforme especificado.
Então, se você usar a div com um contêiner de classe,
então, para telas pequenas, é 540 pixels.
Então, você notará que se você tiver uma largura de tela entre 576 e 768,
seu conteúdo será colocado em 540 pixels,
será centrado na largura da tela.
Assim, o espaço restante será deixado como margens em ambos os lados deste conteúdo.
Da mesma forma, para o meio é 720 pixels e assim por diante.
Agora, então você especifica quantas colunas cada conteúdo ocupa.
Em seguida, os prefixos de classe de coluna que você usará
é.col para extra pequeno, .col-sm para pequeno,
todo o caminho para extra grande.
Se você especificar algo com.col-md
, isso se aplica a telas médias a extra grandes.
Então, sempre que você especificar qualquer col- e alguns números,
então isso se aplica a esse tamanho de tela particular e tudo sobre esse tamanho de tela.
Agora, em todos os casos de tamanho de tela,
o número de colunas é definido para ser 12 colunas.
A grade no caso de bootstrap é projetada para ser 12 colunas e que é configurável,
mas o valor padrão é 12 colunas.
A razão para escolher 12 é que 12 é um bom múltiplo de dois, três,
quatro e assim por diante.
Assim, ele oferece muita flexibilidade em termos de
quantas colunas você escolhe para colocar seu conteúdo.
Entre cada coluna, então se você colocar
dois pedaços de conteúdo lado a lado com seus divs,
entre esses dois pedaços de conteúdo eles serão uma pequena sarjeta que será deixado.
Espaço em branco vazio que será deixado fora da largura da calha,
que é apenas 30 pixels por padrão.
Assim, 15 pixels são de um pedaço de conteúdo e 15 pixels de outro pedaço de conteúdo.
SumTotal juntos 30 pixels de
espaço em branco serão deixados entre os dois pedaços de conteúdo.
Pense em como um layout de coluna de jornal
é feito e você começa a ver a correspondência entre
o layout da coluna do jornal é feito e como
a grade do bootstrap faz o layout do conteúdo nesse campo. A
grade do Bootastrap permite que você faça conteúdo de próximo nível, para
que você possa incluir conteúdo dentro do conteúdo e, em seguida, fazer layout de conteúdo aninhado.
Além disso, ele suporta offsets.
Veremos o uso de offsets também em alguns exemplos mais tarde.
Então vamos olhar para o nosso primeiro exemplo de como você aplicaria classes de coluna de bootstraps,
e como eles realmente seriam renderizados em tamanhos de tela diferentes.
Aqui está um exemplo de uma situação em que eu apliquei aos dois divs,
coluna hífen 12 e, em seguida, coluna hífen sm hífen cinco para
o pedaço vermelho de conteúdo e para
o outro eu apliquei coluna hífen 12 e coluna sm sete.
Assim, a forma como este conteúdo será colocado para fora é para telas extra pequenas,
os dois pedaços de conteúdo serão empilhados um em cima do outro.
Então, o vermelho será empilhado em cima da cor verde do mar.
Mas para telas pequenas a extra grandes,
os dois pedaços de conteúdo serão dispostos lado a lado.
A razão para isso é porque dissemos coluna sm cinco e coluna sm sete para os dois.
Assim, para pequenos a extra grandes, eles são dispostos lado a lado, de modo
que o conteúdo vermelho ocupará
as cinco colunas mais à esquerda e o conteúdo verde marinho ocupará as sete colunas à direita da sua linha,
desde pequenos até grandes tamanhos de tela.
Então é assim que nós especificaríamos layout de conteúdo para diferentes tamanhos de tela.
Bootstrap também fornece classes adicionais chamadas como
a Ordem Hyphen Classes que permitem que você reordene o conteúdo na tela.
Assim, por exemplo, se você aplicar uma ordem sm primeiro,
uma ordem alguma última classe para as divs,
como é mostrado no exemplo aqui, neste caso,
o div para o qual você aplica ordem sm última será empurrado para
o lado direito da tela e ordem
sm primeiro div será empurrado para o lado esquerdo do tela.
Então, aplicar essas classes de ordem permite que você reordene o conteúdo no script.
Não só isso, a ordem sm também permite que você especifique a mesma ordem sm um para
encomendar sm 12 para especificar a ordem em que o conteúdo precisa ser renderizado na tela.
Portanto, usando um número maior,
você pode deslocar o conteúdo para o lado direito da
linha e um número menor mudará o conteúdo para o lado esquerdo da linha.
Veremos um exemplo disso também no exercício.
O suporte interessante misto que o Bootstrap Grid traz com o uso
do layout Flexbox é o alinhamento vertical do conteúdo.
As versões anteriores do Bootstrap,
como o Bootstrap 3 e anteriores,
não tinham a capacidade de fazer o alinhamento vertical do conteúdo.
Com o uso do Flexbox para projetar o Bootstrap Grid no Bootstrap quatro,
obtemos a flexibilidade que o CSS Flexbox traz em termos de alinhamento vertical.
Então, se você quisesse que o conteúdo fosse centralizado verticalmente,
então, para a linha,
você aplicaria a classe chamada “align items center”.
Então, neste caso, qualquer conteúdo é colocado para fora,
será colocado verticalmente alinhado dentro dessa linha particular.
Assim, o conteúdo que ocupa
a maior altura será aquele para o qual os restantes serão
alinhados quando for colocado para fora nessa linha ou se você pré-especificar a altura da linha,
então todo o conteúdo será centrado verticalmente dentro dessa linha particular lá.
Não só isso, o Bootstrap Grid também suporta o alinhamento horizontal do conteúdo.
Vejamos um exemplo.
Então, se você especificar o seu conteúdo assim.
Digamos, você tem três colunas e a primeira que você especificar div classe coluna três,
em seguida, a do meio você vai dizer div classe coluna auto.
Eu vou voltar para aquela coluna auto em um curto espaço de tempo.
E a direita diz classe div coluna 3.
Então, neste caso, o que estamos especificando é que
as partes de conteúdo à esquerda e à direita ocuparão três colunas cada.
O do meio, quando eu digo, “coluna automática”,
significa que o número de colunas que esta div em particular
ocupa será automaticamente determinado pelo conteúdo que está fechado lá dentro.
Assim, com base no conteúdo,
o número de colunas ocupadas pela div se ajustará automaticamente.
Neste caso particular, neste layout,
esse conteúdo específico está sendo acomodado em quatro colunas.
Então agora você tem quatro colunas sendo usadas pela div central,
três colunas à esquerda e três colunas à direita.
Então soma total, você tem 10 colunas.
Então você tem duas colunas que são deixadas vazias.
Agora, se você especificar para a linha,
você especificar justify centro de conteúdo e,
em seguida, todo o conteúdo nesta linha específica será centralizado em
relação à linha horizontal.
Você também pode ter o conteúdo justificado para a esquerda,
justificado para a direita e algumas outras opções.
Os detalhes estão na documentação de bootstraps.
Bootstrap também permite que você faça deslocamentos de coluna.
Como é que isto funciona? Vejamos um exemplo.
Neste deslocamento coluna,
podemos especificar um pedaço de conteúdo,
adicionar a que se aplicarmos a classe como deslocamento hífen sm hífen um.
O que estamos especificando é para telas pequenas a extra grandes,
este pedaço de conteúdo deve ser deslocado para a direita por uma coluna.
Então, quando esse conteúdo é colocado para fora, como você pode ver,
a coluna mais à esquerda é deixada em branco e o conteúdo é deslocado para a direita por uma coluna.
E você pode colocar o conteúdo restante no lado direito.
Então soma total, você pode ver que as duas divs
ocuparão 11 colunas, mas uma coluna deslocada para a direita.
Então é assim que podemos controlar o layout do conteúdo usando um deslocamento de coluna.
Então, como você pode ver,
usando as especificações de tamanho da coluna,
o alinhamento vertical e horizontal,
o deslocamento, o empurrão e a tração,
e flexionar primeiro e flex por último,
somos capazes de obter muito controle sobre como colocamos
conteúdo para diferentes larguras de tela e tamanhos de tela diferentes .
Bootstrap vai ainda mais longe, permitindo que você aninhe conteúdo dentro de divs.
Assim, por exemplo, se você especificar duas divs,
como você vê com a coluna sm cinco e a coluna sm sete,
os dois conteúdos serão dispostos como visto aqui.
Agora, dentro da div direita,
eu posso novamente entrar e dividir a
largura do div em uma linha e, em seguida, essa linha vai me dar automaticamente
mais 12 colunas para essa parte da tela e então eu posso então fazer o layout usando
o aninhamento das divs e fazer o layout para diferentes partes dessa coluna .
Então, aninhando assim,
traz ainda mais flexibilidade na forma como você coloca o conteúdo em seu campo.
Com toda a discussão sobre o Bootstrap Grid System e como
o Bootstrap Grid suporta várias maneiras de colocar conteúdo,
vamos agora, passar para o nosso próximo conjunto de exercícios.
Vamos aplicar a grade Bootstrap à nossa página index.html
para fazer o layout do conteúdo dentro ou página index.html.
Nós também usaremos algumas classes CSS personalizadas.