Bem-vindo novamente nesta lição Eu vou mostrar-lhe um dos componentes mais importantes e amplamente utilizados
em todo o Bootstrap, que é o NFR, para que você possa ver realmente adquirir o Boucek dotcom.
Eles usam componentes de barras suficientes aqui.
Nós também vamos usar um em nosso aplicativo de campo de Yelp e como eu redimensionou a barra de navegação.
Observe o quão sensível é e, em seguida, perceba assim que acertei TAB sobre o tamanho e tamanho do celular
que obtemos este bom Hamburger.
Então, vamos trabalhar em direção a tudo isso nesta lição.
Mas vamos começar mais simples.
A primeira coisa que precisamos fazer é ir para os componentes e ir para a barra de navegação e antes de irmos muito além, eu
criei um novo arquivo apenas porque estaremos escrevendo um pouco de código.
O velho estava ficando desordenado.
Eu estou chamando naff Bar H T M L.
Dentro de tudo o que eles têm, o link para bootstrap não altera o título aqui.
Apenas chamo de bootstrap Nav.
Bem desse jeito.
Agora vamos aos documentos e veja a barra de navegação padrão.
Então, este exemplo mostra todas as características importantes onde podemos ter um link de marca.
Podemos ter outros links que podemos ter caído nos menus.
Podemos ter uma forma de barra de navegação e um botão, podemos ter coisas do lado direito que
estão no lado esquerdo.
Isso realmente mostra tudo.
É a pia da cozinha das barras de bootstrap naff e conseqüentemente a marcação é um pouco longa.
Nós estaremos trabalhando com todas essas peças até o final deste vídeo.
Mas eu quero começar mais simples e vou começar por mostrar-lhe a maneira mais simples de fazer um número.
Portanto, precisamos criar um elemento de navegação e esse elemento de NAV precisa ter duas classes, queremos barra de navegação e
barra de navegação, e podemos começar com o padrão de Dasch irá salvar.
E agora vamos ver o arquivo no navegador e atualizar.
Você pode ver, espero que ele apareça e screencast, há barra muito fraca no
topo, então é assim que nós realmente inicializamos o NF bar.
Agora vamos preenchê-lo com algum conteúdo.
A primeira coisa que vamos dar uma olhada é como podemos adicionar nesta marca aqui.
Basicamente o nome da sua empresa.
Na maioria dos casos.
E isso está usando um cabeçalho de barra de navegação e, em seguida, dentro do cabeçalho NFR usamos uma marca de barra de navegação.
Então, comece adicionando que a classe div é igual ao cabeçalho do barramento do barra de navegação e, em seguida, dentro de lá, vamos adicionar na marca da
barra de navegação, que é uma marca de âncora.
Normalmente, quando você clica no nome dessa empresa, você o leva de volta à página inicial.
Então, vamos fazer isso aqui e nós começaremos com um tráfego igual ao Thorpes para que não nos
leve a lugar nenhum.
A classe será igual à marca nav bar dash e nós faremos o nome da empresa.
Vamos ver se eu consegui uma xícara de café à minha volta, então vamos com café.
Mas para realmente fazer uma verdadeira inicialização, precisamos mudar um pouco a ortografia.
OK, Alex.
Bom o suficiente para mim.
Café com K.
Vamos dar uma olhada.
Atualize e agora temos nossa marca de barra NAV que é um link.
Eu clico nele.
Não me leva em nenhum lugar agora, mas, eventualmente, nossas aplicações o terão para que, quando
você clicar no nome da empresa, você voltará para a página inicial seguinte.
Vamos ver se podemos adicionar alguns outros links, como o contato.
Inscreva-se para registrar-se.
Todos esses links comuns no bar.
Vamos começar por adicionar um link sobre a página aqui.
Então, vamos voltar e depois, fora do cabeçalho da barra de navegação, vamos fazer outra div nesta div irá
coletar todo o conteúdo pelo menos no lado esquerdo da nossa barra NAV.
Então, temos o cabeçalho e depois teremos algum conteúdo e, se quisermos algo no lado
direito, teremos outra div que tem outra classe.
Então, aula aqui.
Na verdade, dois queremos nav e nav bar dash nav.
Não me pergunte sobre a nomeação de seu nav bar dash nav.
É uma das grandes críticas do bootstrap, é que é um pouco feio e que não é muito
significativo às vezes.
que foi criada em resposta à falta de sentido semântico do bootstrap se você chamar UI semântica.
E, na verdade, existe uma estrutura CSSA
E essa é uma que eu também gosto muito.
E eu debato o ensino.
Mas, no final, não é tão amplamente utilizado que ainda não são bons tutoriais.
Então volte para o nosso diff aqui.
Classe nav bar nav e a classe nav ambos.
E, em seguida, para cada item que queremos nessa NFR, precisamos adicionar um aliado e, em seguida, dentro do Y se quisermos ligar,
acabamos de ter uma marca de âncora.
Então, este nunca vai a lugar nenhum.
Mais uma vez e isso será para a página About.
E se eu voltar e atualizar, agora temos um link para adicionar um mais para entrar em contato, salve novamente.
Agora temos dois links agora vamos continuar e adicionar algo no lado direito da página.
Vamos adicionar dois links para registrar ou assinar e outro para entrar no lado direito da barra para
fazer isso.
mais convencional usar um, você vai funcionar exatamente da mesma maneira, mas você quer ter aliados em vez de um bem,
embora eles funcionem bem com um div faz um um pouco mais de sentido para ser em vez de uma UL.
Nós precisamos de um recipiente não válido aqui e, na verdade, em vez de usar divs, é
Então, vamos adicionar outra UL e esta será Nav. nav bar dash nav e depois nav bar
dash.
Certo.
E precisamos ter certeza de que solemos isso de maneira correta, caso contrário essa classe não terá efeito.
Então, o que isso vai fazer é tornar-nos um novo grupo de conteúdo para o lado direito da barra de navegação.
E agora só precisamos preenchê-lo.
Então, vou adicionar dois links tanto em edgewise.
O primeiro não vai a lugar nenhum e ele vai se inscrever e depois teremos outro que apenas diga
que logue.
Vamos dar uma olhada.
Atualize a página e veja que temos conteúdo à direita.
No entanto, está correto contra a borda e para consertar que podemos adicionar em um recipiente a uma barra
suficiente, assim como usamos o recipiente anteriormente para adicionar algum espaçamento ao nosso conteúdo principal.
Poderíamos adicionar um em vez de uma barra de navegação.
Então eu coloco tudo na barra neph em vez de um recipiente.
Então a classe é igual ao recipiente.
Basta mover isso para baixo.
Verifique se tudo está sangrando corretamente.
Aqui vamos nós.
Vamos testá-lo.
Agradável.
Então, agora tudo está bem centrado e corretamente.
Vou mostrar-lhe se eu adicionei o recipiente fora do navegador e eles colocaram toda a barra de navegação dentro.
Veremos o que acontece.
Agora, se eu estivesse em bares frescos, eu realmente cortei e só faz parte do caminho do outro lado da rua.
Então, o recipiente fará isso com o que colocamos dentro dele.
E, neste caso, queremos o recipiente dentro da barra de navegação, de modo que não constrict
a autenticidade real naff, mas está restringindo o conteúdo dentro dela.
ESTÁ BEM.
Então, nós temos o nosso Hetter, temos o material à esquerda e temos algum conteúdo à direita para que você
possa ver aqui.
Agora, que passo um pouco e vá e pegue esta barra de navegação básica ou a barra de
navegação padrão que eles têm nos documentos e vamos copiar tudo isso e eu vou simplesmente colocá-lo bem abaixo agora estão longe, faça
algum espaço.
Muitos comentários para torná-lo mais claro.
Barra de navegação padrão.
E vamos ver isso atualizar.
Então é este bar de navegação aqui e há algumas coisas que eu quero destacar.
Um deles é que caímos nos menus, mas na verdade eles não funcionam.
E também quando redimensionamos a janela, obtemos o menu de hambúrguer aqui.
Esses links desaparecem.
O formulário desaparece e para revelá-los, precisamos clicar aqui.
Mas isso também não funciona.
Então, comece por conseguir que funcione e depois falaremos sobre todas essas peças diferentes e sobre o que
elas fazem para que elas funcionem.
Precisamos ir e incluir o arquivo javascript do bootstrap.
Então, se voltarmos para os documentos do bootstrap, clicaremos no download.
Há também um arquivo javascript que precisamos do que está aqui.
Vou usar a versão Cdn, mas também vem dentro da pasta que você baixar.
É chamado de bootstrap.
Sim.
Ou a versão minimizada arrancou Mencius.
E vamos adicionar isso e vamos fazê-lo no fundo do nosso corpo e salvar.
E eu sei que não falamos sobre javascript.
Você não sabe o que é um script e qual a fonte aqui não importa.
Nós vamos apenas conectá-lo ao bootstrap.
E agora a nossa atualização.
Podemos resolver um pequeno problema que eu vou mostrar aqui, nos diz que o javascript de bootstraps
requer consulta.
Não se preocupe com o que é isso e como chegou a esta mensagem.
Mas eu só quero mostrar isso para que você veja a mensagem real que recebemos.
Precisamos exigir uma consulta J, da qual também não falamos.
Mas é fácil o suficiente para ir e pegar.
Não precisamos escrever nenhum javascript.
Você não precisa saber nenhum javascript.
Nós apenas precisamos incluí-lo.
Então, tudo o que precisamos fazer é pesquisar Jay consultas CDN que está no código que Jay dot com
e aqui em baixo precisará selecionar a versão mais recente e copiar este URL.
Este é o arquivo Querrey e então voltaremos aqui.
Vamos adicionar outra dessas tags de script.
Basicamente copiando este código exato.
Na verdade, vou fazer isso para facilitar a duplicação dessa linha exata e alterar essa url para ser a consulta
jey que você é.
Se tudo mais falhar, você pode apenas digitar isso.
Não é tão ruim se você é l, mas obtive isso procurando por Jay queer CDN e economizaria e
isso precisa vir antes do arquivo javascript do bootstraps porque ele depende de uma consulta.
Então, mais uma vez, não se preocupe muito com o que funciona como é a consulta Jay.
Tudo isso acontecerá alguns minutos depois.
Mas para tirar o máximo proveito do bootstrap e, em particular, das barras de navegação e do menu suspenso.
Nós só precisamos ter essas duas linhas sempre que estiver usando isso, então vamos voltar agora e atualizar.
Em primeiro lugar, são largados nos menus agora funcionam, como você pode ver, agora temos menus suspensos.
Nós não vamos falar sobre isso neste vídeo, mas como eu redimensiono e recebo esse hambúrguer.
O hambúrguer agora funciona quando eu clico nele.
Isso alterna esse material oculto.
Então, a maneira como ele funciona aqui é esse pequeno ponto de interrupção aqui onde todo
esse conteúdo esconde e tudo o que vemos é o cabeçalho e esse botão.
então, quando clicamos no botão, todo o conteúdo anteriormente escondido reaparecer Vamos conseguir que isso funcione.
E
Agora para nós.
Mas vamos fazer uma versão muito menos complicada onde queremos apenas esconder esses quatro
links para que, quando redimensionarmos esses quatro links, estivéssemos ocultos e, então, muito rápidos, serão exibidos.
Para fazer isso começando por dar uma olhada em como é que realiza nesta versão padrão este gigante
gigante de uma barra de navegação.
E eu vou apenas apontar a linha importante aqui.
barra de navegação o que colocamos dentro desta div será desmoronado quando atingiremos o tamanho do celular para que ele não faça o botão para nós.
O colapso da classe Div o colapso da
Não vai fazer a mudança no reaparecer em esconder, mas ele irá esconder o conteúdo que
colocamos dentro dele quando atingimos esse tamanho de tablet e celular.
Então, vamos copiar isso e precisamos envolver o conteúdo que queremos esconder
e queremos esconder isso aqui.
Estes dois Juelz Então, os quatro links que queremos esconder quando atingimos esse tamanho de tela menor.
Então, adicione a etiqueta de fechamento e salve e há uma linha aqui e isso é importante e eu chegarei a isso
em apenas um momento.
Não nos impactará ainda, mas se atualizarmos.
Você verá.
Agora, quando eu redimensiono, há um ponto aqui mesmo onde todo esse conteúdo dentro da divisão do colapso
vai embora.
Agora não reaparece.
Nós não recebemos esse hambúrguer.
Nós não conseguimos clicar em nada além de ter entrado em colapso.
E é por isso que adicionamos nesta linha aqui o colapso da barra de navegação do div colapso da classe.
A próxima coisa que precisamos fazer é adicionar no hambúrguer e é um pouco de código.
Infelizmente, ainda é muito melhor do que se tivéssemos de fazê-lo nós mesmos.
Mas o hambúrguer é realmente tudo isso aqui.
Então eu vou copiar isso e colá-lo dentro de uma soneca ou Hetter antes do nosso café incontact.
E salvaremos, voltarei ao que faz.
Vamos apenas atualizar.
E agora, se eu redimensionar eu recebo o hambúrguer.
Aqui vamos nós.
Agora, deixe-me explicar um pouco sobre como funciona.
Então, há um botão e então, dentro desse botão, há três intervalos e cada um
é responsável por fazer uma dessas barras.
Portanto, não é uma imagem que estamos vendo aqui. Na verdade, é cada equipe que está fazendo essa pequena espada
que está sendo desenhada naquelas barras estreitas para fazer esse hambúrguer.
E então, no que diz respeito à exibição e esconder o conteúdo quando clicamos nele,
o que é realmente importante é que temos esse atributo de destino de dados e tudo o que está definido no nosso exemplo B-S.
Agora, para o nosso colapso, um exemplo de bootstrap, rede para o nosso clube e vamos apenas mudá-lo para sim.
Nav. demo assim.
Então, precisamos alterar a ID do conteúdo que queremos realmente colapsar, que queremos
mostrar e esconder.
Então eu vou mudar para combinar vs demonstração de navegação.
Observe uma diferença importante.
Nós não estamos adicionando no Arctic Thor. Então, é como CSI s quando selecionamos algo com C diz que precisamos
usar esse Octa Thorpe para segmentar um ID, então deixamos o ID como apenas o texto do nome.
Agora, se demo aqui adicionarmos isso ao Thorpe, ele irá economizar a atualização.
Agora, se eu redimensionar nós conseguimos o hambúrguer e eles clicam nele e isso funciona para alternar essa exibição e esconder.
Ótimo.
A última coisa que lhe mostrará é que se mudarmos algo fora desse colapso.
Então vamos tomar esses links aqui.
A conta ou o contato e o contato e nós apenas movemos aqueles aqui mesmo fora do colapso div e
eu atualizo posso ver que eles realmente não colapsam eles ficam lá e então eu clico sobre isso e os outros dois que
são em vez do colapso são alternados.
Agora não digo que isso pareça bom, mas ilustra a importância desse colapso div. possamos no nosso caso para diferentes links para a direita ou à esquerda.
Então, o que quer que tenha acontecido o lado do colapso ou o que quer que
Todos eles vão entrar em colapso quando atingimos esse tamanho móvel menor.
E, em seguida, para torná-los novamente, clicamos neste botão aqui e esse botão
tem um atributo de destino de dados e qualquer ID que isso corresponda será escondido e mostrado quando clicarmos sobre isso.
E essa é a ideia aqui.
OK, uma maratona tão gentil.
Muitas coisas que vão fazer uma barra de navegação bootstrap.
arquivo e dissecando peças dele.
Mas, novamente, a maneira como chegamos lá foi simplesmente copiando isso em nosso
E é assim
que fazemos o suficiente são praticamente todas as vezes em que tomamos esse exemplo de código e descobrimos quais peças precisamos e vamos a partir daí.