1
00:00:00,390 --> 00:00:07,420
歡迎回來，在這個單位，我要告訴你一些其他組件，包括超大屏幕和引導的形式和投入。

2
00:00:07,530 --> 00:00:14,520
但在此之前我這樣做，我想花一點時間來解決的東西，當我們學習新的工具，像這樣類似的引導，這真的非常重要。

3
00:00:14,760 --> 00:00:31,200
而在我教人的經驗，成為Web開發人員，我注意到一個自舉是第一個地方，一些學生開始感到不安難受之一，他們覺得他們不知道他們在做，然後因為我們突然間包括了一堆代碼有人寫別人到我們的應用程序。

4
00:00:31,200 --> 00:00:43,550
但是，如果你在文檔看看這裡，他們是很長的他們是綜合這是偉大的，但這裡有一個很多，我希望你這個框架還不如你有才能明白一切閱讀說明書。

5
00:00:43,560 --> 00:00:47,980
這不像是一個如何引導你必須完成我們使用之前引導。

6
00:00:48,300 --> 00:00:53,820
這是在哪裡，如果你決定你需要看看你的形式部分形式，如果你需要的表引用。

7
00:00:53,850 --> 00:00:56,780
如果你需要一個導航欄，你會打表款。

8
00:00:56,850 --> 00:01:12,810
你看看NFR部分而是你對待文檔一樣，你將使用他們馬不停蹄回來的代碼在這裡引用個別位抄襲其代碼段檢查出一些示威閱讀例子我一直在使用自舉了很重要年在這一點上。

9
00:01:12,930 --> 00:01:14,630
我覺得大部分是相當不錯的。

10
00:01:14,760 --> 00:01:18,220
但我離開的文檔打開的時候，我正在與引導什麼。

11
00:01:18,330 --> 00:01:26,900
我經常引用在這個過程中我談到了如何成為一名Web開發人員真正早期的影片之一的例子。

12
00:01:27,060 --> 00:01:32,490
你不會成為記憶和在明知信息的每一位專家。

13
00:01:32,730 --> 00:01:33,960
是的，你需要知道的東西。

14
00:01:33,960 --> 00:01:39,210
是的，你已經了解並熟記一些事情，但你不成為專家或記憶。

15
00:01:39,210 --> 00:01:41,990
你成為獲取信息的專家。

16
00:01:42,120 --> 00:01:52,410
而一些你必須記住的信息和大量的是要在文檔或例子視頻書籍各種資源聯機。

17
00:01:52,410 --> 00:01:54,350
好吧所以總結一下整個鼓舞士氣的講話。

18
00:01:54,450 --> 00:02:01,430
基本上，我只是想讓你記住，是有很多來引導，你會看到它的20 30％，還有很多更在那裡。

19
00:02:01,440 --> 00:02:03,210
但是，不要被那所嚇倒。

20
00:02:03,240 --> 00:02:07,800
你應該感到舒服訪問文檔，如果你需要做一些事情，我不告訴你怎麼做。

21
00:02:07,860 --> 00:02:09,480
打開的文檔，並尋找它。

22
00:02:09,600 --> 00:02:13,760
而且總是有很好的例子並獲得自舉網絡公司的解釋。

23
00:02:14,120 --> 00:02:22,110
OK所以事不宜遲，讓我們轉移到談論一些重要的組成部分，我要去向您展示超大屏幕開始。

24
00:02:22,500 --> 00:02:31,680
因此，根據官方的文檔一個超大屏幕是一種輕便靈活組件，可以選擇擴展整個視口，以展示在您的網站的重點內容。

25
00:02:31,680 --> 00:02:37,670
你可以看到一個正確這裡的一個例子，如果我們想用一個超大屏幕它真的很容易。

26
00:02:37,680 --> 00:02:44,750
所有我們需要做的是寫DIV級的超大屏幕，然後不管我們把裡面將是超大屏幕的一部分。

27
00:02:44,970 --> 00:02:46,680
因此，讓我們試試吧。

28
00:02:47,190 --> 00:03:17,300
只要做到下面的釦子會與類超大屏幕巨型TRON一個div，然後裡面是否有讓我們做一個H1或H-1會說，這是一個超大屏幕，然後在那裡添加按鈕，就像他們有在這裡，我們將添加一個段落，以及在我們的款也只是jibberish。

29
00:03:17,790 --> 00:03:19,420
好足夠了。

30
00:03:20,310 --> 00:03:28,460
和一個按鈕，我們的按鈕只會說你好。

31
00:03:28,800 --> 00:03:29,250
好。

32
00:03:29,250 --> 00:03:31,830
然後一個按鈕，我們有幾個選擇。

33
00:03:31,980 --> 00:03:39,680
我們會做一個按鈕，成功，我會讓它大和保存。

