Bienvenue à certains d'entre nous vidéo, nous avons créé l'application blog créé notre modèle de blog et nous avons ajouté le modèle d'index dans cette vidéo.
Nous n'ajouterons pas de nouveaux itinéraires.
Ce sera très rapide, mais nous voulons ajouter dans notre en-tête et pied de page Parshall's.
Et puis je veux inclure l'interface utilisateur sémantique ainsi.
Et enfin, nous allons ajouter une barre de navigation très simple au sommet.
Alors nous allons commencer, nous voulons créer notre en-tête et le pied de page que Ejay en tant que fichiers.
Et cela devrait être à l'intérieur si les répertoires consultés.
Donc, nous allons faire un répertoire de faire utiliser slash Parshall, puis tactile vues barre oblique barre de Parshall Hetter que Ejay nous, puis toucher les vues de slash Parshall slash footer E.J ..
Génial.
Maintenant ouvrons-les.
Commençons par l'en-tête.
Et pourquoi ne pas le squelette de base ainsi HD un titre de tête en métal.
Nous l'appellerons application de blog, puis nous avons besoin de notre corps comme ça et nous allons passer à la page de bas de page afin que nous puissions couper que pour le moment et alors juste pour que nous sachions qu'il fonctionne.
Ajoutons simplement un paragraphe au sommet qui dit à partir du fichier d'en-tête et si nous voyons que sur chaque page sache que nous l'avons fait correctement.
Maintenant, nous allons ouvrir le pied de page coller ce dans et nous pouvons faire la même chose à partir du pied de sauvegarde.
Maintenant, nous devons lier cela et nous allons le faire dans notre index pour commencer.
Donc, au sommet, nous devons avoir notre inclusion et notre chemin est que nous sommes au lieu d'utiliser dans le fichier d'index.
Donc, nous voulons juste un point slash Parshall slash en-tête.
Et puis la même chose ici bas Parshall's slash pour elle.
Testez-le aucun problème jusqu'à présent et nous obtenons à partir du fichier d'en-tête du pied ou cinq.
Génial.
Maintenant, nous allons ajouter dans l'interface utilisateur sémantique.
Donc, j'ai ce site Web sémantique interface ouverte sémantique Dasch vous dot com.
Et tout comme bootstrap nous pouvons soit télécharger les fichiers ou nous pouvons inclure un CDN CDI sémantique UI.
Il suffit de cliquer sur ce premier exemple et vous remarquerez qu'il ya beaucoup de fichiers différents que nous pourrions choisir.
Et c'est parce que la façon dont l'interface utilisateur sémantique est organisée de la façon dont il est conçu est que contrairement à bootstrap si tout ce que vous voulez est après notre section ou vous voulez seulement les formes que vous pouvez juste prendre que composant unique composante slash formé nous.
SS Donc vous n'avez pas besoin de la chose entière qui est l'une des critiques de bootstrap est si vous voulez seulement un petit morceau que vous avez encore à prendre toute la bibliothèque.
Mais nous voulons toute la bibliothèque.
Donc, si vous faites défiler vers le bas sur tous ces idiomes vous voulez celui qui dit sémantique que CDN qui si vous venez de faire une recherche ou sémantique a réévaluer ce qui est juste ici, il est difficile de trouver si vous ne savez pas ou que vous cherchez mais Il suffit de faire une recherche.
Pas vraiment prendre une minute fied version pour rendre les choses plus rapides.
Donc, c'est sémantique que les hommes voient évaluer et nous copions que vous Erl plus et nous allons mettre en haut dans notre fichier d'en-tête dans la tête.
C'est une étiquette de longueur.
Et nous voulons qu'il soit un lien et alors ref est égal à celui là.
Oui oui.
Et nous devrions également ajouter dans le type de feuille de style rel égal à slash de texte.
C Ss Maintenant, nous sauvegardons et redémarrage du serveur.
Jetez un coup d'oeil à notre page d'accueil que vous verrez quelques petits changements juste comme quand nous installons d'abord le bootstrap les changements de police un peu.
D'ACCORD.
Donc, cela signifie que nous avons le travail, nous allons nous débarrasser de nos paragraphes dans l'en-tête et le pied de page et au lieu de laisser ajouter dans une barre de navigation simple dans la file d'attente.
Maintenant, bien sûr, sont appelés menus.
Donc, si nous allons ici cliquez sur le menu tous les différents composants et nous voulons trouver le menu qui est sous le menu de la collection.
Vous pouvez voir qu'il ya un certain nombre de différents types de menus.
Il ya un menu qui est ce que vous voyez ici.
Il ya un menu de Poynting il ya le magining vertical de texte tabulaire.
Et il ya tout à fait un peu plus tout ce dont nous avons besoin est de faire du haut de notre corps un div et let's get cela correctement.
Kate fait une classe égale à vous.
Je fixe et nous allons faire un menu inversé qui change juste la couleur tout comme dans bootstrap.
Vous pourriez dire en vers, puis à l'intérieur de là, nous avons besoin d'un autre div.
Et celui-ci aura classe égale vous conteneur qui est juste comme le conteneur bootstrap.
Et puis au lieu de là je vais avoir un autre div et celui-ci aura la classe égale à l'élément Hetter.
Et c'est comme la marque nav bar sur bootstrap.
Donc, tout ce que nous voulons enfants blog site ou tout ce que nous voulons que notre application d'être appelé.
Ensuite, nous allons ajouter une balise d'ancrage pour la page d'accueil et nous l'appellerons juste à la maison et nous ajouterons en classe égale à l'élément et ensuite nous ferons la même chose sauf plutôt que d'aller à barre oblique Allez à barre oblique slash nouveau qui n'existe pas encore et il sera froid Nouveau post ou nouveau blog.
Ce sera le texte que nous voyons.
OK donc vous n'êtes pas fixe menu inversé.
Un conteneur au lieu de cela.
Et puis à l'intérieur du conteneur, nous devrions avoir toute cette petite erreur de ma part.
Nous voulons donc que ce soit là aussi.
Tout est dans le récipient.
Et puis nous avons notre en-tête et puis nous avons deux éléments qui sont ancrés Tex.
Jetons un coup d'oeil à cela maintenant.
Et nous obtenons notre barre mathématique simple.
Oui, nous avons un problème ici avec un certain espacement.
Nous allons gérer cela dans un instant, mais nous avons un maintenant où il fonctionne très bien.
Ajoutons dans une icône simple qui dans la sémantique Vous venez d'être appelé icônes.
Il y en a un tas dans celui que j'ai utilisé.
C'est ce qu'on appelle Code.
Essayez de le trouver ici et faites juste une recherche.
Le voilà.
Mais n'hésitez pas à choisir votre propre si vous aimez commenter.
L'idée était qu'il s'agissait d'un blog basé sur le code, mais il pourrait y avoir autre chose.
J'aime l'idée aussi.
Quoi qu'il en soit il ya un tas d'entre eux.
Ce qui est agréable, c'est qu'ils ont aussi un tas d'icônes pour les entreprises qui est utile.
Le fond, je pense qu'ils ont eux et nous allons à des tonnes de différentes marques et sociétés communes que vous auriez lié à votre demande.
D'ACCORD.
Donc, c'est le code d'un nom pour l'icône et je vais l'ajouter ici à côté de l'en-tête blogsite.
Donc juste ici avait son article et tout ce dont nous avons besoin est une étiquette de l'oeil.
Et il doit avoir une classe de code et une icône.
Donc, vraiment simple, juste le nom de l'icône, puis l'icône de classe enregistrer rafraîchir et nous avons un petit code.
Je viens là-bas.
Faisons un petit changement qui est de rendre cette icône un peu plus grand.
Pour ce faire, nous pourrions écrire une balise de style génial ici, mais plutôt que de faire que nous allons utiliser l'annuaire public que nous avons mis en place.
Nous avons encore besoin de faire le répertoire.
Mais nous avons mis en place le fait qu'il est servi.
Donc, nous allons faire des feuilles de style slash et nous allons simplement appeler apt C Ss n'existe pas encore.
Donc, nous avons besoin de faire un répertoire make public et puis aussi faire des feuilles de style public slash public et enfin toucher les feuilles de style public slash slash Dotsie SS que nous voulons aussi ouvrir des feuilles de style publiques Aptos l'onglet SS est certainement votre ami là.
Et pour rendre toutes les icônes un peu plus grand.
Eh bien, vous avez plutôt plutôt que toutes les icônes et icônes stewe qui ont cette classe d'icône juste pour être un peu plus spécifique et nous allons définir la taille de la police BE2 IEMs tout comme ce double de la taille du conteneur ou double taille de la sauvegarde parent.
OK, maintenant nous avons démarré la sauvegarde du serveur et nous actualisons la page.
Nous devrions voir que l'icône devient plus grande qui est juste une question de préférence personnelle.
Mais je pense qu'il semble un peu mieux quand il est plus grand.
D'ACCORD.
Maintenant que nous avons fait cela, nous avons terminé avec tout ce que nous devions faire dans cette vidéo.
Donc, je voulais simplement configurer la barre de navigation ajoutée dans les fichiers de pied d'en-tête ajouter dans notre propre fichier personnalisé CSSA même si c'est seulement une ligne maintenant, nous pouvons facilement ajouter CSSA personnalisé à chaque fichier unique chaque modèle unique et je voulais vous montrer comment Nous pouvons inclure l'interface utilisateur sémantique.
OK, nous allons prendre la vidéo suivante avec de nouveaux et de créer afin que nous puissions réellement créer de nouveaux blogs.