Bootcamp de Bootstrap (para Bootstrap 5)

1. Sobre o curso: Ei, o que está acontecendo segunda-feira, isso é hey, números com um designer que codifica. Muito obrigado por dar uma olhada no meu curso de bootcamp Bootstrap. Eu realmente queria criar um curso em que você se sinta confiante usando o Bootstrap 5, tanto entendendo as informações dentro das docas quanto entendendo como tudo funciona em conjunto. Vamos construir um site de portfólio simples. Vamos projetar a navegação em primeiro lugar e, o mais importante, certificando-se de que ela também se torne uma navegação responsiva. Abaixo, vamos nos concentrar no flex usando as informações do Bootstrap cinco para mover o texto para o centro da página e também falar sobre como você pode quebrar peças diferentes com base em um XL, um L, um médio, pequeno e um design móvel. Tudo em nosso design sempre será móvel primeiro, pois é isso que é o Bootstrap 5. Seguindo esta página inicial, também nos concentraremos no design do rodapé para trazer os ícones Bootstrap das mídias sociais. Se você quiser trazer o Facebook ou outros ícones, você é bem-vindo. Para este projeto, vamos nos concentrar no Twitter e no Instagram. Movendo-se para este design em nossa página sobre, mostrarei como você pode usar os carros alegóricos dentro do Bootstrap para posicionar uma imagem à direita. E então, quando ele atinge a estrutura Mobile, cai diretamente para o meio da página. Depois disso, chegaremos à página do portfólio. E na página do portfólio vamos nos concentrar na grade. Assim, tenho uma grade de três colunas e, em seguida, dentro de um design móvel, tenho uma grade de duas colunas e, em seguida, tenho uma grade de uma coluna. Vamos nos concentrar na grade e também como esses cartões funcionam. Além de como esses botões funcionam, esta é uma ótima página detalhada que é realmente destacada com o Bootstrap 5. Finalmente, chegaremos à página de contato. E não apenas órgão para construir um formulário de contato, mas vou criar um formulário de contato para o qual posso enviar informações. Este formulário funciona. E usando o poder do Netlify, eu posso clicar em Enviar e criar uma página de sucesso de contato que diga obrigado pelo seu envio. Você virá sabendo todos os detalhes importantes de como o Bootstrap 5 funciona neste curso, o curso bootstrap bootcamp. 2. Modelo de iniciação do Bootstrap: Ei, o que está acontecendo quando ele diz, Ei, datums, e muito obrigado por fazer meu curso de bootcamp Bootstrap. Eu tenho duas telas aqui na parte superior é minha pequena área do Chrome para ver no meu site sua largura e testar meus projetos com. E abaixo, vou usar o Visual Studio Code. Esta é uma das minhas ferramentas favoritas para usar para edição de código. É feito pela Microsoft. Não posso deixá-lo dizendo isso, mas o Visual Studio Code é os joelhos da abelha. Quando se trata de co-edição, você pode usar a cor que quiser usar. Mas para mim, vou usar o código do Visual Studio durante todo esse curso. Então, novamente, você pode escolher a cor que quiser usar o Sublime Coda. Você pode usar o Microsoft Word se isso gosta de você, mas, no geral, devo ficar com o código VS neste projeto. Então, para começar, vou para getbootstrap.com. Vou descer e dizer para começar, só para começar. E aqui embaixo na metade da página é se eu procurá-lo, o modelo inicial, vou copiar isso porque isso é tudo o que tenho que usar o pedido para que o Bootstrap funcione. Vou copiar. Vou entrar no código do Visual Studio, criar um novo arquivo e colá-lo. E então vou fazer é ir para minha nova pasta, que é novo projeto, que é novo projeto, e chamar esse HTML de ponto de índice. E o que é legal sobre o VS Code é coordenadas de cores automáticas. Todos os arquivos são todos os arquivos, todos os nomes de arquivos e outras palavras que se coordenam com o HTML ou qualquer documento em que você esteja trabalhando. Então, se você passar por isso rapidamente, para que o Bootstrap funcione, isso requer alguns componentes e o modelo já fornece tudo isso para mim. No topo, você precisa fornecer algum tipo de idioma como se fosse um árabe. Ele vai mudar e mostraremos na estrada neste projeto que não há mais esquerda e direita, mas um começo e fim à medida que o árabe vai da direita para a esquerda e o inglês vai da esquerda para a direita. Isso mesmo, da esquerda para a direita. Eu digo certo. Sim, eu disse isso certo. Depois disso, estamos analisando o UTF ou o conjunto de caracteres dentro do código. Isso apenas nos dirá essencialmente que queremos usar os personagens que são ingleses do UTF-8. Também precisamos da viewport. Isso é necessário porque, à medida que escalamos e subimos e descemos em nosso projeto, a janela de exibição permite que o projeto cresça e diminua com a largura sendo o dispositivo com o dispositivo de largura XYZ com escala inicial dizendo em 100%, a magia realmente acontece quando incluímos o Bootstrap CSS. Isso é fornecido em uma CDN ou rede de entrega de conteúdo, por isso reside praticamente incrível. E é uma folha de estilo. E a outra parte abaixo é esse script que permite que o JavaScript seja executado, que seria executado especialmente nossa navegação. E algumas outras coisas em segundo plano. Essas três coisas, as metatags necessárias, o Bootstrap, CSS e o script são realmente o que é necessário para o Bootstrap operar. Isso é Popper e Bootstrap JS separados. Tudo está destacado porque está comentado. O que se preocupar com isso. Então, o único que eu quero fazer é bem nesta página de índice, então você acabou de ouvir é que eu quero criar um arquivo CSS personalizado. 3. Como adicionar um arquivo CSs personalizado: Então, o que faço aqui é adicionar um arquivo CSS e quero adicionar o CSS após o arquivo minificado do Bootstrap porque quero substituir ou alterar o olá aqui. Eu quero alterar eventualmente algumas configurações que são padrão para bootstrap, não muito, apenas algumas coisas. Então, vou dizer que primeiro é vincular uma armadilha. Vou ir em frente e adicionar o arquivo CSS primeiro e depois criar o arquivo CSS em seguida, vou dizer, vou dizer que os períodos barra CSS slash personalizado. Css. E o RHEL será uma folha de estilos. Solte isso e fecharemos, não com um X, com um ponto de interrogação, mas com um símbolo maior que. Se eu salvar isso e vou criar um novo arquivo. Então, entrarei no arquivo ou no Command N para um novo arquivo. E vou salvar esse arquivo. E também sobre o Visual Studio Code é que ele lembra onde você salvou seu último arquivo. Então ele sabe deixá-lo aqui. Vou dizer CSS para o nome de uma pasta. E darei a isso um nome CSS de ponto personalizado. Quando eu tive que fazer muitas vezes, é para garantir que ele funcione. Vou adicionar um corpo e vamos adicionar uma cor de fundo de 0 que não surgiu há algum tempo. Aquamarine dá a si mesmo uma cor brilhante para ver que vai funcionar porque se pudermos ver essa cor de fundo, sabemos que tanto o CSS quanto o HTML estão vinculados entre si. Quando eu salvar isso, voltarei para minha pasta e arrastarei meu arquivo de índice. E olá mundo. É Hello World. Com aquela água-marinha realmente feia. Tudo bem. Vou ao arquivo CSS, me livrar desse corpo, salvar. E se eu atualizar a página no Chrome, essa água-marinha desaparece e agora temos nosso CSS vinculado com sucesso. 4. O recipiente: Agora que temos o arquivo CSS, podemos colocá-lo ao lado apenas por agora. Quero começar a trabalhar na navegação, alguém projetado de cima para baixo neste projeto. No arquivo de índice, se eu rolar para baixo, ele diz Hello World, logo após o corpo ser onde vou começar a trabalhar. Vou dizer div e depois dizer recipiente de classe. E esse contêiner é provavelmente a ferramenta mais poderosa que você usará no Bootstrap. E vou te mostrar o porquê. Vamos adicionar o contêiner e vamos realmente trazer a tag H1 para o contêiner. Então, vou deixá-lo cair. Então, se eu salvar isso e atualizar o Chrome, assista, o que acontece? Hello world se move para o, da esquerda para o meio da página. Por que isso? Isso porque se eu mover meu design, assista Hello World, à medida que ele se aproxima e se aproxima da borda, ele salta. Isso ocorre porque o contêiner contém pontos de interrupção. Há cinco pontos de interrupção principais para se concentrar. Voltamos para pegar bootstrap e eu vou rolar para cima. Estou procurando o médico para ter certeza de que estou no lugar certo. O que eu quero mostrar a você está dentro do layout é onde você vai encontrar a grade. E a grade tem vários pontos de interrupção. Na verdade, está no contêiner, que se concentra na grade. Eu pulei à frente alguns passos. O contêiner tem algumas áreas diferentes. Há pequeno, médio, grande, XL. Onde estão estes pertencem ao nosso ponto de interrupção. Então, abaixo de 576, o seu tamanho extra pequeno ou essencialmente seu celular. Seu pequeno em 576 é mais um telefone horizontal vertical. Seu meio. Mais do tablet horizontal cortam o tablet maior. E a cabeça XL grande e extra grande e dupla para o tamanho da tela da área de trabalho. E você pode dizer que eles têm vários pontos de interrupção. Então, apenas usamos o contêiner de palavras aqui embaixo. No celular, é 100% de largura, mas depois se torna 540 pixels, 720 pixels, 960, 1140, 1320. Então, se voltarmos aqui, podemos ver como ele vai quebrar em diferentes pontos de interrupção neste design. O que também é importante notar são essas siglas, são essas pequenas abreviações que são SM, MMD, LG, XL, duplo XL e fluido. Fluido que quase podemos ignorar porque basicamente diz fazer tudo 100% em todo o espectro. Eu raramente uso isso apenas porque prefiro usar um contêiner com toda a relação para pontos de interrupção relevantes. Mas SM pertence a pequeno, médio, grande XL e duplo XL. Você verá que vamos usar essas peças diferentes ao longo do caminho ao longo da nossa jornada. E se quisermos fazer nosso contêiner apenas um certo tamanho, podemos dizer que o contêiner traço um certo tamanho. Por enquanto, eu gosto de manter o contêiner do jeito que está. Mas preste atenção aqueles SM, MMD, LG, exílio e duplo XL. Observe uma outra peça e se você veio do Bootstrap 4, isso é uma diferença. Observe que o extra pequeno não tem excesso. No passado, você teria SM e, em seguida, o traço X S. Bootstrap cinco mudou o jogo. Agora é móvel primeiro ou muito pequeno por padrão. E então, se eu quiser alterá-lo, temos que adicionar SM, MMD, LG XL e duplo XL. Então, avançando neste projeto, tudo é móvel primeiro, supondo que ele vai cair, não para cima, o que significa que vai passar do celular, de todo o resto. E se quisermos mudá-lo, temos que definir algo pequeno e descer dessa maneira, vou derrubar a estrada o que quero dizer com isso, mas parecia estar ciente de que tudo é móvel primeiro e não há outro linguagem para realmente delinear extra pequeno. 5. Como configurar a navegação: Bem-vindo de volta ao contêiner mais tarde. Mas a próxima coisa que quero fazer depois dos contêineres, quero adicionar uma navegação a este hello world. Então, vou mover o Hello World para fora do contêiner por enquanto. Nós os deixaremos cair para trás, e dentro do contêiner é onde eu quero adicionar minha navegação. Vamos escrever o seguinte e certificar-se de que ele está marcado corretamente. Perfeito. Vou dizer menos do que sinal e vou dizer que a classe nav é igual a navbar, navbar expandir. Vou dizer LG e mostrarei por que isso é. E um pouco depois do LG, temos que dizer que é claro ou está escuro? Navbar, navbar, barra de navegação. Vou dizer que é leve. Isso significa que é um fundo de cor clara. Se dissemos escuro, isso é mais para o modo escuro. Então eu vou dizer fechá-lo, abrir e fechar meu equipamento de navegação e vou adicionar outra coisa. Vou adicionar um contêiner mais uma vez apenas para segurar o contêiner da classe space div. E aqui, o que vou fazer é adicionar minha navegação real. Minha primeira arte é que tenho que me concentrar no logotipo. Então vou dizer que o logotipo vai aqui salvá-lo. Olá, logotipos aqui. Vamos criar um espaço para que o logotipo fosse apenas algum texto. E depois disso, traremos o logotipo com o arquivo fornecido para cair no canto superior esquerdo e colocar o texto no canto superior direito. Então, onde diz que o logotipo vai aqui e o Hello Worlds volta para fora do contêiner, pois está no extremo esquerdo da página onde diz que o logotipo vai aqui. Quando eu vou fazer é dizer uma classe e, em seguida, dizer que a classe é igual à marca navbar. E aqui vou dizer H ref, e direi index.html. Para vincular de volta ao índice, vou fechá-lo. E bem dentro deste um, vou dizer que John Smith desenha. Eu salvo isso. Aí está ele. Observe como ele não tem rollover quando eu rolo o mouse sobre ele. Como um logotipo ou um design no canto superior esquerdo, você deve permanecer o mais estático possível. E, portanto, não há rollover porque adicionamos a classe da marca navbar a isso, uma tag. Totalmente bem. O que eu queria fazer, está no lugar certo. Agora que tenho lugar para o meu logotipo ir, vou continuar e construir minha navegação no lado direito e depois voltar e soltar o logotipo. Então, depois do a, quero adicionar uma criança, que significa que quero adicionar um pequeno ícone de hambúrguer. Então, quando isso atinge um certo tamanho, digamos abaixo do grande, porque eu disse expandir em geral, que significa que quando ele atinge o meio, eu quero ver um hambúrguer ou um ícone de menu móvel. Então o que vou fazer é depois do a, vou dizer botão e depois dizer que classe é igual a navbar, criança pequena. E para um espaço extra, vou fazer algumas coisas para facilitar a leitura. Vou deixar isso para baixo. E o que vou fazer é não esquecer de fechá-lo. Vou fechar o botão assim. E então aqui vou adicionar mais uma, Claro, mais algumas coisas. E depois da aula, dab bar criança, vou dizer que tipo é igual ao botão. E então vai dizer dados BS para Bootstrap. E diremos que Toggle é igual ao colapso. E depois da alternância BS de dados, direi BAS de dados, alvo e igual. E vou colocar uma identificação aqui e podemos conectar os dois e um pouco. Vou dizer nav bar, nav. Vou capitalizar o fim. Certifique-se de que você está seguindo o delineamento exato. Eu usei um N maiúsculo também aqui. Como maiúsculas e minúsculas são duas coisas diferentes. Os controles da aria serão nav bar, nav. Aria expandida será falsa porque não se expandirá por padrão. E vou dizer aria, rótulo é igual à navegação de alternância. Muitos desses, eu sei muito só por um botão, faz totalmente sentido. Então, depois desse botão, vou colocar uma etiqueta de span, tags de extensão LF. Eles são os super-heróis da internet porque não fazem absolutamente nada. Span, vou dizer que a classe é igual, vou dizer Navbar, criança pequena, ícone, soltar na tag span. Deixe-o abrir e fechar. Então, muito trabalho apenas por um botão. E se eu salvar isso, nada vai aparecer porque ainda não incluímos o nav aqui. Não há nada para abrir e fechar. Em termos de navegação. Metade da etiqueta de span. Vou dizer que a classe div é igual ao colapso, colapso da barra de navegação. E então ID que digitei acima no navbar nav. Vou colocar de volta aqui. Vou dizer id e pegar aquele navbar nav, deixá-lo. Eu meio que é uma cópia e cola para garantir que eu não estrague tudo, o que sou muito bom em fazer. E abrir e fechar a div dentro desta classe div é onde vamos adicionar nossa navegação. Então, vou fazer é dizer UL. E aqui vou adicionar uma classe UL igual, vou dizer navbar. Eu conheço muitas palavras para navbar, navbar, nav. E então vou dizer MS auto. E vou te mostrar um pouco o que isso faz. É quando você não verá logo de cara, mas mostrarei em um pouco como este funciona, MS auto e centro de texto. Então, dentro desse URL, vou adicionar um LI. E no LI vou adicionar um H ref. E vamos colocar um sinal de libra por agora. E devemos dizer, opa, esqueci que a classe H ref classe é igual a nav link. E também no LI que eu também pulei, temos que dizer classe e depois dizer item nav. Eu estava pensando muito rápido no link de navegação e esqueci de pular para o item de navegação. Dentro deste a, diremos o link número um. E quando eu salvo isso e solto e atualizo a página, nada acontece. Percebi que quando estava digitando o botão, ele não me deu o botão fechar. Então, vou voltar aqui. Quando eu digito menos de sinal botão Fechar, quero cercar a classe de span com o botão. Vou cortar isso e soltá-lo e adicionar a etiqueta de extensão dentro do botão e vamos soltá-la ali. Alguma razão pela qual eu não estou acertando o espaçamento de repente, mas ele deve se alinhar bem ali. E a aula de span, quando eu também notei que soletrava colapso errado, eu disse colagem. Isso é confuso do COLS LAP. Quando eu faço essas duas coisas. E eu salvo o link pop-up número um. Vamos redimensionar o navegador e ver se o menu móvel também aparece. Então, vou pegar meu navegador. E quando ele chegar abaixo do grande, o que acontecerá é que ele vai atingir esse meio e virar para um menu móvel. Observe também que o tipo está no meio da página e a navegação está bem no lado direito. Isso porque, para algumas coisas, este MS Auto diz margem à esquerda, mas nas novas formas de escrever código no Bootstrap, S representa a esquerda e o inglês e a barra inicial escrever em árabe, assim este MS auto. Se eu tirá-lo por 1 segundo, minha navegação acaba no lado esquerdo, bem ao lado dos designs de John Smith. Eu queria no lado direito. Então, o MS. Auto o move da esquerda essencialmente para a direita. E se você for um árabe, isso se moverá da direita para a esquerda ou do início para a outra direção. O que o centro de texto faz, se eu tirar isso e salvá-lo, e eu deixá-lo cair. Observe como as palavras e você pode querer isso em seu design. link número 1 aparecerá logo abaixo dos designs de John Smith. Eu prefiro isso no centro para o meu design. E tenha em mente quando se trata de um design móvel, inspecione dentro do Chrome. É muito pequeno. Então, mais uma vez, prefiro mais no meio da página, mas depende de você. Para o meu design. Vou continuar dizendo centro tecnológico. Agora, o centro de texto diz essencialmente tudo, desde o aplicativo móvel enviado até o apertado. Mas como se sairmos do design móvel, esse link está em sua própria pequena célula. Assim, o centro tecnológico permanece discutível porque tudo se move sozinho para a direita. De qualquer forma, vou salvar isso para ter certeza de que estou correto. Então, o que fazer a seguir é que eu quero adicionar três peças de navegação. Então esse item de navegação vou duplicar, vou dizer item nav. Por algum motivo, minhas abas não estão alinhadas perfeitamente. Não sei o que está acontecendo. Não, eu quero voltar. De qualquer forma, por algum motivo eu não estou recebendo guias perfeitas por algum motivo estranho. Está tudo desalinhado de qualquer maneira, não é grande coisa. Estou totalmente bem dessa maneira. Então, nesta área, deixe-me copiar e soltá-lo. E agora eu tenho o link um. E se eu disser link número 2, link número três. Agora tenho o link um, link dois e o link três. Vou mudar isso para sobre portfólio e contato. Então, aqui, vou dizer sobre, vou dizer portfólio. E direi contato. Se eu puder soletrar o contato corretamente. E depois disso, vou economizar para garantir que ele apareça. E vou adicionar o href porque vou copiar e colar esse arquivo de índice na estrada de qualquer maneira. Então, vou mudar esse H ref e dizer sobre HTML, portfólio, ponto HTML e contato HTML. Se eu salvar isso, não vou clicar. Mas eu tive Rahway mouse sobre ele. Você pode ver dentro do Chrome, diz sobre portfólio e contato. Estes também devem acontecer no futuro. Quando eu duplique esta página para a página sobre, a página do portfólio e a página Contato. 6. Como adicionar o logotipo SVG: Quando eu finalmente tenho que fazer é adicionar o logotipo aos designs da John Smith. Eu incluí a imagem para se você quiser usar minha versão ou você pode usar o logotipo que quiser em seu projeto. Vou criar uma nova pasta e dizer imagens. E nisso, vou até minha outra pasta e vou pegar minha pasta de imagens e encontrar o título de John Smith, SVG. Eu uso SVGs porque eles são uma lista de pixels. Eles são essencialmente arquivos vetoriais online. E também incluo o arquivo de IA no caso de eu querer mudar algo para isso no meu projeto da web. Vou trazer John Smith. Aí está ele. Projetos John Smith. E aqui eu vou fazer é voltar ao topo. E vamos encontrar o lugar onde diz que uma marca de navbar de classe John Smith projeta. Vou trazer a foto. Então vou dizer, vou cortar isso, vou trazê-lo de volta em um segundo. Vou dizer IMG SRC e dizer imagens de barra de ponto. E eu quero o título de John Smith. Agora, para o meu design, também vou dizer que com 225 e a altura será 76. Se você criar seu próprio logotipo de design, preste atenção à sua largura e altura proporcionalmente ao seu design. E então vou dizer alt, e direi logotipo para John Smith, design, design plural, ou tenho o S ali mesmo no final. E depois dessa imagem, vou fechá-la porque as imagens se fecham. E o que eu também quero fazer dentro disso, uma tag é que eu gosto de ter informações a dizer, o que é esse link? Então, vou dizer aula de span. E aqui, o D no Bootstrap é para exibição. Vou dizer que não exiba nenhum. E eu vou colar em desenhos de John Smith. Gosto de ter texto real para aparecer dentro do meu código, mas não visualmente na tela para delinear a imagem. Então, se eu salvar isso e voltar aqui, agora recebo desenhos de John Smith. E então também gosto do Bootstrap, é se você olhar para ele, o texto não está sentado à direita ou para baixo para baixo, desculpe-me ou para cima no topo. Mas fica mais como uma linha de base no meio. Para uma estética de design bem legal. Incrível. Agora temos nossa navegação pronta, e agora quero fazer a seguir é que quero construir esse gráfico de herói dentro da minha página inicial. 7. Como configurar o gráfico de heróis: Doce. Agora que temos nossa navegação feita é hora de realmente projetar mais do interior desta página de índice. Vou passar pela navegação e entre HelloWorld na div, vou dizer a palavra principal, pois este é o conteúdo principal da nossa página. Dentro daqui, vou dizer cabeçalho. E dentro daqui, vou adicionar algumas coisas. Vou adicionar uma div e fechar esta div. E então, dentro desta div, vou adicionar a outra. O que eu quero fazer, deixe-me soltar este aqui. Isso delineia algumas coisas. Primeiro, o principal é o conteúdo principal da nossa página. Além disso, o cabeçalho delineia o título da nossa página. Um que eu também vou fazer é construir uma imagem grande aqui, literalmente uma grande fotografia. Vou adicionar uma sobreposição de cores, que será essa div aqui. E o texto não é uma entrada para dentro dele. Então, o que posso fazer é começar com uma foto. Então, se eu voltar ao meu Finder e com as fotos fornecidas, vou pegar essa imagem da minha outra tela. O que vou fazer é arrastar essa imagem de índice, parece assim. Vou colocar essa imagem na página no topo. Então eu quero fazer é dentro desse cabeçalho, vou dizer que estilo é igual a fundo, traço, imagem, dois pontos e digamos URL. E é aqui que vou colocar a foto. Vou dizer URL, aspas simples, ponto, imagens de barra e imagem de índice. Agora, por padrão, isso não vai fazer muito, só vai ficar assim. Ele vai preencher seu pai, que é bom porque o texto preenche o espaço para agora, o que eu quero fazer é que eu quero fazer isso um pouco maior na página. Então, para o CSS, vamos, o que vou fazer aqui é que vou adicionar um cabeçalho. Vou dizer cabeçalho, HA DR. E então, dentro do cabeçalho, direi dois pontos de fundo. Sem repetição. E, em seguida, centro e centro para garantir que ele esteja dentro desse design. Depois disso, o que vou fazer é dizer tamanho de fundo. E vou dizer capa. A razão pela qual eu gosto de usar a capa é que ela mantém o espaço, independentemente do tamanho do navegador. E como sei que esse cabeçalho vai exigir alguma mudança de cor do texto, vou dizer que a cor é branca. Salve, atualize. E lá está ele. Então você pode dizer que ele se encaixa no espaço deste texto. Se eu quisesse ser um pouco mais baixo na tela, vou adicionar uma sobreposição de cores e isso vai ditar o tamanho dentro desse design. Então o que vou fazer é neste índice, dentro desta div, vou dizer aula. Eu posso soletrar a aula corretamente. Vou dizer sobreposição de cores. Para o seu design. Você pode ou não querer uma cor que depende de você como você quer conseguir isso. Na sobreposição de cores. Vou voltar para o CSS. E vou dizer período de sobreposição de cores com um nome de classe. E vou rolar para cima. E essa sobreposição de cores vai dizer algumas coisas. Primeiro, eu queria ditar a cor de fundo. Então vou dizer cor de fundo, e quero dar a ela um RGB a. A razão pela qual eu uso o a é para Alpha. Então vou dizer RGBA. E este design, vou dizer 0 vírgula 0 vírgula 0,4. E quando eu salvo isso, observe como ela escurece um pouco a imagem. Muito legal, mas ainda não está deixando cair isso um pouco mais baixo. Então o que eu quero fazer é nesta sobreposição de cores, vou dizer Altura mínima. A razão pela qual eu uso min-height é no caso de colocar muito conteúdo aqui. Isso pode se expandir além da altura mínima de 60 altura vertical. Quando salvo isso, agora recebo o design que se encaixa no espaço. Agora tenha em mente se eu tinha o navegador um pouco mais alto. Observe como a imagem bruta incrementalmente mais alta com base no tamanho do navegador. A única coisa que eu quero consertar é que é um pouco alto demais para um design móvel. Então, vou prosseguir e escrever uma consulta imediata para corrigir que isso aconteça. Então o que eu quero fazer é que se eu trouxer isso de volta para onde deveria estar após a sobreposição de cores, vou dizer na mídia e usar os pontos de interrupção encontrados no Bootstrap 5, vou dizer largura máxima, dois pontos 767,98 px. Abra e feche os suportes. E agora isso vai mudar sempre que ficar abaixo de 767,98 pixels, que é essencialmente 766 ou 767. De qualquer forma, vou dizer sobreposição de cores aqui. E vou mudar a altura mínima de 60 para 30. Então vou dizer min-height, direi 30, altura vertical. O que isso faz, e posso obter um pouco mais de espaço. É só que ele respire um pouco na página é agora e eu atualizo esta página quando eu ficar abaixo de um tamanho de 767,98 pixels, ela vai cair de tamanho assim. Agora, obviamente, nunca teremos um design de um site móvel que seja esse tipo de retangular. Então, na realidade, como será se eu trouxer isso um pouco maior e eu for Inspecionar e deixá-lo aqui. Agora, esse design se encaixa muito melhor neste espaço, desde que não seja super alto. Se eu tivesse 60 aqui quando mapeei isso há alguns dias, senti que em um site móvel, isso era muito grande. Lá vai ele. Então, para mim, estava ocupando muito espaço e eu queria mais desse design retangular. Então, assim, passou de 60 para 30. E ele se encaixa agora nesse espaço. Perfeito, bem, quase perfeito. Olá mundo sentado no canto superior esquerdo. Mas o que eu quero fazer é movê-lo para o meio da página Q flex no Bootstrap 5. 8. Como definir o texto de herói com Flex: Bootstrap 5 tem flex, flex box embutido diretamente na estrutura. Se eu voltar para o Bootstrap 5, e se eu digitar Flex, lá está. Assim, o fluxo nos permitirá flexionar nosso músculo de design. Isso é muito legal e adoro flex cada vez mais. Quando eu posso fazer, posso dizer: Ei, sou um contêiner Flexbox. Isso é ótimo. E usando o flexbox, o que eu quero fazer é se eu rolar a página para baixo, o que estou procurando é justificar o conteúdo não à esquerda, não para a direita. Mas eu quero colocá-lo bem no meio. Quero mudar o Hello World direto para o centro. Middles querem movê-lo para o meio, mas também centralizá-lo verticalmente. E a razão pela qual podemos fazer isso é definir uma altura ou, neste caso, uma altura mínima. Então, quando estou procurando fazer é fazer duas coisas. Vou movê-lo para o meio. E a poderosa ferramenta ou flexões, posso alinhar os itens ao centro aqui. Tudo isso está descrito no Bootstrap 5 e você pode escolher o que deseja usar. E se você olhar para ele aqui, observe que eles têm o pequeno, o médio, o grande e o XL. Quando você escreve qualquer código no Bootstrap 5, você pode escrever o SM entre justificar o início do conteúdo e centralizado entre o XL médio e médio. O que isso significa é que você pode definir pontos de interrupção para fazê-lo. Você quer fazer todo o caminho em toda a linha ou apenas parcialmente em toda a linha. Deixe-me que ela quis dizer com isso. Bem, eu vou fazer aqui é voltar para o índice e um HelloWorld. Vamos trazê-lo de volta. Podemos ver nosso código e o Chrome também. E dentro desta sobreposição de cores, vou dizer d flex para configurá-lo como flexbox. E eu vou dizer justificar o centro de conteúdo. O que isso vai fazer vai enviar um conjunto de Phi, vai centralizar o conteúdo em tudo. Começando com o design móvel, atualizo a página, Hello World. Então, digamos que eu não quero que isso aconteça, exceto apenas em um determinado ponto de interrupção. Se voltarmos a flexionar que justificam o centro de conteúdo, observe como podemos dizer, Você sabe o que, eu não quero isso. Onde se eu quiser esse lado esquerdo novamente, ele começará com o início. Então, digamos, eu digo, você sabe o que, justifique que nós olhamos aqui embaixo. Vou pegar o começo dos médiuns justificar. Então, o que vai acontecer é que se eu adicionar isso, o centro de conteúdo justificativo estará em direção ao centro no celular e ao pequeno ator para fins de design. Vamos fazer grande. Assim, o celular, o pequeno e o meio estarão todos centrados e o grande, voltaremos para a barra inicial à esquerda. Então, se eu der uma olhada nisso aqui, observe como está no lado esquerdo, porque no grande ou maior, ele voltou para o início da barra esquerda. Se eu redimensionar meu navegador, vamos atingir um grande, breve vamos acessar o XML. E o grande, sempre esqueço que há um XL duplo no Bootstrap 5. E agora, quando eu cair abaixo de um grande aqui, o meio vai dar início a esse design móvel responsivo. E vai chutar o hello world para o centro porque dissemos que tudo, desde aplicativo móvel, fica centralizado até você atingir o grande e depois voltar para a esquerda. Então, se eu tirar isso aqui, atualizar a página e me deparar, ela vai se centralizar na página, independentemente do ponto de interrupção, porque é móvel primeiro. Agora que temos justify-content center, o que estou procurando, se eu rolar para baixo aqui é um item de linha. E isso me dá opções para, quero alinhar itens ao centro também. Então, o que vou fazer é alinhar o centro de itens vai para o meio, verticalmente, atualizar a página, soltá-la. Isso exatamente o que eu quero ter. Agora, obviamente, isso não será um tamanho normal de navegador. Isso é o que eu queria fazer. Hello World no meio da página. Isso agora está perfeitamente centrado, cima e para baixo, para a esquerda e para a direita. Graças a alinhar o centro de itens e justificar o centro de conteúdo. E novamente com o Bootstrap 5, se eu voltar aqui, há todos os pontos de interrupção dentro do Start, End, Center, baseline e stretch. Você pode ver as cinco opções aqui. E há pequeno, médio, grande XL, n duplo XL. Este é o poder dizendo que talvez eu não o queira no meio. Quando eu chegar a um determinado tamanho, talvez eu queira a linha de base. Então você sabe o que, digamos que grande vai ter linha de base. Vou copiá-lo para dentro. E agora a linha de base atinge até eu ficar abaixo do grande. E agora ele volta para o meio porque align items center é móvel primeiro. Para este projeto, as aminas alinham itens apenas em seu centro em todos os tamanhos. Então, vou tirá-lo, clique em Salvar. E agora, não importa com o tamanho que eu trabalhe, ele sempre estará no meio desse design com uma aparência muito boa. Vamos continuar. 9. x e espaçamento a eixo em eixo em xa: Para esta próxima área de conteúdo, quero criar uma seção dentro do meio desta página que não seja muito ampla. Então essa é uma das poucas coisas que eu construo que está fora do escopo do Bootstrap 5, mas eu uso muito. E o que é, eu chamo de chamada única. E a chamada única fica dentro do contêiner e só se expande para uma largura máxima. Dentro da minha área personalizada. O que eu quero fazer é depois da sobreposição de cores, vou adicionar uma única chamada e apenas dizer uma única chamada. O que isso vai fazer é que eu vou dizer na única chamada, torná-lo largura máxima. E aqui de 750 pixels. A razão pela qual usar a regra de 750 pixels é que eu quero que ela seja ampla o suficiente para legível, mas não muito larga, o que cria tensão ocular na página. Esse contêiner é fantástico, mas é quase muito largo para uma única coluna. Dito isto, ainda quero usar os pontos de interrupção quando ele entrar em jogo. Então, quero ter certeza de que ele flui da melhor forma possível. Então, o que eu quero fazer em seguida é aplicar a chamada única e, em seguida, trazer o contêiner também no design. Então o que vou fazer é dizer no meu arquivo de índice dentro desta seção principal, mas depois do cabeçalho, vou dizer chamada única de classe div. Agora note, eu capitalizei o mar e liguei para delinear a palavra chamada. Após uma única chamada. Vou dizer M x auto. E vamos falar sobre espaçamento. Se olharmos para o topo aqui, usamos o M, S Auto. Isso é para o início ou para o lado esquerdo. Em um design escrito em inglês, o x auto é dizer ambos os lados, margem X como no eixo x de início e fim ou esquerda e direita. O automático, essencialmente colocando isso no meio da página. Se eu fechar isso e acertar o teste, vamos deixá-lo. E agora o teste de palavras fica aproximadamente no meio da página nesse tamanho de 750 pixels. Se entrarmos em nosso design, vamos adicionar uma cor de fundo. E vamos trazer amarelo, verde. Isso deve ser muito interessante. Observe agora que isso é longe quanto por que eu queria ler? Isso é tudo o que eu queria fazer era no meio da página. E se voltarmos e tiramos o Emax auto e salvamos, isso vai simplesmente sentar do lado esquerdo. Não quero isso. Quero trazer de volta o MX auto neste design e outra coisa. Isso está muito perto desse design, quase muito perto. Então, eu quero adicionar algum espaçamento a esse design também. Então, já usamos o m x, x para a esquerda e para a direita. Mas agora eu quero me concentrar na área superior e na área inferior. Se o eixo x passar, o eixo y vai para cima e para baixo. Já que eu quero que fique mesmo em todos os lados superior e inferior. Acho que nem todos os lados, mas os dois lados, superior e inferior. Eu vou dizer m, y. E posso dizer MEU de um a 51 sendo um pequeno espaço adicional, que é pequeno demais, para um pouco mais longe, três pouco mais longe ainda para pular um pouco mais, N5, pulando o mais distante da página, é respectivo de seu pai em termos de espaçamento, há alguma margem inferior. Então, se executarmos o editor de inspeção, observe como a div tem margens superior e inferior ali mesmo. É assim que eu quero ter é no final da estrada. Quero o espaçamento uniforme na parte superior e inferior deste design. Então, o que conseguimos é que o eixo x seja automático ou o mesmo esquerdo e direito. E também obtemos o MY 5. Agora aqui está a coisa. Isso parece ótimo nesta página. Mas, como vemos no design móvel, esse teste de palavras sobe até a borda da página Q, o contêiner para o espaçamento automático no design. Então, se adicionarmos o contêiner da classe div container, fechá-lo e soltarmos o teste de palavras lá. Prometi que a cor verde vai desaparecer em alguns minutos. Então, se eu deixar cair a palavra teste lá dentro e eu acho que lá vai. Agora veja o que acontece. Observe que deu início à borda do design. O contêiner contém margem natural e preenchimento que estão em toda a placa. Em qualquer lugar eu coloquei a palavra container. Assim, usou o contêiner de palavras para conter o teste de palavras. Muito bom. Posso aproveitar o poder do contêiner. Portanto, ele realmente não é afetado essa parte até chegar a um tamanho menor e menor e atingir o tamanho. Observe como o teste de palavras não está perto da borda da página. Esse contêiner está dentro dessa caixa verde. Então, se tirarmos o verde amarelo, felizmente, o teste de palavras fica junto com ele, e os pontos de interrupção entram abaixo de 750 pixels. Muito legal. Agora, faça o próximo é que eu quero adicionar o texto dentro da caixa real. 10. Centro de texto e chumbo: Então, o teste de palavras não está fazendo muito por mim. Na verdade, quero escrever algum texto aqui. E como isso é mais uma empresa de decoração e design de interiores, vou fazer algum tipo de título dentro do teste de palavras. Como já usamos o H1, isso é mais um H2. Eu deveria fazer é H2. Eu uso a frase, tudo, faço seu quarto parecer incrível. E se eu deixá-lo cair e salvá-lo, lá está. Agora, para o H2 neste caso, eu quero que ele fique no centro da página. Se eu quisesse que cada H2 fosse centralizado, eu iria para o costume e diria o centro H2. Nesse caso, vou dizer H para a aula, e diremos centro de texto. Agora, novamente, esse é o poder da parte de centralização tecnológica, é que eu tenho a capacidade de dizer centro técnico, ou eu poderia dizer texto M ou vou para o centro da LG. E o que vai acontecer é, se formos, gritos. Eu queria dizer que comece. Lá vamos nós. Iniciar é igual à esquerda. Então, ele o traz de volta para o lado esquerdo. Qualquer coisa acima e grande e, em seguida, abaixo da grande propina para o celular primeiro ou centralizando. Então, se eu voltar aqui, se eu voltar e voltar, lá vai. Agora, o texto volta para o centro na média ou menor. E sabemos que o meio entra em marcha porque a peça móvel entra. Tudo parece fantástico. Agora, para mim, eu quero mantê-lo Tech Center, então removerei o texto LG start. Neste caso. Uma vez que eu salvo, ele volta a estar no meio da página. Depois do H2, vou adicionar um lead. O lead é onde você pode ter um parágrafo de abertura em seu design. Como não tenho nenhum texto, sou um traga lorem ipsum para esse design. Então, vou dizer que o líder da classe p neste parágrafo. E eu tenho uma extensão incorporada ao VS Code. Ou se eu começar a digitar lorem, posso dizer baixá-los e apenas dizer Laura. 25, pressione a tecla de retorno. E isso coloca em 25 palavras. Se eu salvar isso, lá está. Aí está meu texto de Lorem Ipsum bem ali. Portanto, o lead torna o tipo maior e adiciona um peso mais fino por padrão. Vamos dar uma olhada nisso versus o design de parágrafo padrão. E eu posso digitar lorem, soltá-lo, salvar. E observe como o lead parece um pouco diferente do parágrafo honroso dentro do Bootstrap. Para fins de design, gosto de ter três, então vou aparecer mais um parágrafo. E só podemos ver as diferenças. Vou apertar a tecla de retorno apenas para separar as três peças. E agora eu tenho três pedaços de texto. E note também que o espaçamento acima deste H2 e abaixo deste H2 é exatamente o mesmo. Eu gosto de usar a palavra chumbo, que está dentro do Bootstrap 5 para apenas puxar pouco peso para que seu olho vá, Ei, H2 primeiro, leed segundo, e depois o parágrafo normal, terceiro, quarto, e assim por diante e assim por diante. 11. Os footer e bootstrap: Então, temos o topo do design feito navegação e o herói. Também adicionamos algum texto dentro da nossa seção principal. E o último passo é adicionar o rodapé ao design na parte inferior. Então quero fazer é depois do principal, vou adicionar rodapé. Vou dizer rodapé. Largue isso. Vamos apenas escrever o teste de palavras agora para garantir que ela fique na parte inferior da página. E lá está ele. O que eu queria fazer com esse design, pois quero garantir que eu tenha espaçamento dentro deste rodapé. E também quero adicionar algumas cores ao design também. Então, vou adicionar uma cor de fundo ao rodapé. Dentro do meu costume, entrei, coloquei o rodapé depois de todo o meu código e antes da consulta de mídia. Então, vou dizer rodapé. E aqui, não rodapé, p, apenas rodapé. E abra e feche os suportes encaracolados. E vou dizer cor de fundo. E que cor vou usar, vou decidir que é apenas um cinza escuro. Então vou dizer cor de fundo e direi a hashtag de barra de sinal de libra 333. Isso me dá uma barra marrom escura, na verdade cinza escuro, não marrom. Só parecia um pouco marrom na tela por 1 segundo. Perfeito. Eu tenho o teste de palavras, é marrom. Adicionamos algumas margens no passado em nosso design, mas agora quero adicionar preenchimento para meu espaçamento. Então, se voltarmos ao índice, usamos o Emax neste design e também no topo. Usamos o MS. M é para margem, S é para início e automático. Então, o que eu queria seguir é que não quero usar margem, quero usar preenchimento. Então, com esse design dentro do meu rodapé, que vou fazer é dizer aula. Aqui vamos nós e dizemos preenchimento y, mas a parte superior e inferior e dê um máximo de cinco. E quando salvo isso e atualizo, agora recebo muito mais espaçamento nesse design. O que eu quero fazer a seguir é mover o teste de palavras para o meio da tela. E vou alterar o teste e adicionar ícones para mídias sociais na parte inferior da minha página. Então o que vou fazer é dizer div loops. Em vez de fazer isso, eu só me livro de tudo. Vou dizer aula div. E como vou adicionar ícones nesta página abaixo, vou mudar o flex de colunas simples como usamos aqui, duas linhas abaixo para uma linha de ícones no Bootstrap 5 flex. Então vou dizer div class é igual a d flex, flex row. E como eu quero que ele vá no meio da página, vou dizer justificar o centro de conteúdo. E quando eu fecho isso, cada criança individual. Então, se eu disser div e vamos dizer teste, e se eu copiar isso, agora eles vão se tornar linhas. Então, se eu disser teste, test2 e test3. Agora, o que é mais fácil também, vamos também tornar a cor da fonte apenas para que ela seja legível. Eu ia acrescentar isso mais tarde, mas como estamos aqui de qualquer maneira, vamos dizer cor branca. Lá vamos nós. Portanto, teste, test2 e test3 podem ir dentro da linha flex. Vamos também procurar o ícone de fluxo. Então vou fazer uma pesquisa no Google e dizer que não ícones flexíveis. Que tal os ícones Bootstrap? Então, se procurarmos os ícones do Bootstrap, ele aparecerá como ícones ponto getbootstrap.com. E isso surgiu sua inversão 1.4. Há mais de 60 ícones meteorológicos. Incrível. Mas estou procurando ícones de mídia social e vou começar com o ícone do Twitter primeiro. Então, o que eu quero fazer é rolar para baixo esses ícones e eu posso percorrer todos eles. Ou posso simplesmente começar a digitar para filtrar. E vou digitar o Twitter, e lá está. Então, no ícone do Twitter, posso copiar esse arquivo HTML, copiá-lo. E o que eu quero fazer é voltar ao Visual Studio Code. E no índice, vou tirar essas três divs e vou tê-las, vamos ter os desenvolvedores serem as linhas. Vou adicionar a tag a como a linha. Então, um HREF, é aqui que você adicionará seu URL do Twitter se tiver um. Ou neste caso, vou apenas dizer Twitter.com. E dentro dessa etiqueta, deve, deve se alinhar até lá. Ele dentro daqui, vou deixar cair este SVG. Svg também vem com largura e altura. E como sabemos que é um ícone quadrado, posso mudar isso para o tamanho que eu quiser. Para este design. Vou dizer 25 e 25, 25, 25, Save. Vamos dar uma olhada. Ei, oh, bem, isso é porque o SVG leva em conta a cor do link. E, por padrão, a cor do link no Bootstrap 5 é azul e azul escuro. Vamos mudar isso para branco e, em seguida, um esbranquiçado dentro desse costume, vou dizer rodapé. E, em seguida, a e, em seguida, altere a cor do link para cor. Vamos apenas dizer branco no início, salvando. Agora é branco, mas ainda vai para esse azul escuro. Então eu quero fazer é dentro do rodapé a, vou deixá-lo cair e dizer rodapé um pairar e mudá-lo para um sinal de libra de cor. Isso geralmente não vem para mim. Bem, de qualquer forma, vamos ver se consigo obter alguma cor para aparecer. Tudo bem. Fora do Photoshop, geralmente costumava me dar a cor. Vamos tentar isso. Vamos o Photoshop aparecer em tela diferente. Deixe-me tentar um branco por um segundo. Vamos tentar uma fumaça branca. Lá vamos nós. Veja se isso funciona. Apenas me dê alguma cor do Visual Studio Code. Vamos salvar, atualizar. E eu não estou amando essa fumaça branca. Então eu tive que fazer dentro de um Photoshop ou qualquer um dos seus editores favoritos é que se eu trouxer o Photoshop aqui, eu o uso apenas para escolher uma cor. Então, no Photoshop ou em qualquer software que você queira usar para o nosso seletor de cores, posso escolher algum tipo de cor que seja branca. Então, nunca vou soltar um cinza. E só assim ele traz algum tipo de tom, DF, DF e df. Se eu minimizar a mudança de fumaça branca para cair nesta cor cinza. Agora está um pouco melhor. Nós temos uma mudança de cores para que você possa ver quando rolar sobre ela. Perfeito, temos o a e o pairar. Quero voltar e trazê-lo um pouco mais. Fizemos o Twitter, para que eu possa fazer rollover, clicar no Twitter e aparecer o Twitter. E se eu voltar agora, posso entrar no Instagram ou o que eu chamei que eu quiser. Nesse caso, vou trazer dois ícones. Eu o trouxe pela primeira vez no Twitter. Agora vou trazer o Instagram, o instagram longe. Procurando pelo Instagram, encontrando-o, copiando o SVG. Então o que eu vou fazer é voltar para baixo depois disso uma etiqueta, eu direi um HREF. Vamos lá, HREF. E diremos https barra de dois pontos Instagram.com. Mais uma vez, você pode adicionar seu identificador do Instagram aqui. Fecho a etiqueta, cair, recuei e ignoro todos os caminhos. O que estou focando é a largura de 16 e 16. Vou ficar com o mesmo em 25, 25, Save. E agora o que recebo são dois ícones e eles estão muito próximos. Então eu quero fazer é que eu quero adicionar mais um pouco de preenchimento. Agora posso usar uma de duas maneiras. Posso apertar o Instagram e empurrar pela esquerda ou empurrar para a esquerda. Ou posso empurrar o ícone do Twitter para longe ou da direita em direção ao Instagram. Então, vou olhar para o Twitter. E no topo do Twitter, o que estou procurando é o a, e eu gosto de adicionar mais espaçamento. Então, na área do Twitter, vou dizer um HREF. E depois disso, vou dizer que a classe é igual ao final do preenchimento, e direi quatro. Ele terá uma área clicável. Então, se você não quiser que ele seja clicável, você sempre pode alterá-lo para m para margem. Então, o EMI, ele permanecerá o mesmo. Mas agora eu não terei uma área clicável, então cabe a você se você quiser ter um espaço clicável lá para preenchimento ou o m para margem e 4. Então a margem o afasta e, graças ao flex, agora o mantém no meio da página. Agora que terminamos esta página, continuaremos em frente para a página sobre. 12. Como configurar a página: Vou ir em frente e esconder o Chrome. E o que eu quero fazer é chegar ao índice HTML, duplicá-lo e dizer sobre HTML de ponto. Vou trazer isso para o meu design e começo a tirar peças que não preciso. Vou voltar para o Chrome, então não estrague isso. E sim, eles terão a mesma aparência à primeira vista. Então vou fazer é tirar tudo, exceto pela navegação e desenhos de John Smith e o rodapé abaixo. Então, dentro do meu acervo, vou ocultar o índice e manterei o cliente acordado no caso dos ADUs e do arquivo CSS otimizado. Vou rolar para baixo, procurar a seção principal. É também por isso que gosto de usar a palavra main porque eles podem dizer o que tirar e o que não tirar. Vou tirar todo o resto, exceto pelo teste e teste principal e certo. Aí está. Parece bom. Agora, como estamos na página sobre, quero que a navegação permaneça ativa. E eu posso fazer isso indo até a navegação e onde ela diz link de navegação de classe. Vou dizer a palavra ativo. O que isso vai fazer é virar a palavra para uma cor escura para delinear a palavra sobre soma ela na página sobre. E enquanto estamos nisso, vamos adicionar a palavra sobre em nosso título da nossa página também. Então, se eu rolar para cima a linha 13 da Mine, procurando o título da palavra, vou dizer a palavra sobre a linha vertical e então hello world mudará isso assim que terminarmos. Mas, por enquanto, vamos mantê-lo simples. E direi sobre o HelloWorld. Legal. Temos nosso título e temos sobre ser ativo e nossa navegação. Agora é hora de trazer algum conteúdo. Nesta página Sobre. 13. Sobre o conteúdo da página com floats e overflow: Agora é hora de adicionar conteúdo a esta Página Sobre. E além do texto para isso sobre pessoas, imaginário John Smith, pessoa, quero trazer uma foto de John Smith. Tenho uma foto aqui. Vou trazer para dentro, vou trazer este. Vou copiar da tela frontal e trazer o retrato de John Smith para dentro. Observe que esse design é um design quadrado. Eu queria usar isso. Então, vou trazer o quadrado tanto como um design móvel quanto como um desktop projetado para ser redimensionado. Então eu senti que o quadrado era mais apropriado para o design. Cabe a você como você quer conseguir isso. Mas para o meu design, estamos usando o ícone quadrado para que o retrato de John Smith eventualmente seja usado. O que eu quero fazer aqui é dentro dessa seção principal, onde está? Vou trazer essa única chamada, Saul, digamos que a classe div é igual a uma única chamada. E algumas coisas que eu quero ler, trazer o MX auto e quero trazer algumas coisas diferentes também. Quero derrubá-lo da página. Então, vou dizer MEU para margem superior e inferior. Vou dizer dois porque não temos mais esse gráfico de herói. E senti que quando o projetei para algo maior, quero dizer MEU m d Para o que quero dizer com isso, e vamos mostrá-lo para você novamente. Se eu disser o teste de palavras, observe como o teste de palavras fica nesta página. Isso porque está sentado em quatro no espaçamento. No entanto, quando chego a um site móvel, percebi que estava um pouco longe demais, então ele vai chutar um pouco mais alto na barra do tablet móvel pequeno e médio ou pequeno, desculpe-me e diga T2. Então é por isso que eu disse dois Vs para. Eventualmente cai um pouco mais baixo. E então estamos prontos para ir. Perfeito. A próxima coisa que quero fazer é adicionar uma classe div igual a contêiner, não contato. E certificando-se de que a div se fecha. E eu quero adicionar mais uma peça porque vou adicionar um flutuador a esta imagem. E os carros alegóricos precisam ser escondidos para que eu não flutue fora da página. Então, neste caso, o Bootstrap 5 tem algo chamado overflow oculto. Assim, posso mudar meu estouro para oculto, assim, garante que a imagem permaneça na página. Não passa por cima fluindo sobre a div. A imagem vai flutuar ao redor do texto e depois parar e não flutuar quando chegarmos a um design móvel. Então, neste caso, dentro desse estouro de contêiner de classe div oculto, vou dizer H1, dizer sobre John Smith. E aqui direi H1. Vou adicionar um lead. Então p Classe lidera e traga nosso sempre famoso Lorem Ipsum digitando lorem. E diremos 25, ele vai dar uma longa introdução. Aí está ele. E se eu salvar isso, lá é sobre John Smith. E se subirmos e descermos a página, você pode dizer que ela fica um pouco mais perto e então vamos mais longe com base no design. Muito legal. Então, depois dessa área, nesta seção P, vou adicionar outro parágrafo do tipo. E vamos adicionar Lorem Ipsum. E vamos adicionar mais um parágrafo do tipo para indicar quem vai ter bem, você sabe o que, vamos ter certeza de que ele tem três parágrafos. Então, salvamos isso. E lá está ele. Quero fazer a seguir é que quero trazer uma foto para o canto superior direito. No entanto, se o texto não for tão longe na página, eu queria ter certeza de que a imagem não sangra no rodapé porque vamos usar algo chamado float, certo? Então, o que vou fazer é depois da liderança, vou dizer p abrindo perto. E se falarmos apenas a fonte da imagem por conta própria, dizemos imagens e retrato de John Smith, e dizemos alt ou viagem de John Smith. E se eu fechar isso, veja o que acontece para facilitar o gigante? Isso é ótimo. Mas se você pensar sobre isso, eu não quero que seja tão grande porque eu quero que ele seja pequeno o suficiente para caber neste lado direito. Então eu tenho que me certificar de que essa imagem também reflui, que faz, mas eu quero um menor quando ela realmente flui. Então, vou fazer algumas coisas. Primeiro, quero que esta imagem tenha uma altura máxima de 300 por 300. Vou dizer que a largura é igual a 300. E uma altura de 300. E está parecendo muito bom. Há um enorme arrepiamento neste tamanho aqui. O que eu quero fazer é posicioná-lo para o centro quando não estiver flutuando. Então o que vou fazer é dizer centro de texto da classe p. Perfeito. Então, toda a ideia é que quando ele não está flutuando aqui no lado direito, ele está fixo ao design. Isso é mais o que eu quero fazer quando eu acesso no site móvel. E como o Bootstrap é móvel primeiro, é por isso que eu queria parecer quando eu os atingi, estrutura móvel parece muito boa. Temos projetos de John Smith para cima e para baixo para nossa navegação sobre John Smith uma pista. E temos esse rostinho sorridente em um campo de trigo e toda a imagem e o sol por trás também. Então ele está bem aqui, mas eu não os quero no centro. Quero que o texto flua em torno dele em um design não móvel. Então, aqui está o que vamos fazer. Vamos adicionar algumas coisas diferentes a essa imagem. Dentro desta foto, vou deixar a fonte apenas para legibilidade. Vou soltar a largura para baixo, soltar a altura e soltar o Alt. E vamos deixar isso também para estarmos no alinhamento. O que eu quero fazer é adicionar uma classe. Então, vou adicionar uma aula e vou dizer float, MD end. Mas também me certifico de que ele não flutue quando eu bato no pequeno ou menor. Então eu vou dizer flutuar nenhum e depois flutuar MD final. Então, o que vai acontecer é que o fim é como a direita versus a esquerda. Então esses 0s que digitamos antes de representar n slash direito. Então, se eu salvar isso, agora o que acontece é observar como o texto fica à esquerda desta imagem. E se não tivéssemos o estouro oculto, é aqui que surge o problema. No entanto. Ele apenas meio que flutua e então esse rodapé aparece em seu design quando você está escrevendo sua seção sobre, você pode não ter esse problema. Você pode ter texto suficiente, mas eu defini isso no caso de eu ter um problema. Bootstrap 5 fornece estouro oculto por padrão em seu design. Então, dessa forma, ele pega o fundo. E esse M Y2 ou MY for, pega a parte superior e a parte inferior com sucesso em nosso design. Assim, temos nossa página sobre terminada e ela parece muito boa. E podemos testar para garantir que ele esteja funcionando atualizando a página. E então eu posso apertar este botão. E ele fica ainda no meio do design sem preocupações de flutuar para a direita porque paramos de flutuar em um determinado tamanho. Portanto, não há nenhum para o flutuador em menor ou maior. É por isso que coloquei o SSM lá para pegá-lo. E como o padrão não é flutuante, eu poderia dizer flutuar nenhum e ainda funcionaria. Mas só porque, para mim, o padrão e o celular já são nenhum. Então eu escrevi DSM para garantir que ele pegue em um determinado tamanho. Por padrão, abaixo do MD, ele irá armazenar em cache para monitorar o que eu gostaria de dizer SM porque sei que ele vai de médio para pequeno nesse aspecto, nesse instante. 14. A grade: Incrível. Terminamos a página sobre. Em seguida, quero mudar para a seção de portfólio. Vou fechar esses dois HelloWorld só por agora. Vou criar um projeto novo. Vou duplicar o sobre. Então, passamos de cerca de copiar dois portfólio. E se eu puder digitar o portfólio corretamente, traga-o para o meu código, vou me livrar de todo o conteúdo extra que eu tinha para minha página sobre. Então, onde diz principal, vou me livrar da div para div e apenas dizer a palavra teste, salve. E vamos voltar e arrastar o portfólio. Perfeito. Então agora eu tenho portfólio, então vou mudar a palavra de cima de cerca de dois portfólio. E aqui em cima, chego ao topo, vou mudar a palavra sobre dois portfólios. Agora, para este projeto, o que eu quero fazer nesta seção, opa, eu também tenho que criar o ativo no portfólio do sobre também. Então, aqui vou rolar para baixo, tirar a palavra ativa da palavra sobre e colocar a palavra ativa no portfólio. Atualizo a página, estamos na página do Portfólio e na página do portfólio. Então, se olharmos para trás, se voltarmos à nossa página inicial, realmente tínhamos um design de uma coluna nesta página. E tínhamos um design de uma coluna na página sobre no portfólio. Não quero projetar isso com três colunas quando se trata da área de trabalho. Quero um design de duas colunas quando se trata do design do tablet. E eu quero, claro, 100% ou uma largura de coluna total quando se trata do celular. O poder do Bootstrap, que é indiscutivelmente uma das ferramentas mais poderosas em seu arsenal, é a grade. Se seguirmos para o Instagram, vamos para getbootstrap. E aqui, vou começar. E o que estou procurando é a grade, porque esta é a ferramenta mais poderosa que podemos usar no Bootstrap. E a grade é assim. A grade funciona com uma linha e uma série de colunas. Então, se digitarmos linha e col três vezes, vamos obter uma grade de três colunas. Então, se eu vir aqui na minha seção principal, vou digitar classe div igual a linha. E deveria ter pego a div próxima. Lá vai ele. E depois disso vou digitar a classe div. E vamos dizer chamada, assim como tem aqui. Então, se eu ligar, direi a coluna 1, e vou duplicar isso. Dois, coluna dois. E depois a coluna três. Se eu salvar isso e voltar ao portfólio hello world, tenho coluna 1, coluna 2, coluna 3. Uma coisa que eu também tenho que adicionar é que também preciso adicionar um contêiner porque isso adicionará todos os nossos pontos de interrupção. Agora, sem contêiner, ele apenas se move em uma direção de forma livre. Então, nesta área, vou cortar a linha, certo? Uau, não tão longe. Volte. Lá vamos nós. E vou adicionar um contêiner a esse design. Então vou dizer que a classe div é igual a contêiner e solta em minhas linhas. O que eu quero que aconteça é perfeito, isso se alinha e esta coluna de aliança 1, 2, 3. O problema, porém, se apenas digitarmos as colunas é, é que ele não funciona dentro dos pontos de interrupção do contêiner. Observe novamente, temos nosso menu suspenso para o nosso menu móvel. Por padrão, se você acabou de começar a digitar colunas, adicionará colunas até ficar sem espaço. Em termos de quantas colunas você pode colocar na página. A grade funciona em um sistema de 12 colunas. Então, para mim, isso não tem nenhum ponto de interrupção para dizer para onde quer ir. Então, em termos de grade, vou escrever apenas para mostrar algo. Vou dizer col 12. Ligue para 12, final col 12. Veja o que acontece quando eu digito 12, 12 e 12 ao lado das chamadas. Ele cai para uma linha vertical. Isso porque imagine que temos 12 colunas chegando nesta página. Estou dizendo para esta primeira coluna, preencha 12 dessas 12 colunas. 12 dividido por 12 é igual a 100%. Vamos tentar algo diferente. Vamos adicionar um novo ponto de interrupção porque agora no Bootstrap 5, esse é o tamanho do nosso celular. Então, quando ele atinge a estrutura Mobile, sempre terá 12 em 12 chamadas ou 100%. Digamos que atingimos o tamanho médio que queríamos cosseno 50%, 50%. Então, o que vou fazer é dizer chamada. Dash AMD e 50% serão 6 ou 6 divididos por 12 é igual a 50%. Então, se eu disser col md seis, col md seis, e col md seis sem espaçamento duplo. Deixe-me salvar isso. Deixe-me começar de volta com o menu móvel. Deixe-me atualizar esta página e agora assistir o que acontece. Se eu acertar o pequeno, agora eu bati no meio. Observe como é 666. Então, a coluna um, a coluna dois, a coluna três cai abaixo porque passa das 12 colunas. Isso é totalmente bom. E quando eu vou mais longe, ele permanece em uma capacidade de 50%. Bem, quando eu vou grande XL e duplo XL, quero um design de três colunas. Assim, o que vou fazer é dizer ligue para LG. E se eu quiser três colunas, 12 divididas por 3 é 4. Então eu vou dizer, opa, volte para o primeiro também. Vou copiar este. E então eu tenho celular em 12, médio, seis e grande e acima em quatro. Não vamos esquecer o último. Lá vamos nós. Agora veja o que acontece. Agora tenho coluna um, coluna dois, coluna três em quatro colunas. No entanto, eu caí e desci para o meio. Agora eu bati 50% e agora bati 100% ou bati em um menu móvel. A grade tem muitas ferramentas poderosas, mas 12 eu não uso quase nada é chamá-lo de colunas DOM onde elas estão apenas sentadas lá sozinhas. Ele cria três colunas iguais, mas não tem nenhum ponto de interrupção anexado a ele. Então eu posso usar toda uma combinação de ferramentas diferentes. Mas eu uso o poder do excesso se foi. Mas eu uso o SM, MMD, LG XL e duplo XL para definir essencialmente os pontos de interrupção da minha coluna. E é assim que eu uso o col dash, a chamada SM. Eu uso o col md, ou temos a coluna D traço número de colunas. E então eu uso o col dash LG para dizer acima desse número, defini-los todos nesse design. E essa é sua escolha quando se trata de uma grade, você pode usar qualquer combinação. A razão pela qual eu gosto quando eles usam 12 como minhas 12 colunas é que você pode dividir isso por 2, três ou seis. E, claro, 12, dando-lhe uma ampla flexibilidade. Agora, você não precisa usar apenas esses números se quiser fazer designs um pouco diferentes. Digamos que queremos que a coluna do meio seja muito, muito grande e as outras duas sejam muito, muito pequenas. Contanto que eu chegue ao 12, estou em forma. Então, digamos que queremos fazer o meio 110. E depois faremos o top 11. E este 1110 mais um, mais um é igual a 12. Quando salvo isso e volto, se eu voltar a esse design médio. Agora vamos ver, e o texto é tão pequeno. Vamos pegar isso de volta. É uma coluna tão pequena que não conseguimos ler a coluna um. Vamos apenas dizer dois. Faremos oito. E depois dois novamente. Lá vamos nós. Observe o quanto uma coluna menor é. coluna dois é muito maior. E a coluna 3 novamente é tão pequena quanto a coluna um. Contanto que meus números somam 12. Posso atravessar esse design. Claro que quero todos iguais para o meu design. Então vou voltar para 666, mas esse é o poder da grade Bootstrap. A razão pela qual usar uma grade é que eu quero consertá-la no lugar. O Flex era mais para posicionar coisas que certas posições dentro de um espaço. E a grade é projetada para organizar as coisas forma uniforme ou para criar uma barra lateral para o conteúdo principal. Eu realmente comecei logo no começo com uma grade para a maioria dos meus projetos. E este projeto aqui não é exceção. Agora que temos nossa grade no lugar. Coluna um, coluna dois, coluna três, Vamos em frente e trazer alguns cartões e adicionar algum conteúdo a este portfólio. 15. Bootstrap 5: Então, o que eu quero fazer a seguir é que eu quero trazer alguns cartões. E o que os cartões se parecem é, se chegarmos ao conteúdo ou na seção de componentes, estou procurando o cartão de palavras. E tudo o que um carrinho é que ele basicamente fornece um contêiner de conteúdo flexível e extensível com várias variantes e opções. Quem é uma definição muito, muito vaga. O que um cartão se parece é esta imagem na parte superior, título do cartão algum texto e um botão. Vamos prosseguir e construir isso. E a melhor parte dos cartões é que eles preenchem o espaço de seus pais. O que isso significa é que os cartões serão ajustados com base no tamanho. A grade. Há exemplo em getboostrap é bom, mas eles definem um estilo embutido para uma largura de 18 RAM. E tudo bem, mas eu quero fazer algo diferente. Vou pegar as cartas e ir, ok, vamos construí-las, onde preenche o espaço dos pais. Então, como vamos escrever o cartão? Então, se chegarmos aqui para a coluna 1, vou tirar a coluna um. E o que vou fazer é dizer que classe div é igual a cartão. Abra e feche esse carrinho. Deixe-me também fazer hello world apenas olhando para o cartão no cartão duas vezes. E a primeira peça do cartão é que eu quero trazer uma foto. Então, vou fazer é ir até esta pasta. Já tenho uma pasta de imagens existente aqui. Vou pegar uma sala de jantar menor e arrastá-la para minha pasta de imagens. Também vou pegar o escritório menor e arrastá-lo para minha pasta de imagens. E também uma área de estar, imagem menor. Vamos arrastar isso. Então eu tenho essas três fotos porque as cartas nas fotos vão primeiro. Eu tenho que trazer a foto logo no início. Então o que vou fazer é dizer IMG, SRC. E traremos imagens e pegaremos as salas de jantar menor ponto JPG. Não se esqueça de dar a ele um alt tags. Vamos dizer Alt e diremos sala de jantar. E depois disso eu tenho que adicionar uma aula porque quero que o carro conformidade ou quero que a imagem esteja em conformidade com o cartão. Nesse caso, direi que classe é igual a cartão, IMG top. E se fecharmos nosso cartão, o que também é útil são os códigos VS como se algo estivesse errado. Você tem esse div vermelho brilhante aqui. Vou fechar o cartão. E há a foto. Observe como o cartão se curva em torno desses cantos arredondados. E como não temos outro conteúdo, a curvatura também estará na parte inferior. Mas quero adicionar algum conteúdo ou quero adicionar algumas informações ao corpo do cartão. Então, depois do topo do cartão, o que vou fazer é a classe div é igual ao corpo do cartão para estabelecer a parte do corpo do carrinho. Agora, o Bootstrap recomenda o h5, então vou ficar com o h5. classe H5 é igual ao título do cartão. E aqui direi sala de jantar. Observe que você pode usar o hg18 ou um parágrafo, se quiser. Só estou bem. As regras que o Bootstrap recomenda usar o H5 na seção do cartão. Depois disso, vou fazer, vou adicionar uma classe p igual ao texto do cartão. E nosso velho fã, Sr. Lorem Ipsum, então vamos dizer Lorem 20 e trazendo um parágrafo de 20 palavras. E se eu salvar isso, agora o que recebo é a sala de jantar com o texto Lorem Ipsum. Agora, o que eu quero durar é ter um call to action ou um lugar para a pessoa clicar em um botão para ver mais desta sala de jantar. E quando fizermos isso, vou usar o botão Bootstrap. 16. Botões do Bootstrap: Quero parar e dar uma olhada no Bootstrap, mas vou voltar para a seção getbootstrap. E se chegarmos à área de componentes em getbootstrap, vou para os botões. Quero mostrar todas as combinações de botões que você pode usar. E o que eu quero usar para este projeto. Então, os botões são ótimos porque criam uma maneira uniforme de chamar a atenção. Já são cantos arredondados e tem uma série de cores. Então, por padrão, você precisa adicionar o btn para identificar o botão e, em seguida, a escolha das cores. Depois disso. As cores são uniformes dentro do getbootstrap. O primário é azul, o secundário é cinza, o sucesso é verde. O perigo, é claro, é vermelho, o aviso é amarelo. A informação é esse tipo de cor turquesa. E você fica claro, escuro e, claro, nada além de um link se for esse o caso que você quer ter. Eu quase nunca uso o link porque um link é realmente apenas link. Eu realmente uso três desses, principalmente, o primário para azul porque azul indica que é uma cor de link quando se trata da web. E então, se eu não usar o primário, geralmente uso claro ou escuro para preencher meu design. Como tenho mais deste design de decoração de interiores em preto e branco neste projeto, vou acompanhar o claro e o escuro. Mas aqui está a parte legal. Para mim. Gosto do escuro, mas senti que o botão seria muito forte nesta página. Se eu rolar para baixo, você também obtém não apenas seus botões normais, mas você fica vinculado, mas um sim importante, isso é para um formulário. Mas você também obtém os botões de contorno. Eu amo este porque este é poderoso, não sendo muito poderoso. O que quero dizer com um poderoso, como você pode ver esses botões, mas estes são quase tão fortes com a cor cheia acontecendo. Então, quero que o usuário saiba onde clicar. 17. Gutters: Para ver o efeito total das calhas funcionando, vamos trazer mais duas colunas de informações. Então o que vou fazer é copiar este cartão de cartão para cartão. Não preciso copiar as colunas porque elas já estão lá. E vou colocá-lo, e vou colocá-lo na coluna três. Não consegui a capital C. Então agora o que eu tenho ou sala de jantar, sala de jantar e sala de jantar. Vamos mudar isso para incluir também o escritório. Então eu vou mudar o meio para não salas de jantar menores, mas o escritório menor. E todos dizem escritório. Agora, quando eu chegar é o escritório e o corpo do cartão, vou mudar para o escritório. E isso mudou. E eu vou mudar o último para a área de estar. Então, copiarei esse URL ou melhor, o nome do arquivo. E eu vou mudar as áreas de estar menores para a área de estar e tirar a sala de palavras. E, claro, vou duplicar a área de estar para a área de estar para o H5. Agora, quando tenho, são três colunas. Então, observe as calhas dentro do design. E isso também é importante porque quando eu viro isso para o celular, mas também acontece é notar o quão lotado esse espaço fica entre os diferentes cartões e a grade apropriada. Então, veja como vamos fazer isso. Se voltarmos para a linha, o que estou procurando é div class row. Vou primeiro dizer, quero uma margem superior. Então eu quero um pouco mais de espaço entre esta área aqui em cima. Então eu vou dizer linha, oh, você sabe, e eu também esqueci, esqueci nosso H1. Atire. Eu estava tão animado com o portfólio. Esqueci totalmente de colocar o título desta página, digamos um. E meu portfólio. Isso é o que era para mim. Isso estava um pouco lotado quando eu tive o H1. Então, isso é o que eu ia fazer estava vazio para a margem superior um. Lá vamos nós. Apenas um pouco de espaço extra acontecendo. Então, depois da linha com margem superior, vou adicionar uma letra g e dizer m, D3. Então, aqui vou dizer G para sarjeta no tamanho médio, quero que ele tenha um três. Quando se trata de espaçamento. Só um pouco mais de espaço aqui. Mas observe agora mesmo aqui que o espaçamento é uniforme e mesmo em todos os quatro lados. Agora, para mim, quando vou para celular, não preciso de tanto espaço que agora , claro, não há espaço porque ele só atinge o médio e o maior. Então, se eu dissesse G3, isso seria móvel para cima. E para mim há espaço. Mas quando se trata de um design móvel, estou sempre considerando como posso comprimir ou aproximar as coisas. Então, para mim, o que eu quero fazer é manter M D3, mas eu quero dizer, Gee, T2. E trarei o g2 do outro lado. Eu prefiro ir para celular primeiro e depois MMD, LG XL, duplo XL à medida que vou em frente e subo, cabe a você. Não importa de que maneira você os coloque porque funcionará, não importa o que aconteça. Mas eu quero que o celular seja dois e depois pequeno para B2 e depois md seja três. Se eu atualizar esta página, ela só a aproxima um pouco. Estou pensando em como posso comprimir ou colocar as coisas o mais próximo possível no lado móvel. Quando eu bater no pequeno, vai ficar também. Mas quando eu atingi o meio, ele vai cair para três para um pouco mais de sarjeta dentro desse design. Agora, é claro, a parte inferior não é calhas. É a área do meio é a sarjeta. Então eu tenho que adicionar um pouco mais de espaço dentro do meu design. Então o que vou fazer é dentro do contêiner, vou definir margem. Por que para a parte superior e inferior para dois. E então, quando eu também quiser fazer, vou dizer preenchimento. Por quê? Quero um pouco de preenchimento extra quando se trata de médio e maior. Então, vou dizer adicionando meio para. E isso me dá mais espaço para respirar quando se trata de portfólio neste design. E isso derruba um pouco aqui. Então meu portfólio fica um pouco fora do título. E agora tudo se move e funciona com sucesso. Para o seu design. Você pode querer aumentar ou diminuir as calhas. Você pode ir, claro, de um a cinco e tirá-lo completamente. Então, se eu disser, não quero calhas, posso dizer 0 e eles vão bater juntos. Está tudo bem. Se você quiser que as imagens fiquem bem próximas umas das outras, use 0. Se você quer que eles estejam mais distantes, digamos cinco. E agora eles se separam. Para mim, o número três estava bem no meio, onde me deu espaço suficiente em K espaço suficiente entre eles. Onde está o número seis? Aí está. E ao longo dessa jornada, tudo é responsivo. Sempre que uso MDL, GSM XL e duplo XL, tudo se torna responsivo. E eu estrelo com o celular primeiro, o celular primeiro e subo dois médiuns, neste caso, móvel primeiro, médio, grande. Este é o poder das calhas e o design responsivo do Bootstrap. Em geral. 18. Como configurar a página de contato: Conseguimos muito. Temos nossa página inicial, temos nossa página sobre finalizada, temos uma configuração de página de portfólio. E se você quiser ir mais longe, você pode criar essas seções Saiba mais. A última página em que queremos trabalhar é a página de contato. Ainda não vou clicar nisso porque vai falhar. Então, vamos aqui e vamos duplicar nossa página de portfólio. E vamos dizer contato. E vamos trazer a página de contato abaixo. E mudaremos nosso portfólio de formulários de navegação ativo. Para entrar em contato ativo. Vou tirar todo o resto que não preciso, incluindo esta div abaixo. Então vou começar com a div e tirar o segundo, infelizmente, div. Lá vamos nós. Eu vou manter o contêiner no meu portfólio deve dizer entre em contato comigo. Então vou dizer contato. Entre em contato comigo. Agora posso clicar em Contato, e agora ele vai funcionar. Isso parece bom. E se o seu design estiver muito distante, talvez eu volte para o m Y2 por enquanto. Lá vai, traz um pouco mais para cima. Se para você, você é como, você sabe o que, isso parece um pouco longe demais, então traga de volta para cima. Então, para o meu design, já que os portfólios um pouco mais ocupados, decidi derrubar um. E para esse design, é apenas um contato. Vou trazê-lo de volta. Agora estamos prontos para trabalhar na página de contato. Oh, mais uma coisa. O portfólio quase perdeu isso. Uma última seção. Quase estava indo quase cadeira muito rápido, digamos que entre em contato comigo. E agora nosso título diz entre em contato comigo. Entre em contato comigo e temos o ativo em vigor em nosso design. Agora vamos seguir em frente e construir uma grade de duas colunas. Adicionaremos alguns recursos de contato e criaremos um formulário dentro desta página de contato. 19. Adição de detalhes de contato: Então, depois disso, tenho que criar uma linha e adicionar algumas calhas. Então, abaixo, voltamos à procura do nosso contato comigo. Vou montar uma fileira. Então eu vou dizer que a classe div é igual a linha e dar-lhe um G5 em um, dado muito espaço neste design. E só para termos um apropriado, vou dizer 66 e vou usar o meio para identificar este. Então vou dizer div class col md seis. E direi a coluna 1. E vou duplicar isso para a coluna dois. E diremos coluna para salvar a coluna de atualização um, coluna dois. Incrível. Esta coluna do lado esquerdo, ou o início no Bootstrap 5, é que estamos nos livrando da esquerda e da direita e agora estamos entrando mais no início e no fim. Então, esta coluna aqui, vou dizer parágrafo. Oh, como fazer isso? Isso é interessante. Parágrafo e traga-lhes um Lorem Ipsum, digamos que o braço inferior de 25, um pouco parecido entre em contato comigo. Salvar. Há um pouco de informação sobre a pessoa e como contatá-la. E depois adicionarei um número de telefone e um e-mail. Então, direi que o telefone será código de área. Usarei meu número de São Francisco por 15 por 55. 55. 55. Perfeito. Lá vamos nós. E, em seguida, abaixo, vou adicionar um endereço de e-mail. Eu direi que você é bem-vindo. Envie-me um e-mail. E vamos dizer John Smith chapéu John Smith desenhos. Por favor, não envie isso por e-mail porque, em teoria, alguém poderia ter esse endereço de e-mail. Então, certifique-se de que este seja apenas um e-mail fictício. Então, se eu salvá-lo por padrão, ele aparecerá, mas eu quero vincular este e-mail. Então, vou cortar isso por um segundo. Vou soltar um HREF igual. E se você é novo em escrever e-mails, temos que dizer masculino 2, dois pontos, soltar o e-mail e colocá-lo de volta dentro da tag a. E o que acontece é que agora se torna um link no qual posso clicar para enviar um e-mail para John Smith. Projetos John Smith. Totalmente legal, parece e bom. Agora é hora de adicionar o formulário no lado direito. 20. Como configurar o formulário: Tudo bem. Então, temos as informações para o telefone e o e-mail. E neste lado aqui à direita, vou adicionar um formulário a este design. Então, na coluna 2, vou retirá-lo e dizer forma. Bem, isso é mais detalhes mais tarde, mas agora vamos ficar com o design básico do formulário. Tudo formado começa e termina com o formulário aberto e o formulário fechado. E esse design, vou criar duas colunas para o FirstName, LastName, criar uma coluna para o e-mail e, em seguida, apenas uma área de texto para alguns comentários. Então, nada de louco demais sobre este formulário. Então, vou fazer é primeiro criar linhas e colunas para que isso funcione. Então vou dizer div class row. E tenha em mente que finja que isso é 100% porque esta é uma grade totalmente nova. Dentro de uma grade, os pais 50%, mas dentro dela ainda estamos em 100%. Então, neste caso, vou dizer div class row. E aqui dentro vou adicionar uma grade de seis colunas div Class. E diz que estamos aderindo ao formato médio. Vou dizer col, md seis. E agora vou dizer a coluna 1 só para ter certeza de que está funcionando. E vou duplicar isso. E eu tenho loops de coluna um e coluna 2. Lá vamos nós. Então eu tenho um design de duas colunas para o meu formulário. Então, na coluna um, o que vou fazer é dizer rótulo. Sempre esqueço que faço isso. As roupas não vêm com ela. Lá vamos nós. Portanto, esse rótulo será o primeiro nome 4. E você verá por que isso é importante para conectar o rótulo com o campo de entrada e o segundo. E então a classe será, isso é do bootstrap, rótulo do formulário. E dentro do rótulo, direi o primeiro nome. Depois disso. Então eu quero trazer uma entrada. Então, preciso colocar informações de entrada neste formulário. O tipo será apenas texto. O nome, vamos dizer é o primeiro nome. E a classe que vamos dizer é forma, controle de traço. E um IED vai corresponder à palavra quatro. Então vou dizer que id é igual ao primeiro nome. Então eu uso N maiúsculo para a segunda palavra para identificar o ID também. Tenha em mente que você não pode ter o mesmo ID duas vezes em uma página. Então, estamos bem lá. E agora, quando eu salvo isso, o que recebo é FirstName, legal. E posso digitar meu nome bem ali. A segunda coluna que vou dizer é LastName. Então, o que vou fazer é duplicar esse mesmo estilo e arrastá-lo ou copiar e colar e dizer sobrenome, sobrenome para sobrenome, o nome. Vou te mostrar um pouco por que vamos usar isso. Vamos dizer LastName e diremos sobrenome. Agora o que eu recebo é FirstName, LastName. Como os endereços de e-mail são mais longos do que geralmente os nomes e os sobrenomes das pessoas. Vou escrever o e-mail em todo o campo. Então, como não precisamos usar 66, temos que usar 12 ou ligar para 12. Então, depois desta seção desta div para esta div, vou dizer classe div e diremos col 12. Portanto, independentemente do ponto de interrupção onde trabalhar, sempre será 100% dessa parte da coluna. E apenas um teste. Vou dizer o teste de palavras, deixá-lo e agora ver o que acontece. Então note que tudo se move. Se isso estiver muito próximo do seu design, você pode dizer que pequeno vá 12. Então eu poderia querer dizer neste caso, ligue para SM 12, ou apenas diga col 12 neste caso. E agora o que vai acontecer é, opa, eu tenho que dizer ligue para SM 12. E vamos largar isso. E vamos largar isso. Bem, isso é médio. Sabe, talvez devêssemos ir grande. Eu o levaria de volta. Olhando para ele. Talvez precisemos fazer um design grande neste caso. Então você sabe o quê? Vamos realmente dizer que não M d2, acho que devemos dizer grande 12º porque esse fica um pouco lotado no meio. Então eu levo de volta. Vamos fazer isso. Pensei que tinha isso pré-projetado e, em seguida, um segundo olhar para mudar de ideia. Então, vou dizer. Lg vai para seis, e a LG vai para seis. E agora o que acontece é que isso parece muito melhor neste caso. Claro, está um pouco lotado com esse sobrenome e o PrimeiroNome porque, como vimos antes, quando se tratava da seção de portfólio, temos que adicionar alguns cortadores. Então, no design do formulário, vou adicionar uma linha. Então, na seção de linha, vou dizer rho g dash três. E isso dá agora algum espaço neste design. Eu posso dar um passo adiante, porque eu tenho a forma sentada sozinha e a classe div. E se combinarmos esses dois juntos? Vou tirar essa div. Vou trazer a classe até o formulário. Então, o formulário em si se torna uma linha. E eu sempre digo menos código, melhor. Então, vou descer e depois do formulário. Vou então mover as divs apenas para trás um comando colchete esquerdo dentro do código VS Studio me ajudará a fazer isso. Um pouco de limpeza. Na IL-3. Se eu atualizar, ele ainda parece o mesmo. E, novamente, é também quando trabalho com uma grade que talvez eu precise mover as coisas. O Md funcionou quando fiz isso pela primeira vez. E então, à segunda vista, acho que o maior melhor. Então, tem que ir um pouco mais longe para preencher o espaço. Agora estamos de volta aos trilhos. Agora, o e-mail é um pouco diferente de FirstName e LastName. Então, onde tivemos col 12, isso vai atravessar todo o design. Vou fazer o teste de palavras e usarei o rótulo para. E posso dizer que e-mail neste caso, a aula será em forma. Etiqueta. Lá vamos nós. E vamos dizer e-mail. Isso mesmo. Endereço de e-mail neste caso. E fecharemos com o rótulo. Depois disso. Adicionaremos a entrada. E a entrada não será digitar texto, mas digite e-mail. Então, diremos que digite e-mail, nome. Nós diremos e-mail. E então diremos que classe é igual a forma. O controle pega isso. E o ID tem que corresponder ao Wu com que eu apertei a tecla Return. O ID tem que corresponder à palavra quatro. Portanto, o id é o e-mail e nós o fecharemos para o usuário da frente. Eles só acham que o e-mail parece o mesmo que isso. O que também é ótimo no Bootstrap 5 é que ele utiliza a pseudo-classe de foco. Qual é a pseudo-classe de foco? Quando clico nele, ele transforma esse brilho de gradiente azul em torno do FirstName, LastName. Isso ajuda o usuário a identificar qual campo lá nesta apenas uma peça extra eu gosto sobre o Bootstrap, porque isso realmente ajuda a dar um pouco experiência ao usuário ao campo em que estou trabalhando. Perfeito, com boa aparência. Então, a seguir vamos fazer é ir para baixo, quero criar uma área de texto após o endereço de e-mail. Tenho certeza de que tudo está salvo. O que é. Então este vai ser depois da chamada 12. Quero torná-lo com largura total novamente. Então vou dizer div, classe col 12. Abertura fechar. E diremos rótulo para comentários. Na aula É um formulário. Etiqueta. O rótulo. E diremos comentários. E este não será uma entrada. Vai ser o que é chamado de área de texto. Então vou fazer é dizer área de texto, classe, controle de formulário. E depois disso, vamos dar um nome a ele e ele mostrará mais tarde por que o nome é realmente importante neste caso, nome, comentários. Id é igual à palavra quatro. Então, diremos comentários. E linhas. Vamos dizer que são três. Aqui estão alguns importantes. Não deixe cair isso depois que ele fechar. Não colocar espaço entre a área de texto e um espaço aqui será um espaço aqui. Então, se eu salvar isso, o que quero dizer com esse espaço é que eu quero aquele pequeno cursor. O que também é bom nisso é notar o bom preenchimento que recebemos aqui. E não sei por que está me mostrando o formulário. Então eu vou fazer isso só para me livrar de deixar cair meu e-mail. Lá vamos nós. Ou seja, vou consertar um mais tarde. De qualquer forma, nesta seção de comentários eu realmente gosto disso é que ele realmente cria esse preenchimento realmente bonito dentro da minha seção comum. Mas se eu derrubar essa área de texto assim, o que acontece é que, na verdade, há todo esse espaço extra. Isso faz parte da seção de comentários porque eu deixei isso cair. Então, ele o trata como espaço extra no meu design. Mesmo se eu fosse criar três espaços aqui. Ele coloca três espaços aqui. Certifique-se de que a área de texto fechada esteja ao lado da área de texto aberta. Este é um I C e muitos designs, as pessoas não percebem que esse espaço extra apenas dirige. Estes são loucos animados. Eles têm essa quantidade extra de espaço e precisam essencialmente excluí-lo PARA trabalhar com ele. Perfeito. Não vamos dizer essa página. Vamos salvar esta página, atualizar e agora estamos de volta à área de texto correta. E, claro, para que um formulário realmente funcione, temos que criar um botão para enviar as informações. Então eu vou fazer é, vou dizer classe div e diremos col 12 para torná-lo uma coluna. E eu direi neste caso, tipo de botão é uma classe de botão de envio, vamos dizer que é btn. E então btn-primário. Vou usar o azul típico. E diremos enviar. Agora, o que eu tenho é um formulário. Mas, em teoria, se eu tivesse cúpula, eu poderia enviar o formulário. Bem, vamos, na verdade, como um bônus para este curso, eu quero criar um formulário de trabalho para você usar. 21. Netlify e o método de arrasto e solt: Para que este projeto realmente funcione, temos que colocá-lo em linha até agora, passamos tempo apenas na área de trabalho. Então, vou fazer é vir e puxar o Netlify. Aqui vamos nós. Netlify, é. Netlify faz com que o aplicativo web moderno seja enviado mais rápido, empresa de comércio eletrônico, todas essas coisas boas. Mas o que ele também faz, me permite arrastar e soltar sites diretamente na web. Vou fazer login. E se você não usou o Netlify antes, entre na inscrição. E no meu login sob esses sites de palavras, o meu realmente não tem isso aqui, então eu tenho muitos outros sites. Vou clicar em sites. Na parte inferior. seu provavelmente estará vazio contra todos os meus sites. Eu quero implantar um novo site sem me conectar para ter certeza que sim, eu só quero arrastar e soltar minha pasta de saída do site aqui. Se eu pegar essa pasta e pegar minha nova pasta do projeto, se eu arrastá-la para aqui, observe como ela se transforma para esse branco versus o contorno. Se eu arrastá-lo direto para dentro, o que vai acontecer é que ele vai construir um site totalmente novo. Quão incrível é isso? Em cerca de 30 segundos, acabei de lançar meu site em uma sequência aleatória de palavras. Então, se eu disser Configurações de domínio, irei para Editar Nome do Site. E vou chamar isso de John Smith, temporário por agora. O que eu recebo é um URL que funciona. E recebo a página Sobre, recebo a página do portfólio, recebo a página de contato. Isso é fedorento incrível. Mas o que eu realmente entendo, pelo qual eu realmente amei Netlify, é que se eu voltar para Netlify, eles formaram a seção. E você realmente pode criar um formulário usando o Netlify e enviar informações automaticamente usando o sistema deles. Vamos prosseguir e colocar as informações para que os formulários Netlify funcionem neste projeto. 22. Formulários de Netlify: Então, vou mudar este corredor por agora. E o que eu quero fazer é voltar ao meu código e aqui, adicionar algumas informações adicionais ao formulário. Então, se eu voltar, estou procurando o formulário. Aí está ele. E o primeiro é por onde eu começo. A classe está totalmente boa. Mas o que eu quero adicionar é um nome. E esse nome será o formulário de contato ou apenas entre em contato. Agora, há dois métodos que tenho que configurar. Aqueles recebem ou uma postagem. E GET é se você estiver recebendo informações de um formulário como digamos o Google. Uma publicação é se eu quiser publicar informações em um formulário como um formulário de contato. Nesse caso, vou dizer Post. Tenho que adicionar algumas coisas extras. E para facilitar a leitura, vou perder algum espaço. Eu só vou deixar isso para baixo e deixar isso para que tenhamos um pouco mais de legibilidade acontecendo. Posto de método. E o formulário vai abrir e fechar. Após a postagem do método, quero dizer dados Netlify, verdadeiro para dizer à Netlify, Ei, este é um formulário. Me confira. Depois desta seção. Quero dizer ação e essa coisa muito legal. Porque a ação, eu queria realmente dizer, bem, quando você envia o formulário, devolva ao usuário uma resposta. Então, vou dizer ação. Vou dizer, neste caso, contato de barra, traço, sucesso. Ainda não temos essa configuração de página, mas vamos antes de você correr isso longe demais. Então, diremos o sucesso do contato. Mas HTML, isso foi projetado para dizer ao usuário quando eu enviar essas informações, vai funcionar. A razão pela qual também tive as palavras nome, FirstName , LastName, e-mail e comentários é que isso vai aparecer na seção Netlify é formulário. Então, quando eu salvar isso, vou voltar para minha conta de safári. E deixe-me puxar isso de volta aqui. Então, o que eu quero fazer é voltar para citar, visão geral e ler arrastar e soltá-lo. Vou voltar às implantações de produção, digamos que as implantações de redução. E, nesse caso, é necessário atualizar seu site. Sim, eu faço. E eu salvei em tudo. E, novamente, não consigo ver a mudança aqui porque é mais do funcionamento interno do formulário. Então, vou voltar ao Projeto Novo, abrir minha versão do Safari para cima e arrastar o projeto novo. Aqui em cima. Ele vai fazer o upload do projeto não deve demorar muito. E eu não notei que o upload nem sempre muda, então eu tenho que atualizar a página e, em seguida, está tudo pronto para ir para lá. Vamos tentar isso. Oh, mais uma coisa que eu tenho que fazer. Eu disse que ia fazer de mim mesmo uma página de sucesso. Eu não fiz isso. Então, tenho que ter certeza de criar um sucesso de contato. Então vou fazer é duplicar a página de contato e dizer Duplicar ou Command D no Mac, controlar D no PC e dizer sucesso do contato. E tudo o que vou fazer é tirar o formulário e apenas agradecer pela informação. Então, estou procurando o formulário, comento e formei um formulário. E eu vou apenas dizer em uma tag de parágrafo simples, obrigado pelo seu envio. E não podemos ver até que realmente executemos o formulário. Então, vamos salvar isso. Ele foi salvo. Perfeito. Agora estamos parecendo bem. Deixe-me fazer o upload disso mais uma vez. Ele saltou a arma, então nos dará uma mensagem de erro. Vou arrastar e soltar isso. E, novamente, ele usa isso não muda por padrão, então eu tenho que ir e atualizar a página e agora ela é publicada. E agora devemos ver em nossa seção de formulários, perceber como temos um formulário. Temos um formulário ativo chamado contato. E ainda não há envios neste formulário de contato. Eu disse ainda, bem, agora se eu executar meu site, então se eu executar o design e o contato John Smith, vou colocar meu nome e ele escolherá algo em something.com. Ei, vamos ver se este formulário funciona. E corretamente deve ser apóstrofo. Vou enviar as informações. E obrigado por sua submissão. Legal. Até agora, parece que vai funcionar. Então, se eu voltar para Netlify e passar para formulários, ei, entre em contato sem envio às 1038 AM. E Hayden, Ei, vamos ver se isso funciona. Observe que o primeiro nome corresponde ao nome, primeironome. Observe que o sobrenome corresponde ao sobrenome, endereço de e-mail e comentários. Isso é muito rad. Se você quiser dar um passo adiante, o que você também pode fazer é dentro da visão geral do seu site, se eu for para Configurações do site, isso primeiro fica um pouco confuso porque há um botão Formulários aqui em cima e há um Formulários botão para baixo no canto inferior esquerdo. Mas se você quiser receber seu formulário por e-mail, você pode configurar Notificações de formulário para acessar um determinado gancho da Web, uma notificação por e-mail ou uma integração com o Slack. Nesse caso, gostaria de dizer notificação por e-mail. E posso dizer, Ei, posso ser notificado por e-mail quando alguém usa esse formulário, quão legal é isso? Como as rochas Netlify. Mas eu posso dar um passo adiante. Porque se eu voltar para esse design de formulário, e se eu entrar no contato, também há uma maneira de evitar spam. Portanto, todas as missões de formulários são filtradas por spam usando um Kismet. Mas também posso adicionar um campo de honeypot para capturar spam adicional no meu design. E esta é provavelmente a ferramenta mais poderosa dos formulários Netlify que não é detectada. Vamos criar um campo de honeypot adicional a partir do meu design que ele ajudará o spam dentro do Netlify. 23. Como adicionar o honeypot mel ao formulário: Vamos voltar ao nosso formulário. E o que estou procurando é 0 entre a página de sucesso do contato, isso não vai acontecer. Lá vamos nós. Para nossa página de contato, quero adicionar mais uma peça abaixo da ação. Vou dizer dados, Netlify um honeypot para garantir que ele identifique que há um novo campo aqui. Vou dizer que comprei o campo de traço daqui. Vou adicionar um novo campo neste design. Então, abaixo desses dados, Netlify um honeypot, mas acima da classe div 12, vou criar uma entrada e dizer que o tipo ficará oculto. Este é um novo tipo de campo que não será mostrado, mas somente quando os boths tentam passar por todas as entradas, eles podem vê-lo através do lado do código. E o nome vai ser comprado campo, essencialmente dizendo que se alguém, ele preenche esse campo oculto que uma pessoa normal nunca veria, então identifique isso como spam. E eu costumo fazer também é que eu também faço uma anotação e digo para os bots apenas no caso de eu voltar e descobrir por que fiz isso. Então, por que você colocou uma nota que diz para os bots e depois para os boths, só para que eu possa ter uma identificação como um campo oculto. Agora, novamente, se eu salvar isso, você não poderá ver isso na sua página de contato. Até agora parece bom. Vamos fazer o upload deste projeto e ver se o Netlify identifica esse, mas também o campo. Vou trazer de volta lá é. Meus formulários e visão geral do site, a produção é implantada. Vou voltar para os pais. E se eu rolar a página para baixo, deixe-me trazer o projeto novo para esse novo upload. E, novamente, ele não muda de upload para publicação. Então, o que eu tenho que fazer é atualizar a página e ela é publicada. Agora, o que eu deveria ver na minha seção de formulários, se eu entrar em contato, prevenção de spam extra perfeita ativada por meio de um campo honeypot. Então, ele só adiciona uma camada extra de prevenção de spam dentro do Netlify já. 24. Um pouco de limpeza: Então, se olharmos para nossa página, vou esconder o Safari novamente, que tudo está muito bom. Mas a única coisa que me irrita um pouco que eu vi em todo o meu design é que designs de John Smith são recuados apenas um pouco em relação para entrar em contato comigo, não é realmente perceptível na primeira página ou na página sobre, mas vamos acesse o Portfólio e o Contato. É perceptível. Então eu vou fazer é que eu queria um pouco de limpeza extra. E é assim que vou abrir todos os meus arquivos e ir para o Projeto Novo. E sobre o sucesso do contato, índice de contato e portfólio. Eu só quero tirar o preenchimento nos lados esquerdo e direito do meu design. Então eu estou procurando está no contêiner para a barra de navegação. O que eu quero fazer é dizer Px 0. E estou na página sobre. Dê uma olhada novamente nesse. Então, se eu salvar o sobre, ele, basta tirar o espaço nos lados esquerdo e direito. Eu dupliquei isso em todas as páginas. Então, voltarei para entrar em contato com o sucesso. No topo. Adicione o px 0. No meu contato. O que estou procurando é container e PXE no índice. Volte para o topo. Não fique tonto ou quase lá. Px e portfólio no topo também. Estamos procurando é o contêiner e P 0. Agora, quando passo página por página, tudo está alinhado dessa maneira. Além disso, eu mantive o hello world e eles deveriam dizer desenhos de John Smith. Então, o que vou fazer é mudar o helloworld para projetos de John Smith. No web design, é importante colocar o nome real, o portfólio ou o nome da página primeiro e o título geral em segundo lugar. Então eu tenho que duplicar isso mais uma vez. Mas como estamos lá em seguida, índice 0 ainda tem o Hello World. Eu não consertei isso. Oh, não. Então, vamos pegar a coisa toda. Vamos pegar esse design no índice. E diremos, é tudo design e faz sua casa parecer incrível. Só para adicionarmos algo no topo. Ou também poderíamos dizer, neste caso, design de interiores. Design de interiores e decoração. Perfeito. E também podemos mudar o helloworld para arrumado que foi para combinar com design de interiores e decoração na minha página de índice. Vamos vir aqui em baixo. Cadeia para o mundo baixo. Só para que pareça um pouco mais forte. Lá vamos nós na parte inferior. Então, para continuar ao longo desses títulos inteiros, uma pequena limpeza a ser feita. Vou pegar os projetos de John Smith e ir direto ao contato. Mude o sucesso desse contato. Podemos dizer que, em vez de entrar em contato comigo, podemos dizer que o envio foi bem-sucedido. E a página sobre levará o HelloWorld. E projetos John Smith. Vamos fazer o upload mais uma vez, dar uma olhada e garantir que tudo esteja funcionando com sucesso. Em formulários, visão geral do site, a produção é implantada. Role para baixo a página e o projeto novo. Largue isso. Mais uma vez, espere cerca de 510 segundos pelo meu InDesign, só não é um arquivo tão grande. 3.4 megabytes, atualize a página e ela é publicada. Se eu clicar neste link ou nesse caso, atualizarei a página. Agora, o que eu recebo é aquele estofamento retirado, design de interiores e decoração, desenhos John Smith. E sobre nós não olhamos muito bem. Ele deve fluir. Olhe ótimo. Parece muito bom. Eu acho. Volte ao nosso portfólio. Temos nossas três colunas para duas colunas, design de 21 colunas parece bastante forte. E temos uma página de contato. Posso dizer John Smith, algo na John Smith designs. Este é apenas um teste se eu estimar as informações. Whoa, lá vamos nós. Obrigado por seu envio. E eis que, se eu voltar aos formulários, última submissão aconteceu às 1050 eu sou. E John, isso é apenas um teste e funciona. Temos tudo funcionando e ele é configurado e projetado usando o Bootstrap 5. 25. um rodapé pegajoso: Enquanto eu estava olhando todo esse site, ele parecia muito bom, exceto por um pequeno detalhe na seção sobre. Não percebemos porque estamos rolando para cima e para baixo. Mas quando chegamos à página de contato, observe que o rodapé sobe e toca quase a parte superior do formulário. O que eu quero fazer é que eu quero que o rodapé fique preso na parte inferior é criar um rodapé pegajoso. Podemos fazer isso com flex. Temos que entrar em nosso CSS para conseguir isso. Dentro do meu CSS personalizado no topo, vamos colocar isso logo depois. Na verdade, nos disseram antes do cabeçalho, pensando antes e depois, tenho que adicionar algumas coisas. Vou dizer corpo de vírgula HTML. E depois disso, quero dizer que a altura é igual a 100%. Temos que dedicar essa informação para dizer, vamos tornar essa altura 100%, o que já é para trazer o flex. Quando vou fazer, vou dizer a exibição do corpo e depois flexionar para fazer o corpo fluir. Quero transformar as crianças do corpo ou as divs, a rede elétrica e os rodapés em colunas. Então, vou dizer direção flexível. E vamos dizer coluna. Depois disso, posso transformar o principal em fluxo. Então vou dizer flex principal 1, 0 e, em seguida, fazer isso um 100% o máximo que possa estar empurrando o rodapé para baixo. Agora o truque é depois do principal, vou dizer rodapé. E, em seguida, gire o rodapé para flexionar, encolha para 0. E o que isso vai fazer é habilitar esta parte do meio, se acharmos que tem três colunas, o cabeçalho e o rodapé, isso vai se expandir para largura total menos o rodapé na parte inferior. Eu atualizo a página. Na verdade, estou no nome de domínio real. Vamos voltar para o Projeto Novo. E vamos puxar o arquivo de índice e a página de contato. Agora o que você vê é esse rodapé inferior aderindo ao fundo. E, por fim, temos que fazer é abrir o Netlify. Lá vamos nós. E voltarei para o meu site. Visão geral. A produção implanta e carrega isso mais uma vez para garantir que ele funcione. Deixe-me encontrar o arrastar e soltar e esperar que ele seja carregado. Dê cerca de cinco segundos. Vou atualizar a página e ela diz publicada. Agora, quando eu voltar para a página de contato que está na temporária de John Smith Netlify, atualize a página. Agora o rodapé fica na parte inferior. Se você tiver uma pequena página de contato, recomendo fazer isso. Então você segura o espaço para o rodapé pegajoso na parte inferior. 26. Em conclusão: Muito obrigado por tomar o tempo para assistir a este curso no Bootstrap 5, eu realmente queria fazer um projeto concreto. Poderíamos usar a maioria das ferramentas dentro do Bootstrap 5. Para mais informações sobre o Bootstrap, você pode voltar para os documentos e encontrá-los todos. E Firmin, que comprou o curso avançado, você pode usar essas ferramentas extras como código-fonte para confiar e verificar novamente seu trabalho também. Como sempre, sou atingido na UPS e pensando muito em comprar o curso bootcamp bootstrap.