1
00:00:00,330 --> 00:00:05,940
Witamy z powrotem w tej lekcji mamy zamiar użyć bootstrap aby utworzyć stronę docelową dla fikcyjnej starcie.

2
00:00:06,070 --> 00:00:08,760
Nasz uruchamiania nazywany jest idealne dopasowanie.

3
00:00:08,760 --> 00:00:09,210
Bardzo śmieszne.

4
00:00:09,210 --> 00:00:22,430
Wiem, że to ludzka randki kotów app i zostawiam to do ciebie, aby zinterpretować to, co ludzkie randki kotów jest to może być stosunkowo nieszkodliwe może to być po prostu dopasowanie koty Sheldrick z samotnych ludzi może być coś innego.

5
00:00:22,440 --> 00:00:23,260
Nie wiem

6
00:00:23,550 --> 00:00:27,690
Zaczynajmy wykonując szybki objazd terenu i napisać do niej.

7
00:00:27,690 --> 00:00:29,920
I tak naprawdę znaczy, wskazując kilka funkcji.

8
00:00:29,970 --> 00:00:31,250
Nie ma wiele tutaj.

9
00:00:31,290 --> 00:00:33,780
My nie mamy tego podłączyć nie robi nic jeszcze.

10
00:00:33,840 --> 00:00:37,770
Więc jest to naprawdę tylko HD mounseers s, ale to wszystko, co omówiliśmy do tej pory.

11
00:00:38,100 --> 00:00:42,510
Więc mamy wystarczająco nasz doskonały mecz o incontact długościach.

12
00:00:42,510 --> 00:00:51,030
Nie właściwie nigdzie się zarejestrować i zalogować się na prawej stronie dwie małe ikony tam dostać jej hamburgera.

13
00:00:51,180 --> 00:00:52,320
mogę kliknąć na nim.

14
00:00:52,380 --> 00:00:55,980
Wszystkie te linki są teraz wewnątrz tego hamburgera.

15
00:00:55,980 --> 00:01:01,650
Następnie mamy duży obraz tła, które pozostaje skoncentrowany i obejmuje całe tło.

16
00:01:01,740 --> 00:01:09,750
Tak więc w środku mamy nazwę naszej rozruchu idealne dopasowanie do naszego, a następnie mamy nasz podpis Jedyny kanał człowieka na celownik aplikacji.

17
00:01:09,750 --> 00:01:15,420
A potem mamy trochę H R tutaj linia pozioma, a następnie przycisk, aby zacząć korzystać z ikoną.

18
00:01:15,810 --> 00:01:26,960
I jak kurczą się to, że wszystkie pobyty w środku i przenosi się też trochę tak, że nie mamy jakiś układ niezręcznej na urządzeniu mobilnym, gdzie tekst rozpoczyna się w połowie drogi w dół strony.

19
00:01:27,060 --> 00:01:29,690
Więc przenieść go trochę i pozostaje wyśrodkowany.

20
00:01:29,700 --> 00:01:33,900
Ten układy naprawdę łatwe do zrobienia i bootstrap ale jest stosunkowo skuteczne na stronie docelowej.

21
00:01:33,900 --> 00:01:38,180
Wszystko, co mamy, to pojedyncza kolumna, która zajmuje całą szerokość.

22
00:01:38,220 --> 00:01:40,850
Więc ta kolumna jedzie 12 jednostek w poprzek.

23
00:01:40,860 --> 00:01:48,510
My nie dzieląc go na żadnej części tylko jednej kolumnie 12 jednostek poprzek a potem centrum wszystkiego wewnątrz tej kolumny.

24
00:01:48,540 --> 00:01:49,860
Więc zacznijmy.

25
00:01:49,860 --> 00:01:52,350
Pierwszą rzeczą, jaką musimy zrobić, to plik.

26
00:01:52,440 --> 00:01:54,640
Mam jeden zwany indeks na DML.

27
00:01:54,720 --> 00:02:10,410
dodam to w moim regularnym boilerplate idealnego dopasowania, a następnie uruchomić poprzez dodanie w Bootstrap i będę używać CDN Bitstrips CDN.

