1
00:00:00,270 --> 00:00:08,110
Witamy z powrotem w tej jednostce mam zamiar wprowadzić nowe narzędzie o nazwie Bootstrap i jestem na stronie głównej bootstrap uzyskać bootstrapped DOTCOM.

2
00:00:08,330 --> 00:00:13,180
A ja po prostu chcę zająć kilka minut, w tym wideo wprowadzającym, aby wyjaśnić, co bootstrap i dlaczego używamy go.

3
00:00:13,230 --> 00:00:17,100
I wtedy też pokazać wam kilka przykładów stron, które używają bootstrap.

4
00:00:17,100 --> 00:00:20,350
Więc zacznijmy po prostu czytając oficjalne blurb startowej.

5
00:00:20,610 --> 00:00:28,310
Bootstrap jest najpopularniejszym SS TMLC w JavaScript ram dla rozwoju reagujących pierwszych projektów mobilnych w sieci.

6
00:00:28,710 --> 00:00:30,460
Złammy że dół trochę.

7
00:00:30,480 --> 00:00:32,540
Bootstrap jest bardzo popularne.

8
00:00:32,580 --> 00:00:47,550
W rzeczywistości jest to najbardziej ulubionych i rozwidlone repozytorium na get piasty, które w zasadzie oznacza, że ​​ma większość osób korzystających z niego najbardziej życzliwość dodając ją uzyskać pomoc, a wszystko, co bootstrap to jest rzeczywiście jeden plik sukcesu i pojedynczy plik javascript ,

9
00:00:47,550 --> 00:00:54,180
Teraz jest dużo C S i dużo javascript w tych plikach, ale są tylko dwa pliki i możemy włączyć je we własnej aplikacji.

10
00:00:54,180 --> 00:01:05,950
Zasadniczo bierzemy kod cudzego iz Bootstrap dodaliśmy do naszego wniosku i pomaga nam podejmować dobre szukają miejsc, które są elastyczne i pomaga nam uczynić je szybko, bez konieczności pisania mnóstwo własnego kodu.

11
00:01:05,970 --> 00:01:08,760
Istnieją dwa główne powody, które ja ci to pokazano w tym kursie.

12
00:01:08,760 --> 00:01:10,890
Pierwszym jest to, że jest to bardzo popularne.

13
00:01:10,890 --> 00:01:11,850
Wiele miejsc z niego korzystać.

14
00:01:11,850 --> 00:01:15,560
Wiele firm wieloma deweloperami go używać i to jest po prostu warto wiedzieć.

15
00:01:15,690 --> 00:01:20,640
Ale drugi jest to, że pomoże nam podejmować dobre wyglądających stron internetowych dość szybko w tym kursie.

16
00:01:20,640 --> 00:01:40,020
Więc kiedy uczymy się i rzeczy, gdy skupiamy się na węźle i wyrażania i Mongo i mangusta i po kolana, a wszystkie tego złożonego tyłu i logiki możemy jeszcze zrobić coś, co wygląda dobrze bez konieczności poświęcić godzinę lub dwie godziny wideo stylizacji coś możemy podłączyć bootstrap i możemy dostać rzeczy dzieje się w 10 15 minut, a my wyglądają całkiem dobrze.

17
00:01:40,020 --> 00:01:50,840
Następną rzeczą, którą zrobię to daje szybki objazd dokach bootstrap ale ma wiele dobrych słynne dokumentacji dobrych przykładów i rzeczywiście użyć bootstrap na tej stronie, która ma sens.

18
00:01:51,060 --> 00:02:00,250
Więc zacznijmy klikając Css i to wspomniano bootstrap jest tylko jeden CSSA złożyć pojedynczy plik javascript wewnątrz tego pliku CSSA.

19
00:02:00,300 --> 00:02:02,560
Jest kilka rzeczy, które możemy dostać za darmo.

20
00:02:02,610 --> 00:02:05,420
Warto więc przyjrzeć się przyciski.

21
00:02:05,460 --> 00:02:16,680
Więc jeśli chcemy mieć guzik i mamy bootstrapped zawarte w naszej aplikacji możemy dodać do tej klasy do klasy jest rzeczywiście błogosławionych i PTEN domyślne i mamy te przyciski.

22
00:02:17,010 --> 00:02:18,840
Możemy robić różne kolory.

23
00:02:19,470 --> 00:02:21,260
Rzućmy okiem na formach.

24
00:02:21,360 --> 00:02:22,870
Mamy tu dostać ładne wejścia.

25
00:02:23,310 --> 00:02:31,890
I to jest też bardzo ważne jest, aby pamiętać, wszystko jest czuły na miejscu, dzięki czemu można zobaczyć, mamy rzeczy, które są dostosowane do szerokości ekranu.

26
00:02:32,250 --> 00:02:34,060
Również mieć różne rodzaje form.

27
00:02:34,080 --> 00:02:35,680
Można łączyć różne elementy.

