Bem-vindo alguns de nós, o vídeo que obtivemos, o aplicativo de blog criado criou nosso modelo de blog e adicionamos o
modelo de índice neste vídeo.
Na verdade, ainda não vamos adicionar novas rotas.
Isso será muito rápido, mas queremos adicionar nosso cabeçalho e rodapé Parshall's.
E então eu quero incluir UI semântica também.
E, finalmente, vamos adicionar uma barra de navegação realmente simples no topo.
Então, vamos começar, queremos criar nosso cabeçalho e rodapé que Ejay como arquivos.
E isso deveria estar dentro, se os diretórios exibidos.
Então, vamos fazer uma barra de seleção de diretório. Por favor, clique em Parshall e toque em exibições. Barra de Parshall. Heter que Ejay nós
e, em seguida, toque as vistas, barra de Parshall rodapé E. J. Ótimo.
Agora vamos abrir esses.
Vamos começar com o cabeçalho.
E por que o esqueleto básico tão HD foi um título de cabeça de metal.
Vamos chamá-lo de aplicativo de blog e então precisamos do nosso corpo assim e vamos mudar isso
para o rodapé para que possamos cortar isso de vez em quando para que possamos saber que está funcionando.
que em todas as páginas saberemos que o fizemos corretamente.
Vamos adicionar apenas um parágrafo no topo que diz do arquivo de cabeçalho e se vemos
Agora vamos abrir o rodapé, colar isso e podemos fazer
o mesmo de salvar o rodapé.
Agora precisamos vincular isso e vamos fazê-lo em nosso índice para começar.
Então, no topo, precisamos ter nossa inclusão e nosso caminho é que estamos em vez de usar no arquivo de índice.
Então, nós só queremos um slash de ponto slash slash cabeçalho.
E então a mesma coisa aqui, a barra de Parshall para isso.
Vamos testá-lo sem nenhum problema até agora e obtemos do arquivo de cabeçalho do pé ou cinco.
Ótimo.
Agora vamos adicionar UI semântica.
Então, eu tenho esse site semântico de UI, abre a Dasch semântica com ponto com.
E, assim como o bootstrap, podemos baixar os arquivos ou podemos incluir um CDN semântico UI CDN.
Basta clicar neste primeiro exemplo e você notará que
há muitos arquivos diferentes que podemos escolher.
você quer é
depois da nossa seção ou você quer apenas os formulários, você pode apenas tomar essa barra de componente componente única formada.
E isso porque a forma como a UI semântica está organizada da maneira que foi projetada é que, ao contrário do bootstrap, se tudo o que
SS Então você não precisa de tudo
o que é uma das críticas do bootstrap é se você quiser apenas uma pequena peça, você ainda precisa levar a biblioteca inteira.
Mas queremos toda a biblioteca.
Então, se você se deslocar
para baixo em todos esses idiomas, você quer aquele que diga semântico que o CDN que, se você apenas fizer uma pesquisa ou
uma semântica, conseguiu reavaliar o que está aqui mesmo, é difícil de encontrar se você não sabe ou está procurando, mas basta fazer uma pesquisa.
Na verdade, não demoro uma versão minuciosa para tornar as coisas mais rápidas.
Então, é semântico que os homens vejam avaliar
e nós copiamos o seu Erl e nós vamos colocá-lo acima em nosso arquivo de cabeçalho dentro da cabeça.
É uma marca de comprimento.
E queremos que seja um link e, em seguida, a referência é igual a essa.
Sim Sim.
E também devemos adicionar o tipo de folha de estilo rel igual à barra de texto.
C Ss Então agora nós salvamos e reiniciamos o servidor novamente.
mudanças, assim como quando instalamos o bootstrap, a fonte muda um pouco.
Dê uma olhada na nossa página inicial, você verá algumas pequenas
ESTÁ BEM.
Então,
isso significa que estamos funcionando, vamos nos livrar de nossos parágrafos no cabeçalho e no rodapé e, em vez disso, vamos adicionar uma barra de navegação simples na fila.
Agora, é claro, chamamos de menus.
Então, se nós vamos aqui,
clique no menu todos os componentes diferentes e queremos encontrar o menu que está no menu da coleção.
Você pode ver que existem alguns tipos diferentes de menus.
Há um menu que é o que você vê aqui.
Há um menu Poynting que existe uma tradução em texto tabular.
E há um pouco mais, tudo o que precisamos, é fazer com que o
topo do nosso corpo seja um div e vamos conseguir isso corretamente.
Kate faz a classe igual a você.
Eu reparei e vamos fazer um menu invertido que apenas muda a cor, como no bootstrapped.
Você poderia dizer em verso e então dentro de lá precisamos de outra div.
E este terá classe igual a seu recipiente, que é como um recipiente com bootstrapped.
E, em seguida, em vez de lá, eu vou ter outro div e este terá classe igual ao item Hetter.
E isso é como a marca da barra de navegação no bootstrap.
Então, tudo o que queremos, blogue o blog ou o que quisermos que nossa aplicação seja chamada.
E então, depois disso, adicionaremos uma marca de âncora para a página inicial
e nós vamos chamá-lo de casa e nós adicionaremos na classe igual a item e então faremos a mesma coisa, exceto em vez de
cortar isso. Ir para barramentos de barras cortar novo que ainda não existe e será novo ou novo Blog frio.
Esse será o texto que vemos.
OK, então você não está fixo no menu invertido.
Um recipiente em vez disso.
E, então, dentro do recipiente, na verdade, devemos ter todo esse pequeno erro da minha parte.
Então, queremos que esteja lá também.
Está tudo no recipiente.
E então temos o nosso cabeçalho e, em seguida, temos dois itens que estão ancorados Tex.
Vamos dar uma olhada nisso agora.
E nós recebemos nossa barra de matemática simples.
Sim, temos um problema aqui com algum espaçamento.
Nós lidaremos com isso em apenas um momento, mas temos um agora, onde funciona bem.
Vamos adicionar um ícone simples que em semântica Vocês são apenas chamados de ícones.
Há um monte deles no que eu usei.
É chamado de Código.
Tente encontrá-lo aqui e faça apenas uma pesquisa.
Aí está.
Mas sinta-se livre para escolher o seu próprio caso queira comentar.
A idéia era que era um blog baseado em código, mas pode haver outra coisa.
Eu também gosto da idéia.
De qualquer forma, há um monte de eles.
O que é bom é que eles também têm um monte de ícones para empresas que são úteis.
No fundo eu acho que eles os têm e nós vamos para toneladas de
marcas diferentes e empresas comuns que você teria ligado em sua aplicação.
ESTÁ BEM.
Então, é um código para o ícone e vou adicionar isso logo ao lado do cabeçalho do blog.
Então, aqui, teve seu item e tudo o que precisamos é uma marca de olho.
E precisa ter uma classe de código e um ícone.
Então, realmente simples, apenas o nome do ícone e,
em seguida, o ícone de classe economizar a atualização e temos um pequeno código.
Eu venho lá.
Vamos fazer uma pequena mudança, que é tornar este ícone um pouco maior.
Para fazer isso, podemos escrever uma etiqueta de estilo
aqui, mas ao invés de fazer isso, vamos usar o diretório público que configuramos.
Ainda precisamos fazer o diretório.
Mas nós configuramos o fato de que está sendo servido.
Então, vamos fazer cortes de estilos e nós apenas chamaremos isso. C Ss ainda não existe.
Então, precisamos fazer um diretório de criação público e, em seguida, também criar folhas
de estilo de barras de diretório e, finalmente, tocar em folhas de estilo de barras públicas, usar o Dotsie SS, que também queremos abrir
as folhas de estilo públicas, a Aptos, a conclusão da guia SS, é definitivamente sua amiga.
E para tornar todos os ícones um pouco maiores.
específico e nós definiremos o tamanho da fonte BE2
IEMs, assim como o dobro do tamanho do contêiner ou o tamanho duplo da proteção principal.
Bem, você realmente, ao invés de todos os ícones e ícones do stewe que têm essa classe de ícone apenas para ser um pouco mais
OK então, começamos a fazer backup do servidor e atualizamos a página.
Devemos ver que o ícone fica maior, o que é apenas uma questão de preferência pessoal.
Mas acho que parece um pouco melhor quando é maior.
ESTÁ BEM.
Agora que temos feito isso, terminamos com tudo o que precisávamos fazer neste vídeo.
próprio arquivo CSSA personalizado, mesmo que seja apenas uma linha, agora podemos
adicionar facilmente CSSA personalizado a cada arquivo de cada modelo e eu queria mostrar como podemos incluir UI semântica.
Então, eu só queria configurar a barra de navegação adicionada nos arquivos de Footer de cabeçalho adicionar em nosso
OK, então vamos pegar o próximo vídeo com novos e criar para que possamos realmente criar novos blogs.