28
00:02:11,490 --> 00:02:14,350
Zróbmy SS i Javascript tutaj.

29
00:02:14,400 --> 00:02:16,860
Musimy ten skrypt na pasku zadań.

30
00:02:17,220 --> 00:02:19,130
Dlatego musimy połączyć tag.

31
00:02:19,710 --> 00:02:22,770
Następnie otrzymujemy JavaScript.

32
00:02:22,770 --> 00:02:24,030
Skopiuj to.

33
00:02:24,090 --> 00:02:32,030
Umieścić to na dole, która jest tag skryptu, a następnie ustawiamy źródło równą jesteś.

34
00:02:32,520 --> 00:02:43,390
Teraz, jeśli otworzymy się to OK otworzyć konsolę mamy mały problem, który jest, że musimy Jay zapytanie, jak również w celu bootstrap javascript.

35
00:02:43,450 --> 00:02:46,290
Pamiętaj powrotem z baru lekcji nav musimy wymagać J.

36
00:02:46,290 --> 00:02:46,750
Querrey.

37
00:02:46,860 --> 00:02:52,500
Więc dostaniemy CDN za to.

38
00:02:53,730 --> 00:02:55,290
Zrobimy wersję zmodyfikowaną.

39
00:02:55,290 --> 00:02:57,500
Skopiuj ten adres URL.

40
00:02:57,600 --> 00:03:04,110
I wreszcie wracamy tutaj i musimy zrobić zanim związana bootstrap do javascript.

41
00:03:04,440 --> 00:03:09,360
W przeciwnym razie będzie on nadal nie wie o zapytaniu więc musi załadować zapytanie pierwszy.

42
00:03:09,360 --> 00:03:10,650
Teraz spróbujmy jeszcze raz.

43
00:03:10,870 --> 00:03:11,960
odświeżania przeciwpożarowe.

44
00:03:12,520 --> 00:03:17,490
OK, nie widzimy nic, że to dobry znak, ponieważ nie widzimy żadnych błędów.

45
00:03:18,570 --> 00:03:20,850
Zacznijmy od tekstu w środku.

46
00:03:20,850 --> 00:03:22,480
Cała ta treść tutaj.

47
00:03:22,620 --> 00:03:35,870
Więc musimy utworzyć kontener, a następnie wewnątrz pojemnika musimy wiersz do div class eCos pojemniku, a następnie wewnątrz nie mamy innego div zawsze potrzebujemy tego wiersza.

48
00:03:35,930 --> 00:03:47,220
W każdej chwili używamy systemu sieci, a następnie nasz div, który będzie równy klasy kolumny kreską dużej 12.

49
00:03:48,240 --> 00:03:50,750
I że obejmie całą drogę w poprzek pojemnika.

50
00:03:51,210 --> 00:03:59,330
A potem w środku, jeśli zamierzamy mieć H1, który będzie po prostu powiedzieć, idealne dopasowanie i oszczędzać.

51
00:03:59,520 --> 00:04:02,280
I zostawmy go w tym odświeżaniu.

52
00:04:02,580 --> 00:04:06,660
I to nie jest tak naprawdę to, czego jeszcze chcesz, a to dlatego, że istnieje kilka rzeczy, które trzeba zrobić.

53
00:04:06,660 --> 00:04:09,010
Po pierwsze, musimy centrum wszystkiego w tej kolumnie.

54
00:04:09,300 --> 00:04:19,190
Jeśli więc sprawdzić, co mamy do czynienia tutaj widać, że H1 przechodzi przez całą drogę w poprzek i po prostu trzeba wyśrodkować go wewnątrz tego.

55
00:04:19,410 --> 00:04:21,680
A drugie jest to, że musimy przesunąć nieco w dół.

56
00:04:21,720 --> 00:04:26,250
Musimy dodać dopełnienie lub margines tak, że nie idzie w prawo do góry naszej strony.

