1
00:00:00,390 --> 00:00:07,550
歡迎回來，在這一課中，我們將繼續與特別是引導網格有兩個主要特點我想強調的工作。

2
00:00:07,590 --> 00:00:12,070
首先，我想解決我簡要地提到的四個不同的大小。

3
00:00:12,150 --> 00:00:18,530
我們一直在與列Elgie工作還沒有談到這意味著什麼，並有其他三種尺寸，這將一起工作。

4
00:00:18,600 --> 00:00:25,820
他們還希望向您展示我們如何可以在其他網格內窩網格來進一步劃分這些12個單位分成小塊。

5
00:00:26,250 --> 00:00:34,100
但是，談到四種尺寸我要通過返回給瀏覽器，並採取一看，我們建於最後一課演示開始，雖然開始。

6
00:00:34,290 --> 00:00:50,810
因此，我們有兩排一個有12列一個有三個打算對面，看著我調整窗口的大小規模的東西就好了會發生什麼，然後我們打了一個破發點就在這裡，其中每列中一切都變了。

7
00:00:50,850 --> 00:00:59,400
現在佔據了整整12個單位去對面，他們堆疊在另一個之上，因為他們不斷調整你不會真正注意到任何更改。

8
00:00:59,460 --> 00:01:03,140
他們都繼續佔用12個單位和堆疊在另一個之上。

9
00:01:03,330 --> 00:01:08,980
但實際上，我們可以指定，所以我們可以有四種不同的佈局四種不同尺寸。

10
00:01:09,030 --> 00:01:13,850
現在這是一個移動的佈局是超小型的訪問。

11
00:01:14,040 --> 00:01:20,730
然後我們太小，它就像一個平板佈局，然後介質就在這裡。

12
00:01:20,730 --> 00:01:26,590
這將是一台筆記本電腦或一個較小的瀏覽器窗口，再大，我們必須在這裡。

13
00:01:26,940 --> 00:01:31,870
因此，它看起來並不像有很大的差別，除了在這裡，當我們是偶數之間的大走。

14
00:01:31,980 --> 00:01:38,330
但也有四種尺寸，我們可以對這些尺寸中的每一個指定比率和比例。

15
00:01:38,460 --> 00:01:46,900
因此，對下的網格選項引導碼頭這裡的網格系統，你可以看到有一個表，它向我們展示了四種不同尺寸。

16
00:01:47,130 --> 00:02:02,940
因此，有額外的像手機比這是平板電腦中的設備小型設備小型設備桌面是大於1200像素寬大型設備或更大的台式機和他們每個人都有一個前綴，我們可以用so列訪問實際上是小的。

17
00:02:03,000 --> 00:02:08,630
S.M.小醫學博士是中型和LG是大是我們一直使用的是什麼。

18
00:02:09,030 --> 00:02:14,170
所以我們說，我想我的佈局留在大斷點一樣。

19
00:02:14,340 --> 00:02:22,410
然後當我們切換到中等這裡我想這12列，每佔用一個單元。

20
00:02:22,800 --> 00:02:25,320
我希望他們每個佔用兩個單元來代替。

21
00:02:25,320 --> 00:02:27,670
因此，我們將有六個跨去結束。

22
00:02:27,690 --> 00:02:29,510
下面再進一步的6。

23
00:02:29,820 --> 00:02:32,880
因此，讓我們專注於這一點，把事情簡單化。

24
00:02:33,100 --> 00:02:36,360
我居然幹掉了第二排的現在。

25
00:02:36,600 --> 00:02:39,170
因此，所有我們已經在這裡這個權利。

26
00:02:39,210 --> 00:02:43,730
所以，當我們打到這個媒介斷點在那裡，我不希望這種事情發生。

27
00:02:43,740 --> 00:02:48,510
相反，我想六列跨去做到這一點。

28
00:02:48,510 --> 00:02:50,740
我只是添加另一個類。

