1
00:00:00,240 --> 00:00:04,170
Witamy z powrotem w tej lekcji mamy zamiar kontynuować pracę na obozie.

2
00:00:04,170 --> 00:00:06,070
Mamy już zrobił wstępną konfigurację.

3
00:00:06,180 --> 00:00:13,990
Zrobiliśmy kilka podstawowych rozłożyć dodany nagłówek i stopkę Parshall na dodaliśmy bootstrap i dodaliśmy funkcjonalność tworzenia nowych kempingów.

4
00:00:14,010 --> 00:00:17,550
Teraz mamy zamiar iść w stronę stylu camp za pomocą startowej.

5
00:00:17,550 --> 00:00:18,600
Więc zacznijmy.

6
00:00:18,600 --> 00:00:21,230
Pierwszą rzeczą, zrobię to upewnić się, moje serwery są uruchomione.

7
00:00:22,000 --> 00:00:25,260
A wystarczy spojrzeć na to, co mamy teraz.

8
00:00:25,350 --> 00:00:26,740
Na pewno trochę rozczarowująca.

9
00:00:26,850 --> 00:00:28,110
Mam więc dwa główne cele.

10
00:00:28,170 --> 00:00:34,150
Pierwszym z nich jest to, że chcemy lepszego nagłówek w tytule się tutaj tak to powinno wyglądać ładniej.

11
00:00:34,170 --> 00:00:43,000
Mamy zamiar wykorzystać to, co nazywa się jumbotron w Bootstrap a potem także obóz lista campingów powinien nie tylko wyświetlać pionowo w taki sposób.

12
00:00:43,020 --> 00:00:48,200
Zamiast tego chcemy siatki mniejszych obrazów dzieje w sieci i że powinien być elastyczny.

13
00:00:48,480 --> 00:00:52,850
Zacznijmy od pierwszej, która jest coraz to tytuł tekstu, aby spojrzeć trochę ładniejszy.

14
00:00:53,100 --> 00:00:58,440
Więc mam zamiar otworzyć camping, że tak właśnie jadę do pracy tutaj.

15
00:00:58,590 --> 00:01:06,390
Więc mam zamiar zmienić rozmiar tego trochę, ponieważ mamy zamiar pisać sporo poczty HD, a my nie będziemy robić nic z terminalem w ogóle.

16
00:01:06,440 --> 00:01:12,510
Więc do pracy w nagłówku mamy zamiar użyć tagu nagłówka, który nie widział.

17
00:01:12,510 --> 00:01:15,740
Funkcjonalnie to działa dokładnie tak samo, jak coś podobnego div.

18
00:01:15,780 --> 00:01:20,080
Jedyną różnicą jest to, że ma trochę semantycznego znaczenia do niego.

19
00:01:20,400 --> 00:01:25,850
Korzystanie z głową, a nie tylko arbitralne div, ale to nie ma znaczenia, to tylko kontener.

20
00:01:26,010 --> 00:01:42,540
I mamy zamiar dać mu klasę jumbotron a następnie w jej wnętrzu mamy zamiar dodać również wystarczy skopiować ten H-1 w rzeczywistości, a my po prostu zostawić go na tym i zapisać Frigo i odświeżyć naszą stronę.

21
00:01:42,570 --> 00:01:44,890
Mamy teraz co nazywa się Jumbotron.

22
00:01:45,130 --> 00:01:46,280
To wciąż nie jest wielki.

23
00:01:46,290 --> 00:01:50,720
Następną rzeczą, którą powinniśmy zrobić to wszystko wewnątrz bootstrap pojemniku.

24
00:01:51,030 --> 00:02:01,260
Więc wszystko, co widzimy tutaj to wszystko mam zamiar wciąć i mam zamiar dodać div z klasą równa pojemnik tak po prostu.

25
00:02:01,460 --> 00:02:07,670
A potem będziemy trzymać wszystko w środku, że i to będzie dodać trochę speccing dla nas po bokach.

26
00:02:07,830 --> 00:02:08,710
Odświeżać.

27
00:02:08,880 --> 00:02:13,800
Widać nie mamy już rzeczy aż do lewej strony tutaj.

28
00:02:13,830 --> 00:02:20,330
Mamy trochę miejsca i nasz JumboTron szuka trochę bliżej iw końcu będzie musiała pojawić się tandetne bar.

29
00:02:20,520 --> 00:02:22,890
Tak to będzie wyglądać trochę ładniej, jak również.

