Como criar um site HTML CSS Bootstrap | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Como criar um site HTML CSS Bootstrap

teacher avatar Laurence Svekis, Best Selling Course Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

23 aulas (2 h 5 min)
    • 1. PromoVideo

      1:28
    • 2. Introdução de curso CSS HTML 1

      3:02
    • 3. Recursos de curso 2 para criar um site do zero

      7:33
    • 4. Planejamento de 4 sites

      5:04
    • 5. 5 Estrutura de página HTML para construção

      10:40
    • 6. 6 adicionando Bootstrap a um site

      5:09
    • 7. 7 Como adicionar conteúdo de espaço reservado

      2:20
    • 8. 9 Adicionando estilo padrão

      6:30
    • 9. Seção de slogan de logotipo de atualização 10

      5:57
    • 10. 11 Criar uma barra Navbar com elemento ativo

      7:07
    • 11. Mensagem de boas-vindas da página de 12 índice

      9:29
    • 12. 14 Crie uma área de conteúdo de duas colunas

      3:49
    • 13. 15 Criar elemento de rodapé

      2:27
    • 14. 16 Torná-lo responsivo

      3:34
    • 15. 17 Configurando fonte incrível

      4:27
    • 16. 18 Atualizar barra de navegação para ser responsivo

      4:05
    • 17. 19 JavaScript para ocultar e mostrar elementos

      5:48
    • 18. 21 Crie outra barra de navegação responsiva

      11:59
    • 19. 23 Como adicionar Biblioteca JavaScript Bootstrap

      3:19
    • 20. 24 Adicionar Menu de alça de inicialização NavBar

      8:45
    • 21. Menu de 25 Bootstrap Navbar

      5:56
    • 22. 27 Criar páginas de site

      4:33
    • 23. 28 Editor de código online

      2:03
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

943

Estudantes

--

Projeto

Sobre este curso

Guia completo para aprender a criar um site de CSS HTML totalmente responsivo e pronto para dispositivos móveis

Aprenda a criar um site moderno e totalmente responsivo do zero!

Treinamento passo a passo, incluindo tudo o que você precisa para criar um site a partir do zero. No final deste curso, você terá os recursos e compreensão para criar sites adicionando CSS ao HTML.

Sites modernos estão prontos para qualquer dispositivo de tamanho, incluindo celulares, tablets e desktops. Este curso vai mostrar como criar sites modernos e responsivos.

Este curso tem tudo o que você precisa para começar

  • incluindo código-fonte
  • recursos principais
  • treinamento passo a passo
  • vídeos completos em HD
  • Planejamento de wire-frame e web design
  • Projeto de portfólio completo do início ao fim
  • como adicionar Bootstrap para desenvolvimento de web rápido

Aprenda a criar estrutura de site com HTML e se preparar para adicionar estilo. Use CSS para tornar seu site mais útil. Então torná-lo responsivo!

