1
00:00:00,150 --> 00:00:20,160
Teraz zmieńmy kolor tekstu H-1 i 3 roku życia w tej chwili jest to, że ciemny kolor domyślny bootstrap trafi tutaj i mogliśmy zrobić H-1 kolor biały i H-3 kolor biały i odświeżyć.

2
00:00:20,550 --> 00:00:22,790
A my się biały tekst tak po prostu.

3
00:00:22,950 --> 00:00:31,660
Ale możemy też zrobić jest jednak połączyć te dwa, bo są identyczne i czy H-1 H-3 przecinek i że uczyni oba te białe.

4
00:00:32,010 --> 00:00:34,750
Ilekroć mamy przecinek po prostu wybiera różne grupy.

5
00:00:34,770 --> 00:00:40,820
Więc wszystkie bliźniaki wszystkie trójkami wiek i wygląda dokładnie tak samo.

6
00:00:41,400 --> 00:00:50,340
Ale możemy nawet uproszczenie tego więcej i po prostu przypisać wszystko, w organizmie będzie kolor biały.

7
00:00:50,340 --> 00:00:56,790
A może uważasz, że nie byłoby problemu może zmienić lub przycisk może zmienić lub bar nav, ale należy pamiętać, że są one bardziej konkretne.

8
00:00:56,790 --> 00:01:14,780
Mamy zajęcia z Bootstrap, że robią, że w porównaniu z nich są po prostu H-1 i H-3 nie mają żadnych klas lub identyfikatory i są łatwiejsze do zastąpienia własnymi stylami ustawiając kolor nadwozia do białego H1 oraz wieku trzech odziedziczyła ten kolor i wszystko co robił, jak również.

9
00:01:14,850 --> 00:01:16,030
To było po prostu nadpisane.

10
00:01:16,050 --> 00:01:21,730
Więc jeśli skontrolowanych mamy powiedzmy ten przycisk i przyjrzymy.

11
00:01:22,650 --> 00:01:30,860
Kiedy ją zaznaczyć, a zobaczysz, że kolor jest ustawiony na tym kolorze jest 3 3 3 przez domyślnie klasy Buttona.

12
00:01:30,990 --> 00:01:40,520
Ale jeśli będziemy przewijając zobaczysz, że ciało tu ustawić kolor na biały, a to właśnie dzieje się wykreślona.

13
00:01:40,650 --> 00:01:41,390
W porządku.

14
00:01:41,970 --> 00:01:44,900
Więc jeszcze raz powiedział, że oboje być białe.

15
00:01:44,910 --> 00:01:46,980
Teraz działa od rozmiaru czcionki.

16
00:01:47,160 --> 00:01:48,870
Tak H-1.

17
00:01:48,930 --> 00:01:51,490
Chcemy, aby być złożone, które w tej chwili nie ma.

18
00:01:51,690 --> 00:02:11,570
Więc to musi być śmiały i chcę go mieć 5 cm, który jest pięć razy większy niż pamiętam elementu nadrzędnego więc musimy wybrać każdą z nich, a my damy mu wagę czcionki 700, który jest, jak używamy odważne odświeżenie ,

19
00:02:11,970 --> 00:02:12,860
Można zobaczyć je czcionką pogrubioną.

20
00:02:12,890 --> 00:02:21,100
Teraz również jest dużo większy, więc rozmiar czcionki 5 E-M.

21
00:02:21,270 --> 00:02:24,480
Teraz wróć i tam idziemy.

22
00:02:24,680 --> 00:02:25,880
Tak, że patrzy się bliżej.

23
00:02:25,880 --> 00:02:32,230
Teraz ten stosunek H1 i H-3 wygląda dokładnie tak samo.

24
00:02:32,250 --> 00:02:37,590
Nie musimy robić nic do H-3 musi teraz uzyskać obraz, aby zachowywać się tak, że chcemy go.

25
00:02:37,980 --> 00:02:41,460
A do tego mam zamiar pokazać ci coś, czego nie widziałem wcześniej.

26
00:02:41,730 --> 00:02:52,190
Mam zamiar przenieść się ciemności po prawej stronie i gdybym skontrolować wieku go elementu lub ciało zobaczy, że obaj zatrzymują przed końcem strony.

