1
00:00:00,390 --> 00:00:07,420
Witamy z powrotem w tej jednostce mam zamiar pokazać wam kilka innych komponentów, takich jumbotron i form bootstrap i wejść.

2
00:00:07,530 --> 00:00:14,520
Ale zanim to zrobię, że chcę poświęcić chwilę, by zająć coś, co jest naprawdę bardzo ważne, gdy mamy do uczenia się nowych narzędzi, takich jak ten jak bootstrap.

3
00:00:14,760 --> 00:00:31,200
A z mojego doświadczenia ludzi dydaktycznych stać developerzy Zauważyłem bootstrap jest jednym z pierwszych miejsc, gdzie niektórzy z uczniów zacznie odczuwać niepokój niewygodne i czują się jak nie wiem, czy oni robią, a potem z powodu my nagle w tym kilka kodów ktoś inny napisał do naszej aplikacji.

4
00:00:31,200 --> 00:00:43,550
Ale jeśli spojrzeć na docs tutaj są naprawdę długo są one wyczerpujące, który jest wielki, ale jest tam wiele tutaj i chcę, żebyś do klatki to nie jako podręcznik, który trzeba czytać, aby zrozumieć wszystko.

5
00:00:43,560 --> 00:00:47,980
To nie jest jak jak przewodnik, który trzeba zakończyć, zanim użyjemy bootstrap.

6
00:00:48,300 --> 00:00:53,820
Jest to odniesienie, gdzie jeśli zdecydujesz trzeba formę obejrzysz części formularza, jeśli chcesz stolik.

7
00:00:53,850 --> 00:00:56,780
trafisz sekcji Tabela jeśli potrzebujesz pasku nawigacyjnym.

8
00:00:56,850 --> 00:01:12,810
Wyglądasz na odcinku NFR, ale ważne jest, że można traktować docs jak to będzie ich używania non-stop wraca tu odwołujących poszczególnych bitów kodu kopiowania ich segmenty kodu sprawdzić niektóre pokazy czytania przykłady Używam bootstrapped dla roku w tym momencie.

9
00:01:12,930 --> 00:01:14,630
I czuję się całkiem dobrze większość z nich.

10
00:01:14,760 --> 00:01:18,220
Ale zostawiam docs otwarte, gdy pracuję nad czymś z bootstrap.

11
00:01:18,330 --> 00:01:26,900
Ciągle przedstawieniu przykładów w jednym z bardzo wczesnych filmów, w tym oczywiście rozmawiałem o tym, jak stać się web developer.

12
00:01:27,060 --> 00:01:32,490
Nie stajesz się ekspertem w zapamiętywaniu i wiedząc co nieco informacji.

13
00:01:32,730 --> 00:01:33,960
Tak trzeba wiedzieć rzeczy.

14
00:01:33,960 --> 00:01:39,210
Tak trzeba zrozumieć i zapamiętać pewne rzeczy, ale nie jesteś staje się ekspertem i zapamiętywania.

15
00:01:39,210 --> 00:01:41,990
Stajesz się ekspertem w dostępie do informacji.

16
00:01:42,120 --> 00:01:52,410
A niektóre z tych informacji nie będzie zapamiętane i dużo to będzie online w dokumentacji lub przykłady filmów książek wszelkiego rodzaju zasobów.

17
00:01:52,410 --> 00:01:54,350
Dobrze więc, aby podsumować całą rozmowę pep.

18
00:01:54,450 --> 00:02:01,430
Zasadniczo po prostu chcę, aby pamiętać, że tak jest dużo załadowania i masz zamiar zobaczyć 20 30 procent to i jest wiele więcej tam.

19
00:02:01,440 --> 00:02:03,210
Ale nie daj się zastraszyć tym.

20
00:02:03,240 --> 00:02:07,800
Powinieneś czuć dostępu do dokumentacji, jeśli trzeba coś zrobić, że nie pokazać, jak to zrobić.

