1
00:00:00,240 --> 00:00:04,170
歡迎回來，在這節課我們將繼續在你的陣營工作。

2
00:00:04,170 --> 00:00:06,070
我們已經完成了初始設置。

3
00:00:06,180 --> 00:00:13,990
我們已經做了一些基本的佈局添加頁眉和頁腳巴歇爾的我們增加了自舉和我們增加了創造新的露營地的功能。

4
00:00:14,010 --> 00:00:17,550
現在，我們將使用在引導式去露營地的頁面。

5
00:00:17,550 --> 00:00:18,600
所以，讓我們開始吧。

6
00:00:18,600 --> 00:00:21,230
我會做的第一件事就是確保我的服務器都在運行。

7
00:00:22,000 --> 00:00:25,260
而就看看有什麼我們現在有。

8
00:00:25,350 --> 00:00:26,740
這絕對是一個給人留下深刻印象不大。

9
00:00:26,850 --> 00:00:28,110
所以，我有兩個主要目標。

10
00:00:28,170 --> 00:00:34,150
第一個就是我們要在冠軍更好的頭在這裡所以這應該看起來更好。

11
00:00:34,170 --> 00:00:43,000
我們將使用什麼叫做在引導一個超大屏幕，然後還有露營地露營地的名單不應該只顯示垂直這樣。

12
00:00:43,020 --> 00:00:48,200
相反，我們希望較小的圖像的網格去跨越那格應響應。

13
00:00:48,480 --> 00:00:52,850
讓我們先從這是越來越看起來有點更好這個標題文本的第一個。

14
00:00:53,100 --> 00:00:58,440
所以我要去開拓，是的，我只是要在這裡工作露營地。

15
00:00:58,590 --> 00:01:06,390
所以我要去，因為我們將要寫了不少了HD郵件來調整這個一點點，我們不會與終端做任何事情。

16
00:01:06,440 --> 00:01:12,510
因此，在我們將要使用的，我們還沒有見過一個標題標記頭工作。

17
00:01:12,510 --> 00:01:15,740
在功能上它工作的具體方式有點像一個div一樣。

18
00:01:15,780 --> 00:01:20,080
唯一的區別在於，這具有的語義到一點點。

19
00:01:20,400 --> 00:01:25,850
使用標題，而不僅僅是一個任意分區，但它其實並不重要，它只是一個容器。

20
00:01:26,010 --> 00:01:42,540
而我們要去給它一個類的超大屏幕，然後在它的內部，我們要添加的也只是複製此H-1實際上，我們將剛剛離開它，節省弗里戈和刷新我們的頁面。

21
00:01:42,570 --> 00:01:44,890
我們現在有什麼所謂的超大屏幕。

22
00:01:45,130 --> 00:01:46,280
它仍然不是很大。

23
00:01:46,290 --> 00:01:50,720
我們應該做的下一件事就是做一個引導容器內的一切。

24
00:01:51,030 --> 00:02:01,260
所以，我們在這裡看到這一切我要縮進，我要添加一個div與課堂上的一切等於容器就這樣。

25
00:02:01,460 --> 00:02:07,670
然後，我們將堅持一切裡面，這會增加一些speccing我們兩側。

26
00:02:07,830 --> 00:02:08,710
刷新。

27
00:02:08,880 --> 00:02:13,800
你可以看到，我們不再有東西正對著左側在這裡。

28
00:02:13,830 --> 00:02:20,330
我們有一些空間，我們的超大屏幕正在一點點接近，最終將有一個蹩腳的酒吧出現。

29
00:02:20,520 --> 00:02:22,890
因此，這看起來有點更好的為好。

30
00:02:22,890 --> 00:02:25,530
現在我們只是有超大屏幕。

31
00:02:25,590 --> 00:02:27,570
現在，讓我們改變文本自身。

32
00:02:27,600 --> 00:02:34,530
因此，而不是這就是露營地頁面，讓我們把一個值得歡迎的消息，歡迎來到營地。

33
00:02:34,710 --> 00:02:56,550
隨意把你想要的任何內容，我也將添加在我將添加一點點一種標語段落的段落，我只想說我們查看的手，拿起從露營地在世界各地。

34
00:02:56,670 --> 00:02:58,940
類似的東西並不重要。

35
00:02:58,950 --> 00:03:00,850
我們可以節省刷新。

36
00:03:01,170 --> 00:03:06,650
OK，現在我們有一個小標記線，我們想要做的最後一件事是拿這個環節的照顧。

37
00:03:06,690 --> 00:03:08,280
添加新營地的鏈接。

38
00:03:08,580 --> 00:03:12,640
所以，我要複製，並把它的超大屏幕內。

39
00:03:12,650 --> 00:03:15,070
不過我要使它成為一個按鈕。

