Desenvolvimento web full stack para iniciantes — parte 2: flexbox, grid do CSS e Bootstrap 4

1. Nossas boas-vindas ao curso!: Bem-vindo ao Desenvolvimento Web Full Stack para Iniciantes. Este curso é projetado para levá-lo de iniciante a um desenvolvedor web capaz de construir não apenas interfaces de usuário front-end de um site, mas também projetar e construir o back-end com o qual interagir. Então, quem sou eu? Meu nome é Chris, e serei seu instrutor para este curso. Eu sou um desenvolvedor web, e também o produtor de muitos tutoriais, ensinando milhares de alunos as habilidades que eles precisam para construir sites e aplicativos. Esta é uma segunda parte da série completa onde continuaremos desenvolvendo seu conhecimento de HTML, CSS e web design responsivo, e apresentaremos a você o CSS Flexbox, o Grid e também o Bootstrap 4 Framework. Este curso é sobre a criação de layouts flexíveis, começando com o CSS Flexbox, para nos permitir ter um controle incrível sobre como os elementos são dispostos em uma página. Em seguida, passamos para a CSS Grid, que é uma das técnicas mais poderosas e modernas para aprender. O layout de páginas web completas, criando quase qualquer tipo de layout que você possa imaginar. Terminamos com o popular Bootstrap 4 Framework, onde construiremos um site de hambúrgueres. Isso lhe dará a chance de aprender, e colocar em prática, o sistema de grade Bootstrap, imagens e texto, barras de navegação, carrosséis rotativos, modelos, formulários e muito mais. Nós também olhamos para as classes de utilidade Bootstrap fornece para um estilo fácil. Junto com como substituir qualquer um desses estilos e tornar seus projetos completamente personalizados. Espero que você esteja animado para aprender tudo sobre Bootstrap e layout de sites na segunda parte deste curso. 2. O que é Flexbox?: Nas últimas seções, aprendemos muito sobre como criar e alterar layouts. Muitas das formas históricas de criar layouts envolveram o uso de tabelas de cargas. Já falamos sobre as limitações desses métodos e por que eles não são ideais para o layout de páginas. Nesta seção, vamos estar olhando tanto para a flexbox quanto para a grade. Esses métodos de camada modernos tornam o layout de páginas da Web muito mais fácil. Vamos começar com o CSS Flexbox. Flexbox foi projetado para ser usado para um layout dimensional, que significa que ele lida com um eixo ao mesmo tempo, uma linha ou uma coluna. Assim como você pode ver aqui. Não só a Flexbox controla a direção, mas também nos permite definir o alinhamento como, como temos aqui. Podemos alinhar um item ou um grupo de itens para a esquerda ou direita, ou até mesmo para a parte superior ou inferior. Flexbox também nos permite controlar o tamanho dos itens individuais também. Aqui na linha de cima, temos duas caixas, ocupando uma parte e, em seguida, um item ocupando duas partes. Então, para a segunda linha, temos dois itens. Um item ocupa três vezes o tamanho do pedido. Estes também flexíveis ao significado se houver mais ou menos espaço disponível, estas três partes serão sempre proporcionais à única parte. Outra grande característica do flexbox é a capacidade controlar a ordem em que os itens aparecem na página. Tradicionalmente, os elementos aparecem na ordem de um colocá-los no arquivo HTML. Flexbox nos permite controlar esta ordem de origem. Isso pode ser particularmente útil ao alternar elementos para diferentes layouts. Poderíamos ter certos elementos em uma ordem, para telas maiores, e então uma ordem completamente diferente para telas menores. Antes de entrarmos na construção de algo com flexbox, há um conceito importante a ser entendido primeiro. Este é o eixo principal e transversal. Definimos o eixo principal definindo a direção flexível. A linha está em padrões e isso coloca os itens em uma linha da esquerda para a direita em um navegador padrão da esquerda para a direita. Como você pode ver à direita, linha inversa é o oposto e isso aparece da direita para a esquerda. Então temos coluna que é de cima para baixo, e, em seguida, também coluna-reversa, que é oposto de baixo para cima. Quando definimos essa direção flexível, isso será considerado o eixo principal. Em seguida, o eixo transversal corre perpendicular ao eixo principal. Então, se eu tivesse direção flexível definida para linha, coluna será o eixo transversal. Além disso, se definirmos a direção flexível para coluna, em seguida, linha tornar-se-ia o eixo transversal. Então, se isso é um pouco difícil de entender agora, basta lembrar que o eixo principal é uma direção que definimos, e então o eixo transversal é o oposto. Esta é uma visão geral básica de como o flexbox funciona. No próximo vídeo, vamos configurá-lo em nosso editor de texto e ver em ação. 3. Direção Flex: Agora sabemos alguns conceitos básicos sobre flexbox. Ambos a inação vista vai realmente nos ajudar a entender como as coisas funcionam. Para começar, vou criar um novo projeto chamado flexbox. Clique com o botão direito do mouse em “Nova pasta” e nome é uma flexbox. Então podemos ir em frente e abrir isso em nosso editor de texto. Arrastar isto. Então podemos criar nosso index.html familiar. Então eu vou usar o atalho de html Coluna 5 e, em seguida, bate para cima, definir o título e isso pode ser flexbox e obter que salvar. Para este exemplo, vou definir alguns elementos para a tela para trabalhar com. Dentro da seção do corpo, vamos em frente e criar uma div. Isso vai ter um ID de contêiner. Aqui dentro, também podemos adicionar mais alguns divs. Pode ser o Item 1 e, em seguida, uma classe de item. Quero criar mais cinco desses itens. Vou copiar esta seção aqui e depois colá-la em mais cinco vezes, deixando-nos com seis itens diferentes dentro do nosso contêiner. Item 2, 3, 4, 5 e 6 e eles também podem ter o mesmo nome de classe do item para cada um deles. Então vamos esperar que possamos abrir as etiquetas de estilo dentro da seção de cabeça. Para começar, vamos direcionar este item com item ponto, e então vamos adicionar algumas cores. Os fundos, vamos para corais de luz, algum preenchimento de 30 pixels, alguma margem de 10 pixels, e o alinhamento de texto do centro. Isto é apenas para lhe dar algum estilo básico para que possamos ver os elementos na página. Agora, se abrirmos isso no navegador, vamos para o index.html e abrir isso. Há nossos seis itens na tela. Estamos apenas vendo o comportamento padrão no momento. Porque estes são elementos de nível de bloco, então todos estarão online. Para começar a usar flexbox, então precisamos definir o tipo de exibição para o flex. Isso é feito sobre os elementos pai e os elementos pai que deu um id de recipiente. Vamos voltar para as etiquetas de estilo. Em seguida, na parte superior, use o áspero porque é um id, e então podemos direcionar o contêiner e, em seguida, definir o tipo de exibição para ser flexível. Dá-nos salvar e, em seguida, recarregar o navegador e agora temos uma alteração. A razão pela qual estamos vendo agora em uma linha como esta, é porque como vimos nos slides na última palestra, a direção flexível padrão é linha. Vamos dar uma olhada na linha inversa. Isso também é sobre os pais e dissemos que com a direção flexível do salvamento de linha reversa. Antes de termos o Item 1 à esquerda e o Item 6 à direita, atualize. Agora o primeiro item começa no lado direito e se move para a esquerda. Nós também temos uma direção de coluna, a pilha esses itens em cima um do outro. Mudar linha inversa. Será agora uma coluna e há uma pilha de cima para baixo. Novamente como antes, se queremos que o Item 1 seja o oposto e para baixo na parte inferior, podemos definir isso para ser coluna inversa, direção flexível dizer coluna inversa, e agora nossos itens alternam de baixo para cima. Este é um quatro opções de direção flexível que temos disponíveis para nós. Lembre-se quando sinal de direção flex, isso é considerado o eixo principal. Temos linha, linha inversa, coluna e coluna reversa para. Esse é o nosso primeiro olhar nosso flexbox e, em seguida, vamos dar uma olhada em como podemos usar a caixa flexível e justificar o conteúdo. 4. Propriedade flex wrap e justificar o conteúdo: Neste vídeo, vamos olhar para flex-wrap e como justificar o conteúdo. Primeiro, vamos em frente e mudar a direção flexível de volta para ser a linha padrão, dentro do contêiner pai. Todos os itens que adicionamos agora estão na mesma linha. Devemos atualizar e agora ir da esquerda para a direita. Se continuarmos adicionando mais itens no, todos ainda aparecerão na mesma linha. Vamos até nossos itens, copiar isso e colá-lo. Número 6, logo abaixo. Dado esses 12 itens, esse comportamento pode ser alterado usando a propriedade flex-wrap. O padrão é definido como sem quebra automática. É por isso que vemos todos os nossos itens na mesma linha. Isso também se aplica ao recipiente também. Se formos até a seção de estilo e direcionar o contêiner, vamos adicionar a propriedade flex-wrap e, em seguida, definir isso para ser wrap, salvar isso, recarregar. Agora os itens serão embrulhados em várias linhas. Se tornarmos o navegador ainda mais estreito, cada vez é menos espaço, todos eles vão cair em duas novas linhas. Desloca itens na linha diretamente abaixo. Se você queria os efeitos opostos, podemos usar envoltório reverso, então adicione reverso no final deste. Dê isso salvar e recarregar. Agora os itens extras que estavam na linha abaixo, agora aparecem na linha acima, porque agora funciona de baixo para cima. Assim como antes, se encolhermos o navegador, todos os itens adicionais saltam um nível em vez de abaixo. Na verdade, há também uma abreviação para este flex-wrap e também para flex-direction atualizar em uma propriedade. Isso é chamado de fluxo flexível. Podemos apagar estas duas linhas aqui e depois o fluxo flex-ímpar. Leva em dois valores. O primeiro foi o nosso valor de linha para a direção flexível, e depois o segundo para dobra. Esta primeira linha com direção flexível, em seguida, a segunda é para o flex-wrap. Guarde isso. Agora nós fundimos essas duas linhas em uma. A próxima coisa que quero mostrar é como justificar o conteúdo. Isso é usado para controlar como nossos itens são espaçados através do eixo principal. Esta é também uma propriedade CSS que é adicionada ao contêiner. Então vamos adicionar conteúdo justify e, em seguida, vamos começar com flex-start. Se atualizarmos, não veremos nenhuma alteração no navegador. Isso ocorre porque o flex-dot é o padrão. Podemos ver como isso é mais eficaz se tentarmos flex-end. Em vez de flex-start, vamos adicionar flex-end. Lembre-se de que nossos itens por padrão estão seguidos. Na página, da esquerda para a direita, é por isso que o flex-start alinha todos os itens no lado esquerdo e, em seguida, o flex-end alinha todos os itens ao lado direito, que é o fim do eixo principal. Vamos também tentar centralizar, salvar e recarregar. Agora tudo está alinhado ao centro do eixo principal. Ainda temos o mesmo comportamento se quisermos encolher o navegador, todos os itens ainda cairiam para a próxima linha a partir do centro. Isto, claro, coloca os itens ao longo da linha central do eixo principal, que é apenas por aqui. As próximas opções gratuitas todas relacionadas a como o espaço disponível entre esses itens é distribuído. Se começarmos com o espaço entre. Em vez de centralizar, podemos adicionar um espaço entre e ver como isso está olhando. Agora, os itens ainda na mesma linha que normalmente seria. Mas agora eu tenho igual quantidade de espaço distribuído entre cada item. Se, em vez disso, quiséssemos que o espaço estivesse ao seu redor. Então, para estar igualmente no lado esquerdo e direito, temos espaço ao redor para isso. Altere o espaço entre para ser espaço ao redor. Este espaçamento é aplicado a ambos os lados agora. Os itens terão duas vezes mais espaço entre eles do que no final. Porque, por exemplo, o item 3 tem metade do espaço aqui e, em seguida, o item 4 tem metade do espaço nesta ideia aqui também. Se você queria ter o espaço de cada lado para ser igual, nós também temos espaço uniformemente. Vamos dar uma chance a isso. Agora há mesmo espaço entre todos os itens. Agora é isso para este vídeo, mas agora você deve ser capaz de ver o quão poderoso é o flexbox para layout. Mesmo nós apenas adicionamos algumas linhas de CSS. 5. Alinhar itens: Vamos começar este vídeo voltando para os nossos seis itens originais na página de índice. Vamos excluir esses últimos seis que adicionamos no início e, em seguida, recarregar e agora de volta para nossos seis itens originais. Primeiro, queremos começar por olhar para uma linha itens. No último vídeo, olhamos para justificar conteúdo, que alinhado ou itens e também determinou o espaço entre eles. Tudo isso foi feito através do eixo principal. Temos o eixo principal definido para a linha. Isso significa que todo o alinhamento e espaçamento estava na página da esquerda para a direita. Alinhar itens também funciona com esses mesmos itens, mas desta vez no eixo transversal. Atualmente, com nossa configuração atual, o eixo transversal seria vertical ou de cima para baixo. Para esta demonstração, podemos adicionar algumas alturas diferentes a estes itens. Isso nos ajudará a ver melhor como align itens funciona. Vamos passar para os nossos seis itens e, em seguida, vamos adicionar um pouco de estilo, então os atributos de estilo. Vamos adicionar a altura e vamos para 300 pixels, em seguida, copiar esta seção. Podemos adicionar isso em mais algumas vezes. Eu vou para 250 neste e, em seguida, 320 no final, e depois atualizar. Agora isso parece um pouco estranho. Nós só estabelecemos as alturas de três desses itens, mas parece que todos mudaram. Isso ocorre porque o valor padrão para align items é esticar, modo que os itens flexíveis se estendem até a altura do mais alto para preencher as alturas do contêiner. Então, voltemos aos nossos estilos no topo da página. Novamente, isso ocorre durante o contêiner pai. Podemos adicionar itens de alinhamento e, como acabamos de mencionar, stretch é o padrão, então adicionar um sinal não causará alterações. Vamos começar com “flex-start”. flex-start iniciará os itens na borda inicial do eixo transversal. Então, para aqueles, este seria o topo da página e, em seguida, trabalhar para baixo. Agora vemos os três itens que altura mudamos, e a mão direita ainda, como originalmente eram. Se quisermos que as alterações comecem na parte inferior da página, usaremos o flex-end. Lembre-se estes flex-start e flex-end posição é dependente de qual eixo, é o nosso principal e cruzado. Se eu fosse em frente e mudasse o eixo principal para ser coluna, então em vez de linha, se você alterar isso para ser coluna, atualizar e agora isso define o eixo principal para ser vertical, significa que o flex-end, que define um eixo transversal Agora fique do lado direito. Se mudarmos de volta para a linha e depois reintegrarmos. Além disso, há opção para centralizar os itens também. Novamente, usando itens alinhados, podemos mudar flex-end para ser o centro. Você provavelmente pode imaginar o que isso faz. Isso adiciona uma linha no meio do contêiner e todos os itens serão espaçados uniformemente acima e abaixo desta linha. Esses tipos de layouts costumavam ser muito mais complexos, mas com caixa flexível, isso nos permite fazer tudo isso com apenas algumas linhas de CSS. Podemos levar as coisas ainda mais longe, alinhando com a linha de base do texto. Este texto que está entre cada item. Vamos mudar o centro para ser a linha de base, atualizar. Dentro do navegador à primeira vista, não parece diferente da opção flex-start. Lembre-se, embora esta seja uma linha para a linha de base. A linha de base é a linha de fundo do texto e é isso que vemos aqui. Para ver uma mudança, precisaremos mover a posição externa do texto. linha horizontal deve fazer isso por nós. Vamos descer para os nossos itens e dentro desta primeira div podemos agora adicionar uma linha horizontal. Vamos ver o efeito que isso tem no navegador. Agora temos mais conteúdo aqui dentro. Isso empurrado para baixo é o texto do item um e todos os outros itens ainda alinhados à parte inferior deste. Se movermos a posição externa do texto em outro elemento também, ele também irá alinhar. Desta vez, adicione duas linhas horizontais, isto está dentro do item três e, em seguida, atualize. Agora, podemos ver que todos os itens ainda estão alinhados, mesmo que eu tenha adicionado dois pedaços extras de conteúdo. Isto é como podemos usar itens de alinhamento na caixa flexível. No próximo vídeo, vamos dar uma olhada em outro método de alinhamento de eixo cruzado chamado align content. 6. Alinhar o conteúdo: Em seguida, vamos dar uma olhada no conteúdo de alinhamento. Eu sei que estamos vendo alguns termos para ter nossa cabeça por aqui. Embora você possa pensar no conteúdo de alinhamento como semelhante ao conteúdo justificativo, que já usamos. Mas desta vez aplica-se ao eixo transversal em vez do eixo principal. Para isso, precisamos de mais algumas linhas de conteúdo. Então vamos mover esses estilos que foram adicionados na última vez. Então o primeiro, a linha horizontal, essas duas linhas aqui e, em seguida, as duas finais, atributos de estilo. Remova isso. Depois vou copiar os seis itens mais uma vez e depois colá-los. Na verdade, colamos estes em mais duas vezes ele vai 18 itens diferentes. Salve isso e atualize. Então, agora temos cerca de três linhas de conteúdo para trabalhar se reduzirmos o navegador um pouco para baixo. Também ajudaria para esta demonstração se definíssemos uma cor de fundo para o contêiner e também definí-la para ser a altura total da tela. Então, dentro deste recipiente, vamos adicionar alguns CSS. Em primeiro lugar, os fundos. Eu quero ir para verde claro. Em seguida, defina a altura para ser tela cheia com 100vh. Lembre-se que vh é um tamanho relativo que só tem que ser 100% da altura da porta de visualização. Finalmente, vamos remover esses itens de alinhamento e conteúdo justificado de vídeos anteriores. Só vou comentar isso. Então ainda está lá, depois atualize. Então agora podemos começar a trabalhar no conteúdo de alinhamento. Lembre-se que ainda estamos trabalhando no eixo transversal. Tudo isso será aplicado de cima para baixo. Assim como itens de alinhamento que olhamos antes. Stretch também é o padrão para conteúdo de alinhamento. É por isso que todos os nossos itens e tecnicamente altura total do viewportt. Nós também temos um flex-start familiar também e também flex-end. Vamos ver como estes parecem em alinhamento de conteúdo. Flex-start para começar e, em seguida, atualize. Agora não temos o valor de estiramento padrão e todos os itens que estão no início do eixo cruzado, que é o topo da página. Como você provavelmente imagina, flex-end empurra isso para a parte inferior da página e, em seguida, sobe para o topo. Então vamos demonstrar isso com atualização flex-end, e agora tudo está para baixo na parte inferior do eixo transversal. Também temos centro. que empurrará tudo para o meio da altura ou para o meio do eixo transversal neste caso. Você deveria estar começando a ver um padrão aqui também. A maioria das propriedades serão examinadas são praticamente as mesmas, mas apenas aplicadas a um eixo diferente. Assim como justify conteúdo, há também um espaço entre e espaço ao redor também. Vamos começar com o espaço entre. Isso se aplica todo o espaço entre itens. Como acabamos de mencionar, também temos espaço ao redor e isso nos dará espaço igual em torno de todos os itens. De cima para baixo, metade do espaço está no topo do item e a outra metade está abaixo do item. Isso nos dá o efeito de ter o dobro da quantidade de espaço entre cada item. Se mudarmos o eixo principal é hora de ser coluna. Em seguida, atualize o navegador. Agora coluna define o eixo principal para ser vertical. Isto significa que uma horizontal é agora o eixo transversal. Isso faz com que o conteúdo de alinhamento e agora se aplique em toda a página, já que agora este é o eixo cruzado. Então vamos em frente e mudá-lo de volta para a linha e, em seguida, recarregar o navegador. Esta é uma daquelas coisas que só precisa de um pouco de prática para nos dar a volta. Uma vez que você começar a usá-lo dentro do nosso CSS, mais regularmente, as coisas se tornarão muito mais fáceis. É isso, por enquanto, para espaçar os itens e eu vou vê-lo no próximo vídeo. 7. Controlando itens filhos: ordem: Todas as propriedades do Flexbox que analisamos até agora foram adicionadas ao contêiner pai. Isso nos permite controlar os itens como um grupo. Tanto neste vídeo como nos restantes vídeos Flexbox, as propriedades serão aplicadas diretamente aos itens flexíveis individuais. Isso nos dá maior controle sobre itens individuais. Primeiro, vamos olhar para definir um pedido, que nossos itens aparecerão. Vamos voltar à nossa página de índice e podemos voltar aos nossos seis itens originais. Vamos excluir esses últimos 12, deixando os itens de um a seis e, de fato, também podemos remover as alturas, que você definiu anteriormente. Vamos excluir esta linha e também podemos comentar um conteúdo de linha do último vídeo. Por padrão, nossos seis itens aparecerão na tela na ordem de origem para que possamos ver o item um, até o item seis neste eixo principal. A propriedade do pedido nos permitirá reorganizar qualquer um desses itens. Vou começar criando uma nova classe de no CSS. Vou chamar isso de ordem e então podemos adicionar a propriedade do pedido. Vamos começar definindo isso para ser um. A propriedade order nos permitirá reorganizar qualquer um desses itens, então tudo o que precisamos fazer é adicionar essa classe de ordem a qualquer um desses itens. Vamos para o item dois e encomendar como uma classe. Fora do navegador e, em seguida, recarregue. Isso agora move nosso segundo item para o fim. Isso ocorre porque todos os itens têm uma ordem padrão, que é essa propriedade aqui de zero. Isso significa que nosso item dois agora tem um peso de um, movendo-o até o fim. Este número pode ser qualquer coisa como 10, 15 ou mesmo 30, por exemplo, e eles ainda aparecerão na ordem em que definimos. Números negativos também são permitidos, então definimos isso para negativo. Isto irá agora colocar o item dois, logo no início, uma vez que todos os seus itens têm uma ordem de zero. Isso é particularmente útil para mudanças em layouts com design responsivo. A ordem pode ser alterada em uma consulta de mídia. Eles têm layouts diferentes para diferentes tamanhos de tela, por isso é uma ferramenta realmente útil para ter. É assim que podemos reorganizar a ordem usando Flexbox. É realmente simples e apenas uma linha de código, mas você pode ver o quão eficaz isso pode ser. Em seguida, abordaremos como permitir que os itens cresçam e encolham com o espaço disponível. 8. Controlando itens filhos: aumentar e encolher: Vamos continuar olhando para como podemos controlar esses itens infantis. Mais especificamente, como eles crescem e encolhem para o espaço disponível. Para começar, vou descer, e reduzir nossa demonstração para quatro produtos. Também podemos remover esta classe de pedido. Em seguida, também o CSS correspondente logo acima. Para fazer isso, podemos usar uma propriedade chamada flex-grow e também flex-shrink. Vamos começar por dar uma olhada no flex-grow. Isso determinará como um item pode crescer ao longo do eixo principal. Nos momentos, o tamanho do item é controlado pela quantidade de conteúdo no meio, e também por qualquer preenchimento. Atualmente, eles não ocupam toda a largura da tela, que você pode ver no navegador. Se formos em frente e adicionar flex-grow a um desses itens como um estilo embutido, é claro que ele não precisa estar na linha. Ele também pode ser incluído no CSS2. Vamos adicionar o flex-grow, e definir isso para um valor de um. Salvar. Então nosso primeiro item ocupa muito mais espaço do que os três restantes. Basicamente, esses três itens aqui, número dois, três e quatro, sempre permanecerão do mesmo tamanho dependendo do conteúdo dentro. Em seguida, o que iria flex-crescer, vai ocupar o espaço adicional. Se fizermos o mesmo para o item dois, se copiarmos este flex-grow, então vamos ver o que isso faz. Os itens três e quatro, ambos ainda ocupam o mesmo espaço, sempre fizeram. Em seguida, o espaço restante é compartilhado igualmente entre os itens um e dois. Porque ambos têm um valor de crescimento flexível igual de 1. Se formos em frente e adicionarmos isso a todos os itens. Item 3 e item 4 também, agora vemos que todos os quatro itens compartilham a mesma quantidade de espaço. Este valor flex-grow de um, não é qualquer unidade de medida particular, como um pixel ou um m. É significativo quando comparado com o resto desses valores. A diferença acontece quando eles não são todos iguais. Se fizermos o Item 3, um valor flex-grow de dois, de para o navegador, e agora o item 3 tentará ocupar duas vezes a quantidade de espaço que o resto se estiver disponível, muda para ser três. Agora deve ser ainda maior. Enquanto essa propriedade flex-grow lida com como os itens crescerão neste eixo principal, se o espaço estiver disponível. Nós também temos flex-psiquiatra para. Isto trata de como os itens devem encolher se não houver espaço suficiente para eles caberem. Primeiro, vamos remover o rap comentando o fluxo flexível, que é esta linha aqui. Comando e avançando barra. Se estiver usando Visual Studio Code , podemos adicionar uma largura fixa de 600 pixels para o recipiente. Vamos adicionar isso na parte inferior. Largura de 600 pixels. Então podemos ter certeza de que esses itens não se encaixam em seu contêiner, definindo-os como uma largura, digamos 160 pixels. Então poderíamos fazê-lo assim e definir a largura do item para ser 160 pixels. Esta é uma maneira de fazê-lo, ou poderíamos usar uma nova propriedade flex-box, que é chamada de flex-basis. Vamos mudar isso para espaços de base flexível, e ainda 160 pixels. Esta base flexível define um tamanho padrão de um elemento, antes que qualquer espaço restante seja distribuído. Aqui, os quatro itens são muito largos para caber no recipiente. É aqui que entra o Flex-psiquiatra. Flex-Shrink determinará quais itens serão encolhidos para caber no espaço disponível. Vamos descer e mudar flex crescido para ser flexível desta vez. Eu troco para todos os quatro itens. Vamos definir os dois últimos como um valor de 2. Então atualize. Agora vemos que os itens 3 e 4 encolheram. Uma vez que um valor maior em comparação com os itens 1 e 2. Se passarmos por cima de um aumento, um desses itens será três em vez disso. Isso fará com que o item diminua mais quando não houver espaço suficiente para caber em um contêiner. Neste vídeo, analisamos o flex-grow, flex-encolhimento e flexo-base. Estas três propriedades podem ser combinadas na abreviação flexível como esta. Até o item, podemos comentar esta base flexível e, em seguida, substituí-lo por flex. Se fôssemos adicionar zero, um e, em seguida, auto. Estas são as configurações padrão. Zero, para começar, é um crescimento flexível. Um é para todos os flex-shrink, e então auto é para os espaços de bandeira que você adicionou logo acima aqui. Se salvarmos isso, e depois ver como ele fica no navegador, é assim que olharíamos com os padrões. Temos essa largura fixa de 600 pixels para o contêiner. Em seguida, nossos quatro itens iguais, porque eles estão todos definidos para o valor de zero. Podemos brincar com esses valores como antes também. Por exemplo, se definirmos todos os itens têm um valor flex-grow de um, então um e um, em seguida, sobre o navegador. Cada um deles agora ocupará o espaço disponível igualmente em um contêiner. Esta propriedade flexível é muito mais fácil e mais limpa, do que agora essas três propriedades separadamente. Agora terminamos com a análise de como os itens crescem e encolhem. Em seguida, vamos terminar olhando para a caixa flexível aprendendo sobre uma linha auto. 9. Controlando itens filhos: alinhamento: Anteriormente nesta seção, alinhamos o grupo completo de itens de várias maneiras. Isso funciona bem. Mas, às vezes, você pode querer que um item específico seja alinhado de forma diferente do resto. Mas neste caso temos a auto-propriedade align. Para começar, vou remover os estilos embutidos que acabamos de adicionar antes, e estes são os quatro itens abaixo. Remova os estilos embutidos, que é um flexão de valores de redução. Antes da fonte 2. Alinhar auto funciona como alinhar itens, que usamos no recipiente. Mas desta vez, adicionamos ao item, queremos controlar a série em ação. Eu vou colocar o recipiente para ser a altura total. Role para cima até a seção Estilo e, em seguida, vamos definir a altura para ser 100 vh, que lembre-se, é a altura da porta de exibição. Se formos para o navegador, assim como vimos com itens alinhados, o valor padrão é stretch, é por isso que estes são colocados na parte superior para a parte inferior da página. Para controlar um desses itens individuais, podemos adicionar align self e muda padrões. Vamos até os produtos e adicionar isso a qualquer um desses. Vamos reintroduzir o estilo. Desta vez, podemos adicionar align self, e vamos começar com o centro, em seguida, atualizar. Agora, estamos controlando um item individual em vez de todo o grupo de itens. Também temos algumas propriedades de aparência familiar, como início flexível, que devemos saber o que acontece agora se atualizarmos. Isso agora coloca isso no início do eixo. Se queremos distribuir colocado para baixo na parte inferior ou na extremidade oposta, também temos uma extremidade flexível, que já vimos antes. Isso nos dá algum comportamento esperado. Nós também temos a linha de base dois, que nós olhamos para fora para sobrevalores. Vamos alterar o flex terminar a linha de base, atualizar. Eles agora se alinharão com a linha de base do texto dos itens acima. Este é agora para o nosso olhar para o CSS flex-box. Você pode ver o quão útil pode ser para colocar sites. Em seguida, vamos cobrir outra técnica de layout chamada grade CSS. Vejo-te em breve. 10. Hora da prática: integração do flexbox na Tech Store: Antes de começarmos a aprender sobre a grade CSS, enquanto o flexbox ainda está fresco em nossas cabeças, eu gostaria que você saísse e agora praticasse alguma prática usando este flexbox. Este flexbox é uma maneira muito útil de colocar nossos sites. Mas assim como quando aprendem algo novo, eles podem parecer muito para assimilar no início. Torna-se mais fácil com a prática embora. Isto é o que eu gostaria que você prosseguisse e fizesse agora. Eu gostaria que você usasse algumas das técnicas flexbox que você aprendeu e então vá em frente e as aplique em nossos projetos têxteis. Você não precisa enlouquecer e reescrever completamente todo o CSS. Mas apenas tente mudar algumas coisas para incluir este flexbox, algumas idéias, qubits para fazer com que os produtos preencham automaticamente o recipiente. Ou você pode ir ainda mais longe e usar flexbox para alterar o layout de dispositivos de tamanhos diferentes. Vá de cabeça e dê uma chance e, em seguida, volte para aprender tudo sobre a grade CSS. 11. O que é o grid do CSS?: Agora passamos para outra técnica poderosa para estabelecer sites chamada grade CSS. Grid resolve praticamente todos os problemas de OGrid resolve praticamente todos os problemas delayout que os desenvolvedores da Web tiveram que contornar no passado. O flexbox, que acabamos de olhar, ajuda a resolver muitos desses problemas de layout também, mas é unidimensional. Nós só podemos trabalhar em colunas ou linhas ao mesmo tempo. Grid, por outro lado, é verdadeiramente flexível e nos permite trabalhar em duas dimensões. Isso significa que ele pode ser facilmente usado para layout de um site completo, enquanto flexbox geralmente é mais adequado para alinhamentos e posicionamento menores. Eles podem ser usados juntos e realmente trabalhar juntos muito bem. Não vamos perder tempo pulando direto para aprender sobre a grade. 12. Primeiras impressões de grid CSS: Ok, então vamos começar com a grade. Para começar, vou duplicar a pasta do projeto flexbox e, em seguida, renomear isso como grade. Então, sobre a área de trabalho ou o local onde você salvou seu projeto, eu vou duplicar esse projeto e então uma vez feito, vamos renomear isso, a grade. Abra isso no Visual Studio Code. Então também podemos abrir o índice ou HTML dentro do navegador. Isso vai dizer que estamos configurando todo o código HTML boilerplate, que precisamos para começar. Vamos passar para o índice ou HTML. Podemos fechar a barra lateral e, em seguida, fazer algumas alterações para limpar isso. Então, o título da grade. Em seguida, podemos remover todos os estilos do recipiente. Apenas deixando nesta cor de fundo. Também podemos reutilizar isto. Lotes de itens reutilizados também, selecione remover as propriedades flex, deixando em apenas uma cor de fundo e também o padrão é bom. Para baixo para a div, vai usar novamente o recipiente div e também os itens individuais, então vamos apenas remover a propriedade style de dentro de lá e, em seguida, estamos prontos para ir. Bom. Assim como com o flexbox, primeiro precisamos mudar o tipo de exibição do contêiner, mas desta vez, em vez de configurá-lo para ser flexível, usamos a grade. Então exiba com o tipo de grade e vamos ver o que acontece no navegador. Se recarregarmos, ainda não veremos nenhuma alteração. Quando definimos a grade, os itens filho do contêiner no nível do bloco, então faça a largura total da página. Se você quiser que os itens sejam inline, podemos alterar o tipo de grade para ser inline. Vamos passar para aqui e mudar isso para ser in-line grid, recarregar e, em seguida, todos os itens agora inline em vez de bloco. Vou ficar com grades por enquanto. Vamos remover isso em linha e restaurar isso de volta ao normal. Em seguida, declarar como queremos que esses itens sejam colocados para fora. Definimos o número de colunas e linhas que queremos usar. Vou começar com as colunas e isso é feito dentro do recipiente principal. Fazemos isso com a propriedade CSS chamada grid-template-columns e, em seguida, eu vou definir isso para ser 100 pixels e também o navegador. Para ver esses itens melhor, vamos adicionar uma borda ao redor do lado de fora de cada um e isso precisa ser feito dentro dos itens. Apenas uma borda simples de um pixel e linha sólida. Lá vamos nós. Nós apenas especificamos uma coluna no momento, que tem 100 pixels de largura. É por isso que os vemos empilhados em uma coluna como esta. Se quisermos mais de uma coluna, especificamos mais números. Então, logo após os 100 pixels para as colunas de modelo de grade, vamos adicionar uma segunda coluna de 300 pixels e, em seguida, uma terceira de 80. É assim que isso parece no navegador. Nós especificamos três tamanhos aqui. Os três primeiros itens desses tamanhos. Temos os primeiros 100, depois 300, e depois 80. Em seguida, quaisquer itens extras serão repetidos como vemos para este quarto item aqui em baixo, que cai na primeira coluna de 100 pixels. Isso pode ser melhor visto com mais itens. Vamos descer para o HTML. Agora, podemos duplicar um desses divs. Vamos colar isso em mais algumas vezes. Então 5, 6 e depois 7 e há nossos itens repetidos na segunda fila. Em seguida, ficamos com um item extra que é padrão para a primeira coluna. Essas colunas e também linhas, que veremos a seguir são conhecidas como faixas. No momento, temos uma faixa de 100 pixels por faixa, uma faixa de 300 pixels de largura e, em seguida, uma faixa de 80 pixels de largura à direita. Além disso, eles também não precisam ser dimensionados em pixels. Não podemos usar coisas que já sabemos. Então, cinco por cento ou mesmo auto para ocupar automaticamente o espaço restante. Em vez de 80 pixels aqui, podemos definir esta terceira faixa para ser automática e, em seguida, esta terceira faixa irá automaticamente ocupar o espaço restante. Agora, em linhas, no momento, a altura de cada uma das linhas é definida pelo conteúdo, isso inclui uma parte em dois. Usando o Visual Studio Code, podemos adicionar algum texto de exemplo chamado Lorem Ipsum. Vamos até um dos nossos itens. Digamos o item dois e se escrevemos lorem com um temporário, então obtemos mais conteúdo de texto. Vamos ver o efeito que isso tem no navegador. Esta primeira linha agora é mais alta devido ao conteúdo extra. Nós nem sempre queremos isso, mas muitas vezes queremos ter controle sobre isso nós mesmos. Este é o lugar onde grid-template-rows entra. Se voltarmos para o nosso contêiner, também podemos definir as linhas de modelo-grade e vamos definir isso para ser um valor de 100 pixels. Em seguida, volte para cima e todas as três linhas agora são definidas para 100 pixels de altura. Agora, o conteúdo não está mais no controle da altura porque nós o definimos para ser exatamente o que queremos. Assim como colunas, apenas definir um valor afetará apenas a primeira linha. Posso ir em frente e adicionar nossos valores. Vamos em frente e adicionar o primeiro. Digamos 250 pixels, 150 pixels, e depois 100. Está bem. Bom. Agora tem três faixas laterais individuais. Em apenas algumas linhas, controlamos o layout do nosso conteúdo em duas dimensões, usando colunas e linhas. Isso contrasta com a flexbox, que foi projetada para ser usada somente em uma dimensão de cada vez, uma linha ou coluna. Este é o nosso primeiro olhar para as grades. Há muito mais ainda para cobrir embora e vai continuar no próximo vídeo. 13. Espaçamentos de grid: No último vídeo, adicionamos uma borda em torno desses itens da grade. Voltaremos para ver como estão dispostos. Se passarmos para o CSS e removermos essa borda e voltarmos para o navegador. Torna-se difícil ver as linhas e colunas. Por padrão, não há espaço entre as colunas e linhas, mas para corrigir isso podemos usar lacunas de grade. Para adicionar uma lacuna de grade entre colunas, temos grade-coluna-gap. Isso também é aplicado ao recipiente. Então vamos em frente e adicionar grid-column-gap. O valor era para nós. Então vamos começar com 10 pixels e isso irá adicionar um intervalo de 10 pixels entre cada uma das colunas. Como você deve ter adivinhado, há também grid-linha-gap também e você pode adicionar isso também para o recipiente. Então grid-linha-gap e permite novamente definir isso para ser 10 pixels, atualizar. Há um intervalo de 10 pixels entre as linhas e as colunas agora. Observe como essas lacunas apenas entre as linhas e colunas, não ao redor da borda. Isso resolve um dos problemas antigos que tivemos ao espaçar novos itens usando métodos CSS como a margem, onde o espaço estará ao redor dos elementos, até mesmo a borda circundante por padrão. Além disso, há uma versão abreviada também chamada grid-gap. Então, ao invés de ter duas linhas de código aqui, podemos remover estes e, em vez disso, usar grid-gap. Assim como quando se usa margem e preenchimento, podemos definir dois valores. O primeiro é para as linhas, então 20 pixels e, em seguida, para as colunas, 10 pixels e, em seguida, atualizar. Ou se quiséssemos que um valor fosse aplicado a ambas as linhas e colunas, podemos simplesmente deixar em um valor, como 10 pixels, e, em seguida, ele deixa lacunas iguais ao redor. Você pode ver o quanto podemos controlar com apenas algumas linhas de CSS. Esse tipo de layout sem a grade seria muito mais complexo e demorado. Isto é agora para lacunas de grade. Em seguida, veremos como repetir faixas e também definir os tamanhos mínimo e máximo. 14. Faixa de repetição e a unidade fr: Neste vídeo, vamos analisar algumas maneiras de ter um melhor controle sobre nossos trilhos. Primeiro é como repetir faixas que têm os mesmos tamanhos. Se quiséssemos que todas as nossas colunas tivessem 200 pixels de largura, assim como esta. Em vez de definir tudo livre, se tivéssemos 200 pixels, já sabemos que o valor sã como este, só resultará em uma coluna sendo exibida. Para ajudar com isso, os provedores de grade irão repetir, para que possamos adicionar isso dentro de nossas colunas. Vamos adicionar repetições e, em seguida, podemos adicionar nosso valor dentro dos colchetes como este. Ainda mantemos o tamanho do caminhão aqui, mas antes disso adicionamos o número de vezes que queremos que ele repita. Se quisesse quatro colunas, faríamos quatro em 200 pixels, e recarregar, e itens de quatro colunas com igual largura. Ainda estamos livres para adicionar mais faixas individuais antes ou depois. Se quiséssemos que o primeiro fosse 100 pixels, e depois repetir antes ou depois, simplesmente adicionamos um novo valor antes disso. 100 pixels e, em seguida, eu vou repetir depois. Isso nos dá nossa primeira coluna com 100 pixels de largura, e quatro colunas repetidas com 200 pixels cada. Se quiséssemos que uma quinta pista ocupasse o espaço restante do lado direito, também poderíamos fazer isso. Poderíamos adicionar um tamanho fixo ou poderíamos reutilizar a propriedade auto, que já vimos antes, atualizar e agora temos um item extra no final. Ou, alternativamente, se soubermos quantas colunas queremos usar, também podemos definir este auto para, selecionar remover auto do final, e o primeiro valor, e digamos que queremos colunas livres. Também podemos usar auto dentro das repetições. Lá vamos nós. Há nossas três colunas e agora as faixas são redimensionadas automaticamente para o conteúdo. Em seguida, quero mostrar a vocês uma nova unidade de medida chamada unidade fi, que é abreviação de fracionário. Esta unidade refere-se a uma parte do espaço disponível. Funciona como cedo o que olhamos, valores flexíveis, onde um valor de um é uma parte do espaço disponível e o valor de três é três vezes maior. Vamos adicioná-lo às nossas colunas e ver o que acontece. Sempre que você criar colunas de modelo, em vez de auto, podemos adicionar um fi, e atualizar. Agora, a largura de nossas colunas não depende do conteúdo. Todos eles ocupam o mesmo espaço disponível e, claro, adicionando uma nova coluna em fi, ocupará o dobro do espaço disponível. Adicione uma quarta coluna, atualize. Isto agora é o dobro do tamanho destes três, como seria de esperar. repetição também pode ser aplicada a linhas também. Logo abaixo, também podemos adicionar repetições. Novamente dentro do colchete, adicionamos quantas linhas queremos e, em seguida, o tamanho e, em seguida, removemos nossa última coluna do topo. Agora, para recargas, obtenha três linhas de tamanho igual também. Novamente, nossas linhas também podem ser misturadas com outras faixas de tamanho também, que significa que isso é realmente flexível de usar. 15. Tamanhos de faixa mínimo e máximo: A grade CSS também nos permite definir um intervalo para o tamanho do caminhão adicionando o tamanho mínimo, máximo, que deve ser. Fazemos isso com a função min-max e podemos fazer isso dentro de nossas colunas ou linhas. Se formos para as colunas para começar, podemos remover este repete e, em seguida, substituí-lo com a função max min. Dentro dos colchetes, isso também leva em dois valores. O primeiro é o tamanho mínimo da coluna. Digamos 160 pixels e, em seguida, o segundo valor é o tamanho máximo, vamos para 200 pixels. Esta seção será aplicada à primeira coluna e vamos adicionar mais algumas colunas em. O segundo modo pode ser um fr, e então o terceiro fará o dobro do tamanho de 1fr, depois para o navegador. Este primeiro é o que nos interessa. Este é um usando mínimo-máx e o tamanho deve estar entre 160 e 200 pixels. Para verificar se isso está funcionando, abrimos as ferramentas do desenvolvedor e inspecionamos a primeira coluna. Vamos falar com o inspetor. Se abrirmos este item, podemos ver o tamanho está definido para 200 pixels. Então o segundo é 1fr, então vamos tomar um caminho do espaço disponível. O terceiro é definido em 2fr, por isso deve ser o dobro do espaço disponível. Este é 518 e este é 259, que é exatamente metade. Também podemos ver melhor este mínimo-máx em ação, diminuindo o navegador para um tamanho menor. Em seguida, deixe abrir sobre este primeiro item novamente e você pode ver, mesmo que seu navegador é realmente pequeno, agora temos um valor mínimo de 160 pixels. Esta função min-max é realmente útil quando queremos ter controle fino sobre o tamanho da nossa tela e é assim que podemos usá-lo. 16. Números da linha de grid: Cada uma das faixas que criamos, mesmo em uma linha ou coluna tem essas linhas de grade numeradas entre elas. Estas linhas de grade começam em um, que é o início da pista, em seguida, continuar ao longo da direção da grade até o final da pista. Aqui vemos que temos nossas faixas de coluna numeradas de 1-5, e as linhas numeradas de 1,2,3,4. Mas por que precisamos saber isso? Bem, podemos usar esses números de linha de grade para posicionar um elemento, exatamente onde queríamos estar em uma grade. Usamos início de linha de grade, fim de linha de grade, início da coluna de grade e final da coluna de grade para especificar começando em posições finais em cada eixo, onde queremos colocar um elementos. Aqui temos um elemento entre as linhas dois e três na linha, e depois entre as linhas três e quatro para as colunas. Vamos falar com o editor de texto e dar isso nós mesmos. Para começar eu vou replicar esta grade dos slides, abrir as colunas do modelo de grade, vamos adicionar uma repetição, vamos remover o mínimo-máx, e então desta vez eu vou repetir e simplesmente adicionar quatro colunas a 1 fr cada, e, em seguida, para as linhas podemos repetir três, em 1 fr também e estes podem ser todos iguais. Ao ver isso em ação, também precisamos de mais alguns itens. Vamos copiar uma dessas divs, os itens, e depois colar, e vamos para 12 itens. 8, 9,10,11, e depois 12, e lá como nossos 12 itens na tela, posicionamento com essas linhas de grade serão as primeiras propriedades que cobrimos até agora, que se aplicam ao item em vez de um contêiner. Vou mudar a aula de um desses itens. Vamos passar para os itens, e vamos para este, e mudá-lo para o item um, e então mudar a cor de fundo e o CSS, então isso se destaca um pouco mais. Item um eu vou para a cor de fundo, isso pode ser qualquer coisa, mas azul claro é bom e atualizar, e agora temos um item que acaba, ótimo. Agora vamos começar a trabalhar com este item, iniciado com o exemplo dos slides. Se formos para o nosso item um CSS, podemos começar com a linha de grade começa, que vimos nos slides, e esta é a posição inicial na linha, então vamos para a oposição dois, e precisamos também adicionar fim da linha da grade para a posição final. Novamente, passando pelos slides, esta é a posição três e, em seguida, o mesmo para as colunas. Colunas de grade começam, posição três, extremidade da coluna da grade, posição quatro e oposto ao navegador. Observe como este item é movido e todo o resto se ajustou e ainda permaneceu em ordem. Essas linhas de grade podem ser qualquer número para colocar seu item em qualquer lugar na grade, ou pode até mesmo abranger várias linhas e colunas. Se quiséssemos que este item azul também ocupasse a linha abaixo dele, poderíamos ir para o CSS e alterar o fim da linha da grade, desta vez para ser o número 4. Recarregar e agora se estende através de duas linhas de grade, mesmo com as colunas dois. Se quiséssemos que os itens também se estendessem pela coluna à direita, poderíamos simplesmente ajustar os números. O final da coluna da grade, para ser o número 5, e lá vamos nós, e ainda todos os itens irão fluir e também manter a ordem. Há também alguma sintaxe abreviada também, para tornar isso ainda mais simples. Ao invés de ter quatro linhas em nosso CSS, se comentarmos isso, podemos usar linha grade. Novamente esta linha de grade, podemos adicionar nossos dois valores de linha de grade, de dois e quatro, separados por uma barra, e então nós também temos uma abreviação para coluna de grade, que como você deve ter adivinhado, é uma coluna de duas grade tamanhos de três, e depois cinco, e se agora dermos uma olhada nisso, depois de recarregar, tudo ainda parece o mesmo, mas em vez disso temos isso em duas linhas. Finalmente, há uma versão ainda mais curta também chamada área de grade. Vamos também comentar nossas duas linhas aqui, e então abaixo disso podemos e para área de grade, mas desta vez nós adicionamos nossos quatro valores. Precisamos ter muito cuidado porque os dois primeiros valores são nossas duas subdivisões iniciais. O primeiro é o início da linha e, em seguida, temos início da coluna, modo que os dois primeiros valores são dois e, em seguida, três. Então, as duas últimas são as nossas duas posições finais, que é esta, quatro e depois cinco. Novamente, não devemos ver nenhuma diferença dentro do navegador, mas desta vez o CSS está apenas em uma linha, mas tenha cuidado com a ordem de adicionar os quatro valores. Grid também nos fornece a ferramenta de palavra-chave span. Isso nos permite especificar a linha que queremos começar, em seguida, quantas linhas ou colunas queremos estender através. Se você quiser duplicar o exemplo para também ocupar esta linha inferior dois aqui em baixo, nós poderíamos começar a nossa posição dois, como nós já fazemos. Em seguida, estendem-se através de nossas três filas, então um, dois e três. De volta à nossa área de grelha. Em vez da extremidade da linha a ser definida como quatro, podemos dizer extensão através de três linhas. Veja como isso parece, bom. Agora começamos na mesma posição e extensão, um, dois e três. Espalhar-se por várias faixas como esta é realmente útil para definir nossas páginas web. Por exemplo, poderíamos estender pela linha superior, para criar uma área de cabeça, ou seção fora de uma área para a barra lateral, e também seção principal. Este é agora quatro números de linha, e eu vou vê-lo no próximo vídeo. 17. Nomes da linha grid: No último vídeo, olhamos para as linhas de grade e como elas são numeradas. grade também nos dá a capacidade de nomear essas linhas de grade para algo mais apropriado. Muitas vezes, você encontrará nomes como início da linha ou fim da linha. Outra maneira útil é nomeá-los relacionados com a seção de toda a página, como um cabeçalho, rodapé, barra lateral e assim por diante. Agora vamos voltar a adicionar propriedades ao contêiner. Podemos devolver o item 1 a apenas ser item. Vamos remover o do final daqui e agora, se nós rolar de volta para o nosso CSS container, podemos ir em frente e adicionar nossas colunas. Vamos remover esta repetição daqui e tudo o que precisamos fazer é adicionar um nome dentro dos colchetes para cada coluna, seguido pelo tamanho da pista. Abrimos e fechamos os colchetes. Podemos definir o nosso primeiro para ser chamado primeiro e, em seguida, o tamanho de 1FR. Podemos então repetir isso com os colchetes novamente e chamar este segundo e isso pode ser 2FR. Se quisermos a terceira coluna, exatamente o mesmo. Nome é terceiro, nomeado 1FR e, em seguida, no final, podemos nomear este último e definir este para ser 2FR. Lembre-se desses nomes dentro dos colchetes, totalmente até você. Vamos ver como isso parece e vamos ver como somos quatro colunas em ação. Nossa, nossas quatro colunas com 1FR, duas, uma e depois duas. Além disso, em vez de usar nomes individuais como acabamos de fazer, podemos repetir o mesmo nome para cada faixa, como col-start e depois col-end, col-start 2, col-end 2, start 3, end 3, start 4 e, em seguida, end 4. Para conseguir isso, tudo o que precisamos fazer é adicionar col-start e também col-ends. Em seguida, esses números serão adicionados automaticamente após cada um para distinguir entre cada coluna e também podemos fazer exatamente o mesmo para as linhas 2. Podemos conseguir isso voltando ao projeto e usando repetição. Para começar a adicionar este col-start e col-end para cada coluna, podemos ir em frente e usar o método de repetição de antes e excluir os quatro nomes individuais, em seguida, ir em frente e adicionar repetição. Dentro dos colchetes vou adicionar quatro colunas. Então adicione quatro separados pela vírgula. Então podemos ir em frente e adicionar nossos colchetes. O primeiro valor que vamos definir como col-start e este é o nome para o início de cada coluna individual. Será col-start, depois col-start 2, col-start 3 e assim por diante. Então o tamanho que queremos que cada coluna seja a menos que eu queira que seja 1FR. Em seguida, um segundo conjunto de colchetes para adicionar o nome ao final de cada coluna. No nosso caso, vamos usar col-end e, em seguida, salvar isso e também fazer o mesmo para as linhas abaixo. Podemos manter três filas, tudo bem. Podemos adicionar o nome de linha-start, o tamanho de 1FR e, em seguida, nosso nome final de linha dar que salvar e, em seguida, atualizar. Então estamos de volta a um padrão para quatro por três layout de grade. Agora podemos ir em frente e adicionar nosso item uma classe de volta no lugar e podemos mover o item para onde queremos usar esses nomes de grade. O primeiro, está sob a classe do item 1. Assim podemos ver o item azul novamente. Para deixar as coisas mais claras, vou comentar a área de grade que usamos aqui para o item 1 e depois voltar a usar esses quatro valores individuais para que seja um pouco mais fácil de trabalhar. Você pode ter a fila para começar às duas e quatro? Vamos deixar isso por enquanto. Em vez disso, para as colunas, vamos para col-start e, em seguida, terminar posição para mim col-end. Lembre-se que estes são os nomes que colocamos acima dentro dos colchetes. Recarregue o navegador. Como esperado, temos a linha de início na posição dois, que é um e depois dois, e então termina na posição quatro que começamos com esses dois valores aqui. Em seguida, definimos as colunas para ser o início da coluna e a extremidade da coluna. Lembre-se que a col-start e col-end é a posição inicial e final da nossa primeira coluna. É por isso que só ocupou uma secção aqui. Se quiséssemos que isso abrangesse duas colunas como sobre este aqui, que então muda para ser col-end 2. Agora, isso começa no início da primeira coluna e termina no final da coluna 2. Agora queremos as fileiras. Se definirmos o primeiro valor para ser linha-start e, em seguida, o segundo para ser linha-end 4 do navegador. Agora, isso começa no início da linha que é a primeira linha aqui e depois termina na linha 4 que é a quarta aqui. Não fazemos nada diferente aqui do que já aprendemos. A única diferença é que estamos referenciando essas linhas de grade por um nome em vez de um número. Em seguida, vamos olhar para como podemos usar áreas de modelo de grade para layout um sites completos. 18. Áreas de modelos de grid: Junto com elementos de posicionamento com essas linhas de grade, também podemos criar áreas completas, como cabeçalho, conteúdo, barra lateral e rodapé. Grid nos fornece uma propriedade chamada áreas de modelo de grade para fazer isso. Primeiro de tudo, precisamos pensar sobre como nossa grade será estruturada usando linhas e colunas. Olhando para o diagrama aqui, temos um cabeçalho em uma linha, conteúdo e barra lateral na próxima linha, e finalmente um rodapé na terceira linha. Portanto, não precisamos de três linhas da grade. Só precisamos de duas colunas para o conteúdo e a barra lateral. Lembre-se, as áreas de cabeçalho e rodapé vão se estender por essas duas colunas. É assim que nossas linhas de grade vão olhar uma vez que definir as linhas livres e duas colunas caminhões. Vamos voltar para o editor de texto e ver isso em ação. Vamos começar a trabalhar com a configuração disso. Vamos trabalhar com estas áreas de rede, para começar. Podemos comentar todos esses 12 itens. Vamos remover tudo isso por enquanto com o comentário. Em seguida, dentro do recipiente, podemos começar a trabalhar com a adição do nosso cabeçalho. Adicione os elementos de subcabeçalho e o texto do cabeçalho 2, também tivemos uma seção principal para o conteúdo, depois barra lateral, com os elementos laterais, e depois para baixo na parte inferior também tinha um rodapé. Podemos ver melhor essas áreas, vamos adicionar uma borda a todas as quatro. Dentro da seção Estilo, vamos para o cabeçalho, o principal, o lado e o rodapé. Adicione a propriedade border de um pixel e, em seguida, uma linha tracejada. Para o navegador, clique em Atualizar e há nossas quatro áreas de conteúdo que acabamos de adicionar. Em seguida, de volta para nossas linhas e colunas de modelo de grade, e podemos começar a configurar isso, então até o topo. Lembre-se, para as colunas, precisamos de dois, um para a seção de conteúdo e um para a barra lateral. Remova as repetições e a primeira pode ser 3fr, na barra lateral pode ser menor, então 1fr está bem. Em seguida, para as fileiras. Precisamos de três linhas, uma para o cabeçalho, uma para o conteúdo e outra para o rodapé. O cabeçalho pode ser 1fr, 3fr para o conteúdo principal e, em seguida, 1fr para o rodapé. Se agora recarregarmos o navegador, é assim que todas as quatro seções serão agora. Desde que definimos duas colunas, os quatro elementos são dispostos nas duas linhas, como você vê aqui. Vamos começar a trabalhar com a mudança neste com a nossa área de Modelos de grade. Vamos adicionar a propriedade CSS em, áreas de modelos de grade. Lembre-se do “S “no final. Com esta propriedade, configuramos nomes para cada seção. Estes nomes são organizados como uma mesa. Temos duas colunas e três linhas, então nossos nomes são organizados como uma tabela de três por dois. Adicionamos as cotações para a nossa primeira linha e, em seguida, podemos adicionar a nossa segunda linha e, em seguida, uma terceira linha logo abaixo. Lembre-se de adicionar o ponto-e-vírgula bem no final também. Queremos que a área do cabeçalho abranja essas duas colunas superiores. Nós adicionamos cabeçalho na primeira coluna e, em seguida, cabeçalho na segunda coluna também, para fazer com que isso abranja a direita em toda a linha. Mas na nossa segunda linha, queremos que o conteúdo fique à esquerda e, em seguida, uma barra lateral à direita. Em seguida, a parte inferior, assim como o cabeçalho, queremos que a área do rodapé abranja ambas as colunas. Se salvarmos isso, não veremos nenhuma diferença no navegador ainda, mas atualizamos. Primeiro precisamos colocar nossos itens dentro das seções. Fazemos isso com as mesmas quatro propriedades que já usamos. Se formos até o Item 1, usamos linha de grade, inícios, fim de linha, início de colunas e final de coluna, ou podemos usar uma abreviação de linha de grade e coluna de grade, que já pesquisamos. Vamos preparar isto. Primeiro de tudo, podemos direcionar o cabeçalho. Nós definimos o tamanho deste cabeçalho usando linha de grade e coluna de grade. Primeiro de tudo, linha de grade, esta pode ser a seção de cabeçalho que configuramos para cima no topo, modo que é apenas aqui e, em seguida, o mesmo para coluna de grade. Logo abaixo desta coluna de grade adicionar e também definir a área de cabeçalho que criamos. Em seguida, repetimos isso para o lado principal e rodapé. A seção principal que definimos a linha da grade para ser o conteúdo e, em seguida, a coluna da grade para também ser o conteúdo também. Nós também criamos uma área para a barra lateral e vamos dar a isso um nome de barra lateral aqui. Para baixo para a seção da barra lateral, que era os elementos de lado. Assim como antes de fazer linha grade e definir isso para ser a coluna grade barra lateral. Esta é a Barra Lateral 2. Então, finalmente, a área do rodapé. Linha de grade, o nome do rodapé e coluna de grade e este é o rodapé também. Salve isso e, em seguida, Oh para o navegador e atualize. Bom só para recapitular, temos nosso cabeçalho espalhado pelo topo. Isso ocorre porque nós definimos o cabeçalho para ter linha de grade e coluna de grade deste modelo de cabeçalho que definimos acima. Apenas aqui que se estende através de nossas duas colunas da primeira linha, seguida, definir a segunda linha a ser dividida entre o conteúdo, que vai ser a seção 3fr e, em seguida, a barra lateral vamos ser 1fr. Nós definimos estes abaixo, novamente usando linha de grade e coluna de grade para o lado e a seção principal. Então, na parte inferior, definimos a área do rodapé e assim como o cabeçalho, isso também se estende pelas duas colunas. Definindo o rodapé e o cabeçalho para ser a largura total da página. Bom. Isso deixa nosso layout agora completo e como pretendíamos usar áreas de modelo de grade. Em seguida, vamos dar uma olhada nas grades de nidificação. 19. Grids aninhados: Este layout de grade é agora como pretendíamos. Mas e se você quisesse aninhar nossos 12 itens dentro da seção principal como uma grade também? Vamos nos dar uma chance e ver o que acontece. Se voltarmos aos nossos projetos e depois reintegrarmos os nossos 12 itens. descomentar esta seção aqui e também remover a classe do item um. Então podemos ir em frente e cortar esses itens e depois colocá-los dentro de nossa seção principal. Corte essas fora. Em seguida, podemos remover os textos de conteúdo. Vou colar isto dentro desta secção principal. Temos o cabeçalho no topo, a seção principal com 12 itens aninhados, a barra lateral e o rodapé. Vamos ver como isso inicialmente parece dentro do navegador. Os itens estão todos lá. Mas se rolarmos para baixo, eles não estão em um layout de grade. Os itens são apenas exibidos como elementos de nível de bloco. O elemento principal é aparente para esses itens. Podemos mudar o tipo de exibição para ser a grade do NCSS. Vamos até a seção principal e, em seguida, alterar o tipo de exibição para ser grade. Também podemos dar a isso uma lacuna de grade também, vamos adicionar cinco pixels para a lacuna. Vamos ver o que acontece agora isso no lugar, temos que atualizar. Mercadorias agora têm nossa lacuna de grade aqui. Em seguida, precisamos definir quantas colunas e linhas queremos exatamente como faríamos normalmente. Isso novamente está dentro da seção principal. Vamos adicionar as colunas do modelo de grade. Vamos para repetições. Temos quatro colunas, uma FR. Em seguida, as linhas do modelo de grade logo abaixo. Repita estes também. Em seguida, basta adicionar um FR para adicionar tantas linhas quanto necessário e mantê-las todas iguais também. Para o navegador, atualize. Agora temos aninhado nossa grade dentro da área de conteúdo principal. Assim como antes quando olhamos para o Flexbox, a grade também nos permite ter um controle mais fino sobre como os itens individuais estão alinhados. Isto é o que vamos cobrir a seguir. 20. Alinhamento: Agora vamos nos afastar do nosso layout e nos concentrar no alinhamento. Muito do que abordamos neste vídeo é semelhante ao flexbox, onde alinhamos itens no início e centralizamos o estiramento para preencher espaço. Coordenar os itens ocupou todo o espaço disponível. Precisamos fazer os itens um pouco menores para alinhá-los. Vamos primeiro comentar as faixas e estes são os que estão na seção principal. As colunas do modelo e as linhas do modelo definem um tamanho para os itens. A classe Items, que terá apenas aqui, vamos primeiro remover o preenchimento e, em seguida, adicionar uma altura aos itens individuais de 60 pixels. Recarregar, podemos ver por padrão os itens são definidos um trecho ao longo da linha. Primeiro vamos olhar para justificar itens, que adicionamos ao contêiner para afetar todos os itens filhos como um grupo no eixo da linha. Muitos destes já serão familiares, como fim para colocar os itens no final da linha e também começar. Vá até a seção principal, que é um contêiner para esses itens da grade. Apenas aqui podemos adicionar, justificar itens e defini-los para o fim, atualizar. Agora todos os itens são empurrados para o final da linha. Nós também temos início e você provavelmente pode adivinhar o que isso faz também, isso move tudo para o início. Lembre-se o segundo item que é usado aqui, se nós rolar para baixo, tem mais texto. Portanto, ele preenche mais o espaço disponível. Podemos restabelecer isso para todos os itens se moverem da mesma forma. Vamos renomear este item dois. Lá vamos nós, todos os itens agora são iguais. O valor padrão para isso é stretch, selecione replace, start with stretch. Quanto você obtém o mesmo efeito que você começou com, nós também teremos centrado também. Isso substituirá todos os itens no centro da linha com a largura sendo determinada pelo conteúdo interno. Também temos a opção de linha de base se estivermos alinhando o texto. Em seguida, também podemos usar itens de alinhamento. Isso também se aplica ao contêiner pai, afetará os itens ao longo da coluna desta vez em vez da linha. Para dizer isso, precisamos de mais altura para trabalhar. Dentro da seção principal, vamos fazer o principal um pouco mais alto. A altura de 1200 pixels e, em seguida, podemos definir itens alinhar. Vamos começar com o centro para o navegador, atualizar. Agora teremos uma seção principal mais alta e todos os itens estão alinhados ao centro. Podemos ver no topo que temos uma lacuna igual no topo aqui e também a seção inferior também. Eu não vou passar por todas essas opções porque podemos usar os mesmos valores que acabamos de olhar e todos funcionam da mesma maneira, mas desta vez no eixo oposto. As próximas duas propriedades que aplicamos aos itens filho para controlá-los individualmente. Vamos reintroduzir nossa classe item um. Isso pode ser qualquer um dos itens. Vamos apenas adicionar isso e, em seguida, podemos controlar esses itens individuais. Em seguida, faça backup para a seção principal, indo para comentar, justificar itens, e também alinhar itens também para que eles não interfiram. Agora podemos voltar para o item um e, em seguida, podemos alinhar item individual, mas desta vez usamos justificar-se. Vamos começar com o fim e depois para o navegador, atualizar e porque isso também funciona na linha, isso empurra este item azul para o fim. Na verdade, eu acho que isso está sendo um pouco confuso com essas colunas de grade. É agora que temos todos esses itens, definir o trecho, e, em seguida, este item individual no final da linha. O Centro também fará o esperado e moverá este item para o meio da linha. Mudanças para ser o centro, e lembre-se que teremos todas as mesmas propriedades disponíveis como acabamos de olhar para cima. Salve e, em seguida, atualize e esse é o nosso item agora no centro desta linha. Se um deve ser centrado na coluna em vez da linha. Nós também temos o auto-alinhamento. Vamos dar uma chance e também definir isso para ser o centro. Agora isso está centrado na linha e coluna. Usar ambos justificar-self e alinhar-self juntos é uma maneira muito fácil de centralizar um item tanto vertical como horizontalmente. Isso costumava ser muito mais complexo antes da grade e da flexbox. Vamos em frente e tentar mais uma, alinhar- self, definir isso no final. Dê uma olhada nisso e agora o item é empurrado para o fundo. Podemos ver que temos muitas opções úteis ao usar a grade, que causa praticamente qualquer tipo de layout que precisaremos. 21. Hora da prática: layout do localizador de músicas: Mais tarde neste curso, estamos construindo este aplicativo, onde o usuário pode procurar por um artista ou uma música e eles são exibidos como uma grade. Por exemplo, se escrevermos um artista aqui dentro, assim como este, e, em seguida, clicar em “Pesquisar” irá apresentá-lo com uma lista de músicas. Também tínhamos um reprodutor de áudio para reproduzir uma pré-visualização destes. Criaremos isso mais tarde na seção API. Temos a arte do álbum, o artista, título da música e este leitor de música na parte inferior, que vamos tocar nos primeiros 29 segundos. Todas essas informações de música serão fornecidas conectando-se ao iTunes usando uma API. Se você ainda não tem certeza do que é uma API, não se preocupe com isso. Cobriremos tudo o que precisa saber mais tarde. Mas vamos começar nesta aplicação criando o HTML e CSS que precisamos incluir o layout de grade CSS. Em seguida, podemos pedir a funcionalidade em uma seção posterior. Vamos fazer isso um pouco diferente dos exercícios práticos. Vou passar por esta configuração do projeto e também o código HTML junto com [inaudível], é assim que temos o mesmo HTML. O que significa que podemos fazer as mesmas coisas quando adicionarmos o JavaScript mais tarde, para que não haja confusão. Então eu vou deixar você para ir em frente e completar os projetos CSS por si mesmo para dar-lhe alguma prática extra, aplicando nas propriedades da grade. Vamos começar criando a pasta do projeto. Vamos fechar isso e, em seguida, criar uma pasta de projeto. Novamente, você pode adicionar isso em qualquer lugar. Quero ligar para o meu, o Localizador de Músicas abre isto no editor de texto. Vou arrastar esta pasta do projeto para lá. Então podemos ir em frente e criar um novo arquivo chamado index.html. Para começar, vamos adicionar a estrutura HTML. Eu vou estar usando o HTML cinco atalhos e, em seguida, pressione “Tab” para groove esta nossa estrutura. O título do documento, de Song Finder. Em seguida, para a seção do corpo. Vamos começar com a área do cabeçalho e, em seguida, atribuir título em h1 do Localizador de Músicas. Vamos abrir isso dentro do navegador e verificar se tudo está funcionando bem. Lá vamos nós, lá está o título da nossa música na página de índice. Então precisamos de uma área de entrada para digitar o nome da música do artista. Vamos começar com um rótulo, e vamos chamar isso de entrada de pesquisa. Em seguida, o texto de pesquisa para o seu artista favorito e, em seguida, feche este rótulo no final. Aqui também podemos adicionar nossa entrada, com o tipo de texto. Em seguida, o id que corresponde a esta entrada de pesquisa. Então, depois disso, precisamos de um botão. Este vai ser o botão que vai em frente e completa a nossa busca. Basta adicionar um botão simples lá dentro. Em seguida, uma linha horizontal na parte inferior apenas para seção fora destes cabeçalho. Recarregue e veja como isso está parecendo. Esse é o nosso rótulo ou caixa de texto e o botão, rolando para baixo abaixo desta seção de cabeçalho. Vamos criar a seção principal. Esta vai ser a área onde todas as nossas músicas aparecem. Por enquanto, vamos dar a isto uma identificação de músicas. Então, dentro daqui, podemos adicionar um artigo. Este artigo vai ser o wrapper para cada uma das músicas individuais. Cada música individual precisa de uma imagem. Por agora eu vou apenas adicionar alguns dados fictícios ou alguns exemplos apenas para ver como ele vai ficar na tela. Podemos ir em frente e estilizar isso com o CSS. Todo este texto e imagens serão substituídos mais tarde por alguns dados que são retirados do iTunes. Podemos ver esta imagem, vou adicionar uma largura de 100 pixels, uma altura de 100 pixels também. Em seguida, adicione uma propriedade de estilo apenas para que possamos ver esta imagem, fundo de azul. Agora devemos ver um quadrado azul na tela. Em seguida, podemos adicionar as tags p. Isto vai ser para o nome do nosso artista. Qualquer artista e música é bom, então basta adicionar qualquer coisa aqui dentro. Em seguida, um segundo conjunto de elementos p para o nome da música. Então, finalmente, vamos olhar para um novo elemento que ainda não vimos, e este é o elemento de áudio HTML5. Isso nos permitirá reproduzir nossa música dentro do navegador. Ele precisa de um atributo fonte que você pode deixar vazio por enquanto. Também o texto dos controles, que nos dará alguns controles para trabalhar, como o nosso jogo, que também se transforma em uma pausa, o temporizador e também a barra de progresso. Agora vamos copiar este artigo e colar para que tenhamos seis deles. Então, dois, três, quatro, cinco e seis e então salve e recarregue. Agora eu tenho seis itens diferentes na tela. Lembre-se deste HTML, é apenas texto de espaço reservado em imagens. Todos esses dados serão extraídos mais tarde da nossa API. Por agora, porém, vou deixar você com você para criar um link para uma folha de estilo externa, aplicar algum estilo e também um layout de grade para as músicas. Não há uma maneira certa ou errada de fazer isso, apenas estilo como quiser. Mas eu recomendaria pelo menos aplicar a grade. Não precisa ser nada complexo. Apenas uma grade simples com colunas livres e uma lacuna de grade será bom. Boa sorte. Vejo-te na próxima secção. 22. O que é Bootstrap?: Bem-vindo de volta a esta nova seção. Aqui vamos dar uma olhada em um dos frameworks mais populares para a construção de sites, que é chamado Bootstrap. Bootstrap Crony, na versão mais recente da versão 4 é de código aberto e livre de usar, é uma biblioteca para HTML, CSS e também JavaScript, que ainda não olhamos, mas não se preocupe com isso no momento. Você pode encontrá-lo em getbootstrap.com. Alguns dos componentes que usaremos no Bootstrap, como um carrossel, exigem JavaScript para funcionar. Mas não precisamos saber qualquer JavaScript nesta fase para usá-los. Bootstrap nos permite começar rapidamente a construir projetos, e também nos permite tirar proveito de muitos componentes pré-construídos, como barras de navegação, carrosséis de imagem e formulários, para citar alguns. Começar também é muito fácil. Podemos simplesmente adicionar Bootstrap ao nosso projeto como qualquer outro arquivo CSS, e começar a escrever nosso site como normal. Podemos então usar um componentes pré-construídos ou escrever nosso próprio HTML como normal e, em seguida, tirar proveito das classes CSS Bootstrap fornecidas a nós para nos dar algum estilo base para construir sobre. Se formos em frente e abrir a documentação da barra de navegação, há muito para passar, e vamos cobrir muito disso para esta seção. Primeiro de tudo, eu vou para os componentes do lado esquerdo e clicar sobre isso. Aqui dentro podemos ver todas as diferentes ferramentas de componentes disponíveis. Por exemplo, se quiséssemos uma barra de navegação, clicamos na seção da barra de navegação e, em seguida recebemos mais algumas informações sobre como usá-la. Nós também obtemos muitos exemplos de código, e também a demonstração. Se quiséssemos usar esta barra de navegação em nosso projeto, poderíamos copiar este código abaixo. Esta é toda a seção aqui que produz esta barra de navegação. Normalmente, há alguns exemplos mais diferentes com algum layout diferente também, e você pode ver todos estes conforme rolamos para baixo. Há também algumas formas. Clique nos elementos de formulários à esquerda, e exatamente o mesmo que antes. Vamos então ter uma visão de muitos exemplos diferentes. Tudo isso aproveita os elementos HTML padrão, como entradas, seleções e áreas de texto. Mas Bootstrap, em seguida, fornece alguns CSS para nós, em seguida, usar adicionando as classes Bootstrap, tais como form-group e form-control, assim como podemos ver aqui. Também analisaremos mais de perto alguns desses componentes ao longo deste projeto, como carrosséis rotativos, e também usamos modais. Também vale a pena notar que todos esses estilos que Bootstrap fornece é apenas um ponto de partida base. Estamos livres para ir em frente e mudar qualquer um dos estilos com algum CSS personalizado. se você ainda não tem certeza do que é Bootstrap, tudo o que você precisa entender por agora é que podemos aproveitar o CSS predefinido do Bootstrap para não apenas tornar nosso HTML muito melhor, mas também para aplicar algumas práticas recomendadas, e manter o nosso estilo com uma aparência mais consistente em diferentes navegadores. Agora temos um pouco de fundo em Bootstrap. Vamos agora passar para obter uma configuração do projeto Bootstrap. 23. O que construiremos: À medida que passamos por esta seção, vamos estar construindo este site Gourmet Burgers. Este projeto nos permitirá aprender como o bootstrap funciona e como podemos usar vários componentes, bem como diferentes classes de utilitários e também como funciona o sistema de grade Bootstrap. Começamos no topo com nossa seção de cabeçalho, que é uma barra de navegação, incluindo o título do site, vários links e também uma caixa de pesquisa no canto. Rolando para baixo, você também pode ver que temos um carrossel rotativo. Cada imagem diferente tem sua própria legenda. Também usaremos controles para nos permitir rolar para a esquerda e também escrever através dessas imagens. Este carrossel rotativo é um dos componentes Bootstrap, assim como a barra de navegação na parte superior. Eu sou poderia olhar para várias formas destes e como todas as classes funcionam durante este projeto. Se deslocarmos mais para baixo, então teremos informações sobre nossos sites de hambúrguer. Isso nos ensinará como usar os contêineres de bootstrap, linhas e sistema de grade para alinhar e organizar nossos itens na página. Este site também será totalmente responsivo para ir em frente e encolher, o navegador. Veremos uma alteração de layout para diferentes tamanhos de telas, incluindo nossa barra de navegação tendendo a uma lista suspensa para as telas mais pequenas. Vamos fazer isso em tamanho real mais uma vez. Então, se formos ainda mais para baixo, temos uma seção de inscrição. Se clicarmos neste será então introduzido a um componentes modais, que é basicamente um pop-up onde podemos adicionar algumas informações para o usuário. Neste caso, vamos dar uma olhada em como podemos usar componentes de formulário Bootstrap para fazer nossos formulários olhar realmente agradável. Aqui teremos um nome, um e-mail e também uma área de texto, juntamente com algumas caixas de seleção na parte inferior. Então, finalmente, terminamos com uma área de rodapé na parte inferior. No final desta seção, você também terá este site totalmente concluído e também algum conhecimento sobre como usar componentes de bootstrap, utilitários de bootstrap, juntamente com como podemos usar contêineres, linhas e colunas para criar sistema de grade. Junto com o conhecimento de como substituir qualquer classe bootstrap para tornar isso totalmente personalizado. Muito bem, espero que estejas ansioso por isto. Agora vamos seguir em frente para começar nosso projeto. 24. Criando um projeto Bootstrap: Começar um projeto usando o Bootstrap é muito fácil. Para começar, se formos para getbootstrap.com, que é uma página inicial do Bootstrap, e depois descermos para a seção “Começar” aqui. Lembre-se, porém, que sites como este geralmente podem alterar layouts, portanto, se o seu parecer um pouco diferente quando você visita, basta dar uma olhada na seção Instalação ou Introdução. Existem algumas maneiras diferentes de começar. Podemos baixar a pasta de inicialização completa clicando no grande botão “Download” no canto superior. Isso é ótimo, mas inclui muitas coisas que não precisamos nesta fase. Também podemos ir para a seção Download à esquerda. Então, se rolarmos para baixo, podemos ir em frente e baixar os arquivos CSS e JavaScript. Em seguida, solte-os na nossa pasta do projeto. Todo o caminho que eu vou fazer neste projeto é usando um CDN. Vamos voltar para a Introdução e, em seguida, role para baixo. Uma CDN é uma rede de entrega de conteúdo. Isso basicamente significa, em vez de adicionar os arquivos CSS e JavaScript em nosso projeto e, em seguida, vinculá-los em nosso HTML. Em vez disso, esses arquivos são hospedados em um servidor externo, segue para vincular a. Aqui podemos ver que temos nossas seções CSS e JavaScript. Podemos copiar este link para o CSS. Também temos alguns links JavaScript aqui, onde podemos vincular nossas tags de script ao CDN. Se rolarmos para baixo ainda mais, temos um modelo inicial, e este é um lugar realmente conveniente para começar. Isso tem toda a estrutura HTML básica que precisamos, juntamente com quaisquer links para o CSS necessário e também o JavaScript também. Vamos começar copiando este modelo inicial com o botão “Copiar” no canto superior. Vamos agarrar isso. Então, se formos para a área de trabalho e criar uma nova pasta chamada Gourmet-Burgers. Abra Visual Studio Code e, em seguida, podemos arrastar nesta pasta do projeto para começar. Como sempre, criamos nosso index.html, mas desta vez agora temos um iniciador de bootstrap, para que possamos colar na estrutura do esqueleto. Dê isso um salvamento. Então podemos ir em frente e abrir isso no navegador. Vamos clicar duas vezes no index.html, abrir o navegador, e há o nosso “Olá, exemplo mundial”. Está tudo funcionando bem. Voltando ao projeto, agora podemos começar a adicionar nossas próprias personalizações. Podemos mudar o título para Hambúrgueres Gourmet, e depois salvar. Nossa mudança agora está refletida no navegador. Este texto de Olá mundo pode parecer um elemento h1 padrão, mas tem um pouco padrão estilo Bootstrap como todos os outros elementos terão também. Podemos ver isso se comandarmos o link CSS na seção de cabeça. O CSS Bootstrap está aqui. Se comandarmos esta linha e depois atualizar, veremos que os estilos padrão do Bootstrap foram removidos agora. Vamos apenas remover esses comandos e adicionar isso novamente. Para ver o que está acontecendo nos bastidores, podemos dar uma olhada no CSS fornecido pelo Bootstrap. Se copiarmos este link dentro do href direito até o final, copiá-lo, e depois para o navegador, podemos colar isso em apenas como um URL normal. Esta é a folha de estilo que está vinculada a esta URL. É um pouco difícil de ler porque atualmente é minificado. Isso significa que todo o espaço em branco foi removido para manter o tamanho do arquivo menor. Para ver isso ainda melhor, se selecionarmos tudo e, em seguida, copiar. Vou procurar por CodeBeautify. Isto é o que precisamos, codebeautify.org, então selecione isso. O que precisamos é o CSS, então selecione este link aqui. No lado esquerdo, podemos adicionar a entrada CSS. Cole nosso código Bootstrap e, em seguida, clique em “Embelezar” no meio. No lado direito podemos ver as saídas. Podemos fazer isso do tamanho da tela cheia. Este é todo o CSS que Bootstrap fornece. Agora parece formatado de uma forma que parece familiar. Se você rolar através dele, há bastante. Se pressionarmos “Command” ou “Ctrl” “F”, isso procurará pelo código. Vamos procurar o h1 e pressione enter, então podemos ver todo o CSS que está se aplicando a este elementos h1. Primeiro temos h1 direito até h6, que se aplica na margem inferior padrão, uma família de fontes de herdas. Nós também temos um peso de fonte, uma altura de linha, e também herda a cor do texto. Para o próximo. Também podemos ver o tamanho da fonte é 2,5 rem, é por isso que quando removemos as folhas de estilo Bootstrap, o h1 então apareceu menor. Nós também podemos percorrer e dar uma olhada em alguns estilos mais também, se quisermos, mas espero que você tenha a idéia do que está acontecendo nos bastidores. Também aproveitaremos muitas das fotos criadas pela classe à medida que construímos esses projetos. Isso também seria o mesmo que um arquivo CSS se fôssemos baixá-lo e adicioná-lo à nossa pasta do projeto. A última coisa que eu gostaria de salientar é que, embora todos esses estilos sejam ótimos para usar e fazer nosso projeto parecer melhor, ainda podemos substituir qualquer um desses estilos base com nossas próprias folhas de estilo. Fazemos isso criando nosso próprio arquivo CSS, assim como fizemos em projetos anteriores e vinculamos a ele na seção principal abaixo deste link bootstrap. Na verdade, é incentivado a adicionar ou substituir qualquer um desses estilos padrão do Bootstrap pela simples razão de que muitos sites usam Bootstrap e não queremos que todos os sites on-line comecem a olhar o mesmo. No entanto, é uma boa idéia usar o Bootstrap, para criar rapidamente sites e componentes com melhores práticas, estilo consistente em diferentes navegadores, e também uma excelente base para construir. Agora temos a configuração do nosso projeto. Em seguida, vamos passar a entender como a grade Bootstrap funciona. 25. O grid do Bootstrap: Nosso exemplo Hello World agora está configurado. Neste vídeo, vamos ver provavelmente um dos conceitos mais importantes a serem entendidos ao trabalhar com bootstrap. Este é o sistema de grade bootstrap. As grades basicamente, permite que ele coloque as coisas para fora agradável e fácil e usa a caixa flexível CSS sob o capô. Para começar, geralmente a primeira coisa que precisamos fazer é criar um contêiner para o nosso conteúdo. Isso é adicionado como uma classe CSS de contêiner. Vamos para o projeto e primeiro remover o h1 de Olá mundo, que é apenas aqui. Podemos então adicionar o nosso div com a classe de contêiner então basta criar um div, assim como nós normalmente faria. Desta vez, podemos adicionar uma classe bootstrap de recipiente. Os contêineres são necessários ao trabalhar com o sistema de grade bootstrap, pois atuam como um wrapper para o nosso conteúdo. Usá-los também nos permite enviar nosso conteúdo horizontal e verticalmente também. Aninhado dentro, adicionamos uma segunda div, e este tem uma classe de linha. Dentro do aberto dentro da classe de linha. Essas linhas atuam como um wrapper para layout de conteúdo usando colunas. grade Bootstrap tem 12 colunas de largura. Isto significa que, se quisermos duas seções iguais lado a lado em linha, poderíamos definir ambos para ser seis colunas de largura cada. Se quiséssemos três seções, cada uma precisaria ser quatro colunas. Vamos adicionar nossa primeira div dentro da linha. Isto vai ter uma classe de col-MD-4. Dentro daqui podemos adicionar algum texto com as tags p de um terço de largura. Como a grade tem 12 colunas de largura, estamos ocupando quatro partes aqui, então este é um terço da largura da linha. Se copiarmos isso e colarmos mais duas vezes. Certifique-se também de que este é recuado corretamente, assim como isso. Agora, se conseguirmos que um salvo e depois atualizar o navegador, teremos três seções na tela, cada uma com um terço da largura da linha. Para ver essas seções grade melhor, podemos adicionar algumas classes de fundo que também são fornecidas pelo bootstrap. Depois col-md-4 não podemos bg sucesso. Isso nos dá uma cor verde. O segundo poderia ser bg primário. Isto é para o azul. O terceiro poderia ser bg secundário e esta é uma cor cinza. Isso agora nos mostra o efeito do contêiner que adicionamos. O recipiente é uma largura fixa. Se apenas esticamos o navegador mais largo ou menor, vemos que a largura muda com diferentes pontos de quebra. Há também um recipiente de largura total disponível também. Tudo o que precisamos fazer é mudar o contêiner, para ser fluido do contêiner. Isso irá abranger toda a largura da página. Mas eu só vou ficar no contêiner por enquanto. Também podemos ter várias linhas dentro deste contêiner. Se voltarmos para a classe de col-md-4, este md significa dispositivos de tamanho médio. Você pode controlar exatamente quantas colunas largura queremos o conteúdo para diferentes raízes de tela. Se voltarmos para o site getbootstrap, que é getboostrap.com, e, em seguida, documentação. Se descermos para a seção de layout do lado esquerdo. Então aqui embaixo temos a opção para a grade. Selecione isto. Se rolarmos para baixo até a tabela, que é apenas aqui, vemos aqui que temos um prefixo de classe, e temos usado col-md para dispositivos de tamanho médio. Esta tabela mostra que há um tamanho no qual cada classe se aplica. Por exemplo, pequeno é 540 pixels e grande 960. Podemos adicionar quantos desses prefixos quisermos. Por exemplo, poderíamos ter um layout de 12 colunas de largura em telas pequenas e, em seguida, mudar para ter seis colunas de largura em telas médias e, em seguida, para baixo para quatro colunas em dispositivos maiores. Nós só temos os conjuntos de prefixos médios, que é 720 pixels e acima. Se reduzirmos o navegador para abaixo de 720 dentro da nossa página de índice, a largura de quatro colunas não se aplica mais como podemos ver aqui. Podemos mudar isso adicionando col-sm. Em vez de md alterá-lo para sm, atualize. Isso agora se aplica a telas pequenas. Se quiséssemos que essa seção verde e azul ficasse lado a lado, precisaríamos definir isso para seis partes cada. Podemos ir em frente e mudá-lo para col-sm-6. Então também nossos dispositivos médios mudam de volta para quatro e também para o segundo, podemos adicionar col-sm-6. Ambas as primeiras seções, ambas em dispositivos menores com seis colunas largura e depois mudam com quatro colunas de largura em dispositivos médios. Se salvarmos, atualizar, essas duas seções são agora seis colunas cada e a seção cinza é as 12 colunas padrão. Se fizermos isso mais amplo para ir acima dos dispositivos médios, isso novamente mudará para quatro partes cada porque dissemos isso aqui. Vamos agora dar uma olhada em um cenário diferente. Imagine se mudarmos ambos pequenos divs para ser quatro colunas então, col-sm-4 e o mesmo para este também. Isso significa que não vamos ocupar toda a grade de 12 colunas. Nós apenas especificamos oito partes para telas menores, que se salvarmos e atualizarmos e depois descermos para a tela pequena, isso agora deixará um espaço no final da linha. Para este caso, podemos mover o conteúdo adicionando um deslocamento. Podemos adicionar este deslocamento no lado esquerdo empurrando estes dois para o meio. Se fizermos offset-sm, novamente isso só se aplicará em dispositivos pequenos. Depois, duas colunas. Isso agora empurrará a linha através duas colunas deixando a seção verde e azul no meio. Se esticarmos o navegador, isso também se aplicará a todos os tamanhos acima de dois. Agora, nos dispositivos médios, ainda temos essas duas colunas deslocadas. Isso é facilmente resolvido definindo o deslocamento para ser zero para qualquer tela que queremos que ele seja removido. Vamos tentar removê-lo das telas de tamanho médio e acima. Vamos ter o offset-md-0. Isso garantirá que o deslocamento se removido em dispositivos de tamanho médio e acima. Se agora atualizarmos, o deslocamento agora é removido em um dispositivo médio, ambos se reduzirmos isso ainda deve ser aplicado em uma tela pequena. Podemos simplificar ainda mais as coisas. Se queremos que todas as divs dentro de uma linha sejam iguais, podemos especificar col. Ao invés de ter todas essas vantagens aqui, se você quiser manter as coisas realmente simples basta adicionar col. Mesmo para a segunda seção e também a terceira, obter isso salvo, recarregar. Com isso no lugar, todas as nossas seções ocuparão uma quantidade igual de espaço em todos os tamanhos de tela. É assim que usamos colunas com o sistema de grade bootstrap para layout de nossos itens. Agora sabemos mais sobre a grade bootstrap. Vamos agora passar para adicionar algum conteúdo a este projeto. 26. Adicionando imagens e texto: Desde Bootstrap é apenas HTML, CSS, e alguns JavaScript nos bastidores. Adicionar texto e imagens é exatamente o mesmo que já aprendemos. Vamos começar configurando todas as três seções para serem quatro colunas, os dispositivos médios e acima. Então mude a chamada para MD-4. Poderíamos fazer isso para todas as três seções. Adicione MD-4 a estes dois. Não precisamos mais dessas colunas para que possamos remover o plano de fundo. Sucesso, Primária e secundária. Vamos ter o conteúdo desta vez também ver a diferença entre as três seções. Se voltarmos ao local acabado, que temos aqui, estaremos construindo as imagens e todo o texto para essas três seções. Esta é a nossa primeira seção de quatro colunas, nossa segunda, e a nossa terceira, formando a grade de 12 colunas. Incluí algumas imagens para você baixar. Se quiser usar o mesmo que eu. Caso contrário, você pode, é claro, ir em frente e escolher o seu próprio, se preferir. Tenho estas imagens guardadas na minha área de trabalho. Eu vou para a pasta do projeto e adicioná-los a ele. Aqui está a minha pasta de imagens. Então eu vou arrastar isso para o projeto gourmet-hambúrgueres. Com estes agora dentro do projeto, podemos agora começar a trabalhar com a adição deste ao nosso site. Então, obviamente, o índice nosso HTML vamos trabalhar nesta seção contêiner. Primeiro de tudo, esta primeira chamada, MD-4, podemos mover o texto e, em seguida, adicionar a elementos de imagem. Assim como HTML normal, adicionamos os atributos de origem. Eu adicionei estes dentro da pasta de imagens. Se abrirmos a barra lateral e, em seguida, imagens, temos carrossel um e carrossel 2 para o controle deslizante rotativo. Temos três imagens diferentes na parte inferior aqui, que vamos usar para as três seções. Se fecharmos isto, o primeiro que vamos adicionar está aberto. Isso tem a extensão JPEG ponto. O texto antigo, que devemos sempre acrescentar. Logo abaixo desta imagem, podemos então ir em frente e adicionar alguns elementos normais, como H2 para o título. Digamos que mais de 50 restaurantes. Em seguida, abaixo deste alguns textos com a tag P 2. Para isso, adicionamos o texto de tratar-se da próxima vez que você estiver na área. Você pode alterá-lo para qualquer texto que você preferir. Isso realmente não importa. Agora, para os nossos projetos e, em seguida, recarregue a página de índice. Você pode ver que temos uma imagem, vamos ter H2 e depois algum texto. Esta imagem é realmente grande no momento, mas vamos consertar isso em breve. Agora, na seção do meio, também podemos remover esse texto novamente, e substituí-lo por uma imagem. A fonte da imagem é o tempo, é imagens/desafio. jpg. O texto alternativo da imagem do desafio de comer. Agora, abaixo da imagem. Se dermos uma olhada no local acabado, isso é o que estamos procurando agora. O H2 de desafio extravagante, e, em seguida, o texto abaixo de por que não experimentar um dos nossos famosos desafios de comer hambúrguer. Começando com o H2 e, em seguida, o texto abaixo com as tags p. Então desafios de comer hambúrguer São os dois primeiros agora no lugar. Em seguida, o terceiro, remova o texto, e adicione uma imagem para este terceiro. A fonte desta vez é sign.jpg. Na pasta de imagens, sign.jpg, o texto antigo ou imagem de reputação. Esta é a primeira secção que está sobre o lado direito, que está estabelecida em 2003. Em seguida, algum texto abaixo. O H2, este será qualquer texto de sua escolha. Mais de 15 anos de alta qualidade. Uma vez que você tenha incluído isso, vamos para o navegador, e provavelmente veremos um pouco de bagunça, para ser honesto se atualizarmos. Então, há três imagens diferentes, e as três seções, porque as imagens são muito grandes para caber no lugar. Para corrigir isso, podemos adicionar nosso próprio arquivo CSS para substituir qualquer um dos padrões do Bootstrap. Então Courtney, se nos lembrarmos na seção de cabeça, temos o CSS núcleo Bootstrap. Mas este é apenas um ponto de partida base para trabalharmos. Como dissemos anteriormente, não é incentivado a adicionar nossas próprias folhas de estilo. Se passarmos para a nossa pasta do projeto e, em seguida, podemos adicionar um novo arquivo. Então styles.css para estilos personalizados. Agora, eu vou mirar a chamada MD-4. Em seguida, todas as imagens que se seguem. Poderíamos, naturalmente, adicionar a classe personalizada a isso, se quiséssemos. Mas vamos ficar com as aulas que temos. Assim, a largura terá 140 pixels para mantê-los bem pequenos e uma altura de 140 pixels também. Porque lembre-se que estas apenas pretendiam ser imagens em tamanho de miniatura. Claro, precisamos vincular isso na página de índice. Portanto, nosso CSS personalizado sempre vai direto para a parte inferior. Assim, podemos substituir qualquer um desses estilos padrão para ambos. Então, a relação de link é folha de estilo, o href. Então este é o mesmo nível que a página de índice. Isso pode apenas ir no href como styles.css e, em seguida, feche isso fora. Depois de ter feito isso, vamos ver como isso parece no navegador. Bom. Agora, todas as três colunas estão agora lado a lado com as pequenas imagens, página também e também o texto. O próximo conteúdo a adicionar a esta seção, se formos para a versão final aqui, são esses botões que estão na parte inferior. Estes títulos são muito simples de adicionar. Estas tags apenas âncora, que algumas classes Bootstrap para torná-los olhar mais agradável. Voltar para o editor de texto, e depois para a nossa primeira seção, logo após estas tags P aqui. Eu vou adicionar mais algumas tags P e próximo o link dentro. Este link vai ter algumas classes Bootstrap. Então isso vai ser btn. Em seguida, btn secundário. Isso irá como uma cor cinza que vimos antes. Estes primário, secundário é semelhante ao que usamos para as cores de fundo quando olhamos para as grades no último vídeo. Estes são estilos padrão que o Bootstrap fornece para diferentes elementos. Neste caso, secundário é a cor cinza que podemos ver apenas aqui. Mais tarde, usamos uma cor diferente para esta seção verde. Voltar ao nosso botão, btn e btn e secundário. Então precisamos de uma ligação. Então, o href. Podemos deixar isso vazio por enquanto, já que não temos nenhuma página para vincular. Vamos adicionar uma linha de botão. Em seguida, o texto dentro dos detalhes da vista. Depois disso, vamos adicionar esta seta para a direita, que é esta aqui. Isso é feito com uma entidade HTML. Lembre-se, entidades HTML começam com comerciais. O código de entidade para as setas é raquo, e isso deve terminar em ponto e vírgula. Guarde isso. Depois há o nosso botão com as setas do lado direito. Vou copiar este botão e colá-lo nas outras duas seções. Então copie este link que acabamos de adicionar. Em seguida, não podemos passar dias no final da nossa segunda área. Então a terceira área, logo abaixo da nossa reputação, não mente. Adicione esse fim três vezes. Agora, está em nossas seções de árvore na tela. Essas imagens agora parecem muito melhores. Agora, eles cabem dentro dos recipientes. Mas ainda podemos levar as coisas ainda mais longe com algumas aulas Bootstrap. Para tornar os cantos arredondados, w e pode fazer isso com uma classe de círculo arredondado, que Bootstrap fornece. A primeira seção aqui para os restaurantes dentro da imagem na classe de círculo arredondado. O mesmo para a segunda imagem. Em seguida, a terceira e última imagem. Vamos ver como isso parece. Parece que há um problema neste meio, devemos adicionar um traço dentro de lá. Ok, bom. Portanto, esses cantos arredondados são adicionados com o raio de borda CSS. Bootstrap nos permite adicionar este raio ao topo, direito, inferior esquerdo ou círculo, assim como usamos lá dentro. Podemos ver essas classes se formos para getbootstrap.com. Então, se formos até a documentação, e se deslocarmos para baixo até utilitários, então temos as bordas, podemos adicionar cores mais ousadas. Este é um que acabamos de usar, que é um raio de fronteira. Usamos o círculo arredondado, que vemos aqui. Finalmente, também podemos alinhar esse novo conteúdo ao centro de cada seção. Então parece mais alinhado como estes aqui. Podemos fazer isso adicionando uma classe de centro de texto para o recipiente. Então, logo após o recipiente adicionar a classe de centro de tecnologia sobre o navegador. Isso agora alinha todo o conteúdo para cada seção. Ótimo, então agora todo o conteúdo está centrado. Vou deixar esse vídeo lá e seguir em frente para procurá-lo. Barras de navegação Bootstrap. 27. Barras de navegação do Bootstrap: Um dos componentes realmente úteis, Bootstrap fornece é Navbars Responsive. Se nos dirigirmos para a documentação na seção de componentes, se deslocarmos para baixo até a guia Navbar, podemos passar por alguns exemplos do que o Bootstrap fornece. Se rolarmos para baixo, podemos descobrir mais algumas informações sobre como isso funciona, as classes que precisamos aplicar, ou podemos rolar para baixo para alguns bons exemplos. Este vai ser um que é semelhante ao que vamos construir. Ele vai ter o título do nosso site no canto superior, depois alguns links diferentes. Podemos até ter uma lista suspensa se quisermos, uma caixa de pesquisa e um botão de pesquisa, isso também será responsivo. Então, se nós fôssemos reduzir o navegador para baixo, isso iria se transformar em um menu suspenso agradável como este. Vamos começar a trabalhar na nossa página de índice. Dentro do nosso index.html, vamos dar a isso um pouco mais de espaço. Para começar no topo da seção do corpo, vamos começar isso como uma seção de cabeçalho normal. Vamos usar as tags de cabeçalho HTML e, em seguida, dentro daqui podemos ir para construir um nav, dentro deste nav, nós vamos adicionar o nosso a tag e isso vai ser para o título do nosso site. Podemos adicionar o nosso título Gourmet Burgers insider aqui, e podemos apenas manter o href como um atributo vazio por enquanto. Isso é bom. Há o título do nosso site dentro daqui. Em seguida, logo depois nós estamos indo para criar div, que seria contêiner siga links. Basta adicionar estes por enquanto, vamos em frente e adicionar algumas aulas Bootstrap em breve. Mas, por enquanto, só queremos mostrar a estrutura. Dentro desta div temos uma lista desordenada e isto vai ser para os nossos itens de lista. Vamos ter casa e também locais. Vamos adicionar as tags li e estes serão links também, então aninhe um link dentro daqui. O primeiro é home e, em seguida, um segundo item da lista, novamente com a tag a aninhada dentro, e isso vai ser para locais. Aqui estão os nossos links, a nossa lista desordenada. Depois desta lista não ordenada, vamos adicionar um formulário. Isto vai ser para a caixa de pesquisa, então o formulário apenas aqui. Certifique-se de que isto ainda está dentro desta div circundante. Então, só para esta tag div de fechamento. Então podemos ir em frente e adicionar nossa entrada para o formulário e então eu vou colocar em pouco mais tarde. Este vai ser o botão com o tipo de enviar e, em seguida, fechar este fora com o texto de pesquisa. Vamos salvar isso e depois abrir isso dentro do navegador. Há nossa seção de cabeçalho padrão, o título, os links e, em seguida, a pesquisa abaixo. Agora, tudo o que precisamos fazer é ir em frente e adicionar algumas classes Bootstrap para fazer isso parecer mais agradável e também ser responsivo. Vamos começar bem no topo, dentro da seção de navegação. Vamos adicionar a turma. O primeiro que precisamos é navbar, porque este é um navbar, e depois também uma segunda classe de navbar-expand-md. Isso fará com que a barra de navegação se expanda em dispositivos de tamanho médio. Então navbar-escuro, isso é para o tema mais escuro. Em seguida, o top fixo, por isso é fixado no topo da página. Então, bg-dark. Vamos salvar isso e passar para o navegador. Se recarregarmos, podemos ver instantaneamente uma cor de fundo escura. Mas vamos para as ferramentas do desenvolvedor e ver o que cada uma dessas classes realmente faz na prática. Vamos arranjar um pouco mais de espaço e depois inspeccionar o nosso equipamento de navegação. Este fixed-top foi uma das coisas que adicionamos. Isso adiciona a posição a ser corrigida e também o define bem no topo da página. Temos fundo escuro, que define esta cor de fundo escuro que vemos aqui. Lembre-se que também adicionamos navbar-expand-md. Isso entra em ação dentro da consulta de mídia com a largura mínima de 760 pixels, assim como vimos nos primeiros vídeos. De volta ao nosso código, e vamos começar com as etiquetas a. Temos o href vazio. Vamos em frente e adicionar uma nova classe aqui também, e esta pode ser navbar-brand. Lembre-se, estas são todas as classes fornecidas pelo bootstrap. Salve e, em seguida, atualize, e agora temos este link de cor branca. Lembre-se de antes que adicionamos um recipiente div circundante que envolve toda esta seção aqui. Esta é uma seção que colapsa sobre os menores verdes. Portanto, bootstrap nos fornece algumas classes que podemos adicionar chamado colapso e também navbar-collapse. Isso manterá a seção do colapso com boa aparência. Até a lista desordenada, temos a classe de navbar-nav e, em seguida, uma segunda, que é MR-Auto. MR-Auto aplica margem automática à direita desta lista não ordenada. Isso empurra essa barra de pesquisa para o lado direito. Se atualizarmos, isso agora aplicará margem automática à direita desta lista não ordenada. Mantendo esta seção do lado direito. Vamos falar mais sobre margem e preenchimento com mais detalhes mais adiante nesta seção. Mas, por enquanto, vamos para os itens da lista e adicionar nossas aulas aqui. O primeiro é nav-item, e então podemos fazer o mesmo para o segundo item da lista, a mesma classe de nav-item. Depois, há também alguns links. Nós adicionamos a classe para o link de nav-link e, em seguida, o segundo, que é apenas aqui. Isso também é nav-link. Salvar e ir para o navegador e agora temos um pouco mais de espaçamento e também algumas cores diferentes. Mais uma vez, podemos ir para as ferramentas de desenvolvedor e ver o que cada uma dessas classes faz individualmente. Para o link de navegação. Temos este navbar-escuro e também o navbar-link, que lhe dá esta cor. Temos algumas consultas de mídia que aplicam algum preenchimento de vários tamanhos. O mesmo com este nav-link que adicionamos. Tem um tipo de exibição de bloco e também algum preenchimento. Isso garantirá que nossa barra de navegação esteja bem alinhada, com algum espaçamento ao redor. Se encolhermos o navegador, ele fecha. Ainda não vemos o botão no canto superior direito em telas menores, como vimos na demonstração do Bootstrap na documentação. Para isso, precisamos adicionar um botão ao nosso código. Logo abaixo do título Gourmet Burgers e pouco antes desta div, que é uma seção de colapso, vamos adicionar um botão. Então, dentro deste botão, isso vai levar em uma classe de navbar-toggler. Isso vai ter o tipo de botão e, em seguida, a próxima parte vai ser para data-toggle e nós definir isso para ser colapso. Isso faz com que o botão um botão de alternância, que se expande e recolhe o conteúdo do elemento nav. Os outros elementos a que estamos nos referindo é esta div abaixo com a classe de colapso e navbar-colapso. Para vincular este botão a esta div, precisamos adicionar um id para começar e podemos chamá-lo do que quisermos, mas eu vou chamar isso de NavBarColapse. Agora isso tem uma referência única. Podemos ir em frente ao nosso botão e adicionar um data-target e dar a este o mesmo nome. Então eu vou adicionar um hash porque é um id e, em seguida, temos NavbarCollapse. Agora, vamos para o navegador e, em seguida, atualizar. Agora, se reduzirmos o navegador para baixo, podemos ver que temos o botão no canto superior direito, mas ele não se destaca muito no momento. Então vamos dar uma olhada. Na verdade, dentro dos botões precisamos adicionar o ícone para o botão. Fazemos isso usando os elementos span e, em seguida, adicionar algumas classes de navbar, e isso é navbar-toggler-icon. Guarde isso e encolhe o navegador, e lá vamos nós. Estes são os elementos span com o ícone dentro. Agora podemos ver nosso botão, e isso também cai porque ele está vinculado à seção div separada. A div a que está ligada é esta aqui com o id de NavbarCollapse, que irá introduzir dados alvo apenas aqui. Esta é agora a seção completa e vamos ter uma barra de navegação agradável, simplesmente aplicando algumas classes Bootstrap e ajudantes. No próximo vídeo, vamos adicionar um carrossel de imagem a esta página inicial. 28. Carrosséis do Bootstrap: Assim como as barras de navegação que vimos no início do último vídeo na documentação do bootstrap. De volta a esta seção de componentes no lado esquerdo, também temos um link para carrosséis também. Então clique no link do carrossel aqui. Então, novamente, se rolarmos para baixo, podemos ver vários exemplos do código. Então aqui está um exemplo simples aqui, que é apenas o código abaixo dele. Se deslocarmos para baixo até a versão que diz que temos legendas. Então aqui estão os indicadores aqui, que serão adicionados em breve. Mas queremos esta versão aqui com as legendas, resolve um pouco de texto sobre cada imagem. Isto vai ser semelhante ao que vamos construir. Então nós como essas legendas, e também esses indicadores para clicar entre os vários slides. Então vamos para a nossa página de índice. Em seguida, no topo deste elementos de cabeçalho, vamos criar algum espaço para o nosso carrossel. Então, primeiro vamos adicionar uma tag div circundante. Então aqui dentro vamos adicionar algumas classes Bootstrap. O primeiro vai ser de carrossel e, em seguida, o segundo de slide. Também adicionamos atributos de passeio de dados. Isto vai ser igual a Carrossel. Os atributos de passeio de dados do carrossel dizem ao Bootstrap para reproduzir automaticamente o carrossel assim que a página for carregada. Aqui dentro vamos adicionar uma segunda div aninhada no meio. Isto vai ter a classe de carrossel interior. Esta classe de carrossel interior vai atuar como um wrapper para nossos slides ou imagens, que vamos adicionar agora, Vamos adicionar nossa primeira div para nosso primeiro slide. Isto vai ter uma aula, e este é um item de carrossel. Então aqui dentro podemos adicionar nossa imagem que queremos exibir dentro do carrossel. A imagem também tem uma classe dois, e isso vai ser w-100. W-100 é uma classe de utilitário Bootstrap para definir a largura da imagem como 100 por cento do contêiner. Podemos então adicionar a fonte para a nossa imagem, que é a nossa pasta de imagens. Em seguida, a imagem de carousel.jpeg. Em seguida, um atributo alt com algum texto. Eu só vou definir o texto para ser o primeiro slide por enquanto. Então essa é a nossa primeira div para o primeiro item de carrossel. Se copiarmos esta seção, podemos adicionar mais uma imagem logo abaixo. Isso vai levar nas mesmas aulas, mas tudo o que precisamos fazer é mudar para ser nossa segunda imagem de carrosse2. Então, sobre o navegador e, em seguida, página de índice. Se atualizarmos, não teremos nada mostrado na tela. Isso ocorre porque uma de nossas imagens precisa ter a classe ativa adicionada. Isso permitirá que a apresentação de slides apareça. E ele começará com o slide com essa classe ativa em vez de na ordem de origem. Então, de volta ao código. Logo após um desses itens de carrossel, podemos adicionar ativo, salvar isso e atualizar. Bom. Então este é o primeiro slide que vemos aqui. Agora podemos ver imediatamente que isso está funcionando. Quando olhamos para os exemplos no site do Bootstrap, também mencionamos a adição de legendas a esses slides. Podemos adicioná-los para cada seção de imagem. Então de volta ao nosso item de carrossel. Então podemos adicionar isso logo após a imagem. Então vamos abrir espaço aqui embaixo. Então podemos adicionar div, que vai cercar nossa seção de legendas. Isso precisa de uma classe bootstrap e isso é descritivo, isso é carrossel legenda. Lembre-se se você quiser saber exatamente o que CSS qualquer uma dessas classes está aplicando, basta ir para o navegador e ir para as ferramentas de desenvolvedor e você pode ver com mais detalhes. Vamos adicionar um título de nível 5. Isto vai ser para o título ou para a legenda. Então eu vou adicionar “Made to order” para esta primeira imagem, e depois abaixo apenas uma tag p padrão com algum texto usando apenas os melhores ingredientes. Bom. Vamos dar um pouco mais de espaço aqui. Se você vir algum problema ao passar por esta seção de bootstrap, apenas certifique-se de que todo o aninhamento é feito corretamente. Certifique-se de que, por exemplo, esta legenda do carrossel está logo abaixo da imagem e esta seção está toda aninhada dentro deste item de carrossel e assim por diante. Esta é geralmente a maior causa de problemas de codificação ao trabalhar com Bootstrap e também as classes que estão sendo aplicadas aos elementos errados. Então agora vamos em frente e rolar para baixo até a segunda imagem. Então, a segunda imagem dentro deste item de carrossel, vamos adicionar a div circundante como antes. Isso também tem a mesma classe de legenda do carrossel, um h5 para manter isso consistente com o texto de mais de 50 tipos em nosso menu. Então, abaixo disso, nossos elementos p padrão com o texto de “Ou construir seu próprio”. Aqui estão as nossas duas legendas para as nossas duas imagens. Vamos ver isso em ação sobre o navegador. Bom. Aqui estão os nossos companheiros de ordem nível 5 cabeçalho e as texturas abaixo. Se sairmos daqui, esperamos ver uma rotação. Lá vamos nós, diz o segundo com a legenda na parte inferior. Bom, este carrossel de imagem agora está funcionando e ficar para ficar bem. No próximo vídeo, vamos adicionar alguns botões esquerdo e direito para que possamos pular essas imagens. 29. Adicionando controles ao carrossel: Bem-vinda de volta. Temos uma apresentação de slides funcionando agora, o que é legal. Podemos tornar isso ainda melhor adicionando alguns controles para pular entre esses slides. Para fazer isso, vou adicionar alguns botões ao carrossel. Um no lado esquerdo para pular para a esquerda, e depois um no lado direito, para pular para a frente. Estes adicionados na parte inferior da nossa seção div carrossel. Para baixo, se localizarmos a etiqueta de abertura, que é deslizamento de carrossel, e, em seguida, role para baixo até a parte inferior. Vamos adicionar isso antes da etiqueta de fechamento. Vamos começar com um, uma tag porque vai ser um link. Isso vai ter a classe de controle de carrossel pré-v, que mostram do nosso anterior. Uma função de botão e, em seguida, também um slide de dados. Isto vai ser igual ao anterior, que é P-R-E-V. O slide de dados especificará quais slides ir para, os dois valores que você pode adicionar é, anterior ou seguinte. Este vai voltar atrás, queremos esse valor de anterior. Então nós vamos adicionar nossas tags span, e isso vai ser para os ícones. Isso funciona de forma semelhante ao nosso menu suspenso, onde adicionamos o span e, em seguida, adicionamos algumas classes para exibir o ícone. A classe que queremos usar aqui é carrossel controle anterior-ícone. Esta vai ser a seta para a esquerda, assim como um destes suportes de parede de cerca de abertura aqui. Este é o nosso ícone e, em seguida, vamos adicionar um segundo espaço logo após este. Isto vai ter o texto do anterior. Na verdade, não veremos isso em navegadores padrão. Isso vai ser apenas para leitores de tela. Agora declaramos que isso é para leitores de tela adicionando apenas uma classe de sr. Se salvarmos isso e depois recarregar, podemos ver no lado esquerdo que não temos o texto do anterior. Só temos um pequeno ícone ali. Então nós podemos fazer exatamente o mesmo, vamos copiar isso uma tag e então fazer o mesmo para o nosso próximo. Apenas alinhe tudo isso. A tag a terá a classe que precisamos para mudar isso para ser a próxima. Os slides de dados também podem ser próximos. O ícone que precisa ser alterado antes para ser o próximo. Então, finalmente, os textos do próximo para os leitores de tela, salve isso e, em seguida, recarregue o navegador. É um pouco difícil de ver, mas temos a seta para a direita aqui e a esquerda aqui também. Mas se clicarmos neles, eles não parecem estar funcionando. Isso é porque precisamos ligá-los à nossa apresentação de slides. Estes títulos são links usando os elementos a. Mas, como em todos os links, precisamos especificar onde vincular, com os atributos href. Primeiro, adicionamos um id ao invólucro de carrossel div. Vamos até a etiqueta de abertura. Esta div com o slide carrossel classe, podemos adicionar um id. este id de controles de carrossel. Este nome depende totalmente de nós. Nós só precisamos ter certeza que este id irá coincidir com o href para os dois links. Copie este carrosselcontrols. Podemos usar este id logo abaixo como href. O primeiro a, vamos adicionar um href e usar um # desta vez e colar em carrosselcontrols. Em seguida, para o segundo link aqui em baixo, os atributos href, novamente com o # de carrosselcontrols. Estas duas imagens agora se conectam ao nosso carrossel principal. Então, espero que se salvarmos e, em seguida, ir para o navegador, esses dois links devem agora funcionar. Bom, para que possamos voltar e avançar através das nossas imagens. Ótimo, tudo isso está funcionando e agora é para o nosso carrossel. No próximo vídeo, veremos outro dos componentes do Bootstrap, que é o modelo. 30. Modais do Bootstrap: Agora é a hora de olhar para outros componentes úteis do Bootstrap, que é chamado de modal. Um modal é uma janela pop-up que pode dar qualquer informação ao usuário. No nosso caso, vamos adicionar uma seção de inscrição na parte inferior do nosso site. Em seguida, quando o usuário clica no botão de inscrição, isso irá então ativar uma janela modal, onde o usuário pode se inscrever usando um formulário. Uma vez que o modal tenha aparecido, ainda podemos clicar fora dele e voltar para a página original. Vamos agora passar para a nossa página de índice e ver como adicionar modal. Para começar na parte inferior da página, vou criar uma seção de inscrição. Isto será basicamente uma linha que alguns textos de um lado. Dizer “inscrever-se” para ofertas exclusivas. Em seguida, um botão no lado direito para clicar, que ativa o modal. Bem na parte inferior do nosso HTML. Role a direita para baixo. Vou adicionar um novo contêiner para esta seção. Isso pode ir bem na parte inferior. Logo acima destes JavaScript, vamos criar uma nova div, e isso vai ter uma nova classe de fluido de contêiner, que torna o fluido de largura total da página. Em seguida, também bg-dark para dar-lhe uma cor de fundo. Dentro daqui podemos adicionar nosso div com a classe de linha. Feche isso. Então precisamos adicionar duas novas classes, siga a seção esquerda e a seção direita. A seção esquerda vai ser uma div. e isso vai ter a classe de col-md-7 que você faz sete partes de largura nos dispositivos de tamanho médio e acima. Em seguida, uma segunda seção logo abaixo, que vamos ocupar as cinco partes restantes. Isso precisa ter a classe de col-md-5, dando-nos nossa grade de 12 colunas. Agora esta grade está no lugar, podemos primeiro adicionar algum texto de inscrição, que vai para o lado esquerdo dentro dessas tags p. Inscreva-se para ofertas exclusivas, ponto, ponto, ponto. Então precisamos adicionar um botão no lado direito, que ativará nosso pop-up modal. Dentro da seção cinco à direita, vamos adicionar um botão com o tipo de botão. Depois algumas aulas de botões. O primeiro é btn, e depois btn-success, btn é os estilos base padrão para um botão, então btn-success lhe dará a cor de fundo verde. Se salvarmos isso e verificar isso no navegador, isso está bem na parte inferior. Podemos ver nosso texto no lado esquerdo aqui, e depois o botão aqui. Isso não parece muito bom no momento, mas algumas classes Bootstrap devem corrigir isso. Nós também precisamos adicionar algum texto dentro do botão também, vamos fazer isso primeiro. Podemos adicionar o texto de inscrição aqui. Dentro desta linha, podemos adicionar a classe de centro de texto, e isso empurra todo o texto para o centro da div. Vamos ver como isso está parecendo. Atualizar, bom, nosso botão e também o texto está no centro de cada um dos contêineres. Vamos fazer esses textos agora, leves e também itálico. Isto no lado esquerdo. Podemos adicioná-lo neste, div apenas aqui. Depois de md-7, temos a classe utilitário de luz textos. Isso também é fornecido pelo Bootstrap e também forma itálico. Estes são bastante auto-explicativos. Se salvarmos e ver como isso está olhando, bom, agora nosso texto é agora de cor branca e também itálico. Nós também melhoraremos isso mais tarde adicionando alguma margem e preenchimento. Faremos isso em um vídeo mais tarde. Mas, por enquanto, vamos começar a construir nosso modal pop-up. Isso pode ser adicionado em qualquer lugar dentro do nosso código mas eu vou adicionar o meu apenas sob a seção de inscrição. De volta ao nosso código. Então, novamente bem na parte inferior, abaixo da div de inscrição aqui, vamos adicionar nossa seção modal. Vamos adicionar um comentário. Agora precisamos adicionar um div ao redor. Isso vai ter uma classe de modal e também desaparecer. Esta classe de fade é um efeito de desvanecimento fornecido pelo Bootstrap. Isso tornará a transição agradável e suave. Aqui dentro vamos adicionar uma nova div. Isso deve ser bastante familiar, nós estamos basicamente construindo divs com classes Bootstrap para adicionar nosso estilo agradável. A classe de diálogo modal. Esta classe de diálogo modal torna um modal mais estreito. Se removermos isso, ele torna um modal a largura total da página. Vou manter o diálogo modal no lugar para manter isso agradável e compacto. Em seguida, uma nova div aninhada dentro. Isso vai ter a classe de conteúdo modal. Este é o conteúdo que queremos ter dentro do nosso modal, e isso é dividido entre uma seção de cabeçalho, um corpo, e um rodapé. Agora somamos três novas divs no mesmo nível. Este é o primeiro para o cabeçalho. A classe de cabeçalho modal. Se copiarmos esta seção aqui e colarmos isto, mais duas vezes. Lá vamos nós, então esse é o nosso cabeçalho. O do meio vai ser para o corpo, e então o último é o rodapé. Certifique-se de que é rodapé, corpo e seção de cabeçalho está tudo aninhado dentro deste div conteúdo modal aqui, caso contrário as coisas não vão parecer como pretendido. Vamos ver como estamos olhando tão longe dentro do navegador. Vamos atualizar e clicar no botão “Cadastre-se”. Podemos ver imediatamente que o pop-up não acontece quando você clica no botão. Como você pode esperar, precisamos vincular este botão ao modal para que ele funcione. Primeiro, incluímos um id no modal real. Se formos para o topo, esta identificação será qualquer nome de nossa escolha. Vou chamar isso de modal. Então precisamos adicionar dois atributos ao botão, que o ativará. O botão de inscrição aqui. Nós dizemos a esses botões ativar o modal primeiro adicionar no atributo de alternância de dados, e definir isso para ser modal. Em seguida, definimos qual modal queríamos ativar usando o alvo de dados. Em seguida, assine isso igual ao id do modal, o hash modal. Este é o mesmo id que demos ao modal logo abaixo. Se salvarmos e tentar isso no navegador. Agora vamos clicar no botão “Cadastre-se” aqui. O botão não está funcionando. Vamos ao nosso código e verificar tudo aqui. Temos o id de modal e, em seguida, o botão, precisamos adicionar data-toggle sobre isso e certifique-se de que está escrito corretamente, recarregar, clique em nosso botão. Aí está o nosso pop-up, que na verdade é o nosso modal. Mas lembre-se que não adicionamos nenhum conteúdo ao cabeçalho modal, ao corpo modal e à seção de rodapé modal. É por isso que vemos seções vazias livres na tela. Isto é o que vamos passar em seguida quando adicionarmos nosso formulário a este modal, que o usuário possa adicionar seus detalhes de inscrição. 31. Formulários do Bootstrap: Sabemos tudo sobre o uso de formulários desde o início do curso. Este vídeo não deve vomitar surpresas. No entanto, vamos analisar como o Bootstrap lida com esses formulários. Ele usa exatamente os mesmos elementos, como já vimos, mas, em seguida, adicionar um bom posicionamento estilo, adicionando as classes bootstrap. Nosso modal agora aparece, na tela, quando clicamos no sinal e dentro deste modal é onde vamos adicionar nosso formulário de inscrição. Primeiro podemos adicionar algum texto para a seção de cabeçalho modal, que é esta parte superior aqui. Vamos lá. Na verdade, antes de fazermos isso se clicarmos fora do modal, vamos fechá-lo. Em seguida, sobre o editor de texto, vamos rolar para baixo para nossa seção de cabeçalho modal aqui, e aqui dentro eu vou adicionar um título de nível 5 com o texto de inscrição para ofertas exclusivas. Bootstrap também tem algumas classes disponíveis também e desta vez este é chamado título modal, então salve isso, e então vá para o pop-up modal, clique no botão, e como nosso texto no topo, em seguida, para adicionar em nosso formulário dentro desta seção do meio, que é o corpo, então de volta ao nosso modal. Desta vez dentro desta seção de corpo modal vamos adicionar um formulário, este formulário vai ter um div aninhado dentro com a classe de grupo de formulários. Isso agrupa todas as seções de formulário incluem todas as entradas ativadas. Nós adicionamos cada entrada habilitar dentro deste grupo de formulários para adicionar alguma estrutura aos seus elementos de formulário, como qualquer margem para espaçá-los. Vamos começar com um rótulo e este rótulo vai ter os quatro atributos habituais. Isto vai ligar às nossas entradas. Vamos chamar isso de entrada de nome porque vamos adicionar uma seção de nome e, em seguida, o texto do seu nome. Então, depois que este rótulo pode adicionar nossa entrada, isso vai ter o tipo de texto e, em seguida, algumas classes, então as classes bootstrap de controle de formulário, id e este id vai ser entrada de nome, que corresponde a este rótulo assim id de entrada de nome. Então, depois disso, podemos adicionar algum texto de espaço reservado e isso pode ser qualquer coisa de nossa escolha, eu vou simplificar, digite seu nome. Antes de adicionarmos esta classe bootstrap de controle de formulário, isso é usado em qualquer entrada baseada em texto, como o tipo de texto, select e área de texto. Isso aplicará qualquer estilo, como cores e também define a entrada para ser 100 por cento de largura, se salvarmos isso, podemos ver o efeito que isso tem dentro do modal, então clique no botão e há nossas entradas 100% mentiram no meio com o rótulo do seu nome. É assim que o nosso formulário parece por padrão. Temos o rótulo, uma entrada, em linhas separadas. Bootstrap aplica o tipo de exibição de bloco e aguarde 100 por cento para a maioria dos elementos de formulário. Se quiséssemos que este rótulo e entrada estivessem na fila, há uma classe para estes dois. Podemos adicionar isso ao recipiente de formulário circundante e a classe é chamada de formulário na linha, salve isso, e, em seguida, recarregar, clique no modal, e agora nosso rótulo e entrada está na linha. Mas eu vou manter isso como era originalmente sem esta classe de formulário na linha que deve remover isso por agora e, em seguida, em nossos grupos de formulário de e-mail e endereço, assim como esta seção de nome aqui, nós também cercamos outras entradas com esta classe de grupo de formulários. Vamos copiar isso e, em seguida, colar logo abaixo. Este vai ser para o e-mail, então vamos mudar seu nome para ser seu e-mail. Isso vai ter o tipo de entrada de e-mail também. Nós também precisamos alterar o rótulo para atributos para ser entrada de e-mail, que vai coincidir com este ID aqui. Também altere isso para ser entradas de e-mail. Acho que está tudo bem. Apenas um suporte de lugar, então digite seu e-mail e isso está bonito. Logo abaixo deste e-mail vamos colar isso mais uma vez e isso também vai ter a div circundante com uma classe de grupo de formulários, mas desta vez vai ser para o seu endereço. Desta vez vamos ter uma área de texto, em vez das entradas padrão. Vamos apagar esta entrada daqui. Depois deste rótulo, vamos criar a área de texto. Lembre-se que a área de texto tem uma tag de abertura e fechamento e a entrada tem apenas a tag de fechamento automático. A área de texto pode ter uma classe de controle de formulário, que é o mesmo que estes acima porque é uma entrada baseada em texto. Em seguida, um ID, que corresponde a este rótulo de endereço. Lembre-se de anteriormente com uma entrada de texto, também podemos especificar quantas linhas queremos adicionar e definimos como 3 por padrão. Em seguida, um espaço reservado, com o texto de digitar seu endereço. Eu acho que tudo isso é feito para as entradas livres, então vamos ver como ele está olhando. Ativar o modal. Bom. Temos o nome, o e-mail, e também o endereço, que é uma área de texto. Agora podemos arrastar isto para baixo para torná-lo maior ou menor. Isso só deixa a área do rodapé para baixo na parte inferior. Dentro dele aqui eu gostaria de adicionar algumas caixas de seleção para perguntar se o usuário quer ser contatado por e-mail ou postar, em seguida, um botão enviar também para enviar o formulário. Primeiro vamos adicionar essas caixas de seleção, então para baixo para o nosso modal deve ser rodapé modal então certifique-se de que vamos mudar. Temos o corpo, o cabeçalho e, em seguida, o rodapé na parte inferior. Vamos começar com nosso e-mail e postar entradas. A div circundante, com classes Bootstrap de verificação de formulário porque esta será uma caixa de seleção e, em seguida, formulário de verificação em linha, mantém esses elementos em linha, então podemos adicionar nossas entradas com o tipo de caixa de seleção, as classes Bootstrap de forma verificar entradas. Após a aula, vamos adicionar um ID, que foi para vincular a nossa etiqueta. Este ID eu vou chamar isso de verificação de e-mail. Finalmente, um valor que vai ser igual à opção um e, em seguida, fechar isso fora. Lembre-se que o valor é o texto que será enviado para o servidor uma vez que este formulário foi enviado. Após a entrada, precisamos adicionar nosso rótulo. Este rótulo vai ter uma classe de etiqueta de verificação de formulário. Os quatro atributos, que estão indo para vincular ao nosso ID das caixas de seleção e esta foi verificação de e-mail. Finalmente, verifique dentro de contatos por e-mail. Vamos fazer um pouco menor para que possamos ver na tela. Então eu vou apenas copiar isso para acelerar as coisas para cima assim certifique-se de copiar este div envolvente completo colá-lo logo abaixo e, em seguida, podemos simplesmente mudar este para ser contato por correio. As aulas são iguais, só precisamos verificar a diferença de IDs. O ID desta vez vai ser pós-verificação. O atributo formulário pode ser post check também, contato por correio, e eu deveria adicionar um ponto de interrogação depois de cada um deles. Finalmente, vamos encerrar este modal com um botão para enviar o formulário, o texto de enviar, o tipo de enviar também, as classes Bootstrap de btn, e depois btn-primary, que lhe dará o azul cor para o botão de modo que deve ser tudo agora para o rodapé, Eu vou com duas caixas de seleção aqui, em seguida, o nosso botão enviar. Vamos dar uma olhada nisso em ação. Ative o pop-up. O conteúdo do rodapé está lá agora, mas parece um pouco fora de lugar. Podemos corrigir isso rapidamente com um pequeno flexbox. Em vez de adicionar todos os flexbox em nosso arquivo CSS, Bootstrap também nos fornece algumas classes utilitárias. Podemos usar flexbox em muito rapidamente. Sobre o nosso código e, em seguida, podemos adicionar um auxiliar CSS flexbox dentro deste div rodapé modal. Logo após rodapé modal, podemos adicionar conteúdo justificar entre. Isso funciona exatamente como justificar conteúdo entre nós fizemos em nosso CSS. Bootstrap fornece dentro de uma classe CSS, então salve isso e sobre o nosso modal. Lá vamos nós. Agora as coisas estão bem espaçadas no rodapé. Isso é exatamente como o que já aprendemos. Também podemos substituir entre com centro, início, fim e volta, por exemplo, dois. A única diferença é que aqui estamos usando uma classe fornecida pelo Bootstrap, sob o capô, ele ainda está aplicando uma propriedade de estilo CSS, assim como fizemos anteriormente no curso. Se fôssemos abrir as ferramentas de desenvolvedor e, em seguida, rolar para baixo. Se, em seguida, inspecionar esta área de rodapé do modal, clique sobre isso, podemos ver esta classe de justify content between, que adicionamos apenas aqui, é simplesmente aplicar a propriedade flexbox de conteúdo justify a esses elementos. Vamos fechar isto. Agora, se voltarmos para o nosso HTML, se dermos uma olhada na forma circundante, dentro do modal, então o elemento de formulário que tem a tag de fechamento, e há a tag de abertura. Você percebe que este elemento de formulário precisa ser movido para cercar todos os elementos de formulário. No momento, ele apenas envolve este conteúdo corpo de nome, e-mail e endereço. Vamos cortar esta etiqueta do formulário de fechamento daqui e, em seguida, se movermos isto para baixo, vamos mover isto para baixo para baixo. Certifique-se de que ele tem o botão com o tipo de enviar, e agora podemos adicionar isso logo após a seção de rodapé. Agora todas as nossas entradas estão agora dentro deste formulário elementos. Só para terminar as coisas eu vou adicionar um botão no formulário, que será apenas um x para que o usuário possa clicar para fechar o modal. Você também pode clicar fora da tela para fechar um modal como já vimos antes. Mas às vezes o usuário pode não saber que eles podem fazer isso, então uma pequena cruz em um canto do formulário realmente se beneficiará. Vou adicionar isso na seção de cabeçalho modal. Vamos rolar até o modal teve uma parte aqui, e então podemos adicionar um fundo. Logo após este H5, vamos adicionar um botão então podemos adicionar uma entidade HTML, que vai ser um símbolo de tempos, e isso vai ser uma pequena cruz, que vamos ver em apenas um momento. A parte inferior precisa de um tipo de botão, uma classe de fechamento e, em seguida, dispensar dados de modal. Data dispensa modal declarará que queremos que este fundo feche um modal quando for clicado. Dê isso salvar e nós podemos tentar isso no navegador. Recarregar, abrir o modal, e lá está nossa entidade HTML, que é a cruz, clique sobre isso, e agora isso fecha nosso modal. Este é o nosso modal agora totalmente funcional e também a forma agora olhando melhor. Tal como acontece com todos os elementos e componentes que usamos até agora, confira a documentação do Bootstrap para ver algumas variantes e algumas maneiras diferentes de usá-las junto com qualquer código de exemplo para nos ajudar. Em seguida, vamos procurar espaço Bootstrap em utilitários para adicionar margem e preenchimento. 32. Utilitários do Bootstrap: Como já sabemos, Bootstrap é apenas HTML, CSS e alguns JavaScript. Se quisermos adicionar qualquer CSS, como margem e preenchimento, ainda podemos selecionar qualquer uma das nossas classes ou elementos Bootstrap e, em seguida, adicioná-los ao nosso próprio arquivo CSS e, em seguida, alterar as propriedades CSS como fizemos anteriormente. Há outra maneira que o Bootstrap nos fornece e isso é com alguns ajudantes úteis. Se formos para a documentação do Bootstrap e , em seguida, no menu do lado esquerdo, clique em “Utilitários”. Utilitários são basicamente uma maneira de adicionar rapidamente alguns estilos a um elemento sem sequer ter que ir para o arquivo CSS. Começando com bordas, podemos ver aqui podemos adicionar bordas a um elemento com alguns nomes de classes descritivas. Temos fronteira, que aplicará uma fronteira a todos os quatro lados. Nós também temos borda superior, direita, inferior e esquerda também. Se dermos uma olhada no menu à esquerda, podemos ver esses ajudantes estão disponíveis para as propriedades CSS mais comuns. Na verdade, já usamos alguns desses já em nosso projeto. Se clicarmos em “Flex”, podemos dar uma olhada na seção flexbox e rolar para baixo. Vemos alguns valores flexíveis que podemos adicionar como uma classe. Nós já usamos justify content between para nossa seção de formulário, que terá acesso a todos os utilitários flexbox. Se também descermos e clicarmos em “Texto”, apenas aqui, também olhando para esta seção de texto, já usamos a classe do centro de tecnologia, que podemos ver aqui. Há também texto à esquerda, texto à direita e também alguns utilitários para aplicar isso somente em diferentes tamanhos de viewport. Deslocando mais para baixo, temos dimensionamento, e já usamos isso antes dentro do nosso carrossel. Usamos a classe W 100, que temos aqui e isso define nossas imagens para 100 por cento da largura disponível. Há também espaço em utilitários aqui e é isso que vamos olhar neste vídeo. Isso é usado para adicionar alguns valores de margem e preenchimento ao nosso CSS. Se dermos uma olhada em como podemos usar isso, precisamos construir um nome de classe. Construímos isso começando com um M ou um P, que significa margem ou estofamento. Então, depois deste m ou p, especificamos a qual lado do elemento que queremos que ele se aplique. Podemos adicionar T para cima, B para baixo, esquerda, direita e assim por diante. Se quiséssemos adicionar alguma margem à direita, começamos com m, r depois dessas letras, então especificamos qual tamanho queremos adicionar com um número de zero a cinco ou também temos a opção de auto. Zero irá redefinir qualquer margem padrão e preenchimento de volta para zero. Dois nos daria um valor de 0,5 carneiros e assim por diante. Nós também temos x que irá aplicar as classes para a esquerda e direita, ou y, que é para a parte superior e inferior. Vamos para o nosso projeto e se reduzirmos o navegador, vamos começar dentro da navegação. Vamos deixar isso para baixo e vamos começar a trabalhar na seção de formulários dele. Primeiro, queremos adicionar algumas classes para fazer isso parecer um pouco mais agradável e, em seguida, usamos alguns dos utilitários de espaçamento. Vamos abrir nosso editor de texto e começar a trabalhar em nossa seção de cabeçalho. Nós rolamos para baixo até o nosso formulário dentro deste cabeçalho. Na verdade, vamos remover este carrossel do cabeçalho e apenas colocar isso depois para rolar rotas abaixo após esses controles, cortar esta seção para fora, em seguida, para baixo na parte inferior do nosso cabeçalho, vamos colar isso fora e para se certificar de que está tudo bem, expanda o navegador. Ótimo. Agora só temos nossa navegação dentro do cabeçalho. Vamos começar a trabalhar com nossa seção de formulário adicionando algumas classes Bootstrap. Apenas aqui podemos adicionar uma classe de formulário de linha de formulário e, em seguida, podemos adicionar alguma margem, podemos usar m y. isto irá aplicar alguma margem no eixo y , que está acima e abaixo e, em seguida, o valor de 2, salvar isso, recarregar e a lista suspensa agora terá alguma margem na parte superior e inferior do formulário. Então podemos ir em frente e fazer isso parecer um pouco mais agradável com algumas aulas Bootstrap. Primeiro de tudo, as entradas podem ter uma classe de controle de formulário. Em seguida, adicionamos o tipo para a entrada de texto e, em seguida, um valor de espaço reservado de pesquisa. Agora, o botão, nós temos o tipo de submissão, vamos apenas adicionar algumas classes a isso. O primeiro pode ser btn, que já vimos antes, então btn outline-success. O contorno irá certificar-se de que esta cor só se aplica como uma borda em vez de uma cor sólida e o sucesso nos dará a cor verde, que veremos aqui. Estes estão em linhas separadas porque estamos em uma visão menor aqui. Se tornarmos isso um pouco mais amplo, agora temos esses componentes em linha. Este my2, que adicionamos aqui, aplicará margem para todos os tamanhos de tela. Também podemos definir um valor de margem diferente para outros tamanhos de tela também. Por exemplo, se quiséssemos reduzir essa margem em dispositivos de tamanho médio e acima, poderíamos adicionar my-md dispositivos médios e, em seguida, reduzir isso para ser 1 em vez de 2. Se salvarmos e atualizarmos, agora quando fazemos o navegador, os dispositivos de tamanho médio, essa margem agora é reduzida no formulário. Ótimo. Agora temos diferentes valores de margem para dispositivos acima de médio porte. Este botão de pesquisa também está um pouco próximo a essas entradas. Ficaria um pouco mais agradável com algum espaçamento no meio. Para corrigir isso, podemos adicionar alguma margem a esta entrada também. Isto introduz aqui, vamos adicionar uma nova classe de Mr, que é margem, certo. Então pequenos dispositivos e acima, vamos definir isso para ser 2, atualizar e lá vamos nós, então isso é uma margem no lado direito e isso deve ser aplicado em dispositivos menores, que apenas aqui e acima. Bom. Se reduzirmos o navegador para o menor tamanho, que já vimos antes, este botão também é apertado contra a entrada. Vamos adicionar alguma margem para o botão para espaçar isso, então para baixo para o botão, após o sucesso do esboço btn, podemos usar o meu e, em seguida, vamos definir isso para ser 2. Vamos ver isso em ação. Ótimo. Isso parece bom nas telas menores. Se esticarmos isso, então as telas maiores. Também podemos redefinir essa margem para telas maiores. Mas parece bem, então vou mantê-lo assim por enquanto. Agora para as três imagens abaixo na parte inferior. Também precisamos adicionar algum espaço na seção. Vou adicionar um pouco de estofamento para o interior destes elementos. Vamos até o contêiner, as três imagens abaixo do carrossel. É este aqui depois do recipiente e do centro de texto, vamos adicionar algum preenchimento no eixo y e isso pode ser um valor de 5, recarregar. Bom. Agora temos um estofamento na parte superior e inferior. Vamos fazer este recipiente um pouco mais alto, adicionar um pouco mais de espaçamento igual. Finalmente, para terminar esta página inicial, vamos adicionar uma área de rodapé, volta ao HTML. Até o fundo e fechamos este div. Podemos adicionar uma seção de rodapé. Esta vai ser uma área de rodapé simples. Vamos começar adicionando um botão de backstop para que quando o usuário clicar nele, eles serão levados de volta para o topo da página. Depois adicionaremos um símbolo de direitos autorais com o nome de Gourmet Burgers. Adicionamos um link de casa e locais apenas para terminar as coisas. Vamos começar adicionando algumas classes a esta área de rodapé. Podemos fazer deste um recipiente e bg-light para dar-lhe uma cor de fundo clara. Para espaçar as coisas, nós um adicionar algum preenchimento no eixo y e um vale de 4, abrir os elementos p e este vai ser o nosso texto ou de volta ao topo. Na verdade, vamos cortar isso e adicionar isso como um link com os elementos a e colar isso dentro. As tags p podem ter uma classe e, novamente, esta é uma classe utilitário de float direita, Isso fará com que o texto flutue para o lado direito da página. Este link também pode ter um atributo href com um valor de um hash. Isso significa que quando um usuário clica neste link, será redirecionado de volta para esta página inicial e, em seguida, ele começará no topo da página. Vamos dar uma olhada nisso. Atualizar, clique em voltar para cima e seguida, a página recarrega diretamente no topo para que haja o nosso link de volta para cima. Então, logo depois disso, podemos adicionar um novo conjunto de tags p. Isto vai conter o nosso texto de Gourmet Burgers com o símbolo de direitos autorais e, em seguida, adicionar dois links, que vai ser para casa e locais. Logo após esta tag p abertura, eu vou adicionar a entidade HTML de direitos autorais, que é comercial e cópia e um ponto e vírgula, e depois o têxtil de 2018 Gourmet Burgers. Então eu vou adicionar uma segunda entidade HTML, que é chamado ponto médio. Isto vai ser simplesmente um ponto que irá separar este texto aqui dos links que vamos adicionar em seguida. Em seguida, podemos adicionar dois links para casa e locais ainda dentro desta tag p aqui. Vamos adicionar o nosso primeiro link com o texto da casa. Isso pode ter um atributo href vazio, já que não temos nada para vincular. Logo após este link, também podemos adicionar este ponto médio mais uma vez para separar nossos dois links e, em seguida, podemos adicionar nosso último link, que será para todos os locais. Mais uma vez, isso também pode ter o href vazio, dar que um salvamento, fora para o navegador. Bom. Então, se ampliarmos e, em seguida, rolar para baixo até o fundo, há um link que está de volta para o topo, que é flutuado para a direita com este utilitário aqui, então nós temos o nosso símbolo de direitos autorais e o texto de Gourmet Burgers, um ponto em entre para separar nossos links de casa e locais. Isto é agora para o nosso projeto e também para os nossos utilitários de espaçamento. Espero que agora você possa ver como usar o Bootstrap pode realmente nos dar uma vantagem na construção de sites. Claro, todos os estilos padrão nem sempre serão exatamente o que estamos procurando e é incentivado a substituí-los e fazer personalizações para atender às suas necessidades. Este é agora para a nossa pesquisa Bootstrap e eu vou vê-lo na próxima seção. 33. Obrigado: Parabéns por chegar ao final deste curso. Espero que você esteja agora muito mais confortável com o layout de sites, usando o CSS Flexbox, Grid e Bootstrap 4. Começamos desde o início, dando uma olhada no CSS Flexbox. Em seguida, passamos para o sistema CSS Grid, que é uma maneira incrível de criar quase qualquer tipo de layout que você possa imaginar. Finalmente, aprendeu a usar uma estrutura Bootstrap 4 para nos permitir criar sites de grande aparência realmente rápido. Ou ao construir um site de hambúrgueres, basta colocar tudo o que você aprendeu em prática. Lembre-se de tudo isso é apenas a segunda parte deste curso. Portanto, certifique-se de conferir a próxima parte, para obter um conhecimento mais profundo e aprender tudo o que você precisa saber para criar aplicativos de pilha completa. Tchau por enquanto, e te vejo na próxima parte deste curso. 34. Siga-me no Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, certifique-se de conferir o resto das minhas aulas aqui no Skillshare, e também me siga para quaisquer atualizações e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Obrigado mais uma vez, boa sorte, e espero vê-lo novamente em uma aula futura.