28
00:02:35,700 --> 00:02:38,330
Więc tutaj są one za pomocą przycisku z formularza.

29
00:02:38,400 --> 00:02:46,660
Tak to jest jak kawałki Lego bootstrap i wiele sposobów, to jest po prostu zostały sztuk Lego, które można umieścić razem i dodać do swojej strony, jak widać pasuje.

30
00:02:46,740 --> 00:02:48,690
Wrócimy tam na większość z tych składników.

31
00:02:48,720 --> 00:02:53,800
Większość z tych dużych kawałków raz rozpocząć pracę z nim i pisania kodu bootstrap Nas.

32
00:02:54,270 --> 00:03:05,750
Więc teraz będziemy iść dalej i kiedy pokazać następną kartę, która jest Podzespoły zawierają jedne z większych kawałków bootstrap, które możemy wykorzystać, a które obejmuje takie rzeczy jak paski NAV.

33
00:03:05,940 --> 00:03:13,680
I to jest prawdopodobnie jednym z najbardziej popularnych aspektów bootstrap, że wiele, wiele stron używa jak widać z odrobiną kodu.

34
00:03:13,710 --> 00:03:19,680
To nie wygląda dużo, ale zapewniam cię, że to o wiele mniej, niż byłoby, gdybyśmy pisali bar NAV od podstaw.

35
00:03:19,680 --> 00:03:30,660
A to pochodzi z upadki spadek formy i istnieje wiele typów prętów różne kolory takie, które są przymocowane do górnej części strony pewne, że będzie się przewijać.

36
00:03:30,690 --> 00:03:38,390
Są jeszcze inne elementy, takie jak Jumbotron która jest sposobem na prezentowaniu treści na swoich internetowych paski postępu miejscu.

37
00:03:38,670 --> 00:03:40,330
A te wszystkie pochodzą z bootstrap.

38
00:03:40,680 --> 00:03:48,970
Więc można się zastanawiać, czy teraz bootstrap przychodzi do tych wszystkich elementów i są one już wstępnie stylizujące co każda strona, która wykorzystuje bootstrap wyglądały tak samo.

39
00:03:49,320 --> 00:03:50,760
A odpowiedź brzmi: tak i nie.

40
00:03:50,760 --> 00:03:53,240
To zależy od tego, w jaki sposób strona używa bootstrap.

41
00:03:53,760 --> 00:04:04,490
Uważam, że firma lub projekt, który wykorzystuje bootstrap również sprawia, że ​​trudno powiedzieć, że są one rzeczywiście przy bootstrap, ponieważ używają tych głównych składników, a następnie można przejść i napisać swoje własne style na górze.

42
00:04:04,500 --> 00:04:07,860
Zmień kolory zmienić czcionki zmienić niektóre z efektów hover.

43
00:04:07,920 --> 00:04:17,670
Nie trzeba używać te same kolory i wszystko, które pochodzą z bootstrap ale to nie znaczy, że jest coś, co z natury złe za pomocą wbudowanego w stylach Bootstrap albo.

44
00:04:17,670 --> 00:04:19,080
A my z pewnością robi jedno i drugie.

45
00:04:19,200 --> 00:04:25,290
Więc kiedy robimy stronę i ostrości nie jest naprawdę na przednim końcu po prostu chcesz zrobić coś, co wygląda reprezentacyjny szybko.

46
00:04:25,290 --> 00:04:30,310
Zasadniczo prototyp Czo użyje bootstrap, a my naprawdę nie będą modyfikować wiele elementów.

47
00:04:30,780 --> 00:04:42,580
Ale wtedy, gdy pracujemy na coś trochę większe coś, czego nie chcesz wyglądać jak używamy bootstrap bez zmieniania czegokolwiek w ogóle potem pójdziemy i dodać kilka naszych własnych stylów w zasadzie dodać warstwę farby w sprayu na szczycie startowej.

48
00:04:42,600 --> 00:04:50,740
Następną rzeczą, którą chcesz zrobić, to pokazać niektóre z miejsc, które są zbudowane z bootstrap i Buddh podróż rzeczywiście ma oficjalną stronę internetową, gdzie się zaprezentować niektóre z tych witryn.

49
00:04:50,970 --> 00:04:54,330
Jeśli klikniesz na Expo mam już otworzyć.

50
00:04:54,330 --> 00:05:01,890
Widać, że oni zaprezentować piękne i inspirujące używa bootstrap więc może otworzyć niektóre z nich, aby je otworzyć i nowych kart.

51
00:05:02,270 --> 00:05:03,870
A są to tylko te ostatnie.

52
00:05:03,870 --> 00:05:05,390
Tam setki na tej stronie.

53
00:05:05,420 --> 00:05:14,660
Widać tony i tony nich i można zachować przewijanie i przewijanie, a następnie możemy przejść do kilku starszych i tam jest tak wiele różnych miejsc, które korzystają z tego.

