Bem-vindo novamente nesta lição, vamos terminar o estilo da página de exibição do acampamento no final
do último vídeo.
Eu mencionei algumas das mudanças que precisamos fazer.
Isso não pode ser abordado com bootstrap puro.
Precisamos adicionar alguns estilos personalizados.
Portanto, precisamos alterar a largura desta imagem aqui para que ele ocupe 100% da miniatura.
Nós queríamos adicionar algum preenchimento aqui.
que deve parecer onde temos preenchimento e você pode ver a imagem ocupa todo o recipiente.
Isto é o
E para conseguir que possamos entrar no mostrado em cada Sim e adicionar uma tag de estilo aqui.
Mas essa não é realmente uma ótima idéia.
Então, em vez disso, vamos adicionar a nossa primeira folha de estilo personalizada e, para isso, vamos fazer
um diretório público como fizemos em uma lição anterior.
Então eu vou fazer o diretório publicar e então vou fazer outro diretório dentro do público.
na frente e Javascript e vamos entrar e então vamos fazer um único arquivo dentro do estilo de estilo
público de folhas de estilo Slash e vamos chamar isso de Dotsie SS. Assim como isso.
Este será chamado de folhas de estilo, de modo que as folhas de estilo de corte público e nós teremos outro eventualmente para o
nosso javascript
ESTÁ BEM.
Agora queremos abrir isso.
Então, vamos abrir o arquivo para cima das folhas de estilo principais principais para nós e vamos começar adicionando algo
realmente óbvio aqui como configurar a cor de fundo para que o corpo seja roxo e economize e então temos que avançar
e conseguir isso conectado.
Então, no caso do aplicativo, temos que adicionar uma linha aqui onde fazemos um aplicativo usar o ponto expresso, está estático.
E então o que fizemos na última vez foi apenas adicionar em público, mas na verdade, uma maneira um
pouco melhor de fazê-lo que eu não queria mostrar de imediato.
Mas eu quero dizer para mostrar agora tudo o que temos a fazer é adicionar um título de sublinhado, o
nome do diretório do nome querido, mais o nome do diretório do barra-ônibus refere-se ao diretório que esse script estava executando.
Então, deixe-me mostrar o que isso parece.
Se eu faço apenas um console, mas registre o rascunho do sublinhado para o seu nome, assim e
salve e reinicie o servidor.
Observe o que eu recebo aqui.
Este é o nome do diretório todo o espaço de trabalho do caminho exuberante do acampamento slash v 5.
Então, adicionando o nome de dir mais barra de público, estamos apenas sendo mais seguros porque, se de alguma forma isso
mudou, o diretório atual ficou estranho, algo que não esperávamos.
O que, espero, nunca faça, mas se o seu nome sempre será o diretório em que o script
vive.
Então, estamos sendo mais seguros e adicionando barra pública e é apenas a maneira mais convencional
de fazê-lo.
Não vamos ver uma diferença.
Então vamos economizar.
Nós podemos nos livrar disso e o que fizemos é adicionado em nossa mente simples.
SS Mas ainda não nos ligamos a ele.
Então, servimos o diretório público.
Agora estamos servindo tudo nesse diretório, que é realmente apenas uma única folha de estilos de pastas
e um único arquivo pode acabar conosco.
Mas agora vamos entrar nesse arquivo e vamos fazê-lo no arquivo de cabeçalho.
Então, eu estou indo às visualizações C9 cortar a barra de corte de Parshall e, em seguida, no topo da cabeça depois do bootstrap.
Eu vou adicionar uma outra tag de link e esta será H ref iguala as folhas de estilos de barras
cortar o principal C Ss e então também adicionaremos na fila aqui para ser uma folha de estilos.
ESTÁ BEM.
Então, agora estamos ligados a esperançosamente nossa folha de estilo que agora estamos servindo do diretório público.
E vamos testá-lo se ele funcionou.
Ele estará em cada página porque todas as páginas que incluíram o cabeçalho parcial estão incluídas.
Vamos testar isso.
Nós estamos apenas indo para a nossa página de destino.
Aqui vamos nós.
É todo roxo e se vamos ver o nosso acampamento. Há também um fundo roxo totalmente para você, se
quiser mantê-lo como roxo.
Eu vou mudar isso de volta.
Mas vou adicionar o estilo que ganhamos e esses estilos afetarão as miniaturas.
Então estas são as miniaturas, bem como esta miniatura.
Vamos fazer com que a imagem ocupe 100% da largura, tanto na página de exibição como na página
de índice que queremos que aconteça, para que possamos voltar e mudar e avaliar.
Então vamos começar selecionando todas as imagens dentro das miniaturas.
Então precisamos de miniatura porque é uma classe de bootstrap.
E, em seguida, a tag de imagem com o espaço entre eles, que são todas as tags de imagem dentro das miniaturas.
E então queremos definir a largura para ser 100 por cento exatamente assim.
E se nós salvamos e atualizamos e vamos para uma página de exibição, você pode ver nossa imagem agora ocupa
100% dessa miniatura.
Então, precisamos resolver este problema de preenchimento que é realmente fácil de corrigir, também, onde
queremos livrar-se desse espaçamento para fazer isso, precisamos selecionar a miniatura em si.
O thumbnail div e se livra do preenchimento e basta configurá-lo para zero.
Então Dot thumbnail padding 0.
Vamos salvar.
Fique atento a este acolchoado lá.
Agora já se foi.
E se voltarmos para a nossa página de índice, você pode ver que estes também estão acionados.
Nós também não temos nenhum preenchimento.
Pessoalmente, eu prefiro isso sem o preenchimento aqui sem espaço intermediário.
Mas é uma questão de preferência pessoal e se você quer que o espaço de volta,
o que você pode fazer não é aplicar esses estilos neste estilo em particular a cada miniatura.
Em vez disso, você poderia dar na nossa página de exibição, você poderia dar esta miniatura aqui mesmo uma ID ou uma
classe especial e, em seguida, você só aplicaria este preenchimento zero para aquela classe ou duas que ID.
Mas eu vou fazer isso para todos eles e então a outra questão que precisamos resolver é o preenchimento aqui.
Então, dentro deste título, se inspecionarmos, essa é a div que nós criamos pode ver aqui mesmo, é uma legenda
da div divisão completa.
Queremos adicionar algum preenchimento lá e o número que decidimos no último vídeo foi de 9 pixels.
Então, deixe-me fechar o con. Volte aqui e eu apenas vou selecionar
em vez de todos os potros de legenda. Eu só vou selecionar as legendas do título dentro de uma miniatura.
Então Dot thumbnail caption
de espaço cheio e nós vamos dar-lhes preenchimento de nove pixels assim como isso, vamos atualizar a página.
Aqui vamos nós.
Nós conseguimos esse espaçamento que estamos procurando.
Tudo bem.
Então é tudo o que eu queria fazer.
Vamos rapidamente recapitular o que realizamos.
Nós criamos um novo arquivo SS Nazi
principal e colocamos isso dentro do diretório público dentro de folhas de estilo e, eventualmente, terão mais folhas de estilo para
a página de destino em particular e também teremos javascript que também entrarão aqui.
E, em seguida, para realmente
usar o diretório público, temos que interagir Sim Diga expressar para servir o diretório público.
E mostrei-lhe este
título de destaque, sublinhado seu nome e a última coisa é que nós o incluímos no arquivo de cabeçalho.
Está bem aqui e nós nos relacionamos com Slash stylesheets slash maned see SS