1
00:00:00,390 --> 00:00:06,210
このユニットでは、ジャンボトロンとブートストラップのフォームと入力を含むいくつかの他のコンポーネントを紹介します。

2
00:00:06,210 --> 00:00:07,420
 

3
00:00:07,530 --> 00:00:12,120
しかし、私がそれをする前に、ブートストラップのような新しいツールを学ぶときに、本当に重要なことに取り組んでいきたいと思います。

4
00:00:12,120 --> 00:00:14,520
 

5
00:00:14,760 --> 00:00:19,620
 

6
00:00:19,620 --> 00:00:25,230
 

7
00:00:25,230 --> 00:00:29,820
 

8
00:00:29,820 --> 00:00:31,200
そして、人々をウェブ開発者になるように教えてきた私の経験では、ブートストラップは、生徒の中には不快感を感じ始めた最初の場所の1つで、私たちは突然、他の誰かが私たちのアプリケーションに書いたたくさんのコードを含んでいます。

9
00:00:31,200 --> 00:00:36,810
 

10
00:00:36,810 --> 00:00:42,810
 

11
00:00:42,810 --> 00:00:43,550
しかし、ここでドキュメントを見てみると、彼らは本当に長くて充実していますが、ここではたくさんあります。すべてを理解するために読んでおかなければならないマニュアルではなく、

12
00:00:43,560 --> 00:00:47,980
これは、ブートストラップを使用する前に完了しなければならないことを指導する方法とは異なります。

13
00:00:48,300 --> 00:00:53,790
フォームが必要な場合は、テーブルが必要な場合はフォームセクションを見てください。

14
00:00:53,850 --> 00:00:56,780
あなたは、ナビゲーションバーが必要な場合は、テーブルのセクションをヒットします。

15
00:00:56,850 --> 00:01:01,920
 

16
00:01:02,100 --> 00:01:08,310
あなたはNFRのセクションを見ていますが、あなたが使用しているようにドキュメントを扱うことが重要です。ここに戻ってくるコードの個々のビットを参照して、コードセグメントをコピーして、いくつかのデモンストレーションをチェックしてください。この時点で何年も。

17
00:01:08,310 --> 00:01:12,810
 

18
00:01:12,930 --> 00:01:14,630
そして、私はそれのほとんどについてかなり良いと感じます。

19
00:01:14,760 --> 00:01:18,220
しかし、私はブートストラップを使って作業しているときにドキュメントを開いたままにしておきます。

20
00:01:18,330 --> 00:01:24,450
私はこのコースの本当の初期のビデオの中の例を絶えず参照しています。私はWeb開発者になる方法について話しました。

21
00:01:24,450 --> 00:01:26,900
 

22
00:01:27,060 --> 00:01:32,490
あなたは記憶の熟練者にならず、あらゆる情報を知っています。

23
00:01:32,730 --> 00:01:33,960
はい、あなたは物事を知る必要があります。

24
00:01:33,960 --> 00:01:38,700
はい、あなたは理解し、いくつかのことを暗記する必要がありますが、あなたは専門家や記憶になることはありません。

25
00:01:39,210 --> 00:01:41,990
あなたは情報にアクセスする上での専門家になりつつあります。

26
00:01:42,120 --> 00:01:48,180
そしてその情報のいくつかはあなたが覚えているでしょう、そして、その多くはドキュメントや例のビデオブックでオンラインになるでしょう、あらゆる種類のリソース。

27
00:01:48,450 --> 00:01:52,410
 

28
00:01:52,410 --> 00:01:54,350
よろしくお願いします。

29
00:01:54,450 --> 00:01:58,890
基本的には、ブートストラップには多くのことがありますが、20〜30％は見えますが、そこにはさらに多くのことがあることを心に留めてください。

30
00:01:58,920 --> 00:02:01,430
 

31
00:02:01,440 --> 00:02:03,210
しかし、それによって威圧されないでください。

32
00:02:03,240 --> 00:02:07,110
操作方法がわからないものを行う必要がある場合は、ドキュメントにアクセスするのが快適であると感じるはずです。