57
00:04:26,250 --> 00:04:28,480
Zacznijmy poprzez dodanie pozostałej części zawartości.

58
00:04:28,830 --> 00:04:47,730
Więc mamy też tylko człowiekiem randkowy kotów aplikację i że będzie po prostu być H 3 i mogliśmy grać naprawdę z tym może być dowolny element, który chcemy ale będę sprawiają, że H-3 jedynym człowiekiem kreska randki kotów app.

59
00:04:48,090 --> 00:04:59,180
I wtedy możemy dodać w tej linii poziomej, która nie będzie wyglądać dobrze, ale będziemy projektować je po fakcie, a potem będziemy również dodać przycisk w klasie na tym przycisku.

60
00:04:59,240 --> 00:05:01,680
Przyjrzymy.

61
00:05:02,100 --> 00:05:06,010
Jest to domyślny przycisk bootstrap i jest to duży przycisk.

62
00:05:06,330 --> 00:05:07,830
Wracajmy.

63
00:05:07,830 --> 00:05:29,320
Więc musimy PTEN a następnie domyślny kolor i to rozmiar między LG dla dużych i tutaj musimy po prostu dodać tekst, który jest zacząć i zapisać zobaczmy, co skończy się.

64
00:05:29,340 --> 00:05:30,330
W porządku.

65
00:05:30,330 --> 00:05:34,270
Mamy więc teraz nasza treść kolejnego ale Center wewnątrz sieci.

66
00:05:34,470 --> 00:05:36,920
A potem skupimy się na obicia i przesuwając go w dół.

67
00:05:36,930 --> 00:05:44,720
Ale zacząć centrum wewnątrz tej siatki i sprawi że łatwiej Idę do grupy to wszystko wewnątrz div tak, że nie mamy do centrum każdą rzecz z osobna.

68
00:05:44,760 --> 00:05:51,430
Mamy do centrowania H-1, a potem trzy, a następnie przycisk, a możemy zgrupować w div i po prostu Center, który dział się w jednej linii.

69
00:05:51,750 --> 00:06:01,490
Zróbmy div i dam mu identyfikator Canteta a wtedy umieścić wszystko wewnątrz tam.

70
00:06:01,560 --> 00:06:08,340
Więc H-1 w wieku 3 H.R. i przycisk będzie prawidłowo tiret i oszczędzać.

71
00:06:08,580 --> 00:06:14,270
Więc nic nie powinno wyglądać inaczej, gdybym odśwież stronę, zanim my dodajmy, że w naszym arkuszu stylów.

72
00:06:14,340 --> 00:06:18,840
Więc dodałem znacznik łącza i zadzwonię do mojej aplikacji arkusza stylów.

73
00:06:18,920 --> 00:06:20,920
SS on jeszcze nie istnieje.

74
00:06:21,120 --> 00:06:24,220
Więc muszę zrobić to zapisać.

75
00:06:24,230 --> 00:06:27,060
Widzę SS w tym samym katalogu.

76
00:06:27,420 --> 00:06:31,550
I zacznijmy od czegoś prostego, jak wszystkie te godziny są fioletowe.

77
00:06:31,680 --> 00:06:35,030
Wystarczy, aby upewnić się, że działa OK.

78
00:06:35,400 --> 00:06:37,060
Wróćmy odświeżenia.

79
00:06:37,390 --> 00:06:39,100
Andrew uzyskać fioletowy H-1.

80
00:06:39,180 --> 00:06:39,670
Wspaniały.

81
00:06:39,870 --> 00:06:44,970
Więc teraz niech zaznaczyć, że Dave dodaliśmy z ideą treści i wyśrodkować go.

82
00:06:45,030 --> 00:06:53,620
Więc pozbyć się tego i musimy zawartość identyfikatora i pomijając zrobić to tekst wyrównać Center.

83
00:06:54,210 --> 00:06:56,430
Wracajmy.

84
00:06:56,430 --> 00:06:57,110
No to jedziemy.

85
00:06:57,120 --> 00:06:59,490
Więc rzeczy są Centrum wyrównany do tej pory.

