Welkom terug sommige van ons video kregen we het blog app opgezet gemaakt onze blog model en wij voegden de index template in deze video.
We zullen echt niet het toevoegen van nog net geen nieuwe routes.
Dit zal zeer snel zijn, maar we willen aan onze kop- en voettekst Parshall's.
En dan wil ik semantische UI omvatten.
En dan tot slot zullen we een heel eenvoudige navigatiebalk toe te voegen aan de top.
Dus laten we beginnen willen we onze kop- en voetteksten die Ejay als bestanden te creëren.
En dat moet binnen zijn als bekeken directories.
Dus we doen een make directory gebruik slash Parshall's en raak uitzicht slash Parshall's slash Hetter dat Ejay ons en raak uitzicht slash Parshall's slash footer E. J ..
Grote.
Laten we nu openen die up.
Laten we beginnen met header.
En waarom niet de basis skelet dus HD een metalen kop titel.
We noemen het bloggen app en dan moeten we ons lichaam, net als dat en we zullen verhuizen dit om de voettekst, zodat we kunnen uitgesneden dat voor nu en dan gewoon, zodat we weten dat het werkt.
Laten we gewoon een paragraaf toe te voegen in aan de bovenkant die zegt van de header-bestand en als we dat zien op elke pagina zullen weten dat we deden het goed.
Laten we nu eens open te stellen footer plak deze in en we kunnen hetzelfde doen vanuit de voettekst save.
Nu moeten we deze link en laten we het doen in onze index te beginnen.
Dus op de top moeten we hebben ons op te nemen en ons pad is dat we in plaats van gebruik in de index file.
Dus we willen gewoon een dot slash Parshall's slash header.
En dan is het zelfde ding hier beneden Parshall's slash voor.
Laten we eens testen het uit geen probleem tot nu toe en we krijgen van de header-bestand van de voet of vijf.
Grote.
Laten we nu toe in semantische UI.
Dus ik heb deze semantische UI website geopend semantische Dasch u dot com.
En net als bootstrap kunnen we ofwel de bestanden downloaden, of we kunnen een CDN semantische UI CDN.
Klik gewoon op deze eerste voorbeeld en je zult merken dat er zijn een heleboel verschillende bestanden die we konden kiezen uit.
En dat komt omdat de manier waarop semantische UI georganiseerd is de manier waarop het ontworpen is dat in tegenstelling bootstrap als alles wat je wilt is na onze rubriek of wilt u alleen de formulieren die u kunt gewoon dat ene component component slash gevormd ons.
SS U hoeft dus niet het hele ding dat is een van de punten van kritiek van de bootstrap is als u alleen een klein stukje moet je nog steeds de hele bibliotheek te nemen nodig.
Maar we willen dat de hele bibliotheek.
Dus als je naar beneden scrollt op al deze idiomen u degene die semantische zegt dat CDN die als je gewoon een zoekopdracht of semantische Got heroverwegen wat recht hier is het moeilijk te vinden als je niet weet of je zoekt, maar gewoon doen een zoekopdracht.
Geen eigenlijk een minuut deeld versie om dingen sneller te maken.
Dus het is semantisch dat mannen zien te beoordelen en we exemplaar dat u Erl voorbij en we gaan het in onze header-bestand in het hoofd gezet top.
Het is een lengte tag.
En we willen dat het koppeling en dan gelijk dat daar ref.
Ja ja.
En we moeten ook in rel soort style sheet toe gelijk tekst slash.
C Ss Dus nu we besparen en de server opnieuw op.
Neem een ​​kijkje op onze homepage zie je een paar kleine veranderingen, net als toen we voor het eerst installeert bootstrap het lettertype verandert een beetje.
OK.
Dus dat betekent dat we het werkend te laten zich te ontdoen van onze leden in de kop- en voettekst en in plaats daarvan laten we toe te voegen op een eenvoudige navigatiebalk in de wachtrij.
Nu natuurlijk zijn de menu's genoemd.
Dus als we gaan hier op het menu alle verschillende onderdelen en we willen menu dat onder menu collectie te vinden.
Je kunt zien zijn er heel wat verschillende types van menu's.
Er is menu dat is wat je hier ziet.
Er is een Poynting menu is er in tabelvorm tekst verticaal magination.
En er is heel wat meer alles wat we nodig hebben is echter naar de top van ons lichaam een ​​div te maken en laten we dit naar behoren.
Kate doet klasse gelijk is aan jou.
Ik vast en we zullen een omgekeerde menu die net verandert de kleur, net als in bootstrap doen.
Je zou kunnen zeggen in vers en dan de binnenkant van daar moeten we een andere div.
En deze zal klasse evenaart u houder, die is net als bootstrap container.
En dan in plaats van daar ik een andere div te hebben en deze zal klasse gelijk aan Hetter punt hebt.
En dit is net als de navigatiebalk merk op bootstrap.
Dus alles wat we willen kinderen blog site of wat we willen onze app te noemen.
En dan na dat we een anker-tag toe te voegen voor de home page en we noemen het huis en we zullen voegen in de klas gelijk aan artikel en dan zullen we hetzelfde doen, behalve dan gaan om het te snijden zal ga naar slash logs slash nieuwe die nog niet bestaat en het zal koud nieuwe Post of nieuw Blog.
Dat zal de tekst die we zien.
OK, zodat je niet vast omgekeerde menu.
Een container in plaats van.
En dan in de container die we eigenlijk moeten allemaal van deze kleine fout hebben van mijn kant.
Dus we willen dat in daar ook.
Het is allemaal in de container.
En dan hebben we onze header en dan hebben we twee items die zijn verankerd Tex.
Laten we nu een kijkje nemen op dat.
En we krijgen onze eenvoudige wiskunde bar.
Ja, we hebben hier een probleem met sommige afstand.
We behandelen dat in slechts een moment, maar we hebben een bedrijf waar hij werkt prima.
Laten we toe te voegen op een eenvoudige pictogram dat in semantische Je bent gewoon iconen genoemd.
Er is een heleboel van hen in de ene die ik gebruikte.
Het heet Code.
Probeer het en vinden het hier en gewoon doen een zoekopdracht.
Daar is het.
Maar voel je vrij om je eigen halen als je commentaar wilt.
Het idee was dat het een code op basis blog, maar er misschien iets anders.
Ik hou van het idee een als goed.
In ieder geval is er een bos van hen.
Wat er leuk is dat ze hebben ook een aantal van de iconen voor bedrijven die nuttig is.
De bodem ik denk dat ze hen hebben en we gaan naar ton van verschillende merken en gemeenschappelijke bedrijven die je zou hebben gekoppeld aan op uw aanvraag.
OK.
Dus het is code een naam voor het pictogram en ik ga het hier naast toe te voegen aan de blogsite kopt de bal.
Dus hier had haar voorwerp en alles wat we nodig hebben is een eye-tag.
En het moet een klasse van code en een pictogram te hebben.
Dus heel simpel alleen de naam van het pictogram en vervolgens op het pictogram klasse op te slaan refresh en we hebben een beetje code.
Ik kom daar.
Laten we een kleine verandering die dit pictogram een ​​beetje groter te maken.
Om dit te doen dat we konden gewoon schrijven een stijl tag geweldig hier, maar in plaats van dat te doen laten we gebruik maken van de openbare map die we opzetten.
We moeten nog steeds naar de map te maken.
Maar we zetten het feit dat het wordt geserveerd.
Dus we zullen doen stylesheets slash en we noemen het apt C Ss bestaat nog niet.
Dus moeten we een make directory publiek te doen en dan ook directory publiek slash style sheets en uiteindelijk raak publiek slash style sheets slash app Dotsie SS die we ook willen openstellen, zodat het publiek stylesheets Aptos het tabblad SS voltooiing is zeker uw vriend daar.
En om alle pictogrammen een beetje groter te maken.
Nou gewoon dat je eigenlijk in plaats van alle pictogrammen en Stewe pictogrammen die die klasse van het pictogram moet gewoon een beetje meer specifiek te zijn en we zullen lettergrootte BE2 IEM ingesteld, net als dat het dubbele van de grootte van de verpakking of dubbele grootte van de ouder op te slaan.
OK dus nu zijn we begonnen met de server back-up en we vernieuw de pagina.
We moeten zien dat het pictogram wordt groter dat is gewoon een kwestie van persoonlijke voorkeur.
Maar ik denk dat ziet er een beetje beter als het groter is.
OK.
Nu hebben we dat gedaan we klaar zijn met alles wat we nodig hadden om te doen in deze video.
Dus ik wilde alleen maar om het opzetten van de navigatiebalk toegevoegd in de Koptekst voettekst bestanden toe te voegen in onze eigen aangepaste CSSA bestand ook al is het slechts één regel nu kunnen we gemakkelijk voeg aangepaste CSSA aan elk bestand elke template en ik wilde laten zien hoe we kunnen bestaan ​​semantische UI.
OK dus we halen de volgende video met nieuwe en creëren dus kunnen we eigenlijk nieuwe blogs te creëren.