1
00:00:00,180 --> 00:00:04,680
Witamy z powrotem w tej lekcji pokażę ci, jak zainstalować bootstrap do własnych zastosowań.

2
00:00:04,740 --> 00:00:08,370
A potem gdy już to zrobisz, to ci pokażę niektóre z najważniejszych podstaw za pomocą skoku.

3
00:00:08,850 --> 00:00:14,180
Więc jestem na get bootstrapped dot com tylko na stronie głównej i nie ma tu link do pobrania bootstrap.

4
00:00:14,850 --> 00:00:20,100
I to nie jest tak naprawdę bezpośredni link do pobrania, ponieważ mamy dwa główne wyborów dla sposobu korzystania startowej.

5
00:00:20,430 --> 00:00:24,340
Możemy albo pobrać pliki i zrobię to, aby rozpocząć.

6
00:00:24,530 --> 00:00:29,360
Wtedy możemy podjąć te pliki i dodać je do naszej aplikacji, zanim pójdziemy dalej.

7
00:00:29,430 --> 00:00:35,230
Mam prosty zespół wyszukiwarki będę plik, który Dzwonię podstawowe rzeczy godz DML m l.

8
00:00:35,790 --> 00:00:40,770
A ja po prostu dodać tytuł, a my po prostu dodać w kilku różnych elementów startowej.

9
00:00:40,800 --> 00:00:47,960
Kiedy już go zainstalowanego więc nie uczyni niczego kompleksowe użyjemy go jako plac zabaw dla niektórych podstawowych komponentów startowej.

10
00:00:48,510 --> 00:00:58,460
OK, więc zacznijmy dodając tylko prosty H-1 podstawy bootstrap i oszczędzać.

11
00:00:58,700 --> 00:01:01,790
A potem niech otworzy to w przeglądarce.

12
00:01:03,240 --> 00:01:05,280
Po prostu, że nie teraz.

13
00:01:05,280 --> 00:01:06,690
Teraz zainstalować startowej.

14
00:01:06,780 --> 00:01:08,190
Zrobiłem go pobrać.

15
00:01:08,250 --> 00:01:13,720
Więc jeśli mogę otworzyć ten plik można zobaczyć wewnątrz stąd istnieje kilka różnych składników.

16
00:01:13,830 --> 00:01:23,890
Jest to katalog C S S wewnątrz katalogu CCS istnieje sporo plików, ale tam naprawdę tylko jeden ważny plik, który znajduje się bootstrapped CSSA.

17
00:01:24,630 --> 00:01:27,710
I to jest właściwie ten sam plik tutaj bootstrapped górę minut.

18
00:01:27,740 --> 00:01:32,290
SS wyjątkiem Minęło minut walki został skurczony dół zajmują mniej miejsca.

19
00:01:32,460 --> 00:01:36,280
Więc te dwa są ważne pliki faktycznie korzysta startowej.

20
00:01:36,600 --> 00:01:43,370
I to jest bootstrap tematu Wszystkie trzy z nich są używane, aby pomóc dodać własny motyw do załadowania, więc to nie ma znaczenia, jak dużo.

21
00:01:43,380 --> 00:01:45,680
Wszystko, czego potrzebujemy jest bootstrap Dotsie ocenić.

22
00:01:45,780 --> 00:01:49,430
I zaczniemy po prostu otwierając go, dzięki czemu można zobaczyć, co mamy do pracy z.

23
00:01:49,470 --> 00:01:52,200
Jest to główne bootstraps ponownej ocenie pliku.

24
00:01:52,770 --> 00:01:54,280
To jest po prostu dużo zajęć.

25
00:01:54,300 --> 00:02:00,510
Jeśli spojrzeć na każdej pojedynczej linii CSSA prawie to klasa deklaracja dot prostu.

26
00:02:00,690 --> 00:02:05,340
A potem, co możemy zrobić, to korzystać z tych klas zamiast naszych aplikacji.