30
00:02:22,890 --> 00:02:25,530
Na razie po prostu mieć Jumbotron.

31
00:02:25,590 --> 00:02:27,570
Teraz zmieńmy sam tekst.

32
00:02:27,600 --> 00:02:34,530
Więc zamiast tego jest strona camping postawmy wiadomość powitalną Witamy w obozie.

33
00:02:34,710 --> 00:02:56,550
Zapraszam do umieścić niezależnie od zawartości chcesz i będę również dodać w ustępie akapitu dodam tylko trochę rodzaju mottem i powiem tylko przeglądać naszą rękę i odebrać kempingów z całego świata.

34
00:02:56,670 --> 00:02:58,940
Coś w tym naprawdę nie ma znaczenia.

35
00:02:58,950 --> 00:03:00,850
Będziemy zapisywać odświeżenia.

36
00:03:01,170 --> 00:03:06,650
OK, więc teraz mamy trochę slogan i ostatnią rzeczą, którą chcesz zrobić, to dbać o tym linkiem.

37
00:03:06,690 --> 00:03:08,280
Dodaj nowy odnośnik pole kempingowe.

38
00:03:08,580 --> 00:03:12,640
Więc mam zamiar skopiować to i również umieścić go wewnątrz Jumbotron.

39
00:03:12,650 --> 00:03:15,070
Jednak mam zamiar uczynić go przycisku.

40
00:03:15,150 --> 00:03:24,780
Jeden z przycisków bootstrap, tak aby to zrobić lub dodać akapit pierwszy, a następnie umieścić znacznik zakotwiczenia wewnątrz tego.

41
00:03:24,780 --> 00:03:26,680
I robię to tylko dla odstępów.

42
00:03:26,730 --> 00:03:43,320
Chcesz to być na jego własnej linii, a potem mam zamiar dać klasy Przycisk wiele klas PTEN ETN podstawowej dla koloru pomiędzy kreską tak dużego i uratuje.

43
00:03:43,330 --> 00:03:45,420
Teraz mieliśmy nowy przycisk pole kempingowe.

44
00:03:45,510 --> 00:03:49,930
Klikamy na nią i to przenosi nas do formularza, który jest całkowicie stylu.

45
00:03:50,220 --> 00:03:54,050
Jeden drobny rzeczą jest, że jeśli rozmiar tego okna tutaj.

46
00:03:55,320 --> 00:04:01,740
Zauważ, jak nasz tekst idzie prosto przed krawędzią Jumbotron co nie jest dobre.

47
00:04:01,860 --> 00:04:24,330
Mamy pewne odstępy tutaj i chcą utrzymać ten odstęp, co musimy zrobić, to po prostu dodać kolejny pojemnik wewnątrz Jumbotron więc div class równa pojemnika, a następnie na dół wewnątrz Jumbotron przed końcem na div zamknięcia, a potem po prostu wcięcie wszystko.

48
00:04:24,420 --> 00:04:26,040
A teraz, jeśli odświeżyć.

49
00:04:26,210 --> 00:04:30,860
Wyglądała tak samo, ale kiedy kurczą się ją teraz mamy tam trochę miejsca.

50
00:04:31,230 --> 00:04:33,790
OK, więc to część nagłówka.

51
00:04:33,840 --> 00:04:37,680
Teraz chcemy pracować na tej siatki obrazów i będę się z tobą przodu.

52
00:04:37,680 --> 00:04:39,770
To na pewno trochę więcej pracy.

53
00:04:40,020 --> 00:04:53,520
OK, zaczynajmy na tej siatce i mamy zamiar zacząć od stworzenia wiersz tak div class równa wiersz tak po prostu i mam zamiar zacząć kapeczki wiadomość.

54
00:04:53,580 --> 00:05:15,790
Więc mamy zamiar dodać div class równa i zamierzam zrobić to po prostu zajmują całą szerokość, a my po prostu będziemy mieli tutaj wiadomość i H-3, który mówi nasze najpopularniejsze strony są campingów wiedzieć nie będzie wyglądać dobrze.

55
00:05:15,790 --> 00:05:25,470
Na razie niech wracamy nad i zacznijmy dodając w div class rzędu, które musimy wszystko w naszej szkole podstawowej w rzędzie.

56
00:05:25,560 --> 00:05:28,820
Jest to div class równa wiersz tak po prostu.