21
00:02:07,860 --> 00:02:09,480
Otwórz docs i szukać.

22
00:02:09,600 --> 00:02:13,760
I zawsze świetne przykłady i wyjaśnienia dotyczące dostać bootstrapped DOTCOM.

23
00:02:14,120 --> 00:02:22,110
OK, tak więc bez zbędnych ceregieli przejdźmy do rozmowy o niektórych z tych ważnych elementów i mam zamiar zacząć od pokazujące Jumbotron.

24
00:02:22,500 --> 00:02:31,680
Więc Jumbotron według oficjalnych docs to lekki elastyczny element, który można opcjonalnie rozszerzyć całą rzutnię do zaprezentowania kluczową treści na swojej stronie.

25
00:02:31,680 --> 00:02:37,670
Można zobaczyć przykład jednego tu i jeśli chcemy użyć Jumbotron to naprawdę bardzo proste.

26
00:02:37,680 --> 00:02:44,750
Wszystko, co musimy zrobić, to napisać div class jumbotron a potem cokolwiek umieścić wewnątrz, która będzie częścią Jumbotron.

27
00:02:44,970 --> 00:02:46,680
Warto więc spróbować.

28
00:02:47,190 --> 00:03:17,300
Po prostu zrób to poniżej przyciski będą mieć div z klasą Jumbotron jumbo tron, a następnie wewnątrz jeśli zróbmy to H1 lub H-1 będzie powiedzieć, że jest to jumbotron a następnie dodać przycisk tam tak samo jak oni mają tutaj a my dodaj ustępie oraz w naszym ustępie będzie tylko jibberish.

29
00:03:17,790 --> 00:03:19,420
wystarczająco dobre do teraz.

30
00:03:20,310 --> 00:03:28,460
Oraz przycisk i nasz przycisk będzie po prostu powiedzieć cześć tam.

31
00:03:28,800 --> 00:03:29,250
OK.

32
00:03:29,250 --> 00:03:31,830
A następnie przycisk mamy kilka możliwości.

33
00:03:31,980 --> 00:03:39,680
Zrobimy sukces przycisk i będę sprawiają, że duże i oszczędzać.

34
00:03:39,940 --> 00:03:41,620
Rzućmy okiem na to, co otrzymujemy.

35
00:03:41,790 --> 00:03:48,740
I nie ma Jumbotron widać, że zajmuje całą szerokość naszego okna przeglądarki i nie jest zwykle to, co chcemy.

36
00:03:49,050 --> 00:03:55,510
A co się dzieje jest to, że JumboTron jest skonfigurowany do objęcia 100 procent, co pojemnik jest wewnątrz.

37
00:03:55,640 --> 00:03:57,740
W tym przypadku nie jest to poza wszystkim.

38
00:03:57,900 --> 00:04:07,640
Ale wkrótce będę pokazujące konstrukcję nośną i bootstrap, gdzie możemy dokładnie kontrolować, ile chcesz to potrwać ekranu, jeśli ma to być skupione i zajmują jedną trzecią ekranu.

39
00:04:07,650 --> 00:04:14,150
Dwie trzecie ekranie ćwierć ekranu mamy te wszystkie różne opcje możemy dokonać za pomocą siłach sieci energetycznej.

40
00:04:14,310 --> 00:04:25,140
Na razie mam zamiar pokazać inny element nie możemy, w którym jest div z klasą równej pojemnika i jakiego pojemnika zrobi.

41
00:04:25,140 --> 00:04:32,950
Jeśli po prostu umieścić materiał wewnątrz pojemnika div class daje on pewne odstępy jakąś wyściółkę wokół niego i ośrodki rzeczy.

42
00:04:33,360 --> 00:04:46,750
Więc pojemnik znaleźć skontrolować zajmuje całą tę przestrzeń tutaj można zobaczyć, ale ma sporo marginesu na nim.