86
00:06:59,490 --> 00:07:07,440
Dalej będziemy tego popchnąć nieco o 25 procent w dół strony, aby być dokładne z wyściółką równej 25 proc.

87
00:07:07,470 --> 00:07:15,270
Więc tutaj zrobimy wyściółka górę 25 procent.

88
00:07:16,270 --> 00:07:22,870
I zamiast nadając mu ciężko liczbę pikseli jeśli będziemy go w procentach jest to nieco bardziej elastyczne.

89
00:07:22,890 --> 00:07:24,790
Więc to jest w samym centrum miasta.

90
00:07:25,230 --> 00:07:29,940
A potem 25 procent zmiany podczas zmiany rozmiaru ekranu.

91
00:07:29,940 --> 00:07:30,540
Wspaniały.

92
00:07:30,540 --> 00:07:32,480
Teraz dodajmy na obraz tła.

93
00:07:32,670 --> 00:07:43,280
Tak więc obraz, który używam jest urocza kotka i interakcja człowieka dzieje się z tym na stronie internetowej Splash którą wprowadzono w poprzednim filmie, gdzie stworzył bootstrap siatki obrazu.

94
00:07:43,680 --> 00:07:48,300
I oni mają wszystkie rodzaje naprawdę wielkich obrazów wysokiej jakości, których można używać bez problemu.

95
00:07:48,480 --> 00:07:54,110
A ten, który używam jest tutaj mogę szukać linków Kot w tym opisie, jak również.

96
00:07:54,450 --> 00:08:00,230
Oto ci Aro tego obrazu po prostu kliknij prawym przyciskiem myszy skopiować obraz jesteś l.

97
00:08:00,360 --> 00:08:06,310
Teraz wróćmy i mam zamiar dodać go do organizmu jako obraz tła.

98
00:08:06,800 --> 00:08:13,830
Więc tła, a następnie nadać mu adres URL, który jest, że gigant Jesteś tam.

99
00:08:13,830 --> 00:08:26,010
A jeśli zostawimy ją na to, że postać na tym poziomie lub odświeżyć mamy gigantyczny obraz tła, a wszystko, co możemy powiedzieć, że jest to jakiś rodzaj uruchamiania za paznokciami.

100
00:08:26,010 --> 00:08:36,060
Więc musimy zmienić jego rozmiar, a do zrobienia, że ​​używamy rozmiaru tła i zmiany, które mają być objęte nowo.

101
00:08:36,060 --> 00:08:39,230
Znowu jesteśmy coraz bliżej.

102
00:08:39,270 --> 00:08:44,950
Spowoduje to, że obraz tak małe, jak to możliwe, a jednocześnie obejmujące całą szerokość i wysokość ekranu.

103
00:08:45,240 --> 00:08:52,240
Więc to nie zmieni proporcje nie będą pochylać obraz w żaden sposób, ale będzie rozciągać się w obu kierunkach, jak to musi.

104
00:08:52,350 --> 00:08:57,060
Ale minimalna kwota, która musi zmieścić się na naszym ekranie, a wciąż nie jest doskonały.

105
00:08:57,210 --> 00:09:01,900
A to, co chcemy zrobić, to nie zmienia rozmiar niego, ale zmienić pozycję.

106
00:09:02,190 --> 00:09:10,280
Jedziemy do centrum informatyczne tła pozycji środkowej, ale z zastrzeżeniem, że jesteśmy bliżej.

107
00:09:10,290 --> 00:09:13,320
Ale wciąż nie jest idealne dopasowanie miarę obraz idzie.

108
00:09:13,800 --> 00:09:15,510
A te zmiany przyjdzie później.

109
00:09:15,510 --> 00:09:24,650
Na razie chcę skupić się na dodanie w pasku nawigacyjnym, a aby to zrobić, gdy idziesz do docs Boucek i przejść do części, a ja wspomniałem o tym wcześniej.

110
00:09:25,080 --> 00:09:27,690
Zawsze to zrobić, jeśli Dodaję w bootstrap pasku nawigacyjnym.

