1 00:00:00,420 --> 00:00:05,520 Bem-vindo novamente nesta lição, vamos terminar o estilo da página de exibição do acampamento no final 2 00:00:05,520 --> 00:00:06,550 do último vídeo. 3 00:00:06,630 --> 00:00:08,540 Eu mencionei algumas das mudanças que precisamos fazer. 4 00:00:08,640 --> 00:00:10,970 Isso não pode ser abordado com bootstrap puro. 5 00:00:10,980 --> 00:00:13,050 Precisamos adicionar alguns estilos personalizados. 6 00:00:13,050 --> 00:00:18,570 Portanto, precisamos alterar a largura desta imagem aqui para que ele ocupe 100% da miniatura. 7 00:00:18,750 --> 00:00:21,050 Nós queríamos adicionar algum preenchimento aqui. 8 00:00:21,120 --> 00:00:25,050 que deve parecer onde temos preenchimento e você pode ver a imagem ocupa todo o recipiente. 9 00:00:25,050 --> 00:00:25,880 Isto é o 10 00:00:26,280 --> 00:00:31,810 E para conseguir que possamos entrar no mostrado em cada Sim e adicionar uma tag de estilo aqui. 11 00:00:32,280 --> 00:00:34,050 Mas essa não é realmente uma ótima idéia. 12 00:00:34,050 --> 00:00:39,840 Então, em vez disso, vamos adicionar a nossa primeira folha de estilo personalizada e, para isso, vamos fazer 13 00:00:39,840 --> 00:00:42,960 um diretório público como fizemos em uma lição anterior. 14 00:00:43,110 --> 00:00:48,790 Então eu vou fazer o diretório publicar e então vou fazer outro diretório dentro do público. 15 00:00:48,870 --> 00:00:55,350 na frente e Javascript e vamos entrar e então vamos fazer um único arquivo dentro do estilo de estilo 16 00:00:55,350 --> 00:01:00,810 público de folhas de estilo Slash e vamos chamar isso de Dotsie SS. Assim como isso. 17 00:01:00,810 --> 00:01:09,210 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 18 00:01:09,210 --> 00:01:10,000 nosso javascript 19 00:01:10,470 --> 00:01:11,260 ESTÁ BEM. 20 00:01:11,520 --> 00:01:13,040 Agora queremos abrir isso. 21 00:01:13,380 --> 00:01:19,830 Então, vamos abrir o arquivo para cima das folhas de estilo principais principais para nós e vamos começar adicionando algo 22 00:01:19,830 --> 00:01:26,790 realmente óbvio aqui como configurar a cor de fundo para que o corpo seja roxo e economize e então temos que avançar 23 00:01:26,790 --> 00:01:28,140 e conseguir isso conectado. 24 00:01:28,140 --> 00:01:36,790 Então, no caso do aplicativo, temos que adicionar uma linha aqui onde fazemos um aplicativo usar o ponto expresso, está estático. 25 00:01:37,380 --> 00:01:41,790 E então o que fizemos na última vez foi apenas adicionar em público, mas na verdade, uma maneira um 26 00:01:41,790 --> 00:01:44,380 pouco melhor de fazê-lo que eu não queria mostrar de imediato. 27 00:01:44,400 --> 00:01:50,370 Mas eu quero dizer para mostrar agora tudo o que temos a fazer é adicionar um título de sublinhado, o 28 00:01:50,880 --> 00:01:57,050 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. 29 00:01:57,180 --> 00:01:58,630 Então, deixe-me mostrar o que isso parece. 30 00:01:58,800 --> 00:02:07,920 Se eu faço apenas um console, mas registre o rascunho do sublinhado para o seu nome, assim e 31 00:02:07,920 --> 00:02:10,190 salve e reinicie o servidor. 32 00:02:12,000 --> 00:02:13,440 Observe o que eu recebo aqui. 33 00:02:13,530 --> 00:02:19,560 Este é o nome do diretório todo o espaço de trabalho do caminho exuberante do acampamento slash v 5. 34 00:02:19,710 --> 00:02:26,940 Então, adicionando o nome de dir mais barra de público, estamos apenas sendo mais seguros porque, se de alguma forma isso 35 00:02:26,940 --> 00:02:30,390 mudou, o diretório atual ficou estranho, algo que não esperávamos. 36 00:02:30,450 --> 00:02:36,210 O que, espero, nunca faça, mas se o seu nome sempre será o diretório em que o script 37 00:02:36,210 --> 00:02:36,650 vive. 38 00:02:36,900 --> 00:02:41,240 Então, estamos sendo mais seguros e adicionando barra pública e é apenas a maneira mais convencional 39 00:02:41,250 --> 00:02:41,860 de fazê-lo. 40 00:02:42,060 --> 00:02:43,820 Não vamos ver uma diferença. 41 00:02:43,860 --> 00:02:44,920 Então vamos economizar. 42 00:02:44,930 --> 00:02:50,140 Nós podemos nos livrar disso e o que fizemos é adicionado em nossa mente simples. 43 00:02:50,190 --> 00:02:52,390 SS Mas ainda não nos ligamos a ele. 44 00:02:52,530 --> 00:02:54,500 Então, servimos o diretório público. 45 00:02:54,600 --> 00:02:59,460 Agora estamos servindo tudo nesse diretório, que é realmente apenas uma única folha de estilos de pastas 46 00:02:59,460 --> 00:03:01,540 e um único arquivo pode acabar conosco. 47 00:03:01,620 --> 00:03:05,510 Mas agora vamos entrar nesse arquivo e vamos fazê-lo no arquivo de cabeçalho. 48 00:03:05,580 --> 00:03:14,920 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. 49 00:03:14,980 --> 00:03:22,200 Eu vou adicionar uma outra tag de link e esta será H ref iguala as folhas de estilos de barras 50 00:03:24,660 --> 00:03:31,330 cortar o principal C Ss e então também adicionaremos na fila aqui para ser uma folha de estilos. 51 00:03:31,950 --> 00:03:32,500 ESTÁ BEM. 52 00:03:32,850 --> 00:03:38,340 Então, agora estamos ligados a esperançosamente nossa folha de estilo que agora estamos servindo do diretório público. 53 00:03:38,340 --> 00:03:40,680 E vamos testá-lo se ele funcionou. 54 00:03:40,740 --> 00:03:45,350 Ele estará em cada página porque todas as páginas que incluíram o cabeçalho parcial estão incluídas. 55 00:03:45,630 --> 00:03:46,380 Vamos testar isso. 56 00:03:46,380 --> 00:03:48,450 Nós estamos apenas indo para a nossa página de destino. 57 00:03:48,450 --> 00:03:48,980 Aqui vamos nós. 58 00:03:48,990 --> 00:03:55,230 É todo roxo e se vamos ver o nosso acampamento. Há também um fundo roxo totalmente para você, se 59 00:03:55,230 --> 00:03:56,510 quiser mantê-lo como roxo. 60 00:03:56,610 --> 00:03:57,620 Eu vou mudar isso de volta. 61 00:03:57,750 --> 00:04:03,210 Mas vou adicionar o estilo que ganhamos e esses estilos afetarão as miniaturas. 62 00:04:03,210 --> 00:04:07,050 Então estas são as miniaturas, bem como esta miniatura. 63 00:04:07,080 --> 00:04:13,170 Vamos fazer com que a imagem ocupe 100% da largura, tanto na página de exibição como na página 64 00:04:13,170 --> 00:04:18,000 de índice que queremos que aconteça, para que possamos voltar e mudar e avaliar. 65 00:04:18,180 --> 00:04:21,750 Então vamos começar selecionando todas as imagens dentro das miniaturas. 66 00:04:21,900 --> 00:04:25,300 Então precisamos de miniatura porque é uma classe de bootstrap. 67 00:04:25,550 --> 00:04:31,290 E, em seguida, a tag de imagem com o espaço entre eles, que são todas as tags de imagem dentro das miniaturas. 68 00:04:31,290 --> 00:04:36,180 E então queremos definir a largura para ser 100 por cento exatamente assim. 69 00:04:36,300 --> 00:04:42,420 E se nós salvamos e atualizamos e vamos para uma página de exibição, você pode ver nossa imagem agora ocupa 70 00:04:42,420 --> 00:04:43,510 100% dessa miniatura. 71 00:04:43,860 --> 00:04:48,210 Então, precisamos resolver este problema de preenchimento que é realmente fácil de corrigir, também, onde 72 00:04:48,210 --> 00:04:51,820 queremos livrar-se desse espaçamento para fazer isso, precisamos selecionar a miniatura em si. 73 00:04:51,870 --> 00:04:56,350 O thumbnail div e se livra do preenchimento e basta configurá-lo para zero. 74 00:04:56,490 --> 00:05:01,580 Então Dot thumbnail padding 0. 75 00:05:01,890 --> 00:05:02,930 Vamos salvar. 76 00:05:03,120 --> 00:05:05,260 Fique atento a este acolchoado lá. 77 00:05:05,280 --> 00:05:06,130 Agora já se foi. 78 00:05:06,510 --> 00:05:11,230 E se voltarmos para a nossa página de índice, você pode ver que estes também estão acionados. 79 00:05:11,280 --> 00:05:12,980 Nós também não temos nenhum preenchimento. 80 00:05:13,320 --> 00:05:17,100 Pessoalmente, eu prefiro isso sem o preenchimento aqui sem espaço intermediário. 81 00:05:17,250 --> 00:05:22,290 Mas é uma questão de preferência pessoal e se você quer que o espaço de volta, 82 00:05:22,320 --> 00:05:27,910 o que você pode fazer não é aplicar esses estilos neste estilo em particular a cada miniatura. 83 00:05:27,990 --> 00:05:34,290 Em vez disso, você poderia dar na nossa página de exibição, você poderia dar esta miniatura aqui mesmo uma ID ou uma 84 00:05:34,290 --> 00:05:39,280 classe especial e, em seguida, você só aplicaria este preenchimento zero para aquela classe ou duas que ID. 85 00:05:39,480 --> 00:05:44,970 Mas eu vou fazer isso para todos eles e então a outra questão que precisamos resolver é o preenchimento aqui. 86 00:05:45,780 --> 00:05:53,970 Então, dentro deste título, se inspecionarmos, essa é a div que nós criamos pode ver aqui mesmo, é uma legenda 87 00:05:53,970 --> 00:05:55,560 da div divisão completa. 88 00:05:55,770 --> 00:06:00,870 Queremos adicionar algum preenchimento lá e o número que decidimos no último vídeo foi de 9 pixels. 89 00:06:00,930 --> 00:06:02,830 Então, deixe-me fechar o con. Volte aqui e eu apenas vou selecionar 90 00:06:03,030 --> 00:06:08,850 em vez de todos os potros de legenda. Eu só vou selecionar as legendas do título dentro de uma miniatura. 91 00:06:08,850 --> 00:06:11,100 Então Dot thumbnail caption 92 00:06:11,220 --> 00:06:21,690 de espaço cheio e nós vamos dar-lhes preenchimento de nove pixels assim como isso, vamos atualizar a página. 93 00:06:21,690 --> 00:06:23,130 Aqui vamos nós. 94 00:06:23,130 --> 00:06:23,750 Nós conseguimos esse espaçamento que estamos procurando. 95 00:06:23,760 --> 00:06:26,130 Tudo bem. 96 00:06:26,130 --> 00:06:26,390 Então é tudo o que eu queria fazer. 97 00:06:26,400 --> 00:06:27,610 Vamos rapidamente recapitular o que realizamos. 98 00:06:27,780 --> 00:06:29,910 Nós criamos um novo arquivo SS Nazi 99 00:06:29,910 --> 00:06:36,470 principal e colocamos isso dentro do diretório público dentro de folhas de estilo e, eventualmente, terão mais folhas de estilo para 100 00:06:36,840 --> 00:06:41,490 a página de destino em particular e também teremos javascript que também entrarão aqui. 101 00:06:41,490 --> 00:06:43,560 E, em seguida, para realmente 102 00:06:43,680 --> 00:06:49,740 usar o diretório público, temos que interagir Sim Diga expressar para servir o diretório público. 103 00:06:49,740 --> 00:06:50,410 E mostrei-lhe este 104 00:06:50,520 --> 00:06:55,230 título de destaque, sublinhado seu nome e a última coisa é que nós o incluímos no arquivo de cabeçalho. 105 00:06:55,230 --> 00:06:56,660 Está bem aqui e nós nos relacionamos com Slash stylesheets slash maned see SS 106 00:06:56,680 --> 00:07:01,300