43
00:04:46,750 --> 00:04:55,990
Więc jeśli chcemy tylko szybką poprawę, bez konieczności korzystania z systemu siatki, które nie mówiły o możemy dodać div kontenera klasy, a teraz mamy ten miły patrząc Jumbotron.

44
00:04:55,990 --> 00:05:03,230
A jeśli poruszamy ten kod, że mamy już w dół do pojemników dobrze, ale nie będzie można umieścić go wewnątrz Jumbotron.

45
00:05:03,310 --> 00:05:07,890
Zobaczysz, że nadal zależy od tego kontenera.

46
00:05:08,020 --> 00:05:18,120
Więc poza Jumbotron ale wewnątrz pojemnika zapisać i odświeżyć widać to także wewnątrz tego kontenera i odzwierciedla wizualnie.

47
00:05:18,400 --> 00:05:22,320
OK, niech wrócić do części i następną rzeczą, że ci pokażę.

48
00:05:22,330 --> 00:05:23,950
Idziemy na górę.

49
00:05:24,280 --> 00:05:28,760
Musimy iść na drugą zobaczyć oceny i pokażę ci, jak i formy tych prac.

50
00:05:28,990 --> 00:05:33,030
Więc kliknij na formularzach i tam sporo różnych typów i różnych przykładów.

51
00:05:33,070 --> 00:05:35,710
A ja po prostu przewinąć nimi zanim my nic pisać.

52
00:05:35,980 --> 00:05:39,910
Więc tutaj jest podstawowym przykładem postaci bootstrap.

53
00:05:39,910 --> 00:05:42,540
Widać, że rynek tworzy go.

54
00:05:42,760 --> 00:05:55,320
Następnie mamy to, co jest znane jako forma inline i mamy inny rodzaj formularza inline i jeszcze jeden z różnymi typami wejść i innego rodzaju formy.

55
00:05:55,480 --> 00:06:00,420
A teraz mówi się o wszystkim inny typ postaci kontroluje różne rodzaje wejść, które są obsługiwane.

56
00:06:00,430 --> 00:06:03,280
Więc wszystkie te barwy jesteś.

57
00:06:03,310 --> 00:06:24,940
Numer email tydzień czasu i tak dalej pól tekstowych różne Pola wyboru pola wyboru Wyłączone Wyłączone Pola wyboru przycisków radiowych inline inline przyciski radiowe rozwijane menu wybiera iść dalej w dół.

58
00:06:24,970 --> 00:06:26,780
Mamy Inne Forum członkowskim.

59
00:06:26,780 --> 00:06:28,370
Mamy stan ostrości.

60
00:06:28,470 --> 00:06:30,910
Widać to podświetlenie wokół tego błękitu.

61
00:06:31,060 --> 00:06:34,420
To jest domyślny bootstrap ostrości stylizacji.

62
00:06:34,420 --> 00:06:54,610
Możemy również wyłączyć wejść poprzez dodanie niepełnosprawnych i mamy też kilka innych rzeczy możemy zrobić, ale mam zamiar wrócić i naprawdę skupić się na podstawowej przykładowa początku i zacznę po prostu kopiując całą tę formę ponad, a my go wnikliwie kawałek po kawałku.

63
00:06:54,610 --> 00:06:59,200
Więc wróćmy tu i musimy po prostu dodać tę formę po wszystkim.

64
00:06:59,200 --> 00:07:01,420
Ale zrobię to wewnątrz pojemnika.

65
00:07:01,420 --> 00:07:03,290
Pozwól mi zrobić to pełny ekran na chwilę.

66
00:07:03,340 --> 00:07:08,580
Mamy formularz, a wewnątrz tej postaci mamy sporo treści.

67
00:07:08,590 --> 00:07:11,900
Wróćmy do przeglądarki i przyjrzeć się jak to wygląda.

68
00:07:12,460 --> 00:07:17,170
I pierwszą rzeczą będzie zauważyć, że nasza forma idzie całą drogę w poprzek tego kontenera.