29
00:02:50,940 --> 00:02:58,120
所以我會做給每個之一，它的將是列中。

30
00:02:58,200 --> 00:03:05,600
所以，當這個網格設置中等大小，我們希望他們每個人佔用兩個單元，我們可以節省。

31
00:03:05,640 --> 00:03:07,200
現在讓我們去刷新。

32
00:03:07,380 --> 00:03:09,120
使全尺寸。

33
00:03:09,120 --> 00:03:12,380
沒有什麼變化，因為我們是在大尺寸。

34
00:03:12,570 --> 00:03:16,190
但現在當我切換到中等這裡。

35
00:03:16,200 --> 00:03:21,380
請注意，他們現在每佔用兩個單元，我們送六跨去。

36
00:03:21,630 --> 00:03:33,480
如果我繼續萎縮下來，我們則打小斷點，而這也正是它切換其中每列現在去跨越整整12個單位所有的方式，它們堆疊在彼此頂部。

37
00:03:33,900 --> 00:03:41,040
因此，讓我們回過頭來閱讀，讓我們回到我們的崇高，重振我們的老格。

38
00:03:41,130 --> 00:03:47,160
因此，我們將擺脫這一個，因為它不是常見的居然有12個不同的組件去跨越。

39
00:03:47,160 --> 00:03:53,300
通常你有三個或四個有時6，但12個人的工作列是相當罕見的。

40
00:03:53,400 --> 00:04:01,250
因此，讓我們回到這一個，我們要做的是設法重新創建網格發揮出奧拉維爾·阿諾德的旅遊日程這裡。

41
00:04:01,590 --> 00:04:04,200
因此，它開始在四個對面去。

42
00:04:04,200 --> 00:04:05,400
然後，我們縮小了下來。

43
00:04:05,550 --> 00:04:13,100
有一個中等破發點，我們還在四個，然後我們得到的小破發點，我們去跨越兩個。

44
00:04:13,140 --> 00:04:15,580
然後移動式X或小是其中之一。

45
00:04:15,990 --> 00:04:20,530
所以，這就是我們會嘗試並重新創建不只是內容的結構。

46
00:04:20,790 --> 00:04:22,080
因此，我們將在這裡回去。

47
00:04:22,650 --> 00:04:25,740
我們要開始有四個去對面。

48
00:04:25,740 --> 00:04:31,860
這意味著，每個人佔用三個單位，然後我們可以在這裡更改文本。

49
00:04:31,860 --> 00:04:35,510
而且，我們只是說給或日期。

50
00:04:35,610 --> 00:04:46,320
因此，如果我們是新鮮的，我們應該有四列跨去，我們做這正是本開出四跨去。

51
00:04:46,320 --> 00:04:48,720
唯一不同的是真正的實際內容。

52
00:04:48,720 --> 00:05:00,190
因此，而不是每列的我們想補充的H三個段落按鈕和任何其他內容，我們需要一點H.R.看起來，我們還是會得到相同的間距。

53
00:05:00,600 --> 00:05:01,200
好吧。

54
00:05:01,200 --> 00:05:03,790
所以，下破的一點是，當我們去網上平台。

55
00:05:03,960 --> 00:05:05,840
它保持在四個。

56
00:05:06,300 --> 00:05:15,440
所以，你可能會認為，我們需要做的是指定中斷點，所以當我們到了這一點，他們還是應該各佔用三個單元。

57
00:05:15,600 --> 00:05:34,190
我們可以回去昇華，並添加，再打電話給他們中三個保存和他們每個人在開始我們就打中三個單位，他們留在三個單位，然後我們前往小，現在他們又是12個單位。

58
00:05:34,310 --> 00:05:49,140
我們希望為後續請問這是什麼，當我們打小尺寸他們現在各自佔據六個單元，所以我們可以去這裡並補充說，在列小6。

59
00:05:49,400 --> 00:05:57,070
因此，大尺寸的這些每一個在中等規模的佔25％，三個單位出12。