40
00:03:15,150 --> 00:03:24,780
一個引導按鈕，這樣做還是先添加一個段落，然後把錨標記裡面。

41
00:03:24,780 --> 00:03:26,680
而我這樣做只是為了間距。

42
00:03:26,730 --> 00:03:43,320
你想這是它自己的行，然後我要去給按鈕類多類PTEN ETN主要對顏色和破折號大這樣的，將節省的。

43
00:03:43,330 --> 00:03:45,420
現在，我們已經有了一個新的營地按鈕。

44
00:03:45,510 --> 00:03:49,930
我們點擊它，它需要我們去那是完全的風格形式。

45
00:03:50,220 --> 00:03:54,050
一個小的事情是，如果我在這裡調整這個窗口。

46
00:03:55,320 --> 00:04:01,740
請注意我們的文字如何去正對著超大屏幕的邊緣，這是不是很大。

47
00:04:01,860 --> 00:04:24,330
在這裡，我們有一定的間距，他們要保留間距就是我們需要做的僅僅是添加了超大屏幕內的另一個容器，DIV級等於容器，然後到這裡的超大屏幕裡面在閉幕DIV結束前，然後就縮進一切。

48
00:04:24,420 --> 00:04:26,040
現在，如果我們刷新。

49
00:04:26,210 --> 00:04:30,860
她看著相同的，但是當我們縮小下來，我們現在有一些空間那裡。

50
00:04:31,230 --> 00:04:33,790
OK所以這是頭部分。

51
00:04:33,840 --> 00:04:37,680
現在，我們要上的圖像的網格工作，我會衝到前面和你在一起。

52
00:04:37,680 --> 00:04:39,770
這絕對是一點點更多的工作。

53
00:04:40,020 --> 00:04:53,520
OK，讓我們開始網格上，我們要創建一個行，以便DIV級等於行就這樣開始，我要開始只是在這裡一點點消息。

54
00:04:53,580 --> 00:05:15,790
因此，我們要添加一個div類的equals，我打算讓這只是佔用了整個寬度，我們只是要在這裡有一個消息，H-3，說我們最流行的網站，你知道的露營地不會像很多。

55
00:05:15,790 --> 00:05:25,470
現在，讓我們頭回過來，讓我們通過DIV類行，我們需要在一排在我們的小學都開始增加。

56
00:05:25,560 --> 00:05:28,820
這是一個div類的equals行就是這樣。

57
00:05:28,970 --> 00:05:43,380
而現在我們要談這個每個循環，因為我們真正想要做的是什麼，而不是我們行的，我們要讓有一列類，並用引導網格列的div每個營地內網格。

58
00:05:43,420 --> 00:05:53,580
所以我要做到這一點，現在我要去哪裡把這個代碼的所有每個迴路要縮進就這樣。

59
00:05:53,830 --> 00:05:57,180
然後，我們在這裡需要我們關閉div標籤。

60
00:05:57,490 --> 00:06:01,500
因此，這是對傳統的行，這是用於容器。

61
00:06:02,020 --> 00:06:02,470
好。

62
00:06:02,730 --> 00:06:28,270
所以ative類行，而不僅僅是離開這個內容，因為它的div和這裡對圖像的H我們仍然有一個形象，但我們要改變這個div，使它有一個類中列三列小6，這只是使它響應使我們得到一些較大的圖像時，屏幕尺寸更大。

63
00:06:28,300 --> 00:06:36,400
然後當我們縮小下來它會下降到每行只有兩個影像，然後將進一步縮小到每行只有一個形象。

64
00:06:36,610 --> 00:06:56,560
所以裡面的，我們實際上是要在另一個div添加這個DIV將不得不類縮略圖這是一個引導類，這將有助於我們做出一個小卡片就會讓一個小格子裡面項目的縮略圖將增加圖像開始就這樣。

65
00:06:56,680 --> 00:07:02,210
我們必須等於你RL營地影像服務而我們只是停留在這一點。

66
00:07:02,230 --> 00:07:08,580
而我們要擺脫這種現在，只是保存，讓我們看看我們得到什麼，如果我們是新鮮的。

67
00:07:09,280 --> 00:07:09,820
好吧。

68
00:07:09,910 --> 00:07:11,850
因此，我們有圖像的網格現在。

69
00:07:11,890 --> 00:07:14,860
這裡只有3條，但我們正在這個網格。

70
00:07:15,220 --> 00:07:18,580
我會告訴你我的意思通過使其反應。

71
00:07:18,580 --> 00:07:25,270
因此，作為一個縮小這些注意它如何改變兩個正方形或在屏幕上的兩個項目。

72
00:07:25,280 --> 00:07:26,910
請記住，有12個單位。