27
00:02:52,200 --> 00:02:53,280
Więc o tutaj.

28
00:02:53,430 --> 00:02:55,500
To koniec wieku do mojego dokumentu.

29
00:02:55,500 --> 00:03:09,860
Więc kiedy mówię mój obraz na pokrycie ciała i powiedziałem, że to rozmiar tła na pokrycie i położenie tła być Centrum bierze pod uwagę wielkość ciała i kiedy ciało kończy właśnie tutaj zachowuje się inaczej.

30
00:03:10,080 --> 00:03:22,420
Co zrobimy, aby rozwiązać ten problem jest nadanie elementowi HTL wysokości 100 procent, co oznacza, zajmują 100 procent pojemniku, który jest po prostu całe okno dokumentu.

31
00:03:23,150 --> 00:03:30,450
Mężczyzna wysokości 100 procent, a wrócimy.

32
00:03:30,840 --> 00:03:33,580
Zróbmy to na pełnym ekranie teraz i odświeżyć.

33
00:03:33,950 --> 00:03:37,630
A nasz wizerunek działa tak, że możemy spodziewać się, że i ja skurczy się.

34
00:03:37,860 --> 00:03:40,260
A to wygląda dobrze dla mnie też.

35
00:03:40,260 --> 00:03:43,300
Teraz mamy dwie główne rzeczy pozostawione skupić.

36
00:03:43,430 --> 00:03:45,470
Pierwszym z nich jest H.R ..

37
00:03:45,540 --> 00:03:50,540
To jest zbyt szeroki dla nas powinna być dużo mniejsze.

38
00:03:51,180 --> 00:03:54,010
I wtedy też chcą skupić się na czcionki tutaj.

39
00:03:54,570 --> 00:04:01,170
Dobrze rozpocząć zbieranie grafikę i wszystko, co chcesz zrobić, to dać się z 400 pikseli.

40
00:04:01,170 --> 00:04:12,410
Tak więc w naszym Css Będziemy wybrać godzinę to zrobić na dole jest o 400 pikseli.

41
00:04:12,450 --> 00:04:13,550
No to jedziemy.

42
00:04:13,560 --> 00:04:23,460
Inną rzeczą, którą zrobię to trochę podstępne, że może nie zauważyłeś, jak mam zamiar iść tu i nadać mu Förder na wierzchu.

43
00:04:23,460 --> 00:04:26,150
Jeden piksel stałe.

44
00:04:26,250 --> 00:04:31,620
Następnie mają kolor, który jest tutaj f 8 8 8.

45
00:04:32,220 --> 00:04:41,920
A potem dolnej granicy, a także co jest stałe i jeden piksel będzie to kolor przezroczysty.

46
00:04:41,960 --> 00:04:46,610
Zero zero zero zero dwie dziesiąte.

47
00:04:46,830 --> 00:04:49,530
Więc to nie da to efekt cienia.

48
00:04:49,990 --> 00:04:50,800
Więc zwrócić uwagę.

49
00:04:50,820 --> 00:04:52,720
To naprawdę trudno dostrzec.

50
00:04:52,830 --> 00:05:08,490
Ja nawet nie wiem, czy będę odebrać w obsadzie ekranie, ale to, co mamy, jest granica, a następnie tuż poniżej granicy jasnoszary linii sprawia, że ​​wyglądają jak tam niewielki cień pokazuje się trochę lepiej nad jaśniejsze kolory.

51
00:05:08,900 --> 00:05:09,140
OK.

52
00:05:09,150 --> 00:05:15,050
Nie można więc zobaczyć, że wystarczy, jeśli mi zaufać czy można pozbyć się obrazu tła i to będzie łatwiej zobaczyć również tam.

53
00:05:16,050 --> 00:05:20,690
Fokus do następnej Chodźmy na ikony, które użyłem do zabawy niesamowite.

54
00:05:20,690 --> 00:05:21,510
Więc mam go otworzyć.

55
00:05:21,500 --> 00:05:21,780
Zabawa.

56
00:05:21,780 --> 00:05:22,320
Niesamowite.

57
00:05:22,350 --> 00:05:23,180
Wiem.

