1
00:00:00,410 --> 00:00:11,310
我們會回來在本課程和演示引導網格系統和網格系統可能是頭號原因，人們使用引導的形式午睡時間。

2
00:00:11,310 --> 00:00:19,290
這些按鈕是很好的風格變化，我們可以引導，但做引導網格系統將作為我們整個應用程序的骨架。

3
00:00:19,440 --> 00:00:23,980
這對我們添加的結構和佈局，以我們的應用程序一個非常簡單的方法。

4
00:00:24,000 --> 00:00:27,480
因此，讓我告訴你，你可以與電網系統做的幾個例子。

5
00:00:27,480 --> 00:00:36,140
我有引導的前男友開在這裡的第一個是一個水罐產品頁面，向下滾動幾個網站。

6
00:00:36,240 --> 00:00:37,530
注意鋪陳在這裡。

7
00:00:37,560 --> 00:00:50,310
我們並排三項一邊，然後又發現，因為他們改變大小在這裡他們縮小，然後當我打的平板電腦尺寸它們堆疊在彼此的頂部。

8
00:00:51,090 --> 00:00:57,270
所以這是在工作時的引導電網系統這是正確的在這裡，我們有另一個類似的效果。

9
00:00:57,270 --> 00:01:02,100
它們規模，然後他們堆疊在平板電腦和手機的大小。

10
00:01:02,880 --> 00:01:04,110
下面是另一個例子。

11
00:01:04,140 --> 00:01:10,440
這是冰島音樂家和奧拉維爾阿諾德，這是在這個網站向下滾動。

12
00:01:10,560 --> 00:01:23,150
我們有一個與電網系統內置在這裡，你可以看到類似的佈局一些內容，但它不只是這與網格系統建成為好。

13
00:01:23,160 --> 00:01:25,210
這在這份內容。

14
00:01:26,100 --> 00:01:28,350
這些旅遊日期在這裡。

15
00:01:28,350 --> 00:01:49,220
基本上使用網格系統，我們可以說，我們需要一些內容佔用屏幕的100％的話，我們也可以用它來說，我們希望每個案例都採取了屏幕的寬度高達25％，直到我們打移動端或每個藥片大小，現在佔用50，然後當我們打手機，他們各自承擔100％。

16
00:01:49,860 --> 00:01:50,850
同樣的事情在這裡完成。

17
00:01:50,850 --> 00:01:56,660
它讓我們除以與屏幕成片，並選擇有多少個希望。

18
00:01:56,790 --> 00:02:00,660
每一個我們自己的元素，以收卷，這裡是我們已經看到的最後一個。

19
00:02:00,660 --> 00:02:05,670
這就是所謂的創意添沙漠向下滾動這裡類似的內容。

20
00:02:05,680 --> 00:02:09,530
這裡是網格系統和這裡為好。

21
00:02:09,570 --> 00:02:11,430
因此，這是所有與電網系統完成的。

22
00:02:11,430 --> 00:02:15,590
所有這一切都讓真正重要的非常令人興奮的東西。

23
00:02:15,760 --> 00:02:20,640
它可以幫助我們打下的事情了這麼輕易相比，現在我們不得不不舉的事情。

24
00:02:20,670 --> 00:02:25,660
因此，我們將使用引導程序網格系統和幾乎使我們通過引導每一個應用程序。

25
00:02:25,890 --> 00:02:27,500
讓我告訴你其中的一個。

26
00:02:27,540 --> 00:02:33,940
這是我們的喲陣營應用程序，並通知我們有露營地的電網跨。

27
00:02:33,960 --> 00:02:40,050
當我調整屏幕的通知，他們規模，然後我們去兩個跨越再往下移動。

28
00:02:40,050 --> 00:02:44,480
我們去一個跨越，這是一個非常好的易於使用的移動佈局。

29
00:02:44,760 --> 00:02:47,840
所以，這只是一個地方，我們將使用一個網格系統。

30
00:02:47,850 --> 00:02:57,800
現在，讓我們以書面形式使用網格系統，使全屏幕窗口的一些代碼開始，回去再取被評估的選項卡下的自舉網絡公司。

31
00:02:58,050 --> 00:03:00,850
您可以點擊網格系統上。

32
00:03:00,850 --> 00:03:07,300
有相當多的網格系統，但我要去只是在這裡12指明了一個號碼開始。

