1
00:00:00,310 --> 00:00:04,590
Witamy wrócić w tej lekcji mamy zamiar skupić się na stylizacji stronę show.

2
00:00:04,620 --> 00:00:07,080
Więc teraz nasza strona pokaż wygląda następująco.

3
00:00:07,230 --> 00:00:10,710
Mamy trochę tandetne bar tu za pomocą przycisków, które nie robią nic.

4
00:00:10,710 --> 00:00:12,910
Mamy H-1 z nazwą campingu.

5
00:00:13,190 --> 00:00:19,290
I mamy obraz i opis i mamy przycisk, aby dodać nowy komentarz, a następnie wyświetlane są wszystkie komentarze.

6
00:00:19,410 --> 00:00:21,900
Każdy trochę pkt.

7
00:00:21,900 --> 00:00:25,230
Dlatego naszym celem jest, aby wyglądać nieco więcej w ten sposób.

8
00:00:25,230 --> 00:00:27,190
Więc mam pasek boczny tutaj.

9
00:00:27,270 --> 00:00:34,250
Nie będziemy mieć mapę właśnie jeszcze ale musimy zrobić miejsce na mapie, a następnie będziemy musieli głównej zawartości z opisem.

10
00:00:34,380 --> 00:00:41,350
Część tekstu tytuł nie zamierzamy robić jeszcze ocen, ale potem będziemy mieć listę opinii, że będzie wyglądać następująco.

11
00:00:41,430 --> 00:00:45,360
Ich własny mały pojemnik tam będę miał mały przycisk na dźwigni a kilka.

12
00:00:45,360 --> 00:00:47,240
Generalnie jest to nieco więcej stylu.

13
00:00:47,310 --> 00:00:50,210
Możemy dodać to i to mówi, jak wiele opinii pozostało.

14
00:00:50,280 --> 00:00:51,540
Więc to, co chcemy osiągnąć.

15
00:00:51,720 --> 00:00:55,170
I zacząć będziemy po prostu skupić się na starcie bootstrap.

16
00:00:55,350 --> 00:00:58,500
Pamiętaj, że bootstrap siatka jest 12 jednostek w poprzek.

17
00:00:58,560 --> 00:01:05,500
Jedziemy do wyznaczenia trzech spośród tych 12 dla tego małego paska bocznego, a następnie mamy zamiar dodać dziewiątej do głównej zawartości.

18
00:01:05,760 --> 00:01:10,550
Zanim zaczniemy od rzeczywistości zmieniania czegokolwiek chcę podkreślić, że pracuję w V 5 teraz.

19
00:01:10,680 --> 00:01:13,710
Więc jeśli chcesz podążać wszystkie te zmiany będą w V 5.

20
00:01:13,800 --> 00:01:17,280
A powodem robię to znaczy, że będziemy musieli dokonać niestandardowego arkusza stylów.

21
00:01:17,340 --> 00:01:21,910
Idziemy mają służyć do katalogu publicznego i kilka innych rzeczy, które są istotne zmiany.

22
00:01:22,020 --> 00:01:24,020
Więc chciałem zrobić oddzielną wersję.

23
00:01:24,270 --> 00:01:30,020
Ale zanim to zrobimy, że pierwszą rzeczą, którą mamy zamiar zrobić, to włożyć pojemnik wokół wszystkich tego kontenera bootstrap.

24
00:01:30,150 --> 00:01:40,290
Więc pokazują, że EJ ma zamiar dodać div z klasą pojemnik ot tak, a my być wprowadzenie wszystko wewnątrz tego.

25
00:01:40,290 --> 00:01:45,270
I zacznę poprzez dodanie paska bocznego, a my po prostu wypełnić go z niektórych danych manekina jak my tu mamy.

26
00:01:45,660 --> 00:02:00,920
Więc DIVX i to musi być równa klasy pro iw tym rzędzie będziemy mieć inny div, gdy klasa jest kolumna średnio trzy tak po prostu.

27
00:02:01,080 --> 00:02:07,670
A potem wewnątrz tutaj mamy zamiar dodać paragraf, a my będziemy się ten tekst, który mówi Joachim.

