Framework CSS de Bootstrap para iniciantes

1. Introdução ao curso: Você tem lutado para criar sites modernos e responsivos ou talvez seja novo no desenvolvimento web em geral. Meu nome é Kyle e vou guiá-lo pelo Bootstrap e como usá-lo para criar sites responsivos rápidos para seus clientes. Vamos analisar toda a documentação e apontar recursos importantes que vêm incorporados Bootstrap e darão a você uma vantagem competitiva no mercado. Seus sites ficarão ótimos que serão funcionais e você aprenderá muito nesta aula. Espero que vocês estejam prontos para começar. 2. Seção 2 — Introdução ao Bootstrap: Tudo bem, bem-vindos à classe, todos. Obrigado por se inscrever na aula. Espero que vocês estejam prontos para começar. Se você não estiver familiarizado com o Bootstrap, vamos mergulhar profundamente na documentação, dar uma olhada em alguns exemplos e ver como podemos utilizar aqueles em nosso site que vamos construir. Neste curso. Nós vamos construir um Clone do Facebook, não necessariamente o back-end, mas vamos construir os recursos de front-end. Vamos começar com a página de inscrição e, em seguida, vamos entrar na página inicial. Vamos usar elementos Bootstrap o máximo que pudermos. Se houver algum CSS adicional, vamos resolver isso. Qualquer coisa que precisemos personalizar. Vamos dar um passo de cada vez. Este curso será voltado para iniciantes, pessoas que não estão familiarizadas com o Bootstrap. No entanto, se você estiver familiarizado com bootstrapping, só precisa de um pouco mais experiente, só precisa de uma atualização. Este curso também fornecerá isso. Então, espero que vocês estejam prontos para ir. Então, com isso dito, vamos pular. 3. Seção 3 — Como usar o Bootstrap: Ok, então para começar, vamos precisar de um editor de código para este curso. Vou usar o Visual Studio Code. Sinta-se à vontade para usar o editor de código que você quiser. Então, o que precisamos fazer é criar um novo arquivo. E eu só vou nomear esse index.html. E vou salvá-lo na minha pasta de downloads. E vou colocá-lo dentro de uma pasta chamada curso Facebook. Sinta-se à vontade para nomear o que quiser e apenas salvá-lo. Então, index.html e salve-o. Ótimo. Então, agora dentro do editor de código, onde ele vai colocar o HTML boilerplate para começar. E para fazer isso, vou fazer um código curto aqui. Sinta-se à vontade para digitar isso ou se o editor de código tiver um atalho, vá em frente e use-o para o título. Só vou colocar o curso na web e salvá-lo. Ótimo, agora podemos realmente abrir esse arquivo dentro do nosso navegador e não fizemos isso, basta ir ao seu explorador e encontrar a pasta que você fez e clique duas vezes no arquivo. E então eu vou abrir diretamente no seu navegador. Agora está vazio porque não temos nada no corpo real. Então, só para ter certeza de que isso está funcionando, vou lançar um cabeçalho de teste um elemento e atualizar e avaliar podem vê-lo lá em cima. Então, já terminamos isso e abordaremos instalação do bootstrap na próxima lição. 4. Seção 4 — Conectando o Bootstrap: Nesta seção, vamos analisar como realmente instalar ou conectar a plataforma de bootstrap ao nosso site ou ao nosso arquivo index.html agora. Portanto, existem algumas maneiras de conectar o bootstrap. Então, o que você quer fazer é pegar bootstrap.com e clicar no botão de download. A partir daqui, você pode percorrer e ver todas as maneiras diferentes que eles dão para realmente conectar o Bootstrap ao seu site. Eles têm gerenciadores de pacotes, links CDN, yarn, gem, compositor, muito praticamente qualquer coisa. Se você for mais avançado, você pode seguir essas instruções. Como eu disse, esse curso será voltado mais para o iniciante. Então, o que vamos fazer aqui é realmente usar os links CDN. Por isso, diz CDN via JS entregar. Portanto, pule o OJS baixado entregue para entregar a versão em cache do CSS e JS compilados do Bootstrap para o seu projeto. Isso é exatamente o que precisamos. Então, o que precisamos fazer é clicar em Copiar para a área de transferência. E vamos voltar ao nosso arquivo de índice. E dentro da seção da cabeça, vamos colá-la. E vou ativar o envoltório de palavras muito rápido. Ok, agora que temos o arquivo CSS e um arquivo JavaScript vinculado ao nosso site. Vamos em frente e apenas salvá-lo. Vou manter o elemento de cabeçalho lá apenas para garantir que a fonte e a cor padrão e tudo assim entrarão em vigor no H1. Dessa forma, sabemos com certeza que o Bootstrap está todo conectado. Então, vou voltar para o navegador e atualizar. E você pode ver que a fonte mudou. Ainda é preto, tudo bem. Mas algumas das margens da página e paddings de páginas e coisas assim também mudaram. Esses são apenas sinais de que o bootstrap foi conectado com sucesso. Então é exatamente isso que precisamos. 5. Seção 5 — Visão geral da grade: Um dos maiores benefícios de usar o Bootstrap para seu desenvolvimento web é o fato que eles têm um sistema de grade integrado. Portanto, isso é realmente útil para criar layouts realmente específicos ou personalizados. Isso será realmente útil para quando estivermos projetando essa página inicial para o feed do Facebook, onde essencialmente você tem algumas informações no lado esquerdo, você tem seu feed principal no meio e então você tem alguns amigos e talvez alguns anúncios do lado direito e coisas assim. Portanto, é realmente útil para que tudo esteja integrado, muito fácil de usar. Portanto, esta seção será sobre a grade ou os contêineres como eles são referidos no Bootstrap. Então, para começar com isso, vamos voltar para o site getbootstrap.com, ir para cães e depois descer para layout e contêineres. Então, aqui, ele diz que os contêineres são um elemento fundamental do Bootstrap que contém pad e alinha seu conteúdo dentro de uma determinada janela de exibição do divisor. Eles realmente têm algumas classes diferentes que você pode usar. Um dos quais é apenas contêiner. Há um que é fluido de traço de contêiner e, em seguida, ponto de interrupção do traço do contêiner, que é 100% até o ponto de interrupção especificado. Ótimo, então o que vamos usar principalmente aqui é o contêiner normal e o fluido de traço do contêiner, que será 100% ou largura total da janela de exibição. Então, se rolarmos um pouco aqui, você pode realmente ver os pontos de interrupção incorporados ao Bootstrap. Então eles têm muito pequeno, pequeno, médio, grande, extra grande e XX grande. Então, esses serão como seus desktops, e esses serão seus laptops, alguns tablets talvez. E então esses serão dispositivos móveis. Como você sabe, o desenvolvimento web ou web design em geral está se dirigindo mais para uma abordagem móvel como desktops ou não são mais amplamente utilizados. A maioria dos seus públicos provavelmente acessará seu site ou aplicativo a partir de um dispositivo móvel, o que é completamente bom. É por isso que o Bootstrap e outras estruturas como essa existem. Tudo é construído com responsabilidade , então ficará bonito, independentemente do tamanho da tela. Ótimo. Então, à medida que rolamos um pouco para baixo, você pode ver alguns exemplos aqui. Apenas uma div muito simples com uma classe de contêiner. E então você coloca seu conteúdo do lado. Você tem contêineres responsivos. Então, é aqui que o ponto de interrupção do traço do contêiner entra em jogo. Assim, você pode ver o contêiner traço pequeno, médio , grande e todos referidos a esses pontos de interrupção aqui. Então, os recipientes fluidos, como eu disse, vão ter toda a largura. Então, eles vão todo o caminho da esquerda, todo o caminho para a direita. E então você também pode aninhar contêineres. Você pode fazer um contêiner de largura total e, em seguida, você pode fazer com um contêiner de largura normal dentro disso. Então, digamos que você queira uma cor de fundo de largura total e, mas você ainda quer que seu conteúdo seja contido dentro de 1200 ou 1400 pixels. Então você pode fazer coisas assim , o que é muito bom. Então, queremos começar aqui. Vamos subir e copiar este exemplo aqui, o contêiner padrão. Só vou copiá-lo. Entre no editor de código. Vamos nos livrar desse elemento de teste H1 e colar esse exemplo. E vamos trazer o elemento de volta e apenas dizer testes. Vamos ver o que a classe de contêineres faremos. Perfeito. Então você pode ver que ele salta um pouco. E isso é apenas por causa do estilo padrão. Então, vou inspecioná-lo muito rápido e ver o que está fazendo. Então você tem div com um contêiner de classe e, em seguida, você pode ver aqui, contêineres ponto css. Esses serão os estilos Bootstrap estão sendo aplicados ao nome dessa classe. Então você pode ver aqui que, quando a tela for mínima com os 4000 pixels, o contêiner terá uma largura máxima de 1320. Então é isso que você está vendo aqui. Então você pode ver que esse elemento sombreado azul será uma largura máxima de 1320. E à medida que o tornamos menor. E vai encolher acordo até chegar a um certo ponto. E então ele vai ficar com algum preenchimento básico à esquerda e à direita. Perfeito. Então, para dar um passo adiante, vou mostrar como fazer o que mencionei anteriormente. E isso é contêineres de aninhamento. Então, pulando, volte para o editor de código. E quando eu copiar isso e vou colocar um fluido de traço de contêiner. E vamos colocar esse recipiente brilhante de volta para dentro. E então vou fazer alguns estilos em linha aqui, só porque ainda não temos uma folha de estilos conectada, mas vou dizer cor de fundo, cinza. E então, no contêiner aninhado vou fazer a cor de fundo. Vamos fazer azul apenas para fins de teste e salvá-lo. Então, se atualizarmos, você pode ver que o elemento fluido do traço do contêiner de largura total elemento fluido do traço do contêiner de largura se estenderá todo o caminho da esquerda para a direita com uma cor de fundo de cinza. E então o contêiner aninhado do nosso primeiro, do nosso primeiro exemplo, estará dentro do máximo. Largura máxima de 1320, cor de fundo azul. E ele se encaixa muito bem lá. E tudo ainda funcionará da mesma forma. Assim mesmo. Perfeito. Isso é exatamente o que queremos. Então, vou remover esses estilos em linha por enquanto, e verei vocês na próxima seção. 6. Seção 6 — Visão geral das colunas: Então, na última seção, passamos por contêineres que são basicamente apenas o detentor do conteúdo da página que vamos construir. Então você pode estar se perguntando, ok, ótimo, temos contêineres agora o quê? Então, o Bootstrap realmente tem o que é chamado de sistema de grade. E dentro dos contêineres é como você realmente constrói seus layouts. Então, dentro de contêineres, você tem linhas e colunas, e você pode criar seu layout com elas. Existem diferentes tipos de linhas e existem diferentes tipos de colunas e classes de colunas e coisas que fazem coisas diferentes. Então, vamos passar pela documentação aqui e apenas um pouco obter um exemplo aproximado de como usar a grade. Portanto, esse primeiro exemplo é realmente básico. Como você pode ver aqui, há um contêiner e, dentro do contêiner, há uma linha com três divs que têm a classe c, o, l col. E o que é isso? O que isso está fazendo é apenas colocar três colunas separadas dentro da linha que está dentro do contêiner. E você pode ver aqui que o exemplo acima cria três colunas de largura igual em todos os dispositivos e viewports usando nossas classes de grade predefinidas. Essas colunas são centralizadas na página com a classe de contêiner pai. Então, para dar um passo adiante, precisamos pular para a seção de opções de grade. E isso é muito semelhante aos pontos de interrupção dos contêineres. Esses serão os pontos de interrupção para determinadas colunas de classe. Então você pode ver aqui o prefixo da classe, col dash, dash, small, col dash, médio e assim por diante. Na verdade, você pode adicionar links de coluna específicos a eles. E então é assim que será grande em pontos de interrupção específicos. Portanto, o sistema de grade é baseado em 12 linhas de coluna. Então você poderia fazer coisas como se quisesse um layout 5050, você poderia fazer col dash seis planeta. Há duas divs com essa classe que lhe dariam 50% de colunas, duas delas. Para que possamos continuar rolando aqui. Existem layouts automáticos de colunas sem usar as classes como acabei de mencionar. Então, estes serão apenas como o primeiro exemplo em que você só vai obter uma coluna padrão. Você sabe, quantas colunas você colocar nessa linha são quantas colunas você vai obter. E é meio que predefinir dessa forma. Portanto, neste exemplo, você pode ver que há duas colunas nesta linha superior e, em seguida, há três colunas nesta linha inferior. E isso será duas colunas nessa linha, três colunas na outra linha, independentemente do tamanho da tela. Por outro lado, você pode começar a utilizar predefinido com colunas. Então, neste próximo exemplo, e nesta linha superior aqui, há uma coluna, outra coluna com um traço seis e depois uma terceira coluna. Então, o que isso vai fazer é adicionar três colunas, mas a do meio será definida às seis. Então, isso sempre será 50% de largura, não importa o que aconteça. Então, eu não sei se vai estragar quando eu redimensionar isso, mas como você pode ver, está ficando 50%, não importa o que aconteça. Certo. Aí está ele. Então, está ficando 50%, não importa o que aconteça. E então a mesma coisa aqui embaixo. E à medida que descemos e você pode definir a coluna de largura automática. Então, se você quiser definir duas colunas em vez de apenas uma e deixar que as outras duas preencham automaticamente o espaço. Você pode fazê-lo do outro lado e definir duas colunas e deixar uma no meio para flutuar. Então é isso que é isso aqui em cima. E então as aulas responsivas são realmente o que vamos usar a maioria neste curso. Isso só lhe dá mais controle sobre suas larguras de suas colunas. Os pontos de interrupção dizem que chegamos um pouco mais adiante aqui. Ele diz que você pode misturar e combinar colunas de linha de nota a. Então, essa é uma outra discussão mais profunda. Eu poderia realmente tocar nisso na próxima seção, mas isso lhe dá uma maneira de construir um tipo de sistema de grade mais estruturado em vez de um layout. E posso explicar isso na próxima seção. Então, vamos pular isso agora. Você pode aninhar colunas e linhas. Então, o que realmente queremos tocar aqui é o backup aqui no topo, onde diz opções de grade. Então, vamos utilizar os pontos de interrupção específicos para nossas aulas de coluna e você verá o porquê, à medida que começamos trabalhar em nosso clone do Facebook. Então, vamos entrar em nosso editor de código. E vou puxar a captura de tela do Facebook que queremos clonar, a captura de tela do Facebook que queremos clonar. E vamos começar com o conteúdo real da página aqui. Vamos pular a navegação agora mesmo. Vamos pular direto para o meio da página aqui. Então, à primeira vista, vamos fazer três colunas e vamos fazer o que esse exemplo de bootstrap fez. E tenha uma terceira coluna, uma coluna de 50% e, em seguida, outra cerca de 1 terceira coluna aqui. Então vá e novo editor de código. E podemos manter tudo o que temos até agora. Basta se livrar do elemento de cabeçalho. E vamos fazer div com uma classe de linha. E então, a partir daí, queremos colocar uma coluna com um traço, grande traço três. E depois disso queremos fazer uma div com uma coluna, seis grandes. Este será o meio, a parte real do feed. E então, no lado direito, queremos outra terceira coluna. Então, vou fazer 1, 2 e 3 e atualizar apenas para que possamos ver o formulário de layout. Ótimo. Então você pode ver aqui que temos uma coluna 11 aqui também é nossa segunda coluna. E então três paradas aproximadamente aqui. Agora, se quiséssemos que isso fosse toda a largura, tudo o que temos que fazer é apenas nos livrar dessa classe de contêineres aqui. E então a linha estaria contida dentro da div fluida do traço do contêiner, que a esticaria de lado a lado. Então, só para que você possa ver que vou comentar o contêiner e atualizar. Você pode ver que ele se estende por toda a largura e depois trazê-lo de volta só porque eu quero mais contido. Ótimo. Então, agora podemos realmente pular para a próxima seção. 7. Seção 7 — Exemplo de linhas de colunas: Nesta seção, quero tocar brevemente na seção linha, colunas da documentação aqui. Eu toquei nele brevemente na última seção, mas eu queria mergulhar um pouco mais e dar a vocês um exemplo do que isso poderia ser usado. E diz aqui que você pode usar essas classes de linha e coluna que rapidamente criam layouts básicos de grade ou para controlar seus layouts de cartão. Quando eu acho realmente útil com isso é criar quase como uma grade de galeria de imagens de algum tipo ou apenas manter as coisas. E eu realmente estruturei a posição na tela. E quero mostrar a vocês o que quero dizer com isso. Então, vou pular para o editor de código. E logo abaixo aqui, vou fazer um novo contêiner. E então, dentro disso, vou fazer uma linha e vou adicionar as colunas de linha 3. E como quero ter certeza de que eu tenho nome da classe corrigir exatamente o quão perto isso. E então dentro daqui o que queremos fazer é fazer uma div com a classe Col. E então, dentro disso, vou fazer apenas a imagem, apenas um portador de lugar aqui. E acredito que esse link ainda funciona. E vou copiar isso cinco vezes. Então, queremos um total de cinco colunas aqui. Agora, se você se lembrar, dissemos que o Rho chama três e o que isso vai fazer é apenas bloqueá-lo. E, portanto, apenas três colunas aparecem em uma linha a qualquer momento. Então salve isso e atualize. E você pode ver aqui que temos cinco colunas, mas são três de diâmetro, que é exatamente o que queremos. Agora. Para dar a vocês uma ideia melhor do que eu normalmente uso essa estrutura de linha, vou fazer apenas um pouco de estilos para as imagens. Faz aqui em cima e esse é o Hub. Muito rápido. Vou adicionar alguns estilos que iriam dizer imagem, já que essas são as únicas imagens na página, vou dizer com um auto de 100% de altura. E isso deve preencher o espaço para as colunas. Certo, perfeito. Então você pode mexer com alguns dos outros estilos para aproximá-los. Bem, o que é realmente bom é que você menor e eles meio mantêm a proporção e o TAC, o que é muito bom. Então, como eu disse, isso é bom para galerias de imagens ou se você precisasse exibir qualquer dado em uma estrutura muito definida. E você também pode levar isso um pouco mais longe e você pode definir pontos de interrupção. Então você pode dizer amigos de linha, três grandes. E então diga em telas médias que queremos que elas mostrem apenas duas. E então, em telas muito pequenas, só queremos mostrar uma em uma fileira. Vamos salvar isso e atualizar. E nada acontece. Mas à medida que ficarmos um pouco menores, eles vão mudar para dois. E então, à medida que ficarmos menores, ele voltará para um. E então, para muito pequeno e precisamos definir isso, isso realmente entrará em vigor aqui. Então, o que precisamos fazer é atualizado para que apenas as classes padrão sejam perfeitas. E então, como você pode ver, quando ficamos maiores, nossos estilos permanecem perfeitos. Então esse é um exemplo de como usar a linha, as colunas, as classes e o bootstrap. Como eu disse, eles podem ser usados para qualquer coisa. Eu tipicamente os uso para galerias de imagens. Mas deixe sua imaginação enlouquecer. 8. Seção 8 — Ordenamento de colunas: Nesta seção, vamos falar sobre colunas um pouco mais. Vou entrar em um pouco mais de profundidade sobre as classes personalizadas que são aplicadas a essas colunas. As colunas de bootstraps são, acho que a grade é realmente construída usando flexbox, CSS, flexbox. Portanto, há muitos estilos e classes incorporados que você pode usar que utilizam estilos Flexbox. Então coisas como alinhamento vertical, alinhamento horizontal e coisas assim são construídas diretamente no bootstrap, o que torna muito bom fazer coisas assim. Assim, você pode ter suas colunas alinhadas verticalmente ou alinhá-las horizontalmente. Então isso é útil quando você está construindo seus layouts ou navegações. Por exemplo, é muito bom ter seus muitos links alinhados verticalmente no contêiner em vez de tentar escrever um monte de CSS personalizado para fazê-los parecer centralizados. Então é muito bom que o Bootstrap tenha todas essas coisas integradas , como envolvimento de colunas. Uma coisa que eu uso com bastante frequência é reordenar. Então isso é bom. Por exemplo, digamos que você tenha conteúdo à esquerda e imagem à direita. E, em seguida, a linha abaixo que você tem imagem à esquerda e conteúdo à direita. Bem, no celular, quando você empilha, você terá conteúdo, imagem, conteúdo de imagem. Então, o que eu gosto de fazer é reordenar essas colunas de segunda linha para estarem de uma forma em que, no celular, onde o táxi vai, imagem de conteúdo, conteúdo, imagem e simplesmente flua um pouco melhor para o usuário. Então isso é muito bom. Então você pode ver aqui o exemplo diz primeiro no DOM, nenhuma ordem aplicada em terceiro e DOM com uma ordem de 1, segundo e abaixo com uma ordem com uma ordem maior. Então você pode ver que esta é apenas uma coluna padrão aqui. O segundo aqui ordenou o dash f5, o que significa que ele será colocado no final, já que tem um número maior. E, em seguida, a terceira coluna tem a ordem um, o que a colocaria, quando ela é exibida, ela seria renderizada acima de cinco. Então é assim que eles estão recebendo esse exemplo aqui. E você também pode aplicar o ponto de interrupção a essas classes para que elas só alterem a ordem em um determinado ponto de interrupção. Bootstrap também tem colunas de compensação. Então, se você, por qualquer motivo não quiser ter uma terceira coluna, você pode simplesmente compensar por quatro neste exemplo. E isso lhe daria uma lacuna entre eles. Então, vou entrar no editor de código e dar a vocês um exemplo rápido do que eu estava falando. Certo. Então eu vou subir aqui entre os contêineres R2 já e adicionar um novo com uma linha e depois duas colunas dentro dessa linha. Vou dizer em telas grandes que queremos que elas tenham seis de largura. E então eu vou copiar essa linha e colá-la logo abaixo. E então, na primeira coluna, dirá esse texto. A segunda coluna obterá a mesma imagem de baixo. E então essa mesma imagem vai na primeira coluna e na segunda linha. E então este é algum texto irá e a segunda coluna e a segunda linha. E vou excluir nossos contêineres antigos, já que não precisamos mais deles. E depois salve e atualize. E isso é o que devemos obter algum. Temos algum conteúdo na imagem à esquerda, imagem à direita terá constante à direita. Então, agora, quando encolhemos a tela, eles se empilham. E você pode ver que não parece o melhor ter duas imagens tipo de costas para trás assim. Vamos querer dar ao usuário algum espaço para respirar entre os elementos da nossa página. Então, para obter esse efeito, na verdade vamos manter tudo, como o temos. E vamos mudar o pedido com as classes padrão do Bootstrap. Então, o que precisamos fazer é que as aulas de ordem. Então, vamos dizer neste primeiro, vamos dizer Order dash T2, que está apenas dizendo, por padrão, queremos que essa seja a segunda coluna. E então vamos dizer que peça um médio. Então, quando for maior que uma tela média, ela será a primeira coluna, que a manterá no lado esquerdo. Mas, além disso, vamos querer isso em segundo lugar, o que significaria qualquer coisa média ou menor. Então, telefones celulares, queremos que seja essa, a primeira coluna. E então, na coluna inferior, vamos dizer Ordem traço um e depois pedir médio 2. Vamos seguir em frente e salvar isso e atualizar. Você pode ver nada realmente muda. Mas se ficarmos menores, você pode ver aqui, o texto está no topo. Imagens na parte inferior, os textos estão na parte superior, a imagem está na parte inferior. Perfeito. Isso é exatamente o que queremos. 9. Seção 9 — Revisões de todos os componentes: O próximo tópico que eu quero abordar são algumas classes padrão do Bootstrap sobre topografia, imagens, tabelas e figuras. Então, o Bootstrap tem um monte de estilo padrão que, na verdade, parece muito bom para a maioria dos aplicativos. É claro que você pode personalizá-los, como famílias de fontes, pesos, tamanhos e outras coisas. Mas o que está embutido aqui, como você pode ver, é algum dimensionamento padrão para elementos de cabeçalho. Eles também têm estilos padrão para o elemento pequeno, que meio que dá a ele uma aparência mais desbotada para algum conteúdo secundário. Normalmente, como um subtítulo ou algo parecido. Eles têm títulos de exibição que são ainda maiores. E então você pode, claro, personalizá-los como achar melhor. Que o parágrafo principal, que normalmente é, você sabe, quando você está olhando para um post de blog que meio que se destaca um pouco mais, faz mais ponto, meio que leva você para baixo a página. E, em seguida, basta ter um tom de classes embutidas realmente legais que você pode utilizar sem ter que escrever seu próprio CSS, o que, você sabe, se você estiver construindo um site grande, isso pode economizar muito tempo. Há classes universais, então elas são fáceis de lembrar enquanto você está digitando ou enquanto você está codificando, você pode, você sabe, ser realmente fluidas enquanto trabalha, o que é muito bom. são as fontes, imagens da imagem incorporada da classe responsiva, IMG dash fluid, que aplica a largura máxima 100% e altura automática. Isso só permite que a imagem preencha o espaço. Se você se lembra de uma lição anterior, eu realmente fiz isso manualmente para preencher o exemplo de linha, coluna que eu estava tentando expressar para vocês. Então eu facilmente poderia ter usado essa classe, mas como eu disse, acabei de aplicar os dois estilos lá para obter os mesmos resultados. Portanto, teria sido muito mais rápido apenas aplicar essa classe às imagens. À medida que chegamos mais adiante, eles têm miniaturas de imagem, o que é bom. Dá uma bela borda arredondada com uma borda muito fraca. Eles têm muitas classes de alinhamento para imagens para deixá-las alinhadas à esquerda ou alinhadas à direita, centralizadas. E então você pode fazer o mesmo com elementos de imagem aqui. Então, é bom conhecer tabelas. Isso é realmente muito útil se você estiver lidando com muitos dados que está expressando para o usuário. Ter estilos de tabela integrados economizará muito tempo. Então, por padrão, colocando parte da tabela de classes em sua tabela HTML, vamos estilizá-la muito bem. Você pode ver ao chegar um pouco mais adiante, você pode aplicar variantes secundárias às suas tabelas para dar a elas, você sabe, dependendo do aplicativo, diferente, uma cor diferente. Você poderia fazer X e, em seguida, tabelas com linhas listradas. Novamente, todas essas são apenas classes para economizar tempo criando seu aplicativo ou seu site. Eles têm linhas de pairar. Escuro para o modo escuro, ativo. Então, apenas muitas coisas ótimas aqui. Então, eu só quero tocar brevemente nesta seção. Eu quero ir muito em profundidade só porque muitas dessas coisas serão personalizadas à medida que vocês criam seu site. Então, saiba que eles estão aqui. Existem outros estilos internos são classes que o Bootstrap tem para alinhamento de texto e coisas como essa margem de preenchimento. Então, definitivamente, dê um mergulho mais fundo lá quando tiver uma chance. É muito, muito bom e acelerará seu desenvolvimento. Esta seção será uma visão geral rápida de todos os componentes incorporados ao Bootstrap. Eu não vou aprofundar todos e cada um, mas quero falar sobre eles à medida que vamos por esta lista e o que eles são. Então, começando pelo topo, temos o elemento acordeão. E tudo isso é, é apenas uma maneira expandir e colapsar o conteúdo. Só para dar à sua página e uma aparência mais concisa. Você vê isso muito com seções de perguntas frequentes semelhantes. Você tem a pergunta como título e, em seguida, a resposta dentro. Portanto, é uma maneira muito boa de condensar sua página. E eles fornecem um pouco mais de controle sobre coisas como essa. Você pode remover a cor de fundo e as bordas para ter uma mais perfeita e integrada ao seu site. À medida que você desce, você pode fazer coisas como sempre aberto. Então, quando você carrega a página das primeiras abertas e, em seguida, você pode ver a acessibilidade para obter mais informações. Então isso é muito bom. Alertas, esses serão elementos mais interativos. Se você enviar um formulário com sucesso ou falhar, ou se o usuário baixar algo ou se você tiver configurado. Eles têm esses alertas integrados que são muito legais. Eles são temáticos com base no sucesso ou no fracasso. Se houver um aviso, diz algo talvez um pouco mais genérico, nenhum estilo. Então, esses são muito legais. Eles também têm recursos de descarte integrados. Você pode simplesmente fechá-lo e ele desaparecerá. Isso está embutido na parte JavaScript do Bootstrap, o que é muito bom. O elemento crachá. Você vê isso muito para acionar como este exemplo aqui, algo novo ou uma notificação ou o que você tem. Então, eles dão a você a capacidade de adicionar números. Aqui está o tipo de símbolo de notificação com o qual estamos acostumados, o símbolo da caixa de entrada. Você pode alterar a cor de fundo, emblemas de pílula. Você pode fazer coisas. Talvez atribua várias categorias a algo, pão ralado. Então, estes são muito padrão criados links de migalhas de pão em todo o site. Os botões são muito legais. Eles também são bastante interativos. Então, o estado de paira, todos os tipos de modos diferentes aqui. Então, sucesso primário, secundário, aviso de perigo e assim por diante. Existem muitos desses componentes, o principal perigo de sucesso secundário, perigo de sucesso secundário, esses nomes de classe são consistentes. Então, se você estiver usando um botão sucessivo, você também pode usar um alerta de sucesso. Então isso é muito bom, algo em que eles pensaram muito. Novamente, você delineou botões, talvez um call to action secundário lá. Você tem tamanhos diferentes. Estados com deficiência. Você pode fazer todos os tipos de coisas aqui. Eles têm os estados de alternância. Então você pode ver que isso é passar o mouse, está ativo e depois desativado. Muito bom lá. Eles também dão a você a capacidade de agrupar botões. Você vê isso muito com páginas em um blog enquanto você está rolando, coisas assim. Então, um pouco de estilos embutidos, seus cartões são realmente bons recursos com o Bootstrap. Então, isso lhe dá uma maneira muito fácil de expressar um lugar ou um restaurante, uma loja ou algo assim. No entanto, vocês estão exibindo seu conteúdo. Isso lhe dá uma maneira muito boa e rápida ter um elemento organizado bem definido. Então você pode ver que você tem a classe de cartão. Dentro disso, você tem a imagem com a imagem do cartão, corpo do cartão de classe superior com o título, o texto e o botão. E você pode adicionar vários botões e todos os tipos de coisas assim. E todos esses componentes são personalizáveis. Portanto, se você não quiser o botão primário lá, você pode usar um botão personalizado, você pode usar um botão de classe diferente e assim por diante. Então, apenas mergulha mais fundo nisso e ele não tem uma imagem. Isso tem uma imagem sem botão, e assim por diante. Então, os cartões são definitivamente muito úteis. Não os negligencie. Como eu disse, eles já são Bill, então isso economizará muito tempo de ter que codificar e estilizar manualmente algo assim. Carrossel é outra ótima característica do Bootstrap. É basicamente um controle deslizante incorporado. Então, novamente, você não precisa usar outro serviço de terceiros ou não precisa codificar algo completamente do zero para obter um tipo de elemento do tipo carrossel deslizante. É muito legal também porque eles têm alguns recursos adicionais aqui como indicadores, setas e coisas assim. Tão muito legal, eles são botão de fechar. Acredito que isso só permite que você torne certos elementos desmissíveis. Não tenho certeza. Eu acho que este é um elemento bastante novo aqui com o Bootstrap, então eu não estou muito familiarizado com este, mas parece que eles têm algumas opções diferentes com ele. Então, definitivamente, algo que eu mesmo estarei olhando mais em profundidade. Colapso. Então você pode ver que isso é como um acordeão, apenas um pouco diferente de acionar algum conteúdo. Isso pode servir uma grande variedade de uso aqui. E, novamente, esses são apenas elementos básicos que mudam com as classes padrão do Bootstrap. Portanto, certifique-se de prestar atenção a eles. Portanto, para este exemplo recolhido aqui e link com HRF, você pode ver que há um traço de dados BS traço título igual ao colapso. E então, se você rolar um pouco, sim, os controles de área entram em colapso exemplo. Então, é isso que você realmente vai olhar para segmentar o conteúdo. Assim, você pode ver exemplos recortar o colapso de ID. Então, quando você clica nisso, bootstrap está dizendo: Ok, procuraremos esse elemento e, se você encontrá-lo, vá em frente e expanda-o ou recolha com base no estado ativo. Então você pode ver clicando que mostra o mesmo texto aqui. Então é assim que isso funciona. Portanto, certifique-se de que , se você estiver copiando esses exemplos aos quais está prestando muita atenção, os IDs são os elementos que estão direcionados. Porque se você não fizer isso, será um pouco mais complicado solucionar problemas. Então, certifique-se de estar prestando atenção nisso. Você pode ver coisas assim. Pequenas animações. Em seguida, temos dropdowns. Você verá muito e navegações ou às vezes, preenchimentos de formulários ou uploads de arquivos e coisas assim. Então, outro elemento embutido que é muito, muito bom. Liste grupos. Então, isso apenas adiciona um pouco de estilo padrão à lista não ordenada ou a uma lista ordenada. Então você pode ver que há uma pequena borda com um raio de borda. Talvez um pouco de preenchimento em torno tudo. Você tem os ativos. Você tem o estado ativo, estado desativado. Você pode adicionar alguns links e botões lá. E assim por diante. uma vez, uma versão liberada, então ela se encaixa um pouco bem no seu site. Você pode adicionar números. E isso é muito legal. Então, apenas pegando este , por exemplo, aqui, para codificar algo assim pelo zero, você teria que criar todo o elemento, dar a cada um e a tudo o seu próprio nome de classe. Construa isso, posicione isso aqui à direita e assim por diante. Então, o Bootstrap facilita muito quando você pega o jeito, adicionar essas classes internas torna-se uma segunda natureza. Assim, você pode ver lista, lista de grupos, grupo numerado. Isso é o que vai adicionar esses números reais aqui. E, em seguida, no item da lista, você adicionará item de grupo de lista, justificará o conteúdo entre o início do item. Então, essas são as aulas sobre as quais falei em uma seção anterior aqui. E esses são apenas os estilos flexbox que dão tudo o que eu espaçamento. Essas são as margens padrão e as classes de preenchimento e assim por diante. E então você pode ver que é só que o subtítulo e o conteúdo, então o resto é todo tratado, todo o estilo é tratado por todas essas classes de grupo de listas. Então, isso é muito legal. Modais novamente são uma coisa muito boa de se ter incorporado. Estou tendo que codificar algo assim a partir do zero pode levar muito tempo. Então, novamente, se você estiver copiando esses exemplos, certifique-se de que tudo corresponda. Se você estiver mudando os nomes das classes estão fazendo algo diferente. Então, é muito legal. Lançado demo, modal e assim. Tão muito legal. Aqui está o botão fechar, fechar botão, coisas assim. Então, todos eles são apenas incorporados e super, super agradáveis de se ter. Então navs e guias. Isso é outra coisa legal ter embutido aqui para navegações, seja no cabeçalho ou no rodapé. Apenas ter uma maneira de colocar as coisas para que elas fiquem bonitas imediatamente é uma característica muito legal. Então, estou seguindo em frente. Temos navbar e isso usa apenas algumas das classes de navs e guias, bem como algumas coisas adicionais. Então você pode ver aqui em cima neste exemplo, temos a barra de navegação. Isso é realmente chamado de marca, então a barra de navegação, traço e marca. É aqui que você pode colocar o nome do seu site ou seu logotipo com um link. Então seguimos em frente. Temos o menu real. E isso utiliza o elemento suspenso. Eles também têm um estilo de forma incorporado que eu ainda não toquei. Essa será a próxima seção, mas eles têm um formulário e o cabeçalho também. E, por padrão, se você copiar esses exemplos de navbar, eles realmente terão a versão móvel funcionando também. Então você está olhando para isso em uma tela menor, ele entrará em colapso e mostrará o botão de hambúrguer para realmente expandir o formulário. E você pode ver isso aqui. Alternar a barra de navegação da classe de botão ou dados do botão Type Button, colapso de alternância BS traço e assim por diante. Este aqui é o ícone do hambúrguer. Então, se essa fosse uma tela menor, você seria capaz de ver o botão do celular aparecer, o menu principal aqui e o formulário desaparecem. E então, quando você clica nesse botão de menu, todos esses elementos apareceriam muito bem estilizados, tão bom lá. Eles também têm estilos diferentes aqui para imagens em sua imagem e tags nav, acreditam que há uma classe de modo escuro aqui também. Então você pode ver aqui, painel de navegação Light, BG light, você pode mudar isso para escuro e você terá uma versão mais escura. Aqui está o formulário para as navbars. Normalmente, é apenas uma caixa de pesquisa, por isso é bem simples. Mas essas classes de entrada e classes de botões podem ser usadas em outros lugares onde os formulários estão. Tão legal lá você pode adicionar alguns ícones. Então isso é uma barra de navegação. Definitivamente, definitivamente explore isso. Muitos recursos excelentes. Fora da tela. Isso é bem parecido com os menus suspensos para dispositivos móveis. Estes são, essa é uma maneira de fazer com que o conteúdo da viewport Off Off apareça em seu site. Então, como você pode ver aqui, link com uma unidade, ela desliza da esquerda. Às vezes, eles são usados para menus móveis. Outras vezes, você sabe, você pode fazer praticamente qualquer coisa com isso. É apenas uma maneira de armazenar conteúdo disponível para acesso rápido. Tão bem legal lá. E, às vezes, o que alguns desses componentes bootstrap permitem que você se vincule diretamente a ele. Então, por exemplo, um acordeão, você poderia realmente segmentar o painel de acordeão que deseja abrir adicionando um parâmetro ao URL, que é um recurso muito, muito legal. Se vocês tiverem alguma dúvida com isso, por favor me avise e eu posso elaborar sobre isso também. Paginação ou paginação. Não sei se isso está sendo pronunciado corretamente. Mas esse é um ótimo recurso para estilos de blog e assim por diante, ou o que você precisa passar por página. Então, ter isso embutido, novamente. Espaços reservados de recursos agradáveis. Então isso é interessante, isso é mais, se você estiver, se você está zombando um design ou algo assim e você não tem conteúdo real. Parece que você pode simplesmente colocar espaço reservado e isso meio que lhe dá essa caixa apertada animada acinzentada. Isso pode ser útil se você estiver compartilhando seu design com uma equipe ou um cliente ou algo tentando obter aprovação, apenas dando um exemplo, isso é o que poderia parecer. Em vez de colocar conteúdo real, pode ser bastante útil. Popovers é algo que depende de uma biblioteca de terceiros chamada Popper. Ele não está embutido diretamente no Bootstrap, mas pode ser conectado facilmente. Eu não uso isso com muita frequência, mas é isso que parece um tipo que dá você pensar que eles também são chamados de dica de ferramenta. Mas isso lhe dá muito controle sobre como você quer, como você quer que ele apareça, coisas assim. Tão bem legal. As barras de progresso normalmente são usadas para mostrar o progresso do carregamento. Você não vê isso com muita frequência em sites mais aplicativos. Mas estes estão aqui. Eles dão a você a capacidade de adicionar rótulos e alto em animações, planos de fundo e outras coisas. Então, outro recurso bem legal lá. Este é um recurso muito bom também, ScrollSpy. Isso lhe dá a capacidade de rolar para um local específico na página com base em um clique. Então você pode ver aqui, você pode descer para o segundo cabeçalho ao clicar em segundo, ou se você dirigir até o terceiro cabeçalho com base no terceiro clipe. Então isso é muito legal, algo para utilizar se você tiver uma página muito longa. Spinners, novamente, normalmente mostrados para carregar animações. Esse também é um elemento bastante novo, acredito. Mas, novamente, você tem sucesso primário, secundário e assim por diante. Esquemas de cores para mostrar um formulário, envio, carregá-lo ou algo parecido. Então, os brindes são basicamente notificações. Você vê isso muito com aplicativos da web. Não tanto apenas um site padrão, mas novamente, o Bootstrap é feito para sites e aplicativos. Então isso é muito legal. Novamente, eles são desadmissíveis e muitas coisas legais que você pode ver aqui em baixo. Assim mesmo. Tão coisas muito legais lá. Mais uma vez, tudo embutido. Eu não acredito que este exija um terceiro. Agora ele está embutido. Então, novamente, muitas boas informações aqui se você quiser implementar isso. E, em seguida, dicas de ferramentas, novamente, semelhantes aos popovers, mas essas não são tão personalizáveis. Assim, você pode ver que é muito menor, mais estático tipo de dicas de ferramenta. Portanto, essa é a maioria dos componentes incorporados ao Bootstrap. Novamente, se você quiser um mergulho profundo, qualquer um desses como você está construindo seu site ou aplicativo, por favor. Isso lhe poupará muito tempo. Mais uma vez. Mesmo se você quiser usar como ponto de partida, basta pegar algo na página e, em seguida, você sempre pode ajustá-lo a partir daí, adicionar seu próprio toque pessoal a ela, mas definitivamente confira, você não vai se arrependa. A última coisa que quero abordar antes de mergulharmos na construção nosso clone do Facebook é o recurso de formulários dentro do Bootstrap. Então, como você pode ver aqui, eles incluem muitos estilos para praticamente todos os elementos que você pode pensar para um formulário. Portanto, controles de formulário, verificações e rádios, grupos de entrada, layout, intervalo de seleção, rótulos flutuantes e validação. A parte de validação é realmente muito legal. Então, à medida que você está criando seus formulários e deseja ter validação para a entrada do usuário. Bootstrap tem isso embutido, o que é muito, muito bom. Então, vamos rolar um pouco para baixo e ter uma visão geral muito rápida. Então, neste exemplo aqui, temos o endereço de e-mail e a senha com um botão de envio. É mais do que provável o que vamos realmente usar em nosso exemplo. Mas você pode ver pelo código, você só tem um elemento de formulário padrão. E então você tem uma div com a classe MV3. E, dentro disso, você tem um endereço de e-mail de rótulo com a classe de rótulo de traço de formulário. Ao lado disso, você tem a entrada com o tipo e-mail com a classe de controle de formulário. O controle de forma é, na verdade, o que lhe dá, os belos cantos arredondados, uma ligeira borda, um pouco de espaçamento em torno dele e assim por diante. E logo abaixo você tem o texto auxiliar, que recebe a classe de texto de traço de formulário que apenas diz nunca compartilhará seu e-mail com mais ninguém. Isso é como uma pequena dica para o usuário. Então, o que será estilizado um pouco diferente do rótulo real. Por isso, é bom que essa senha incorporada. Mais uma vez, classes muito semelhantes, elas são formadas formulário de controle, rótulo e, em seguida, você tem o botão enviar, desculpe, logo antes que você tenha a caixa de seleção que também é estilizada seleção de formulário rótulo. Acredito que isso coloca o rótulo ao lado da caixa de seleção em vez de abaixo ou no topo. E, em seguida, o botão com uma classe de primário. Então você pode ver como todas essas coisas estão se unindo. Todas as classes ao longo, todos os componentes trabalham juntos para dar consistência ao site. Então esse tipo de justo e expande algumas dessas classes, os textos do formulário. Então, parece que isso seria comumente usado para descrever quanto tempo uma senha deve durar. vez, apenas um menor lá. Estados diferentes, acessibilidade. Você pode ver aqui à esquerda, você pode clicar em qualquer um desses grupos de entrada são bons. Ele lhe dá a capacidade de adicionar ícones. Para valores em dólares são nomes de usuário e coisas assim. Portanto, dar ao usuário um pouco de orientação é sempre bom. Etiquetas flutuantes. Isso é meio legal. Conforme você clica em um tipo de colapsos e acima e, em seguida, dá um pouco de espaço para digitar Validação. E você pode ler tudo isso. Mas aqui embaixo, se você clicar em enviar formulário, ele realmente validará as informações. Portanto, use o nome de usuário, selecione um estado, concorde com os termos e, em seguida, envie. Então, novamente, muito legal que isso é incorporado. Normalmente, você teria que usar um serviço de terceiros para obter algo assim. Então, novamente, muito bom que o Bootstrap tenha isso incluído. E na próxima seção , na verdade vamos mergulhar e começar a construir nosso clone usando o que aprendemos até agora. Se você ficou comigo até aqui, muito obrigado. Espero que vocês estejam curtindo a aula. E só vai melhorar a partir daqui. 10. Seção 10 — Página de login de construção: Nesta seção, vamos começar a criar nosso clone do Facebook. Então, se vocês ficaram comigo até aqui, eu realmente, realmente, realmente aprecio isso. Por favor, deixe um comentário do curso se você gostou. Isso realmente me ajuda a pensar em tópicos para cursos futuros, como posso melhorar e assim por diante. Portanto, é muito útil obter esse feedback para mim pessoal. Então, novamente, obrigado. Então, com isso dito, vamos prosseguir e começar a criar a página de login. Então, não vamos construir essa pasta parte deles só vai fazer a seção superior aqui. Então, vamos voltar para o editor de código e usaremos apenas o arquivo index.html que estamos usando até agora. E vamos limpá-lo um pouco para que não precisemos do estilo. E ativamos envoltório de palavras novamente por algum motivo, ele foi desligado. Então vou ligar isso e depois vou me livrar do material fluido do recipiente também. Então, olhando para trás na página de login, vou dividir isso em termos de como vamos construir a grade. Portanto, esta seção aqui é bem fácil. Vamos fazer um contêiner de largura total. Vamos fazer um contêiner com duas colunas. Vamos ter algum conteúdo à esquerda e, em seguida, teremos um formulário à direita. Então, vamos entrar no editor de código e vamos adicionar o fluido de traço do contêiner. E então vamos adicionar outro contêiner. E dentro desse contêiner aninhado, vamos adicionar uma linha. E então vamos fazer com colunas de largura igual assim. E então, no lado esquerdo, vamos fazer uma imagem. E, na verdade, vou copiar essa imagem do Facebook e atualizar a página. E você pode ver as imagens do Facebook ali mesmo. Ótimo. E logo abaixo vou adicionar algum texto. Então, vamos ver o que eles têm aqui. Eles se conectaram com amigos e o mundo ao seu redor no Facebook. Só vou copiar e colar disso. Certo, perfeito. Então, precisamos fazer um pouco de estilo aqui apenas para alinhar as coisas um pouco melhor. Mas antes de fazermos isso, quero adicionar à seção do formulário à direita. Então, vou pular de volta para o Bootstrap. Vou descer dois formulários. Revise, e vou copiar este primeiro exemplo aqui, mas o e-mail e a senha e copiá-lo e entrar no editor de código. Eu vou fazer uma coisa aqui, no entanto. Vou adicionar uma div com uma classe de invólucro de formulário, formar um invólucro de sublinhado e colá-lo dentro disso. E a razão pela qual eu faço isso é apenas para dar algum tipo de cor de fundo. Então você pode ver que isso é meio envolto nesta caixa branca com uma sombra de caixa. Então eu queria fazer a mesma coisa. Ótimo, então, para estilizar isso, vamos em frente e conectar uma folha de estilos. Então, vou fazer o link e, em seguida, css, styles.css. Então, na verdade, preciso abrir meu Finder e apenas adicionar uma pasta chamada CSS. E então, dentro disso, preciso realmente criar o arquivo CSS. Então o que vou fazer aqui é no meu editor de código Visual Studio Code, vá File Open. E vou abrir esta pasta do curso ou a pasta do site que fizemos no início. E dessa forma eu recebo o navegador de arquivos no lado esquerdo aqui. Então, vou abrir o arquivo index.html novamente. E então vou abrir minha pasta CSS e criar um novo arquivo chamado um cara chamado Styles. Isso é CSS. Ótimo. Então, dentro do arquivo styles.css, precisamos basicamente direcionar algumas dessas coisas. Então, para começar no fluido do traço do contêiner, vou adicionar uma nova classe e chamá-lo de contêiner de sublinhado de página. E então, na folha de estilos, vou colocar o nome da classe lá. Vou dar-lhe uma cor de fundo de F6, F6, F6. Isso vai dar a ele um fundo cinza muito claro. E, em seguida, vamos direcionar a linha. E o que queremos fazer aqui é usar a classe Bootstrap integrada para linhas para alinhar verticalmente nossos elementos. E isso é alinhar o centro de itens assim. Então vá em frente e salve isso e vamos atualizar e ver como são as mudanças. E você realmente não pode dizer só porque não há. Altura ou preenchimento ou qualquer coisa neste contêiner. Então, o que podemos fazer é saltar de volta para a folha de estilos e dar a isso uma altura de 100 vh, que é a altura vertical da janela de exibição. Então, isso deve esticar essa cor de fundo, altura total da janela. E agora você pode ver isso. E então precisamos fazer a mesma coisa para o contêiner em tamanho, enquanto um contêiner de página sublinhado alturas 100 vh. Vamos seguir em frente e salvar isso. E não está funcionando. Então, vamos descobrir o que estamos fazendo de errado aqui. Portanto, a linha também precisa e altura vertical 100. Certo? Então podemos simplesmente fazer, vamos copiar isso. E diremos que a linha dentro disso é 100 também. Ok, ótimo, então temos que tudo está muito bem. Agora podemos colocar a caixa branca ao redor do formulário e vamos realmente tornar o formulário um pouco menor. Volte para o editor de código, em nosso arquivo HTML. E em vez de fazer a última coluna 6, vamos fazer quatro. Você vê que isso encolhe um pouco. Vou voltar para a documentação aqui, vá para Colunas de layout. Vamos ver se podemos encontrar a área que fala sobre deixar uma lacuna no meio que deve ser compensada. Então, basicamente, tudo o que precisamos fazer é apenas adicionar uma classe offset. Offset grande 2. Então, desde que passamos de seis para quatro, temos dois espaços de colunas sobrando. Então, vamos compensá-lo por 2 em telas grandes, o que deve resultar nisso. E, na verdade, vou mudá-lo para um só para que fique um pouco mais centrado. Assim como isso parece muito, muito bom. Então, vamos adicionar um fundo branco a isso. Então, vamos direcionar esta classe de wrapper de formulários. Diga cor de fundo, branco e adicione um raio de borda de 10 pixels. Vamos adicionar um pouco de preenchimento ao redor. E isso não deve ser suficiente para nos dar isso. E então vamos adicionar uma pequena sombra de caixa. Vou ajustar essa cor preta aqui para ser um pouco mais leve. Certo, ótimo. Então, vamos em frente e atualize isso para D3, D3, D3. E atualize e tenha uma boa aparência. Então, vamos em frente e atualize alguns dos estilos do lado esquerdo aqui. De acordo com a página inicial dos logotipos, muito menor e o texto é um pouco maior. Então, podemos realmente mudar isso para ser, vamos apenas dizer um h3 e em vez de um parágrafo. E então vou dar a imagem e o ID do logotipo. Então eu vou dizer Logotipo, altura máxima, 75, largura, automático. E isso deve estar muito bom. Talvez possamos ir um pouco maior. Sou um logotipo, mas o texto em si parece muito bom. Então, vamos mudar isso para um 100. Perfeito, e estamos muito bem. E mais uma coisa que podemos fazer é realmente adicionar o botão criar conta abaixo do formulário que eles têm aqui. Então, vamos seguir em frente e fazer isso muito rápido. Então, para fazer isso, queremos ainda estar dentro da caixa branca, a caixa de fundo branca. Então, vamos logo abaixo deste botão de envio aqui. Vamos adicionar uma linha horizontal. E depois vou adicionar um momento de botão. Então Botão Classe e então vamos dizer sucesso do botão para que possamos obter o botão de fundo verde. Eu direi Criar, criar uma conta e depois atualizar. Certo, ótimo. Então eles não se centraram. Então, vamos voltar para o Bootstrap e entrar na seção de botões. E o que queremos fazer é adicionar o botão tipo igual ao nosso botão aqui, assim. E então queremos realmente obter a classe de alinhamento para esses botões. Então, vamos procurar isso. Ok, então parece que tudo o que precisamos fazer é colocar isso dentro de uma div com algumas aulas aqui. Alguém vai copiar isso e, em seguida, embrulhar nosso botão e esse preenchimento automático div tentando preenchê-lo com o elemento errado. Então, deixe-me consertar isso. Certo, ótimo. Então, vamos avançar e atualizar e ajustar conforme necessário. E isso não está mudando. Então, vamos descobrir o que fizemos de errado aqui. Opa, eu preciso me livrar dessa div de fechamento. Assim mesmo. Ok, perfeito, então temos isso centrado. Então esse é um exemplo rápido de como usar alguns estilos de Bootstrap para obter uma bela tela de login. Usamos o contêiner, as classes de coluna de soma de linhas, algumas classes de alinhamento de linha, bem como todas as classes de formulário. Então, este é um bom exemplo de como obter algo assim em um período relativamente curto de tempo. 11. Seção 11 — Como criar a navegação: E nessas últimas seções, vamos construir nosso clone do Facebook da página real do feed. Então, vamos construir a navegação superior e seguida, a barra lateral em ambos lados, bem como o conteúdo principal. Vamos fazer exatamente o que está nesta captura de tela. Não vamos construir a página inteira enquanto você rola e coisas assim, mas sinta-se à vontade para levar isso até E1. Pegue o que você aprendeu aqui e corra com ele e veja até onde você pode levá-lo. Eu estaria muito interessado em ver o que vocês podem criar com isso. Então, vamos em frente e mergulhe. O que vamos fazer é começar com a barra de navegação superior. Então, para fazer isso, e vamos seguir em frente e criar um novo arquivo. E vamos chamar isso de home.html. E o que podemos fazer é simplesmente copiar o que temos no índice e colá-lo no arquivo inicial. E vamos limpar tudo dentro do corpo e manter tudo na cabeça. Podemos mudar o título para homepage para que possamos dizer a diferença. E então podemos ir em frente e começar. Então, vamos entrar na documentação do Bootstrap e precisamos apenas reunir algumas informações sobre a barra de navegação. Então, vamos encontrar um que seja semelhante. Então, precisamos de um logotipo, bem como um menu e uma funcionalidade de pesquisa. Então eu acredito que esse exemplo esteja aqui. Há alguns esquemas de cores e tenho certeza que já passou no topo é o primeiro exemplo. Sim, aí está. Então, vamos em frente e basta copiar isso. Volte para o editor e cole-o. Então, o que podemos fazer é em vez de apenas navbar, podemos colocar nossa própria imagem aqui. E vou ao Google pegar um logotipo do Facebook. Esta rodada aqui não deve ser perfeita. Então, basta copiar o endereço da imagem e colá-lo lá. E então podemos dar a isso o ID do logotipo pequeno. Ótimo, então, em nossa folha de estilos, vamos seguir em frente e estilizar isso um pouco. E dê uma altura de 30 pixels e uma largura de 30 pixels. Talvez barcos pequenos demais sigam em frente e vejam o que parece no URL, basta mudá-lo para casa. E você pode ver que nós meio que temos isso acontecendo. Mas parece que a imagem que copiamos estava um pouco distorcida só porque há alguns espaços em branco ao redor dela. Então, tudo o que isso significa é que só precisamos dar um pouco mais de largura, altura porque não são quadrados perfeitos. Vamos tentar 50. Ok, perfeito, isso deve ser bom o suficiente. Agora, o que precisamos fazer é adicionar alguns ícones e mais ícones à direita. Ok, então agora temos alguns links de texto aqui. Vou deixá-los como texto só porque não quero caçar ícones, mas sinta-se à vontade para usar ícones. A única diferença será, em vez de texto aqui, em vez de link ou home, basta colocar uma tag de imagem com o link para o ícone. Essa será a única diferença. Vou deixá-los como texturas porque vai ser um pouco mais fácil para encontrar ícones. Também queremos que este menu seja centrado. Ok, então vamos trabalhar para centralizá-lo. Então, só precisamos encontrar o menu real e mudar algumas aulas ao redor. Então, se você se lembrar da lição anterior com o formulário de login centrando o botão Criar uma conta, pegou a classe m x dash Auto. Agora temos M E dash auto, então vou mudá-lo para MX, salvá-lo. E agora temos um local centrado. Perfeito. Assim, podemos mover o formulário para a esquerda. E depois adicionaremos mais alguns botões aqui à direita. Então, vamos prosseguir e trabalhar nisso. Mas para fazer isso, só precisamos encontrar o formulário. Vou cortá-lo e movê-lo de volta para aqui. E então podemos adicionar alguns menus, itens de menu no lado direito. E eu apenas copiei esse menu suspenso só para ter algum conteúdo, mas vou limpar isso. Não preciso de nada disso aqui. Vou me livrar desse divisor. Vamos ver o que isso parece. Então eu tenho a classe automática MX dash com uma lista não ordenada com três itens de lista. Eu também vou para as classes de itens suspensos por enquanto e atualizarei. Ok, então parece que está parecendo muito bom, mas precisamos ter uma aula aqui para fazer com que pareça assim. Então vamos pular aqui e vamos dizer Navbar Nav, eu sou ex auto. E espero que isso faça o truque. Certo, estamos chegando lá. Parece que só precisamos de um pouco de estilo adicional aqui. Então, precisamos da classe de item nav para cada item da lista. Então, vamos prosseguir e implementar isso. E isso deve limpá-lo, nos dar um espaçamento melhor, então melhor formatação. E não é. Então, vamos descobrir o que está acontecendo. O link nav também é o que precisamos para a classe. Então, vamos em frente e adicionar isso e aquilo. Certo, perfeito. Então, estamos parecendo bem. Mais uma vez. Sinta-se à vontade para usar ícones, como o exemplo aqui. Não tenho ícones salvos no meu computador, então não tenho nenhum disponível, mas fique à vontade. Vou mantê-los como links por enquanto. E uma última coisa que podemos fazer é mudar essa classe automática MX dash para flutuar a extremidade do traço. E então, na verdade, vamos pegar a coisa toda e movê-la logo abaixo desta tag de lista não ordenada de fechamento aqui. Isso realmente o manterá dentro do contêiner principal para a barra de navegação, que permitirá que ele seja mantido dentro da navegação móvel também. E isso é o que quero dizer com isso. Então, agora, tudo parece o mesmo. Mas quando entramos nas telas menores, ela entrará em colapso corretamente e aparecerá aqui em baixo. Precisamos ajustar os estilos para que ele não fique todo o caminho no lado direito. Mas isso pelo menos o levará no menu móvel. Troque esses estilos. Tudo o que precisamos fazer é encontrar a classe de extremidade do traço flutuante e apenas mudá-la para flutuar dash, LG dash end. Dessa forma, ele fluirá apenas no final em telas grandes e será coisa no lado esquerdo ou não flutuará em telas menores. Então, só para que você possa ver isso com boa aparência. E lá está ele. Então isso está ótimo. Isso é exatamente o que estamos depois de obter o logotipo com a pesquisa, alguns links no meio e seguida, links no lado direito também. Ótimo, então, na próxima seção, vamos construir o corpo real. Ao passo que comece com o lado esquerdo, o lado esquerdo e trabalhe para a direita. Vamos usar mais alguns elementos do Bootstrap para fazer com que essas listas funcionem, alguns cartões e assim por diante. Estou ansioso por isso. 12. Seção 12 — Barra de lateral: Tudo bem, nesta seção vamos começar a criar o conteúdo real da nossa página inicial aqui. Então, vamos começar com a construção da estrutura. Vamos fazer uma coluna do lado esquerdo, o conteúdo do meio e, em seguida, teremos uma coluna do lado direito. Então, se vocês querem levar alguns minutos e ver se conseguem fazer isso sozinhos. E se você quiser ir em frente e pausar o vídeo, experimente e volte. Vou começar. Ok, então agora vamos entrar no editor de código e vamos entrar diretamente no arquivo home.html. E vamos começar logo abaixo do elemento nav. E vamos fazer div com uma classe de contêiner. E queremos que isso seja de largura total, por isso estende toda a largura da janela de visualização. E então dentro deste contêiner, vamos fazer em uma div com uma classe de col dash, grande traço. Vamos três. E então, ao lado desse, vamos fazer col com uma classe de, ou eu sinto muito, uma div com uma classe de col, traço grande seis. E então a última coluna aqui será a mesma que a primeira. Assim mesmo. E então só para ter certeza de que temos tudo funcionando, vamos em frente e basta colocar alguns espaços reservados aqui. E mais uma coisa, na verdade, precisamos envolver todas essas colunas dentro de uma linha. Vamos seguir em frente e fazer isso muito rápido. Assim mesmo. Podemos atualizar a página e devemos ver o quadril, então os arcontes terminarão aqui. Isso vai acabar bem aqui. E então isso começará até o fim. Perfeito. Então, vamos voltar ao nosso exemplo. Então, temos uma lista com um, basicamente, um ícone ou uma imagem com algum texto. Veja mais. E então abaixo disso, meio a mesma coisa, mas temos um título nesta seção. E, novamente, para ver mais, então vamos em frente e nos concentrar nesta barra lateral primeiro. Se você quiser entrar na documentação do Bootstrap, podemos chegar aos componentes e seguida, rolar para baixo até o grupo de listas. E isso será bom o suficiente para começar aqui. Então deixe-me ver se eles têm um sim. Flush. É isso que estamos procurando aqui. Isso nos dará um pouco mais de um grupo de detentores de lugares que podemos personalizar como queremos. Vamos em frente e basta copiar este exemplo e colá-lo em nossa primeira coluna. E vamos deixar todo esse texto igual por enquanto, salvá-lo e atualizar para garantir que ele esteja funcionando. Certo, perfeito. Então, agora só precisamos obter um ícone aqui e há algumas maneiras diferentes de fazer isso. O que eu quero fazer é usar o sistema de grade dentro desse grupo de listas. Existem outras maneiras, como pseudoelementos com CSS. Pode ser um pouco complicado conseguir a imagem ou o ícone correto dentro deles. Então, com esse sistema de grade, poderemos ter um pouco mais de controle possamos seguir em frente e começar com isso. Portanto, dentro dessas listas, os grupos estão esses itens de lista. Exclua o texto e, em seguida, colocaremos uma linha. Com uma coluna. Este será muito pequeno, então vamos apenas dizer col dash grande dois. E então essa será a nossa imagem. E então, se você se lembrar da seção anterior, vamos fazer um portador de lugar. Isso pode ser 25 por 25. E então a próxima coluna pode simplesmente preencher o resto do espaço. E isso será algum texto aqui. Certo, vamos nos certificar de que está funcionando corretamente. Certo? Portanto, nossa coluna pode ser um pouco maior do que precisamos. Podemos fazer isso talvez um, mas todo o resto parece bom. Então, vamos seguir em frente e ajustar isso. E então podemos simplesmente copiar todo esse item da lista e substituir nossos outros aqui para que eles correspondam. Vamos fazer cinco elementos aqui. Atualize, ok, perfeito, então isso está muito bem. Vamos ver o que parece quando ficamos um pouco menores. Certo, então provavelmente podemos condensar isso. Então, em telas médias, vamos saltar de volta aqui. E esta primeira coluna poderíamos dizer média. Vamos mantê-lo um e depois pequeno. Vamos manter esse também. Veja o que isso faz. Ok, está bom. Vamos seguir em frente e apenas colocar isso em vigor para todas as nossas colunas aqui. Certo? Parecendo muito bem em telas extra pequenas, na verdade precisamos adicionar uma aula para isso também. Então, vamos apenas fazer col dash e apenas mantê-lo um. Vamos seguir em frente e adicionar isso rapidamente às nossas colunas e depois seguiremos em frente. Ótimo. Parece bom. Ok, então agora o que podemos fazer é adicionar o elemento acordeão, que nos dará nosso botão Ver Mais, que essencialmente exibirá mais itens da lista. Então, vamos em frente e torná-lo um pouco maior e entraremos na documentação do bootstrap. E vamos saltar de volta e navegaremos até o acordeão. Podemos simplesmente copiar o primeiro exemplo aqui e depois limpar o que não precisamos. Então, vou copiar esta versão flush aqui. Então copie tudo isso. E vamos vir aqui depois nossa lista ordenada e colar. E então, rapidamente, você pode ver essas aulas aqui. Ativamos a palavra vermelha. Você pode olhar rapidamente por aqui e ver de acordo com o cabeçalho de descarga do cabeçalho 1. Então, quando esse elemento H2 for clicado, neste botão, ele essencialmente mostrará esse conteúdo aqui. Então você pode ver o cabeçalho flush, um, cabeçalho de descarga, uma área rotulada por. Então é assim que eles se comunicam uns com os outros. Então, vamos apenas ir em frente e nos livrar dos outros dois itens de acordeão. Ok, vamos avançar e atualizar. E isso deve nos dar um ótimo item de acordeão, e ele se expandirá um pouco ótimo. Então, vamos limpar isso um pouco. Em vez de acordeão, item número um, queremos ver mais. E então, dentro do corpo do acordeão, vamos subir aqui e copiar nossa lista não ordenada. E depois cole-o dentro do corpo do acordeão. E talvez não precisemos de todos os cinco. Vamos colocar dois lá. E salve e atualize. Ótimo, então vimos mais se você clicar nele e tiver mais alguns itens da lista. Então, há um pouco de estilo que adiciona um pouco de preenchimento nas laterais se você quiser limpar isso e tê-lo nivelado novamente. Então, parece uma continuação da lista acima. Sinta-se à vontade para experimentar isso. Eu só vou deixá-lo como é só porque parece um pouco, parece mais pretendido dessa maneira. Você está expandindo e colapsando conteúdo. Espera-se que pareça um pouco diferente. Tão ótimo. No nosso exemplo, parece que há uma linha horizontal ou uma borda. E então basicamente a mesma coisa logo abaixo dela com um título. Então, vamos seguir em frente e fazer isso. Então, no final do nosso acordeão, quando ele vem aqui e está em um elemento de linha horizontal. E então vamos colocar, digamos um H4. Acredito que ditos atalhos. E então, realmente tudo o que precisamos fazer é copiar tudo o que temos acima e volte logo abaixo aqui e colá-lo e atualizar. Ok, então há um problema e podemos solucionar isso em 1 segundo. Como você pode ver, expandir um acordeão realmente expande ambos. Mas parece que nossos atalhos, talvez um pouco grandes, mas nossos itens de lista parecem bons, tudo parece bom. Então, vamos seguir em frente e mudar isso para um H5. E então vamos solucionar o problema do nosso acordeão. Então aqui você pode ver o exemplo de descarga de acordeão. E o que isso está fazendo é basicamente dar uma identificação a esse acordeão específico. No momento, ambos os acordeões na página estão compartilhando o mesmo ID. Então, o que poderíamos fazer em vez de De acordo com o exemplo de flush, podemos simplesmente renomear esse ID para acordeão de atalho. E então podemos copiar isso e colá-lo aqui para que eles estejam cientes um do outro. Ok, então o que também precisamos fazer é atualizar o ID do conteúdo de colapso. Assim, você pode ver aqui esse ID também é semelhante ao acima. Então, vamos apenas adicionar atalho dentro disso. E, em seguida, atualize onde ele precisa estar. Certo, vamos ver se isso faz o truque. Perfeito. Então esse está trabalhando , esse está funcionando. Ótimo. Então, esta seção está parecendo muito boa. Esta barra lateral aqui, é responsiva, ainda funciona em telas menores, tudo está ótimo. Então, na próxima seção, passaremos para o conteúdo do meio aqui. Vamos construir esses cartões no topo. Vamos adicionar um pouco de um elemento de formulário aqui com alguns botões. E então passaremos para o cartão real. E, em seguida, na seção a seguir terminaremos com a barra lateral direita. E você estará pronto. Você estará a caminho de criar sites de boa aparência usando o Bootstrap como uma estrutura. 13. Seção 13 — Conteúdo principal: Na última seção, falamos sobre a barra lateral esquerda e nesta seção vamos passar para o conteúdo do meio. Então, olhando para nossa imagem de exemplo, vamos começar no topo aqui. E o que vamos fazer é adicionar um contêiner com uma linha, com algumas colunas. Vamos ter cinco colunas. E esse é um bom exemplo. Tocando de volta em uma seção anterior aqui quando falamos sobre a linha da coluna onde cada coisa é idêntica. Então, esse será um bom exemplo, um, ou caso de uso para isso. Então, vamos usar isso. Vamos seguir em frente, construir uma seção de formulário com um pequeno ícone, alguns botões e, em seguida, o cartão. Então, vamos em frente e mergulhe diretamente. Então, vamos entrar na documentação do Bootstrap. E queremos entrar no layout. E depois vamos fazer a grade. E vamos rolar para baixo. E queremos colunas de linha. Então, vamos apenas ir em frente e copiar este exemplo aqui e, em seguida, entrar no editor de código. E vamos seguir em frente para nossa coluna do meio aqui. E vou dar algum espaço entre eles. E vou colar isso da documentação. E agora parece que temos quatro colunas. Vou adicionar um quinto. E então eu vou ajustar isso um pouco. Então, olhando para trás na documentação, parece usar o, use as classes de asterix de vacas responsivas para definir rapidamente o número de colunas que melhor renderizam seu conteúdo e layout. Enquanto as masterclasses col dash normais se aplicam a colunas individuais, as classes de contagem de linhas são definidas na linha pai como um atalho com rho cause auto você pode fornecer as colunas que são largura natural. Assim, podemos ir em frente e tentar ajustar isso. Então, o que queremos fazer é baseado no ponto de interrupção, mostrar uma certa quantidade de colunas. Então, olhando para este exemplo aqui, isso é essencialmente o que vamos fazer, é que eu vou copiar isso, todas essas classes de linha e entrar em nosso exemplo e depois colá-las aqui. Então, em que em telas grandes saímos, eu tive que mostrar e provavelmente queremos que todos os phi sejam exibidos em telas médias também. E então, à medida que ficamos um pouco menores, vamos pular para três. E então, em telas pequenas, apenas mostrará dois. Então, vamos salvar isso, atualizar e ver como isso parece. Ok, vamos seguir em frente e fazer um pouco de ajuste aqui. Certo. Então você pode vê-lo empilhando. Eu mostraria uma tela grande de volta até cinco. Ok, vamos em frente e começar a estilizar isso. Então, na primeira coluna aqui, exclua o texto do espaço reservado. E vou colocar uma div com uma classe de titular da história. E então, dentro disso, queremos um ícone, precisamos de uma imagem de fundo e, em seguida, alguns textos que dizem Adicionar à história. Então, vamos começar com isso. Não sou fã, desculpe, vamos fazer uma imagem. E então, dentro para a fonte, vamos ser colocados segurar isso novamente. Vamos fazer um brilho de sinal de mais de 25 que terá a extensão com os textos que dizem Adicionar à história. E então, por enquanto, vou fazer um estilo embutido para colocar uma cor de fundo sobre isso. Eu não vou fazer preto, vamos fazer azul, então o texto está mostrando, ok, então agora exatamente o que estamos procurando ainda, mas estamos a caminho. Então, vamos adicionar mais alguns estilos aqui. Então, na verdade, vou remover esse estilo embutido. E vou copiar essa classe e depois entrar em nossa folha de estilos. Vou dizer altura para 100 pixels. Vamos fazer algum preenchimento em torno de oito pixels. Exiba o flex. E então, por dentro, podemos justificar conteúdo ou o espaço edu entre eles. E vamos ver o que isso parece muito rápido. E ainda não. Então, vamos fazer a coluna de direção flexível. Ok, estamos chegando lá e parece que nossa imagem está sendo distorcida um pouco demais. Então, vamos seguir em frente e dizer história. Imagem mais antiga, altura 25 com 25. Ok, então temos nosso ícone, top, é um pouco pequeno. Provavelmente podemos fazer isso um pouco maior. Além disso, nosso texto também é um pouco grande demais. Então, vamos seguir em frente e fazer 35, 35. E então o nosso detentor da história se eu puder soletrá-lo corretamente. Queremos que este seja o tamanho da fonte 10 pixels, cor, branco. Alinhar o texto, à esquerda. Vamos fazer nossa cor de fundo no portador da história. Certo, está muito bem. Então, o que podemos fazer agora é aplicar essa classe ao resto das colunas e estaremos a caminho. Então, vamos apenas copiar isso e colocá-lo dentro de nossas colunas restantes. E vamos atualizar. Certo, está bem. Assim, podemos tornar o texto um pouco maior e adicionaremos um raio de borda ao redor. Vamos seguir em frente e fazer raio de fronteira 10 pixels. Na verdade, vamos fazer 15. E então nossa extensão, vamos fazer um pouco maior a 12 pixels, e isso deve ser suficiente. Certo, ótimo. Estamos muito bem até agora. Em seguida, temos esta seção aqui. Se vocês querem tentar fazer isso por conta própria, sinta-se à vontade para pausar o vídeo e voltar quando o tiver pronto. Caso contrário, fique à vontade para continuar acompanhando. Então, de volta ao arquivo home.html logo abaixo. E queremos fazer outro contêiner com uma linha. E depois faremos algo semelhante aos itens da lista que fizemos anteriormente. E vamos fazer uma coluna com um grande traço. E depois a imagem. Vamos apenas usar a mesma imagem. E então, na próxima coluna, vamos ter um preenchimento do espaço restante. E isso realmente será um formulário. Então, o que podemos fazer é entrar na documentação do Bootstrap, saltar entrar na documentação do Bootstrap, dois componentes e, em seguida, sinto muito, pulei dois formulários logo acima componentes e apenas clique em Visão geral. E isso nos dará um exemplo suficiente aqui. Provavelmente podemos descrever esse primeiro elemento assim. E venha aqui. E vamos atualizar algumas dessas coisas. Portanto, não precisamos exatamente dizer endereço de e-mail. Eu nem acho que exista um rótulo no nosso exemplo. Diz o que está em sua mente, Josephine. Então, vamos adicionar um espaço reservado para que possamos nos livrar do rótulo. E então, dentro da nossa entrada real, podemos dizer que o espaço reservado é igual. O que está em sua mente. Só vou colocar meu nome. Podemos colocar quando você lê o ID, não precisa necessariamente disso no momento. E então podemos nos livrar disso também. Não temos mais um rótulo e vamos mudar isso para texto. Ótimo, então vamos atualizar. E tivemos nossos ícones um pouco pequenos demais novamente, mas temos nossa entrada bem estilizada. Então, vamos em frente e adicionar mais alguns estilos para obter isso, como queremos que ele fique. Primeiras coisas primeiro, vamos fazer isso um pouco maior. Vamos fazer 50 por 50. E vou colocar uma classe adicional neste contêiner e dizer o contêiner de status. E então vou passar para a folha de estilos. E logo abaixo de nossas histórias, vou dizer margem 35 no topo e vai dizer auto à esquerda e à direita. E então provavelmente deveríamos fazer a mesma coisa pelo nosso detentor da história. Então, vamos pular aqui para este contêiner e dizer contêiner de história e aplicar um estilo semelhante aqui. E a razão pela qual estou tendo essas instâncias separadas aqui é porque precisamos colocar uma cor de fundo branco com um raio de borda neste. Na verdade, todo o fundo da página é branco e nosso exemplo de imagem, o fundo do Facebook é como um cinza claro com elementos de fundo brancos. Na verdade, vou reverter isso. Então, vou manter o fundo branco, mas na verdade vou fazer com que isso seja um cinza muito claro. Vá em frente e atualize. Ok, ótimo, então tivemos um espaçamento melhor aqui. Esta seção ainda pode usar algum amor. Então, vamos seguir em frente e fazer isso. Vamos adicionar um pouco de preenchimento por aqui. Digamos apenas 20 pixels. A corrida fronteiriça estava um pouco alta demais, pois baixou para 12. E então, apenas por diversão, podemos fazer imagem de contêiner de status. E então vamos apenas colocar um raio de fronteira de 50% nisso, então é um círculo completo. Certo, está bem. E a próxima coisa que precisamos fazer é adicionar uma linha de botões essencialmente. Eles podem ser links neste caso, mas vamos usar elementos Bootstrap. Então, vamos fazer botões. Então você pode ir para componentes. É um grupo de dois botões. E podemos simplesmente copiar esse primeiro exemplo. Mas, primeiro, o que queremos fazer é dentro do nosso contêiner de status, queremos adicionar outra linha com uma coluna de largura total. E então podemos colar nosso grupo de botões que acabamos de copiar. E então, a partir do nosso exemplo, temos tag de vídeo com barra de identificação com foto, amigos e sentimentos cortam a atividade. Então, vamos copiar isso. Foto. Marque amigos e sentimentos. Atividade. Ok, então podemos ir em frente e atualizar e ver com o que temos que lidar agora. Ok, então não exatamente exatamente o que queremos ainda. E um grupo de botões pode não ser o melhor exemplo ou elementos usados para isso. Eu poderia realmente mudar isso. Então, vamos voltar e, na verdade, apenas implementar um sistema de grade nessa linha e nos livrar de um grupo de botões. Acho que vai estar mais envolvido para conseguir isso como queremos versus apenas fazê-lo em um sistema de grade. Então, às vezes coisas como essa ou tentativa e erro, há realmente nenhuma maneira errada de fazê-lo. Mas vou trocá-lo aqui. Então, vamos em frente e nos livremos desse grupo de botões. E então a linha, coluna grande traço 12. Vamos seguir em frente e mudar isso para quatro. E então, aqui, vamos adicionar um link. E então este dirá vídeo de barra de fotos. E podemos copiar isso, colá-lo duas vezes e atualizá-lo para marcar amigos, além de sentir atividade de barra. Então isso deve nos dar algo um pouco mais do que estamos procurando. Certo, perfeito. Então, vamos em frente e apenas estilize isso para que pareça nosso exemplo. Portanto, podemos dizer o contêiner de status e, em seguida, direcionar o link, já que esses são os únicos links nesse contêiner no momento. Contêiner de status a. E podemos dizer cor, 333, decoração de texto, nenhuma. E então vamos pular para o próprio contêiner de postura para, digamos, o centro de alinhamento de texto. Ótimo, então isso deve ser suficiente para nos conseguir o que estamos procurando. Talvez vamos adicionar um pouco de preenchimento em torno disso para dar mais espaço. Então, podemos dizer linha de contêiner de status, e podemos apenas dizer margem, 10 pixels auto. Certo, perfeito. Parecendo muito bem até agora. Precisamos adicionar nossos ícones aqui. Então, vamos seguir em frente e fazer isso muito rápido. E só para manter as coisas simples, vamos editar aqui dentro. Vamos mantê-lo pequeno, 25. Certo, perfeito. Então, do nosso exemplo, estamos bem próximos. Parece que há uma fronteira aqui, para que possamos fazer isso muito rápido. Podemos fazer apenas uma classe chamada linha de botão para a linha que está alojando os botões. E então podemos vir aqui e dizer contêiner de status, linha de botão como uma borda de um pixel sólido. E então faremos outro tom de cinza claro. E parece que isso está parecendo bom, mas só precisamos de um pouco de espaço entre a borda e nossos botões para que possamos apenas fazer preenchimento superior, digamos 15 pixels. Ok, perfeito, parecendo muito bom até agora, nossa próxima seção aqui é um cartão gigante de conteúdo. Então, temos outra imagem com um nome, algum subtexto ou um subtítulo aqui, o conteúdo real e, em seguida, uma imagem. Então bootstrap, torne isso muito fácil. Você pode entrar em componentes e depois Card. E então podemos examinar os exemplos aqui e apenas encontrar aquele que atenda às nossas necessidades. Então, neste momento, este está muito bom. O título é algum conteúdo e, em seguida, links. À medida que continuamos rolando. Você vê que isso é um tipo de totalmente construído aqui. Poderíamos fazer isso. Elementos de cabeçalho e rodapé. Você pode adicionar algumas aspas de bloco, coisas assim. Não exatamente o que estamos procurando, mas definitivamente podemos trabalhar com ele. E parece alinhamento de texto, cartões de navegação, meio interessante. E depois imagens. Então isso é, aqui é exatamente o que estamos procurando pelo título do carro da imagem abaixo. Então, vamos em frente e copiar isso. Vamos seguir em frente e copiar este de baixo. E podemos voltar aqui. E logo abaixo desta seção, vamos adicionar uma nova seção ou um novo contêiner. E vamos dar a este uma classe adicional chamada contêiner de conteúdo. E então, dentro daqui, faremos uma linha com uma coluna de largura total. E então vamos colar nosso cartão. Perfeito. Então, o que precisamos fazer é salvar isso e ver com o que temos que trabalhar antes fazer grandes mudanças. Podemos mover esse texto para cima e, em seguida, esse conteúdo abaixo disso. Então, vamos seguir em frente e fazer algumas alterações. Podemos ter este parágrafo abaixo do título. Observe a classe de som do traço de texto que está realmente dando a ela um aspecto desbotado ou cinza mais claro. Além disso, o pequeno elemento que lhe dá texto menor. Vamos prosseguir e colocar uma imagem de espaço reservado aqui. E então este pode ter, vamos dizer, 600 pixels por 400 pixels de altura. E vamos seguir em frente e salvar isso. Atualizar. Ok, com boa aparência até agora, talvez a imagem seja um pouco maior. Não necessariamente um problema, mas isso envolve isso para esta seção. Em nossa última seção, vamos fechar com a barra lateral direita aqui, será muito semelhante à primeira barra lateral que fizemos. Mas espero que vocês estejam curtindo a aula até agora e vamos pular direto para a próxima seção. 14. Seção 14 — Barra de sítio de direita e conclusão: Bem-vindo à última seção deste curso. Vamos terminar com a barra lateral direita aqui. E olhando para o nosso exemplo, podemos reutilizar muitos dos elementos que estamos usando até agora. Podemos usar o título e alguns outros estilos semelhantes por toda parte. Então, vamos em frente e mergulhe diretamente, pule no editor de código e volte para o arquivo home.html. E então vamos navegar para nossa última coluna aqui. Dentro disso, vamos querer um contêiner. E então vamos querer uma fileira. E então, dentro disso, faremos uma coluna de largura total. E então queremos fazer um H5. E então esse cabeçalho vai dizer patrocinado. Portanto, isso é para a seção Adicionar. E então logo abaixo, vamos fazer outra linha. E então isso realmente conterá o pequeno ícone com o nome. E então teremos uma imagem logo abaixo dela. Então, vamos com uma coluna grande. E então esta será nossa imagem com um espaço reservado por enquanto. Perfeito. E então, ao lado disso, bem, vamos fazer uma coluna em expansão. E então isso pode ser apenas um parágrafo. E vamos apenas dizer pizzaria. E logo abaixo desta linha, vamos fazer outra linha com uma coluna de largura total. Na verdade, essa imagem está contida. Então, o que queremos fazer é fazer 11. E diremos offset. Um. Dentro desta coluna, vamos fazer uma imagem. E vamos apenas dizer 300 por 175 e atualizamos e veremos o que temos. Certo, está bem. Então você pode ver que precisamos um pouco de espaçamento logo acima. Mas temos nosso ícone com nosso nome e, em seguida, temos o deslocamento de uma coluna para que a imagem preencha esse espaço adequadamente. Então, vamos em frente e basta adicionar alguns estilos aqui para melhorar esse visual. O que podemos fazer é apenas dizer o contêiner patrocinado, copiar essa classe para a folha de estilos e vamos descer. Vamos apenas dizer margem, top 20 pixels. E então a imagem simplesmente serve. Na verdade, temos duas imagens aqui, então precisamos ser um pouco mais específicos. O que podemos fazer é dizer título patrocinado, e então vamos apenas dizer conteúdo patrocinado. Vamos pegar a classe de título primeiro. Estou aqui. E então, para a imagem aqui, queremos um raio fronteiriço de 50%. E então, para o nosso conteúdo, vamos querer um pouco menos. Então, vamos apenas dizer talvez 12 pixels. Certo, está bem. E podemos passar para a próxima pequena seção aqui, que é aniversários. Novamente, esta será uma seção bem direta. Então, vamos adicionar uma linha horizontal, outra linha e depois outra estrada horizontal. Então vamos pular aqui. Comece com outro contêiner e daremos a isso a aula de contêineres de aniversário também e definiremos aqui. Faremos uma fileira. Isso também tem um ícone, então vamos copiar isso aqui. Poupe-nos algum tempo, e depois mudaremos a pizzaria para aniversários. E, na verdade, logo abaixo dos aniversários. Na verdade, vou misturar isso um pouco. O que queremos dizer é uma linha de título, assim. Então div com a classe de coluna de largura total da linha, isso pode salvar aniversários. E então aqui em baixo, precisamos disso para dizer o aniversário. Então isso diz Jessica Eric para os outros. Jessica, Erica em outros têm aniversários hoje. Não vou mexer com os pesos da fonte nesta seção, mas fique à vontade. E então, no final aqui, vou adicionar outra atualização de linha horizontal. E estamos muito bem. Em nossa última seção aqui para encerrar está apenas a lista de contatos. Acredito que isso seja para o recurso de mensageiro do Facebook. Bem, vamos em frente e apenas reutilizar algo que já construímos, que é muito semelhante aqui aos atalhos. Então, vamos rolar para cima em nosso home.html e encontrar nossa lista de atalhos não ordenados, assim. Copie isso e, em seguida, role para baixo. Aqui podemos dizer div com um contêiner. Vamos dizer contêiner de contato. E então, com uma linha, a largura total da coluna ou uma coluna de largura total, vamos colar essa lista aqui. Limpe um pouco o espaçamento, muda para o contexto. E podemos atualizar. E estamos muito bem. Então, isso é, podemos fazer um pouco mais aqui. Vamos seguir em frente e fazer essas imagens círculos, e depois adicionaremos um pouco de borda a elas. Então, o que podemos fazer é chegar à classe de contêiner de contato e nossa folha de estilos. E podemos dizer que as imagens terão um raio de borda de 50%. E então, para facilitar para nós, para este exemplo, podemos dizer imagem de contêiner de contato e do tipo estranho. E podemos dizer que eles têm uma borda de dois pixels, botão azul sólido, salve isso e atualize. E, na verdade, está entrando em vigor. Então, só precisamos ajustar nosso estilo aqui rapidamente. Em vez da imagem, precisamos que ela seja a mentira que tem o enésimo tipo. E então diremos a imagem dentro desses itens da lista. Certo? E lá você pode ver primeiro, terceiro, quinto, eu vou ter esse estilo aplicado. Então, isso encerra nosso clone do Facebook da página inicial. Seção superior aqui, se você quiser. Espero que vocês tenham gostado desse curso até agora. Sinta-se à vontade para continuar com o que temos até agora. Perde um design muito áspero de um clone do Facebook. Então, se vocês quisessem expandir isso, você sabe, meio que torná-lo seu próprio em conteúdo real, imagens reais, tornar tudo mais responsivo e assim por diante. Eu ficaria muito curioso para ver até onde vocês podem levar isso tão isolado que vocês por fazerem esse curso. Espero que você tenha aprendido muito. Se você tiver alguma dúvida, sinta-se à vontade para me avisar. Você pode entrar em contato comigo através Skillshare ou eu também estou no Twitter. Espero que vocês tenham gostado dessa aula. Por favor, deixe-me seu feedback. Deixe-me saber como eu fiz e se há algo que eu possa melhorar se houver algum tópico que você queira que eu aborde. Definitivamente me avise. Gostei muito de fazer essas aulas e espero que vocês tenham gostado de fazê-las. Obrigado novamente, pessoal.