33
00:03:07,470 --> 00:03:09,890
這是為了在網格系統如何工作非常重要。

34
00:03:09,900 --> 00:03:21,150
所以，每一個容器和引導，可分為12個不同的列，然後使用網格系統，我們可以選擇有多少12個單位的每個元素應該承擔的。

35
00:03:21,150 --> 00:03:27,050
因此，在這種情況下，它看起來像他們有一些佔用約10選自12個單位。

36
00:03:27,060 --> 00:03:40,320
然後此處在兩個選自12個單位或可能是九3，但它們有一些比他們在那裡的右側上的左側多出的那些12，然後一小部分出12。

37
00:03:40,770 --> 00:03:46,510
所以，如果我們回到營地這裡這是我們的集裝箱就在這裡。

38
00:03:46,890 --> 00:03:51,670
而這些每一個出來的12個單位每個人佔用三個單位。

39
00:03:51,810 --> 00:03:56,850
因此，我們最終用四個相等列，然後我們縮小下來就在這裡。

40
00:03:56,880 --> 00:04:00,040
現在，他們每佔用六個單位出12。

41
00:04:00,240 --> 00:04:02,840
所以，再一次的12號非常重要的。

42
00:04:02,850 --> 00:04:03,660
現在，讓我們在正確的。

43
00:04:03,660 --> 00:04:05,130
我們的第一個網格。

44
00:04:05,250 --> 00:04:14,640
所以我有一個文件進行網格確實H T M L它除了白手起家的SS文件空，並開始，我們需要定義一個容器。

45
00:04:14,860 --> 00:04:18,180
隨時我們用它需要一個容器內部的Boucek網格。

46
00:04:18,210 --> 00:04:22,230
因此類等於容器。

47
00:04:22,290 --> 00:04:29,190
而我們需要做的第一件事是找帶班等於另一個div來排，而不是每一行。

48
00:04:29,220 --> 00:04:31,100
我們有12個單位的挑選。

49
00:04:31,350 --> 00:04:40,730
所以，我們打算做開始只是做一個50分50我們將有1格，佔用了6出12，然後另一個div，佔用了6出12。

50
00:04:41,070 --> 00:04:42,050
因此，讓我們做這件事情。

51
00:04:42,120 --> 00:04:48,330
我們將添加一個div，然後我還將添加我的第二次分裂而現在它只是兩個設備都是空的。

52
00:04:48,330 --> 00:04:49,430
你不會去上班。

53
00:04:49,650 --> 00:05:00,300
但我要做的就是添加一個類到第一個，這會顯得有點有點怪異柱大六，我們會在這裡做同樣的事情。

54
00:05:00,300 --> 00:05:03,520
類等於列大六人。

55
00:05:03,630 --> 00:05:05,200
然後，我們將在這裡增加一些內容。

56
00:05:05,210 --> 00:05:10,880
他們只是說大列六人。

57
00:05:10,950 --> 00:05:12,140
這裡同樣的事情。

58
00:05:12,210 --> 00:05:18,950
當我這樣做讓我們保存，我們不會真正看到很多我們看不到網格本身。

59
00:05:19,020 --> 00:05:24,300
因此，為了使這更清楚，我會在這裡定義的，而不是一種風格標籤的類。

60
00:05:24,300 --> 00:05:26,670
我要做的就是定義一個類。

61
00:05:26,730 --> 00:05:31,350
我只是把它粉紅色的，我會將此類或兩個div，所以我們可以看到它們。

62
00:05:31,490 --> 00:05:32,820
所以現在他們只是白色的。

63
00:05:32,820 --> 00:05:33,660
無邊框。

64
00:05:33,750 --> 00:05:34,840
只是文本的一點點。

65
00:05:35,010 --> 00:05:36,050
但是，如果我們在添加此。

66
00:05:36,180 --> 00:05:37,010
所以粉紅色。

67
00:05:37,140 --> 00:05:49,950
然後，我們希望背景是粉紅色的，我們會做一個紫色的邊界一個像素堅實的紫色，然後我們會運用粉色類這兩個div。

68
00:05:49,950 --> 00:05:52,660
每個人佔用六個單位。

69
00:05:52,680 --> 00:05:54,570
現在我們回過頭來刷新。

70
00:05:54,900 --> 00:05:55,580
在那裡，我們走了。