69
00:07:17,230 --> 00:07:21,060
Zajmuje 100 procent, że przy i że coś będziemy w stanie kontrolować.

70
00:07:21,100 --> 00:07:28,470
Gdy mówimy o bootstrap systemu sieci i łatwo będzie w stanie powiedzieć, to powinno przejść 50 procent całej sposób.

71
00:07:28,480 --> 00:07:34,090
Więc to jest coś, będziemy mogli łatwo zmieniać raz mówimy o bootstrap systemu sieci lub nie jesteśmy tam jeszcze.

72
00:07:34,120 --> 00:07:35,510
Więc po prostu pójdzie z nim.

73
00:07:35,530 --> 00:07:37,080
Zajmuje 100 procent do teraz.

74
00:07:37,120 --> 00:07:39,670
To gigantyczna dziwne Forum patrząc ale to jest w porządku.

75
00:07:39,820 --> 00:07:41,320
Kochamy go, jak to jest.

76
00:07:41,470 --> 00:07:45,290
Więc wracamy do wzniosłości i niech wnikliwie ten jeden kawałek na raz.

77
00:07:45,550 --> 00:07:48,730
Mamy więc tag forum wewnątrz tego znacznika forum.

78
00:07:48,910 --> 00:08:04,010
Istnieje grupa formą div class, a jeśli chcesz wiedzieć więcej o tym, co robi, że jeśli wrócę do docs bootstrap i nie szukaj grupie formy i można zobaczyć etykiety rap i kontroli w grupie forma dla optymalnego odstępu.

79
00:08:04,300 --> 00:08:13,800
Więc jeśli pozbędziemy się tej klasy grupy formą wokół tej pierwszej i zrobimy to po pierwszym i drugim zobaczysz co skończy się.

80
00:08:13,870 --> 00:08:21,520
Będę zapisywać i odświeżać zobaczyć, jak zmienia się tutaj odstęp między tymi wejściami.

81
00:08:22,150 --> 00:08:30,640
Tak więc możemy wrócić i dodać tę grupę formularz, a to jest naprawdę, jak go używać, gdzie masz wejście i etykietę i chcesz, żeby być grupowane są tworzone.

82
00:08:30,940 --> 00:08:35,320
Więc zwrócić uwagę właśnie tu tylko trochę przestrzeni dodaje tam.

83
00:08:35,320 --> 00:08:43,660
To tylko dodaje odrobinę miejsca tu co skutecznie Grupy te dwa razem wizualnie i następnie Grip jest to razem wizualnie, jak i tych na dole.

84
00:08:43,660 --> 00:08:45,390
Więc to grupa formie.

85
00:08:46,000 --> 00:08:47,860
A potem etykiety są po prostu normalne.

86
00:08:47,860 --> 00:08:54,960
Nie mamy ochotę coś dodać do etykiety bez klasy Boucek ale wejście jest kontrola formularza klasy.

87
00:08:55,300 --> 00:08:57,470
Zobaczmy więc, co się dzieje, kiedy się go pozbyć.

88
00:08:57,700 --> 00:09:03,670
Więc ja po prostu zrobić to na pierwszym i umieścić wkład email i wrócić i odświeżyć.

89
00:09:03,670 --> 00:09:08,590
Zauważ, że ten całkowicie zmienia się z powrotem do normalnego wejścia domyślną przeglądarką.

90
00:09:08,590 --> 00:09:10,050
Więc nie uzyskać zaokrąglone narożniki.

91
00:09:10,060 --> 00:09:12,800
Nie mamy ten sam wyściółkę i odstępy rzeczy.

92
00:09:13,000 --> 00:09:19,010
I my również nie uzyskać ten sam efekt ogniskowania po kliknięciu robimy uzyskać niebieski kontur ale inny niż ten.