57
00:05:28,970 --> 00:05:43,380
A teraz musimy o tym porozmawiać na każdej pętli, ponieważ to, co tak naprawdę chcesz zrobić, to zamiast naszej sieci wewnętrznej wierszu dla każdego campingu Chcemy, aby div, który ma klasę kolumny i kolumny z użyciem bootstrap siatkę.

58
00:05:43,420 --> 00:05:53,580
Więc mam zamiar zrobić to teraz gdzie mam zamiar umieścić cały ten kod dla każdej pętli zamierza wcięte tak po prostu.

59
00:05:53,830 --> 00:05:57,180
A potem musimy tutaj naszą zamykający znacznik div.

60
00:05:57,490 --> 00:06:01,500
Tak jest na klasycznym rzędzie, to jest dla pojemnika.

61
00:06:02,020 --> 00:06:02,470
OK.

62
00:06:02,730 --> 00:06:28,270
Więc daną klasą wiersz i zamiast po prostu pozostawiając tę ​​zawartość jako że div i tu z H na obrazie nadal będziemy mieć obraz, ale mamy zamiar zmienić ten dział tak, że ma klasę kolumny średnich trzy w kolumnie małym 6 i to tylko, aby to reaguje tak, że mamy jakieś większe obrazy, gdy rozmiar ekranu jest większy.

63
00:06:28,300 --> 00:06:36,400
A potem, kiedy kurczą się go będzie zejść do zaledwie dwóch obrazów na rzędzie i to będzie kurczyć się jeszcze dalej w dół do jednego obrazu na wiersz.

64
00:06:36,610 --> 00:06:56,560
Więc w środku, że jesteśmy rzeczywiście zamiar dodać w innym div i DIV będzie miał klasę miniatury, który jest bootstrap klasy, które pomogą nam dokonać trochę kart będzie to miało niewielki element siatki wewnątrz które miniatur doda obraz zacząć właśnie tak.

65
00:06:56,680 --> 00:07:02,210
Mamy usług graficznych równe campingu masz RL A my po prostu zostawić go w tym.

66
00:07:02,230 --> 00:07:08,580
I mamy zamiar pozbyć się tego teraz i po prostu zapisać i zobaczmy, co możemy uzyskać, jeśli są świeże.

67
00:07:09,280 --> 00:07:09,820
W porządku.

68
00:07:09,910 --> 00:07:11,850
Więc mamy siatkę zdjęć teraz.

69
00:07:11,890 --> 00:07:14,860
Jest tylko trzy, ale jesteśmy coraz tę siatkę.

70
00:07:15,220 --> 00:07:18,580
A pokażę ci, co mam rozumieć przez co reaguje.

71
00:07:18,580 --> 00:07:25,270
Tak jak te kurczą się zauważyć, jak zmienia się dwa kwadraty lub dwóch przedmiotów na całym ekranie.

72
00:07:25,280 --> 00:07:26,910
Pamiętaj, że istnieje 12 jednostek.

73
00:07:27,040 --> 00:07:44,190
Więc co mieliśmy pierwsze jesteśmy dzieląc go na cztery kawałki, gdzie każdy z nich wyjął trzy jednostki, a następnie, gdy sieć staje się mniejsza tutaj każdy z nich trwać sześć jednostek, a nawet mniejsze automatycznie przechodzi do jednego.

74
00:07:44,350 --> 00:07:49,130
I nie trzeba pisać, że ponieważ dodatkowa mała domyślnym jest użycie 12 jednostek.

75
00:07:49,180 --> 00:07:52,050
Więc nie trzeba było określić, że.

76
00:07:52,090 --> 00:08:07,550
Teraz przejdźmy tytuł z powrotem w tym imię i campingu, a nie tylko w wieku do jednego zrobić klasę nother bootstrap div class równa podpis tak po prostu.

77
00:08:07,780 --> 00:08:13,080
A potem w środku nie położy H nazwy campingu.

78
00:08:14,070 --> 00:08:18,670
OK Ratujmy zobaczmy jak to wygląda.

79
00:08:18,670 --> 00:08:19,270
No to jedziemy.

80
00:08:19,300 --> 00:08:21,030
Dostajemy te ładne małe karty.

81
00:08:21,040 --> 00:08:23,700
Jest to klasa miniatur czyni to za nas.

82
00:08:23,840 --> 00:08:25,030
Mamy swoje obrazy.