54
00:05:15,000 --> 00:05:17,050
I tak naprawdę nie wszystkie wyglądają tak samo.

55
00:05:17,610 --> 00:05:20,190
Tak być może wiele z nich posiada pasku nawigacyjnym.

56
00:05:20,190 --> 00:05:28,450
Być może wielu z nich ma tego pełną dużym ekranie układ obrazu, ale to raczej trend wzorniczy niż coś, co bootstrapped to wyłącznie odpowiedzialny.

57
00:05:28,980 --> 00:05:30,890
Więc rzućmy okiem na niektóre z nich.

58
00:05:30,930 --> 00:05:36,400
Ten jest oszczędny Tim która to firma, która sprawia, że ​​szablony witryn internetowych w rzeczywistości.

59
00:05:36,630 --> 00:05:40,330
I widać mamy ten miły siatkę obrazów.

60
00:05:40,500 --> 00:05:41,600
Jest bardzo elastyczny.

61
00:05:41,610 --> 00:05:46,710
Gdybym skurczyć to w dół mamy tutaj naszą małą pasku nawigacyjnym.

62
00:05:46,920 --> 00:05:52,660
Jest to więc składnik bootstrap sposób, że wszystko układa się w tej sieci.

63
00:05:52,890 --> 00:05:59,540
Bootstrap jest częściowo odpowiedzialna za to, ale można również zobaczyć, że oni nie używając domyślnego wbudowane przyciski startowej.

64
00:05:59,580 --> 00:06:00,710
Oni je zmienił.

65
00:06:00,780 --> 00:06:01,960
Wszystko wygląda inaczej.

66
00:06:02,190 --> 00:06:06,130
Więc myślę, że jest to naprawdę miłe wykorzystanie bootstrap to naprawdę ładny wygląd witryny.

67
00:06:06,180 --> 00:06:12,170
To działa dobrze i to wykorzystuje bootstrap ale nie polegać na bootstrap 100 procent.

68
00:06:13,080 --> 00:06:15,120
Rzućmy okiem na jeden lub dwa więcej.

69
00:06:15,480 --> 00:06:19,640
Więc to jeden nazywa indicus lub indeksów coś takiego.

70
00:06:19,710 --> 00:06:24,200
Najwyraźniej zaprojektować i zbudować produktów cyfrowych, że ludzie korzystają z zastosowaniem.

71
00:06:24,240 --> 00:06:25,520
Warto więc przejść na dół.

72
00:06:25,680 --> 00:06:26,980
Spójrz na to, co mamy.

73
00:06:27,270 --> 00:06:37,500
Tak więc istnieje pewne treści, które prawdopodobnie zbudowany z bootstrap systemu sieciowego, który pomaga organizować i położyć rzeczy ułożyć jak już wspomniano wcześniej jest bardzo trudne w Pearcey SS.

74
00:06:37,560 --> 00:06:42,910
Jest coraz lepiej, ale bootstrap jest naprawdę bardzo przydatne, aby pomóc nam położyć rzeczy z naszej aplikacji.

75
00:06:43,260 --> 00:07:05,930
I mamy trochę stopki pasek tam bar nav tu więc to naprawdę zabawne, aby przejść do załadowania Expo trochę czasu, aby zbadać niektóre z projektów, służących do załadowania i zobaczyć, jak go używać i wszystkie sposoby, że firmy modyfikowania że dodanie we własnych czcionek własne kolory i naprawdę dowiedzieć się, jakie są podstawowe elementy, które wiele, wiele stron używają i dlaczego decydują się na stosowanie startowej.

76
00:07:06,170 --> 00:07:14,970
I moim zdaniem tak naprawdę sprowadza się do sieci energetycznej, które będziemy poświęcając wideo w tym urządzeniu, aby i barów nav i wrażliwości wszystkiego.

77
00:07:15,420 --> 00:07:15,710
OK.

78
00:07:15,720 --> 00:07:20,230
Tak, aby zakończyć mam zamiar pokazać wam prostą stronę, która będziemy podejmowania.

79
00:07:20,280 --> 00:07:23,110
To jest nasz startowy o nazwie ciężkich pieszczoty.

80
00:07:23,190 --> 00:07:28,200
To pomaga znaleźć idealne bratnią duszę kocią i używa startowej.

81
00:07:28,200 --> 00:07:33,610
Widać mamy bar nav tu po prostu podoba, że ​​mamy założyć przyciski Morgan.

82
00:07:33,630 --> 00:07:39,970
Dostajemy te małe ikony to mamy nasz tekst tutaj i trochę slogan, a następnie nasz przycisk.

83
00:07:40,290 --> 00:07:47,060
A potem jak zmiana rozmiaru rzeczy wszystko reaguje widać rzeczy porusza przesuwanie się.

84
00:07:47,190 --> 00:07:52,660
A co najważniejsze, że mamy trochę hamburgera i mamy telefon przyjazny pasku nawigacyjnym.