34
00:03:39,940 --> 00:03:41,620
讓我們來看看我們得到什麼。

35
00:03:41,790 --> 00:03:48,740
還有就是你可以看到，它佔據了整個寬度我們的瀏覽器窗口，這就是通常不是我們想要的一個超大屏幕。

36
00:03:49,050 --> 00:03:55,510
而什麼情況是，超大屏幕設置為佔用這裡面任何容器100％。

37
00:03:55,640 --> 00:03:57,740
在這種情況下，它不是任何東西之外。

38
00:03:57,900 --> 00:04:07,640
但不久我會向你展示了電網系統和引導，我們可以精確地控制你要多少，如果你希望它是這個中心佔用屏幕，並採取了屏幕的三分之一。

39
00:04:07,650 --> 00:04:14,150
屏幕的三分之二我們有所有這些不同的選擇，我們可以通過使用引導程序網格系統使屏幕的四分之一。

40
00:04:14,310 --> 00:04:25,140
現在我要告訴你另一個元素，我們不能在這與類等於容器中，容器是什麼會做一個div。

41
00:04:25,140 --> 00:04:32,950
如果我們只是把東西DIV類容器裡面給它一些間距周圍的一些填充和它中心的事情。

42
00:04:33,360 --> 00:04:46,750
因此容器找到檢查在這裡佔據了所有這個空間你可以看到，但它有相當多的保證金就可以了。

43
00:04:46,750 --> 00:04:55,990
因此，如果我們只是想快速提高，而不必使用，我們還沒有談到，我們可以添加DIV級集裝箱網格系統，現在我們得到這個漂亮的超大屏幕。

44
00:04:55,990 --> 00:05:03,230
如果我們移動這個代碼，我們已經降入容器好，但我們不會把它的超大屏幕內。

45
00:05:03,310 --> 00:05:07,890
你會看到，它仍然是由容器的影響。

46
00:05:08,020 --> 00:05:18,120
因此，超大屏幕外，但在容器內保存並刷新你可以看到它也是容器內，它反映了視覺。

47
00:05:18,400 --> 00:05:22,320
OK，讓我們頭回組件和我會告訴你接下來的事情。

48
00:05:22,330 --> 00:05:23,950
我們去頂。

49
00:05:24,280 --> 00:05:28,760
我們必須去過去一看，評估和我會告訴你的表格，以及這些工作。

50
00:05:28,990 --> 00:05:33,030
因此，點擊表格和有相當多的不同類型和不同的例子。

51
00:05:33,070 --> 00:05:35,710
而我就通過他們第一次滾動之前，我們鍵入任何內容。

52
00:05:35,980 --> 00:05:39,910
所以這裡有一個引導的形式的一個基本的例子。

53
00:05:39,910 --> 00:05:42,540
你可以看到，創建它的市場。

54
00:05:42,760 --> 00:05:55,320
那麼我們有什麼被稱為內聯的表格，我們有另一種類型的內聯形式下，但另外一個具有不同類型的輸入和另一種類型的表格。

55
00:05:55,480 --> 00:06:00,420
而現在這種談論所有不同類型的表單控件所支持的不同類型的輸入。

56
00:06:00,430 --> 00:06:03,280
所以，所有這些顏色的你。

57
00:06:03,310 --> 00:06:24,940
電子郵件數週時間等文本區域不同複選框禁用複選框禁用單選按鈕內嵌複選框內聯單選按鈕下拉菜單中選擇已不斷下降。

58
00:06:24,970 --> 00:06:26,780
我們有其他論壇的國家。

59
00:06:26,780 --> 00:06:28,370
我們有一個對焦狀態。

60
00:06:28,470 --> 00:06:30,910
你可以看到周圍的藍色顏色標示。

61
00:06:31,060 --> 00:06:34,420
這是默認的引導注重造型。

62
00:06:34,420 --> 00:06:54,610
我們也可以通過在禁用添加禁用輸入，我們也得到了一些其他的事情可以做，但我要回去了，真正專注於基礎所示例開始和我會僅僅複製這整個形式啟動過，然後我們將通過剖析一點一點它。

63
00:06:54,610 --> 00:06:59,200
所以，讓我們回到這裡，一切之後，我們將只添加這種形式。

64
00:06:59,200 --> 00:07:01,420
但我會做到這一點的容器內。

65
00:07:01,420 --> 00:07:03,290
讓我這個全屏幕一會兒。

66
00:07:03,340 --> 00:07:08,580
我們有我們的表單和表單中我們已經有了相當多的內容。

67
00:07:08,590 --> 00:07:11,900
讓我們回到瀏覽器，看看是什麼樣子。

68
00:07:12,460 --> 00:07:17,170
你可能會注意到的第一件事是，我們的形式去一路之隔此容器。