28
00:02:08,460 --> 00:02:17,640
Więc to jest paragraf gdzie klasa jest ołów, a potem po prostu zamiar umieścić cię obóz teraz będziemy się zmieniać to ostatecznie.

29
00:02:17,640 --> 00:02:34,670
Ale tak obozu, a następnie dodać te małe Pozycji zrobimy div z klasą jest grupa lista kreska a następnie tutaj mamy zamiar dodać kilka sojuszników w każdym sojusznika ma klasę pozycji grupowej listy.

30
00:02:35,610 --> 00:02:44,530
A w środku będziemy wystarczy dodać jakieś dane fikcyjne, a my po prostu nazwać informacji 1, a potem idę do powielania tych informacji do informacji 3.

31
00:02:44,610 --> 00:02:46,340
A potem zobaczymy, co to wygląda teraz.

32
00:02:46,500 --> 00:02:52,480
Tak na odświeżenie strony mamy pasek boczny tu i zrobię jedną z tych przedmiotów wybranych, aby rozpocząć.

33
00:02:52,830 --> 00:02:55,480
A wszystko, co musimy zrobić, to włożyć aktywną właśnie tam.

34
00:02:55,650 --> 00:02:58,900
Jeśli mamy świeże Widzimy teraz, że jeden z nich jest aktywny.

35
00:02:59,460 --> 00:03:07,680
I to jest naprawdę tylko zastępczy mieć coś tam, więc nie mamy dużo spacji ale znowu będziemy dodawać prawdziwych danych tam i mapa ostatecznie.

36
00:03:07,770 --> 00:03:14,590
I po prostu wskazać go mapa trafi tu wewnątrz tego medium trzeciej kolumnie w końcu, ale nie jeszcze.

37
00:03:14,940 --> 00:03:16,560
OK, więc to jest pasek boczny.

38
00:03:16,560 --> 00:03:19,050
Teraz mamy zamiar dodać w głównej zawartości.

39
00:03:19,290 --> 00:03:28,670
Więc musimy innej kolumny i ten jest medium kolumna klasy 9.

40
00:03:29,130 --> 00:03:41,820
I zamiast nie musimy mieć H-1 musimy mieć obraz, ale przed tym wszystkim można zauważyć, to faktycznie w jednym z tych miniatur jak mamy na stronie głównej.

41
00:03:41,940 --> 00:03:44,150
Każdy z nich jest miniaturka.

42
00:03:44,190 --> 00:03:50,160
Mamy zamiar zrobić to samo po całym obrazie w tytule i komentarzach i to wszystko.

43
00:03:50,220 --> 00:03:56,930
Więc mamy zamiar dodać div i div będzie mieć klasę równa miniaturę.

44
00:03:58,110 --> 00:04:06,140
A potem w środku, że mamy zamiar dodać obraz i będę nadal obraz mamy już napisane i po prostu umieścić go w prawo tam.

45
00:04:06,180 --> 00:04:08,260
Tak, że to będzie nasz kemping obrazu.

46
00:04:08,490 --> 00:04:19,500
A potem chcemy również dodać klasę do tego, że daje nam bootstrapped który jest wizerunek Dasch elastyczne.

47
00:04:19,560 --> 00:04:20,420
No to jedziemy.

48
00:04:20,490 --> 00:04:23,270
Zapisz to.

49
00:04:23,400 --> 00:04:29,570
A jeśli spojrzeć na to, co mamy teraz i odświeżyć się przynajmniej mieć obraz i treść w odpowiednim miejscu.

50
00:04:29,610 --> 00:04:33,280
Mamy problem, gdy nie bierze się jednak z tym, że chcemy.

51
00:04:33,320 --> 00:04:38,660
Chcę, aby przejść całą drogę w poprzek i będziemy musieli sobie z tym poradzić z jakimś zwyczajem C Ss na końcu.

52
00:04:38,970 --> 00:04:46,360
A teraz będziemy wrócić i dodać to tutaj gdzie mamy nazwę ziemi obozu i wtedy cena za noc, co my nie mamy w bazie danych.