58
00:05:23,570 --> 00:05:25,980
A my po prostu płytę CD również tutaj.

59
00:05:26,370 --> 00:05:30,970
Jeśli klikniesz zacząć istnieje CDN, że po prostu nie może kopiować.

60
00:05:30,990 --> 00:05:40,370
Put, że w naszej aplikacji, a także po prostu zrobić się do góry, a następnie zapisywać będziemy przyjrzeć rzeczywistych ikon.

61
00:05:40,980 --> 00:05:45,030
I pierwsza, że ​​wiemy, że używany jest PA.

62
00:05:45,930 --> 00:05:51,310
I zrobić to wszystko, czego potrzebujesz, to wysokiej klasy ECOS F A F Kreska Pensylwania.

63
00:05:51,660 --> 00:05:53,630
Włożyłem więc, że wewnątrz przycisku.

64
00:05:54,030 --> 00:05:59,350
Więc jeśli pójdziemy do przycisku tuż przed zacząć I dodaje, że w.

65
00:05:59,430 --> 00:06:08,820
Teraz, jeśli wrócimy i odświeżyć można sprawdzić, czy mamy mały przycisk i mamy tam odcisk dłoni obok mamy dwie ikony tutaj zarejestrować i zalogować.

66
00:06:09,500 --> 00:06:11,760
I te dwa Pamiętam, jakie są.

67
00:06:11,790 --> 00:06:19,750
Idę zrobić, że tu obok zarejestrować się po tym, jak napisać, że chcesz dodać inną ikonę.

68
00:06:19,860 --> 00:06:34,880
Z wyjątkiem tej klasy czas nie jest F-8 PA ale F.A. użytkownika kreska kreska Plus, który daje nam tę ikonę ze znakiem plus i zalogować się to samo, bez plusa.

69
00:06:34,920 --> 00:06:40,160
Więc użytkownik myślnik i mamy te dwie ikony.

70
00:06:40,250 --> 00:06:44,840
Jest jeszcze jedna rzecz, którą zrobiłem, że może nie zauważyłeś, który jest cieniem tekstu.

71
00:06:45,030 --> 00:06:52,650
Więc nie ma cienia wokół całego tekstu tutaj i zobaczyć, że nie można go zobaczyć tutaj.

72
00:06:52,640 --> 00:07:01,630
To wokół H-1 i H-3 i tech cień jest coś, co możemy ustawić za pomocą rozdzielczej tekst cienia SS.

73
00:07:02,060 --> 00:07:04,010
I nie ma to za dużo kawałków do niego.

74
00:07:04,130 --> 00:07:08,040
Więc można zobaczyć tutaj siedzimy przesunięcia X offsetową y.

75
00:07:08,120 --> 00:07:11,680
Więc jak daleko od słów powinno cień iść.

76
00:07:11,810 --> 00:07:16,240
Następnie mamy również ustawienie promienia, który zaciera Więc w zasadzie jak grube powinno być.

77
00:07:16,500 --> 00:07:21,430
A potem kolor i cień, który używam jest trochę skomplikowane.

78
00:07:21,480 --> 00:07:26,930
Jest wiele elementów, tak mam zamiar iść i wpisz go jeden kawałek na raz w pliku CSSA.

79
00:07:26,970 --> 00:07:34,620
Więc wewnątrz zawartości div doda kreska tekst cień, a następnie pierwszy zrobi.

80
00:07:34,620 --> 00:07:48,210
Zero pikseli 4 piksele 3 piksele i zrobię to naprawdę oczywiste zacząć od co czerwone i gdybym odświeżyć tam cień, który dodajemy pierwszy.

81
00:07:48,260 --> 00:08:06,460
Teraz idź i dodać drugi z przecinkiem i wciąć się trochę, a potem chcemy 0 pikseli 8 pikseli 13 pikseli, a następnie na pomarańczowo tu i spójrz na ten jeden.

82
00:08:07,350 --> 00:08:35,490
Widać mamy tego więcej niewyraźne jeden pod spodem To jasny pomarańczowy, a potem jest trzeci cień, który jest 0 pikseli, które pamiętają ten pierwszy numer to X offset i wtedy y offset 18 pikseli, a następnie 23 pikseli jest promieniem, a my uczynić ten jeden żółty i widzimy mamy jasnoczerwony miano cień.

