1
00:00:00,660 --> 00:00:06,740
Witamy z powrotem w tej lekcji mamy zamiar zbudować mały projekt za pomocą czego nauczyliśmy się do tej pory o bootstrap.

2
00:00:06,770 --> 00:00:13,590
Będzie ona zawierać wiele elementów Rozmawialiśmy o tym teraz zagrodzić jumbotron i sieci energetycznej.

3
00:00:13,920 --> 00:00:17,370
Wrzuciłem też w jednym lub dwóch nowych rzeczy, w tym tu ikony.

4
00:00:17,370 --> 00:00:19,180
Nie widzieliśmy jak to zrobić ci jeszcze.

5
00:00:19,500 --> 00:00:30,360
A także fakt, że ten pasek przewijania nav jak to będzie widać, że pozostaje stała do góry tak, aby nie przejść drogę mamy stałą pasku nawigacyjnym, który również nie widziałem jeszcze.

6
00:00:30,360 --> 00:00:34,800
A potem wreszcie mamy zmianę niektórych kolorów domyślnych bootstrapped komponentów.

7
00:00:34,800 --> 00:00:37,290
Więc to jest rzeczywiście nieco inny odcień szarości.

8
00:00:37,380 --> 00:00:40,480
Jest to odcień niebieskiego i pasek nawigacyjny ma kilka różnych kolorów.

9
00:00:40,560 --> 00:00:44,250
Więc będę pokazano, jak to wszystko zrobić, że zanim zaczniemy pisania kodu.

10
00:00:44,320 --> 00:00:52,620
Po prostu chce poświęcić chwilę, by zwrócić uwagę na fakt, że obrazy te w przeważającej części pochodzą ze strony internetowej wielki zasób o nazwie Splash.

11
00:00:52,920 --> 00:00:57,640
Więc powitalny zapewnia kilka pięknych zdjęć wysokiej rez że możesz robić, co chcesz z.

12
00:00:57,750 --> 00:01:00,630
Możesz przeczytać licencję tutaj, ale to jest dość dużo, co chcesz.

13
00:01:00,630 --> 00:01:09,390
Jest to Creative Commons License bla bla bla Jestem pewien, że nie troszczą się o to, ale zdjęcia są naprawdę niesamowite i używam wiele z tych ośmiu z nich.

14
00:01:09,390 --> 00:01:11,450
W rzeczywistości w naszej galerii.

15
00:01:11,790 --> 00:01:21,090
A to pozostawia jedno zdjęcie, które jest ten tu, że rzeczywiście miała się nad podjęte klasę fotografii i jest to pierwsza rzecz, którą podjęliśmy, który wygląda pół przyzwoity.

16
00:01:21,090 --> 00:01:24,780
Myślę, że choć w porównaniu do tych co nie wygląda tak gorąco.

17
00:01:24,780 --> 00:01:28,650
W każdym razie, jeśli chcesz używać dokładnie te same obrazy, które nie są ważne.

18
00:01:28,740 --> 00:01:30,430
Będzie to działać z wszelkimi obrazami w ogóle.

19
00:01:30,450 --> 00:01:42,570
Ale jeśli chcesz te same te podaję wszystkie linki w tej galerii plików m.d które przesłanych wraz z tym filmem, a także zawarte dwa kolory, które mamy zamiar użyć ciemnoniebieski i jasnoszary.

20
00:01:42,740 --> 00:01:42,990
OK.

21
00:01:42,990 --> 00:01:46,790
Więc z tym wszystkim z drogi niech teraz zacząć od projektu.

22
00:01:47,100 --> 00:01:48,740
Więc mam pustą galerię pliku.

23
00:01:48,750 --> 00:01:49,620
H m l.

24
00:01:49,860 --> 00:01:58,670
dodam w moim h d M L szkieletu tutaj, a my po prostu zadzwoń galerię i pierwszą rzeczą, jaką musimy zrobić to m.in. startowej.

25
00:01:58,800 --> 00:02:06,490
A ja po prostu się skopiować na płytę CD kończy ze starego projektu, więc zrobię to teraz.

26
00:02:06,900 --> 00:02:07,640
No to ruszamy.