53
00:04:46,440 --> 00:04:47,830
Więc po prostu sztywno.

54
00:04:48,150 --> 00:04:49,400
Więc zróbmy to teraz.

55
00:04:49,860 --> 00:04:57,250
I to jest kolejny div i ten posiada klasę podpisu kreską pełnej.

56
00:04:57,570 --> 00:05:01,190
A potem wewnątrz nie zamierzamy dodać H dla.

57
00:05:01,620 --> 00:05:09,540
I mamy zamiar ciągnąć tego na prawo i robimy klasy wynosi prawo ciągnąć myślnik i potem co kładziemy tu będzie cena.

58
00:05:09,750 --> 00:05:15,300
A ja po prostu zacząć od $ 9 nocy znowu ten będzie przychodzić z bazy ostatecznie.

59
00:05:15,540 --> 00:05:25,610
Jeśli mamy świeże Teraz otrzymujemy $ 9 nocy po prawej stronie, a następnie chcemy uzyskać nazwę campingu które ja po prostu skopiować tu na lewym skrzydle.

60
00:05:25,650 --> 00:05:45,460
Będziemy więc umieścić go tuż poniżej, a jeśli nie dodajemy prawo ściągania zostanie automatycznie przejść w lewo mimo, że jest większy niż to, co miałem na myśli i będę kolei, że w mniejszych h dla i zamierzam aby dodać znacznik zakotwiczenia wewnątrz tam tak po prostu i umieścić nazwę campingu wewnątrz znacznika zakotwiczenia.

61
00:05:46,500 --> 00:05:50,370
A idea, że ​​jest to, że w końcu mogę wrócić.

62
00:05:50,380 --> 00:05:56,040
Powinno to być link do rzeczywistej campingu lub na stronie parku serwisowego, gdzie możemy iść zamówić coś.

63
00:05:56,130 --> 00:05:58,050
Na razie to tylko link do nikąd.

64
00:05:58,410 --> 00:05:59,020
OK.

65
00:05:59,160 --> 00:06:00,350
Mamy więc, że w.

66
00:06:00,360 --> 00:06:01,370
Mamy cenę.

67
00:06:01,470 --> 00:06:03,660
Teraz dodajmy opis widok.

68
00:06:04,230 --> 00:06:14,060
Tak, że będzie tylko znacznik akapitu, a następnie dodamy w naszym opisie, który jest opis campingu właśnie tam.

69
00:06:14,640 --> 00:06:29,750
I to będzie trochę rozczarowująca, ponieważ nie mamy dużą subskrypcji teraz więc może chcemy zrobić, to pójść i zobaczyć bazę danych z pewnym Lorem Ipsum, a ja po prostu się do kradzieży to i będę kopiować to i wrócić do pliku nasion.

70
00:06:29,940 --> 00:06:34,700
A potem, zamiast pliku naszego potomstwa, a ja zmienić opis na wszystkich trzech z nich.

71
00:06:34,720 --> 00:06:37,990
Po prostu zrób to samo, a nie bla bla bla.

72
00:06:38,130 --> 00:06:42,380
Mamy teraz trochę dłuższy Lorem Ipsum, a my uratować.

73
00:06:42,660 --> 00:06:48,430
A potem, aby ta wejdzie w życie musimy zrestartować serwer ponieważ otrzyma bazę danych.

74
00:06:48,720 --> 00:06:52,340
A potem wróćmy i skręcić w stronę campingów.

75
00:06:52,440 --> 00:06:54,090
Mamy trzy kempingów.

76
00:06:54,090 --> 00:06:58,330
Jednak mają one teraz bardziej uzasadniony opis jakiś tekst.

77
00:06:58,680 --> 00:07:00,050
Okej świetnie.

78
00:07:00,060 --> 00:07:02,240
Warto więc spojrzeć co teraz musimy pracować.

79
00:07:02,250 --> 00:07:03,730
Istnieje kilka drobnych rzeczy.

80
00:07:03,880 --> 00:07:08,580
Zostawimy gwiazdy w przeglądzie liczyć sami na teraz i będziemy poruszać się w dół do komentarzy.