83
00:08:35,490 --> 00:08:37,730
A potem pomarańczowy, który jest trochę dalej.

84
00:08:37,830 --> 00:08:41,670
A potem żółty, który jest o wiele bardziej rozmyte i dużo szerszy.

85
00:08:41,700 --> 00:08:43,650
Dlatego chcemy, aby zmienić te kolory.

86
00:08:43,640 --> 00:08:45,370
Nie chcemy pracować z tym.

87
00:08:45,450 --> 00:08:48,160
Tak więc kolory są nieco mniej ekscytujące.

88
00:08:48,210 --> 00:08:49,900
Pierwszy.

89
00:08:50,160 --> 00:08:54,740
Zero zero zero zero 0.4.

90
00:08:54,770 --> 00:09:01,550
Kolejny bardzo podobna zamiast 0,4 0.1.

91
00:09:01,910 --> 00:09:06,210
A potem jeszcze jeden, który jest również 0.1.

92
00:09:06,210 --> 00:09:10,870
Więc korzystając R. G. B-A my po prostu ustawiając różne odcienie szarości.

93
00:09:11,970 --> 00:09:12,560
I tam idziemy.

94
00:09:12,600 --> 00:09:16,510
Tyle mniej ekscytujące, ale mam nadzieję, że nadal można go zobaczyć tutaj.

95
00:09:16,560 --> 00:09:21,010
To dużo bardziej subtelne, ale to tylko dodaje trochę głębi strony.

96
00:09:21,060 --> 00:09:21,330
Wspaniały.

97
00:09:21,330 --> 00:09:22,830
Więc to wszystko, co musimy zrobić.

98
00:09:23,250 --> 00:09:26,040
Pozwól mi wrócić i po prostu zawinąć kilka rzeczy.

99
00:09:26,040 --> 00:09:32,300
Duży punkt chcę zrobić tutaj jest to, że możemy użyć bootstrap i polegać na nim, ale nie jesteśmy opierając się na wszystkich jego wersjach.

100
00:09:32,340 --> 00:09:40,760
Więc tak trzymaliśmy pasku nav to samo, choć w ostatnim filmie pokazałem jak można zmienić kolor bar nav ale zmienił fonty mamy dodanych obrazów tła.

101
00:09:40,770 --> 00:09:47,730
Tak naprawdę wystarczy użyć bootstrap jako podstawach, a następnie dodamy we wszystkich stylach na wierzchu i nie potrzeba wiele.

102
00:09:47,850 --> 00:09:52,540
Ale myślę, że zrobiliśmy coś, co wygląda dość zacne z zaledwie kilku linii kodu.

103
00:09:52,640 --> 00:09:56,580
I bądźmy szczerzy połowa wszystkich tłuszczów ten tekst ShadowLine właśnie tam.

104
00:09:56,750 --> 00:09:57,310
Niesamowite.

105
00:09:57,440 --> 00:10:00,230
Tak zrobiliśmy strona wygląda stosunkowo dobrze.

106
00:10:00,270 --> 00:10:01,900
Skończyliśmy z bootstrap teraz.

107
00:10:01,980 --> 00:10:05,460
Jesteśmy następnie przeniósł się do JavaScript w następnej jednostki, która jest naprawdę ekscytujące.

108
00:10:05,690 --> 00:10:12,670
Będziemy odchodzą od tworzenia miejsc i rzeczy, które ładnie wyglądają na trochę tak, że możemy skupić się wyłącznie na Javascript.

109
00:10:12,810 --> 00:10:18,560
Ale potem sprowadzimy wszystko do kupy i zrobić kilka pięknych miejsc, które faktycznie robią rzeczy, które nie tylko ładnie wyglądać.

110
00:10:18,570 --> 00:10:22,160
Tak, że idzie się szybko z nadzieją cieszył bootstrap zadowoleni z tego urządzenia.

111
00:10:22,350 --> 00:10:25,900
I jak zawsze polecam, aby pobrać kod, jeśli masz jakiekolwiek pytania.

112
00:10:25,890 --> 00:10:27,950
Jest w opisie tego filmu.