83
00:08:25,210 --> 00:08:30,480
I niech po prostu zobaczyć, jak to wygląda, jeśli mamy kilka obrazów dzieje w kilka elementów.

84
00:08:30,760 --> 00:08:34,160
Więc nie masz to zrobić, ale mam zamiar wkleić tutaj.

85
00:08:34,600 --> 00:08:36,860
Dajcie nam trochę więcej danych.

86
00:08:36,880 --> 00:08:38,800
To będzie duplikatów danych, ale to jest w porządku.

87
00:08:38,940 --> 00:08:46,250
A potem musimy się upewnić, dodamy prawidłowego przecinki i tak przecinek tam i tam przyjść.

88
00:08:46,300 --> 00:08:49,840
Jeśli teraz odświeżyć Oh musimy zrestartować serwer.

89
00:08:50,170 --> 00:08:52,060
I za każdym razem, kiedy bałagan z aplikacji.

90
00:08:52,120 --> 00:08:53,330
Tak.

91
00:08:53,590 --> 00:08:58,070
A teraz, jeśli będzie widział odświeżyć mamy mały problem.

92
00:08:58,120 --> 00:09:00,040
Nasza siatka jest trochę pomieszane.

93
00:09:00,170 --> 00:09:03,810
A co się dzieje, że mamy obrazy o różnych wysokościach.

94
00:09:04,090 --> 00:09:07,940
Więc to Salmon Creek jest inny niż te.

95
00:09:08,410 --> 00:09:10,710
Chociaż szerokość jest taka sama w tym wypadku.

96
00:09:10,930 --> 00:09:16,210
I to zrzucenia siatkę i jest łatwym sposobem, aby to naprawić, choć jest to trochę słaby.

97
00:09:16,270 --> 00:09:19,130
A pokażę ci, jak to zrobić, a nie naszego campingu.

98
00:09:19,270 --> 00:09:19,960
Tak.

99
00:09:20,320 --> 00:09:26,980
W dniu klasy rzędu mam zamiar dodać w atrybucie style i jestem po prostu będzie to zrobić czasowo.

100
00:09:27,010 --> 00:09:32,530
Będziemy się poruszać w tym do zewnętrznego arkusza stylów, ale mam zamiar to zrobić w kolejce, aby ułatwić Ci zobaczyć.

101
00:09:32,530 --> 00:09:37,360
Tak więc styl do wyświetlania Flex i Flex oblewanie się okład ustawiony.

102
00:09:37,480 --> 00:09:39,900
I to są dwie właściwości, które robimy, aby pomóc naszej sieci na zewnątrz.

103
00:09:39,910 --> 00:09:44,810
Więc jeśli były świeże Teraz musimy skończyć z sieci, gdzie jest to bardziej elastyczne.

104
00:09:44,860 --> 00:09:53,400
To nie ma znaczenia, że ​​mamy kilka różnych wysokościach, bo teraz siatka dostosuje Więc nie ma więcej miejsca między nimi i tam to tutaj.

105
00:09:53,470 --> 00:10:02,750
Zasadniczo dane z minimalną ilość miejsca potrzebnego gdzie możemy mieć wszystko, co się na własnej linii ze sobą, gdzie możemy mieć wszystko być idealnie dopasowane.

106
00:10:02,800 --> 00:10:13,370
I jest jeszcze jedna zmiana możemy sprawić, który ma wrócić i dodać Center tekstową, która jest bootstrap dla nas co uczyni nasz tekst koncentruje się właśnie tam.

107
00:10:13,540 --> 00:10:15,410
I myślę, że wygląda trochę lepiej.

108
00:10:15,490 --> 00:10:20,500
Również kwestia osobistych preferencji, a teraz mamy zrobić z strony campingu na razie.

109
00:10:20,620 --> 00:10:27,550
Miejmy nadzieję, że pokazuje, jak bootstrap może naprawdę pomóc nam może dokonać rzeczy dość łatwo zwłaszcza w porównaniu do w ten sposób od początku.

110
00:10:27,550 --> 00:10:31,900
I niech mi tylko pokazać nasz piękny elastycznej siatki, które mamy.

111
00:10:31,900 --> 00:10:33,260
Tak to jest na telefon.

112
00:10:33,310 --> 00:10:38,890
Dostajemy to ładny układ aż do czterech obrazów idzie w poprzek.

113
00:10:39,160 --> 00:10:41,140
OK, więc jestem całkiem zadowolony z tego, jak to wygląda.