PSD ao Bootstrap 4: transforme seu web design em uma página da web

1. Introdução ao curso.: Ei, todo mundo. Meu nome é Luke Fetish. Eu blog em lukefetish.com. Eu sou um desenvolvedor de software profissional desde 1999. Mas a aula de hoje é sobre como podemos transformar nosso web design em uma página web usando o Bootstrap 4. Se você não estiver familiarizado com Bootstrap. Bootstrap foi originalmente desenvolvido pelo pessoal do Twitter para a construção de páginas web responsivas super rápido. Por responsivo, quero dizer páginas da web que ficam ótimas em um dispositivo de qualquer tamanho. Durante esta aula, vamos cobrir o básico do Bootstrap. Aprenderemos como incluir o Bootstrap em nossa página web. Vamos aprender tudo sobre os fundamentos do Bootstrap, como a grade, e como você pode usá-lo para definir seu web design e transformá-lo em uma página da web. Não se preocupe se você não tem um web design próprio. Vou fornecer um durante a aula. Finalmente, vamos aprender como podemos personalizar a aparência do Bootstrap para garantir que nossa página da web realmente se sinta nossa. Se você tiver alguma dúvida ou preocupação, não hesite em entrar em contato. Estou aqui para estar com você e pronto para ajudar a cada passo durante esta aula. Estou super feliz que você está aqui e mal posso esperar para começar e ver o que você constrói com Bootstrap 4. 2. Para quem é esse curso?: Então, para quem é essa aula? Bem, esta aula é para qualquer um que queira transformar um design de página web em uma página web funcional e funcional. Vamos usar o Bootstrap 4 para isso. Bootstrap é muito mais baixo nível do que os construtores de sites gráficos como Wix, e Weebly, e ferramentas como essa, mas fornece um grande compromisso entre construção de páginas web rapidamente e ter a flexibilidade de escrever código personalizado. Mas isso significa que você vai fazer alguma codificação durante esta aula. Estou assumindo que você está um pouco familiarizado com HTML com CSS, e com o uso de um editor de texto. Agora, se você não está familiarizado com essas coisas, então não se preocupe porque estamos aqui no Skillshare, e há um monte de aulas incríveis aqui que você pode usar para aprender essas coisas. Os professores são fantásticos e você estará em dia em pouco tempo. Então, se você estiver pronto, sente-se firme para a próxima palestra onde vamos analisar detalhadamente o que você vai aprender durante esta aula. 3. O que você vai aprender neste curso.: Olá a todos e bem-vindos ao vídeo. Vamos verificar o que você vai realmente aprender nesta aula. Que coisas vamos cobrir? Bem, a primeira coisa que devemos olhar, é melhor descobrirmos o que bootstrap realmente é, quero dizer, é um framework ou uma biblioteca? Vamos descobrir de onde veio, veremos quais problemas ele resolve, por que todo mundo gosta tanto de usá-lo, e não introduz nenhum problema. Spoiler alerta ainda não pouco, mas não tanto que não queremos usá-lo. Então vamos passar para conceitos fundamentais de bootstrap. Vamos ver como ele lida com a navegação, vamos descobrir sobre a grade de bootstrap, também vai ver como contêineres, linhas e colunas funcionam. Depois disso, vamos passar para a implementação de alguma navegação bootstrap, vamos ver como as classes de navegação do bootstrap funcionam juntas. É aqui que você começa a trabalhar em seu projeto, bem como porque você pode começar a implementar este trecho de distância. Veremos como podemos tornar a navegação responsiva. Navegação interna é, naturalmente, o menu que você colocaria em seu site para levá-lo para diferentes partes do seu site. Veremos como podemos garantir que isso seja exibido em telas de tamanhos diferentes, como em seu laptop ou computador desktop, ou em seu dispositivo móvel, e então veremos como os menus suspensos funcionam também. Esta é outra coisa que podemos implementar imediatamente em nosso projeto. Depois disso, será movendo-se para a grade de bootstrap. Agora, a grade é algo que é usado para definir uma página web. Colocar as coisas em uma grade, seja, em linhas e colunas, faz com que tudo fique bem alinhado, e também torna mais fácil gerenciá-las à medida que mudamos o tamanho da nossa tela ou até mesmo apenas do nosso navegador. Veremos, como eu disse, como os tamanhos de tela funcionam. Veremos quais são os pontos de interrupção e como eles afetam o layout da sua página web, veremos como podemos usar a ganância em diferentes contextos também. Como a grade afeta diferentes trabalhos, como o layout do documento geral, como eles podem usá-lo para estruturar e formatar uma tabela de dados. Também como podemos usá-lo para implementar o rodapé. Essa é a parte inferior da nossa página web que tem talvez navegação novamente, talvez tenha seus detalhes de contato, talvez tenha como ícones de mídia social, essas coisas. Veremos como a rede pode nos ajudar nesses lugares diferentes. Depois disso, vamos passar para o uso de componentes de entrada bootstrap. Vamos ver como podemos usar formulários e controles e este formulário como uma entrada de texto ou botões. Vamos ver como podemos personalizar o bootstrap para garantir que nosso site ou web design seja como o nosso. Vamos usar regras CSS individuais para fazer isso. Vou usar alguns estilos bootstrap também. Mas, principalmente, estaremos explorando como podemos usar nosso próprio CSS para mudar a aparência de uma página. Sente-se firme para a próxima palestra. Quando entrarmos em introduzir bootstrap, vamos descobrir o que é, como funciona onde queremos usá-lo. 4. O que é Bootstrap?: Olá a todos. Bem-vindo à nossa próxima lição sobre como transformar um web design em uma página web com o Bootstrap 4. Agora, antes de avançarmos, devemos ter uma conversa sobre o que Bootstrap realmente é. Bem, o que é afinal? Bootstrap é uma coleção de CSS e JavaScript. Isso foi originalmente desenvolvido pelo Twitter para fornecer um comportamento consistente em todos os dispositivos e navegadores. O que estamos dizendo aqui é que temos Bootstrap. Ele nos ajuda a fazer páginas da web que parecem iguais e se comportam da mesma forma o tempo todo. Porque se pensarmos em como as pessoas olham para a web no momento, temos telefones e tablets, laptops e, em seguida, computadores desktop. Você sabe que cada um deles poderia estar usando um navegador diferente. Potencialmente pessoas que usam mais de um navegador no mesmo dispositivo. Cada um desses navegadores vai exibir sua página da web um pouco diferente nesses diferentes dispositivos e tornar sua página da web em todos os lugares é complicado e demorado. Este é o problema que o Bootstrap resolve. De onde vem o Bootstrap? GetBootstrap.com. Se formos lá, isto é o que encontraremos. Esta é a primeira página do Bootstrap. Você pode baixá-lo aqui e você tem instruções aqui sobre as outras maneiras que você pode usá-lo também. Vou te mostrar como você pode usá-lo quando começarmos a construir nosso projeto. Mas o Bootstrap tem quaisquer desvantagens cair? Sim. Um casal. Normalmente 100K -200K quando você o inclui. Quando você incluir a totalidade do Bootstrap em sua página da Web. Isso é uma coisa muito pequena para baixar todas as vezes. Bootstrap, mesmo que seja menos onipresente do que costumava ser, ainda é super popular e há muitos sites Bootstrappy olhando. Mas como eu disse antes, vamos nos certificar de que podemos personalizar nosso site para que ele realmente não se pareça com qualquer outro site que está usando Bootstrap. Agora que tivemos uma pequena introdução ao Bootstrap e o que é. Na próxima lição, vamos rever conceitos fundamentais do Bootstrap. Vamos aprender sobre os blocos de construção do Bootstrap que podemos usar para fazer nossas interfaces. 5. Visão de conceitos do Bootstrap: Todos, bem-vindos à nossa próxima lição sobre como transformar um web design em uma página web com o Bootstrap. Desta vez vamos estar verificando alguns conceitos fundamentais do Bootstrap e por isso estes são os blocos de construção que vamos usar para colocar a nossa página web juntos e há realmente duas categorias principais que nós estaremos procurando em durante esta aula. A primeira é a navegação, e a segunda é a grade Bootstrap e a grade é composta de contêineres, linhas e colunas. Então vamos verificar isso em um pouco mais de detalhes agora. Então, na navegação. Vamos imaginar que isso é como uma página web, muito chato página web. Uma página web vai ter um menu em cima dele, ou geralmente em cima, vamos ver algumas outras opções em um momento e quando temos esses menus, nos referimos a eles como a navegação. Isto é o que um usuário usa para navegar em nosso site e eles muitas vezes têm coisas difíceis como casa e a página sobre e eu vou ligar para a página de contato e talvez se você estiver usando um site no qual você entrar há um para clicar em algo relacionado a você como usuário. Esse menu pode aparecer na parte inferior da página ou no lado, realmente não importa, isso é tudo navegação. Uma das coisas que a navegação Bootstrap nos dá é menus suspensos. Então, quando você clica em talvez seu menu de usuário, você recebe um menu suspenso onde começar a fazer as coisas com sua conta ou mexer com as configurações para a maneira como a página da Web funciona ou o site funciona, ou apenas sair. navegação Bootstrap também é responsiva. Quando você olha para uma página web em um pequeno dispositivo, como um telefone, você verá uma dessas pequenas coisas no canto superior direito da tela, geralmente é no canto superior direito muitas vezes chamado de hambúrguer e quando você clica nisso, então você recebe outro tipo de menu caindo a partir daí e esta é uma maneira de economizar espaço em uma tela de telefone celular. Então ainda temos nossa navegação, mas na maioria das vezes ela está escondida até que o usuário precise dela. Só esperamos que o usuário adivinhe para que serve esse hambúrguer. Acho que a maioria das pessoas já está acostumada a isso. Então nós conversamos sobre como a navegação funciona. Agora vamos dar uma olhada em contêineres de grade Bootstrap. Um contêiner é algo que surpreende, contém outros componentes da grade Bootstrap e o importante a observar aqui é que outras partes da grade não funcionarão muito bem a menos que estejam dentro de um contêiner e este é um dos compromissos que temos com o uso Bootstrap é que às vezes pode ser um pouco difícil escolher e escolher quais partes dele queremos usar. Alguns dos componentes, não todos eles, mas alguns deles são definitivamente interdependentes e por isso, se quisermos usar um deles, vamos usar, bem, mais de um. De qualquer forma, nós temos um contêiner, é algo que podemos colocar as coisas dentro e então a próxima parte da grade é uma linha. Uma linha é, como você poderia esperar, um arranjo horizontal de outros componentes e assim podemos colocar várias linhas dentro de um recipiente. Então, uma vez que temos nossas linhas no lugar, podemos adicionar colunas e colunas em Bootstrap são projetados para ter um tamanho específico. Eles sempre se dividem em grupos de 12. Então você pode ter uma coluna que ocupa toda a largura da grade ou você pode ter uma que ocupa um duodécimo da grade e vamos ver uma pequena demonstração de trabalho disso agora, mas a coisa importante a lembrar é que quando usamos a grade Bootstrap, vamos colocar coisas dentro de um contêiner. Nesse contêiner, provavelmente teremos linhas dentro dessas linhas terá colunas. Podemos especificar o tamanho dessas colunas, e vamos ver como elas se comportam agora. Então aqui está uma pequena página da Web reunida apenas para demonstrar como a grade funciona. Podemos ver que eu tenho um tipo especial de recipiente que é na verdade uma largura fixa, não ocupa todo o espaço da tela, e lá dentro você não pode ver as linhas porque as linhas são completamente ocupadas pelas colunas e você lembre-se de como eu mencionei que as colunas são divididas em porções de 12. Então nós temos este col-12 aqui e eu usei este nome col traço 12 intencionalmente porque é assim que as colunas são referidas no Bootstrap. Então esta é uma pequena introdução aos estilos de bootstraping e a maneira que eles nomearam, e então nós temos um col-12 que significa que tem 12 colunas de largura, que é dizer que ocupa todo o espaço. A seguir na próxima linha, temos col-6, que é surpresa metade da largura do nosso col-12 e, em seguida, por baixo disso, temos mais 1, 2, 3, 4 linhas e eles são ocupados por esses diferentes tipos de col-para colunas e todos eles parecem o mesmo no momento. Mas você pode ver que alguns deles têm sm no nome, alguns têm md no nome, alguns têm lg no nome e isso é parte da abordagem responsiva do Bootstrap para lidar com a grade. O que isso significa é que quando temos um traço colateral para coluna, o que isso quer dizer é que isso sempre será uma coluna. Mas se tornarmos esta página um pouco mais estreita, você pode ver que nosso contêiner está encolhendo, quando um contêiner encolhe , as fileiras encolhem e então nossos cols, bem, encolhem para ocupar seu contêiner menor, Mas uma vez que passamos de um certo tamanho, você pode ver que algo aconteceu aqui. O que está acontecendo? Podemos ver que estes col-lg-4 que eram anteriormente colunas, todos eles foram empilhados um em cima do outro e é assim que Bootstrap acomoda tamanhos de tela menores e diz, bem, talvez em seu layout, você quer que essas coisas sejam colunas quando você está em uma tela grande, um monitor grande de algum tipo, mas quando chegamos em uma tela menor ou um monitor menor ou apenas uma janela menor do navegador porque eu estou apenas encolhendo manualmente aqui. Nós não queremos que eles fiquem lado a lado porque eles vão ficar todos desordenados e então vamos colocá-los em cima um do outro. Então isso é para Col Grande. Com col-md, que significa médio, ele vai fazer exatamente a mesma coisa, mas não até chegarmos a uma janela de navegador de tamanho médio. Você pode estar se perguntando a esta altura, bem, o que conta é médio, o que conta é grande? Isso é baseado em tamanhos reais de pixels e veremos de perto mais tarde na classe os tamanhos de pixel exatos que o Bootstrap usa para decidir se estamos em uma tela grande, média ou pequena ou pequena ou janela do navegador. uma vez, uma vez que eu espremer isso um pouco mais, você pode ver que nosso col-lg está empilhado um sobre o outro, nossas colunas médias se empilharam um sobre o outro e agora estamos até nossas pequenas colunas. Vamos novamente, nós fomos um pouco mais longe e eles se acumulam em cima do outro bem e agora que Bootstrap decidiu que estamos em uma tela genuinamente pequena ou janela do navegador, e nós não precisamos mais dessas margens no lado. Você pode ver que ele ocupa 100 por cento da largura da janela do nosso navegador e, finalmente, nós esmagá-lo todo o caminho para cima e essas colunas col-4 porque eles não têm um tamanho de tela. Eles não têm sm, md ou lg em seu nome. Eles são sempre colunas e assim eles nunca vão empilhar sobre o outro. Então, essa é uma introdução super rápida à navegação e grade do Bootstrap. Isto destina-se a dar-lhe uma visão geral de alto nível para ver como estas coisas funcionam. Em seguida, vamos continuar a implementar alguma navegação real e é aqui que você vai começar o seu projeto. 6. Como implementar a navegação do Bootstrap: Ei, todo mundo. Bem-vindo de volta. Nesta lição, vamos começar a construir algo. Vamos implementar a navegação para o nosso projeto. Agora, o projeto que, bem, nós vamos estar trabalhando ou eu vou estar trabalhando de qualquer maneira, está construindo uma pequena parte desta interface de administração. Agora, se você tem um design próprio, você quer implementar, incrível. Mas o ponto principal é que, ele tem todos os elementos que estamos interessados em explorar durante esta aula e que nós temos alguma navegação lá em cima. Temos o rodapé no fundo. Nossa navegação tem um pequeno menu drop-down lá do nosso pequeno ícone de usuário. Mesmo do outro lado, temos um layout geral aqui à esquerda, temos a marca e algum texto de preenchimento lá. À direita está a próxima seção principal da página web, temos uma pequena tabela. Temos algumas entradas também. Estas são coisas que podemos usar para explorar usando o bootstrap para implementar nosso design de página web. Se o seu design não tem todos esses elementos, você ainda pode colocá-los temporariamente apenas para explorar os conceitos e para garantir que você aproveite ao máximo esta classe. Você sempre pode removê-los depois. Claro, se você não tem um design próprio, eu estou fornecendo este na seção de recursos para o seu projeto para que você possa trabalhar comigo e construir esta mesma página web. Como eu disse anteriormente, a seção de hoje é tudo sobre começar a implementar a navegação para navegação Bootstrap. Navegação no Bootstrap é implementada atribuindo algumas classes CSS Bootstrap para elementos HTML, que podem parecer belaboring o óbvio lá, mas isso é praticamente como vamos fazer tudo. No Bootstrap, criamos alguns elementos HTML, aplicamos classes Bootstrap para eles e, em seguida, obtemos todos os benefícios de usar o sistema Bootstrap. Esta é a estrutura básica de navegação no Bootstrap. Vamos começar com um elemento de navegação anexando e então temos uma lista desordenada. Aqui está a abertura da lista não ordenada, fechamento dela, e estes os itens no meio. A maneira como transformamos isso em alguma navegação Bootstrap real é atribuindo essas classes a esses elementos particulares. elementos Nav recebe navbar, navbar-luz, navbar-alternável-md. Este, além de ser um bocadinho, é um pouco ambíguo quanto ao que pode significar. Isto é para tornar a nossa navegação responsiva. No Bootstrap 4 você ou tem navegação responsiva ou você não tem nenhuma navegação, ele não funciona de outra forma. Você pode estar pensando, bem, como eu me lembro dos nomes desta classe? Eles não fazem muito sentido para mim. Eu tenho que concordar que no Bootstrap, as classes de navegação não parecem ser super coerentes ou fáceis de lembrar, então é por isso que eu vou fornecer nossa navegação completa como um modelo para você usar que também estará em seus recursos. Você pode usar isso como um modelo para seus projetos futuros. Porque eu sei que eu certamente tenho certeza de esquecer algum tempo vital de aula que impede minha navegação de funcionar. Eu trabalho fora de um modelo também. De qualquer forma, começamos aplicando essas classes CSS, navbar, navbar-light, navbar-toggleablele-md para o nosso outro componente nav, em seguida, para a nossa lista não ordenada, dizemos que é o navbar-nav. O que temos aqui, o elemento de navegação do lado de fora. Essa é a nossa barra de navegação que é como nós o contemos para nossa navegação e estamos dizendo que esta lista não ordenada, esta ul, esta é a navegação que vai dentro da barra de navegação. Então, finalmente, dizemos que esses caras são itens de navegação. Nós atribuí-los mais item nav para os itens da lista. Vamos fazer isso em algum código. Este é o arquivo esqueleto que é fornecido nos recursos para o seu projeto. É realmente apenas um arquivo HTML básico que tem um monte de links CDN de rede de entrega de conteúdo para Bootstrap e arquivo jQuery. Este é o lugar onde nós obtemos todo o nosso CSS e JavaScript de. Não vamos usar tudo isso imediatamente. Mas eu estou trabalhando a partir deste arquivo esqueleto com tudo incluído no início para que não tenhamos que continuar adicionando coisas a ele enquanto passamos. A única coisa não relacionada com bootstrap que estamos incluindo aqui é esta fonte de ícones materiais. Estou usando isso para os ícones que estão no aplicativo, é por isso que está lá. Achei que precisávamos começar a construir nossa navegação. Vamos começar com algumas etiquetas de navegação. Eu só vou implementar estes sem nenhuma classe em tudo no início. Eu só acho que muito mais fácil de fazer no início, faz muito sentido para mim. Eu tenho uma lista desordenada, lista não ordenada novamente, feche isso e então nós teremos nossos elementos li. Preciso verificar nosso projeto para ver quantas coisas temos em nossa navegação. Agora a coisa complicada aqui é que temos 1, 2, 3, 4, 5, aqui, e então temos esses outros do outro lado aqui. Estaremos explorando isso em uma aula ou duas. Mas o ponto é que estes são dois grupos separados de navegação e agora vamos fazer o primeiro, preços sobre FAQ, Blog, contato, por isso é um preço sobre FAQ, blog e contato. Claramente a próxima coisa que precisamos fazer é verificar a navegação incrível em um navegador. Aqui está nosso arquivo no navegador. Como você pode ver, parece exatamente uma lista não ordenada. Claro que isso é esperado. Nós ainda não aplicamos nenhum estilo a esses elementos, então vamos dizer classe é igual a navbar e, em seguida, navbar-light. Navbar-luz é apenas para a cor. De que cor queremos que esse arquivo seja? Vai ser de cor clara. Em seguida, temos o nosso excelente navbar-toggleablele-md, md é para médio, significa que queremos um tem comportamento responsivo para chutar em um navegador de tamanho médio. Então temos classe igual a navbar-nav. Finalmente, podemos ter, na verdade não é bem finalmente, mas vamos fingir que é finalmente por agora, nav-item. Vou colocar aqueles ali para esses caras. Vamos ver como isso parece, eu sei como vai parecer. Bem, isso não é como qualquer navegação. É um pouco melhor porque eles estão espaçados horizontalmente agora, ou eles estão dispostos horizontalmente em vez de verticalmente. Mas ainda assim, isso é nojento. A coisa é que queremos que eles sejam clicáveis, então precisamos colocá-los em algum elemento clicky. A coisa é na navegação Bootstrap, usamos uma âncora e vamos definir o href para preços hash. É o que faremos por agora. Acabe com isso. Mais as nossas etiquetas “a”. Agora, isso ainda não vai ficar ótimo para você. Volte aqui, podemos ver que eles se transformaram em coisas clicky, mas eles estão todos juntos e isso é porque precisamos de mais uma aula. Então dizemos que classe é igual a link de navegação. Nós recarregamos isso e, finalmente, nosso pequeno menu é magicamente transformado em estilo de navegação Bootstrap. Algo interessante vai acontecer aqui. Se eu esmagar este navegador para cima, você pode ver que eles caem de lado lá e verticalmente novamente. Este é o comportamento responsivo. O comportamento responsivo padrão do Bootstrap. Ele quer reorganizar o nosso menu em um menu vertical é assim que nosso navegador fica menor do que o tamanho médio. Como eu disse, vamos explorar o que essas designações médias e pequenas e grandes significam mais tarde. Mas se eu mudar isso para sm e depois voltar aqui e recarregar a página. Eu posso ficar um pouco menor com a tela agora antes que comece a saltar. Mas vamos mudar isso de fato. Mas o que fizemos aqui foi implementar nossa primeira parte de navegação. Agora seria um excelente momento para você experimentar isso em seu próprio projeto. Lembre-se, se você tiver algum problema, por favor, me avise. Ficarei muito feliz em te ajudar. Enquanto isso, aguente firme para a próxima palestra onde vamos tornar nossa navegação responsiva um pouco mais sensata e ver se podemos evitar ter este menu vertical por padrão. 7. Como fazer a navegação de Bootstrap: Ei, pessoal, bem-vindos de volta. Na lição de hoje, vamos verificar como tornamos nossa navegação Bootstrap responsiva. Bem, como vamos torná-lo mais responsivo? Porque já está responsivo agora. Ele responderá ao tamanho do dispositivo que estamos olhando para o limite. Mas não é realmente o melhor agora, porque se olharmos para ele, aqui está, temos nosso pequeno menu no topo aqui e se fizermos esses navegadores menores, você pode ver que eu tenho o código em segundo plano. Se você torná-lo menor e responder ao tamanho do nosso navegador, ele recebe uma atualização do navegador e muda para ser vertical em vez de horizontal, isso é legal. Mas se estamos em um telefone celular e nossa tela é mais do que esse tipo de formato, então nosso menu está ocupando uma enorme quantidade de espaço no topo da tela e não queremos isso. O que queremos fazer em vez disso é dar ao usuário uma opção de fazer o menu expandir e recolher. Para fazer isso, vamos ter que usar algum JavaScript e não vamos escrever qualquer JavaScript. Nós só temos que incluir as bibliotecas JavaScript em nosso código-fonte e como eu disse em uma lição anterior, o arquivo que eu tenho trabalhado fora, o arquivo esqueleto já tem esse material incluído apenas para simplicidade, mas se você tivesse apenas indo em frente com seu próprio arquivo e apenas incluído o CSS Bootstrap, agora é a hora de ir e incluir esses outros arquivos JavaScript. Você pode estar se perguntando, bem, como eu faço isso? Como sei do que preciso e de onde o obtenho? A maneira mais fácil de fazer isso é chegar ao bootstrap.com. Então vá para a página do Bootstrap. Você pode apenas digitar Bootstap no Google que você começa aqui, ir para começar, e no Quick Start, você pode ver que eles muito comumente fornecem uma opção de copiar e colar se você clicar na pequena cópia para minha área de transferência. Isto é para o CSS, mas estamos interessados no JavaScript e aqui está o JavaScript aqui está assinado com você. Clique em “Copiar para a Área de Transferência” e, em seguida, você pode simplesmente ir e colá-lo em seu código. Vamos ver a maneira mais fácil de incluir esses arquivos. Mais uma vez precisamos jQuery, Popper e Bootstrap JavaScript. Precisamos de todos estes três porque o JavaScript Bootstrap usa jQuery e Popper. Nós também vamos adicionar um botão ao nosso menu, que possamos clicar no botão e fazer o menu expandir e recolher. Então, finalmente, vamos embrulhar nosso<ul em um<div, e ainda teremos algumas classes e especialmente identidade ou valor ID que vai dizer ao JavaScript, hey, esta é a coisa que precisa ser expandida e recolhida. Tenho a certeza que já deparaste com este cenário antes. Se você está olhando para a web em um pequeno dispositivo de algum tipo, muitas vezes você vai encontrar um desses caras aqui no canto superior direito desta tela, muitas vezes chamado ícone de hambúrguer porque algumas pessoas pensam que ele parece como um hambúrguer. Para mim, parece mais olhar para uma torradeira. Mas de qualquer forma, esta é a coisa que nós clicaríamos e então nosso menu se expande e o usuário tem a opção de ocultar o menu até que eles precisem dele e expandi-lo, clique nele e pronto. Esta é a estrutura do nosso HTML de navegação no momento, temos o nosso elemento nav e, em seguida, temos uma lista desordenada, ouvir itens de lista dentro dele. Agora o que vamos fazer é, como eu mencionei, adicionar um botão que virá imediatamente após o nosso elemento de navegação. Ele vai ter um espaço dentro dele, e então nós vamos ter este div. Ele começa logo acima do nosso elemento lista não ordenado e termina logo abaixo para embrulhar a nossa lista, o que quer dizer que é uma navegação de quebra em torno MenuContent e estas são as mudanças para o HTML que vamos fazer. O que vamos fazer é começar adicionando o nosso botão e é elemento span para o nosso código. Se você está programando comigo trabalhando no seu projeto, esta seria uma ótima hora para abrir isso e obter codificação também. Vamos fazer isso em pequenos pedaços à medida que vamos apenas para tornar as mudanças menores e mais gerenciáveis. Aqui estou eu no meu código e aqui é onde temos nossa navegação. Então aqui está o nosso elemento de navegação, lista não ordenada, ou se é fecha, e então eu vou listar itens dentro. A primeira coisa que vamos fazer, como eu disse, é adicionar um botão. Sons podem adicionar botão aqui e dentro desse botão vamos ter uma extensão que vai estar vazia. Que nossos melhores esforços mudem feitos, o que vem a seguir? Agora vamos ter que adicionar algumas classes e alguns outros atributos ao nosso botão, para fazê-lo fazer algo interessante ou configurá-lo para que ele possa fazer algo interessante. Você pode notar que não temos nenhum papel ou atributos ariais aqui. Eu acho que vou incluir um atributo de função mais tarde em algum lugar em nosso código, mas a coisa é que eu estou perdendo muitos dados de acessibilidade ou atributos para o nosso mackup aqui. Isso não é porque eu quero que meu código seja inacessível, eu só quero mantê-lo o mais limpo e mínimo possível para fins de ensinar como o Bootstrap funciona. Se você está acostumado a trabalhar com atributos de acessibilidade como esse, por favor, não pense que eu estou defendendo não usá-los e certamente não é o caso. Mas voltando para o nosso código que temos para fora botão aqui, Ele leva algumas classes nav bar alternar, porque seu trabalho está começando a ser alternando nossa barra de navegação aberta e fechada, e navbar-toggler direita. O que é uma classe para dizer, deve estar do lado direito da navegação. É um botão. Ele tem esse atributo de alternância de dados chamado colapso e hash de destino de dados ou libra NavBarNavDropDown. Essas duas são as coisas que dirão ao JavaScript que estamos incluindo para o Bootstrap. Ah, este botão tem um papel especial a desempenhar e vai ser a coisa que expande colapsa nosso menu e a coisa que ele quer expandir e colapsar, ele terá um ID, este é um seletor CSS aqui de hash ou libra navbar Dropdown. A outra alteração que queremos fazer aqui é adicionar o ícone navbar-toggle a esta extensão. Nós não tivemos que colocar nada dentro do espaço nós mesmos, se nós dermos esta classe, o CSS Bootstrap irá preencher um pequeno ícone para nós. Vamos começar a adicionar isso agora. Aqui temos, Eu não posso codificar novamente e navbar-toggle ícone. Se salvarmos isso e, em seguida, dar uma olhada em nosso navegador, eu apenas fiz uma recarga e nós podemos ver uma diferença. Se eu esmagá-lo, podemos ver que temos nosso botão aqui que nosso menu não está sendo escondido ainda só porque fizemos metade das mudanças que precisamos fazer. Se eu clicar nele, nada acontece. Vamos voltar e ver que outras alterações precisamos fazer nesse código para expandir e ocultar nosso menu. A próxima coisa que precisamos fazer. Bem, nós temos que embrulhar nossa lista desordenada em um div. Farei isso antes de fazer qualquer outra coisa. Aqui está nossa lista desordenada, fechando div e então abra a div lá dentro. Você pode me ouvir de repente fazendo as contas sobre quantas linhas precisam ser recuadas. Isso é demais [inaudível]. Você tem essa div embrulhando nosso elemento lista não ordenado. Agora vamos ter que colocar algumas aulas na nossa div. Vou ter de lhe dar uma identificação. Agora este NavBarNavDropDown ID se opõe à coisa que dissemos ao nosso botão sobre. É assim que identificamos o elemento que precisa ser expandido e colapsado. A classe é darmos colapso e colapso de navbar. Colapso e o ID deve ser NavBarNavDropDown e dizer que agora você deve ver algo um pouco mais interessante. Vou atualizar meu navegador e olhar nossa barra de navegação desapareceu porque temos nosso navegador contratado um pouco da mina. Se eu puxar o navegador de volta para fora novamente, podemos ver nosso menu, nosso nav aparece e desaparece e nosso botão aparece e desaparece e se nós vamos e clicar em nosso botão e nossa navegação se expande para fora e eles podem recolhê-lo novamente. É assim que podemos implementar uma navegação mais responsiva no Bootstrap usando um botão para expandir e contratar ou para mostrar e ocultar nossa navegação. 8. Como adicionar um menu de entrega à navegação do Bootstrap: Olá novamente e bem-vindo de volta à nossa classe PSD para Bootstrap 4. Nesta lição, nós vamos aprender sobre como implementar um menu suspenso Navegação. Apenas para fazer uma atualização rápida, um menu suspenso para uma navegação ou para um menu do site é onde temos um menu regular como este e, em seguida, eu usá-lo cliques em um dos itens do menu. Temos outro pequeno submenu que aparece na parte inferior do item de menu que clicamos. Aqui está a coisa que é mais importante lembrar que esses menus suspensos, eles apenas mais um li ou lista item em nossa navegação normal. Aqui está nossa visão simplificada de como nossa navegação se parece, expressa apenas como elementos HTML. Sei que embrulhamos isso em um div e você coloca um botão no topo. Mas esta é a estrutura fundamental da navegação no Bootstrap. O que podemos fazer quando queremos um menu suspenso de uma de nossas opções de navegação ou uma de nossas opções de menu é adicionar um novo item de lista com classe igual menu suspenso. Aqui está a coisa, quando olhamos para a maquete que estou usando pessoalmente para implementar o projeto que estou fazendo para esta classe em particular, podemos ver que eu tenho um menu suspenso no lado direito aqui e ele cai fora de este pequeno ícone de usuário, mas pertence a este outro grupo de opções e o que temos aqui são duas peças separadas de navegação. Temos preços sobre se um contato de blog fila e, em seguida, temos este outro upgrade de grupo e em seguida, um sino para alertas e um pequeno ícone de ajuda e, em seguida, este menu de usuário. Estes são dois pedaços de navegação separada e quando queremos pedaços de navegação separada no Bootstrap, vamos ter duas listas separadas não ordenadas. Fazemos esta segunda lista não ordenada praticamente da mesma forma que fizemos a primeira lista não ordenada, a fim de implementar a nossa segunda peça de navegação. Se você está programando sozinho também agora seria um ótimo momento para adicionar uma segunda fase de navegação se você estiver trabalhando com o mesmo modelo que o IM. Mais uma vez, se o seu projeto não requer segunda fase de navegação, então eu iria e editaria de qualquer maneira, basta dizer que você tem uma prática nele e ver como ele funciona e como é. Vou implementar isso exatamente da mesma maneira que implementei o primeiro. Acabei de ter implementado o segundo menu o mais rápido possível. Acelerei isso para que não tenhas de passar muito tempo a ver-me datilografar as coisas. O que você precisa saber aqui é que é basicamente a mesma que a primeira navegação que implementamos, aqui está a primeira aqui em cima, onde temos ul, navbar-nav, li class é igual a nav-item, li classe é igual a nav-link e, em seguida, algumas coisas dentro para fora de um elemento. A única diferença real até agora é que enquanto um deles segue exatamente o mesmo padrão, ele tem atualização nele. Os próximos três não têm nenhum texto dentro deles, eles têm um elemento i com ícones de material de classe e , em seguida, o texto para o ícone que queremos entre as tags i. Agora é assim que funciona a fonte de ícones de material do Google. Esta é apenas para mim, uma maneira muito conveniente de obter ícones facilmente no aplicativo. Mas o que estamos realmente interessados está no fundo aqui que não é notificações, é pessoa. Se nós realmente dar uma olhada nisso em um navegador antes de fazer qualquer outra coisa, apenas para saber onde. Este é o nosso nav como era e aqui está agora, aqui está nossa pequena pessoa, nossa ajuda, nossas notificações, atualização. Agora, que você pode ver que ele está esmagado contra a outra navegação não parece muito separado e nós queremos separá-lo para indicar que ele tem um propósito diferente porque esta é uma nova navegação. Isso é tudo sobre o usuário, isso são coisas que eles fazem que estão relacionadas especificamente a eles ou ações que eles podem digitar. Ao passo que à esquerda aqui temos coisas azuis. À esquerda aqui temos coisas que se relacionam com o site Preços e Sobre, FAQ e Blog, Contato, coisas como esta e queremos alguma separação entre eles. O que podemos fazer aqui é colocar outra classe contra o nosso ul, uto, ml-auto, o que diabos isso significa? Esta é uma parte de alguma abreviação que Bootstrap adotou para mover coisas na tela. O que isso realmente significa é margem esquerda auto, então ml-auto. Isso significa apenas embaralhar o espaço disponível que temos no lado esquerdo deste item de navegação e então eu vou empurrá-lo todo o caminho para a direita da tela. Se salvarmos isso e sairmos e olharmos para o nosso navegador, recarregar, lá vamos nós. Mas o que precisamos fazer agora é realmente pendurar como um sub-menu do nosso pequeno ícone de usuário. Para fazer isso, vamos adicionar uma classe dois i, inferior mais li, ou inferior classe de item mais lista é igual a drop-down. Eu vou fazer isso em seguida, aqui nós adicionamos nossa pequena classe Li igual drop down, então nós voltamos para a nossa apresentação. Em seguida, dentro l última lista suspensa, ou o nosso último item da lista onde estamos indo para cair para baixo. Esta é a estrutura que queremos ter. Nós vamos ter envolto amigo li ou amigo li fechado que é o nosso menu suspenso, que acabamos de dar a lista suspensa mais dois. Então temos como de costume como temos todos os outros e um elemento, esta é a parte clicável dele. Acabamos de adicionar um ícone de usuário a ele. Então nosso submenu é realmente fechado dentro de uma div. Vai ser uma div que encerra uma série de elementos, e, portanto, um elemento irá incluir o nosso menu suspenso. O que eu vou fazer é ir e colocar para fora div e um elemento lá antes que eu faça qualquer outra coisa, <div> além disso </div>, nós vamos ter seis opções lá dentro. Agora, vamos adicionar algumas aulas extras para cada uma dessas coisas. Nós já demos ao nosso item da lista uma classe suspensa. Nosso elemento i, além da classe de ligação nav usual que damos a todos os nossos links de navegação. Ele também precisa de um atributo de alternância de dados definido para dropdown. Mais uma vez, isso é algo para o nosso JavaScript Bootstrap para conectar e saber que isso vai ter uma função especial. Em seguida, queremos sair div e fechar nosso menu suspenso para ter o menu suspenso classe, e, em seguida, cada um dos nossos elementos dentro do nosso menu suspenso div vai ter uma classe de item suspenso. Vamos colocar isso agora mesmo. Na verdade, a primeira coisa que vou fazer é colocar algum conteúdo nessas coisas. Mas há algumas outras coisas que precisamos fazer aqui, e é um atributo chamado dropdown data toggle equal. Em seguida, nossa div é menu suspenso classe. Há mais um pouco que temos que fazer no menu suspenso, mas eu gostaria de dar uma olhada no navegador agora. Só porque eu acho isso muito útil para ver, ajudar a ver como as coisas funcionam. Porque assim eu sei que classe está fazendo que trabalho. Você pode ver que nosso menu suspenso está parecendo muito miserável no momento. Estou listado porque ele está desaparecendo da página, isso é porque eles estão por padrão, alinhados à esquerda da coisa que eles deixaram cair, alinhados à direita do nosso pequeno ícone de usuário. Porque está no extremo direito da página e há uma classe que podemos usar para fazer isso, menu suspenso. Vamos dar uma olhada nessa recarga, aqui está o nosso pequeno menu suspenso. Tem algumas coisas que estão claramente erradas com ele. Não menos importante que para fora, opções de menu drop-down como apenas se espalhou por todo o menu drop-down e nem todos em uma linha vertical agradável. Isso é porque precisamos fazer esses links adequados e dar-lhes uma classe que irá dizer Bootstrap que eles adicionam itens de menu drop-down. Claro que precisamos adicionar uma aula, vou colocar essas em super rápido. Se olharmos para isso no navegador agora, podemos ver que todos eles estão dispostos verticalmente e bem decorados em uma lista suspensa. Há mais algumas coisas que precisamos fazer. Se olharmos para o nosso design, podemos dizer que o nosso nome de utilizador está em negrito, nome do nosso plano está em itálico e temos alguns divisores aqui, apenas dividindo as opções no menu suspenso, então vamos adicionar essas para o nosso código agora. Bootstrap nos dá uma classe diferente de zero, podemos usá-lo, o div classe dropdown-divisor. Só precisamos de uma div vazia para isso. Eu posso colocar isso lá dentro, isso só vai fazer um pequeno elemento com uma borda na parte inferior dele. Salvamos isso, confira no navegador. Você pode ver que temos divisórias adicionadas agora muito bom. A última coisa que precisamos fazer é estilizar nosso nome de usuário e nome de plano. Podemos usar elementos HTML antigos regulares para isso. Nós vamos ter fortes e eles. Mais uma vez vamos verificar nosso navegador, recarregar, lá vamos nós. Aqui está nosso nome de usuário, nosso nome de plano, e então temos um monte de opções em vez disso, como seria de esperar. Claro, nossa navegação é responsiva. Se marcarmos folha até chegarmos a um pequeno ícone de hambúrguer e abrirmos isso, você pode ver que podemos entrar em nosso pequeno ícone de usuário e nosso menu suspenso ainda funciona como esperaríamos, e, claro, se abrirmos isso novamente, podemos ver que ele mantém seu estado e permanece na posição suspensa. É assim que podemos implementar um menu suspenso responsivo usando a navegação do Bootstrap. 9. Crie um layout com containers, linhas e colunas.: Ei, pessoal, bem-vindos de volta. Nesta lição, vamos verificar como podemos usar grade Bootstraps para criar nosso layout de página web. Assim como uma atualização super rápida. Eu falei sobre a grade. É realmente dividido em contêineres ou como um contêiner geral. Em seguida, nesse recipiente podemos ter linhas e, em seguida, naquelas linhas, podemos ter colunas. Colocamos o conteúdo do nosso site nessas colunas para que o Bootstrap possa reorganizá-los para nós dependendo do tamanho do nosso navegador ou do dispositivo em que estamos olhando para a página da web. Hoje vamos verificar como podemos usar essas colunas para criar um layout geral para a nossa página web. Este é o conteúdo principal da nossa página web. Estou perdendo o [inaudível] em desta captura de tela apenas para maior clareza. Mas nós temos essas duas colunas de coisas em nossa página realmente. Temos o da esquerda com identidade de marca e texto abaixo. Depois, à direita, temos os nossos dados principais. Suponho que temos nosso título, temos uma entrada para pesquisar com um botão para adicionar um novo item de dados. Isso está mostrando informações sobre formulários do site, a propósito e informações sobre esses formulários. Cada item de dados é um formulário específico e individual que pode ser exibido em um site. Informações sobre esses formulários são mostradas em uma pequena tabela. Vamos explorar como podemos usar Bootstrap Grid para implementar esse layout geral. Em um nível alto, o que vai parecer é uma grande faixa de divs. Mas o que temos é uma div externa bem aqui, que é nosso contêiner e depois div lá dentro, que vai ser um papel. Então temos esses dois outros divs. Cada uma delas será uma coluna, uma para o lado esquerdo, uma para a direita. O que eu acho que vou fazer é colocar isso no código agora mesmo. Em seguida, podemos ir e colocar os estilos Bootstrap apropriados sobre esses presentes para fazê-los operar como recipientes, linhas e colunas. Se você está cortando para fazer seu próprio projeto, se você está usando as simulações aplicadas nesta classe ou um dos seus. Agora é uma ótima hora para começar a trabalhar nisso de novo. Por favor, não se esqueça de postar seus projetos no espaço do projeto de classe para que possamos ver como você está indo, você pode obter alguns comentários sobre o trabalho que você está fazendo. Ou se você já tem 20 problemas, essa é uma ótima oportunidade para obtê-los. Aqui estamos dentro e fora do código e você pode ver que temos nossa navegação implementada aqui. O que vamos fazer é descer até o fundo da navegação, fechá-los. Como a linha ali e aqui é onde fazemos todos os nossos divs. Teremos uma div para o nosso contentor e outra para a nossa fileira. Então lá dentro, teremos a coluna um, coluna número dois e podemos digitalizar. Este é o layout fundamental do conteúdo principal da nossa página web. Eu só vou colocar um pequeno comentário conteúdo principal. Então um pequeno no final só para dizer que é aqui que termina. No entanto, o olhar para isso no navegador, porque realmente é totalmente nada para ver ainda. Isto é o que temos em nosso código. Agora vamos começar a colocar em algumas classes, vamos ter um recipiente, linha, col-md-4 e, em seguida, col-md-8. Vou colocar isso como no cartão agora mesmo. Classe é igual a contêiner. Eu só vou copiar isso algumas vezes e mudar isso para a linha seguida, col-md-4 e, em seguida, col-md-8. O que temos aqui é nosso recipiente global contendo nossa linha e linha tem duas colunas nele. Temos uma coluna que ocupa quatro espaços e outra que ocupa oito. Lembre-se da lição anterior onde eu estava falando sobre como temos 12 realmente como espaços de coluna no total no Bootstrap. Esta é uma maneira de dizer, bem, coluna da esquerda vai ocupar um terço da página e nossa coluna da direita vai ocupar dois terços. Na próxima lição, eu vou estar olhando para colunas com mais detalhes para que possamos falar mais sobre como essas larguras de coluna funcionam e mais sobre como essas designações como md, que significa médio como em uma tela de tamanho médio. Vamos falar sobre como eles funcionam também. Mas para esta lição, basta seguir e você será capaz de ver um exemplo de como eles funcionam na prática. Agora vamos trabalhar na coluna da esquerda. O que vamos fazer, coluna da esquerda, você vê, eu tenho que destacá-lo aqui embaixo no fundo. O que vamos ter isso fora, aquela coluna 10 que é chamada md-4. Nós apenas preenchemos isso como nós vamos ter outra div, que será outra linha e, em seguida, outra div que será uma coluna. Então teremos uma imagem lá dentro. Isso é identidade passiva, mas uma marca e seu logotipo. Então, em nossa próxima div terá outra linha, que terá outra coluna. Então isso, etc, representa o texto. Isso é importante por lei assim por diante. O que vamos fazer é colocar todas essas divs do avesso col-md-4, que está na coluna da mão esquerda. Aqui está col-MD-4. Vou colocar um pequeno comentário sobre isso também. Coluna. Parece isso e diz isso. Essa é a coluna da direita. Basta colocar algum espaçamento e alguns comentários aqui, isso fica um pouco lotado com todas essas divs e colunas e o que temos flutuando por lá. Só para que possamos vê-los individualmente e claramente, então o que vamos ter dentro de nossas férias para a frente, vamos ter uma div que irá representar uma linha. Realmente temos duas fileiras, então teremos duas dessas divs externas. Então, dentro de cada um deles, temos uma coluna, que será outra div. Então, dentro deste, temos a nossa imagem. Aqui dentro vamos ter uma mensagem. Agora tenho a minha imagem pré-preparada. Se você estiver trabalhando com o exemplo que eu forneci, o código esqueleto vem da minha pasta, que também tem uma imagem fornecida nela, no diretório de imagens. Lá dentro temos imagem e é chamado de doping de entidade. Vou colocar um atributo que é igual a 100 por cento. Este é um “stop gap” que estou fazendo aqui. Porque realmente o que queremos fazer é estilizar isso com algum CSS personalizado individual para o nosso site. Mas eu não estou fazendo nenhum CSS no momento. Estou deixando tudo isso até o final, quando personalizamos a aparência da nossa página web, modo que não é tudo como cair estilos bootstrap. Mas por enquanto, eu só quero ficar com 100% bootstrap só para que possamos ver como funciona e nós realmente não enlamear as águas com suas próprias estrelas. Na última aula de vídeo desta classe, é aí que vamos olhar para o CSS que podemos aplicar ao nosso site para torná-lo menos bootstrappy e mais como próprio? Por enquanto, para impedir a imagem de assumir toda a tela, eu só vou colocar esse atributo de largura nele. Estou indo para o próximo pedaço de conteúdo. Eu sei que isto é uma linha aqui, e isto vai ser uma coluna. Isto vai ser uma fila. Isto também vai ser uma coluna. Sei que lá dentro precisamos ter algum conteúdo. H2, isto é importante. Vou preencher isso rapidamente. Mas este é basicamente o conteúdo que precisamos ter na coluna da esquerda da nossa página. Isto é, obviamente, antes de começarmos a estilizá-lo com estilos de bootstrap. Vamos dar uma olhada rapidamente em nosso navegador para ver como ele fica. Aí está, temos a nossa marca e depois o nosso texto. Já está parecendo praticamente da maneira que gostaríamos que parecesse. Nós vamos apenas adicionar algumas linhas, e colunas ao nosso DBS, apenas a restrição em um pouco, e isso vai ajudar com o nosso estilo dele mais tarde também. Podemos ver que tudo está sendo restringido em uma página, que é nossa coluna da esquerda. Mas que estilos vamos dar a ele? Vamos começar o segundo contendo div como uma linha. Em seguida, a div que mantém a imagem como meio frio 10. Agora talvez um pouco contra-intuitivo ter chamado os dez dentro de um Col MD 4. 10 parece ser maior do que os quatro, então ele pergunta como encaixar isso. Mais uma vez, isso é algo que vamos dar uma olhada de perto em nossa próxima lição. Vamos avançar e definir nossa próxima linha, adicionar mais um Col MD 10. Isso é muito simples de fazer em nossa classe de código é igual a linha. Classe é igual. Se eu me lembro como digitar código, na verdade MD 10. Claro que esta vai ser a mesma classe é igual a K. Isso é um 100% do estilo que precisamos aplicar para coluna da mão esquerda. Se atualizarmos isso em nosso navegador, podemos ver que ele está esmagado literalmente. Mais uma vez, falaremos mais sobre como isso funciona na próxima lição sem colunas e dimensionamento. Como implementamos isso como uma coluna para uma tela de tamanho médio assim que esmagarmos isso. B no tamanho de uma tela de tamanho médio, podemos ver que de repente eles se expandem para ocupar um 100 por cento da largura, que é o que esperamos. Quando não há mais espaço suficiente para exibi-las como colunas individuais, todas elas ficam empilhadas umas sobre as outras para se certificar de que elas são legíveis, que podem ser lidas facilmente e ainda estão dispostas bem o suficiente para serem navegáveis confortavelmente em um dispositivo pequeno. Esta é a nossa coluna da esquerda cuidada por enquanto. Mas também precisamos ir em frente e fazer a metade direita da página ou os dois terços direita da página, desculpe, também. Mais uma vez, temos um layout bem simples. Div e um H1 lá dentro, que diz falso. Eu não vou me incomodar em aplicar esses divs, e o estilo separadamente no código desta vez, porque não há nada de super chocante. Esta div externa é o nosso col MD 8 que criamos no início desta lição. Lá dentro temos uma fileira, depois um col MD 4 que conterá nossos formulários H1. Você pode ver que há muitos outros conteúdos no lado direito ou na coluna da direita. Mas vamos implementar isso nas lições subsequentes quando olharmos para lidar com entradas de formulário e controles, e, em seguida, implementar uma tabela de dados usando bootstrap também. Vamos colocar esta implementação inicial de nossa coluna direita em nosso código. Há uma coluna direita muito solitária e vazia. Nós vamos ter uma classe div igual a sala, então nós temos um div igual col MD 4, formas H1, e nós vamos terminar nossa div. Eu acho que estamos feitos, abaixo que em nosso navegador e surpresa, surpresa, há nossas formas. Agora, o que fizemos aqui foi implementado duas colunas. Como quando esmagar a página um pouco, podemos ver que eles se empilham um em cima do outro, que é o estilo responsivo que queremos. Podemos ir e clicar no nosso menu de navegação. Podemos vê-lo se abre e se expande e, em seguida, empurra todo o conteúdo principal para baixo na tela. Mas a coisa é que nossa navegação e nosso conteúdo principal estão sobrevivendo juntos. Exibindo bem como um formato de página grande [inaudível]. Em nossa próxima lição, analisaremos as colunas com muito mais detalhes. Vamos ver como colunas têm larguras diferentes são definidas e também como Bootstrap lida com colunas para diferentes tamanhos de tela. 10. Coluna de Bootstrap em detalhes.: Bem-vindo de volta. Nesta lição, vamos olhar para colunas Bootstrap com um pouco mais de detalhes. Há algumas coisas que realmente não cobrimos muito cuidadosamente até agora, que é como podemos ter colunas grandes como col-10 dentro colunas menores como col-quatro e a definição de telas grandes, médias e pequenas. Isso é usar como lg e md e sm para grandes, médios e pequenos. Nós realmente não olhamos ou explicamos isso. É quando esclarecemos essas coisas. O que eu vou percorrer agora é como as colunas são definidas no Bootstrap, como o número do traço col, digamos col-um, por exemplo. Se você tiver uma olhada no CSS Bootstrap, você verá que col-one é definido como 8,33333 por cento. Se olharmos para o Col-2 é 16,66667% o dobro do que do Col-1 e, em seguida, se passarmos para o Col-3, vemos que é 25%. O ponto aqui não é realmente para nós lembrar essas porcentagens, mas para notar que eles são percentuais e eles aumentam em oito e um terço por cento para cada número. O que isso nos dá no geral são 12 colunas aumentando em oito e um terço, de tamanho igual, até 100 por cento. A coisa mais importante aqui, como eu disse, é que eles são porcentagens, eles não são larguras duras. Se definirmos algo como um frio, sabemos que será oito e um terço largura do que quer que o contenha. Vamos dar uma olhada em um pequeno exemplo. Digamos que temos um div e demos a ele a classe col-quatro. Se olharmos para a col-quatro, sabemos que será 33 e um terço do que quer que a contenha. Vamos imaginar que isso sai em 100 pixels. Porque mesmo que esses estilos são definidos como porcentagens quando eles vêm a ser processados dentro do navegador, eles vão acabar com uma largura de pixel real dependendo do tamanho da coisa que eles contiveram dentro e o tamanho da página do navegador. Isso vai mudar toda vez que mudarmos o tamanho da página do navegador. Se você torná-lo muito largo, talvez ele vai ser 200 pixels. Se você torná-lo muito estreito, talvez ele vai ser como 50 pixels. A questão é que sabemos que é um CO-4, vai ser 33 e um terço do que quer que esteja lá dentro. Agora, se colocarmos outra coluna dentro da nossa div col-quatro, e darmos uma classe de col-nove. Agora, se olharmos para a col-nove e podemos ver que é 75%. Isso significa que col-nove vai ser o que vai ocupar 75% do col-quatro. Se col-quatro for 100 pixels, significa que col-nove terá 75 pixels de largura. É por isso que é válido, mas talvez um pouco confuso ver colunas com grandes números, dentro de colunas com pequenos números. O que estamos a dizer é que vai ocupar uma certa percentagem da coisa que a está a conter. A próxima coisa que precisamos considerar são tamanhos de tela Bootstrap. Agora, você vê correndo no canto superior direito da tela aqui nós temos col-três, col sm três, col-md-três, col-g três, e col-xl- três. Estes sm, md, lg e xl todos representam pequenos, médios, grandes e extra grandes respectivamente. Qualquer tela com menos de 576 pixels de largura será tratada como uma tela extra pequena. Isso significa que um col-três, por exemplo, eu usei três como um exemplo conveniente porque ele tem um bom número redondo, 25 por cento. Sabemos que o col-três sempre terá 25% de largura em uma tela extra pequena. Mas para telas pequenas, para telas médias, para telas grandes e para telas extra grandes, isso não será tratado como coluna zero. Isso será tratado como colunas de 100 por cento de largura ou colunas com uma largura de 100 por cento. Se olharmos para as próximas telas, cada tela que está acima de 576 pixels, então col-três, que é extra pequeno, ainda será tratado como uma coluna, col sm três, pequeno. Ainda será tratado como uma coluna também, ainda recebe 25 por cento de largura. No entanto, as colunas médias, grandes e extra grandes serão tratadas como colunas de largura de 100 por cento, o que significa que quando elas aparecem como colunas, elas serão empilhadas umas sobre as outras. Mas se aumentarmos outro tamanho, podemos dizer que o tamanho da tela agora é 768 pixels. Qualquer coisa que seja 768 pixels ou mais larga, a coluna extra pequena seria tratada como 25% de largura. A pequena coluna será tratada com 25% de largura e a coluna média será tratada com 25% de largura, mas colunas grandes e extra grandes não serão. Então podemos continuar subindo assim. Temos uma tela grande definida como 992 pixels e, em seguida, uma tela extra grande definida como 1.200 pixels. Mais uma vez, não é realmente o ponto de lembrar esses valores definidos no CSS do Bootstrap. O ponto é que temos esses mnemônicos úteis, sm, md, lg e xl que podemos usar para dizer; bem em telas grandes eu quero que essas colunas apareçam, mas em qualquer coisa pequena, eu só quero que eles sejam empilhados em cima de cada outro. Em seguida, para baixo para telas extra pequenas, podemos dizer, bem, eu vou usar este col- três porque eu quero que ele sempre seja uma coluna, não importa o que aconteça. Eu sei que isso é como um slide bastante complicado para estar olhando para muitos números e pode não parecer super intuitivo para você, mas ele está aqui para realmente soletrar a maneira que diferentes tamanhos de tela e diferentes definições de coluna funcionam . Na próxima lição, vamos analisar como podemos usar colunas para diferentes tamanhos de tela para alterar a aparência das coisas à medida que visualizamos nosso conteúdo em navegadores de tamanhos diferentes. Vamos ter uma demonstração prática de como isso funciona a seguir. 11. Adicione uma tabela de dados com pequenas colas.: Olá e bem-vindo de volta na aula de vídeo de hoje, vamos ver como podemos usar o Bootstrap 4 para implementar uma tabela de dados em nosso PSD projetado em nosso primeiro design desta página web. O que vamos fazer é implementar esta pequena mesa que está no lado direito da página. É mais no meio para a direita. Ele tem cinco colunas no total, mas quatro colunas de dados, os cabeçalhos e nome, impressões, respostas e conversão, e então na quinta coluna temos alguns pequenos ícones fazendo coisas para adicionar linhas de dados. Na lição de hoje, não estamos introduzindo novos conceitos ou ideias de bootstrap, vamos apenas colocar em prática as coisas que já cobrimos. A primeira coisa que queremos fazer é implementar alguns cabeçalhos para a nossa pequena tabela de dados. Realmente isso vai ser apenas uma div externa, que será uma linha contendo quatro div s para nossos cabeçalhos. Vou colocá-los em nosso código agora, e depois voltar e aplicar nossos estilos a eles. Aqui estamos recuando códigos, você pode ver nossa implementação inicial de nossa coluna direita aqui, e ele tem apenas este H 1 formulários dentro dele. Nós vamos começar o que vai estar em sua linha uma vez que aplicamos em alguns estilos para ele com este div aqui e dentro que div nós teremos mais quatro div s, para nossos títulos de coluna. Dentro de cada um deles vamos colocar o nome de nossas colunas. Temos nome, impressões, respostas e conversão. Agora você pode olhar no navegador e você pode ver nossos cabeçalhos de coluna estão sendo exibidos como div s normais exatamente como seria de esperar. Voltando para a apresentação, podemos ver que estamos indo para atribuir uma classe de linha para o aditivo, e então aqui podemos ver que estamos combinando dois estilos de colunas para a primeira div, então esse é o nome e para o resto deles vamos dar-lhes um Ligue também. Temos outro estilo chamado “texto certo”. Este é um estilo definido Bootstrap que apenas alinha sem texto nesta div particular para a direita, e essa é a prática padrão para tabelas de dados que têm valores numéricos, vamos alinhá-los ao longo da direita da coluna. Mas voltando ao nosso primeiro div, com chamada col md- 3 col- 2. O que isso significa? Bem, isso significa que em uma tela média que esta coluna vai ocupar três espaços de colunas, mas em uma tela extra pequena chamada traço dois, então ela só vai ocupar dois espaços de coluna. Este é o lugar onde a flexibilidade dos estilos de coluna do Bootstrap entrar porque podemos aplicar um número de larguras diferentes para uma coluna e ter isso alterado dependendo do tamanho da nossa tela. Vou aplicar os estilos aos cabeçalhos de coluna agora mesmo, e lá vamos nós para fora desta corrida e aplicá-los rapidamente. Podemos olhar para o nosso navegador novamente, dar-lhe uma atualização, e há como colunas espaçamento na tela como esperamos. Se começarmos a igualar isso, você pode ver que temos um pequeno problema aqui onde eles estão se esbarrando, isso não é ótimo. Esta é outra daquelas coisas que vamos corrigir quando começarmos a aplicar o estilo personalizado, mas você pode ver o que aconteceu aqui é que o nome está agora bem no fundo aqui você pode ver que o nome está ocupando muito este espaço do que era anteriormente. Está ocupando uma quantidade igual de espaço na largura dessa tabela como as outras colunas. Enquanto que uma vez que é um pouco maior, ele obtém relativamente mais espaço. Este é o nosso estilo de coluna três contra coluna dois. Tudo o que temos que fazer é ir e definir algumas entradas para os dados em nossa tabela. Isto é o que uma linha de dados em nossa tabela vai se parecer. Vamos ter um externo contendo div e, em seguida, quatro div s para nossos dados. Eles vão se alinhar com os cabeçalhos das colunas, e depois uma div extra para os nossos ícones e eu vou correr direto e olhar para as classes que se aplicarão a eles agora mesmo. Você pode ver que a primeira div vai ser uma linha e que as outras div s depois disso, e eles vão ser os mesmos que nossos títulos porque queremos que os dados se alinhem abaixo do título para que nós aplicamos os mesmos estilos. Na verdade, vou fazer esses agora mesmo antes de entrarmos em nossos ícones. Realmente, tudo o que eu preciso fazer é pegar essa parte, fazer uma cópia dela, e então colocar em alguns dados e dizer qualquer LP 1 e ele teve 2034 impressões e 1017 respostas que vai sair para um 50% taxa de conversão começou a tornar as coisas fáceis para mim mesmo. Você não quer me ver aqui sentado e tentar trabalhar uma taxa de conversão de 34% a partir de 2034 impressões Se formos verificar como isso parece em um navegador agora, dar uma recarga e como você pode ver, nós temos LP 1, 2034 impressões, 1017 respostas, taxa de conversão de 50 por cento e tudo está alinhando bem. Está parecendo muito bem como esperaríamos, e se apertarmos isso um pouco mais, você pode ver nosso texto correndo. É preciso textos de cabeça correndo um para o outro, mas podemos ver que nossas colunas estão se alinhando bem ainda. O que vamos fazer com ícones? Eles sempre serão uma coluna três, então eles podem ocupar três larguras de coluna o tempo todo. Eu estou indo para ir popup para o código também. É hora de colocar nossos ícones em nosso código para quem e aqui estão. Adicionamos mais uma coluna à nossa linha, e isso é bastante semelhante ao que fizemos na navegação. Então temos uma série de tags H contendo uma tag I para ícones de material, e estamos usando qualquer nome de Ícone material apropriado para essa ação. Como isso parece no navegador? Temos os nossos ícones lá pendurados na ponta da nossa mesinha. Há algumas coisas a observar aqui. Uma é que não esperávamos mostrar tudo isso de uma vez. Este pequeno ponto está lá para dizer, hey, espere, há mais, venha dar uma olhada e então quando você passar o mouse sobre aquela coisa ou clicar sobre ela ou algo assim, as outras coisas aparecerão. Realmente, queremos que apareçam quando passarmos o mouse em tudo. Esta é uma daquelas coisas de estilo personalizado que vamos adicionar no final da aula, e a outra coisa a notar é que isso é como uma maneira super artificial exibir esses dados porque você nunca ensinou-lo em então estes dados obviamente ao vivo. Esta é uma parte de uma página web, isso seria preenchido por dados de um servidor em algum lugar, mas maneira de implementá-lo agora como HTML, só porque isso é uma grande coisa para nós praticar e aprender sobre. Esta é muitas vezes a maneira que faríamos este trabalho de qualquer maneira com implementado como um tipo HTML de Prototype, e, em seguida, pegar os bits de dados fora do meio do HTML e implementar isso no lado do servidor. Afinal, não é assim tão louco. Deixe-me colocar mais algumas linhas de dados em nossa tabela para torná-lo um pouco mais parecido com uma tabela de dados. Lá vamos nós, eu tenho ido e postei em um monte de coisas que eu salvei mais cedo. Novamente, se verificarmos isso em nosso navegador, lá vamos nós. Aqui está uma pequena tabela de dados sem ícones e fora de vários pedaços de dados. Em nossa próxima lição, vamos adicionar nossos pequenos controles de entrada ao lado de espumas aqui em cima. Nós adicionamos essas pesquisas e adicionamos um novo formulário. Controles que estão em nosso design de página web. 12. Como criar controles de entrada do Bootstrap: Olá outra vez. Nesta lição em vídeo, vamos ver como podemos definir alguns controles de entrada usando Bootstrap 4. Então aqui está um pequeno design de página web e ao lado de nosso cabeçalho Formulários, você pode ver que nós temos uma entrada com uma pequena lupa nele, que é para pesquisa, e um botão chamado Adicionar novo formulário, que nós poderíamos supor que é adicionando um novo formulário. Então vamos ver como podemos implementar esses dois agora. Primeiro de tudo, aqui está o nosso modelo HTML para implementar um pequeno controle de entrada. Quando você coloca um deles dentro de um formulário, porque realmente em uma situação como esta, esse botão Adicionar novo formulário não vai enviar nada para um servidor. Ele só vai abrir um pequeno pop-up ou uma nova página para nós colocar as coisas em um formulário e então enviar isso para um servidor. Então ele está lá apenas para exibir um HTML semelhante. Mas tal entrada que, vai enviar uma consulta para o servidor mais provável, e, em seguida, o servidor vai enviar de volta alguns resultados. Então queremos colocar isso dentro de um formulário. vez estamos implementando como um protótipo HTML hoje. Então não vamos implementar nenhuma funcionalidade de pesquisa, mas é assim que queremos organizar nosso HTML para que possamos conectar essa funcionalidade de pesquisa. Então a próxima coisa que eu vou fazer é colocar nosso modelo HTML em nosso código-fonte, e depois disso vamos aplicar alguns estilos a ele. Então aqui estamos em nosso código e eu estou olhando para o nosso cabeçalho Formulários, que é como a primeira coisa que vemos em nossa coluna direita. Tudo isso está acontecendo na mesma fila. Então eu vou colocá-lo dentro da linha div imediatamente após a nossa coluna Formulários. Então a primeira coisa que vamos ter é a nossa Forma. Isso pode parecer contra-intuitivo. Mas esta é a maneira que ele vai ter que funcionar, e esta é a maneira como os estilos Bootstrap funcionam no momento. Verá do que estou falando em um momento. Diga Entrada, então obviamente [inaudível]. Então, depois da nossa Forma, temos outra div. Aqui é onde o nosso botão vai, Adicionar Novo Formulário. Deixa-me ver a nossa maquete. Sim, usei o caso Title para isso. Então deixe-me mudar isso. Vamos voltar à nossa apresentação e ver que tipo de estilos podemos aplicar ao nosso Formulário e às nossas entradas. Primeiro de tudo, vamos dar a nossa Forma, a classe de formulário inline. Se você não se lembra, em HTML, todos os nossos elementos são elementos de bloco ou inline. Elementos em linha alinham-se horizontalmente, lado a lado. Elementos de bloco alinham-se verticalmente, de cima para baixo. Mas queremos que o nosso formulário se comporte como um elemento inline porque queremos que ele apareça na mesma linha que nossas outras entradas e como o h1 ao lado dele. Então vamos dar-lhe o form-inline plus, em seguida, terá um form-group seguido por uma coluna div. Para mim, isso parece ao contrário. Eu acho que nossa coluna deve ser como o elemento contendo e a forma deve estar dentro dela. Mas acredite em mim, os estilos não funcionam muito bem se fizermos isso dessa maneira, e é assim que os documentos do Bootstrap recomendam trabalhar com Forms. Nós colocamos para fora coluna dentro do formulário e, em seguida, temos o nosso elemento de entrada. Depois disso, temos o nosso div contendo para o nosso botão, que será apenas uma coluna de largura três para telas pequenas. Então vamos lá e colocá-los em nosso HTML e vamos ver o que conseguimos. Então nossa forma é classe em linha, e div vai ser form-group e em seguida, temos uma classe de três colunas em uma tela pequena. Então teremos a mesma coisa para esse cara. Então vamos carregar isso no nosso navegador. Recarregar, e então você pode ver o que temos esse formulário, e você pode ver o que é revelado em todo o lugar mais uma vez, mas quem consertou isso sem estilo. Então isso é praticamente tudo o que há para implementar nossos controles de entrada. Em nossa próxima lição, vamos implementar o rodapé e, em seguida, vamos ser feitos com nossa parte bootstrap da implementação da página, e então vamos para nosso CSS personalizado para obtê-lo para combinar com o design que começamos com. 13. Como criar um editor de página no Bootstrap.: Olá de novo a todos. Nesta lição vamos ver como podemos usar Bootstrap para implementar um rodapé em nossa página web. Agora esta é outra dessas palestras. Não vamos explorar quaisquer novos conceitos do Bootstrap, mas vamos ver como podemos usá-lo para implementar nosso rodapé que é aquela parte na parte inferior da página da Web bem ali. Agora, se ele vai apenas repetir nossa navegação principal no site, e ele vai ter um pequeno aviso de direitos autorais na parte inferior. Vamos ver como isso parece em nosso HTML. Aqui temos. Começamos com uma tag de rodapé envolvente, a tag HTML de cinco rodapés. Então temos uma div envolvente, que vai ter uma classe de fluido de contêiner. Agora, no bootstrap, temos dois tipos de contêineres. Temos contêiner por conta própria, que é uma largura fixa, e, em seguida, fluido recipiente que é a largura total da página. Queremos que nosso rodapé seja a largura total da página neste caso. Depois disso vamos ter uma linha e, em seguida, uma coluna que também atribuímos a ela, que é uma maneira de dizer que queremos que nossas margens tenham um valor de auto, que é uma maneira de centralizá-las. Depois disso, teremos outra linha, em seguida, outra div centrada, e estamos feitos. Vamos colocar isso no nosso código agora. Vamos colocar isso abaixo do nosso contêiner que contém todas as outras colunas que retratam esse texto que formam a tabela de dados. Todas essas coisas e começaremos com o rodapé aqui mesmo. Se eu puder nos poupar dos meus erros de digitação. [ inaudível] é igual a contêiner para o chumbo. Quando também teve nossa raiz, e então teremos nossa classe é igual a mx-auto. Então vamos fechar esse div. Então vamos repetir exatamente a mesma estrutura novamente. Para a nossa próxima fileira vou colocar isso bem ali. Esta é basicamente esta estrutura que precisamos para o nosso rodapé. Agora, o que vamos colocar dentro dela? Realmente, é apenas uma repetição da nossa navegação principal. Temos 1, 2, 3, 4, 5 ligações. Preços sobre o blog FAQ e contato e HRFs para valores de libra. Preços que, como um blog cubo contata no dia do mundo real, eles estariam vazando para outras páginas em nosso site. Mas para o nosso protótipo vamos ficar com estes. Então precisamos colocar em nosso aviso de direitos autorais, que vai ser dois spans.Um com o símbolo de direitos autorais o outro com nossa marca, Copyright 2017. Se dermos uma olhada em como isso parece em nosso navegador, e lá vamos nós. Temos a nossa aprovação que se você bloquear o contato e depois a marca 2017, é claro que isso não se parece com a nossa maquete, mas na próxima lição vamos aplicar algum CSS a esta implementação para garantir que ele corresponda ao nosso design original. 14. Como personalizar uma página da web do Bootstrap: Bem-vindos de volta a todos. Nesta lição final, vamos rever os estilos personalizados que podemos aplicar à nossa página web para torná-la compatível com o nosso problema web design, como você pode ver, temos um pouco de trabalho a fazer, mas não vai demorar muito. Vou passar por essas mudanças rapidamente. Há alguns deles, mas na maioria deles são bem pequenos. Você não precisa se preocupar em tomar notas ou algo assim porque eu vou fornecer o arquivo CSS final como parte dos recursos do projeto. Você pode se referir a ele mais tarde. Aqui estamos nós com o código. Até agora, eu tenho meu arquivo index.html no lado esquerdo aqui, e no lado direito eu tenho um código de arquivo form-admin.css, que está vazio no momento, este é o lugar onde nosso CSS personalizado está indo para ir. Agora eu criei um sub-diretório CSS na minha pasta do projeto, e vamos nos referir ao novo arquivo CSS, mesmo que ele não tem nada nele a partir do nosso arquivo HTML índice. Essa é a primeira mudança que vou fazer. Em vez de HTTP como fontes do Google, etc Eu só vou colocar o nosso form-admin.css lá e salvar isso. A primeira coisa que eu vou fazer é empurrar nossa navegação no site apenas um pouco e eu vou realmente usar uma classe bootstrap para fazer então e esta é uma das classes que nós não cobrimos antes. Chama-se offset-md-4. Isso funciona como uma coluna, exceto que não é algo em que colocamos as coisas, nós usamos para empurrar as coisas através de um certo número de espaços de coluna. Neste caso, queremos que a nossa barra de navegação seja empurrada através de quatro espaços à esquerda. Eu vou colocar isso lá e então eu vou ver como isso está olhando no código para ter certeza que ele está tendo o efeito que nós queremos. Aqui estamos nós, aquela página web, salve isso e recarregue-a em vez disso, e podemos ver que nossa navegação no site foi empurrada através, que é o que queremos e a próxima coisa que queremos fazer é adicionar algumas alterações à fonte usando para a página web em nosso design, estamos usando uma fonte chamada último, e você tem três ou último. Não sei como pronunciar isso com eles. Temos três maneiras diferentes para isso. Eu entendo que neste a partir das fontes do Google, e então nós o definimos em nosso corpo e definimos o tamanho da fonte do corpo. Mais uma vez, eu vou verificar no navegador apenas para ter certeza de que há alguma mudança, e lá nós podemos ver que eu encontrei mudou, e a próxima coisa que nós queremos fazer é finalmente entrar em cores nesta barra de navegação no momento, é muito pálido e nosso design, como você pode ver, usa essa cor de fundo azul, verde claro. É melhor colocarmos isso também. Lá está ele. O que temos aqui? Bem, a primeira coisa que estamos fazendo é realmente definir o peso da fonte para a navegação porque na verdade é um pouco maior do que o corpo do texto. Depois disso, estamos realmente começando a definir nossa cor de fundo para nossa navegação. Estou definindo uma nova classe chamada navbar-brand-bg ou navbar-brand-background e definindo a cor de fundo para este valor verde azul, e depois disso, estamos dizendo qualquer link nav que está dentro navbar que está dentro navbar-brand-bg configurá-lo para Branco. Em seguida, temos uma regra semelhante para quando os itens na barra de navegação estão sendo pairados sobre ou nossos links terem pairado. Então os definimos para azul mais escuro, cor verde. Apenas para dar um pouco de feedback para o usuário que algo vai acontecer quando eles clicarem neles. Mas tudo isso referenciando essa nova classe significa que precisamos adicioná-la ao nosso HTML. Aqui estamos nós, e eu só vou adicionar essa classe para Navbar, e vai ser navbar-marca-bg. Vamos dar uma olhada nisso em nosso navegador, novamente recarregar e, não é tão emocionante. Finalmente, um fundo colorido. Mas se eu fechar meu navegador, acho que vamos ter alguns problemas. Quando mudamos para a nossa navegação sim, responsiva. Olhe para isso. Temos essa peculiar banda azul atravessando o topo lá, e tudo o resto parece ser uma ordem que é boa. Fico feliz em dizer que, no entanto, queremos fazer algo sobre esta banda azul verde que está atravessando o topo lá. No nosso modo de navegação responsiva. Então eu preciso fazer algo apenas um pouco não-óbvio aqui, que é classe aditiva igual a marca navbar, e então colocar um espaço vazio lá e fechar isso, e realmente o que estamos fazendo é aproveitar As classes de Bootstrap que estão todas configuradas para funcionar bem juntas, então nosso botão de alternância está configurado para ser uma certa altura e esta classe de marca navbar está configurada para ser uma certa altura, e sem eu ir e manualmente codificar esse valor de altura em nosso CSS personalizado, eu posso tirar proveito da marca navbar e deixá-lo fazer isso para nós. Clique em recarregar, e lá vamos nós. Então, a navegação está parecendo um pouco mais saudável agora, e bonita. Estou me sentindo melhor sobre como as coisas já estão parecendo. Então, a próxima coisa que queremos fazer. É se você der uma olhada no nosso pequeno ícone de usuário aqui, sentado lá parecendo perfeitamente feliz com o resto desses ícones. Mas se você verificar nosso web design, podemos ver que temos esse pequeno círculo atrás do ícone. Então eu vou colocar algo para isso agora, e para casa aqui vamos nós. Então, há algumas coisas acontecendo aqui. Um deles é que estamos definindo um ícone de usuário de classe, definindo a cor de fundo para ele, enviando uma cor de primeiro plano para ele. Definir o raio da borda para 50 por cento é basicamente fazer um pequeno círculo redondo e definir manualmente a largura, deslocá-lo um pouco mais largo e mais alto na implementação web do que está no design. Só porque isso vai precisar trabalhar um pouco melhor para nossos estilos responsivos e compensar algum preenchimento deixado nele, bem como para garantir que nosso pequeno ícone de usuário está centrado no fundo e temos temido importante depois disso. Só porque há alguns estilos mais específicos ligando para o nosso ícone, substituindo o nosso preenchimento à esquerda. Em vez de criar uma regra CSS artificialmente específica para o nosso ícone de usuário, eu vou usar a palavra-chave importante lá, definindo uma capa de fundo para o hubbub e, finalmente, nós só precisamos desses preenchimento se estivermos em nosso modo responsivo . Ou seja, se nossas páginas sendo visualizadas em um dispositivo menor, então precisamos desse preenchimento extra. Mas se estamos em um dispositivo grande, um que é 768 pixels ou mais largo, então não precisamos de nenhum preenchimento extra. Então eu tenho esta pequena consulta de mídia aqui, apenas para desligar o peg no lado esquerdo, e tudo o que precisamos fazer agora é aplicar nosso novo ícone de usuário de classe. Então vamos aplicá-lo a uma tag, ao olho, mas ver o ícone de um usuário tag. Salve isso, volte para o navegador, e eu já me relacionei para que você possa vê-lo lá agora, e se nós fecharmos isso, chegar à nossa navegação responsiva. Podemos dizer que está funcionando lá também. É isto que queremos? seguir, é hora de adicionar apenas um pouco de espaço para respirar ao nosso layout. As coisas estão parecendo esmagadas, e agora página web no momento, e eu acho que se aplicarmos algum espaçamento para nossa classe linha, então isso vai parecer muito melhor. Então, uma mira, eu vou dizer que provavelmente é demais. Agora acho que isso é bom. Então vamos aplicar um objetivo de Head-space para nossas linhas. Então, em nosso CSS, eu vou, realmente não se encaixa em nenhuma categoria agradável. Eu só vou colocá-lo no topo aqui, diga ponto. Eu não gosto disso lá porque ele está misturando-os sobre os elementos HTML. Criar mais espaço no layout, linha. Então, metade de um em. Guarde isso, volte para o navegador. Recarregar. Eu não sei, eu disse que vou fazer um exame completo, não é? Sim, acho que um “EM” completo será melhor. Um “em”. Lá vamos nós. Estou muito mais feliz com isso. Ok. Olha, estou feliz por termos um pouco mais de espaço no nosso layout. A navegação está parecendo muito mais agradável. Agora é hora de lidar com nosso rodapé, eu acho. Está pairando no espaço lá, não tem uma cor de fundo. Hora de consertar isso agora. A primeira coisa que vou fazer é ajustar o estilo para o nosso corpo, lá está. O que estamos fazendo aqui? Estamos definindo um mínimo de altura para 100 vh. Vh é uma unidade de altura vertical. Estes são 100 deles que está basicamente dizendo que a altura mínima da nossa página web será a altura da tela do nosso navegador. Em seguida, estamos configurando a exibição para flexioná-los e para flex-direção para coluna. Isso tudo ajuda a fazer nosso rodapé ficar na parte inferior do, não ficar na parte inferior da página, ele não será pegajoso, mas ele será colocado na parte inferior da página, mesmo o conteúdo da página não seja suficiente para preencher todo o altura do nosso navegador. Está tudo bem, mas agora precisamos de algo para o rodapé. Vamos colocá-lo aqui porque é um elemento HTML. Vamos dizer “margin-top: auto”. Ok. Vamos ver como isso funciona. Lá vamos nós. Está sendo empurrado, derrubado no fundo. É um pouco perto demais do fundo agora realmente e ele precisa de sua cor de fundo e outro estilo também. Parece grande o suficiente, eu vou colocá-lo para baixo um pouco apenas para estar abaixo do nosso nav, estilo HTML, rodapé, se isso não é muito óbvio. Além de dar uma margem superior, reduzi o peso da fonte para 300 para fazer o texto na parte inferior parecer um pouco mais elegante. Eu introduzi a cor de fundo, uma altura mínima de 100 pixels, acolchoado um pouco. Eu defini a cor para branco e adicionei um pouco de preenchimento para nossos links apenas para que ele não é olhar tão lotado, Eu inseri o fundo. Apresentei alguns estilos, nosso texto de marca e direitos autorais. Então o texto da nossa marca é aquela coisinha que diz “A Marca”, eu estou fazendo isso bastante pesado. direitos autorais são para o símbolo de direitos autorais ou para o todo. Na verdade, texto de direitos autorais, quero que seja um pouco menor do que o resto. Na verdade, temos que usar isso com sucesso. Eu vou ter que reorganizar nosso rodapé um pouco que é apenas para aninhar esses vãos juntos. Então, só assim. Eu poderia colocar a coisa toda em uma linha lá só para que possamos ver facilmente como isso parece. Vou guardar isso, voltar para o navegador. Eu o salvei. Agora eu recarrego e lá está o rodapé da página web. Isso é ótimo. A próxima coisa que quero abordar é esta imagem, A Marca. Se você pode nos ver bisbilhotando outro dia, nós desenvolvemos nossas ferramentas. Vou fechá-los agora. Você pode ver que nós temos essa imagem, A Marca, e eu sinto que é um pouco grande demais. Eu não estou interessado nesse tamanho super enorme do nosso logotipo principal. Então eu vou apenas colocar uma restrição sobre o tamanho máximo disso. Acho que onde fica ali, isso é bom. Vou inspecionar isso de novo. Eu posso ver que isso é como 286 por 298 pixels. Agora volte para o código e eu vou para o fundo aqui. Acho que vou chamar de imagem de identificação. Nós temos ID para isso porque há apenas se ele vai ser um deles, eu digo, max-width: 297px. Ok. Sim, finalmente podemos nos livrar dessa largura 100 por cento e dizer, id é igual a “id-img”. ID é a abreviação de identidade como nesta é a identidade da marca. Vamos voltar para o navegador, recarregar, e lá vamos nós. Não é um tamanho tão esmagador, mas olhe para isso. Agora ele quer correr para a nossa tabela de dados. Quão grande tem que ser antes que isso não aconteça. Estou curioso sobre isso. Sim, acho que serve, 245 pixels. Isso servir-nos-á bem. Fiz uma recarga rápida lá. Aqui está nossa pequena imagem de marca se comportando bem todo o caminho. Fantástico. Agora a próxima coisa que queremos fazer é controlar essas entradas. Estou falando desses caras. No momento, eles parecem um desastre absoluto. Agora eu vou ter que reorganizá-los um pouco e eu vou mover esse botão dentro do formulário com a entrada de texto. Isso não é a melhor coisa do mundo porque não é realmente, como eu disse, com o formulário sempre que eu enviar esse formulário. Mas para evitar colocar lotes de estilo muito específico nesse botão, em seguida, desligá-lo na linha, eu vou tirar proveito dos estilos livres definidos em nossa forma. Eu também vou adicionar alguns estilos para tornar esse botão um pouco menos bruto e para combinar o resto do nosso design de qualquer maneira com os cantos arredondados. A primeira coisa que vou fazer é ir para o formulário. Acho que também não queremos mais este grupo. Vou colocar isso ali, deve entrar aqui. Esses caras voltam um pouco. É um dos meus melhores. É o fim de uma fila. Vamos ver como estamos agora. Terrível. Provavelmente precisamos fazer isso um pouco maior. Lá vamos nós, agora está funcionando. Já estamos parecendo melhor. O que acontece quando esmagarmos isto? Sim, isso é bom, ainda bom, e dias felizes. Isso é um pouco irregular. As larguras dessas coisas, mas vamos resolver isso em um momento. Agora precisamos adicionar um pouco de estilo apenas para fazer nossas entradas parecerem um pouco mais bonitas. O que temos aqui? Para entrada e botão, estamos definindo a margem para auto. Estamos definindo o raio da borda para 25 pixels, o que lhes dará uma borda redonda agradável em cada extremidade, e preenchimento para cinco pixels para dar-lhes um pouco de espaço dentro da entrada. Além disso, estamos definindo nossas sombras de caixa para nenhuma, dando-lhes uma borda cinza claro muito fina, e definindo a largura para 100 por cento para que eles ocupem o espaço disponível. Finalmente, eu fiz uma regra de ID de botão de formulário onde temos borda definida como zero com 100 por cento, sem imagem de fundo, cor de fundo que é um azul mais claro, cor verde. Então finalmente temos texto branco. Vou em frente e aplicar isso no botão. Recarregar, e nossas entradas estão parecendo muito mais agradáveis agora. Agora há uma coisa que está faltando, que é esta pequena lupa aqui. Queremos que ele fique dentro das entradas de texto. Como você pode ver, não está lá, então é melhor irmos e fazer isso agora. Uma coisa que eu vou fazer é adicionar esta grande peluda regra de estilo CSS chamada controle de busca. Basicamente o que ele faz é um monte de coisas para posicionar essa lupa dentro da entrada de texto. O que precisamos fazer antes que funcione é realmente adicionar um pequeno ícone a isso pelos ícones de material de formulário e, em seguida, controle de pesquisa. Isso não funcionou de todo. Eu salvei o CSS? Não. Claramente, eu não sou qualificado para dirigir mais de uma janela de editor de cada vez. Recarregar. Lá vamos nós. Finalmente. Se eu não cobrir isso, vou consertar isso. O que eu estou fazendo é que eu estou fazendo um começo de uma dica ferramenta, conjunto de cores para dadadada. Lá vamos nós. Isso parece um pouco melhor. Vou usar isso no nosso pequeno ícone de pesquisa, dica de ferramenta, confira no navegador. Ótimo. Agora é a cor certa. Portanto, as nossas entradas desta vez parecem muito melhores. Basta verificar o pequeno ícone de pesquisa está se comportando, e é por todo o lado. Fantástico. Agora, a próxima coisa que está faltando é bastante simples, apenas uma pequena borda, uma pequena linha correndo sob nossos títulos de tabela de dados. Queremos alguma separação em uma linha abaixo de Nome, Impressões, Respostas e Conversão. Nós os obtemos no território da tabela de dados agora, então eu vou marcar isso, e eu criei um estilo chamado lo border, que tem um pouco de preenchimento e uma borda na parte inferior que é apenas mais um cinza claro. Para usar isso, vou enfiá-lo aqui embaixo. classe Div é igual a col md 11 e lo border, e isso pode ser apenas uma div vazia. Fantástico. Há uma linha que separa os cabeçalhos das colunas dos dados da coluna. Agora a próxima coisa que precisamos olhar são esses ícones aqui. Eles não parecem muito bem. Eles deveriam estar escondidos. Este pequeno ponto-ponto é suposto ser uma indicação de que há mais ícones para ver como eu mencionei anteriormente na classe. Então é melhor continuarmos escondendo e mostrando esses ícones. O que eu fiz é que adicionei mais alguns estilos que se relacionam com esses ícones e eu vou chamá-los de ferramentas de administração. A primeira coisa que fazemos é adicionar um pouco de cor a eles e definir a exibição para nenhum, que significa que nós os escondemos, mas quando estamos passando o mouse sobre algo chamado uma linha de dados e nossa ferramenta de administração vai se tornar um bloco de exibição inline. Esta é uma forma de dizer que estas coisas estão escondidas até passarmos por cima delas, depois mostraremos-lhes. No entanto, temos essa pequena dica que três pequenos pontos horizontais que estão lá para nos dizer que há mais para ver, mas quando passamos o mouse sobre nossa linha, queremos que isso fique escondido, então definimos a exibição para nenhum. Então, finalmente, definimos algumas cores alternativas para nossos ícones da ferramenta de administração, um cinza mais claro e, em seguida, um cinza mais escuro quando passamos o mouse sobre eles. Antes de fazer qualquer outra coisa, teremos que colocar essas coisas em ação, atribuindo essas classes aos nossos ícones, então o que teremos nossa ferramenta de administração. Vou fazer um a um para começar, só para ter certeza de que está tudo funcionando e então eu vou colocá-los para o resto deles. Isto vai ser uma dica de ferramenta, como a nossa lupa. Além disso, nossa linha também deve ser uma linha de dados para que possamos selecionar com precisão nossos ícones. Vamos dar esse alerta e olhar, podemos ver que um pequeno conjunto de ícones desapareceu e quando vamos passar o mouse sobre eles, podemos ver os outros ícones lá. Eles aparecem e um pouco mais de ícone desapareceu. Lá vamos nós. Isto é o que queremos. Então eu aplicarei isso rapidamente ao resto de nossas linhas de dados. Finalmente, tenho certeza que vai funcionar agora. Fantástico. Se esmagarmos isto, ainda estamos a trabalhar? Sim. Lá vamos nós. Estamos praticamente feito com o nosso estilo personalizado para a página. Se ainda não o fez, por favor publique o seu projeto na galeria de projetos. Eu adoraria vê-lo como sempre e aposto que todos os envolvidos na turma adorariam vê-lo também. É uma ótima oportunidade para comparar notas, receber feedback e obter ajuda se você precisar. Estou ansioso para ver no que tem trabalhado. 15. Revisão do curso.: Então chegamos ao fim da aula. Tem sido super divertido para mim e espero que você tenha gostado e achado muito útil também. Durante esta aula, abordamos o que é Bootstrap, como incluí-lo em uma página web regular, como funcionam os contêineres de navegação, linhas e colunas do Bootstrap , como podemos combinar esses componentes para criar um página da Web. Agora, se você ainda não o fez, por favor não se esqueça de postar seu projeto. Você pode obter feedback sobre isso e eu realmente não posso esperar para vê-lo. Lembre-se também, eu estou sempre disponível para ajudar; se você tiver algum problema, é só me avisar. Mais uma vez, eu realmente espero que você tenha gostado da aula e eu estou ansioso para vê-lo novamente no futuro.