81
00:07:08,970 --> 00:07:22,630
Wróćmy do pokazu tego EJ Tak Plik możemy zamknąć się z nasion na razie, co mamy zamiar zrobić to dodać w klasie oraz dają również wewnątrz medium kolumnowej dziewiątej, ponieważ chcemy, aby być w tej samej kolumnie tutaj.

82
00:07:22,680 --> 00:07:24,350
Podejmowania tej samej ilości przestrzeni.

83
00:07:24,750 --> 00:07:31,800
Tak więc, aby to zrobić wystarczy przejść tutaj po miniaturce więc ten podpis i tu jest to miniatur.

84
00:07:31,880 --> 00:07:34,770
Tak dobrze, że będziemy dodawać div class.

85
00:07:34,870 --> 00:07:37,060
Równa się dobrze.

86
00:07:37,410 --> 00:07:43,560
A następnie wewnątrz, że zamierza otworzyć go i to, gdzie będzie to zrobić zapętlenie poprzez dodawanie komentarzy.

87
00:07:43,680 --> 00:07:55,150
Ale mam zamiar rozpocząć dodając w przycisku dźwignię z was przycisku, a my po prostu zrobić prosty i to div div będzie mieć klasę kreską tekstu rację.

88
00:07:55,320 --> 00:08:02,940
A potem wewnątrz nie zamierzamy dodać nasz znacznik zakotwiczenia tutaj już mamy, aby utworzyć nowy komentarz.

89
00:08:03,300 --> 00:08:05,090
Wystarczy umieścić tutaj to.

90
00:08:05,820 --> 00:08:12,350
Jest to długa, ale pamiętaj, że jest to tag kotwicy, który ma klasę Przycisk sukcesu, który sprawia, że ​​na zielono.

91
00:08:12,490 --> 00:08:14,620
Ale sędzia jest naprawdę długa część.

92
00:08:14,790 --> 00:08:22,290
To będzie campingów slash slash komentarze campingu ID slash nowa, ale zapisać i odświeżyć.

93
00:08:22,680 --> 00:08:23,030
OK.

94
00:08:23,040 --> 00:08:27,750
Więc widać, mamy studnię, która daje nam piękny szarym tle w granicy.

95
00:08:27,750 --> 00:08:29,960
To gdzie mamy zamiar dodać w komentarzach.

96
00:08:30,120 --> 00:08:34,170
Dlatego musimy zrobić jest pętli komentarzach i mamy już tego zrobić.

97
00:08:34,170 --> 00:08:38,500
Ale zamiast po prostu dokonywania pkt dla każdego z nich mamy rzeczywiście zamiar zrobić osobny wiersz.

98
00:08:38,760 --> 00:08:42,880
Więc pokażę wam, co to wygląda, gdy kopia tego lub wyciąć.

99
00:08:43,020 --> 00:08:49,140
Możemy usunąć ten dodatkowy punkt, a my zamierzamy umieścić tego prawa po prawej stronie tekstu.

100
00:08:49,440 --> 00:08:51,850
I zróbmy to poprawnie.

101
00:08:52,090 --> 00:09:03,830
Więc mamy pętlę, a następnie jedziemy do pętli każdego komentarza i zamierzamy dodać wewnątrz tutaj div class wiersz dla każdej klasy jeden div równa wiersz.

102
00:09:04,750 --> 00:09:14,040
A potem wewnątrz każdego Jedziemy, aby dodać kolejną klasę div równe podłoże kolumny 12 i zapisz to.

103
00:09:14,110 --> 00:09:21,850
A jeśli spojrzeć na to, co mamy tu skończyć z nazwą użytkownika email slash nazwa użytkownika, którą nazywamy autora.

104
00:09:22,090 --> 00:09:30,760
A następnie po prawej stronie nie ma tym razem 10 dni temu, która będzie kod prostu ciężko jakiś rzeczywisty komentarz będzie dalej.

105
00:09:30,750 --> 00:09:41,350
Więc, aby tę pracę musimy zrobić jakiś tekst, a następnie zrobić coś w sprawie prawa właściwego prawo wyciągnąć tekst, a następnie musimy dodać paragraf w dla rzeczywistej samego komentarza.