71
00:05:55,800 --> 00:05:59,640
你可以看到，我們有兩個div的佔用容器正好一半。

72
00:05:59,670 --> 00:06:01,930
容器在這裡和這裡開始。

73
00:06:02,460 --> 00:06:04,530
我們已經一分為二。

74
00:06:04,620 --> 00:06:10,110
所以，現在我們可以回去和玩一點點，讓我們嘗試將在第三列。

75
00:06:10,410 --> 00:06:16,150
而這一次將會使中間列八個單位，然後將左和右將有兩個。

76
00:06:16,170 --> 00:06:21,270
所以，最終，我會在這裡更改這些數字。

77
00:06:21,280 --> 00:06:22,200
在那裡，我們走了。

78
00:06:22,200 --> 00:06:30,900
我們最終會在中間一個不錯的中心柱，然後我們可以使用一個邊欄什麼的左，右兩個較小的列。

79
00:06:30,900 --> 00:06:34,860
所以這是一個非常基本的概念，基本所有的引導網格系統。

80
00:06:34,920 --> 00:06:42,210
我們有12個單位跨我們的內部組件的任何容器去，我們可以在任何我們想要的方式指定的12個單位。

81
00:06:42,240 --> 00:06:52,170
因此，我們可以做12個單獨的列，每列一列大的，我們可以做到這像這樣的12倍。

82
00:06:52,290 --> 00:06:53,600
確保我不會失去計數。

83
00:06:54,090 --> 00:06:54,670
在那裡，我們走了。

84
00:06:54,690 --> 00:06:56,620
然後我們會擺脫這兩個現在。

85
00:06:56,820 --> 00:07:01,630
如果我是新鮮的，你會在一行中看到，我們有12個大小均勻的列。

86
00:07:01,650 --> 00:07:07,570
每佔用一個單元，然後我會告訴你，我們可以添加其他行。

87
00:07:07,740 --> 00:07:14,390
因此，讓我們做，現在的div類的equals行，它只是去，我們有這個第一行的下方。

88
00:07:14,730 --> 00:07:18,870
所以這一塊裡面讓我們做DIV。

89
00:07:19,020 --> 00:07:23,350
類等於列Dasch大的，讓我們做四。

90
00:07:23,370 --> 00:07:27,280
因此，我們將拆分它三個均勻大小的單位。

91
00:07:27,360 --> 00:07:36,260
所以對於她的專欄ARGE去就是這樣。

92
00:07:36,420 --> 00:07:49,260
讓我們去看看現在，你可以看到，我們沒有適用的粉紅色類，但我們有三個落在12大小均勻的柱下方創建大小均勻的列。

93
00:07:49,470 --> 00:07:53,240
因此，我們可以在粉紅色的類添加只是為了更容易地看到發生了什麼。

94
00:07:53,940 --> 00:07:54,800
還有我們走。

95
00:07:55,140 --> 00:07:57,350
所以，這只是一個簡單的例子。

96
00:07:57,420 --> 00:08:01,470
你實際上並沒有這些粉紅色的盒子最有可能在我們網站上。

97
00:08:01,710 --> 00:08:08,760
但是你可以看到我們這裡有一個網格，我們有行，每行有四列去跨越。

98
00:08:08,760 --> 00:08:15,830
每一個都是三個單位範圍內或在這裡創作本網站添。

99
00:08:15,900 --> 00:08:19,830
我們有三列跨越每一個打算是4個單位寬。

100
00:08:20,070 --> 00:08:20,900
這裡同樣的事情。

101
00:08:20,900 --> 00:08:23,860
三列將橫跨在這裡。

102
00:08:23,910 --> 00:08:24,960
我們有四列。

103
00:08:24,960 --> 00:08:26,840
每個人都有三個單元寬。

104
00:08:27,390 --> 00:08:30,650
所以這是在接下來的視頻網格的非常非常基本的。

105
00:08:30,660 --> 00:08:35,850
我們將討論如何使電網響應，並具有不同的大小不同的佈局。

106
00:08:35,850 --> 00:08:38,230
現在，我們一直與列大單。

107
00:08:38,250 --> 00:08:52,290
我有一個大的手段解釋還有其他三種尺寸，我們會看到那些在接下來的視頻，我們還將看到我們如何能夠寫出嵌套網格，我們可以添加任何這些列和分裂在另一個一行為進一步12件。