69
00:07:17,230 --> 00:07:21,060
它佔用的是100％的有和這件事情，我們就可以控制。

70
00:07:21,100 --> 00:07:28,470
當我們談論引導網格系統，將能夠輕鬆地說，這應該去50％一路之隔。

71
00:07:28,480 --> 00:07:34,090
所以這件事情，我們就可以一次我們談論引導網格系統或者我們不只是有沒有輕易改變。

72
00:07:34,120 --> 00:07:35,510
所以，我們只是去用它。

73
00:07:35,530 --> 00:07:37,080
它佔用100％的現在。

74
00:07:37,120 --> 00:07:39,670
這是一個巨大怪異的論壇，但那很好。

75
00:07:39,820 --> 00:07:41,320
我們喜歡它是怎麼回事。

76
00:07:41,470 --> 00:07:45,290
因此，我們將回到崇高，讓我們仔細研究這一塊在同一時間。

77
00:07:45,550 --> 00:07:48,730
因此，我們有這個論壇標記中的論壇標籤。

78
00:07:48,910 --> 00:08:04,010
有一個div類表單組，如果你想知道更多關於你回去引導文檔和做表單組搜索，你可以看到在形式上組說唱標籤和控制的最佳間距是什麼呢。

79
00:08:04,300 --> 00:08:13,800
因此，如果我們擺脫這種形式的組類圍繞這第一個，我們會做它周圍的第一和第二個，你會看到我們結束了。

80
00:08:13,870 --> 00:08:21,520
我將保存並刷新你看到的間距是如何改變那些在這裡輸入之間。

81
00:08:22,150 --> 00:08:30,640
因此，我們可以回去，並添加表單組，這是真的你如何使用它，你有一個輸入和標籤，你希望他們組合在一起就形成了。

82
00:08:30,940 --> 00:08:35,320
所以要注意這裡只是一點點空間被添加在那裡。

83
00:08:35,320 --> 00:08:43,660
它只是增加了一點點空間就在這裡，有效地組織起來這兩個視覺，然後握的這些結合在一起視覺以及這些到這裡。

84
00:08:43,660 --> 00:08:45,390
所以這是表單組。

85
00:08:46,000 --> 00:08:47,860
然後標籤都只是正常的。

86
00:08:47,860 --> 00:08:54,960
，我們不必添加任何花哨的標籤沒有Boucek類，但輸入有一類表單控件。

87
00:08:55,300 --> 00:08:57,470
因此，讓我們看看當我擺脫它會發生什麼。

88
00:08:57,700 --> 00:09:03,670
所以我就做第一個，把電子郵件輸入回去刷新。

89
00:09:03,670 --> 00:09:08,590
請注意，這完全改變回正常的默認瀏覽器輸入。

90
00:09:08,590 --> 00:09:10,050
所以，你沒有得到的圓角。

91
00:09:10,060 --> 00:09:12,800
我們沒有得到的東西同樣的邊距和間距。

92
00:09:13,000 --> 00:09:19,010
而且我們還沒有得到時，我點擊我們得到一個藍色的輪廓相同的變焦效果，但它比這一個不同。

93
00:09:19,180 --> 00:09:33,430
引導輪廓是一個小更微妙和那些只是兩者之間的立即明顯的視覺變化，但實際上有，你會看到，一旦我們與電網系統工作的方式和他們的行為和互動更重要一些差異元素。

94
00:09:33,620 --> 00:09:36,170
會回去，然後重新添加表單控件。

95
00:09:36,400 --> 00:09:45,880
因此，其實如果我們想在這個提煉這裡的一切歸結為形式的組和表單控件。

96
00:09:46,150 --> 00:09:49,840
這兩個班是使事情看起來不錯真正負責任。

97
00:09:49,840 --> 00:09:55,680
現在有本款類幫助塊，我們可以看看我們從得到的。

98
00:09:55,690 --> 00:10:16,080
這是本文這兒下降，這正好給了一點提示的指針有關表格的一部分，東西帶班幫助塊，然後我們有我們的按鈕到這裡這只是一個普通的Pucelle廣場按鈕或者我們有A和B之間往往下跌，我們可以把它更大或更小的超小型變化的顏色就像任何其他按鈕。

99
00:10:16,090 --> 00:10:23,270
所以，已經可以看到這是怎麼就像積木，我們有一個按鈕，樂高，我們可以添加到一個超大屏幕一點點。

100
00:10:23,320 --> 00:10:27,360
我們也可以只是增加了自身，或者我們可以添加，而不是它的形式。

101
00:10:27,430 --> 00:10:32,470
這只是一個小即插即用組件，我們可以加入到我們的應用程序的不同部分。

102
00:10:32,500 --> 00:10:36,990
因此，讓我們回過頭來看看另外一個類型的表單是內嵌形式。

