Nas palestras anteriores,
aprendemos sobre design responsivo e o sistema de grade bootstrap.
Vimos como a grade bootstrap nos permite projetar sites responsivos.
É hora de avançarmos para o próximo exercício.
Vamos começar a trabalhar com a página html índice que criamos em
nosso exercício anterior e aplicar as classes de grade bootstrap para torná-la responsiva.
Dando uma olhada rápida em nossa página web no navegador, vemos que
ainda é terrível, embora as fontes tenham melhorado um pouco,
e agora estamos usando as fontes padrão bootstraps.
Vamos agora tentar aplicar as classes de grade bootstrap para index.html para melhorar seu layout.
Indo para a página index.html,
deixe-me chamar rapidamente sua atenção para esta linha específica na
página index.html que já incluímos no exercício anterior.
Eu tinha me referido a esta linha,
então estávamos falando sobre o sistema de grade bootstrap.
Então, aqui, vemos que nós especificamos as metatags com uma porta de visualização e o conteúdo,
largura como largura do dispositivo,
e escala inicial um e encolher para caber no.
Portanto, esta meta tag nos permite tornar
nossa página web responsiva, olhando para o caractere de porta de exibição.
Avançando para o próximo passo.
Nós vamos rolar para baixo para o corpo desta página index.html,
e, em seguida, olhar para cima a primeira div que vem logo abaixo da tag cabeçalho lá,
para este div você vai aplicar o recipiente de classe.
Já aprendemos sobre a classe de contêiner na palestra anterior.
Então, uma vez que aplicamos a classe container, em
seguida, olhando para a nossa página web vemos
que parte do conteúdo ali mesmo já se adaptou.
Veja a diferença entre o conteúdo aqui em cima e o abaixo aqui.
Agora este conteúdo abaixo aqui,
está no rodapé da nossa página index.html e este conteúdo está no cabeçalho.
Mas esse conteúdo no meio é o conteúdo real da nossa página web,
que está dentro da div à qual aplicamos o contêiner.
Então, aplicando a classe de contêiner você pode ver imediatamente que a largura da página dentro da
qual nosso conteúdo é colocado para fora agora
encolhida e, em seguida, você tem algum espaço extra restante em ambos os lados,
então, com esta largura do contêiner sendo um contêiner de tamanho fixo,
nosso conteúdo será corrigido para este largura particular
na tela deixando margem suficiente em ambos os lados como espaço em branco.
Vamos aplicar a mesma classe de contêiner para o cabeçalho e rodapé também
e, em seguida, ver como o conteúdo muda.
Voltando para nossa página web,
o que eu vou fazer agora é para o conteúdo interno aqui,
a div interna dentro do recipiente,
eu vou aplicar a classe como a classe linha aqui,
para este primeiro,
e eu vou simplesmente copiar isso.
Eu vou aplicar o mesmo para o segundo div aqui que está alinhado para o div,
e também rolar para baixo e, em seguida, para o terceiro div aqui,
Eu também estou aplicando a classe linha aqui.
Então agora, o conteúdo dentro desta classe de contêiner mais externa,
agora é dividido em três linhas,
então o que está dentro aqui será uma linha,
o que quer que esteja dentro aqui,
será a segunda linha e a outra aqui será a terceira linha.
Mais tarde, aplicaremos as classes de coluna a isso.
Vamos agora passar para o cabeçalho no corpo do nosso index.html.
E para o cabeçalho, vou aplicar uma classe chamada de jumbotron.
O componente jumbotron permite que você
defina o conteúdo dentro do jumbotron do resto da página.
Vamos ver o resultado em um curto espaço de tempo quando estamos na página web resultante.
Agora, para a div dentro deste cabeçalho,
eu vou aplicar a classe como recipiente, de
modo que o que está dentro do conteúdo
será agora restringido pela largura do recipiente lá.
Da mesma forma, movendo-se para baixo para
o rodapé aqui, no rodapé também,
a primeira div dentro do rodapé,
Eu vou aplicar a classe como recipiente.
E a div lá dentro,
eu vou aplicar a classe como linha lá,
para a div lá dentro.
Então essa div nos levará até essa div particular aqui.
E, em seguida, a próxima div também que é logo abaixo disso,
Vou aplicar a classe como linha.
Então agora meu rodapé contém duas linhas aqui,
vamos estilizar o conteúdo usando coluna,
classes em um curto espaço de tempo.
Indo para o cabeçalho também,
Vou aplicar a classe linha para o segundo div dentro do recipiente div aqui.
Então esta div que corresponde eu tenho isso,
será uma única linha no cabeçalho.
Vamos dar uma olhada em nossa página web resultante.
Indo para a nossa página web,
agora você pode ver que o conteúdo do cabeçalho é agora separado
do resto dentro desta caixa cinza no topo aqui.
Mas o conteúdo em si agora está alinhado com o conteúdo abaixo aqui.
Agora, este é o resultado do uso do contêiner.
Movendo-se para o rodapé,
agora você pode ver que o conteúdo do rodapé também agora alinhado dentro do contêiner.
Mas a página ainda não parece tão grande,
vamos agora aplicar as classes de coluna para as divs internas agora.
Voltando para a página index.html,
vamos agora começar a aplicar as classes de coluna.
Então, indo para o cabeçalho, para a segunda div interna dentro do jumbotron aqui,
deixe-me aplicar uma classe como coluna 12, coluna sm-6.
Então, aqui o conteúdo
nesta primeira div ocupará toda a linha para tamanhos de tela extra pequenos
e, em seguida, ocupará metade da linha, então é por isso que a coluna
sm-6 para tamanhos de tela pequenos a extra grandes.
Agora, da mesma forma para a segunda div aqui,
embora não contenha nenhum conteúdo lá,
eu vou definir as classes de coluna aqui como coluna 12 e, em seguida, coluna sm.
Então, observe que aqui especificando a coluna 12,
estou explicitamente afirmando que, para tamanhos de tela extra pequenos, qualquer conteúdo que esteja
dentro desta div será empilhado abaixo do conteúdo aqui.
E, em seguida, para tamanhos de tela pequenos a extra grandes,
esse conteúdo ocupará a quantidade restante de
colunas na linha para tamanhos de tela pequenos a extra grandes.
Então aqui, neste caso, uma vez que seis colunas são ocupadas por
este conteúdo, isso irá obter as seis colunas restantes lá.
Movendo para baixo para as linhas de
conteúdo aqui, para o conteúdo aqui,
então para este primeiro conteúdo,
que é um rótulo aqui,
eu vou aplicar as classes como coluna 12,
coluna sm-4, coluna md-3.
Então, afirmando que, para tamanhos de tela extra pequenos,
isso ocupará toda a linha, para pequeno,
ocupará colunas cheias
e, em seguida, para médio a extra grande,
ocupará três colunas na linha.
Agora, então a parte restante será ocupada pelo conteúdo abaixo aqui, de
modo que, para isso, eu vou aplicar as classes como col,
indicando que isso será empilhado abaixo
do conteúdo aqui nos tamanhos de tela extra pequena,
e então eu vou dizer coluna sm,
então o que significa que isso vai ocupar o restantes oito colunas aqui,
porque quatro colunas são ocupadas por esta,
e então vamos dizer coluna md,
então o que significa que isso ocupará
as restantes nove colunas porque três colunas são
ocupadas para tamanhos de tela médio a extra grande pelo conteúdo acima aqui.
Agora que eu defini para a primeira linha de conteúdo,
eu vou tomar o mesmo aplicativo de classe de coluna aqui,
e, em seguida, aplicar isso para a segunda linha aqui,
e também a terceira linha de conteúdo aqui.
Da mesma forma, eu vou copiar este e, em seguida, aplicar o mesmo para
as divs conteúdo abaixo aqui.
Então agora nós configuramos tanto o cabeçalho e as colunas de conteúdo lá.
Vamos agora descer para o rodapé.
No rodapé, você vai notar que esta div contém três divs internas aqui,
então para cada uma dessas três divs internas aqui,
eu vou aplicar as classes de coluna correspondentes.
Então, para o primeiro,
que contém links para as várias páginas que farão parte deste site,
eu vou aplicar uma classe de coluna,
como coluna quatro, coluna sm-2 aqui.
Então, o que significa que para tamanhos de tela extra pequenos,
isso ocupará quatro colunas e para pequeno a extra grande,
ele ocupará apenas duas colunas aqui.
Então, para o segundo,
a segunda div lá vou aplicar as classes como coluna sete.
Então note que eu tenho quatro aqui e depois sete aqui, de
modo que o total ocupa 11 colunas.
Deixei uma coluna vazia.
Voltarei mais tarde para aplicar uma compensação para cuidar da coluna extra.
Então esta é a coluna sete,
e então col-sm-5 para a segunda.
Então este é dois mais cinco, sete.
Então eu ainda tenho cinco colunas sobrando,
que eu posso usar para a terceira div aqui.
Agora, para tamanhos de tela extra pequenos,
esses dois conteúdos serão posicionados lado a lado,
e então esta div que contém links para
um site de mídia social estará em uma linha separada empilhada abaixo.
Mas para tamanhos de tela pequenos a extra grandes,
o primeiro ocupará duas colunas,
o segundo ocupará cinco e o restante será
ocupado por links de mídia social aqui.
Então, para o terceiro,
eu vou aplicar a classe
como col-12 col-sm-4 aqui.
Então col-12 col-sm-4, o que significa que isso ocupará
um conjunto separado de 12 colunas
empilhadas abaixo do conteúdo anterior para tamanhos de tela extra pequeno,
mas para pequeno a extra grande ele ocupará quatro colunas.
Então aqui estamos quatro mais cinco,
nove mais dois 11.
Assim, uma coluna ainda é sobra para pequeno a extra grande.
Então é assim que eu vou aplicar a coluna mais próxima a isso.
Agora, nós ainda temos o abaixo aqui onde nós contemos os direitos autorais para isso.
Eu vou aplicar a classe como coluna automática, o
que significa que este conteúdo irá ocupar
apenas colunas suficientes como é exigido pelo conteúdo lá.
Mais tarde, você verá que eu vou posicionar esse conteúdo no centro
da tela usando ainda outra classe CSS bootstrap.
Chegaremos a isso no próximo exercício.
Então, com isso temos aplicado várias classes de coluna para o cabeçalho,
o conteúdo e o rodapé.
Este é um bom momento para salvarmos as alterações e, em seguida, ir e dar
uma olhada na página indexada ou HTML atualizada.
Olhando para a nossa página index.html,
você notará como no cabeçalho que é o Jumbotron,
o conteúdo agora está ocupando apenas metade da tela lá.
A outra metade da tela desta linha em particular agora é deixada vazia.
Descendo para as linhas de conteúdo,
você vê que o rótulo no lado esquerdo ocupando
três ou quatro colunas dependendo do tamanho da tela que estavam usando,
e o restante sendo ocupado pelo resto do conteúdo.
Então aqui temos uma linha,
a segunda linha e a terceira linha.
E então o rodapé aqui você pode ver que os links estão no lado esquerdo,
os outros no meio,
e então os links de mídia social no lado direito.
Então isso é para uma tela de tamanho médio.
Agora, se você quiser olhar para a mesma exibição para um tamanho de tela extra pequeno ou pequeno,
se você estiver usando o Chrome,
então o Chrome tem as ferramentas de desenvolvedor que você pode
ativar clicando nas ferramentas de desenvolvedor de exibição,
e quando as ferramentas de desenvolvedor aparecerem,
você notará, deixe-me reduzir o tamanho Aqui.
Você vai notar este pequeno para janelas lá.
Então, clicando em que irá ativar a exibição responsiva para esses sites lá.
Então você pode ver que aqui a visão desta mesma página web em um pixel para site,
que é 411 por 731 no modo retrato,
então que é correspondente a um tamanho de tela extra pequeno, para que
você possa ver como o conteúdo é colocado para fora.
Então você pode ver o conteúdo do Jumbotron lá
e, em seguida, a parte restante do conteúdo abaixo aqui.
E depois até ao rodapé.
Assim, no rodapé você pode ver como os links e o anúncio tem colocado para fora lado a lado.
Agora reduzindo o tamanho da tela para que possamos ver como esse rodapé é colocado aqui.
Então, a parte restante, você tem os links no lado esquerdo,
você tem o endereço no lado direito,
e, em seguida, os links de mídia social abaixo em uma linha separada aqui,
e, em seguida, os direitos autorais na parte inferior lá.
Então esta é a visão interessante que vemos para tamanhos de tela extra pequenos.
Voltando ao nosso código aqui,
vou agora aplicar a ordem e classes offset para
este conteúdo, a fim de exibir o conteúdo de uma maneira ligeiramente diferente.
Então, indo para a linha de conteúdo aqui,
para as duas divs aqui que contêm o conteúdo,
eu vou aplicar as classes como
order-sm-last para a primeira linha aqui.
E então para aquele aqui embaixo eu vou aplicar ordem sm primeiro para a linha aqui embaixo.
Então, o que significa que quando este conteúdo é exibido,
este conteúdo será puxado para o lado esquerdo da tela e, em seguida,
esta coluna será empurrada para o lado direito da tela.
Então este será encomendado para o lado direito e este será encomendado para o lado esquerdo.
Como expliquei sobre as cláusulas de ordem na palestra anterior.
Da mesma forma a partir da segunda linha,
eu vou deixá-lo como tal, mas a partir da terceira linha eu vou aplicar
o mesmo conjunto de classes de ordem.
Então eu vou para a terceira linha aqui,
e então aplicar o order-sm-last para este,
e então eu vou aplicar o order-sm-first para este.
E assim este novamente será reordenado de
tal forma que este conteúdo apareça para
o lado esquerdo e este conteúdo aparecerá para o lado direito.
Esta é apenas uma maneira de posicionar o conteúdo de uma maneira um pouco mais interessante.
Agora movendo-se para o rodapé aqui,
agora eu vou aplicar uma classe offset aqui.
Então note que eu mencionei que essas duas colunas ocuparão quatro mais sete, 11.
Então uma coluna é sobra.
Então eu vou aplicar uma classe offset-1 para este.
Então o que significa que este conteúdo nesta div será empurrado para a direita por uma coluna aqui.
Da mesma forma, desde que eu disse offset um,
isso será aplicado a extra pequeno todo o caminho até os tamanhos de tela extra grande.
E assim que é o uso da classe offset.
Então, agora que fizemos as alterações,
vamos salvar as alterações e, em seguida, ir e dar uma olhada em nossa página web no navegador.
Voltando para esse navegador,
agora você vê como o cabeçalho é como antes,
mas na primeira linha de conteúdo,
você vê que esse conteúdo foi empurrado para
o lado esquerdo e o rótulo para o lado direito.
A segunda linha é diferente tem sido mantida como antes.
Mas para o terceiro você verá que isso foi
empurrado para a direita e isso foi empurrado para a esquerda.
Então esse é o uso da ordem-sm-last e order-sm-first class está lá.
Agora indo para o rodapé,
você vê agora que o conteúdo na primeira div aqui foi empurrado para a direita por uma coluna,.
Então você pode ver que há uma coluna de espaços em branco aqui,
e isso não é empurrado para a direita e os restantes foram formatados de acordo.
Então, com isso, concluímos
as alterações em nossa página index.html ou página adicional para este exercício específico.
Com isso, completamos este exercício particular.
Neste exercício, analisamos o uso das
classes de contêiner, linha e coluna, a fim de projetar nossa página web um pouco mais agradável.
Na segunda parte do exercício que se seguirá,
vamos adicionar mais para tentar melhorar a forma como estas páginas web são renderizadas.
Ainda não é para minha satisfação.
Obviamente, ainda há espaço para melhorias.
Este pode ser um bom momento para você fazer um comentário git com
a mensagem Bootstrap Grid Part One.