27
00:02:07,710 --> 00:02:09,830
Jestem linkami do bootstrap CDN.

28
00:02:10,200 --> 00:02:25,990
I choć jestem tu będę również chwycić CSSA siłach i Jay queery miasto, które zrobiliśmy w lekcji pasku nawigacyjnym i umieścić te na dole tutaj tak, że gdy dodamy pasku nawigacyjnym w nie musimy iść polowanie tych plików lub znaczniki skryptów.

29
00:02:26,250 --> 00:02:30,250
Więc zapisać i pierwszą rzeczą, którą możemy zrobić, to dodać w naszej Jumbotron.

30
00:02:30,510 --> 00:02:32,160
To miłe i łatwe.

31
00:02:32,400 --> 00:02:38,470
Więc mamy div i to będzie klasa równa Jumbotron.

32
00:02:38,880 --> 00:02:47,520
A potem wewnątrz Jumbotron rozpocznie z H1, że po prostu mówi do galerii zdjęć.

33
00:02:47,670 --> 00:02:51,420
Nie pójdziemy i będziemy zapisywać i zróbmy pewien, że to działa.

34
00:02:51,720 --> 00:02:53,660
Tak będzie otworzyć ten plik.

35
00:02:54,060 --> 00:02:55,330
Mamy więc Boucek włączone.

36
00:02:55,350 --> 00:02:56,780
Obserwujemy zmianę czcionki.

37
00:02:56,820 --> 00:02:58,980
Widzimy ten szary z Jumbotron.

38
00:02:58,980 --> 00:03:07,040
Załóżmy teraz upewnić się, że jest w środku pojemnika jak to jest tutaj, a nie to, co mamy, gdzie po prostu przechodzi przez całą drogę w poprzek ekranu.

39
00:03:07,320 --> 00:03:12,850
Więc zrobimy to div class równa pojemnik.

40
00:03:14,010 --> 00:03:21,900
Nie możemy iść i zróbmy to poprawnie i odświeżyć i wrócimy.

41
00:03:21,900 --> 00:03:25,140
Dobrze więc mamy Jumbotron jednak dodać w niniejszym ustępie.

42
00:03:25,140 --> 00:03:33,080
Teraz możemy wrócić i zrobić ikonę, ale to tylko znacznik akapitu pod H-1 będziemy oszczędzać.

43
00:03:33,090 --> 00:03:38,040
Śmiało umieścić dowolny inny tekst chcesz tam i skończymy z Jumbotron teraz.

44
00:03:38,730 --> 00:03:45,190
Więc wróćmy i niech teraz zrobić pasku nawigacyjnym, a ja nie zamierzam wpisywać tyle pasek od podstaw z dwóch powodów.

45
00:03:45,210 --> 00:03:46,970
Jednym z nich jest to, że jest trochę kodu.

46
00:03:47,010 --> 00:03:48,000
To zajmie dużo czasu.

47
00:03:48,010 --> 00:03:48,840
I ten film.

48
00:03:48,960 --> 00:03:52,870
Ale dwa jest fakt, że prawie nigdy nie wpisywać Ackbara od podstaw.

49
00:03:53,220 --> 00:04:02,580
Jak już wspomniałem w filmie NASCAR większość czasu mój workflow jest to, że należy przejść do witryny bootstrap lub do poprzedniej strony, że zrobiłem z paska NAV i kopią.

50
00:04:02,580 --> 00:04:04,990
I właśnie sprawdziłem go i pozbyć się części, które nie chcą.

51
00:04:05,010 --> 00:04:06,530
Dodam kilka nowych kawałków w.

52
00:04:06,570 --> 00:04:08,020
Więc to gdzie mam zamiar zrobić.

53
00:04:08,160 --> 00:04:14,160
Mam już wystarczająco dużo części, które zrobiłem w pasku nawigacyjnym powiedział każdej aplikacji HTML.

54
00:04:14,280 --> 00:04:19,570
To właśnie tutaj, a ja po prostu się skopiować, a następnie, że będziemy go podkręcić trochę.