111
00:09:27,810 --> 00:09:29,850
To jest po prostu zbyt wiele rzeczy do zapamiętania inaczej.

112
00:09:30,230 --> 00:09:32,070
A ja po prostu skopiować To właśnie tutaj.

113
00:09:32,370 --> 00:09:39,630
Weźmie całą nav zacząć wracać do naszej aplikacji tutaj i po prostu umieścić go na samym szczycie.

114
00:09:39,630 --> 00:09:46,110
To zdecydowanie nie jest NAF, że chcemy, ale zawiera elementy, które chcemy, aby odświeżyć.

115
00:09:46,380 --> 00:09:47,380
Jest to na tyle blisko.

116
00:09:47,610 --> 00:09:49,360
Więc jest kilka zmian, które chcemy wykonać.

117
00:09:49,470 --> 00:09:58,570
Pierwszym i najprostszym z nich jest, że nasze treści w roztworze jest w pojemniku, tak aby nie przejść całą drogę do krawędzi tak jak to robi się tutaj.

118
00:09:59,100 --> 00:10:14,250
Tak więc możemy wrócić i wstawka lub są po prostu zmienić to być kontener div class i jeśli wrócimy teraz można zobaczyć, że dlatego, że dodaje się w tym pojemniku mamy teraz pewne odstępy tak jak my tutaj na rozwiązanie.

119
00:10:14,250 --> 00:10:16,920
Teraz przejdźmy do pracy na rzeczywistej zawartości Nev ..

120
00:10:17,070 --> 00:10:33,950
Dlatego najłatwiej jest zmienić markę, która w tej chwili po prostu mówi Brand powrotem tutaj klasa ta linia równa Neth bar markę, a my go zmienić na stałym meczu i oszczędzać.

121
00:10:33,940 --> 00:10:34,990
Wypróbuj to.

122
00:10:35,490 --> 00:10:37,500
Ok dobrze.

123
00:10:37,500 --> 00:10:39,050
Teraz pozbyć się tego formularza.

124
00:10:39,060 --> 00:10:41,150
Nie potrzebujemy tego.

125
00:10:41,310 --> 00:10:45,030
Więc nasz formularz wszystko zaczyna się właśnie tutaj.

126
00:10:45,030 --> 00:10:50,490
Pozbądź się tej całej rzeczy odświeżaniu.

127
00:10:50,860 --> 00:10:52,560
Załóżmy również pozbyć się menu.

128
00:10:52,560 --> 00:10:54,570
Nie potrzebuję tego.

129
00:10:54,570 --> 00:10:56,680
Tak, że zaczyna się tutaj.

130
00:10:56,680 --> 00:11:02,810
To kłamstwo, że kończy się tam są świeże ponownie.

131
00:11:03,120 --> 00:11:04,540
Teraz mamy jeden odnośnik.

132
00:11:04,710 --> 00:11:10,910
Więc zaczniemy od tych dwóch linków, które mają się zarejestrować i zalogować się.

133
00:11:11,360 --> 00:11:18,110
To ten link tu więc możemy zmienić, że jeden się zarejestrować, a następnie powielić go.

134
00:11:18,390 --> 00:11:21,450
Wystarczy sojusznikiem ze znacznikiem zakotwiczenia w jej wnętrzu.

135
00:11:21,450 --> 00:11:23,840
A ten zostanie zalogowany.

136
00:11:24,750 --> 00:11:26,640
Sprawdźmy to.

137
00:11:26,700 --> 00:11:27,260
Wspaniały.

138
00:11:27,270 --> 00:11:29,100
Więc ikony przyjdzie na końcu.

139
00:11:29,100 --> 00:11:30,380
Mamy dwa linki.

140
00:11:30,450 --> 00:11:32,320
Teraz musimy trzy linki tutaj.

141
00:11:32,340 --> 00:11:35,500
Mamy już dwa z nich, a my się pozbyć tej listy rozwijanej.

142
00:11:35,610 --> 00:11:38,560
Więc musimy domu o kontakt.