Estou aqui para ajudar você a aprender a criar sites e responder a todas as perguntas que você possa ter. Descubra a liberdade de criar e styling sites do zero. Você está pronto, vamos começar a aprender como criar um site do zero.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. PromoVideo: aprender a construir um site moderno e totalmente responsivo a partir do zero. Meu nome é Lawrence, e estou aqui para ajudá-lo a aprender a criar sites do zero. Sou desenvolvedor da Web há mais de 16 anos, e estou muito entusiasmado por ter a oportunidade de apresentar este curso dentro deste curso. Vamos construir um site, passo a passo, e eu vou mostrar como usar HTML, preparar sua estrutura HTML e adicionar estilo para fazer seu site vir à luz. E então também vamos adicionar um estilo adicional para fazer as respostas do seu site. Este é um curso de treinamento passo a passo. Tudo está incluído que você precisa saber para criar um site a partir do zero até então, este curso você terá os recursos e compreensão para criar seus próprios sites usando HTML e CSS. Os sites modernos estão prontos para dispositivos de qualquer tamanho, incluindo telefones celulares, tablets e desktops. Este curso mostrará como criar sites modernos e responsivos. Neste curso, incluímos o código-fonte. recurso de conversa é passo a passo treinamento vídeos totalmente HD, como configurar um quadro de fio e planejamento de web design. Como construir este projeto de portfólio do início ao fim. Auto bootstrap, rápido desenvolvimento Web em muito mais. Descubra a liberdade de criar sites de estilo a partir do zero. Você está pronto? Vamos começar a aprender como fazer um site do zero. 2. Introdução de curso CSS HTML 1: oi e bem-vindo ao nosso curso introdutório sobre como construir um site a partir do zero. Meu nome é Lawrence, e serei seu instrutor para este curso. E estou tão entusiasmada por ter a oportunidade de apresentar este curso para vocês. Venho até você com mais de 16 anos de experiência em desenvolvimento na Web e uma das minhas coisas favoritas a fazer é construir sites. Eu realmente gosto do aspecto de ser capaz de criar código HTML e, em seguida, adicionar CSS styling e , em seguida , é claro, JavaScript toe Adicionar essa funcionalidade adicional para seus dois sites. Neste curso, vou apresentar como começar com um design básico. Então este é o nosso design básico do nosso site, onde temos várias seções do nosso site. Temos uma área de trabalho, você e uma visualização móvel e como queremos que essas seções sejam rebocadas dependendo do tamanho da tela . Então é com isso que vamos começar, e então vamos criar nossa estrutura HTML. Então a estrutura HTML vai ser preparado e pronto para lidar com CSS. E como você pode ver aqui dentro desta captura de tela, nós temos uma parte da estrutura que está disponível aqui onde estamos dividindo-a em seções diferentes. E então essas seções estavam indo para usar Teoh, aplicar estilo e realmente movê-los ao redor, dependendo do site da tela. Então, todas essas áreas diferentes do ar vai ser seccionado no código HTML, e nós vamos aplicar estilo para realmente fazê-lo ganhar vida. E como podem ver, este é um exemplo de um dos sites que vamos construir dentro do curso. Você pode ver sempre que estamos redimensionando, vemos que o redimensionamento do menu de navegação é por isso é um site totalmente responsivo, pronto para ir e podemos ver que sempre que clicamos, temos páginas novas. Então, o modelo está mudando. Temos um modelo diferente para a nossa página de injeção ou página introdutória, como fazemos para sobre e produtos e contato. Então também vemos que o menu está redimensionando e vamos mostrar-lhe diferentes maneiras de implementar esses menus de navegação responsivos porque eles são sempre tão importantes para os visitantes da Web que vêm ao seu site para que todos possam ser capazes de interagir corretamente com o seu site. Então, na verdade, você diferentes maneiras de configurar esses menus de navegação para cima. Há alguns que são apenas styling e, em seguida, outros que aplicamos um pouco de javascript a fim de adicionar essa funcionalidade dos menus. Todo o código-fonte e recursos que vou usar neste curso também estão incluídos para que vocêtambém incluídos para que você possa trabalhar junto com as aulas e práticas do curso e desenvolver seu próprio site atualizando seu possa trabalhar junto com as aulas e práticas do curso e desenvolver seu próprio site Habilidades HTML e CSS à medida que avança no curso. Então, quando estiver pronto, vamos começar a criar um site do zero. 3. Recursos de curso 2 para criar um site do zero: Bem-vindo ao nosso curso sobre a construção de um site a partir do zero. Então, alguns dos recursos que vou usar ao longo do curso, que eu tenho aberto agora na minha tela. Então, logo aqui no lado esquerdo, este é colchetes, Este é colchetes Editor. É da Adobe e, em seguida, do lado direito, eu tenho minha visualização de vida disponível, e o real qualquer coisa sobre colchetes é que ele vem com esta visualização de vida. E como você pode ver, quando eu digito algo aqui no lado esquerdo, ele aparece na pré-visualização da vida do lado direito. Então isso parece ser um pouco de dificuldade para ir e voltar, e eu posso realmente ver o que está acontecendo quando eu adicionei algum código em tempo real. E se você está procurando por um editor, se você já tem um editor, você pode ir em frente e usá-lo. Mas se você está procurando um novo editor para testar colchetes é da Adobe, ele está disponível. É gratuito para baixar o editor de texto de código aberto funciona em várias plataformas, e há algumas informações realmente boas aqui no suporte Parar I um site. Há também um monte de extensões populares muito agradáveis e eu também vou usá-lo dentro deste curso. Alguns dos outros recursos que estou usando no curso são policiais segurá-lo, o que lhe dá a capacidade de agradar imagens de espaço reservado dentro de seu site. E isso é ótimo quando você está projetando sites porque isso lhe dá a capacidade realmente adicionar conteúdo e torná-lo como um site normal faria com todo o conteúdo no lugar. Há também texto cego gerador ponto com e esta é a mesma coisa onde nós vamos estar adicionando em algum texto extra há espaço reservado texto e nos permite gerar Laura um ip terno texto S O. Este é apenas algum texto fictício que podemos utilizar dentro de nossa compilação quando estamos construindo nosso site e outro recurso algo para ser usado dentro deste curso. Então isso é glitchy glitchy dot com, e aqui é onde eu vou criar o quadro de arame para o site que eu vou estar construindo dentro do curso para que você possa usar qualquer software de edição s Oh, isso é apenas me dá a capacidade realmente facilmente tipo de esboço do que eu quero. O dedo do site olhar como e, em seguida, ser capaz de apresentá-lo em um J peg e, em seguida, podemos referir-se volta a ele como nós construir o site. E isso é sempre uma boa idéia quando você está construindo seu site para apenas esboçar algo fora e você tem uma idéia áspera de como você quer que seu dedo do pé do site se pareça e, em seguida, você construir para isso. Então eu vou estar usando isso para enquadramento de fio e você poderia usar uma série de outros recursos e incluindo Adobe Photo Shop. E há algumas aplicações de enquadramento de arame de arame também. Isso é realmente útil, e você pode realmente construí-lo rapidamente. Mas eu vou simplesmente construir um tipo muito caixa. Gostaria de linha do site que estou construindo e eso o cliffy ponto com vai ser suficiente para as necessidades deste curso é outra coisa que eu estou usando. Estou usando um navegador cromado do navegador. E a coisa realmente legal sobre o cromo é que temos acesso a ferramentas de desenvolvimento. Este é o cônsul que acabou de abrir. Eu estou em uma máquina de janelas para que eu possa abrir as ferramentas de desenvolvedor com a mudança de controle I ou eu posso ir no menu aqui clicado abrir as ferramentas de desenvolvedor. E o que as ferramentas do desenvolvedor fazem é dar a você a capacidade de dar uma olhada rápida no seu código HTML. Você também pode ver seu CSS. Temos o modelo da caixa aqui. Eso eu posso selecionar um elemento e eu posso ver algumas informações básicas do CSS. Eu posso ver onde estão as margens, e eu posso ter uma idéia melhor do que eu preciso ajustar se eu precisar fazer alguns ajustes . Então, outra ferramenta realmente útil é o cromo porque ele realmente tem um monte de recursos. E também, se você está desenvolvendo algum código javascript, você tem o cônsul aqui para que você possa comunicar entre si suas fontes, perfis de linha do tempo de rede e um monte de outras coisas aqui também, muito útil. Nós também temos acesso ao dom para que possamos ver todas essas propriedades estúpidas do amanhecer aqui taxa disponível dentro do navegador. Então nós definitivamente vamos usar isso e também outra ferramenta que eu vou estar usando . Mas não é realmente necessário para você se você quiser obter site Europa Up e funcionando e este vai ser Sam e Zampa essencialmente me permite executar no Apache Server na minha máquina local para que eu possa ir para o host local quando eu comecei e eu poderia realmente executar código PHP . Mas o curso será baseado em HTML e CSS, que só precisa de um navegador para ser executado. Mas eu gosto de Teoh, executar o host local para que eu possa realmente simular a forma como o site vai ser apresentado no eso domínio. Esta é também uma opção para ter que está em execução. Se você quiser fazer algum desenvolvimento, especialmente se você quiser adicionar alguns recursos PHP e recursos de banco de dados para o seu site e tentar que oito, então Zampa é definitivamente um de seus melhores recursos para começar a funcionar rapidamente. Eso e isso está disponível em todo o Windows, Linux e OS X e o site Apache amigos dot org e você pode descobrir mais algumas informações sobre Zampa relativamente fácil de configurar. Você pode apenas clicar para configurar e, em seguida, você pode configurar nos arquivos de configuração onde a origem do seu site onde seus arquivos de origem estão, a fim de executar o seu site ou você pode simplesmente baixá-lo para sua pasta padrão. Isso vai ser configurado na sua máquina quando você configurar Sam de novo, não é absolutamente necessário. Mas é um bom recurso em um bom dedo ferramenta tem quando você está fazendo o seu desenvolvimento. Então também, vamos começar com um modelo básico HTML cinco. Então nós temos um esboço básico aqui, tudo pronto para ir. Então nós temos nosso código HTML, nossa cabeça e corpo, e nós estamos ligando sobre um arquivo CSS de ponto de estilo que é logo aqui que eu tenho ambos abertos ambos os arquivos abertos agora, e nós vamos ser usados para desenvolver o site. Então tudo isso pronto para ir E na próxima lição, vamos começar a adicionar algum código e criar nosso site do zero. E, claro, os sites serão totalmente responsivos. Nós também vamos usar algumas botas cair, a fim de tornar nosso menu mais responsivo . Bootstrap fornece uma maneira fácil de fazer menus responsivos. E se você não está familiarizado com botas bootstrap, drop está disponível e obter bootstrap dot com. E o que bootstrap é este é, ah, framework que permite que você desenvolva rapidamente conteúdo da Web. Eso predominantemente. É essencialmente um arquivo CSS que permite criar sites totalmente responsivos apenas adicionando classes em seu HTML. E, em seguida, há também alguns componentes JavaScript e estes ar baseado em consulta J. E estas também são realmente úteis coisas regulares que estão adicionando em um site, e já está pré-configurado, então tudo que você tem a fazer é acessá-lo através de você precisa acessar em J query e as botas soltar arquivo JavaScript, e, em seguida, você tem acesso total a todos esses recursos, e tudo que você precisa fazer é colocá-lo dentro do seu HTML. Mas nós vamos apenas estar predominantemente olhando de botas. Drop utilizando o menu responsivo porque bootstrap fornece um componente muito agradável aqui para menus responsivos, e nós vamos estar utilizando com isso dentro deste curso também. Então vamos começar a codificar e criar nosso site 4. Planejamento de 4 sites: antes de começarmos a codificar nosso site. Vamos passar por cima e arame fosso livre, nosso site e rapidamente para cima. Faça um desenho rápido de como queremos a aparência do nosso site e como queremos apresentar o nosso conteúdo dentro do nosso site. Então, essencialmente, vamos criar várias áreas de contêiner de conteúdo e, em seguida, dentro dessas áreas, podemos adicionar nos diferentes pedaços de conteúdo. Então, primeiro, vamos criar uma seção de cabeça. Então, este é o lugar onde todo o nosso conteúdo de cabeçalho irá que vamos utilizar dentro do site. Em seguida, vamos criar uma barra de navegação e esta barra de navegação vai realmente se mover para que possamos ser capazes de colocá-lo dentro de nossa seção de cabeça e conter isso dentro de lá s para que possamos utilizá-lo para que não possamos criar um, mantém a seção da cabeça aqui, e depois adicione algumas peças aqui. Então talvez aqui pudéssemos ter o logotipo do ah. E então aqui em cima nós teríamos nossos botões de navegação para que pudéssemos fazer algo como esse vazamento Tipo de Veja isso tipicamente feito dentro de sites onde temos um esboço aqui e temos agora estão lá em cima e nosso local. Então, em seguida, precisamos ter, uma área onde queremos adicionar em algum conteúdo adicional que queremos exibir fora do nosso site. Então nós queremos fazer nosso site essencialmente um site de duas colunas e queremos que a página de índice inicial tem talvez uma imagem de abertura realmente grande aqui para realmente chamar aqueles a atenção dos usuários que estão vindo no reboque, acessar nosso site e, em seguida, vamos criar uma área de contêiner, e essa área de contêiner terá uma área de contêiner regular e uma barra lateral Então vai manter como uma peça lá como uma seção e, em seguida, criar algum conteúdo lá e outra área de conteúdo para uma barra lateral para mim que poderia ocupar toda aquela seção lá. Então nós criamos algo assim onde nós temos um contêiner lá e nós temos uma barra lateral aqui, e eu vou apenas mover isso para baixo para que ele esteja em linha com o outro e dar-lhe um pouco de envasamento seu espaçamento fora do local. E então, por último, o que cada site precisa? Então temos um cabeçalho. Temos nossa área de conteúdo e, por último, precisamos de uma seção de rodapé. Então isso vai atuar como nossa área de rodapé lá e podemos adicionar em todo o nosso pé ou conteúdo dentro de sua essencialmente, isso é o que queremos. Nosso site, layout básico do site parece que temos 1234 principais áreas de contêiner e, em seguida, nas páginas regulares, nós vamos apenas ter o cabeçalho que continha a área de conteúdo e o rodapé. Então não vamos manter esta parte de introdução aqui que estamos olhando dentro do centro e porque queremos um make, queremos fazer este site móvel pronto. Temos que criar uma versão móvel também. Então isso será para as telas de tamanho menor. Vamos comprimir a informação da cabeça. Então vamos mover a navegação para ser um daqueles menus clicáveis com três linhas. Então crie um desses e isso será feito através de bootstrap. Aqui, podemos manter nosso conteúdo, talvez nosso local e assim por diante. Nós vamos ter essas quatro áreas de contêiner, então nós vamos ter nossa imagem principal lá significa conteúdo lá apenas na página de índice. Então isso é apenas para a página de índice, e nós não vamos mantê-la em todas as nossas páginas. E, em seguida, estamos indo dedo do pé, dar estes cheio com através. Então nós temos nossa área de conteúdo principal em nossa barra lateral. Então eles vão empilhar um em cima do outro. Essencialmente, eles ainda vão estar em que um contêiner principal, mas então haverá dois contêineres dentro deles que vão ocupar tela cheia com. Então eu vou fazer um ajuste rápido sobre isso. Por isso, alinha-se e depois vamos ter outra lá dentro. E essencialmente o quê? Basicamente isso está parecendo que isso é apenas vai empilhar todos eles em deitado juntos e, em seguida , finalmente, o rodapé. Então, essencialmente, a nossa tela móvel vai ser uma versão compactada do que são uma parada de morte média vai parecer, então vamos ter essa mesma área aqui no topo e depois área de contêiner. Então nós vamos ter todas essas diferentes áreas de conteúdo também. Então aqui em cima nós vamos ter a nossa área de cabeça aqui vai ser a mesma que esta aqui. Esta vai ser a cena é esta e esta vai ser a mesma que aquela. E depois o rodapé na parte inferior. Então, quatro seções principais e estas vão empilhar uma em cima de outras, então ele vai realmente parecer cinco, mas vamos manter o conteúdo dentro dessas quatro áreas de conteúdo médio, então vamos começar a codificar. 5. 5 Estrutura de página HTML para construção: Vejamos nosso esboço básico do site que estamos tentando criar dentro deste curso. Então nós temos uma visão regular aqui no lado esquerdo e nossa visão móvel no lado direito não vai abrir o editor e começamos a criar nossa estrutura HTML a fim construir este site. E eu tenho minha prévia rápida aqui no lado direito. Então, inicialmente, você provavelmente não vai ver muita coisa saindo disso. HTML é que vamos essencialmente construir essa estrutura com os elementos foram para começar com um cabeçalho. Então esta vai ser a nossa área principal de cabeçalho, e nós vamos dar-lhe um nove i d de cabeçalho. Então isso é apenas no caso de decidirmos usar cabeçalho novamente s para que possamos identificá-lo dentro do nosso HTM dentro do nosso CSS e, em seguida, dentro deste cabeçalho, eu quero ter que separar seções. A primeira seção vai ser a área do logotipo, então isso vai ser apenas uma div regular, e eu vou dar-lhe um I d. de logotipo e nós apenas fechamos isso fora e talvez possamos colocar o nome da empresa ou algo assim . Eles são apenas para segurar a polícia e, em seguida, eu quero configurar a barra de navegação. Então este vai ser o nosso mal agora e dar-lhe um eu d de nab longe. E esse ar apenas maneiras que eu posso identificá-lo dentro do meu CSS. É por isso que lhes estou a dar ideias. Podemos ou não precisar deles conforme necessário, mas eu gosto de tê-lo dentro dos meus meios estrutura do meu site para ser capaz de identificar facilmente os diferentes elementos que estão disponíveis. Então, dentro da barra de valete, tipicamente quando estamos projetando menus de navegação, nós os fazemos como em listas ordenadas. E isso apresenta a lista fora itens de navegação realmente ordenadamente como itens de lista para que eu possa criar o meu primeiro 1 aqui. E este será um árbitro da igreja, e eu ia deixá-lo como um árbitro em branco agora. Ou talvez eu possa colocar um índice dot html para que tenhamos isso no lugar, fechá-lo e apenas digitar em casa, e eu vou apenas copiar e colar este eso tipicamente para sites, nós vamos ter talvez quatro itens diferentes aqui no menu. Então, o próximo que poderíamos fazer uma seção sobre mim, Então basta chamá-lo de um barco e vai criar uma página html sobre ponto depois que terminamos o modelo e fazer o nosso estilo. Isso é querer um anúncio nessas páginas adicionais, e a razão é que eu teria que eu tenho que planejar como eu estou anexando o CSS primeiro . E é por isso que eu vou fazer a cópia e colagem dessa estrutura HTML e as outras páginas no final depois que eu fiz o meu estilo. Então este poderia ser para produtos, e eu vou apenas chamar esta página produtos html e, em seguida,. Por fim, cada página da Web precisa ter um formulário de contato, então precisamos ter uma maneira Teoh se apossar do proprietário do site. Eles querem fazer um pedido ou algo assim para que tenhamos uma maneira de que o proprietário do site possa ser contatado. É assim que nosso site se parece agora. Não se parece exatamente com um site, mas vamos construir isso, e quando aplicarmos esse estilo, é realmente magicamente vai se unir. Então, a próxima coisa dentro do nosso plano quando olharmos para os nossos planos. Então nós temos as duas seções aqui que acabamos de criar. Criamos esta área local. Criamos a barra de valete, a área de navegação. Então é isso para a seção principal do nosso site. E a próxima é essa seção de tipo de mensagem de boas-vindas de introdução, área de contêiner e isso vamos fazer isso como apenas uma div. Poderíamos fazer isso como uma seção também, então talvez possamos fazer como uma seção ou uma div. E lembre-se, isso só estará presente quando estiver na página de introdução. Então eu vou dar-lhe um I d. e eu vou chamá-lo de bem-vindo para que possamos facilmente identificá-lo e bem-vindo ao meu site e nós não vamos exibir isso nas outras páginas. Vai estar na página de índice de novo. Próximo Eso. Nós demos uma olhada em uma área de contêiner para que possamos fazer isso como uma seção se quisermos ou podemos fazê-lo como uma div. E se você não está familiarizado com HTML cinco, o que aconteceu com HTML cinco Inicialmente, quando estávamos construindo sites, nós os chamaríamos nós criaríamos todos como dibs e daria a eles essas idéias como Header Barra de navegação e todos eles seriam dibs. E essencialmente eles ocupam esse bloco completo de código disponível. Mas o que aconteceu quando o HTML cinco apareceu é que eles decidiram reunir tudo e tê-lo dentro de uma área de contêiner. Então eu tenho isso como chamado semântica em vez de dibs. Então, faria mais sentido. Quando você está olhando para o código eso em vez de dibs, nós mudamos os cabeçalhos dos dedos dos pés, e eventualmente , agora, eles estão funcionando da mesma maneira que faria com dibs. Então eles são intercambiáveis. Mas as melhores práticas costumam ir com o HTML cinco elementos semânticos. Então este vai ser seção, e eu vou dar-lhe uma classe de contêiner e fechar isso fora. E então dentro desse contêiner, vou ter que separar seções. Então eu vou ter seção principal para o conteúdo, Então seção e eu vou dar a este uma classe de conteúdo. Chamá-lo principal ou algo assim, e, em seguida, ao lado dele eu tenho um lado e um lado é o elemento que usamos ou o tempo que usamos para menu lateral. Então isso seria apenas ao lado do menu ou da barra lateral. E talvez pudéssemos dar uma aula a este lado também. Então, basta dar-lhe uma classe de menu lateral eso que cuida da próxima seção. E, finalmente, o que precisamos fazer é criar um rodapé. Essa é uma das coisas quando você tem colchetes fazendo o auto fechamento das tags escreve um pouco mais rápido. Mas, às vezes, se você pressionar o fechamento dessa tag muito rápido , ela cria uma que você não está tentando criar. Então é isso que acabou de acontecer lá. Então eu tenho que dar este no i d de Rodapé e então aqui nós vamos colocar a taxa de cópia da empresa 2016 ou algo como pensamento, e nós podemos fazer o símbolo de direitos autorais. Então eu entrei. Então, agora vamos rápido. Dê uma olhada e veja como isso se parece. Então, quando eu atualizar a tela aqui, então essa é uma das coisas aqui com colchetes, bem como eu estou adicionando. E como eu estou adicionando em um atualizá-lo apenas atualizando a próxima parte, ele não está realmente atualizando o conteúdo. É por isso que acabei com uma linha inteira de peças repetidas. Então talvez eu precise adicionar algum conteúdo adicional aqui para que eu saiba que este é o conteúdo do menu lateral do site. Tenho navegação. Então eu tenho algumas informações de espaço reservado para cada peça para cada elemento. Para cada um dos meus principais elementos dentro do meu site eso estamos prontos para ir com o próximo passo e começar realmente a construir este site e apresentá-lo e fazer realmente parecia mais um site. E também há algumas coisas aqui que você deve ter notado que a parede está construindo estes fora, então começou com idéias. Tenho ideias aqui e tenho aulas. Então, se você está familiarizado com CSS do que você sabe que eu ds são para elementos únicos e classes são para elementos reutilizáveis e uma das classes aqui é O sempre que estamos usando bootstrap, ele já tem algumas classes pré-construídas dentro dele. Então eu usei classes aqui em baixo e eu uso este recipiente e esta é na verdade uma classe bootstrap, então já é uma classe pré-definida e botas drop. Então abra as botas caem aqui embaixo dos contêineres. Vemos que já temos um contêiner de classe. E, essencialmente, isso é o que nos permite criar um fixo responsivo com contêiner ligado. Então, dentro. Aqui é onde ele pode criar algumas linhas e colunas. E isso vai ser útil quando eu quiser empregar parte do meu conteúdo bootstrap dentro dessa área de conteúdo médio. E é por isso que eu dei a ele uma classe de contêiner e, claro, podem classes que podemos reutilizar quantas vezes quisermos. E isso é a mesma coisa aqui para o conteúdo. Porque se eu quiser ter várias seções, eu poderia querer ter diferente estilo de conteúdo, e eu poderia querer re usar esse estilo em diferentes partes do site s. Então, este é o lugar onde eu usei uma classe e, em seguida, também para o lado menu. Eu usei uma classe, Então estes eu ds eu sei que eu não quero reutilizar em nenhum outro lugar dentro do site, e é por isso que eu tenho colado eles como idéias porque eu pré defini-los e eu sou enviado. Estou configurando-os apenas como idéias, então eles só estarão em um elemento dentro da página, mas eu posso estar usando essas classes várias vezes, e é por isso que há a diferença. E então, é claro, porque eu vou adicionar bootstrap, eu estou usando algumas das classes de bootstrap pré-definidas. Então, na próxima lição, vamos adicionar em bootstrap e vamos adicionar alguns ajustes adicionais para este conteúdo do site , a fim de apresentá-lo um pouco mais, melhor torná-lo mais parecido com uma página da Web real. Então vamos jogar algum conteúdo de espaço reservado lá dentro. Isso está chegando no próximo conjunto de lições. 6. 6 adicionando Bootstrap a um site: na última lição que eu mencionei que eu adicionei em uma classe aqui, e esta é uma classe de queda de botas. Então vamos em frente e adicionar botas. Entre em nosso site e o bom da queda de botas é que ele nos permite criar nossos sites mais rapidamente. Portanto, ele cuida de muito do levantamento que normalmente temos que fazer dentro do nosso processo de design do site . E simplesmente simplifica que nos permite desenvolver nossos sites de forma mais rápida e rápida e o que usaremos dentro de bootstraps. Então vamos usar seu arquivo CSS. E essencialmente, Bootstrap é um arquivo Siris CSS e JavaScript, e temos a nossa opção aqui. link do Toe para o decadente CD End encerra nossos arquivos acessíveis na Web que devem ser compartilhados e trazer essas bibliotecas rapidamente para seus projetos da Web. Você também pode baixá-lo e vinculá-lo ao seu site localmente, também carregando os arquivos com o restante de seus arquivos da Web, haja algumas opções quando você deseja configurar a queda de inicialização. Mas geralmente a maneira mais rápida é apenas pegar o link, e há alguns benefícios para realmente entrar na versão Cdn, porque se outros sites estão usando também, se ele fica em cache dentro do seu navegador, você terá um tempo de carregamento mais rápido, e já está usando essa versão masculina. Então estas são as vantagens de usar um cdn e então, é claro, que você não precisa passar pelo problema de baixar e trazê-lo sobre a mesma pasta de arquivos. Então um pouco mais rápido, mas até o dia os efeitos são a mesma coisa. E quando você estiver adicionando em seu arquivo CSS bootstrap, observe que eu o coloquei acima do meu arquivo CSS normal. E isso me dá a capacidade de que se eu quiser realmente personalizar alguns dos meus CSS e sobrescrever algumas das botas cair CSS. Eu poderia fazer isso no meu arquivo CSS. Há um monte de vezes se você colocá-lo à frente dele e, inadvertidamente, talvez use alguns dos CSS bootstrap bem, isso vai sobrescrever seu CSS, e isso pode deixá-lo coçando sua cabeça. Então, a melhor prática é sempre colocar as bibliotecas que você deseja usar primeiro e depois seu arquivo CSS de personalização, então agora que eu tenho isso no lugar, isso vai me permitir construir este site mais rápido. E o bom do Bootstrap é que isso é tudo móvel e responsivo. S um móvel, pronto e totalmente responsivo. Tem um monte de componentes realmente necessários. Então, agora que eu salvei e se eu atualizá-lo bem, nós realmente não vemos muita diferença aqui dentro do site porque eu não acho que recipiente realmente tem um monte de CSS styling dentro. É Oh, é por isso que não há muito dentro dele, mas é mais sobre construir a estrutura do seu site e prepará-lo para o resto da biblioteca bootstrap e as botas cai CSS para ser implementado e adicionado ao seu site. E vamos usar isso se estivermos ouvindo sobre produtos onde podemos facilmente usar o dedo do sistema de grade bootstrap. Layout uma lista de produtos dentro do nosso site realmente facilmente, Então essa é uma das vantagens, bem como de usar o sistema de queda de botas. Basicamente, o que é feito é ligeiramente recuado. Ele criou um pouco de estofamento por lá, e se formos por aqui, podemos ver que não há muita diferença. Mas podemos ver que este conteúdo foi agora introduzido. Então, se eu fizer, vá em frente. Se eu inspecioná-lo, podemos ver que temos um máximo com o conteúdo está centrado, as informações do contêiner são centradas. Então isso está preparando nosso site para ser bootstrap, pronto. E porque agora que adicionamos neste contêiner, o resto do nosso conteúdo ainda está alinhado. Então, o que queremos fazer agora é adicionado no contêiner nas outras seções do nosso site para que eles se alinhem da mesma maneira que este fez. Então é aqui que trazemos este recipiente e podemos adicioná-lo em nossa seção de cabeçalho e podemos adicioná-lo em nossa mensagem de boas-vindas e podemos adicioná-lo em nosso rodapé. Então agora vamos dar uma olhada no nosso site e agora ele deve ser centrado. Todo o conteúdo deve ser centrado e adequado, o revestimento mais uma vez. Então estamos prontos para construir o resto do nosso site. Temos todos os componentes de bootstrap dela funcionando e configurados. E apenas uma outra nota que se alguma vez queremos remover o recipiente, talvez quem queria que seu rodapé para ir todo o caminho através enfraquecer realmente facilmente fazer isso removendo essa classe e, em seguida, podemos criar nossa própria classe e atualizar nosso site em conformidade . Então talvez eu vou deixá-lo lá em cima porque talvez nós queremos que nosso rodapé seja sempre 100% na parte inferior da nossa página e nós podemos até querer a mesma coisa para um cabeçalho. Eso Nós poderíamos fazer um recipiente fluido bem, por isso é algumas opções diferentes aqui quando se trata de bootstrap e construção em nosso site . 7. 7 Como adicionar conteúdo de espaço reservado: nesta lição. Eu quero atualizar e adicionar algum conteúdo fictício para realmente tornar nosso site e nós somos apresentáveis e parecer mais um site. Então vamos primeiro para gerador de texto fictício ou gerador de texto cego. E esta é uma ótima maneira de adicionar em algum suporte de texto fictício. Talvez eu faça três parágrafos. Vou incluir as etiquetas de parágrafo e copiá-las para a área de transferência. Abra meu projeto, e então eu vou adicionar isso. Na verdade, antes de adicionar isso, vou atualizar e adicionar minhas tags H duas. Então, quando eu adicioná-lo depois desta seção porque este é o conteúdo que eu quero se destacar como hde dois e, em seguida, o resto vai ser apenas estes parágrafos fictícios dois pedaços de conteúdo. E também quero adicionar algum conteúdo no dedo do pé da barra lateral. Na verdade, faça parecer que temos algo lá dentro. Então está pensando que talvez pudéssemos adicionar algum padrão, adicionar imagens e naqueles em Então é abrir nosso lugar, segurar texto e adicionar algumas imagens dessa maneira. E aqui nós temos um tamanho padrão de 350 por 150 então eu vou pegar isso e eu vou colocá-lo no meu menu lateral. Então nós vamos adicionar em algum parágrafo e fazer atualizar isso para ser 50 e apenas chamá-lo. Chamá-lo acrescenta ou algo assim e apenas fazer um segundo 1 Então isso vai nos dar a capacidade Teoh tem espaços reservados para um par de imagens dentro do nosso site, e eu vou adicionar em uma quebra de linha lá também. Só que não estavam na mesma linha. Então agora, quando eu atualizá-lo, eu tenho essencialmente um site com algum conteúdo aqui. Então eu tenho minhas informações de cabeça, minha barra de navegação, que nós vamos atualizar com CSS realmente apresentado como uma barra de navegação e, em seguida, nossa área de conteúdo e nosso menu lateral. E depois, é claro, o nosso talento. Então, o próximo conjunto de lições que vamos começar a adicionar em nosso CSS e começou a fazer isso realmente parecer o site que estamos parecendo que nós fomos originalmente projetados dentro de nosso enquadramento de fio aqui do nosso site. Então tudo isso está chegando no próximo conjunto de lições 8. 9 Adicionando estilo padrão: nesta lição, vamos aplicar CSS para apresentar nosso site mais parecido com a aparência do nosso design original . Então eu vou voltar e voltar para me demitir rapidamente para ver isso. E agora vamos abrir nosso editor e eu vou encolher essa parte HTML e criar o CSS maior. E eu também vou atualizar os temas aqui para atualizar este tamanho para torná-lo um pouco menor que possamos obter uma visão geral melhor do nosso casaco fonte que vamos usar para criar este site porque nós vamos precisar nos referir de volta para as diferentes seções de elementos que temos vindo a construir para o nosso site. Então a primeira coisa que fazemos, geralmente com CSS eu gosto de começar com as maiores tags primeiro, e o primeiro 1 que encontramos é o tipo de corpo. Então é aqui que todo o nosso conteúdo é mantido e esta é a nossa principal área corporal. Então eu vou apenas configurar algo aqui dentro CSS para o corpo. E aqui é onde se tivéssemos uma cor de fundo particular, poderíamos adicionar isso em cinco uma cor de fundo e eu vou usar uma escala de cinza Leo agora por causa do fato de que eu não tenho meu esquema de cores um escolhido ainda. É aqui que vou usar a escala cinzenta. E vemos que tudo isso é apresentado em grande escala eso agora descendo para nossas principais áreas de contêiner para que possamos realmente atualizar alguns desse estilo para contêiner também. Então isso é para o contêiner da classe. E há algum estilo padrão já no bootstrap para ele. E eu simplesmente abro bootstrap muito rapidamente. Então, este é um bootstrap arquivos CSS. Não é a versão masculina. Então, aqui realmente é onde você pode realmente ver o frio real colocado para fora. A versão masculina está com ele em branco. É um pouco mais difícil de ver, então vemos que o recipiente tem tamanhos diferentes, dependendo de então ele tem esses tamanhos presets e bootstrap Isso tem o nosso preenchimento. Sua margem deixou margem moderada, direita automática. E isso é o que está centrando. E depois temos estas 15 picaretas de estofamento. Então, notamos originalmente quando adicionamos no recipiente dentro desses elementos, vimos que obtivemos isso em amassar esse conteúdo e vimos que também estava centrado. E tudo isso vem de bootstraps. É só por aqui. E outra coisa aqui sobre Bootstrap é que nós temos os tamanhos diferentes. Então nós temos para homens com tamanhos, essas botas caem é móvel. Primeiro a pensar. É onde eles são usados na inteligência masculina. Mas nós provavelmente vamos estar usando o máximo de inteligência dentro do nosso site porque foram realmente projetando a partir da versão desktop para baixo. Então essas são as duas maneiras diferentes de projetar. Você poderia ter relativamente a mesma idéia. Eu só com os homens com você definindo como o contêiner vai ser, dependendo do tamanho da tela. Então, se é maior, se passou os 76 dentes e este é o tamanho, se é com um minuto com de 1200 então este é o tamanho máximo os recipientes vão ficar de fora eso qualquer coisa maior que 1200 ele vai ter um recipiente com 11 70 e a mesma coisa vale para esses pontos de quebra. Isso é para que tenhamos uma idéia melhor do conteúdo que está disponível dentro do bootstrap, e eu poderia realmente ir em frente, e eu vou fechar esse arquivo bootstrap e voltar para o nosso CSS regular A porque eu só quero mostrar rapidamente o que está contido no bootstrap, e nós realmente não precisamos sobrescrever nenhum deles. Vou definir a cor de fundo, e vou usar o branco. Então, agora, quando eu atualizá-lo, nós temos nossas principais áreas de contêiner e vemos que nós temos ah, esperar fundo para o texto também. Outra coisa que eu geralmente gosto de fazer para definir esses padrões. Então, no corpo, eu também gosto de definir meus hiperlinks e eu não tenho nenhum hiperlink. Então eu deveria adicionar alguns em hiperlinks Esso ou uma dessas coisas para isso. É muito bom para definir estes dentro do seu CSS, porque isso realmente dá a você uma aparência diferente do seu site. Então eu vou apenas criar mais alguns, e eu vou dizer como podemos fazer eles se destacarem. Então, por padrão, porque nós anexamos botas cair, nós já temos um pouco de estilo aqui onde nós não temos nossa decoração. Só aparece sempre que pairamos sobre ele. Então, tudo isso vem daqui do bootstrap quando eu removo isso, vemos que temos esses sublinhados. E eu geralmente gosto de adicionar isso em apenas um duplo para ter certeza de que não temos qualquer decoração de texto e podemos definir nossas cores para que não tenhamos esses azul padrão com o subjacente em todo o nosso texto. Eu gosto de fazer decoração de texto Nenhum. E isso também está sendo trazido de Bootstrap. E é aqui que podemos definir uma cor agradável que queremos utilizar eso. Talvez eu vá dividir o azul escuro lá e eu vou trazer este bootstrap arquivado de volta. Assim é. Já está lá dentro. Ele já tem alguma coloração predefinida para isso. Mas eu só queria ter certeza de que se alguma vez não estamos usando botas cair, no entanto, que nós já estamos definindo isso. Então é sempre uma boa prática para entrar. Então, mesmo que as botas caíram tem que é sempre uma boa idéia que nós dissemos isso também. E também tem o pairar lá. Dois viram o que estava pairando sobre ele. Está mudando de cor. Sameh, vai escolher um tipo aleatório de cor azulada então quando eu atualizar, é então agora eu tenho a mesma coisa que Boots Drop estava fazendo. Mas eu acabei de adicionar aqui nós também podemos definir o fundo do contêiner e agora podemos começar a construir o resto do nosso conteúdo s. Vamos começar com a barra de navegação primeiro porque isso está bem aqui no topo. Então você começa dentro da seção da cabeça. Eu vou fazer todas as nossas atualizações para a seção principal, atualizar o logotipo e, em seguida, trabalhar no agora longe. Então, isso está chegando. Próximo conjunto de lições. 9. Seção de slogan de logotipo de atualização 10: para nos ajudar com nosso layout de design. Vou acrescentar um estilo aqui. Então este será apenas um estilo de borda rápido para que possamos realmente ver onde todo o nosso conteúdo principal e nossos contêineres estão sentados. Eso, porque eu vou estar trabalhando nisso. Vou adicioná-lo lá. Posso adicioná-lo lá. Posso adicioná-lo lá e assim por diante. Então isso quebra nosso conteúdo e nos permite vê-lo um pouco melhor. E eu também vou adicioná-lo em Teoh cada uma dessas idéias aqui que nós vamos trabalhar com. Então, é uma borda de uma escolha que adicionamos. E isso nos dá uma idéia melhor de como esse conteúdo está sendo exibido. Um fora-da-lei saída Eso nós queremos. Idealmente, queremos uma ruptura. Não vai dividir isso em duas colunas. Eso Nós vamos apenas fazer isso dentro de uma maneira padrão onde nós vamos selecionar Então nós fazemos eleições. Vamos fazer cabeçalho usando esse cabeçalho I d e selecionar local dentro dele ou podemos simplesmente selecionar local e inchar. Talvez nós vamos apenas mantê-lo em que é O porque nós usamos idéias lá. Então nós temos a capacidade de fazer ter bar e nós poderíamos ter feito isso tão facilmente como Cabeçalho do Pai e depois o Div e o Valete também. Então, de qualquer maneira, poderíamos fazer a mesma coisa, alcançar o mesmo resultado aqui. Então vamos flutuar este para a esquerda e eu vou dar-lhe um com para que o local olhando para aproximadamente a inteligência que precisamos para ele. Então talvez possamos fazer algo como um 40% com, e então este vai flutuar. Podemos flutuá-lo para a direita ou podemos flutuá-lo para a esquerda, então realmente não importa, porque nós vamos estar ocupando o total disponível 100%. Então, vamos apenas mantê-lo flutuado para a esquerda. E então lá vamos nós. Então agora temos nossa barra de navegação aqui. Quando atualizamos, é assim que temos a nossa barra de navegação está pronta para ir. Nós temos um logotipo da empresa, então cada um ocupando sua porcentagem correta e então quando nós realmente diminuímos assim nós vamos recolher o menu e fazer um menu suspenso. Então vamos voltar para o logotipo aqui e nós vamos atualizar alguns do texto lá que está disponível. Eso queremos fazer talvez o texto alinhar e puxamos este texto para o lado esquerdo e talvez também remover. Ou podemos adicionar uma margem, se quisermos. Então, se nós não queremos que ele fique sentado diretamente sobre o lado esquerdo, nós podemos adicionar um pouco de uma margem lá de 10 picaretas. Mas então teríamos que ajustar o com. Então vamos por agora. Vamos manter a margem em zero apenas para garantir que estamos flutuando corretamente. Então margem zero e com zero não precisamos especificar picaretas. Podemos fazer assim. Também podemos atualizar nossa cor de falha, então vamos atualizar isso também. Então a cor e ia fazer preto. Ou talvez você possa adicionar um pouco de cor. Eu sei que eu disse, vai concordar escala, mas vamos adicionar um pouco de cor lá também, e nós também podemos ajustar o tamanho da fonte e lutou família, é claro. Então, talvez vamos torná-lo tão 1.5 PM para torná-lo um pouco melhor, um pouco maior lá para se destacar. Então lá nós temos o nome da nossa empresa e nós também podemos adicionar em outra linha adicional lá para querer torná-lo pequeno. Então, se quiséssemos fazer isso dessa maneira, talvez pudéssemos ter um outro contêiner ali à esquerda e adicionar um pequeno slogan ou algo assim embaixo do eso Isso é algo que podemos adicionar também. Comida eso. Vamos apenas ter isso lá dentro. Então eu vou criar outra definição aqui, e eu estou apenas pensando que provavelmente a melhor maneira de fazer isso seria assim. E nós poderíamos fazer pequeno para que isso pudesse ser para um slogan da empresa tornando-o menor. E então precisamos fazer alguns ajustes. Então vamos puxar esse para fora e fazer logotipo com uma criança de def vai ser isso e nós podemos fazer logotipo com uma criança de pequeno, e aqui nós podemos ajustar a cor, então talvez nós queremos ficar com algo que é fora da cor coral vermelho. E aqui podemos ajustar o tamanho da fonte também. Então 0,8 e mais uma coisa que eu vou adicionar aqui também. Então o texto transforme. O que a transformação de texto faz é que, se quisermos tornar tudo maiúsculo, transformará todo o texto em maiúsculas. Talvez seja uma boa maneira de apresentar o nome da nossa empresa. Isso é sempre maiúsculo. Então, a próxima lição vamos olhar para atualizar esta barra agora e transformar isso uma lista Norden em uma barra de navegação, então ele está chegando na próxima lição. 10. 11 Criar uma barra Navbar com elemento ativo: nesta lição, vamos olhar para transformar nossa barra de navegação em algo que se parece mais com uma barra de navegação. Então, já definimos a área principal do contêiner. Nós o trouxemos, então ele está flutuando para a esquerda e está ocupando 60% do espaço disponível. Então vamos atualizar isso na lista ordenada dentro da barra NAV, então selecione agora longe e onde ele vai selecionar a uma lista ordenada e aplicar propriedades à sua e nós também vamos fazer agora barra. E vamos fazer nossa lista de itens que estão lá e aplicar algumas propriedades lá para transformar esses elementos diferentes. Então, normalmente com portas de navegação, você não as tem listadas aqui como horizontalmente. Eles são mais eles não estão listados verticalmente, mas há horizontalmente listados para que possamos cuidar disso com a propriedade display. E nós vamos apenas no bloco de linha. E assim que entramos na fila, você vê que ela já se transforma e já entra em linha. Eso Isso nos dá a capacidade de alinhar estes como em linhas, e podemos adicionar em algumas margens, bem em torno dos diferentes elementos. Então, se você quiser alguma coisa, algum espaçamento na palestra, podemos adicionar cinco escolhas e ou se o quê? Espaçamento para a esquerda e para a direita, podemos adicionar cinco picaretas dessa maneira. Então espaçamento à esquerda, espaçamento à direita de cinco picaretas. Outra coisa com a barra de navegação é geralmente quando você está pairando sobre elas, você vê as cores mudando, e talvez você tenha algum bloco de cores em torno dela. Então, podemos cuidar disso também. Então, dentro de agora , bar, podemos ver selecionar todos os hiperlinks e podemos adicionar em algumas propriedades aqui. E eu ia criar um espaçamento adicional aqui em baixo. Então não estamos sentados aqui no fundo. Toda vez que eu digo isso, é ah, ele está realmente movendo-o para baixo. Então é por isso que eu acabei de adicionar que espaçamento rápido em Há s então este é o lugar onde podemos fazer usar, exibir e exibir como bloco. Então isso nos permite pegar todo aquele bloco de espaço disponível. Nós também queremos se livrar da decoração de texto inteiramente assim decoração de texto, e nós teríamos certeza que ele não tem nenhum, mas também quando passarmos sobre ele vamos nos livrar de, É eu vou te mostrar como fazer isso também. E nós também vamos adicionar em uma cor a ele nós podemos fazer uma cor de fundo em inchar eso Talvez para este, nós podemos fazer uma cor clara e nós poderíamos fazer cor de fundo de preto para que possamos ver que é o que vai haver uma diferença entre adicionando nossas cores de fundo lá e as cores de linha de trás lá. Embora sempre que estamos olhando para isso, nós não vemos imediatamente uma diferença. Mas quando aplicarmos esse pairando, veremos uma diferença maior entre o quê? Estamos adicionando-o dentro do item ou dentro do item da lista. Então, às vezes você vê isso adicionado com o item da lista. Eu geralmente gosto de adicioná-lo no último elemento do pai. Eu também vou adicionar em alguns potting aqui, alguns pensando provavelmente sobre quatro picaretas de potting s para que eles se pareçam mais como clique caixas clicáveis de futebol. E é aqui que esse pseudo elemento vem na magia de sempre que passarmos o mouse, podemos adicionar um estilo de pairar nele. Então vamos em frente e para isso. E é aqui que eu quero atualizar a cor de fundo. Então, geralmente eu gosto de fazer um contraste completo, então até mesmo ir com uma cor preta e, em seguida, fazer fundo fazer um fundo mais claro. Então vamos fazer algo como vermelho. Então ele realmente aparece agora sempre que eu pairo sobre ele e talvez até um pouco mais de preenchimento. E então este é o espaçamento aqui está sendo criado pela margem. Então, se você quiser, se você não gosta de muito espaçamento entre as caixas, você sempre pode reduzir isso ou você pode reduzi-lo todo o caminho para zero. Assim, você poderia reduzir o espaçamento completamente e seus olhos realmente algum espaçamento padrão sentado dentro dos itens da lista também. Então eu vou cuidar disso. E então eu sou a lista ordenada. Nós já temos algum espaçamento padrão eso que vemos quando fazemos na linha em que, perdemos o estilo de lista eso o estilo de lista é que o disco que vimos. Então, queremos mudar isso para nenhum. Então, só para mostrar a diferença aqui, sempre que colocamos isso no bloco de linha, vemos que temos esses quadrados lá, então queremos finalmente nos livrar disso novamente, apenas para mostrar que sempre que não fazemos nada, que isso realmente desaparece. Então vamos atualizar isso de volta para nenhum. Então isso desaparece só para garantir que não temos nada lá. E com uma nova lista ordenada, temos espaçamento padrão lá. Então nós temos que nos livrar do preenchimento a zero e da margem a zero, apenas para ter certeza de que não temos nenhum padrão que está atrasando lá, e pode haver causando alguns problemas lá. Então, agora, se eu fosse mudar este para baixo para zero, nós vemos que está alinhando lá para o lado esquerdo, então ele está alinhando um pouco melhor. Mas eu gosto de ter um pouco de espaçamento entre os botões, então talvez vamos até mantê-lo em dois e um último que devemos cuidar também, quando outro pseudo elemento que devemos cuidar. E isso é sempre que o site é, então temos que pairar, mas também queremos ter um onde ele é proativo porque queremos ser capazes de identificar o que quer que os ativos são, então podemos fazê-lo desta forma, onde podemos acalmar um separado mas também queremos ter um onde ele é proativo porque queremos ser capazes de identificaro que quer que os ativos são, então podemos fazê-lo desta forma, onde podemos acalmar um separado e adicione os ativos. Dessa forma, talvez isso seja mais fácil, agora podemos adicionar em uma classe aqui e chamá-la ativa para que saibamos que estamos sempre em nossa página inicial. Vamos refrescar isso. E, na verdade, este deve ser um ativo. Não é um pseudo eso dessa maneira. Esse está ativo e sempre que passamos o mouse sobre eles, eles se tornam ativos s. Então isso significa que podemos clicar neles. Então, a próxima lição vamos continuar a construir nosso site e realmente atualizar a aparência e a sensação de nossa área de conteúdo. Então está chegando na próxima seção. 11. Mensagem de boas-vindas da página de 12 índice: nesta lição. Vamos continuar a atualizar o nosso site e vamos criar esse slogan de boas vindas , Área s. Eu estou apenas olhando para a nossa barra de navegação e geralmente você vê a soneca são puxados para o lado direito . Este é um conserto muito fácil. Vamos apenas fazer um texto, a linha, e nós apenas puxá-lo para o lado direito. Isso nos dá a capacidade de ver nosso menu de navegação puxado para o lado direito . Ainda estamos ocupando o espaçamento apropriado e tudo para os sites. Quando o atualizo, vemos que ainda temos 40 60%. Temos todo o menu principal aqui, e claro, vamos remover essas linhas. Alguns também podem fazer isso agora porque isso não é realmente parte do nosso projeto principal. Isso foi apenas enquanto estávamos fazendo nossa configuração inicial do site. Algo deu errado lá, então eu saí na quadra extra lá. Vamos refrescá-lo novamente. Queremos que nosso site pareça até onde podemos ver, ele é responsivo, e vamos estar cuidando dessa parte responsiva do site à medida que progredimos através do curso também. Mas, por enquanto, estamos apenas construindo, e queremos que ele pareça apresentável dentro do nosso design atual. Então vamos em frente e olhar para o recipiente principal que área de boas-vindas. Então, idealmente, queremos ter algo que é bastante grande, e com bootstrap, há realmente uma opção com ele. À medida que vamos para bootstrap, temos um básico, alguns estilos CSS básicos e componentes que podemos usar dentro de botas cair e eles podem realmente realizar algum disso. Então nós temos o que é chamado de componentes, e nós temos um chamado Jumbotron. Eso este listado apresenta-o, como normalmente gostaríamos, talvez uma tela de boas-vindas entrando em nosso site sobre isso, e quero dizer, isso é provavelmente realmente ideal para a maneira que queremos apresentá-lo. Podemos ir em frente e copiar um Jumbotron. Poderíamos aparecer no nosso site, e esse contêiner de boas-vindas pode se tornar um Jumbotron, e vou te mostrar como isso vai ser agora. Então, quando eu atualizá-lo, nós temos as boas-vindas ao site e ele está contido dentro de um Jumbotron e então nós só precisamos aplicar esse estilo. Então vamos em frente e adicionar espaço lá. Seja bem-vindo ao site e então teremos outro parágrafo lá. Satisfeito. Olhe em volta, Julie. Então vamos voltar para o Jumbotron e vemos que tipicamente eles têm um H um para aquele mundo Hello. Talvez devêssemos atualizar isso para H1. Embora o que Normalmente eu estou hesitante em usar H. Eu gosto do dedo do pé em vez de usar h dois. Então talvez pudéssemos ficar com um H dois sobre isso é porque geralmente eu reservar H para o título do site e isso é mais para fins de S e o. Eso Isto é algo que talvez possamos até mesmo ajustar com o nosso estilo e poderíamos ter o conteúdo sobre o site como seu principal h um ou H dois e, em seguida, desta forma, poderíamos mantê-lo consistente porque nós não vamos estar reutilizando Thies esta página de boas-vindas principal em quaisquer outras páginas da Web. Então isso é apenas para a página de índice eso Isso é algo a considerar quando você está fazendo o seu design, como você quer usar suas tags de cabeçalho para que cada um e h dois. Então, tipicamente, a maneira que eu gostaria de fazer é que eu gostaria de manter este e um este em cada um para porque este é apenas um bem-vindo. Mas ainda mais, idealmente, vou criar um div. E então dessa forma eu posso fazer algumas características para com a classe para que eu possa configurar uma classe e eu posso chamá-la de algo como cabeçalho de boas-vindas e, em seguida, ir até aqui e abrir meu CSS. E daqui, eu posso definir o tamanho diferente do texto que eu quero. Então eu tenho minhas opções para o alinhamento de texto, então eu também posso fazer o tamanho lutado. E talvez eu faça apenas 1.6 p. M. Ou talvez possamos fazer ainda maior então duas PM e muito em alguns vasos lá. Dê uma olhada rápida nisso e veja como isso está saindo. o Isto não está a alinhar bem comomeu parágrafo. Então talvez eu queira olhar Teoh mesmo adicionando e personalizando isso por causa do Jumbotron, ele está realmente adicionando algum estilo nesses parágrafos, então podemos ou não querer lembrar. Fique com isso ou podemos remover isso. Então isso depende de como queremos apresentar nosso estilo. Então, o Jumbotron, temos algum estilo padrão para parágrafos. Eso Idealmente, talvez queiramos ter parágrafos adicionais também, ou queremos apenas substituir o estilo que está disponível dentro da selva. O Tron. E nós queremos atualizar esse estilo de parágrafo para ser diferente tamanho lutado. Então talvez possamos reduzir para 13h ou até menor. Talvez queiramos que este dedo pareça menor. Talvez queiramos que este dedo pareça menor. E, na verdade, eu só estou pensando que provavelmente é melhor apenas personalizar isso, e nós já temos um I d. de boas-vindas. Vamos apenas personalizar totalmente isso e adicionar em nosso próprio estilo em torno desta tela de boas-vindas. Então aqui eu tenho meu parágrafo de boas-vindas e eu tenho meu cabeçalho de boas-vindas lá, e nós podemos sair em alguns potting em torno de lá e até mesmo adicionar na margem alguma margem esquerda, então ele é sempre puxado em pelo menos 15 picaretas. Vamos nos mudar do resto do conteúdo, talvez até torná-lo um pouco maior, e então podemos adicionar um pouco de estilo para boas-vindas também Então vamos adicionar um pouco de preenchimento padrão . Então preenchimento no topo e vai fazer 30 picaretas acreditar que isso é o que Jumbotron tem. Tem batendo no fundo, e tem 30 picaretas para cima e para baixo, então provavelmente há uma maneira mais curta de fazer isso. Então, superior e inferior são 30 picaretas. Ele também tem uma margem na parte inferior e provavelmente coisas 30 escolher margem na parte inferior. Podemos fazer uma cor de fundo, então isso é para que ele se destaca um pouco mais e vamos também adicionar em um raio de borda. Então vamos virar as esquinas. Então fronteira Radius e eles fariam algo como 15 escolhas. Então agora é uma borda mais arredondada, e eu realmente vou me livrar deste, então ele se destaca um pouco mais. Eso essencialmente, esta é a nossa mensagem de boas-vindas, e talvez até queiramos movê-la para baixo do topo para que não façamos talvez uma margem no topo também. Então, basta falar de margem e trazê-lo a zero. Então vamos dar uma olhada em nossa outra página da Web aqui, e notamos que ele está sendo puxado para o lado esquerdo eso O problema é que eso temos o contêiner lá, mas porque estamos substituindo as margens que normalmente teria ocorrido com recipiente dentro do i. D. Então isso está causando um problema aqui. Eso vamos criar outra definição e nós apenas colocar que fez dentro daquele recipiente. Então isso deve corrigir o problema que tivemos puxando para o lado esquerdo. E isso foi novamente dentro do bootstrap styling eso que estava puxando para o lado esquerdo . Então vamos dar uma olhada rápida. E então esta era a área de contêiner. E na próxima seção, temos que criar uma seção de duas colunas aqui para o exército e conteúdo, então isso está chegando na próxima lição. 12. 14 Crie uma área de conteúdo de duas colunas: nesta seção, vamos analisar a atualização de nossas principais áreas de conteúdo. Portanto, permaneça recipiente que tem todo o nosso conteúdo dentro. É assim que nós temos isso delineado agora. Então, quando você olha para aqui, nós temos um esboço dele, e talvez eu vou adicionar em é contornos para separar seções de classe que nós temos que vamos estar trabalhando com para que possamos ter uma idéia melhor do que estamos apresentando e como queremos apresentar esse conteúdo. Então nós temos um e dois, e o que idealmente quero fazer é eu quero puxar o conteúdo do lado esquerdo e eu quero colocar este menu lateral no lado direito. Então vamos fazer a mesma coisa que fizemos aqui dentro da seção da cabeça onde temos as duas seções e podemos flutuá-las para a esquerda e, em seguida, também podemos flutuar para a direita também. A barra lateral. Então vamos dar uma olhada nisso. E temos o nosso conteúdo principal lá. Eso Este é flutuado para o lado esquerdo e então nós temos que descobrir o que com nós queríamos tomar para cima. Hoje queremos ocupar 60%. Então vamos fazer o oposto do que temos lá em cima. E, em seguida, vamos fazer o mesmo para o menu lateral, e vamos flutuar para o ritmo desta vez. E desta vez só vai ocupar 40%. Então vamos dar uma olhada nisso e ver como isso está acontecendo. Então agora, quando estamos encolhendo o seu e temos tudo isso ocupando o espaçamento adequado. E uma coisa que eu estou percebendo é que nossas imagens não são responsivas. Então isso não é fácil de consertar. Sempre que queremos tornar nossas imagens responsivas, fazemos Max com. E o que Max faz é que se tivermos menos do que o máximo com espaçamento disponível, ele o cria a 100%. Então essas imagens de ar para 50. Mas quando ficamos sem o espaçamento para os 2 50, então ele leva como 100%. Mas isso torna as imagens responsivas. Apenas por que uma linha adicional de tribunal para que você possa ver seus anúncios estavam re dimensionando. Está se tornando responsivo. Aquelas imagens. Então vamos voltar para aqui e ver o que mais queremos adicionar em Esso. Talvez dentro da barra lateral. Uma das coisas aqui é que notamos que está pulando para o lado direito. Eso Idealmente, podemos querer adicionar em apenas um toque de algum preenchimento para talvez cinco picaretas de preenchimento para que nós realmente obter algum espaçamento entre as bordas lá. E nós também provavelmente queremos fazer a mesma coisa para o nosso conteúdo s, hum talvez nós até queiramos fazer algum preenchimento por lá, e tudo isso depende de como estamos apresentando nosso conteúdo. Eso geralmente com a barra lateral, eles fariam uma cor de fundo apenas para diferenciá-lo, eles fariam uma cor de fundo apenas para diferenciá-lo, para torná-lo ligeiramente diferente de nossa área de conteúdo principal para que desta forma, o conteúdo se destaca ainda mais do que a barra lateral também Por aqui. Podemos centralizar qualquer outro texto ou pode centralizar as imagens se quisermos fazer isso. Eso que também está disponível, ou podemos deixá-los flutuar para o lado esquerdo. Portanto, isso depende de como queremos apresentar esse conteúdo. Você pode ir em frente e se livrar desse esboço lá. E agora, quando o atualizarmos, temos nosso site de duas colunas pronto para ir e perceber que ainda temos que cuidar do pé ou do conteúdo, então isso está chegando na próxima lição. 13. 15 Criar elemento de rodapé: Então, nosso rodapé é identificado com o I D Rodapé, então isso torna muito fácil acessá-lo dentro do nosso CSS eso. Uma das coisas que precisamos fazer é esclarecer. Precisamos limpar ambos o flutuador à esquerda para este, e essencialmente, isso impedirá que o rodapé seja puxado para qualquer um desses sites se houver algum espaçamento disponível. Embora nós tomamos um total de 100% lá, sempre que você está você tem o espaçamento lá, às vezes você vê que o fundo vai realmente para aquele espaço, e nós definitivamente não queremos que isso aconteça. Outra coisa, também, com o rodapé, eu quero enviar a linha, então isso é ir para um texto. O centro da linha é normalmente ver o pé alinhado no centro, talvez queira adicionar em algumas margens também, então eu posso adicionar em uma margem superior e inferior de 20 seleções para centralizar esse texto um pouco mais. Talvez definir fazer zero para as margens esquerda e direita, e também vamos adicionar em alguns potting para que possamos ter algum espaçamento entre essa área de conteúdo médio, e podemos querer reservar algum preenchimento à esquerda e à direita, embora isso não seja exatamente necessário, porque já centralizado alinhado nosso texto. Mas isso é algo que poderia ser adicionado como apenas no caso de precaução eso que nós não estamos ocupando muito espaço que gostaria de alocar para o resto de nossos elementos. Então lá vamos nós. Então agora temos um site totalmente funcional. Temos todos esses links funcionando. Então tudo parece estar funcionando muito bem. E na próxima lição, vamos ver como podemos torná-lo responsivo porque não é responsivo. E o nosso menu fica todo misturado aqui sempre que estamos tentando torná-lo responsivo. Isso é algo que temos que adicionar. E sempre que estamos olhando para o nosso projeto inicial. Então temos nosso projeto básico funcionando como podemos ver aqui. Temos essencialmente o layout que tínhamos olhado para eso Temos nossa área de rodapé aqui. Temos conteúdo um. Ele vai atualizar que nós temos a área de conteúdo principal lado esquerdo lado direito são página de boas-vindas e nosso cabeçalho superior aqui s na próxima lição. Temos que torná-lo responsivo. Então está vindo 14. 16 Torná-lo responsivo: tornar o nosso site responsivo vai ser muito importante nos dias de hoje com a web e do jeito que ele é. Muitas pessoas estão acessando seu site em dispositivos móveis e ele só tem que olhar diretamente em um dispositivo móvel. Eso agora nosso site. Não é responsivo. Algumas das imagens estão respondendo. O que? Em última análise, queremos que todos os nossos elementos sejam devidamente estocados. Sempre que atingimos um certo ponto, um certo com da nossa tela, queremos que os elementos realmente obter algum estilo adicional adicionado a eles. E isso é o que estávamos falando antes quando estávamos olhando para os homens quando é mínimo. Com isso, temos algo a acontecer. Bem, estamos fazendo do outro lado e estamos usando Max desta vez. Então a chave aqui é a mídia e na tela Lee. E é aqui que colocamos Max com isso. E é aqui que vamos procurar um ponto de ruptura que queremos algo. Assim que atingir esse Max, queremos que aconteça outra coisa. Eso talvez por enquanto, o que vamos fazer é atualizar isso. Quero dizer área de conteúdo para que aquele que definimos o dedo do pé branco. Vamos definir isso também, a área do contêiner. Então vamos definir isso para ler sempre que batemos ou um verde de modo que realmente se destaca para que possamos ver que sempre que batermos certo com nós vemos que tudo vai verde eso Sempre que estamos abaixo deste ponto de ruptura, ele vai verde e eu vou apenas mostrar-lhe aqui também é realmente importante para entender como tudo isso está funcionando S o dentro do cromo. Temos a capacidade de simular telas de tamanhos diferentes aqui. Isso é apenas clicando nesta barra de ferramentas do dispositivo de alternância e podemos enviar simular um iPhone. Podemos simular a galáxia Nexus e assim por diante. Então, esses ar que a inteligência padrão que estão disponíveis, bem como podemos personalizar o tamanho responsivo. Então vemos que sempre que chegarmos abaixo dos 700 é quando o novo estilo vai ter um fato. E é aqui que, em última análise, queremos nos mudar. Este conteúdo são menu lateral abaixo de nossas principais áreas de conteúdo. Então queremos que o dedo do pé mais uma vez, pegue 100% disponível com e remova a flutuação dele e então mude essa taxa abaixo dele e é aqui que temos dentro daquela área de contêiner. Então vamos voltar para a nossa barra lateral de volta para o nosso conteúdo, e nós só vamos usar o estilo que realmente queremos atualizar eso temos float e no conteúdo, temos float esquerda. Então vamos mudar isso para não flutuar. E vamos atualizar com 2 a 100%. Então vamos fazer a mesma coisa aqui, atualizar isso para não flutuar. E não precisamos nos preocupar com a cor de fundo. Nós não temos que nos preocupar com o preenchimento porque estes poderiam apenas propagar-se a partir da versão anterior. Então vamos dar outra olhada nisso e ver o que acontece agora. Então vimos Agora, sempre que encolhemos abaixo de 700 fotos, elas realmente empilham, e isso está em linha com o design original. Aqui está 01 última coisa aqui é que sempre que estamos redimensionando, tudo o resto parece bom. Mas este menu está realmente confuso. Há várias maneiras de lidar com isso, e na próxima lição, vou te mostrar como fazer isso. Como fazer são menu responsivo. Então está chegando 15. 17 Configurando fonte incrível: Quero trazer outra biblioteca para o nosso site. E isto vai gostar muito. Incrível. E isso é, uh então isso está disponível a partir de bootstrap é comumente usado quando você desenvolve com bootstrap , e dá-lhe a capacidade de ter um monte de ícones realmente legais e uso de um monte de ícones realmente legais . Então nós vamos trazer isso da mesma forma que compramos botas cair em nosso site e apenas em outra linha, eles estão ligando para ele. Então agora temos acesso a lutou incrível e lutou. Incrível. Realmente, realmente é incrível. Eso queremos adicionar em outro item de menu aqui. Então, quando estamos diminuindo nosso site, eu quero ter um link clicável aqui que podemos abrir nosso menu e ocultar nosso menu conforme necessário. Então vamos criar um hiperlink Ah aqui. E então vai ser um árbitro h, e isso vai ser apenas o gatilho para o menu. Então, na verdade, não tem ligação para o dedo em qualquer lugar. E nós vamos apenas dar-lhe um I D. E talvez nós vamos apenas chamá-lo de menu muitos. E aqui é onde vamos usar a fonte. Incrível. Então classe ícone, e este é o lugar onde podemos especificar FAA. Então, especificamos a classe que queríamos usar. Então é FAA, e é f Aybar está apenas perto que eu baixo e atualizá-lo e podemos ver que isso está nos dando aquela barra de menu que queríamos utilizar dentro do nosso site. Então isso é perfeito, mas queremos esconder isso também porque não vamos fazer uso disso. E um dos sites abaixo aqui é que ele está tomando essa propriedade de hiperlink que temos dentro desses menus. Então isso não é realmente o ideal. Então vamos usar um diff aqui e fazer disso uma definição clicável. Então, eu vou fazer isso aparecer e vamos fazer este. Vamos entrar em nosso texto aqui, e vamos fazer este maior, então vamos torná-lo grande aqui em cima. Então as barras FAA e nós fazemos o tamanho da fonte. Sou alérgico a GM por isso. Torna-o agradável e grande. São invisíveis dentro da nossa página. Então, sempre que o encolhemos, o que queremos fazer é mostrar este eso primeiro. O que queremos fazer com seus muitos cardápios. Não queremos mostrar nenhum. E então sempre que encolhemos nosso site, queríamos exibi-lo neste bloco. Então vamos mostrar nenhum, e isso vai escondê-lo. E, em seguida, quando nós encolher para baixo, quando queremos ter acesso ao nosso menu, nós queremos fazer bloco de exibição. Então, vamos refrescá-lo. E agora, sempre que o encolhemos para que tenhamos o nosso menu lá, podemos realmente nos livrar da cor verde porque isto era apenas para fins de demonstração , que onde quer que estejamos atingindo esse ponto de ruptura, Então, à medida que continuamos, vamos continuar a construir este menu e torná-lo mais responsivo. Então vamos fazer isso maior. E na próxima lição, vamos lidar com o peso que o nosso menu recebe sempre que o encolhemos. Então é agora que se foi. Mas quando ficamos maiores, precisamos ser capazes de apresentar este menu. E idealmente, o que queremos fazer é apresentar o menu logo abaixo desta seção principal abaixo do nome da empresa e slogan eso Isso é algo que talvez um pouco complicado para apresentar eso vamos ver o que podemos fazer, mas trabalhando nisso e atualizando e mostrando esse menu sempre que o encolhemos e no lugar desses ícones. Então eu quero esconder tudo isso ou quero mover tudo isso ao redor. Quero mudar a barra de navegação. Mas eu só quero mostrar esta parte para que possa ser um pouco complicado, e nós podemos ter que esconder este menu inteiramente e tão completamente separado menu porque nós temos este aqui flutuando oh, vamos trabalhar nisso dentro do próximo lição. 16. 18 Atualizar barra de navegação para ser responsivo: nesta lição. Vamos atualizar nossos muitos cardápios aqui para exibir como queríamos Teoh em um pequeno estado. Então para cima, abdominais, para que tenhamos o nosso menu de exibição aqui aparecendo e eu vou apenas fazer uma exibição. None Então atualize isso para exibir nenhum quando ele é grande. Mas sempre que ampliarmos, então realmente queremos exibir que muitos menus. Então vamos entrar aqui e exibir bloco de modo que este agora vai aparecer, e uma das coisas que eu quero fazer é realmente querer mover este aqui. E a razão é porque a maneira que eu quero que ele seja apresentado eu quero flutuar para o lado direito quando sempre que ele estiver disponível aqui, eso eu vou fazer alguns ajustes dentro do CSS, e eu também quero que o menu para apresentar horizontalmente ou verticalmente em vez de horizontalmente. Então vamos fazer essas atualizações dentro do nosso código aqui. Assim como o que fizemos com os contêineres onde atualizamos os carros alegóricos, vamos atualizar os carros alegóricos na barra de navegação primeiro, e vamos fazer um flutuador de nenhum. Dê uma largura de 100%. E também vamos limpar os dois porque não queremos nenhum dos carros alegóricos ainda lá. Então vamos esvaziar os dois. Então vamos guardar isso e ver como isso vai parecer. Então não eso. Agora é que ele moveu-o para lá. Está ocupando o total disponível com eso. Vamos fazer algumas atualizações adicionais para agora longe e os itens da lista. Então nós precisamos fazer aqueles de volta em blocos exibidos em vez de então apenas fazer um bloco exibido aqui, modo que volte horizontalmente. Eso Isso foi algo que tínhamos mudado originalmente tentando se livrar de todas as margens também. E eu quero puxar o texto para o lado esquerdo para que o texto alinhe à esquerda para que este seja o menu que queremos apresentar sempre que isso for clicado e vamos cuidar disso dentro do JavaScript, vamos alternar o que visível e o que não é visível. Eso o que resta agora é atualizar este menu muitos, uh, este ícone clicável aqui e talvez flutuar aquele para a esquerda. Tantos cardápios que chamamos, e anos vamos fazer um flutuador à esquerda, e desta vez ele lentamente ocupa 20%. E também, vamos atualizar isso para a linha de texto, e nós vamos alinhar o texto sobre o lado direito que o menu está sempre sentado ali, taxa de descarga para o lado direito. Qual é a última coisa que precisamos fazer? Ainda precisamos atualizar a área local para ocupar o resto dos 80% eso assim que o mini menu encolhe. Vamos atualizar o logotipo e vamos dar o logotipo A com dos 80% restantes porque ele vai estar em uma tela menor e vamos precisar de algum espaço adicional. Então vamos verificar isso agora. Então agora, sempre que o encolhemos, sempre que o expandimos, temos um menu normal. Mas quando o encolhemos, temos este menu. Mas esta barra de botões ainda está visível, então o que queremos fazer é exibir nenhum deles para apenas ocultá-la da vista. Então eu quero estilizá-lo antes de realmente adicionar no JavaScript. O Eso. O que resta agora é apenas fazer isso clicável, e quando clicarmos nele. Queremos apenas exibir a barra naff em um bloco. Então isso está chegando na próxima lição, e nós vamos utilizar algum JavaScript para isso. 17. 19 JavaScript para ocultar e mostrar elementos: nesta lição. Queríamos atualizar nosso site e adicionar em alguns JavaScript s. Queremos tornar este menu clicável e, em seguida, realmente mostrar o nosso menu e alternar essa propriedade CSS. E isso pode ser feito facilmente dentro do JavaScript. Então, javascript, isso vai ser javascript. Mas vamos usar alguns dos componentes da madrugada. E com JavaScript acessando esse amanhecer é o amanhecer essencialmente é o que é construído pelo navegador. E isso é o que nós olhamos mais cedo quando olhamos para o nosso site e eu só quero me livrar disso em. E nós olhamos para seu site e suas ferramentas surdas, e nós tínhamos isso aqui onde nós temos propriedades, nós temos parágrafos e nós temos um monte de coisas construídas em funções construídas em propriedades. Estão disponíveis em todos os elementos. E isso é o que o dom é porque este é o modelo de objeto de documento que é criado pelo navegador. Então o navegador lê o código HTML e o torna o Dom. E depois, através do javascript, temos acesso ao cão. Então o que queremos fazer é atualizar as propriedades de exibição sempre que nosso menu é clicado no menu de tamanho pequeno. Então, primeiro de tudo, precisamos Teoh acessá-lo a partir de JavaScript. E podemos fazer isso acessando a criação de uma propriedade e, em seguida, acessando esse valor da propriedade s para que possamos fazer algo como se pudéssemos fazer muito mal. Então nós vamos definir uma variável, e isso vai apenas conter que muitos menu. Então você tem que chamá-lo de menu. Mas vamos chamá-lo assim só por simplicidade. Então documento get elemento por i d. e o elemento que estamos tentando acessar vai ser muitos menu. E também vamos definir outra variável porque o que queremos fazer é obter esses elementos adicionais. Então eu quero pegar Nav Bar porque eu quero ser capaz de acessar esse também. Abra e feche seu enfraquecimento, pegue a barra de navegação, e vamos contê-la dentro do objeto. E então isso vai nos dar a capacidade de atualizar propriedades. Então agora nós só precisamos adicionar em ah, ouvinte evento ouvinte para o mini menu. E primeiro, vamos montar o nosso ouvinte aqui. Tantos menu em Clique, e precisamos especificar o que queremos acontecer quando ele é clicado. Então, queremos executar uma função quando ela é clicada. E então esta é a função que queremos executar e queremos uma barra de navegação de alternância, então ou queremos exibi-lo onde queremos escondê-lo. Então vamos dar uma olhada nisso e simplesmente adoro nossa exibição de estilo. E por enquanto, vamos fazer uma exibição de blocos. Então vamos atualizar a tela para ser bloqueada e ver como isso funciona para atualizá-la. E agora, quando clicamos nele, há algo que não está realmente adicionando no ouvinte de eventos. Então vamos dar uma olhada que percebeu que eu tenho um espaço. Deve ser por isso que não está funcionando. Então, vamos refrescar isso. E agora, quando clicamos nele, estamos mostrando, isso é assim que precisamos também ser capazes de escondê-lo quando clicamos eso Em última análise, em vez de apenas fazer bloco, eu quero fazer condição lá para ver o que ele está em, E se não for nenhum, então será bloqueado, e se for bloqueado, então será. Ele vai para nenhum, então vamos apenas dar uma olhada rápida para ver qual o valor a ver. Se esse valor já for igual a nenhum. E se isso for verdade, então ele vai mudar para bloquear. Caso contrário, não vai para nada. Então vamos ver como isso funciona. Então agora eu posso clicar nele. Posso mostrá-lo e escondê-lo. E então, obviamente, este menu funcionaria da mesma forma que sempre funcionou. Então este é um muito rápido, muito rápido fixar dedo adicionar na barra naff clicável. Você também pode fazê-lo no clique aqui também e apenas executar essa função. E, claro, você só precisa passar esses parâmetros lá. Nós também podemos levá-lo assim porque talvez desta forma pode ser um pouco melhor. Então, há muitas maneiras diferentes de fazer a mesma coisa aqui dentro de JavaScript s para que possamos realmente reduzir o código da montanha que estamos usando aqui, e nós não temos mesmo dedo identificá-lo. Estudante no clique assim. Talvez isso seja um pouco mais fácil de entender. Um pouco mais simples, então vai fazer a mesma coisa. Então, sempre que for clicado, isso vai disparar e abrir o menu de navegação. E podemos ver aqui que um dos problemas que vai acontecer, entanto, se o fecharmos e se o encolhermos se redimensionarmos a tela, então ele realmente vai desaparecer. Então este é um dos problemas inerentes, como se tudo funcionasse corretamente se estivermos em nosso dispositivo móvel e clicarmos. Mas se nós re tamanho na tela que poderíamos correr para alguns problemas. Eso há uma série de maneiras diferentes de fazer isso. Então, a próxima lição vamos olhar para algumas alternativas também, então está chegando. 18. 21 Crie outra barra de navegação responsiva: na lição anterior, analisámos como podemos tornar a nossa barra de navegação responsiva. Então, quando nós re dimensioná-lo, nós temos este ícone aqui que indica que há um menu que é clicável. Ele se abre e fecha para que possamos redimensionar e vemos que ainda temos alguns problemas em fazê-lo dessa maneira. E este ano realmente chegou porque somos capazes de redimensionar a página. Então isso normalmente não aconteceria se você entrasse em um dispositivo móvel. Você entrou no site e as coisas realmente funcionariam conforme necessário, porque você não estaria realmente redimensionando sua página. Portanto, este tipo de barra de menus também é ideal se você estiver ocultando e mostrando uma barra de menus, ou se você tiver uma segunda barra de menus que você deseja ocultar e mostrar. Então, nesta lição, eu quero dar um passo adiante e mostrar algumas outras opções para criar barras de menu. E nesta lição, em vez de adicionar e remover a propriedade de estilo real, a propriedade de exibição que vamos usar, vamos realmente usar ah classe e vamos remover e adicionar a classe conforme necessário. E essa classe vai ser o suporte para saber se a barra de menu é exibida ou nenhuma. E o que isso vai fazer é isso vai simplificar um pouco as coisas tirando isso e quebrando essa habilidade que estava exibindo essa barra de menu e nós temos a capacidade de realmente esconder e mostrar isso, mas então nós estamos vai permitir que ele seja controlado através do estilo. Então nós vamos anexar uma nova classe aqui, e então esta classe será realmente controlada através da tela de mídia e nos dizer se precisamos esconder ou mostrar isso. E tudo isso vai ser controlado aqui dentro da tela de mídia. Em vez de adicioná-lo aqui na barra de navegação, vamos adicioná-lo como uma classe, e isso vai fazer muito mais sentido porque uma vez que esta classe tem um tamanho maior, então sabemos que queremos mostrá-la. Então eu vou criar uma nova classe aqui, e nós vamos chamá-la de tela sm. Então isso será para telas pequenas, e sabemos que quaisquer itens aqui dentro do nosso site que precisam ter as mesmas propriedades para telas pequenas. Eles vão ser capazes de tomar essa mesma propriedade e aqui dentro do CSS, precisamos adicionar isso em que nós vamos essencialmente fazer uma exibição. Nada sobre isso. E então vamos alterná-lo dentro da tela de mídia aqui. Então, eu só vou abrir nosso arquivo CSS, que está aqui abaixo, e vou anexar algumas propriedades toe, sm screen. E o que vai acontecer é que sempre que estamos na tela menor, então nós vamos apenas exibir nenhum, que significa que na tela maior estavam sempre indo para exibir. E então isso está acontecendo Lee para a barra de navegação. Então é realmente bom não vai ter nada a ver com o que está acontecendo dentro de nossa área de exibição principal de nossa visão de parada de poeira. Experimente isso e veja como isso funciona. É quando eu o atualizo. Vemos que estamos automaticamente não estamos exibindo essa barra de menu, mas quando vamos grande do que estamos exibindo e, em seguida, este ícone ainda é clicável agora e nós vamos cuidar disso dentro desta lição também. Nós vamos cuidar disso. JavaScript E o que queremos fazer dentro do JavaScript é essencialmente ativar e desativar essa classe porque essa classe é a única que realmente vai mostrar a barra de menu ou ocultar a barra de menu. Então vamos passar para o nosso JavaScript aqui, e vamos criar algumas variáveis que vão conter o conteúdo. Isso são objetos de documento. Documente e nós vamos obter elemento por i d. então vamos pegar toda a barra de navegação. Então pegue a barra de navegação, porque é onde chamamos essa barra de navegação aqui. Então nós vamos pegar tudo aqui, e nós também vamos verificar para ver se o nosso botão então este botão aqui é chamado mini-menu. Então vamos dar uma olhada neste também, porque nós queremos talvez aplicar algumas propriedades para que s então talvez nós vamos anexar o on click para isso. Então isso vai ser a mesma coisa aqui que podemos chamá-lo de menu de botões e será igual a isso . E vamos limpar isso um pouco também fazendo isso. Então, vamos essencialmente adicionar isso na função clique. Então, apenas fazendo um ajuste rápido para aqui. E o que eu quero fazer agora é eu realmente quero, em vez de tudo isso. O que eu quero fazer é que eu quero tomar esta barra de navegação contra estavam apenas essencialmente fazendo a mesma coisa aqui. Então este é, uh, este Objeto X está segurando documento get elemento por I, d barra de navegação, ou talvez poderíamos chamá-lo nab nosso. Então faz um pouco mais de sentido lá. Então agora barra contém todas as informações, e vamos essencialmente verificar que classe, nome e nome da classe é o objeto que contém todas as informações da classe do elemento . E vamos verificar se o nome da classe da barra de navegação é igual a absolutamente igual a nada. E se estiver em branco, então sabemos disso. Então, se é apenas um espaço lá, então eu vou ter certeza de adicionar esse espaço e também, para que quando estamos removendo e escondendo que nós realmente estamos adicionando um espaço. Então nós temos esse espaço. Então agora precisamos ter certeza de que adicionamos a classe adequada. Então, ele vai ser adicionando na tela sm e removendo tela Essam. Então, se ele não está lá do que o valor de NAB, nosso nome de classe é tela SM. E se estiver em branco, então será apenas o espaço em branco. E também posso fazer registros de um cônsul. Podemos ter uma idéia melhor do que está contido neste objeto, e você pode ver que o nome da classe vai ser apresentado dentro do console. E o diretório cônsul é uma maneira melhor de exibir informações sobre objetos, especialmente quando você está obtendo informações sobre objetos do Dom. Então você vai ver que, às vezes, quando estamos desenvolvendo, usamos registros de cônsul, diretório cônsul e essencialmente eles jogam. Eles enviam mensagens para o console, e isso é usado para o desenvolvimento para passar informações para trás e para frente para que você não saiba realmente qual é o conteúdo de não barra. Mas se você console log sem data do que cada vez que você acessar o site, você será capaz de ver o que está contido neste objeto. Vamos verificar isso e ver como isso está funcionando agora, então estamos atualizando, e eu estou realmente indo para abrir o console para que possamos ver algumas informações adicionais. Então isso está sob inspeção aqui. E então eu vou ter aquele cônsul aqui para que possamos ver que mensagens estavam recebendo e quando nós o dimensionamos. Agora temos a barra de navegação. Quando eu clico, vemos que estamos abrindo a barra de navegação e vemos o conteúdo dela. Então é uma classe em branco, então vemos quando estamos clicando nela novamente. É uma classe em branco, mas ainda há algo que está acontecendo errado aqui e apenas olhando para isso, eu quero notar que como o diretório cônsul e o log do console produzem as informações de forma diferente Então o log do console apenas produz toda a elemento, incluindo o diretório HTML e, em seguida, Cônsul, nos permite realmente ver as informações do diretório. E este é o que estamos procurando aqui. Então estamos procurando nomes de classe. Então esta é a propriedade que estamos olhando, e estamos verificando para ver qual é o valor para que possamos ver sempre que clicarmos nela. Então eu só preciso abrir isso de novo e ver dentro do console. Então este é o último objeto que acabamos de clicar. E quando vamos para os nomes das classes, não é realmente adicioná-lo. Então isso é o que está causando esse problema porque ele não está adicionando na tela sm. Então, olhando para o nosso código-fonte para que possamos ver que também podemos fazer logout esse nome da classe para que possamos verificar novamente qual é o valor que está sendo apresentado lá. Mas ao descer aqui, vemos que ainda temos alguns problemas com o CSS porque a maneira como ele está fazendo algumas propriedades indesejadas e não queremos exibi-lo porque estamos controlando a exibição através da classe. Agora essa é a classe M, e esses são os que vão mostrar nenhum. Então, quer se livrar disso? E eu só vou fazer uma verificação rápida para ter certeza de que tudo o resto está correto. Estatísticas de volta para nossa página da Web e atualizá-lo. E lembre-se, atualizamos o console está bem agora, então devemos ser capazes de ver qual é o nome real da classe. Então esta vai ser apenas uma lista de todas as aulas que estão lá. Então, no caso de você ter algumas classes adicionais que você precisa adicionar essas em, então ele realmente não está tomando essa condição e não está redefinindo lá. Então talvez precisemos deixar em branco. Então isso pode ser um pouco mais fácil se tivermos algumas aulas adicionais lá, porque então saberemos que as propriedades estarão no lugar, que eu vou mostrar a vocês uma grande variedade. Então, quando o atualizamos, vemos que agora tudo parece estar funcionando corretamente. Quando eu redimensionar a página, nosso menu está lá, e parece que eles estão redimensionando está funcionando. Então, mesmo que o menu está aberto e nós redimensioná-lo, ele não tira nada da barra de navegação real aparecendo. E quando nós redimensioná-lo novamente, volta para baixo para pequeno, então ainda estamos onde paramos com a barra de navegação sendo aberta. Então, este ar apenas duas maneiras diferentes de apresentá-lo. E você tem que escolher o que funciona melhor para você. E vou mostrar rapidamente como é se tivermos outra aula aqui. Se por acaso você tem uma segunda classe ou algo assim, então talvez chamemos de segundo ou algo assim é O então precisamos atualizar isso também . E isto deve ler que se for o segundo, então nós vamos atualizá-lo com a segunda classe e nós apenas deixamos essa em. Então vamos adicionar isso a ele. Basta colocar um espaço lá, talvez não precisemos de um espaço. Vamos tentar este oito e atualizá-lo. Então, agora, quando eu clico, ele está alternando. E podemos dar uma olhada rápida porque ainda temos o Cônsul desenvolvedor aberto, e podemos ver isso sempre que estamos clicando nele. Então estamos adicionando e removendo a classe, mas na verdade estamos removendo ambas as classes. Então, outro problema lá que nós só precisamos fazer uma atualização rápida dele. Então nós estamos realmente reescrevendo todas as aulas lá e onde nós estamos apenas escrevendo em segundo lugar . Então não estamos. Nós estamos realmente perdendo essa tela, então nós precisamos realmente escrevê-los em ambos se queremos mantê-los dentro desse clique. Então nós queremos classificar ambos lá porque é tomado esse nome de classe inteiro porque ele está aplicando várias classes lá. Então, mesmo que pareça que está funcionando agora, nós vemos que, de fato, ele está funcionando como manter a segunda classe. Então, se você tem várias classes lá, certifica-se de que sua listagem do fosso e que você está reescrevendo-os de volta para esse elemento específico dentro do nome da classe. 19. 23 Como adicionar Biblioteca JavaScript Bootstrap: nas últimas lições que temos olhado. navegação e barras de navegação são sempre tão importantes para o seu site quando você está olhando para recursos móveis e responsivos do seu site. E é por isso que estamos focando bastante tempo nessas barras de navegação porque fazê-las certas é muito importante. É um aspecto vital dentro do Web design, e eu também quero mostrar a vocês. Então eu mostrei a vocês duas opções que são essencialmente opções de JavaScript, e elas estão essencialmente trabalhando da mesma maneira onde temos nossa barra de navegação. Temos alguns JavaScript que está ajudando a controlar alguns dos estilos, e temos nossas folhas de estilo. Então nós o temos formatado para recolher e ocultar e mostrar, dependendo do tamanho da tela. Portanto, existem algumas outras opções também para barras de navegação, e uma delas, que é frequentemente usada para desenvolvimento Web, é bootstrap Now. Bootstrap nos permite desenvolver sites de forma mais rápida e rápida, e eles têm uma funcionalidade integrada que está pronta para usar. Quando você quiser adicionar, são menus responsivos. Agora, com o bootstrap, a única coisa é que você precisa coletar Teoh conectar à biblioteca de bootstrap e também à biblioteca de consulta G. Então primeiro você precisa adicionar no J Query Library. Então eu já tenho isso dentro do meu painel aqui. Então eu tenho isso é a biblioteca de consulta G e muito parecido com o que fomos capazes de trazer com CSS vinculando a uma biblioteca CSS de pensamento incrível. Nós também podemos trazer a Biblioteca J. Corey e, em seguida, bootstrap JavaScript utiliza que J Coury Library para fazer alguma funcionalidade realmente agradável. E se você tiver algum tempo, vá até o site da Boots Drop e confira. Há um monte de coisas realmente legais que podem ser feitas com Bootstrap. Então eu vou me livrar do nosso JavaScript aqui. Por isso, vai deixá-la em branco por enquanto. E nós vamos passar por aqui, e vamos formatar nosso site para acomodar as novas configurações de menu bootstrap e combinações de menu . Então nós precisamos adicionar em classes muito como fazemos com outros com outros menus de navegação onde estamos usando classes e outras partes de bootstrap ou usando classes para criar efeitos diferentes iam fazer a mesma coisa aqui com Bootstrap. Então nós já temos i d cabeçalho. Temos classe, recipiente e recipiente é classe bootstrap, o que nos permitiu, que nos permitiu, Se você se lembrar, mais cedo no curso, olhamos para como isso nos permite realmente centralizar alguns do conteúdo e, em seguida, Em seguida, temos este logotipo i d aqui, e depois temos a nossa barra de navegação. Então o que queremos fazer para bootstrap é que queremos fazer um menu dobrável completo. Então, para fazer isso, precisamos nos livrar e mover algumas coisas ao redor. Como se não precisássemos mais desse cardápio, porque na verdade bootstrap vai cuidar disso, mas vamos precisar desses bares incríveis. Então vou deixar isso aí até agora. E na próxima lição, vamos converter isso em um menu de navegação bootstrap totalmente responsivo. Então está chegando na próxima lição. 20. 24 Adicionar Menu de alça de inicialização NavBar: nesta lição. Vamos atualizar nosso menu de navegação para ser totalmente bootstrap, bonito e responsivo via Bootstrap. Então vamos nos livrar de alguns de nossos estilos que temos trabalhado anteriormente e simplesmente conter as informações de bootstrap. Então eu vou descer para a folha de estilo porque assim como o exemplo anterior, sempre que estamos fazendo alterações em nosso código HTML e estamos ajustando, nosso menu está sendo apresentado. Também precisamos fazer ajustes em como estamos apresentando nosso CSS para que não precisemos mais disso . Vamos deixar as barras da FAA para a frente de algumas barras para que possamos ter um tamanho bastante bom sobre elas porque precisamos ter algum tipo de contexto, menu deles. Há uma opção dentro do bootstrap. Um bom trabalho para fazer isso. Não precisamos mais da tela SM. Não precisamos do menu lateral ou extra, mas precisamos do menu lateral, mas não comemos o minibar. Nós não precisamos de nenhuma dessas opções de valete, então tudo isso pode ser simplesmente removido, e é limpo um pouco do que estamos fazendo dentro de nossa tela de mídia. E agora estamos prontos para começar a ajustar nosso CSS. Nós também podemos dar uma olhada rápida no site e ele não está realmente funcionando bem sem esse CSS. Então, vamos fazer algumas atualizações e alterações dentro do nosso site agora. Eso primeira coisa que queremos fazer é que queremos atualizar. Então vamos ter agora como contendo o logotipo e as informações da empresa, porque com bootstrap, isso nos dá a capacidade de puxar todas essas informações. Não precisamos mais identificar isso como a barra agora porque temos todas as informações que estávamos usando originalmente. Não precisamos mais fazer contêineres lá. Então, com bootstrap, ele tem uma classe construída chamada barra de navegação. E então tem um estilo adicional para a barra de valete. Então, isto é o que estou a acrescentar aqui que estamos a escrever no dedo do pé da barra do valete. Deixe-o saber que é uma barra de navegação. E então aqui está ele estudando a aparência adicional da barra de agora, e nós vamos apenas ir com a padrão por enquanto. Então, assim como tivemos nosso recipiente classe lá, nós também precisamos adicionar em algumas classes adicionais e com bootstrap É apenas um syriza classes que você está adicionando em. E isso ajuda o bootstrap a entender como você quer uma posição. Diferentes elementos em seu site. É aí que precisamos trazer dibs. E com o bootstrap, você precisa trazer alguns deles para que seu site pareça exatamente do jeito que você quer. Então, com fluido de contêiner, isso nos dá a capacidade de ter um contêiner que atravessa inteiramente todo o espaço da Web lá. Então eu vou apenas deve realmente ser fluido recipiente tão diferente do fluido recipiente contentor nos dá 100% com a seção completa de blocos disponíveis. Agora precisamos adicionar em outro div aqui, e este vai ter uma classe de agora cabeçalho barra. E isso novamente, isso ajuda o bootstrap a entender o que queremos, o que queremos, esse elemento em particular e como queremos representá-lo dentro do nosso tribunal. Então, agora, cabeçalho da barra e, em seguida, precisamos configurar botão ou algo para ser alternado quando ele é clicado que nós vamos vamos disparar essa função bootstrap. Então vamos criar isso agora também, e nós vamos apenas fazer fita de botão e fita é um botão e, em seguida, a classe. Então esta é uma parte importante onde precisamos especificar que este é um interruptor de barra de valete. Então esta é uma aula, mas também vai nos ajudar. Como bootstrap. Entenda como queremos usar esse elemento em particular e queremos usá-lo como colapsado. Então esse é o tipo de barra de navegação tão recolhida barra e precisamos adicionar em alternância de dados. Então, isso ajuda J consulta entender ainda mais informações do que queremos fazer e como queremos utilizar isso para que possamos tomar para alternar dados e queremos fazer um menu dobrável e, em seguida, datar um alvo. Por isso, isto também é extremamente importante, porque temos de visar aquilo que queremos entrar em colapso. E nós, idealmente, vamos derrubar tudo nesta lista da UL. Então, vamos alvejar agora longe e há um botão ou eu d que nós vamos reutilizar novamente. Então esse é o botão. E então dentro do botão, precisamos ter algum tipo de, uh, algum tipo de caracteres. Então pode ser qualquer outro personagem que você quiser, mas eu vou usar o mesmo que usamos no mini menu lá e salvar essa parte. Então, agora, sempre que vamos para a página da Web, vamos ver o que está acontecendo agora. Então ainda não estamos olhando adequada porque não adicionamos em todo o estilo. Então isso é importante sobre Bootstrap é que realmente precisamos adicionar em todo o estilo e tipicamente com o seu menu aqui. Então nós temos o nosso agora cabeçalho barra, e sabemos que isso é parte do cabeçalho NAFTA Bar. Então nós temos o nosso logotipo e tudo isso, próximo deles vai criar outro DIV. E isso vai levar o I D. Agora latir, então observe que ele está amarrando com o alvo aqui, usando o ID e classe, precisamos especificar o que queremos que a classe seja. Então a classe vai ser agora, então é uma barra de navegação de bootstrap entende isso e amor barra de navegação, e podemos puxar a barra de navegação para a direita ou para a esquerda. Então vamos fazer uma barra de navegação direita. E com o bootstrap, há um monte de opções para definir as diferentes barras de navegação Então vamos salvar isso e adicionar. Então, na verdade, eu errei na turma aqui. Precisamos adicionar essa aula em dois. Esta é uma lista Norden, e precisamos atualizar isso para o colapso da barra de navegação. Então novamente, mawr bootstraps, styling. Então esta tem que ser barra de valete desmoronada porque essa é a opção que escolhemos e a classe do menu vai ser desmoronada. Então vamos dar uma olhada nisso agora. Vou atualizar a página e ver o que está acontecendo agora. Então vemos que sempre que estamos redimensionando, por isso está um pouco funcionando. Mas ainda precisamos nos livrar de algum estilo adicional porque está funcionando, mas não está colocando corretamente. Portanto, existem algumas opções adicionais que precisamos fazer atualizações aqui e normalmente com bootstraps. E isso normalmente seria um h áspero. Então, esteja ligando em algum lugar. Então eu vou apenas estilizar isso, como nós normalmente faria em Bootstrap on. Eu preciso me livrar desse logotipo lá. Então vamos salvar isso agora e ajustá-lo um pouco mais. Então vamos ver como isso parece agora. Então, abrindo aquela janela. Posso fechar esse e podemos ver que ele está começando a parecer mais um menu que queremos apresentar. Mas ainda não está abrindo e fechando, e isso é porque ainda temos algum estilo adicional que temos que nos livrar dentro de nossa construção. Então, normalmente, você não criaria todas essas configurações da barra de navegação e as atualizaria . Você simplesmente não os incluiria porque bootstrap estaria lidando com todas essas informações. Então, agora, quando vamos ao nosso site e com o atualizamos, podemos ver que agora temos um menu de trabalho, exceto que ele não está clicando, então ainda é necessário adicionar essa funcionalidade. Mas nós temos o nome da empresa lá, e nós temos o menu que está desmoronando e espero que não esteja abrindo ainda, mas ele está mostrando como um menu de navegação típico quando estamos redimensionando eles. Temos o nome da nossa empresa e as informações do nosso logotipo, que podem ficar do lado esquerdo. Então, a próxima lição vamos terminar e fazer algumas atualizações adicionais. Podemos abrir suas roupas e menu e finalizar este menu em nosso site construído via Bootstrap 21. Menu de 25 Bootstrap Navbar: nesta lição. Eu quero ajustar o código um pouco apenas para ter certeza de que tudo está funcionando corretamente . Então, quando eu atualizá-lo, notámos na última lição. Então, a barra de menu está se ajustando corretamente, então há alguns ajustes aqui. Então é olhar para este alvo de caminhão de dados e precisamos apontá-lo para este I d. de Nav Bar. Então aqui podemos chamá-lo do que quisermos. Então nós poderíamos usar diferentes alvos bem Eso nós poderíamos direcioná-lo para diferentes idéias. Então eu só chamei de “nab “são apenas para ser consistente com o trabalho que estamos fazendo mais cedo. Então agora eu mando para Nav Bar, então isso realmente vai direcioná-lo para aquele elemento em particular. Então vamos ver como isso funciona. Então, quando eu abro e fechá-lo e quando eu reajustado para que minha barra de navegação parece estar funcionando corretamente e nós removemos todos esses elementos e bootstrap apenas torna muito fácil e perceber também que eu não tinha que incluir qualquer JavaScript para que eu possa se livrar dessa tag de script ou desse elemento de script também. E a única coisa que não está aparecendo exatamente certo é o nome da empresa. E há realmente uma classe para isso também dentro de botas cair, que poderia realmente estilizar isso e nos dar a capacidade de fazê-lo parecer muito mais Niedere eso esta classe aqui que nós poderíamos adicionar aqui é uma marca de valete porque com botas cair estavam esperando marca barra satnav para que nós estaríamos esperando que há alguma marca lá dentro que a área superior esquerda, modo que tipicamente teria uma marca lá. Nós também podemos adicionar em uma imagem, um logotipo e assim por diante e slogan eso há algumas opções, mas queremos mantê-lo apenas uma linha. E a razão é a forma como a barra de navegação bootstrap está funcionando, que parece melhor e tem melhor desempenho quando esta é apenas uma luz. Mas, claro, se você quiser, podemos aplicar o estilo e atualizá-lo conforme necessário. Mas por enquanto, vamos deixar isso com isso e vemos que temos uma barra de navegação funcionando, e também eu quero mostrar a vocês Então este é o arquivo CSS bootstrap. Esta é a versão não unificada, para que você possa ter uma idéia melhor do que está disponível, quais classes estão disponíveis. Então, se você apenas procurar Knave Bar, nós temos nós temos um monte de entradas para barra de navegação para que nós pudéssemos ter um NAB são fixos no fundo s Oh, este é o puxando para a direita. Nós também temos opções para adicionar em drop downs. Eso estes ar os diferentes tamanhos de raio para que você possa ver que há um monte de informações aqui, e isso é isso. Prenda nosso cabeçalho para que ele flutua automaticamente para a esquerda. No menu. Apanha o nosso perdedor desmaiado. As opções de estilo CSS para o menu de recolhimento. Temos estática fixa. Então, estas são todas opções diferentes para a barra de navegação, e nós podemos realmente facilmente há a NAB nossa marca que não fomos usados. Eso enfraquece muito facilmente. Adicione essas barras agora sempre que alternarmos. Isto é o que acontece com a barra de valete, e tudo isso é controlado via consulta G e apenas styling que está disponível dentro de bootstrap. E é por isso que é importante fazer todos esses nomes de classe corretamente para que possamos adicioná-los corretamente em nosso site. E se você quiser ler mais sobre a barra de soneca e as diferentes opções dentro bootstrap e, como podemos ver, isso nos poupa um monte de problemas quando fazemos isso agora bar dentro do bootstrap e deixar bootstrap lidar com todo o estilo e o codificação real para ele s Então temos alguns componentes de informação, barra de navegação, e temos todas as opções diferentes aqui que podemos fazer com barra de navegação. Podemos também e, em seguida, temos o padrão da barra de navegação. Então esta é a típica barra de navegação de bootstrap. Temos informações sobre a imagem da marca eso foram capazes de realmente fora em uma imagem de marca também. Então isso teria sido algo onde poderíamos adicionar nessa imagem. Temos uma opção para adicionar em uma pesquisa. Envie uma onda lá dentro. Temos o formulário da barra de navegação e queimadura de naff esquerda e assim por diante. É um monte de opções diferentes aqui com a barra de navegação e capacidade de mudar como a barra de valete é tratada. Nós também poderia corrigi-lo para o topo se quiséssemos eso enfraquecer simplesmente adicionando na classe simples , podemos mudar como a barra de valete é apresentado. Nós também podemos corrigi-lo para o fundo também. E assim um. Então, se tivéssemos algo em que o consertássemos até o fundo, voltamos para a nossa barra de navegação normal. Tudo o que precisamos fazer é copiar o local inapropriado da turma. Então é ver aqui nós temos na barra de navegação para que nós podemos apenas adicionar isso em vai apenas cópia de anúncio e colar arte em Sanaa Far fixo fundo. Agora, sempre que vamos ao nosso site, podemos ver que nossa barra de navegação agora está na parte inferior. E quando nós re tamanho, a barra de navegação está ficando fixo na parte inferior da tela e você pode ver isso. E isso é algo que as botas caem automaticamente cuida. Por isso, é realmente fácil fazer ajustes na forma como sua barra de navegação é apresentada no seu site. E isso é tudo novamente feito através da queda de botas. E é por isso que um monte de desenvolvedores ar usando bootstrap porque ele realmente faz com que seja fácil para fazer esses ajustes nessas atualizações em poupa-lhe algum problema de realmente codificar e adicionar o estilo você mesmo para que eles têm que fazer está ligado às botas. Solte arquivos que inicializam CSS, as inicializações soltaram JavaScript de Java e também para Ajay Kori Library. E isso é tudo o que você precisa para colocá-la em seu site e, em seguida, é claro, adicionar aulas inapropriadas. 22. 27 Criar páginas de site: Então, agora que completamos o site, todo o código-fonte, temos ele olhando e agindo da maneira que queríamos apresentar como temos nossa barra de navegação. E eu deveria realmente mover este de volta para o topo porque eu não quero que ele fixo na parte inferior. Então vamos cuidar disso. E é fácil é apenas remover essa classe e atualizar onde a barra de navegação realmente se apresenta s para que possamos ver que tudo está funcionando da maneira que queríamos. E agora podemos construir outras páginas adicionais porque este site realmente tem para páginas . Então esta era a nossa página inicial. E nas páginas adicionais, queremos nos livrar das boas-vindas ao meu site. Não queremos apresentar isto. Podemos ter outra coisa que queremos apresentar. Mas, por enquanto, vamos apenas conteúdo remover isso completamente e olhar para o nosso design. Então, nosso site atual ainda corresponde ao nosso layout originalmente oh, que tínhamos definido e como queremos que ele apresente nosso site. Então vamos voltar ao nosso código. E agora, a fim de criar as páginas adicionais e, em seguida, ele apenas esconde onde eu vou guardar isso. E, a fim de criar páginas adicionais, o que eu costumo fazer é criar as páginas como esta. Então nós também temos que ter certeza de que temos todos os links de página lá dentro. Então eu vou simplesmente salvar esses olhos sobre HTML e a partir daqui, eu vou me livrar desse conteúdo que está contido neste recipiente de cabeçalho superior, então eu poderia simplesmente remover isso. E então eu posso renomear isso sobre nós. E aqui é onde posso apresentar conteúdo. Se eu quiser dentro da seção de barcos e podemos manter os anúncios iguais, podemos trazê-los dinamicamente, então há várias opções diferentes lá. Então agora sempre que eu cliquei dedo do pé sobre, nós podemos ver que nós temos um layout de estilo completamente diferente para um site, e então agora nós podemos fazer a mesma coisa para os produtos. Então salve como em apenas vou verificar para ter certeza de que eu tenho o nome do arquivo correto. Então são produtos com um pico minúsculo. Então agora eu concebo sobre como produtos dot html, e nós podemos, em seguida, personalizar e preencher nosso site conforme necessário. Portanto, aplique a sintaxe e o código apropriados. E agora é só por último nosso contato. Então salve os olhos e eu vou salvar isso como ponto de contato html e eu vou atualizar isso para salvar contato. E agora, quando eu o atualizar, então eu tenho todas as minhas páginas. Tudo é construído, site totalmente responsivo a partir do zero, e eu posso começar a adicionar em imagens se eu quiser um conteúdo adicional e assim por diante. Então isso está tudo disponível agora dentro do meu site construído. Então eu encorajo você também a dar uma olhada em torno do código-fonte, faz algumas atualizações , ajustes conforme necessário, e construir sua própria versão deste site menu móvel totalmente responsivo. E você também pode escolher quais homens você quer apresentar aos seus visitantes e como você quer apresentar esse menu. Então, nós estabelecemos uma série de opções diferentes para o menu de navegação porque esta ainda é a parte mais crucial de projetar seu site, porque você quer que visitantes de qualquer tamanho tela para ser capaz de entrar e ativar e interagir com seu site como projetado. Também vou incluir os recursos e links que usei neste curso, você possa conferir por si mesmo. Você pode conferir o que as botas caem tem para oferecer. Há muitas opções aqui para desenvolver e construir sites rapidamente. Só estou a utilizar estas botas. Solte bibliotecas e traga-as para o seu código-fonte, e você também pode criar suas próprias versões usando espaços reservados para impostos fictícios, se necessário. Toe segurar lugares e espaçamento para o conteúdo do seu site, e então você pode criar seus próprios projetos usando glitzy dot com. E há uma série de outras opções diferentes. E se você está procurando por um editor, colchetes também estão disponíveis. Então colchetes io, então eu vou incluir todos os links e recursos usados neste curso. 23. 28 Editor de código online: Eu adicionei todo o código-fonte em um site chamado Code Pen i O. e este é um site que lhe dá a capacidade de adicioná-lo código fonte diretamente on-line. Então você pode ver aqui que se eu mudar como uma cor de fundo, podemos ver isso imediatamente na área de exibição, vemos a nova cor de fundo nesses novos efeitos CSS ocorrendo. E este é um grande recurso. Se você quiser, desenvolva seu site para que você tenha todo o seu código-fonte lá e pronto para usar. E você pode fazer alguns ajustes aqui dentro do código-fonte para apresentar o site indiferente. Então, se você quiser fazer seu raio de fronteira maior, você pode ver que imediatamente ele acontece lá. Você pode atualizar suas cores de fundo. São bons lugares. Bem, para testar cores diferentes, confira e veja como ele é apresentado dentro do seu site s para que você possa fazer um monte de mudanças aqui. Nós também podemos atualizar nosso tamanho de fonte, bem como poderia torná-lo realmente grande. Podemos atualizar isso em Dent para a esquerda, possamos remover um pouco disso em amassar. Podemos recuar mais e vemos imediatamente que está tomando forma lá em cima dentro do site. Então estes são Este é um grande recurso e eu carrego o código já em sua lá. Bem-vindo para ir até o site e verificar, jogado ao redor com o tribunal e ver o que você pode fazer acontecer e ver diferentes opções de estilo que você pode adicionar no site. Ele vai trazer esta volta do dedo do pé branco s para que você possa ver tudo é apresentado corretamente dentro do conteúdo do site. Então eu encorajo você a ir até o site, verificar e usar recursos on-line como este para realmente desenvolver seu site e fazê-lo olhar da maneira que você deseja que ele olhar em tempo real e obter uma visualização em tempo real .