55
00:04:19,620 --> 00:04:27,220
Więc skopiuj go i wrócę, a my po prostu umieścić to na samym początku pliku tak po prostu.

56
00:04:27,330 --> 00:04:32,770
I zobaczmy, co mamy są świeże i mamy pasku nawigacyjnym.

57
00:04:33,030 --> 00:04:34,010
To jest blisko.

58
00:04:34,050 --> 00:04:36,410
Chcemy zmienić markę tutaj.

59
00:04:36,420 --> 00:04:43,020
Chcemy także, aby zmienić kolor w końcu i chcemy, aby upewnić się, że jest on przymocowany do górnej, która nie jest już teraz, ale będziemy się tam dostać.

60
00:04:43,290 --> 00:04:45,500
Wróćmy i po prostu zmienić markę.

61
00:04:45,690 --> 00:04:49,980
Więc zamiast kawy Zadzwoniłem kopalnianych obrazów można nazwać to, co chcesz.

62
00:04:49,980 --> 00:04:53,970
Oczywiście upewnij się, że to działa w porządku.

63
00:04:54,250 --> 00:05:01,690
Następną rzeczą, pokażę ci to szybka zmiana możemy zmienić kolor, gdzie pojawiają się zamiast drzemkę lub domyślnie.

64
00:05:01,700 --> 00:05:06,880
Możemy to zrobić teraz, jeśli pasek wierszem a pokażę ci, co to wygląda.

65
00:05:06,880 --> 00:05:12,500
Dostajemy ciemno teraz lub kolory zostały odwrócone, gdzie tekst jest jasny, a my się na ciemnym tle.

66
00:05:12,750 --> 00:05:15,660
To nie jest jeszcze niebieski kolor, który Idę tutaj.

67
00:05:16,030 --> 00:05:19,740
A czcionka nie jest białe, ale będziemy wrócić i naprawić.

68
00:05:19,750 --> 00:05:21,650
Jest to na tyle blisko do teraz.

69
00:05:21,670 --> 00:05:26,100
Teraz możemy skupić się na rzeczywistej galerii zdjęć na tej siatce tutaj.

70
00:05:26,350 --> 00:05:29,640
I zacznijmy patrząc na to, jak zachowuje się w roztworze.

71
00:05:29,860 --> 00:05:44,480
Tak zaczyna się trzy obrazy idzie w poprzek, a następnie jak zmiana rozmiaru idzie w dół do dwóch, a potem idzie w dół do dwóch i wreszcie na mały rozmiar to idzie do jednego, jak można zobaczyć tutaj.

72
00:05:44,720 --> 00:05:47,110
I mamy jeden obraz idzie w poprzek.

73
00:05:47,500 --> 00:05:52,780
Zacznijmy od utworzenia siatki dla tej dużej wielkości, gdzie mamy trzy idzie w poprzek.

74
00:05:52,780 --> 00:05:54,850
Pamiętaj, mamy w sumie 12 jednostek.

75
00:05:54,910 --> 00:05:59,730
Więc jeśli chcemy trzy dzieje po drugiej stronie mamy zamiar wyznaczyć każdy z nich czterech jednostek.

76
00:06:00,160 --> 00:06:04,420
Warto więc ustawić, że się tuż pod naszym Jumbotron.

77
00:06:04,420 --> 00:06:17,680
Wciąż wewnątrz pojemnika choć musimy po prostu zrobić div class równa wiersz, a następnie wewnątrz, że będziemy mieć div class równa i chcemy go mieć cztery jednostki.

78
00:06:17,770 --> 00:06:30,260
Więc zrobimy kolumny dużą kreskę 4 i nacisnąć enter i możemy zacząć od tylko wprowadzenie jakiś tekst, a potem będę powielać, bo chcemy, trzy z nich.

79
00:06:30,430 --> 00:06:35,770
I nie martw się o ustalenie wcięcia jeszcze, bo mamy zamiar zrobić większe zmiany w chwilę.

80
00:06:36,100 --> 00:06:40,170
Ale bądźmy odświeżyć i mamy te trzy kolumny idzie w poprzek.