33
00:02:07,110 --> 00:02:07,800
 

34
00:02:07,860 --> 00:02:09,480
ドキュメントを開き、それを探します。

35
00:02:09,600 --> 00:02:13,760
そして、ブートストラップされたドットコムを得るための素晴らしい例と解説が常にあります。

36
00:02:14,120 --> 00:02:19,130
OKだからこそ、これらの重要なコンポーネントのいくつかについて話を進め、Jumbotronを見せ始めます。

37
00:02:19,140 --> 00:02:22,110
 

38
00:02:22,500 --> 00:02:28,170
ジャンボトロンは公式ドキュメントによれば、軽量で柔軟なコンポーネントであり、オプションでビューポート全体を拡張して、サイトの主要コンテンツを紹介することができます。

39
00:02:28,170 --> 00:02:31,680
 

40
00:02:31,680 --> 00:02:37,670
ここにある例を見ることができます。ジャンボトロンを使用したい場合は、本当に簡単です。

41
00:02:37,680 --> 00:02:43,680
私たちがする必要があるのは、divクラスのジャンボトロンを書いてから、その中に入れたものがジャンボトロンの一部になることだけです。

42
00:02:43,680 --> 00:02:44,750
 

43
00:02:44,970 --> 00:02:46,680
だからそれを試してみましょう。

44
00:02:47,190 --> 00:02:58,940
 

45
00:02:59,370 --> 00:03:09,630
 

46
00:03:09,630 --> 00:03:17,300
ちょうどそれは下のボタンはクラスJumbotronジャンボトロンとdivを持っているし、そこにある場合はH1またはH-1はこれがジャンボトロンであると言うだろうし、そこにボタンを追加すると、ここにあるように段落を追加するだけでなく、私たちの段落にはちょっとひどくなります。

47
00:03:17,790 --> 00:03:19,420
今は十分です。

48
00:03:20,310 --> 00:03:21,060
 

49
00:03:24,330 --> 00:03:28,460
そして、ボタンと私たちのボタンはちょうどそこにこんにちはと言うでしょう。

50
00:03:28,800 --> 00:03:29,250
OK。

51
00:03:29,250 --> 00:03:31,830
そして、ボタンをいくつか選択します。

52
00:03:31,980 --> 00:03:39,680
私たちはボタンの成功をし、私はそれを大きくして保存します。

53
00:03:39,940 --> 00:03:41,620
私たちが得たものを見てみましょう。

54
00:03:41,790 --> 00:03:47,400
そしてJumbotronがあると、それはブラウザウィンドウの幅全体を占めることがわかります。これは通常、私たちが望むものではありません。

55
00:03:47,400 --> 00:03:48,740
 

56
00:03:49,050 --> 00:03:54,840
そして起こっているのは、JumboTronが内部にあるコンテナの100％を占めるように設定されていることです。

57
00:03:54,840 --> 00:03:55,510
 

58
00:03:55,640 --> 00:03:57,740
この場合、それは何の外にもありません。

59
00:03:57,900 --> 00:04:02,550
 

60
00:04:02,550 --> 00:04:07,620
しかし、まもなく、グリッドシステムとブートストラップを見せて、画面の中央に配置して画面の3分の1を占めるようにするために、画面のどのくらいの部分を正確に制御できるかを示します。

61
00:04:07,650 --> 00:04:12,180
画面の3分の2は画面の4分の1で、ブートストラップグリッドシステムを使用してこれらのさまざまな選択肢があります。

62
00:04:12,180 --> 00:04:14,150
 

63
00:04:14,310 --> 00:04:21,480
ここでは、コンテナと等しいクラスのコンテナと、コンテナが行うコンビネーションがない別の要素を示します。

64
00:04:23,600 --> 00:04:25,140
 

65
00:04:25,140 --> 00:04:31,800
divクラスのコンテナの中に物を置くだけでは、周囲にいくつかの間隔を空けて配置し、物を配置します。

66
00:04:31,800 --> 00:04:32,950
 

67
00:04:33,360 --> 00:04:35,130
 

