1
00:00:00,390 --> 00:00:07,540
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.

2
00:00:07,560 --> 00:00:10,070
We zullen echt niet het toevoegen van nog net geen nieuwe routes.

3
00:00:10,090 --> 00:00:13,590
Dit zal zeer snel zijn, maar we willen aan onze kop- en voettekst Parshall's.

4
00:00:13,680 --> 00:00:16,030
En dan wil ik semantische UI omvatten.

5
00:00:16,040 --> 00:00:18,980
En dan tot slot zullen we een heel eenvoudige navigatiebalk toe te voegen aan de top.

6
00:00:19,380 --> 00:00:23,990
Dus laten we beginnen willen we onze kop- en voetteksten die Ejay als bestanden te creëren.

7
00:00:24,660 --> 00:00:26,810
En dat moet binnen zijn als bekeken directories.

8
00:00:26,820 --> 00:00:40,990
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 ..

9
00:00:41,430 --> 00:00:42,060
Grote.

10
00:00:42,060 --> 00:00:45,990
Laten we nu openen die up.

11
00:00:46,290 --> 00:00:47,960
Laten we beginnen met header.

12
00:00:48,570 --> 00:00:54,990
En waarom niet de basis skelet dus HD een metalen kop titel.

13
00:00:55,470 --> 00:01:07,010
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.

14
00:01:07,140 --> 00:01:16,710
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.

15
00:01:16,710 --> 00:01:30,110
Laten we nu eens open te stellen footer plak deze in en we kunnen hetzelfde doen vanuit de voettekst save.

16
00:01:30,450 --> 00:01:33,890
Nu moeten we deze link en laten we het doen in onze index te beginnen.

17
00:01:34,140 --> 00:01:42,600
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.

18
00:01:42,780 --> 00:01:47,780
Dus we willen gewoon een dot slash Parshall's slash header.

19
00:01:48,240 --> 00:01:53,280
En dan is het zelfde ding hier beneden Parshall's slash voor.

20
00:01:53,700 --> 00:02:02,130
Laten we eens testen het uit geen probleem tot nu toe en we krijgen van de header-bestand van de voet of vijf.

21
00:02:02,430 --> 00:02:02,990
Grote.

22
00:02:03,180 --> 00:02:05,530
Laten we nu toe in semantische UI.

23
00:02:05,880 --> 00:02:10,590
Dus ik heb deze semantische UI website geopend semantische Dasch u dot com.

24
00:02:10,620 --> 00:02:18,080
En net als bootstrap kunnen we ofwel de bestanden downloaden, of we kunnen een CDN semantische UI CDN.

25
00:02:18,530 --> 00:02:24,630
Klik gewoon op deze eerste voorbeeld en je zult merken dat er zijn een heleboel verschillende bestanden die we konden kiezen uit.

26
00:02:24,810 --> 00:02:39,000
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.

27
00:02:39,000 --> 00:02:46,510
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.

28
00:02:46,770 --> 00:02:48,420
Maar we willen dat de hele bibliotheek.

29
00:02:48,420 --> 00:03:05,920
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.

30
00:03:06,000 --> 00:03:09,320
Geen eigenlijk een minuut deeld versie om dingen sneller te maken.

31
00:03:09,360 --> 00:03:20,040
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.

32
00:03:20,490 --> 00:03:22,300
Het is een lengte tag.

33
00:03:22,950 --> 00:03:29,030
En we willen dat het koppeling en dan gelijk dat daar ref.

34
00:03:29,120 --> 00:03:30,260
Ja ja.

35
00:03:30,420 --> 00:03:34,900
En we moeten ook in rel soort style sheet toe gelijk tekst slash.

36
00:03:34,940 --> 00:03:40,500
C Ss Dus nu we besparen en de server opnieuw op.

37
00:03:41,640 --> 00:03:49,070
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.

38
00:03:49,560 --> 00:03:49,830
OK.

39
00:03:49,830 --> 00:04:01,180
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.

40
00:04:01,230 --> 00:04:03,740
Nu natuurlijk zijn de menu's genoemd.

41
00:04:03,990 --> 00:04:16,170
Dus als we gaan hier op het menu alle verschillende onderdelen en we willen menu dat onder menu collectie te vinden.

42
00:04:16,170 --> 00:04:18,630
Je kunt zien zijn er heel wat verschillende types van menu's.

43
00:04:18,860 --> 00:04:22,190
Er is menu dat is wat je hier ziet.

44
00:04:22,500 --> 00:04:32,090
Er is een Poynting menu is er in tabelvorm tekst verticaal magination.

45
00:04:32,470 --> 00:04:43,170
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.

46
00:04:43,170 --> 00:04:46,340
Kate doet klasse gelijk is aan jou.

47
00:04:46,340 --> 00:04:52,170
Ik vast en we zullen een omgekeerde menu die net verandert de kleur, net als in bootstrap doen.

48
00:04:52,170 --> 00:04:57,410
Je zou kunnen zeggen in vers en dan de binnenkant van daar moeten we een andere div.

49
00:04:58,020 --> 00:05:03,830
En deze zal klasse evenaart u houder, die is net als bootstrap container.