81
00:06:40,180 --> 00:06:52,860
Więc następną rzeczą, że chcemy zrobić, to niektóre obrazy dzieje i wszyscy zaczynają, ale po prostu biorąc L mojego Golden Gate Bridge zdjęcie i mamy zamiar dodać tag obrazu, a nie tekst.

82
00:06:52,910 --> 00:07:02,620
Więc źródło obrazu odpowiada, że ​​Golden Gate Bridge jesteś chory, a ja po prostu wklej to trzy razy i oszczędzać.

83
00:07:02,620 --> 00:07:10,310
A jeśli wrócimy mamy problem, który jest, że obraz jest ogromna, mimo że mamy te trzy kolumny.

84
00:07:10,360 --> 00:07:14,010
Nasz obraz nie przebywa wewnątrz naszej kolumny to nie kurczy się.

85
00:07:14,010 --> 00:07:19,010
Można zobaczyć, co zrobimy, aby rozwiązać ten problem, to dodać dodając trochę więcej bootstrap.

86
00:07:19,030 --> 00:07:24,670
Nie pokazałem jeszcze utworzyć tę miłą obramowanie wokół niego i to się nazywa miniatur.

87
00:07:24,700 --> 00:07:33,250
Wszystko, co musimy zrobić, to napisać div z klasą równej miniaturę obrazu, a następnie co kładziemy wewnątrz zostanie zmniejszony aby mógł zmieścić się wewnątrz kolumny.

88
00:07:33,250 --> 00:07:37,090
I to także dostaje ten mały granicę tutaj, które myślę, że wygląda całkiem ładnie.

89
00:07:37,090 --> 00:07:52,600
Więc to zrobić, że jestem naprawdę dzieje się pozbyć tego, co mamy z tymi, po prostu wrócić do jednego obrazu i dodać w div class równa miniaturę i zrobione, że prawidłowo.

90
00:07:52,930 --> 00:07:57,880
A my zawinąć, że wokół obrazu i oszczędzać.

91
00:07:57,880 --> 00:08:00,350
Jeśli teraz odświeżyć.

92
00:08:01,150 --> 00:08:06,470
Zobaczysz, jeśli mamy pojedynczy obraz, który zajmuje się odpowiednią ilość miejsca wewnątrz tej sieci.

93
00:08:06,730 --> 00:08:12,200
Jest to kolumna i ma trochę obramowanie wokół niego, a obraz nie jest gigantyczna, który jest świetny.

94
00:08:12,700 --> 00:08:15,980
Warto więc upewnić się, że działa, jeśli mamy powielać tego.

95
00:08:16,060 --> 00:08:22,430
Więc to jest jeden obraz niech powielić go trzy razy i zobaczyć co się dzieje odświeżenia.

96
00:08:22,780 --> 00:08:23,610
I tam idziemy.

97
00:08:23,710 --> 00:08:25,380
Mamy trzy obrazy.

98
00:08:25,380 --> 00:08:27,290
Pójdę do przodu i dodać sześć bardziej.

99
00:08:27,360 --> 00:08:29,790
Mamy więc w sumie dziewięć, jak my tutaj.

100
00:08:30,490 --> 00:08:32,830
I tak naprawdę nie trzeba dodawać osobne wiersze.

101
00:08:33,040 --> 00:08:35,110
Możemy po prostu umieścić je wszystkie w tym samym wierszu.

102
00:08:35,200 --> 00:08:40,420
Więc skopiować wszystkie trzy, które mamy do tej pory do czasów i oszczędzać.

103
00:08:40,480 --> 00:08:42,730
To da nam dziewięć obrazów.

104
00:08:42,730 --> 00:08:46,950
A gdybym odświeżyć zobaczysz, że automatycznie zawijany do następnego wiersza.

105
00:08:47,230 --> 00:08:52,390
Więc mamy tylko mieć jeden wiersz i dodać w tych kolumn, które znają medycznie nos.

106
00:08:52,480 --> 00:08:58,720
Jeżeli chcemy, aby każdy obraz, aby trwać cztery jednostki to znaczy, trzy w każdym wierszu, a następnie musimy trzy rzędy obrazów.