143
00:11:38,600 --> 00:11:41,490
Więc zlokalizować listę rozwijaną, która jest tutaj.

144
00:11:41,490 --> 00:11:43,100
Klasa równa rozwijanej.

145
00:11:43,140 --> 00:11:49,070
Chodźmy się go pozbyć, a teraz w znacznym stopniu uproszczone Akbara.

146
00:11:49,080 --> 00:11:50,370
Teraz mamy dwóch różnych długościach.

147
00:11:50,390 --> 00:11:53,760
Będziemy rzeczywiście pozbyć się oboje i zrobić to od podstaw.

148
00:11:53,760 --> 00:12:00,120
Więc dodamy jednego sojusznika ze znacznikiem zakotwiczenia i wtedy zrobię to trzykrotnie.

149
00:12:00,120 --> 00:12:02,260
Ten pierwszy powinien powiedzieć domu.

150
00:12:02,550 --> 00:12:04,100
Kolejny chodzi.

151
00:12:04,320 --> 00:12:06,530
A ostatni z nich jest kontakt.

152
00:12:07,020 --> 00:12:08,760
Sprawdźmy to.

153
00:12:08,760 --> 00:12:11,050
Nie idziemy na trzy odcinki.

154
00:12:11,070 --> 00:12:11,970
Jedna drobna rzecz.

155
00:12:11,970 --> 00:12:16,830
Strona główna ma być aktywny i bootstrap to naprawdę proste.

156
00:12:16,980 --> 00:12:29,390
Wszystko, co musimy zrobić, to dodać klasę równa aktywnych do nie sojusznika tagu kotwicy ale sojusznikiem macierzystej, a teraz w końcu z domu będąc aktywny link.

157
00:12:29,400 --> 00:12:29,960
Wspaniały.

158
00:12:30,200 --> 00:12:37,940
OK, więc to nasz bar nav i jeśli rozmiar zobaczysz, że mamy już tego hamburgera działa dobrze.

159
00:12:38,520 --> 00:12:42,420
Mamy problem, który jest, że nasz obraz w tle jest pomieszane.

160
00:12:42,420 --> 00:12:45,750
Zajmiemy się, że tylko trochę, ale mamy grzywnę roboczą Hamberger.

161
00:12:45,750 --> 00:12:47,400
Wszystko wygląda dobrze.

162
00:12:47,430 --> 00:12:53,360
Teraz zająć czcionkę więc czcionka, że ​​użyłem tu jest Ledo L.A. ..

163
00:12:53,430 --> 00:12:57,900
To od czcionek Google więc pójdę do czcionek Google i poszukać Ledo.

164
00:12:58,010 --> 00:13:02,720
LA T-O każdym iść do kolekcji.

165
00:13:03,180 --> 00:13:06,820
Użyjmy go, jeśli będzie się normalne i pogrubione.

166
00:13:06,840 --> 00:13:10,050
Ponadto chcemy, aby nasza H-1 będzie pogrubiony.

167
00:13:10,590 --> 00:13:11,040
W porządku.

168
00:13:11,070 --> 00:13:16,290
A potem dodamy link prawo do jej stosowania.

169
00:13:16,290 --> 00:13:24,090
Up górze tutaj zapisać się wprowadzić aplikacje oceny będziemy stosować tę czcionkę do wszystkiego.

170
00:13:24,270 --> 00:13:33,970
Więc mam zamiar wybrać się wewnątrz rodziny fontów ciało Ledo i niech to upewnij się, że jest ładowanie poprawnie.

171
00:13:34,050 --> 00:13:36,780
Zobacz co mamy odświeżyć.

172
00:13:37,520 --> 00:13:43,990
A nasz przodu zmienia to trudno zobaczyć, ponieważ tekst jest ciemny, ale zmienił można również zobaczyć na NFR tutaj.

173
00:13:44,160 --> 00:13:44,790
To się zmieniło.

174
00:13:44,790 --> 00:13:47,510
To pasuje do tego, co mamy w tym roztworze.