103
00:10:37,450 --> 00:10:39,120
所以，這看起來略有不同。

104
00:10:39,340 --> 00:10:53,860
如果我們只是在複製該代碼，我們採取與差異看，所以我會離開，第一種形式，讓我們添加評論到這裡排隊的形式，妥善，讓我們的縮進。

105
00:10:54,880 --> 00:10:56,200
看起來不錯。

106
00:10:56,200 --> 00:10:58,360
注意，一切都是相同的。

107
00:10:58,360 --> 00:11:04,290
我們仍然對我們有表單組的輸入形式的控制，但有一個很大的不同。

108
00:11:04,360 --> 00:11:09,070
一切都在行，以便一行類形式的形式中。

109
00:11:09,490 --> 00:11:11,550
讓我們只是告訴你什麼樣子啟動。

110
00:11:11,640 --> 00:11:15,450
我回到這裡為我們提供了這個漂亮的線形態。

111
00:11:15,850 --> 00:11:24,870
而一旦我擺脫這一點，保存，現在又回到了常規的形式像我們這裡。

112
00:11:25,210 --> 00:11:29,330
所以，只有一個類包含所有將控制的樣式。

113
00:11:29,470 --> 00:11:31,340
因此，我們將保持它作為表中一行。

114
00:11:31,540 --> 00:11:34,270
又一次的間距現在不理想。

115
00:11:34,270 --> 00:11:37,130
當我們談論網格系統將被固定。

116
00:11:37,150 --> 00:11:40,090
還有很多更，我們可以圍繞引導的形式談。

117
00:11:40,090 --> 00:11:53,750
我們也許可以做只是建立複雜的形式引導學習所有這些不同的部分，不同的東西，我們可以做驗證定制尺寸各種不同的風格，我們可以一起工作的來龍去脈30至45分鐘的演講。

118
00:11:53,830 --> 00:11:55,120
但我不打算這樣做。

119
00:11:55,210 --> 00:11:56,880
我們已經覆蓋了重要基礎。

120
00:11:56,940 --> 00:12:09,730
有兩種類型的形式是一種，我們有基本的常規形式，然後內嵌形式會有引導，我們並圍繞表單使用不同方面的其他一些功能Boucek形式的麵包，黃油。

121
00:12:09,910 --> 00:12:20,310
但是，而不是花時間，現在和你陷入困境下來所有的來龍去脈和PRICHEP形式我就扔在那些小件，當我們的時候，我們實際上正在使用引導程序需要他們的小細節。

122
00:12:20,530 --> 00:12:33,480
所以在這裡兩個外賣大約形式將兩個類非常重要的形式控制和表單組的形式控制使得輸入引導精製而成組只需添加一些不錯的間距。

123
00:12:33,550 --> 00:12:40,910
所以，你把任何在所述形式獲得小組一些不錯的間距和行，然後單級形式衝刺。

124
00:12:40,960 --> 00:12:44,160
如果你換一種形式，整個形式去排隊。

125
00:12:44,520 --> 00:12:46,570
然後，我們也談到了超大屏幕。

126
00:12:46,900 --> 00:12:50,020
非常簡單的類等於超大屏幕。

127
00:12:50,110 --> 00:12:51,650
所以，你可以看到一個同行。

128
00:12:51,970 --> 00:12:54,230
然後我們把一切的容器內。

129
00:12:54,460 --> 00:12:59,140
如果我們擺脫容器，向您展示發生了什麼。

130
00:12:59,880 --> 00:13:04,950
刷新所有的間距，那該多好保證金消失。

131
00:13:05,200 --> 00:13:11,820
因此，集裝箱很好的方式，只是為了獲得距對您的應用程序的快速有點讓事情看起來比較好看。

132
00:13:12,140 --> 00:13:33,160
行，所以我才結束這段視頻，我會花10秒鐘時間，顯示你，我們要構建一個具有完整的後端數據庫的應用程序網站使用節點，並表達和蒙戈和貓鼬和一堆連接技術，我們用引導原型接口，使它看起來比較好的很快，你可以看到我們有一個超大屏幕就在這裡。

133
00:13:33,160 --> 00:13:37,820
我們使用了一些我們正在使用的網格系統，我將在後面解釋的按鈕。

134
00:13:37,960 --> 00:13:40,950
然後，如果我去登錄，可以看到我們有一個表格。

135
00:13:41,260 --> 00:13:47,610
因此，這些都是使用網格系統，使之不佔用屏幕的整個寬度，我已經樣式表單控件。

136
00:13:47,680 --> 00:13:50,070
相反，它只佔用這個小中間部分。

137
00:13:50,170 --> 00:13:52,700
所以我們會看到，一旦我們談論網格系統。