93
00:09:19,180 --> 00:09:33,430
Bootstrap Zarys jest trochę bardziej subtelny i to są tylko od razu widoczne zmiany wizualne między nimi, ale jest rzeczywiście kilka istotnych różnic, które musisz zobaczyć raz mamy pracy z sieci energetycznej oraz sposób, w jaki zachowują się i współdziałać z innymi elementy.

94
00:09:33,620 --> 00:09:36,170
Będzie wrócić i dodać kontrolę formularz ponownie.

95
00:09:36,400 --> 00:09:45,880
Tak naprawdę, jeśli chcieliśmy destylować to wszystko sprowadza się tu do grupy forma i kontrolki formularza.

96
00:09:46,150 --> 00:09:49,840
Te dwie klasy są naprawdę odpowiedzialni za wszystko wygląda dobrze.

97
00:09:49,840 --> 00:09:55,680
Teraz jest ten akapit klasy pomóc w zablokowaniu i możemy spojrzeć na to, co się z tym.

98
00:09:55,690 --> 00:10:16,080
To ten tekst tutaj które po prostu daje dla was podpowiedź wskaźnika o części swojej formie i tej rzeczy z bloku klasy pomocy, a następnie mamy przycisk na dole, która jest po prostu zwykły przycisk Pucelle lub mamy między A i B mają tendencję do spaść i mogliśmy zrobić to większy lub mniejszy dodatkowa niewielka zmiana koloru, tak jak każdy inny przycisk.

99
00:10:16,090 --> 00:10:23,270
Więc już można zobaczyć, jak to jest trochę jak Legos gdzie mamy Lego przycisku, który możemy dodać do jumbotron.

100
00:10:23,320 --> 00:10:27,360
Możemy też po prostu dodaje się w postaci własnej lub możemy dodać go zamiast formularza.

101
00:10:27,430 --> 00:10:32,470
To tylko mała wtyczka i element gry, które możemy dodać do różnych części naszej aplikacji.

102
00:10:32,500 --> 00:10:36,990
Warto więc wrócić i przyjrzeć jednego innego rodzaju postaci, która jest formą inline.

103
00:10:37,450 --> 00:10:39,120
Tak to wygląda nieco inaczej.

104
00:10:39,340 --> 00:10:53,860
Jeśli wystarczy skopiować ten kod nad i spojrzeć z różnicami więc zostawię ten pierwszy formularz i dodajmy komentarz tutaj w postaci linii i niech wcięcia rzeczy prawidłowo.

105
00:10:54,880 --> 00:10:56,200
Wygląda dobrze.

106
00:10:56,200 --> 00:10:58,360
Należy zauważyć, że wszystko jest identyczne.

107
00:10:58,360 --> 00:11:04,290
Nadal mamy kontrolę formularza na wejściach mamy grupę formie, ale jest jedna wielka różnica.

108
00:11:04,360 --> 00:11:09,070
Wszystko jest wewnątrz formularza z klasy w postaci linii tak, że jedna linia.

109
00:11:09,490 --> 00:11:11,550
Miejmy tylko pokazać, jak to wygląda na początek.

110
00:11:11,640 --> 00:11:15,450
Wracam daje nam ten miły w postaci linii tutaj.

111
00:11:15,850 --> 00:11:24,870
I tak szybko, jak pozbyć się tego i zapisać go teraz wraca do normalnej postaci, jak my tu mamy.

112
00:11:25,210 --> 00:11:29,330
Tak tylko jedna klasa zawiera wszystkie style, które będą sterować tym.

113
00:11:29,470 --> 00:11:31,340
Więc będziemy trzymać go jako postać w kolejce.

114
00:11:31,540 --> 00:11:34,270
I znowu odstęp nie jest teraz idealna.

115
00:11:34,270 --> 00:11:37,130
Który zostanie ustalony, gdy mówimy o sieci energetycznej.

116
00:11:37,150 --> 00:11:40,090
Jest dużo bardziej możemy mówić o całym formy startowej.