68
00:04:38,550 --> 00:04:46,750
だから、コンテナはここでこのスペースをすべて占めるかどうかを調べることができますが、そこにはかなりの余裕があります。

69
00:04:46,750 --> 00:04:50,860
 

70
00:04:50,860 --> 00:04:55,990
だから、私たちが話していないグリッドシステムを使わなくてもすぐに改善が必要な場合は、divクラスコンテナを追加することができます。そして今、この素晴らしいジャンボトロンを取得します。

71
00:04:55,990 --> 00:05:01,720
私たちが既にこのコンテナに入れたコードを移動させれば、それをジャンボトロンの中に入れません。

72
00:05:01,720 --> 00:05:03,230
 

73
00:05:03,310 --> 00:05:07,890
そのコンテナの影響をまだ受けていることがわかります。

74
00:05:08,020 --> 00:05:15,640
したがって、ジャンボトロンの外側ではあるが、コンテナ内に保存して更新すると、そのコンテナ内にも表示され、視覚的に反映されます。

75
00:05:15,640 --> 00:05:18,120
 

76
00:05:18,400 --> 00:05:22,320
[OK]をクリックして、コンポーネントと次に表示されることに戻りましょう。

77
00:05:22,330 --> 00:05:23,950
私たちはトップに行く。

78
00:05:24,280 --> 00:05:28,760
私たちは評価を見なければなりません。そして、私はあなたにそのフォームとそれらがどのように働くかを示します。

79
00:05:28,990 --> 00:05:33,030
フォームをクリックすると、いくつかの種類があり、例が異なります。

80
00:05:33,070 --> 00:05:35,710
そして、私たちが何かをタイプする前に、最初にそれらをスクロールします。

81
00:05:35,980 --> 00:05:39,910
ここでは、ブートストラップ形式の基本的な例を示します。

82
00:05:39,910 --> 00:05:42,540
あなたはそれを作り出す市場を見ることができます。

83
00:05:42,760 --> 00:05:49,930
次にインラインフォームと呼ばれるインラインフォームがあり、インラインフォームの別のタイプと、入力の種類とフォームの別の種類のインラインフォームがあります。

84
00:05:49,930 --> 00:05:55,320
 

85
00:05:55,480 --> 00:05:59,140
そして今、これは、サポートされているさまざまなタイプの入力をコントロールする異なるタイプのフォームコントロールについて話しています。

86
00:05:59,140 --> 00:06:00,420
 

87
00:06:00,430 --> 00:06:03,280
だからこれらの色はすべてあなたです。

88
00:06:03,310 --> 00:06:13,450
 

89
00:06:13,450 --> 00:06:24,940
電子メール番号週の時間などテキスト領域異なるチェックボックス無効チェックボックス無効ラジオボタンインラインチェックボックスインラインラジオボタンドロップダウンメニューは継続的にダウンします。

90
00:06:24,970 --> 00:06:26,780
私たちは他のフォーラム国を持っています。

91
00:06:26,780 --> 00:06:28,370
私たちは焦点を当てています。

92
00:06:28,470 --> 00:06:30,910
この青色で強調表示されています。

93
00:06:31,060 --> 00:06:34,420
これがデフォルトのブートストラップフォーカススタイリングです。

94
00:06:34,420 --> 00:06:43,750
 

95
00:06:43,780 --> 00:06:49,780
 

96
00:06:50,200 --> 00:06:54,610
私たちはまた、無効にすることで入力を無効にすることもできますし、他にもできることがいくつかありますが、私は元に戻って実際に基本的な始まりに集中します。それを少しずつ解剖します。

97
00:06:54,610 --> 00:06:59,200
そこでここに戻って、このフォームを他のものの後に追加します。

98
00:06:59,200 --> 00:07:01,420
しかし、私はコンテナの中でそれをやります。

99
00:07:01,420 --> 00:07:03,290
私はこのフルスクリーンをしばらく作ってみましょう。

100
00:07:03,340 --> 00:07:08,580
私たちは私たちのフォームを持っており、そのフォームの中にはかなりの内容があります。