27
00:02:05,340 --> 00:02:12,720
Więc jeśli chcemy mieć przycisk z białym tekstem i czerwonym tle mamy zamiar zastosować przycisk dot niebezpieczeństwo.

28
00:02:12,900 --> 00:02:14,510
I to właśnie jest to tutaj robi.

29
00:02:14,730 --> 00:02:19,590
Ale niebezpieczeństwo jest biały tekst na czerwonym tle i obramowanie czerwonawy.

30
00:02:19,650 --> 00:02:24,410
Więc śmiało i informuje o tym w naszej aplikacji tak samo jak każdy inny plik CSSA.

31
00:02:24,750 --> 00:02:37,020
Więc co zrobię to po prostu przeciągnij go tutaj w tym samym katalogu, w którym mam swój podstawowy zespół badawczy na zewnątrz i mogłem też zrobić bootstrapped górę minut ponownej zamiast tego.

32
00:02:37,020 --> 00:02:38,520
To naprawdę nie ma znaczenia.

33
00:02:38,550 --> 00:02:47,570
Technicznie ten ładuje się trochę szybciej, bo gdybym go otworzyć widać to jako jeden gigantyczny linii wszystkie białe znaki zostały usunięte.

34
00:02:47,850 --> 00:02:55,450
Dlatego łatwiej jest załadować ale zamierzam korzystać z tej dłuższej wersji tak, że można zobaczyć dokładnie to, co pracujesz.

35
00:02:55,470 --> 00:03:03,120
Teraz mamy zamiar udać się do naszego rzeczywistego pliku tutaj będę tego zamknąć w dół i mamy zamiar to bootstrapped się CSX.

36
00:03:03,220 --> 00:03:16,310
Tak jak każdy inny arkusz stylów musimy połączony znacznik i Tref jest bootstrap dot C Ss i jeśli możemy zaoszczędzić i mamy świeże naszą stronę tutaj można zauważyć niewielką różnicę.

37
00:03:16,320 --> 00:03:18,140
Oglądaj czcionkę o tym H-1.

38
00:03:18,420 --> 00:03:19,590
To się zmienia.

39
00:03:19,620 --> 00:03:25,500
Mamy teraz bootstrap instalowane lub przynajmniej C Ss, które idzie w parze z bootstrap i to wszystko, czego potrzebujemy teraz.

40
00:03:25,650 --> 00:03:35,310
Nie będzie pracować z javascript po prostu jeszcze nie ma innej opcji instalacji bootstrap, że rzeczywiście daję wam w Get bootstrap stronie internetowej tutaj.

41
00:03:35,400 --> 00:03:40,750
Bootstrap CDN możemy ten link tu i dodać, że do naszego kodu.

42
00:03:41,010 --> 00:03:44,870
I to jest link do obsługiwanej wersji tego samego pliku.

43
00:03:45,120 --> 00:03:56,900
Więc jeśli otworzymy, że w przeglądarce i wklej, że widać, że ma zawartość zminimalizowanym pliku i jest obsługiwany w tym u R L, dzięki czemu możemy po prostu link do że RL więc mogę zastąpić.

44
00:03:56,970 --> 00:03:57,540
Kolejnym ogniwem.

45
00:03:57,540 --> 00:04:01,530
Tag i wklejanie, że jesteś Ellen i będę komentować ten jeden.

46
00:04:01,530 --> 00:04:04,230
Na razie i wrócić i odświeżyć.

47
00:04:04,380 --> 00:04:06,020
I nic się nie zmienia.

48
00:04:06,030 --> 00:04:16,650
Jedyną różnicą jest to, że w pierwszym przypadku mieliśmy plik pobrany na naszym komputerze, które łączyły się i w drugim przypadku mamy do linkami do zewnętrznego pliku, który jest gospodarzem on-line.

49
00:04:16,650 --> 00:04:20,750
Teraz chodźmy do docs bootstrap i rozpocząć odtwarzanie wokół lub niektóre z tych składników.