107
00:08:58,780 --> 00:09:02,150
Wrócę i zmienić wszystkie te zdjęcie, które elfy pod koniec filmu.

108
00:09:02,160 --> 00:09:03,600
Nie chcę, aby oglądać tego.

109
00:09:03,630 --> 00:09:08,580
Bardzo ciekawy prostu skopiowanie i wklejenie, ale skupmy się na reszcie tej siatki.

110
00:09:08,580 --> 00:09:21,420
Więc teraz, gdy tylko jako medium przeboju idzie do jednego obrazu, po której nie jest to, co chcemy, czego szukasz dwa obrazy w tej całej średnim przerwania.

111
00:09:21,700 --> 00:09:28,730
A potem po średnim punktu krytycznego, który jest tam trafiliśmy małe i nadal chcemy go zatrzymać w 2.

112
00:09:28,750 --> 00:09:39,310
Więc to naprawić w naszym lub idzie do jednego razu na dużym punkt przerwania lub średnim przerwania, a następnie małych i dodatkowych małych pobytów w 1.

113
00:09:39,460 --> 00:09:53,970
Możemy wrócić tutaj i będziemy zmieniać wszystko to wiesz wybrać i nacisnąć polecenie d zaznaczyć wszystkie przypadki nazywamy je duża, a potem będę hit strzałek w lewo lub w prawo, aby przesunąć kursor.

114
00:09:53,990 --> 00:09:55,840
Teraz mogę edytować je wszystkie naraz.

115
00:09:56,020 --> 00:10:04,350
A to, co chcę zrobić, mogę dodać w kolumnie średnich sześciu ponieważ chcemy Perrow i że będzie działać.

116
00:10:04,410 --> 00:10:11,920
A jeśli wrócę i odświeżyć zobaczysz że pobyt w 3 na rzędzie, a potem uderzył w środkową przerwania i idą do 2.

117
00:10:12,280 --> 00:10:20,820
Ale potem uderzył mała i skacze do jednego i do naszego, kiedy trafiliśmy małe rozwiązanie pozostaje w 2.

118
00:10:20,830 --> 00:10:33,390
Tak, aby naprawić tę kolumnę, zamiast robić kolumny pożywkę sześć możemy zrobić mały 6 i wrócić ponownie odśwież tę wersję.

119
00:10:33,730 --> 00:10:34,680
Trafiliśmy nośnika.

120
00:10:34,680 --> 00:10:35,590
Idziemy do dwóch.

121
00:10:35,800 --> 00:10:36,750
Trafiliśmy małe.

122
00:10:36,760 --> 00:10:43,530
Zatrzymujemy się w 2, a następnie udajemy się dodatkowa mała i jesteśmy na 1 1 zdjęcie na rzędzie.

123
00:10:43,810 --> 00:10:44,620
Idealny.

124
00:10:44,910 --> 00:10:49,060
Więc to wszystko, co mamy do zrobienia dla siatki i skończymy z większością funkcji tutaj.

125
00:10:49,170 --> 00:10:51,050
Bardzo szybkie, aby ta uruchomiony.

126
00:10:51,220 --> 00:10:55,570
Co chcemy skupić się na teraz to tylko niektóre z kolorów, a także ikonami.

127
00:10:55,870 --> 00:10:58,890
Zacznę, pokazując, w jaki sposób możemy dodać ikony za pomocą startowej.

128
00:10:59,080 --> 00:11:07,670
Więc on się bootstrap jeśli pójdziesz do komponentów są te ikony glifów up górze i tam kilka z nich do wyboru.

129
00:11:08,320 --> 00:11:11,840
I znajdziemy taki, który chcemy wykorzystać, a ten, który używam.

130
00:11:12,100 --> 00:11:14,710
Ja po prostu nie szukaj myślę, że to aparat.

131
00:11:14,710 --> 00:11:17,920
Więc jest to kamera tutaj i nie używam tego aparatu.

132
00:11:18,040 --> 00:11:19,310
To nieco inna.

133
00:11:19,330 --> 00:11:23,080
Ten, który używam jest bardziej retro aparatu i pokażę ci, jak dodać, że w.