73
00:07:27,040 --> 00:07:44,190
因此，我們不得不首先什麼我們把它分為四個單元，他們各自拿出了三個單位，然後當電網變得更小就在這裡，他們每個採取了六個單位，甚至更小，它會自動轉到之一。

74
00:07:44,350 --> 00:07:49,130
而且，我們也沒有寫，因為額外的小默認使用12個單位。

75
00:07:49,180 --> 00:07:52,050
所以，我們沒有指定。

76
00:07:52,090 --> 00:08:07,550
現在，讓我們拿到冠軍早在這個營地的名稱而非只是一個年齡一做一諾特爾引導類的div類的equals標題就這樣。

77
00:08:07,780 --> 00:08:13,080
然後裡面會放一個H的露營地名稱。

78
00:08:14,070 --> 00:08:18,670
OK讓我們保存讓我們看看是什麼樣子。

79
00:08:18,670 --> 00:08:19,270
在那裡，我們走了。

80
00:08:19,300 --> 00:08:21,030
我們得到這些可愛的小卡片。

81
00:08:21,040 --> 00:08:23,700
這是微縮類做了我們。

82
00:08:23,840 --> 00:08:25,030
我們有我們的形象。

83
00:08:25,210 --> 00:08:30,480
讓我們只看到它是什麼樣子，如果我們有一大堆的圖片在一堆物品去的。

84
00:08:30,760 --> 00:08:34,160
所以，你不必這樣做，但我會粘貼在這裡。

85
00:08:34,600 --> 00:08:36,860
只要給我們一些更多的數據。

86
00:08:36,880 --> 00:08:38,800
這將是重複的數據，但是這很好。

87
00:08:38,940 --> 00:08:46,250
然後，我們需要確保我們添加正確的逗號，因此逗號那裡要來那裡。

88
00:08:46,300 --> 00:08:49,840
現在，如果我們刷新哦，我們需要重新啟動服務器。

89
00:08:50,170 --> 00:08:52,060
每一次我們惹的應用程序。

90
00:08:52,120 --> 00:08:53,330
是。

91
00:08:53,590 --> 00:08:58,070
現在如果我們刷新，他會看到我們有一個小問題。

92
00:08:58,120 --> 00:09:00,040
我們的電網是一個有點混亂。

93
00:09:00,170 --> 00:09:03,810
而什麼情況是，我們有不同高度的圖像。

94
00:09:04,090 --> 00:09:07,940
因此，這鮭魚溪人比這些不同的。

95
00:09:08,410 --> 00:09:10,710
即使寬度是在這種情況下是相同的。

96
00:09:10,930 --> 00:09:16,210
這就是擺脫網格，並有一個簡單的方法來解決它，雖然它是一個有點靠不住。

97
00:09:16,270 --> 00:09:19,130
我會告訴你我們是如何做到這一點，而不是我們的露營地。

98
00:09:19,270 --> 00:09:19,960
是。

99
00:09:20,320 --> 00:09:26,980
在班排的一天我會在一個樣式屬性添加，我只是要暫時做到這一點。

100
00:09:27,010 --> 00:09:32,530
我們將移動這外部樣式表，但我會只是做在線，使您更容易看到的。

101
00:09:32,530 --> 00:09:37,360
因此，我們設置樣式進行柔性顯示和柔性包裝是包裝。

102
00:09:37,480 --> 00:09:39,900
而這些都是兩個屬性將幫助我們的格掉。

103
00:09:39,910 --> 00:09:44,810
所以，如果我是新鮮的現在，我們結束了與電網的地方更靈活。

104
00:09:44,860 --> 00:09:53,400
沒關係，我們有一些不同的高度，因為現在在網格適應如此有這兩者之間更大的空間，那裡它在這裡。

105
00:09:53,470 --> 00:10:02,750
基本上它計算出所需要的，我們可以擁有的一切是在自己的行在一起，我們可以擁有一切完美對齊的最小空間量。

106
00:10:02,800 --> 00:10:13,370
還有就是我們可以做一個其他更改這是要回去，並添加文本中心這是我們的引導，這將使我們的文字居中在那裡。

107
00:10:13,540 --> 00:10:15,410
我認為，這看起來更好一點。

108
00:10:15,490 --> 00:10:20,500
也和個人喜好的問題，現在我們正在與露營地完成頁面的暫時。

109
00:10:20,620 --> 00:10:27,550
希望，告訴您如何引導才能真正幫助我們可以比從頭開始做這個事情很容易更是如此。

110
00:10:27,550 --> 00:10:31,900
而讓我告訴你我們的，我們有很好的響應電網。

111
00:10:31,900 --> 00:10:33,260
因此，這是在移動設備上。

112
00:10:33,310 --> 00:10:38,890
我們得到這個很好的佈局一路攀升至四個圖像去跨越。

113
00:10:39,160 --> 00:10:41,140
行，所以我與如何看起來很開心。