50
00:04:21,240 --> 00:04:29,150
Więc wrócić dostać bootstrap i niech kliknij Css, a ja po prostu się podkreślić niektóre z ważniejszych elementów, które będziemy używać.

51
00:04:29,400 --> 00:04:31,940
Więc zacznijmy proste z przyciskami.

52
00:04:32,460 --> 00:04:49,220
Jeśli chcemy użyć przycisku wszystko, co musimy zrobić, to użyć pobity klasę następnie rodzaj przycisku, który znajduje się pomiędzy domyślnie, które dadzą nam biały przycisk, ale to też VTAM informacji podstawowym dostępu BATNA.

53
00:04:49,260 --> 00:04:54,080
Ostrzeżenie niebezpieczeństwo oraz link i wszystkie są urządzone nieco inaczej.

54
00:04:54,240 --> 00:05:02,500
I oczywiście możemy zmienić te kolory na własną rękę, ale będziemy po prostu użyć wbudowanego raz, aby rozpocząć i S można też zobaczyć tutaj.

55
00:05:02,700 --> 00:05:08,600
Nie trzeba używać tylko element przycisku możemy użyć znacznika zakotwiczenia przycisk lub wejście.

56
00:05:08,820 --> 00:05:10,720
Więc spróbujmy to.

57
00:05:11,730 --> 00:05:13,030
Witam H-1.

58
00:05:13,230 --> 00:05:25,860
Załóżmy, wystarczy dodać w tagu przycisk i przycisk ten tagi prostu powiedzieć kliknij mnie i po prostu odświeżyć stronę już teraz i spójrz na to.

59
00:05:25,950 --> 00:05:27,310
To Przycisk dość brzydki.

60
00:05:27,690 --> 00:05:39,200
Ale jeśli mamy iść i dodać tej klasy PTEN a następnie między zróbmy sukces i zapisać możemy teraz dostać ten wspaniały zielony przycisk.

61
00:05:39,330 --> 00:05:41,870
Dlatego dość łatwo dostać się kilka podstawowych stylów dzieje.

62
00:05:42,190 --> 00:05:50,110
I wróćmy a pokażę ci kilka innych rzeczy na temat przycisków, które są różnej wielkości, które możemy wykorzystać, jak również i to naprawdę łatwe.

63
00:05:50,130 --> 00:06:00,500
Po prostu trzeba dodać dowolny przycisk duży i mały przycisk lub dodatkowa mała, więc to starał się po przycisku sukcesu i nie musi iść po niej.

64
00:06:00,510 --> 00:06:09,740
Nie ma znaczenia kolejność klas, ale zrobię to po tu DTN i zróbmy dodatkowe małe i odświeżyć stronę.

65
00:06:09,750 --> 00:06:11,170
No to jedziemy.

66
00:06:11,170 --> 00:06:30,480
Będę przenieść tego na teraz i dodajmy jeszcze kilka przycisków, ale ten będzie tag kotwicy i będzie w znaczniku lub mamy HF równa DP slash dwukropek ukośnik, że czytać każdy dzień dostać bootstrap com kropka, a następnie tekst będzie po prostu powiedzieć bootstrap docs.

67
00:06:30,550 --> 00:06:47,330
Tak aby ten trochę większy, a następnie doda w klasie w klasie musi być równa PTEN i zróbmy pomiędzy informacją Desch i sprawi, że duża PTEN kreska Elgie i odświeżyć.

68
00:06:47,340 --> 00:06:48,690
Teraz mamy dwa przyciski.

69
00:06:48,750 --> 00:06:50,620
Jednym z nich jest rzeczywista elementem przycisku.

70
00:06:50,620 --> 00:06:55,210
Kolejny ma znacznik zakotwiczenia i jeśli kliknę to można zobaczyć go jako znacznik zakotwiczenia.