134
00:11:23,080 --> 00:11:28,680
To nie jest właściwie częścią bootstrap Ale zacznijmy od zwykłego aparatu, że pochodzi z bootstrap.

135
00:11:28,810 --> 00:11:32,040
Więc piszemy Clifford Kahn, a następnie przejść z conn kamery rozdzielczej.

136
00:11:32,160 --> 00:11:43,450
A jeśli przewijać dalej w dół można zobaczyć, gdzie wyjaśniają, jak używać go do tworzenia rozpiętość gdzie klasa jest równa z Con a następnie glif to może pędzić nazwę ikony glifów.

137
00:11:43,480 --> 00:11:58,200
Więc skopiuj ten zakres i zaczniemy wykonując go wewnątrz H-1 wystarczy umieścić go na samym początku H-1 i chcemy się szybko A-Kon kreska aparat i będziemy zapisywać i odświeżać.

138
00:11:58,600 --> 00:12:01,060
I tak po prostu można dostać aparat tam.

139
00:12:01,410 --> 00:12:07,350
A jeśli chcemy przestrzeni możemy albo zrobić poprzez dopełnienie lub możemy po prostu dodać spację tam.

140
00:12:08,260 --> 00:12:16,970
I otrzymujemy przestrzeń możemy zrobić dokładnie to samo na pasku nawigacyjnym i ja jeden, który jest wywoływana Photo przejść dwukrotnie sprawdzić tutaj.

141
00:12:16,980 --> 00:12:22,780
Można to zrobić szukaj na tej stronie w obrazie fotograficznym.

142
00:12:22,890 --> 00:12:24,080
Tu jest.

143
00:12:24,260 --> 00:12:26,890
Jest to możliwe, jeżeli może pędzić obraz.

144
00:12:27,730 --> 00:12:32,890
Więc pójdziemy do baru marki nav tu i wklej w tym przedziale ponownie.

145
00:12:33,120 --> 00:12:41,420
A potem w środku rozpiętości klasa należy kliknąć na zdjęcie, a my dodamy spację również tam.

146
00:12:41,460 --> 00:12:45,880
Wracamy do naszej stronie są świeże i teraz mamy tam trochę obraz.

147
00:12:46,360 --> 00:12:47,930
I mamy też aparat.

148
00:12:48,150 --> 00:12:54,740
Następny Zajmijmy paska nawigacyjnego i zaczniemy poprzez uczynienie go przymocować do góry, dzięki czemu można zobaczyć już teraz.

149
00:12:54,790 --> 00:12:56,470
To nap nasze zwoje dalej.

150
00:12:56,950 --> 00:12:59,210
Ale w roztworze pozostaje tam.

151
00:12:59,640 --> 00:13:04,460
A do tego jest to, że jedna klasa musimy dodać do naszego baru NAV.

152
00:13:04,480 --> 00:13:11,800
Więc aż tu chcemy nav bar kreska kreska stała top i oszczędzać.

153
00:13:12,120 --> 00:13:16,570
A jeśli są świeże zobaczysz to przymocowane do góry.

154
00:13:16,570 --> 00:13:25,800
Jest jeden mały problem, który jest, że nasz materiał jest już za nim trochę i chcemy go mieć to normalne odstępy nad Jumbotron.

155
00:13:25,810 --> 00:13:32,770
Co musimy zrobić, to dodać trochę wyściółki dla naszego organizmu, a zdarza się 70 pikseli.

156
00:13:32,770 --> 00:13:39,320
Docs bootstrap powie, że jeśli zapomnisz 70 pikseli wypełnienia jest to, co chcemy to szerokość teraz cztery.

157
00:13:39,490 --> 00:14:01,850
Więc pójdziemy tutaj i będziemy tworzyć arkusz stylów i teraz będę go nazywać Galeria Dotsie SS, a następnie wybierz wewnątrz ciała dopełnienia szczycie 70 pikseli, a następnie musimy dodać, że w tym związany z arkusza stylów, który jest Galeria CS S.

158
00:14:01,920 --> 00:14:03,760
Teraz upewnij się, że działa.

159
00:14:03,790 --> 00:14:04,330
No to jedziemy.