Bem-vindo novamente nesta lição, vamos usar o bootstrap para criar uma página de destino para uma inicialização fictícia.
Nosso arranque é chamado de correspondência perfeita.
Muito engraçado.
Eu sei que é um aplicativo de namoro de felino humano e deixarei isso para você interpretar o que namoro
de felino humano pode ser relativamente inócuo, poderia ser apenas combinar os gatos de Sheldrick com seres humanos solitários poderia ser
outra coisa.
Eu não sei.
Vamos começar fazendo um rápido passeio pelo site e escrevemos para ela.
Realmente apenas quero dizer apontar alguns recursos.
Não há muito aqui.
Na verdade, não temos isso conectado, não faz nada ainda.
Então, é realmente apenas mounseers HD, mas isso é tudo o que cobrimos até agora.
Então, temos o suficiente na nossa casa de combinação perfeita sobre os comprimentos de incontact.
Eles na verdade não vão a qualquer lugar se inscrever e logar no lado direito dois pequenos ícones lá, nós
conseguimos seu hambúrguer.
Posso clicar nele.
Todos esses links estão agora dentro desse hambúrguer.
Então temos uma grande imagem de fundo que permanece centrada e cobre todo o plano de fundo.
Então, no meio, temos o nome da nossa combinação perfeita com o nosso e, em seguida, temos nossa legenda O
único feed humano no aplicativo de namoro.
E então temos um pouco H R aqui regra horizontal e, em seguida, um botão para começar com um ícone.
E enquanto encolho isso, tudo fica no meio e também se move um pouco para que não tenhamos algum tipo
de layout estranho no seu dispositivo móvel, onde o texto começa a meio caminho da página.
Então, movemos um pouco e permanece centrado.
Esses layouts são realmente fáceis de fazer e inicializar, mas é relativamente eficaz para a página de destino.
Tudo o que temos é uma única coluna que ocupa toda a largura.
Então, esta coluna passa por 12 unidades.
Não estamos dividindo isso em nenhuma seção apenas para uma coluna de 12 unidades e, em seguida,
concentramos tudo dentro dessa coluna.
Então vamos começar.
A primeira coisa que precisamos fazer é fazer um arquivo.
Eu tenho um índice chamado no DML.
Eu adicionarei isso em minha partida normal e
melhorarei e adicionarei no Bootstrap e
usarei CDN Bitstrips CDN.
Vamos fazer o SS e o Javascript aqui.
Nós precisaremos desse javascript para a barra de tarefas.
Então precisamos ligar a tag.
Então, obtemos o javascript.
Entendido.
Coloque isso na parte inferior, que é uma etiqueta de script e, em seguida, estabelecemos a fonte igual à que você é.
Agora, se abrimos isso, abra o console, temos um pequeno problema, que é necessário que a Jay consulte
também para o javascript bootstrap.
Lembre-se da lição da barra de navegação que precisamos para exigir J.
Querrey.
Então, obteremos um CDN para isso.
Vamos fazer a versão modificada.
Copie esse URL.
E, finalmente, voltamos aqui e temos que fazê-lo antes do vinculado ao bootstrap para o javascript.
Caso contrário, ainda não saberá sobre sua consulta, então ele precisa carregar a consulta primeiro.
Agora vamos tentar de novo.
Atualização de incêndio.
OK, não vemos nada que seja um bom sinal porque não vemos erros.
Vamos começar com o texto no meio.
Todo esse conteúdo aqui.
para o contêiner de classe de ECO de div e, em seguida, dentro de lá, temos outra div, sempre precisamos dessa linha.
Então, precisamos criar um recipiente e, em seguida, dentro do recipiente, precisamos de uma linha
Sempre que estiver usando o sistema de grade e, em seguida, nossa div que vai ser classe igual a 12
da coluna.
E isso abrangerá todo esse contenedor.
E então, dentro, se eles tiverem um H1 que apenas dirá uma combinação perfeita e salve.
E vamos deixá-lo naquele refresco.
E não é realmente o que queremos ainda e isso é porque há algumas coisas que precisamos fazer.
O primeiro é que precisamos centrar tudo naquela coluna.
Então, se nós inspecionamos o que estamos lidando aqui, você pode ver que o H1 vai todo o caminho
e precisamos apenas centrá-lo dentro disso.
E o segundo é que precisamos empurrá-lo um pouco.
Precisamos adicionar algum preenchimento ou margem, de modo que não vá diretamente ao topo da nossa página.
Vamos começar adicionando o resto do conteúdo.
Então, também temos o único aplicativo de namoro felino humano e isso só será um
H 3 e poderemos realmente jogar com esse elemento que queremos, mas vou tornar um H-3 o único aplicativo de
namoro felino humano.
E então, podemos adicionar essa regra horizontal que não parecerá muito, mas vamos desenhá-la depois
do fato e então também adicionaremos um botão na classe nesse botão.
Demos uma olhada.
Este é um botão de bootstrap padrão e é um botão grande.
Vamos voltar.
Então, precisamos de PTEN e, em seguida, a cor padrão e, em seguida, o tamanho entre o LG para grande e
aqui, vamos apenas adicionar o
texto que é iniciado e salvar, vamos ver o que acabamos.
Tudo bem.
Então, temos nosso conteúdo agora próximo, mas Centro dentro da grade.
E então nos concentraremos no preenchimento e desceremos.
Mas para começar com o centro dentro desta grade e para facilitar isso, vou agrupar tudo dentro
de uma div para que não tenhamos que centrar cada coisa individualmente.
Temos que centrar o H-1 e, em seguida, os três e, em seguida, o botão em vez disso, podemos agrupar em um div
e apenas Centro que div com uma linha.
Vamos fazer uma div e vou dar uma identificação de Cantet e então vamos colocar tudo dentro de lá.
Então, o H-1 com a idade de 3 anos. R. e o botão irá recuar corretamente e salvar.
Então, nada deve parecer diferente se eu atualizar a página antes de fazermos isso, vamos adicionar nossa folha de estilo.
Então eu adicionei uma tag de link e ligarei para o meu aplicativo de folha de estilo.
SS Ainda não existe.
Então eu preciso fazê-lo salvá-lo.
Eu vejo SS no mesmo diretório.
E vamos começar com algo simples, como todos os h são roxos.
Apenas para ter certeza de que ele funciona.
Voltemos a atualizar.
Andrew obtém um H-1 roxo.
Ótimo.
Então, agora vamos selecionar aquele Dave que adicionamos com a ideia de conteúdo e centrá-lo.
Então, se livrar disso e precisamos de um conteúdo de ID e omitindo fazer é que o texto alinhe o Centro.
Vamos voltar.
Aqui vamos nós.
Então, as coisas estão alinhadas no Centro até agora.
Em seguida, vamos pressionar isso um pouco 25 por cento abaixo da página para ser exato com preenchimento igual a 25 por cento.
Então, aqui vamos fazer o preenchimento superior a 25%.
E ao invés de dar um número difícil de pixels, se o mantivermos como uma porcentagem é
um pouco mais receptivo.
Então está bem no centro.
E então, 25% mudam à medida que redimensionamos a tela.
Ótimo.
Agora vamos adicionar a imagem de fundo.
Então, a imagem que eu uso é uma adorável interação de gato e humano que acontece aqui é a partir deste
no site Splash que eu introduzi no último video onde criamos a grade de imagem do bootstrap.
E eles têm todo tipo de imagens realmente excelentes de alta qualidade que você pode usar sem qualquer problema.
E aquele que eu uso é aqui mesmo, eu também busco links de gato nessa descrição.
Aqui está o Aro desta imagem apenas clique direito copie a imagem que você é l.
Agora vamos voltar e eu vou adicioná-lo ao corpo como uma imagem de fundo.
Então, basta e depois dê uma URL que é aquele gigante Você está ali mesmo.
atualizamos, temos uma imagem de fundo gigantesca e tudo o que podemos dizer é que este é um tipo de inicialização para as unhas.
E se deixarmos isso, é forma neste nível ou
Então, precisamos redimensioná-lo e, para isso, usamos o tamanho do fundo e alteramos isso para ser abordado de novo.
Mais uma vez, estamos nos aproximando.
Isso tornará a imagem tão pequena quanto possível enquanto ainda cobre toda a largura e altura
da tela.
Portanto, não vai mudar a proporção de aspecto, não irá distorcer a imagem de qualquer maneira, mas ela se estenderá em ambas
as direções tanto quanto necessário.
Mas o montante mínimo que precisa para caber na nossa tela e ainda não é perfeito.
E o que queremos fazer não é alterar o tamanho, mas mudar a posição.
Vamos centralizá-lo no centro de posição do fundo, mas salve que estamos mais próximos.
Mas ainda não é uma combinação perfeita na medida em que a imagem vai.
E essas mudanças virão mais tarde.
Por enquanto, quero me concentrar na adição na barra de navegação e para fazer isso quando você vai aos documentos
do Boucek e vai aos componentes e já mencionei isso antes.
Eu sempre faço isso se eu estiver adicionando uma barra de navegação do bootstrap.
São coisas demais para lembrar o contrário.
E eu apenas copiei isso aqui.
Levará o nav inteiro para começar a voltar para o nosso aplicativo aqui e simplesmente colocá-lo no topo.
Este definitivamente não é o NAF que queremos, mas contém as peças que queremos atualizar.
Está perto o suficiente.
Então, há algumas mudanças que queremos fazer.
O primeiro e mais fácil é que o nosso conteúdo na solução está em um recipiente para que ele não
vá até as bordas, como o faz aqui.
você pode ver isso porque nós adicionamos nesse recipiente que agora temos algum espaçamento exatamente como fazemos aqui na solução.
Então, podemos voltar e inserir ou simplesmente mudamos isso para ser um contêiner de classe div e,
se voltarmos agora,
Agora vamos trabalhar no conteúdo atual do Nev. Então, a coisa mais fácil é mudar a
marca que, agora mesmo, diz que a Brand está aqui, esta classe de linha é igual à marca neth bar e a substituiremos por uma correspondência fixa e salve.
Experimente.
Tudo bem.
Agora vamos nos livrar desse formulário.
Não precisamos disso.
Então nossa forma tudo começa aqui.
Descarte-se de tudo isso, atualize.
Vamos também livrar-se do menu suspenso.
Você não precisa disso.
Então isso começa aqui.
Esta mentira que termina
é nova novamente.
Agora temos um único link.
Então vamos começar com esses dois links que deveriam ser inscrever e logá-lo.
Esse é o link aqui mesmo para que possamos mudar aquele para se inscrever e depois duplicá-lo.
Apenas um aliado com uma marca de âncora dentro dela.
E este será logado.
Vamos verificar isso.
Ótimo.
Então, os ícones aparecerão no final.
Nós temos os dois links.
Agora precisamos de três links aqui.
Nós já temos dois deles e vamos nos livrar desse menu suspenso.
Então, precisamos de casa em contato.
Então, localize esse menu suspenso que está aqui.
A classe é igual ao menu suspenso.
Vamos nos livrar disso e agora o Akbar simplificou muito.
Agora temos dois comprimentos diferentes.
Nós realmente vamos nos livrar de ambos e fazê-lo do zero.
Então, vamos adicionar um aliado com uma marca de âncora e então vamos fazer isso três vezes.
Este primeiro deve dizer casa.
A próxima é sobre.
E o último é o contato.
Vamos verificar isso.
Lá vamos nós três comprimentos.
Uma coisa menor.
A casa deve ser ativa e um bootstrap muito fácil.
Tudo o que temos a fazer é adicionar a classe igual a ativa
para o aliado, não a marca de âncora, mas o aliado principal e agora acabamos com o lar sendo o link ativo.
Ótimo.
OK, então
é nossa barra de navegação e se nós redimensionarmos, você verá que já temos esse hambúrguer trabalhando bem.
Nós temos um problema que é que nossa imagem de fundo está desarrumada.
Vamos cobrir isso em apenas um pouco, mas temos o hamberger funcionando bem.
Tudo parece bem.
Agora vamos abordar a fonte, então a fonte que usei aqui é Ledo L. UMA. É de fontes do Google, então eu vou para as fontes do Google e busco o Ledo.
LA T-O a cada coleção.
Vamos usá-lo se ele for normal e ousado.
Também queremos que o nosso H-1 seja ousado.
OK.
E então vamos adicionar este link diretamente ao seu aplicativo.
Topo aqui, salve agora, insira aplicativos. Avalie que vamos aplicar essa fonte a tudo.
Então eu vou selecionar dentro da família de fontes do corpo é Ledo e vamos ter certeza de que está carregando corretamente.
Veja o que temos atualizado.
E nossa frente muda, é difícil de ver porque o texto está escuro, mas mudou, você também
pode vê-lo no NFR aqui.
Isso mudou.
Ele corresponde ao que temos nesta solução.