71
00:06:56,340 --> 00:07:01,200
Tak więc już w pierwszej minucie użyciu bootstrap byliśmy w stanie uzyskać przyzwoitych wyglądających przycisków.

72
00:07:01,370 --> 00:07:05,330
zajęłoby 10 do 15 linii CSSA na własną rękę do replikacji.

73
00:07:05,760 --> 00:07:06,960
Chodźmy teraz z powrotem.

74
00:07:06,990 --> 00:07:10,980
Dodać do tego pełny ekran ponownie i pokażę ci kilka innych rzeczy o przycisków.

75
00:07:11,220 --> 00:07:12,720
Mamy więc rozmiary.

76
00:07:12,750 --> 00:07:21,080
Mamy też różne stany, gdzie możemy dokonać Przycisk pojawia się jakby to aktywna i do zrobienia, że ​​wystarczy dodać aktywną klasę.

77
00:07:21,390 --> 00:07:43,590
Tak więc, jeśli spróbujemy to teraz niech dodaj Kilka Przycisk więc będę powielać nasz mały miniaturowy Click Me przycisk trzy razy, a na ostatniej jednej na środku jednej klasy aktywnego i odświeżyć i można zobaczyć, z nadzieją, że pojawia się wystarczająco dobrze na ekranie oddać, że ten pojawia się aktywny.

78
00:07:43,620 --> 00:07:49,290
Wróćmy możemy również wyłączyć przycisk, dodając w tym atrybucie.

79
00:07:49,290 --> 00:07:51,850
Wyłączone równa wyłączone.

80
00:07:52,440 --> 00:07:57,950
Wróćmy i pozwól na wyłączenie ostatniego odświeżenia.

81
00:07:58,180 --> 00:08:00,020
A teraz ten przycisk jest wyłączony.

82
00:08:00,120 --> 00:08:01,940
Dostajemy tak ładne małą ikonę.

83
00:08:02,070 --> 00:08:05,110
To nie ma wpływu aktywowanych gdzie zmienia kolor dłużej.

84
00:08:05,220 --> 00:08:07,460
To wyraźnie przycisk wyłączone.

85
00:08:07,560 --> 00:08:18,630
Wielki Ostatnią rzeczą, pokażę Ci więc możemy ponownie zmienić kolory tak Przycisk niebezpieczeństwo noc daje nam, że czerwono-pomarańczowy i można zobaczyć wszystkie kolory tutaj.

86
00:08:18,870 --> 00:08:25,850
I oczywiście można zmienić te poprzez zastępowanie style więc można zrobić coś takiego, zamiast dokonać innego arkusza stylów.

87
00:08:25,860 --> 00:08:27,270
Ja po prostu zrobić to tutaj teraz.

88
00:08:27,330 --> 00:08:32,330
Więc po prostu zrobić jedną linię, a także jak piękno i zagrożenia.

89
00:08:32,460 --> 00:08:51,550
Możemy zmienić kolor na pomarańczowo, a teraz może być zagrożenie dla Texas pomarańczowo i gdybym chciał, aby rzeczywiście zmienić tło mogłem zrobić tło jest pomarańczowe i to w jaki sposób można wejść i zastąpić style, dzięki czemu nie trzeba wykorzystać to, co daje ci bootstrap po wyjęciu z pudełka.

90
00:08:52,200 --> 00:08:53,580
A większość miejsc nie.

91
00:08:54,030 --> 00:08:56,940
OK, więc to przyciski i to wszystko mam zamiar zrobić w tym filmie.

92
00:08:56,940 --> 00:09:00,300
Chciałem tylko dać bardzo szybki smak dzieł jak startowej.

93
00:09:00,300 --> 00:09:13,540
Ten wzór dodawanie klas do istniejących elementów i tych klas, które są zdefiniowane w tym pliku bootstrap CSSA w następnym filmie będę podkreślić kilka innych ważnych elementów, które pochodzą z bootstrap w tym formy i wejść.