60
00:05:57,120 --> 00:05:57,920
一樣。

61
00:05:58,010 --> 00:06:05,480
他們採取了25％，然後在小尺寸這是片他們各自再佔用50％。

62
00:06:05,480 --> 00:06:12,980
因此，讓我們刷新每個佔用三分鐘，然後三個單位，然後我們打小。

63
00:06:13,040 --> 00:06:17,880
而現在，他們每佔用六個單位，然後我們有額外的小。

64
00:06:17,940 --> 00:06:21,620
然後，他們將自動佔據整個12個單位這是我們想要的。

65
00:06:21,810 --> 00:06:27,350
你可以看到，當我們打小，我們希望他們採取了一個單位去對面。

66
00:06:27,380 --> 00:06:28,010
好吧。

67
00:06:28,010 --> 00:06:33,240
因此，我們必須下來有一個小的變化，我們可以做，如果我們回到崇高。

68
00:06:33,770 --> 00:06:39,560
你會看到，我們兩次指定該3台大中。

69
00:06:39,560 --> 00:06:54,320
事實上，我們可以幹掉3列大，只是擺在那裡中型和引導就會知道，因為我們設置中是三，我們不會明確設置大它將只是我們設置為中等和應用它大。

70
00:06:54,440 --> 00:06:55,880
因此，它的工作方式相同。

71
00:06:55,880 --> 00:06:56,650
什麼也沒有變。

72
00:06:56,660 --> 00:07:02,420
我已經刷新看起來與我們的中斷點仍然存在，我們的小作品。

73
00:07:02,420 --> 00:07:04,800
所以我們不必以指定的兩倍。

74
00:07:05,300 --> 00:07:10,460
所以才讓我來N.Z.我們擺脫了這一點，它的工作原理完全一樣的方式。

75
00:07:10,520 --> 00:07:14,990
而事實上，如果我們看一看我們去的網站。

76
00:07:15,000 --> 00:07:19,770
我敢打賭，如果我們檢查每個這些，你會看到我們走。

77
00:07:19,780 --> 00:07:22,590
列小六列中三種。

78
00:07:22,790 --> 00:07:26,990
正是我們現在我們已經介紹了這四個不同的尺寸了。

79
00:07:27,070 --> 00:07:30,710
希望你能看到的網格系統如何靈活和有用的是。

80
00:07:30,750 --> 00:07:31,520
我們回去吧。

81
00:07:31,740 --> 00:07:33,960
現在，我會解決的嵌套網格。

82
00:07:34,310 --> 00:07:42,710
讓我們假設，而不是這個第一列在這裡我想把它分成兩半，並有重要的是左側的東西，東西在右側。

83
00:07:42,800 --> 00:07:47,340
其實，我可以去另一行加有內部。

84
00:07:47,370 --> 00:07:49,230
因此類的equals一行。

85
00:07:49,740 --> 00:08:09,100
然後該行裡面，我可以在一個div類等於列，一切都只是過大增加，現在大列六到另一列大6，我將只是寫在這裡一些文字一半，另一半。

86
00:08:09,360 --> 00:08:18,170
讓我們將其更改為上半場的另一半，我們將保存，讓我們給他們一個經典的粉紅色。

87
00:08:18,200 --> 00:08:24,000
所以，我們現在已經做的是，我們將有三個橫跨去還是四個跨去。

88
00:08:24,000 --> 00:08:38,530
一二三四，並在第一個，我們已經通過添加另一行，我們正在使用的前六說些什麼，我們正在使用的第二個六說別的東西保存或刷新它拆分成另外12台。

89
00:08:38,960 --> 00:08:41,770
你去那裡，使它更加明顯。

90
00:08:41,780 --> 00:08:43,280
讓我給他們另一個類。

91
00:08:43,400 --> 00:08:45,170
讓我們把它叫做橙色。

92
00:08:45,370 --> 00:08:46,940
但不存在。