101
00:07:08,590 --> 00:07:11,900
ブラウザに戻り、見た目を見てみましょう。

102
00:07:12,460 --> 00:07:17,170
最初に気づくのは、私たちのフォームがこのコンテナの向こう側にあることです。

103
00:07:17,230 --> 00:07:21,060
それはそれの100％を占め、それは我々が制御できるものです。

104
00:07:21,100 --> 00:07:27,360
いったんブートストラップ・グリッド・システムについて話をすると、これが50％も進むはずです。

105
00:07:27,380 --> 00:07:28,470
 

106
00:07:28,480 --> 00:07:32,920
ブートストラップ・グリッド・システムについて話したら、それは簡単に変更できますし、まだそこにはありません。

107
00:07:32,920 --> 00:07:34,090
 

108
00:07:34,120 --> 00:07:35,510
だから私たちはただそれと一緒に行くつもりです。

109
00:07:35,530 --> 00:07:37,080
今は100％を占めています。

110
00:07:37,120 --> 00:07:39,670
それは奇妙な奇妙な探しているフォーラムですが、それは問題ありません。

111
00:07:39,820 --> 00:07:41,320
私たちはそれがいかに大好きです。

112
00:07:41,470 --> 00:07:45,290
だから私たちは崇高に戻って、一度にこれを解剖しましょう。

113
00:07:45,550 --> 00:07:48,730
だから私たちはそのフォーラムタグの内側にforumタグを持っています。

114
00:07:48,910 --> 00:07:54,880
 

115
00:07:54,880 --> 00:08:01,840
 

116
00:08:01,840 --> 00:08:04,010
divクラスのフォームグループがあり、ブートストラップのドキュメントに戻ってフォームグループを検索し、ラップラベルとコントロールをフォームグループ内で最適な間隔で表示することができれば、そのことについてもっと知りたい場合は、

117
00:08:04,300 --> 00:08:11,140
だから、この最初のクラスの周りのフォームグループクラスを取り除くと、最初と2番目のクラスの周りでそれを行います。

118
00:08:11,140 --> 00:08:13,800
 

119
00:08:13,870 --> 00:08:21,520
私は保存し、これらの入力間の間隔がここでどのように変化するかを再表示します。

120
00:08:22,150 --> 00:08:27,040
だから私たちは戻ってフォームグループを追加することができます。これは実際にあなたが入力とラベルを持ち、それらを一緒にグループ化したい場合に使用します。

121
00:08:27,250 --> 00:08:30,640
 

122
00:08:30,940 --> 00:08:35,320
だからちょうどちょっとしたスペースがそこに追加されています。

123
00:08:35,320 --> 00:08:40,330
ここにちょっとしたスペースが追加され、これらの2つを効果的にグループ化してグリップします。

124
00:08:40,330 --> 00:08:43,660
 

125
00:08:43,660 --> 00:08:45,390
フォームグループです

126
00:08:46,000 --> 00:08:47,860
そしてラベルはちょうど正常です。

127
00:08:47,860 --> 00:08:54,610
Boucekクラスにラベル付けするために何かを追加する必要はありませんが、入力にはクラスフォームコントロールがあります。

128
00:08:55,300 --> 00:08:57,470
だから私がそれを取り除くとどうなるか見てみましょう。

129
00:08:57,700 --> 00:09:03,670
だから私はちょうど最初にそれを行い、電子メールの入力を入れて戻ってリフレッシュします。

130
00:09:03,670 --> 00:09:08,590
これは、通常のデフォルトのブラウザ入力に完全に戻ります。

131
00:09:08,590 --> 00:09:10,050
だからあなたは角を丸くしません。

132
00:09:10,060 --> 00:09:12,800
同じパディングとスペーシングの間隔はありません。

133
00:09:13,000 --> 00:09:18,010
また、私がクリックしたときに同じフォーカス効果を得ることはありません。青いアウトラインを取得しますが、これはこれとは異なります。

134
00:09:18,010 --> 00:09:19,010
 

135
00:09:19,180 --> 00:09:23,860
 