50
00:05:04,260 --> 00:05:10,030
En dan in plaats van daar ik een andere div te hebben en deze zal klasse gelijk aan Hetter punt hebt.

51
00:05:10,320 --> 00:05:13,550
En dit is net als de navigatiebalk merk op bootstrap.

52
00:05:13,560 --> 00:05:18,920
Dus alles wat we willen kinderen blog site of wat we willen onze app te noemen.

53
00:05:19,050 --> 00:05:45,350
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.

54
00:05:45,410 --> 00:05:47,470
Dat zal de tekst die we zien.

55
00:05:48,350 --> 00:05:51,760
OK, zodat je niet vast omgekeerde menu.

56
00:05:51,900 --> 00:05:53,460
Een container in plaats van.

57
00:05:53,670 --> 00:06:00,010
En dan in de container die we eigenlijk moeten allemaal van deze kleine fout hebben van mijn kant.

58
00:06:00,060 --> 00:06:02,670
Dus we willen dat in daar ook.

59
00:06:03,360 --> 00:06:04,850
Het is allemaal in de container.

60
00:06:05,160 --> 00:06:10,250
En dan hebben we onze header en dan hebben we twee items die zijn verankerd Tex.

61
00:06:10,260 --> 00:06:12,200
Laten we nu een kijkje nemen op dat.

62
00:06:13,500 --> 00:06:15,200
En we krijgen onze eenvoudige wiskunde bar.

63
00:06:15,520 --> 00:06:17,720
Ja, we hebben hier een probleem met sommige afstand.

64
00:06:17,730 --> 00:06:21,450
We behandelen dat in slechts een moment, maar we hebben een bedrijf waar hij werkt prima.

65
00:06:21,660 --> 00:06:27,450
Laten we toe te voegen op een eenvoudige pictogram dat in semantische Je bent gewoon iconen genoemd.

66
00:06:28,070 --> 00:06:30,690
Er is een heleboel van hen in de ene die ik gebruikte.

67
00:06:30,720 --> 00:06:32,960
Het heet Code.

68
00:06:33,120 --> 00:06:35,500
Probeer het en vinden het hier en gewoon doen een zoekopdracht.

69
00:06:35,550 --> 00:06:36,310
Daar is het.

70
00:06:36,480 --> 00:06:39,760
Maar voel je vrij om je eigen halen als je commentaar wilt.

71
00:06:39,810 --> 00:06:43,560
Het idee was dat het een code op basis blog, maar er misschien iets anders.

72
00:06:43,560 --> 00:06:44,900
Ik hou van het idee een als goed.

73
00:06:44,920 --> 00:06:46,190
In ieder geval is er een bos van hen.

74
00:06:46,350 --> 00:06:51,980
Wat er leuk is dat ze hebben ook een aantal van de iconen voor bedrijven die nuttig is.

75
00:06:52,020 --> 00:06:59,100
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.

76
00:06:59,430 --> 00:07:00,070
OK.

77
00:07:00,300 --> 00:07:07,160
Dus het is code een naam voor het pictogram en ik ga het hier naast toe te voegen aan de blogsite kopt de bal.

78
00:07:07,470 --> 00:07:11,190
Dus hier had haar voorwerp en alles wat we nodig hebben is een eye-tag.

79
00:07:11,670 --> 00:07:17,400
En het moet een klasse van code en een pictogram te hebben.

80
00:07:17,400 --> 00:07:26,290
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.

81
00:07:26,280 --> 00:07:27,340
Ik kom daar.

82
00:07:27,660 --> 00:07:31,830
Laten we een kleine verandering die dit pictogram een ​​beetje groter te maken.

83
00:07:31,860 --> 00:07:40,630
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.

84
00:07:40,680 --> 00:07:41,930
We moeten nog steeds naar de map te maken.

85
00:07:41,940 --> 00:07:44,570
Maar we zetten het feit dat het wordt geserveerd.

86
00:07:44,700 --> 00:07:51,340
Dus we zullen doen stylesheets slash en we noemen het apt C Ss bestaat nog niet.

87
00:07:51,690 --> 00:08:16,710
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.

88
00:08:16,740 --> 00:08:19,990
En om alle pictogrammen een beetje groter te maken.

89
00:08:20,400 --> 00:08:39,250
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.

90
00:08:39,560 --> 00:08:45,180
OK dus nu zijn we begonnen met de server back-up en we vernieuw de pagina.

91
00:08:45,180 --> 00:08:49,530
We moeten zien dat het pictogram wordt groter dat is gewoon een kwestie van persoonlijke voorkeur.

92
00:08:49,530 --> 00:08:52,340
Maar ik denk dat ziet er een beetje beter als het groter is.

93
00:08:52,710 --> 00:08:52,940
OK.

94
00:08:52,950 --> 00:08:56,850
Nu hebben we dat gedaan we klaar zijn met alles wat we nodig hadden om te doen in deze video.

95
00:08:56,850 --> 00:09:13,580
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.

96
00:09:13,860 --> 00:09:19,420
OK dus we halen de volgende video met nieuwe en creëren dus kunnen we eigenlijk nieuwe blogs te creëren.