93
00:08:46,940 --> 00:09:04,870
而這個定義出現橙色和將有橙色的背景，我們將為了一個像素穩定紅色，然後真正做到什特確定補充。

94
00:09:05,540 --> 00:09:10,530
刷新你可以看到，現在我們仍然有這四樣東西去跨越。

95
00:09:10,520 --> 00:09:19,160
每個人佔用了三個單位，但我們通過增加該行的拆分第一個到六個單位六個單位，你必須添加的行。

96
00:09:19,160 --> 00:09:22,520
你不能只是開始做這個，你有一列，而不是列。

97
00:09:22,520 --> 00:09:23,980
必須有一排。

98
00:09:24,260 --> 00:09:25,520
讓我們做一個。

99
00:09:25,910 --> 00:09:31,090
讓我們把這個最後一個在這裡成六小件內。

100
00:09:31,500 --> 00:09:39,770
因此，我們需要裡面添加一排該div類的equals行，而不是在那裡。

101
00:09:39,770 --> 00:09:50,310
我們需要另一個div，我們就會有這六個，我們有大量的列各兩個佔用了三分之二的12個單位。

102
00:09:50,310 --> 00:09:59,370
我們希望六和然後我們會去每個人，讓我們在橙類添加只是讓我們可以看到它們。

103
00:10:00,440 --> 00:10:01,150
好。

104
00:10:01,640 --> 00:10:06,540
因此，我們有四大跨列，我們分成兩半第一個去。

105
00:10:06,650 --> 00:10:12,710
最後一個，我們一分為六塊，你不能真正看到任何東西，所以我們沒有把任何文本在那裡。

106
00:10:12,920 --> 00:10:14,200
所以，讓我們做到這一點。

107
00:10:14,270 --> 00:10:20,100
或者更確切地說，它實際上只是給帶或高度的類橙色。

108
00:10:20,100 --> 00:10:22,950
讓我們把他們每次50個像素。

109
00:10:22,940 --> 00:10:29,960
如果我刷新你看，現在擁有橙色該類橙色高度佔據了50像素的一切。

110
00:10:30,260 --> 00:10:40,880
因此，我們有四個平分秋色頂級列裡我們兩個平分秋色列，然後我們六平分秋色列。

111
00:10:40,880 --> 00:10:43,700
所以這就是全部並網發電系統的重要作品。

112
00:10:43,860 --> 00:10:46,420
簡單地說，我們有每一行中12個單位。

113
00:10:46,560 --> 00:10:48,300
但是你喜歡你分割起來。

114
00:10:48,360 --> 00:10:58,900
有四種尺寸大中小超小，你可以在任何的四個破發點的四種不同尺寸的重新分配的12個單位。

115
00:10:59,000 --> 00:11:04,870
這就是你怎麼收場與這些漂亮的響應佈局和一般模式，你看到的是，在移動網站。

116
00:11:04,880 --> 00:11:12,830
因此，對多餘的小尺寸大多數網站都會有自己的內容只是堆疊彼此像我們這裡會頂，如果我縮小下來。

117
00:11:12,840 --> 00:11:18,630
這是在移動設備上，其中沒有內容的多個片段在同一行中的公共佈局。

118
00:11:19,080 --> 00:11:19,540
好。

119
00:11:19,700 --> 00:11:20,990
讓我們回到昇華。

120
00:11:21,090 --> 00:11:23,290
確保我談到了三個主要目標。

121
00:11:23,610 --> 00:11:28,160
所以我們談到的目的網格系統的角度幫助我們打下的事情了。

122
00:11:28,160 --> 00:11:29,270
這很棒。

123
00:11:29,660 --> 00:11:31,690
了解四種不同尺寸。

124
00:11:31,700 --> 00:11:36,740
這些都是大中小超小型，然後右鍵嵌套網格。

125
00:11:37,040 --> 00:11:45,790
這就是我們在這裡做什麼，我們添加行，而不是一列，然後我們可以填補該行與下一個視頻進一步分列。