136
00:09:23,860 --> 00:09:28,750
ブートストラップの輪郭はもう少し微妙で、2つの間の視覚的な変化はただちに明らかになりますが、実際にグリッドシステムで作業すると、さらに重要な違いがあります。要素。

137
00:09:28,750 --> 00:09:33,430
 

138
00:09:33,620 --> 00:09:36,170
戻り、フォームコントロールを再度追加します。

139
00:09:36,400 --> 00:09:45,880
だから実際にこれを蒸留したいのであれば、ここにあるすべてのものがグループとフォームコントロールを形成するために沸騰します。

140
00:09:46,150 --> 00:09:49,840
これらの2つのクラスは、物事を見栄えにする責任があります。

141
00:09:49,840 --> 00:09:55,680
今、このパラグラフクラスのヘルプブロックがあり、私たちがそれから何を得るかを見てみることができます。

142
00:09:55,690 --> 00:10:01,910
 

143
00:10:01,910 --> 00:10:07,680
 

144
00:10:08,120 --> 00:10:13,570
このテキストはここにあります。ちょうどあなたのフォームの一部についてのポインタとそのクラスのヘルプブロックでのヒントを示しています。ここに私たちのボタンがあります。これはちょうど普通のPucelleボタンです。他のボタンと同じように色を変えることができます。

145
00:10:13,570 --> 00:10:16,080
 

146
00:10:16,090 --> 00:10:21,910
だからすでにこれはレゴのようなものですが、私たちがジャンボトロンに加えることができるレゴボタンがあるのがわかります。

147
00:10:21,910 --> 00:10:23,270
 

148
00:10:23,320 --> 00:10:27,360
単独で追加することもできますし、フォームの代わりに追加することもできます。

149
00:10:27,430 --> 00:10:31,840
これは、アプリケーションのさまざまな部分に追加できる小さなプラグアンドプレイコンポーネントです。

150
00:10:32,500 --> 00:10:36,990
ですから、インラインフォームであるもう1つのタイプのフォームを見てみましょう。

151
00:10:37,450 --> 00:10:39,120
だからこれは少し違って見える。

152
00:10:39,340 --> 00:10:44,800
 

153
00:10:46,020 --> 00:10:53,860
私たちがこのコードをコピーしただけで、相違点を見てみましょう。その最初のフォームを残して、ライン形式でここにコメントを追加し、物事を適切にインデントしましょう。

154
00:10:54,880 --> 00:10:56,200
いいね。

155
00:10:56,200 --> 00:10:58,360
すべてが同一であることに注意してください。

156
00:10:58,360 --> 00:11:04,290
私たちはまだフォームグループを持っている入力にフォームコントロールを持っていますが、大きな違いがあります。

157
00:11:04,360 --> 00:11:09,070
すべてが1行になるように、クラス形式のフォーム内にあります。

158
00:11:09,490 --> 00:11:11,550
始めるのが見えるように見せましょう。

159
00:11:11,640 --> 00:11:15,450
私は戻ってきてここにラインの形をしてくれます。

160
00:11:15,850 --> 00:11:24,870
そして、私がそれを取り除き、それを保存するとすぐに、私たちはここにあるように通常の形に戻ります。

161
00:11:25,210 --> 00:11:29,330
したがって、1つのクラスには、それを制御するすべてのスタイルが含まれています。

162
00:11:29,470 --> 00:11:31,340
それで、Form in lineとして保存します。

163
00:11:31,540 --> 00:11:34,270
そして、やはり今の間隔は理想的ではありません。

164
00:11:34,270 --> 00:11:37,130
これは、グリッドシステムについて話すときに修正される予定です。

165
00:11:37,150 --> 00:11:40,090
ブートストラップフォームについては、もっと多く話すことができます。

166
00:11:40,090 --> 00:11:46,060
 

167
00:11:46,060 --> 00:11:51,640
 

168
00:11:51,970 --> 00:11:53,750
私たちはおそらく、複雑なフォームを作成するだけで30分45秒の講義を行うことができます。これらのさまざまな部分のすべてを分析して、さまざまな種類のさまざまなスタイルをカスタマイズすることができます。