117
00:11:40,090 --> 00:11:53,750
Mogliśmy prawdopodobnie zrobić wykład 30 45 minut na tylko na budowaniu złożonych form ładowania początkowego nauki tajniki wszystkich tych różnych elementów i różnych rzeczy, które możemy zrobić walidacji niestandardowej zaklejające wszelkiego rodzaju różnych stylów możemy pracują.

118
00:11:53,830 --> 00:11:55,120
Ale ja nie zamierzam tego robić.

119
00:11:55,210 --> 00:11:56,880
Omówiliśmy ważne podstawy.

120
00:11:56,940 --> 00:12:09,730
Są dwa rodzaje form są trochę chleba i masła form Boucek gdzie mamy podstawową regularne formularza, a następnie formularz inline i tam będzie kilka innych funkcji w różnych aspektach bootstrap, że używamy wokół formy.

121
00:12:09,910 --> 00:12:20,310
Ale zamiast spędzać czas teraz i bagien Cię na wszystkie tajniki i drobnych detali form PRICHEP Ja po prostu rzucać się w tych małych kawałków, gdy ich potrzebujemy, gdy jesteśmy rzeczywiście przy startowej.

122
00:12:20,530 --> 00:12:33,480
Więc dwa dania na wynos tutaj o formach byłyby dwie klasy, które są naprawdę ważne, kontrola formularza i forma kontrola formularza grupa sprawia wejścia ładowania początkowego rafinowany Grupa forma wystarczy dodać jakieś fajne odstępy.

123
00:12:33,550 --> 00:12:40,910
Więc cokolwiek umieścić we wspomnianym grupa forma dostaje jakieś fajne odstępy, a następnie jedną klasę formularz kreskę w kolejce.

124
00:12:40,960 --> 00:12:44,160
Jeśli owinąć formę, że cała forma idzie w parze.

125
00:12:44,520 --> 00:12:46,570
A potem rozmawialiśmy także o Jumbotron.

126
00:12:46,900 --> 00:12:50,020
Bardzo prosta klasa równa Jumbotron.

127
00:12:50,110 --> 00:12:51,650
Więc widać peer.

128
00:12:51,970 --> 00:12:54,230
A potem umieścić wszystko wewnątrz pojemnika.

129
00:12:54,460 --> 00:12:59,140
A jeśli pozbędziemy się tego pojemnika, aby pokazać, co się dzieje.

130
00:12:59,880 --> 00:13:04,950
Odśwież wszystkie te odstępy miłe margines odchodzi.

131
00:13:05,200 --> 00:13:11,820
Więc pojemniki dobry sposób, żeby uzyskać szybki trochę odstępu w aplikacji, aby wszystko wygląda dość miłe.

132
00:13:12,140 --> 00:13:33,160
OK, więc zanim skończę ten film Spędzę 10 sekund pokazując miejsca, które mamy zamiar zbudować aplikację, która posiada pełną bazę końcową tylną podłączonego za pomocą węzła i wyrażania i Mongo i mangusta i kilka technologii i używamy bootstrap prototyp interfejsu, aby dość szybko wyglądają dość dobrze i widać, że mamy Jumbotron tutaj.

133
00:13:33,160 --> 00:13:37,820
Używamy niektórych przycisków używamy systemu sieci, które wytłumaczę później.

134
00:13:37,960 --> 00:13:40,950
A potem, jeśli pójdę do logowania widać mamy formę.

135
00:13:41,260 --> 00:13:47,610
Więc to są kontrolki formularzy, że mam urządzone przy użyciu systemu siatki tak, że nie zajmuje całą szerokość ekranu.

136
00:13:47,680 --> 00:13:50,070
Raczej trzeba tylko ten mały punkt środkowy.

137
00:13:50,170 --> 00:13:52,700
Więc widzimy, że kiedy mówimy o sieci energetycznej.