106
00:09:41,350 --> 00:09:43,890
Więc spróbujmy, że i przejdź tutaj.

107
00:09:43,950 --> 00:09:45,900
Mamy pożywkę kolumnie 12.

108
00:09:46,290 --> 00:09:49,800
A w środku tego mamy zamiar zacząć po prostu dodając komentarz autora.

109
00:09:50,130 --> 00:09:51,770
Więc po prostu dodać, że właśnie tam.

110
00:09:52,200 --> 00:09:57,520
A potem niżej, że mamy zamiar dodać rozpiętości i będzie po prawej stronie.

111
00:09:57,580 --> 00:09:59,770
Więc dodamy klasyczną prawo ciągnąć.

112
00:09:59,970 --> 00:10:03,340
A potem będziemy się tu tylko dodać dziesięć dni temu do teraz.

113
00:10:03,510 --> 00:10:05,300
Dobrze kodu po prostu trudne, że w.

114
00:10:05,400 --> 00:10:09,520
A potem ostatnią rzeczą, jaką chcę zrobić, to faktycznie pokazać tekst komentarza.

115
00:10:09,680 --> 00:10:22,770
Więc mam zamiar uzyskać ten komentarz tekst tutaj, a my umieścić że wewnątrz własnej ustępu, które już mamy tu tak po prostu, z wyjątkiem chcemy przenieść go wewnątrz kolumny tutaj, podobnie jak mamy autora i 10 dni mijają ,

116
00:10:22,770 --> 00:10:29,680
Chcemy, aby być w tej samej kolumnie razem i teraz, ale zapisać i wrócić.

117
00:10:29,700 --> 00:10:31,340
Zobacz, co mamy.

118
00:10:31,360 --> 00:10:31,980
W porządku.

119
00:10:31,980 --> 00:10:33,050
Tak więc mamy jeden komentarz.

120
00:10:33,070 --> 00:10:33,930
to jest to!

121
00:10:33,930 --> 00:10:36,580
Ale widać, że mamy przycisk dodać nowy komentarz.

122
00:10:36,580 --> 00:10:37,980
Upewnij się, że to działa.

123
00:10:38,770 --> 00:10:40,450
I wyświetlane są tutaj komentarze.

124
00:10:40,470 --> 00:10:41,600
Jesteśmy brakuje ocenę.

125
00:10:41,670 --> 00:10:44,460
Tak to wygląda trochę dziwnie, ale to dobrze teraz.

126
00:10:44,700 --> 00:10:48,460
Co może chcemy zrobić, to udać się dodać jeden lub dwa więcej komentarzy.

127
00:10:48,450 --> 00:10:52,600
Więc wróć tu i niech wystarczy użyć trochę więcej lorem ipsum.

128
00:10:52,600 --> 00:10:57,100
Więc jestem po prostu skopiować części tego i dodać je jako komentarze.

129
00:10:57,270 --> 00:11:02,440
Wystarczy korzystać z niektórych, że i autor tutaj będzie kemping.

130
00:11:02,520 --> 00:11:03,600
Dziadek.

131
00:11:03,820 --> 00:11:05,000
Zatwierdź.

132
00:11:05,720 --> 00:11:06,090
OK.

133
00:11:06,100 --> 00:11:08,420
Więc mamy teraz coraz nasze komentarze tutaj dobrze.

134
00:11:08,430 --> 00:11:09,550
To działa.

135
00:11:09,540 --> 00:11:11,610
Mam trochę miejsca, które chcemy dodać.

136
00:11:11,610 --> 00:11:17,520
Jeśli spojrzeć na to, co mamy tutaj, jest bardzo słaba linia nie wiem, czy będziesz pokazać się na obsadzie ekranem.

137
00:11:17,520 --> 00:11:23,890
Jest bardzo słaba linia dodać odstępy i jedyne co musimy zrobić, żeby tej pracy jest dodanie godz r.

138
00:11:24,370 --> 00:11:33,210
Więc zaraz po tym tekście prawa, które jest po prostu dodać przycisk w linii poziomej i jeśli odświeżyć teraz mamy tam trochę miejsca.