169
00:11:53,830 --> 00:11:55,120
しかし、私はそれをするつもりはありません。

170
00:11:55,210 --> 00:11:56,880
私たちは重要な基礎をカバーしました。

171
00:11:56,940 --> 00:12:01,540
 

172
00:12:01,600 --> 00:12:07,150
 

173
00:12:07,150 --> 00:12:09,730
Boucekフォームのパンとバターの種類には、基本的な規則形式とインライン形式の2種類があり、フォームの周りに使用するブートストラップのさまざまな側面にはいくつかの機能があります。

174
00:12:09,910 --> 00:12:14,680
 

175
00:12:14,680 --> 00:12:19,540
 

176
00:12:19,540 --> 00:12:20,310
しかし、今は時間を費やすことなく、PRICHEPフォームの詳細や細かい点については、私が実際にブートストラップを使用しているときに必要なときに、それらの小さな部分を投げていきます。

177
00:12:20,530 --> 00:12:27,280
だから、フォームについての2つのテイクアウェイは、本当に重要なフォームコントロールとフォームグループフォームコントロールの2つのクラスであり、入力をブートストラップの洗練されたフォームグループにするだけですばらしい間隔を追加します。

178
00:12:27,280 --> 00:12:33,480
 

179
00:12:33,550 --> 00:12:40,660
だから、あなたが書いたものが何であれ、フォームグループにはすばらしい間隔が得られ、その後、単一クラスのフォームが一列に並んでいます。

180
00:12:40,960 --> 00:12:44,160
フォーム全体を一列にまとめるという形でフォームをラップする場合。

181
00:12:44,520 --> 00:12:46,570
そして、ジャンボトロンについても話しました。

182
00:12:46,900 --> 00:12:50,020
非常に単純なクラスはJumbotronに等しい。

183
00:12:50,110 --> 00:12:51,650
あなたはピアを見ることができます。

184
00:12:51,970 --> 00:12:54,230
そして、すべてをコンテナの中に入れます。

185
00:12:54,460 --> 00:12:59,140
私たちがその容器を取り除いて何が起こるかを見せたら、

186
00:12:59,880 --> 00:13:04,950
すてきなマージンが消える間隔をすべてリフレッシュしてください。

187
00:13:05,200 --> 00:13:11,500
だから、コンテナはちょうどあなたのアプリに間隔の素早いビットを得るために良い方法は、物事は比較的いいように見えるようにします。

188
00:13:12,140 --> 00:13:17,620
 

189
00:13:17,620 --> 00:13:23,680
 

190
00:13:23,680 --> 00:13:28,780
 

191
00:13:28,780 --> 00:13:33,160
OK、このビデオを終了する前に、ノードとエクスプレスとMongoとmongooseとたくさんの技術を使ってフルバックエンドデータベースを接続したアプリケーションを構築するサイトを10秒間表示します。インターフェイスをプロトタイプ化して比較的速く見えるようにするためのブートストラップです。ここにはジャンボトロンがあります。

192
00:13:33,160 --> 00:13:37,820
後で説明するグリッドシステムを使用しているボタンのいくつかを使用しています。

193
00:13:37,960 --> 00:13:40,950
私がログインすると、フォームがあることがわかります。

194
00:13:41,260 --> 00:13:46,360
したがって、これらはフォームコントロールであり、グリッドシステムを使用してスタイリングしたので、画面の幅全体を占めることはありません。

195
00:13:46,360 --> 00:13:47,610
 

196
00:13:47,680 --> 00:13:50,070
むしろ、それはこの小さな中間部分を取り上げるだけです。

197
00:13:50,170 --> 00:13:52,700
だから、我々は一度グリッドシステムについて話をする。

198
00:13:52,950 --> 00:13:57,490
しかし、私はちょうどこれが本当のアプリケーションであることを示したいと思っています。それは、ブートストラップを使ってプロトタイプを作成し、かなり素早く見えるようにするものです

199
00:13:57,610 --> 00:14:00,460