139
00:11:33,260 --> 00:11:38,680
Masz przycisk i mamy wszystkie nasze komentarze są wyświetlane w krótkim okresie.

140
00:11:38,730 --> 00:11:40,310
Dlaczego nie możemy zbudować nazwę użytkownika.

141
00:11:40,620 --> 00:11:52,950
Więc wracamy tutaj, a my już to i pozbyli się go, ale wrócimy i dodano kolejny silny tag z autorem, a oni sprawiają, że nieco łatwiej zobaczyć.

142
00:11:52,950 --> 00:11:53,770
No to jedziemy.

143
00:11:53,830 --> 00:11:57,470
Nadal nie wielki, ale wystarczająco dobry na teraz.

144
00:11:57,540 --> 00:12:00,060
Więc tak naprawdę wszystko bootstrap, że musimy to zrobić teraz.

145
00:12:00,240 --> 00:12:01,390
Ale my wciąż nie zrobił.

146
00:12:01,470 --> 00:12:09,900
Jeśli cofniemy się i spojrzeć na gotowej wersji owski zobaczysz, że obraz zajmuje całą miniaturę i są po prostu nie robi.

147
00:12:10,050 --> 00:12:15,000
Choć zrobiłem punkt korzystania z dokładnie tego samego obrazu nie chodzi o samego obrazu rzeczywistego.

148
00:12:15,120 --> 00:12:16,820
Problem sprowadza się do naszej stylizacji.

149
00:12:17,080 --> 00:12:22,890
A to, co chcemy zrobić, to pójść i powiedzieć to zdjęcie do objęcia 100 procent z pojemnikiem.

150
00:12:23,160 --> 00:12:29,150
Więc pokażę wam możemy po prostu sprawdzić to i to jest świetne zastosowanie do inspektora tutaj.

151
00:12:29,350 --> 00:12:36,260
Możemy je zaznaczyć tutaj, a następnie tutaj możemy dodać w stylu ze 100 proc.

152
00:12:36,270 --> 00:12:37,060
I tam idziemy.

153
00:12:37,120 --> 00:12:39,540
Więc to jest jedna rzecz, że my chcemy zrobić.

154
00:12:39,610 --> 00:12:45,320
Jest jeszcze bardzo niewielka różnica, która ma trochę miejsca tam, że nie mamy na ten jeden.

155
00:12:45,470 --> 00:12:56,670
I pozbyć się, że wszyscy chcemy zrobić, to udać się do rzeczywistej miniaturkę i wybierz miniaturę, która jest tu i zamierzamy dać, że wypełnianie zero.

156
00:12:57,580 --> 00:13:02,700
A teraz, jeśli przyjrzymy wygląda to tak, że chcemy go szukać lub prawie wygląda w ten sposób, gdy spojrzeć.

157
00:13:02,730 --> 00:13:05,350
Mamy zamiar dodać kilka odstępów również tutaj.

158
00:13:05,350 --> 00:13:09,740
Można tam zobaczyć jakiś odstęp zrobić tutaj i możemy naprawić teraz.

159
00:13:09,820 --> 00:13:19,560
Ponadto, sprawdzając je i pamiętaj, że nie jesteśmy w rzeczywistości go naprawić jesteśmy po prostu sprawdzając je w przeglądarce, a potem wrócę i faktycznie wprowadzić te zmiany w naszym arkuszu stylów.

160
00:13:19,570 --> 00:13:24,760
Więc to, co chcemy zrobić, to dodać trochę wyściółka na źrebię podpisu, który jest to pole tutaj.

161
00:13:24,990 --> 00:13:31,220
A Padam chcemy jest na lewej prawej u góry iu dołu i to będzie dziewięć lub 10 pikseli.

162
00:13:31,230 --> 00:13:35,370
Więc po prostu zrobić dopełnienie dziewięć x.

163
00:13:35,760 --> 00:13:36,510
I tam idziemy.

164
00:13:36,540 --> 00:13:38,240
Skończymy z ładnym rozstawie tam.