1
00:00:00,330 --> 00:00:05,740
このレッスンでは、架空のスタートアップ用のリンク先ページを作成するためにブートストラップを使用します。

2
00:00:06,070 --> 00:00:08,760
私たちのスタートアップはパーフェクトマッチと呼ばれています。

3
00:00:08,760 --> 00:00:09,210
非常に面白い。

4
00:00:09,210 --> 00:00:15,300
 

5
00:00:15,300 --> 00:00:21,750
 

6
00:00:21,750 --> 00:00:22,430
私はそれが人間のネコの出会い系アプリであると知っています。私はそれが、孤独な人間とSheldrickのネコとのマッチングが比較的無害であるかもしれないことを解釈するためにあなたに任せます。

7
00:00:22,440 --> 00:00:23,260
知りません。

8
00:00:23,550 --> 00:00:27,690
サイトのクイックツアーをして彼女に書いてみましょう。

9
00:00:27,690 --> 00:00:29,920
私は本当にいくつかの機能を指摘しています。

10
00:00:29,970 --> 00:00:31,250
ここにはあまりありません。

11
00:00:31,290 --> 00:00:33,780
私たちは実際にはこれをつかまえておらず、まだ何もしていません。

12
00:00:33,840 --> 00:00:37,770
だから、それは本当にただのHDムービーですが、これまでに述べたことはすべてです。

13
00:00:38,100 --> 00:00:42,510
だから私たちは十分な長さについての完璧なマッチホームを持っています。

14
00:00:42,510 --> 00:00:50,100
彼らは実際にどこにもサインアップしていないし、右側に2つの小さなアイコンがある。私たちは彼女のハンバーガーを手に入れる。

15
00:00:50,100 --> 00:00:51,030
 

16
00:00:51,180 --> 00:00:52,320
私はそれをクリックすることができます。

17
00:00:52,380 --> 00:00:55,980
これらのリンクはすべて、そのハンバーガーの中にあります。

18
00:00:55,980 --> 00:01:01,650
次に、我々は中心にとどまり、全体の背景をカバーする大きな背景イメージを持っています。

19
00:01:01,740 --> 00:01:07,590
だから真ん中に私たちのスタートアップの名前が私たちと完璧にマッチして、私たちはキャプションを持っています。

20
00:01:07,650 --> 00:01:09,750
 

21
00:01:09,750 --> 00:01:15,420
そして、我々は少し水平なルールを持っています。次に、アイコンを使い始めるためのボタンです。

22
00:01:15,810 --> 00:01:21,990
私がこれを縮小するにつれて、すべてが真ん中にとどまり、少し上に移動して、ページの途中でテキストが始まるモバイルデバイス上に、何らかの厄介なレイアウトがないようにします。

23
00:01:21,990 --> 00:01:26,960
 

24
00:01:27,060 --> 00:01:29,690
だから私たちは少し上に移動し、それは中心にとどまっています。

25
00:01:29,700 --> 00:01:33,900
このレイアウトは本当に簡単でブートストラップが簡単ですが、ランディングページには比較的効果的です。

26
00:01:33,900 --> 00:01:38,180
私たちが持っているものはすべて、幅全体を占める単一の列です。

27
00:01:38,220 --> 00:01:40,850
だから、この列は12単位になります。

28
00:01:40,860 --> 00:01:46,890
私たちはそれを1列12単位に分割していませんし、すべての列をその列の中央に配置します。

29
00:01:46,890 --> 00:01:48,510
 

30
00:01:48,540 --> 00:01:49,860
だから始めましょう。

31
00:01:49,860 --> 00:01:52,350
まず、ファイルを作るだけです。

32
00:01:52,440 --> 00:01:54,640
私はDMLでインデックスと呼ばれるものを持っています。

33
00:01:54,720 --> 00:01:58,890
私はこれを定期的なボイラープレートの完璧なマッチで追加してから、ブートストラップを追加して開始し、CDN

34
00:02:01,700 --> 00:02:04,950
Bitstrips

35
00:02:08,580 --> 00:02:10,410
CDNを使用します。

36
00:02:11,490 --> 00:02:14,350
SSとJavascriptをここでやりましょう。

37
00:02:14,400 --> 00:02:16,860
タスクバー用のJavaScriptが必要になります。

38
00:02:17,220 --> 00:02:19,130
だから私たちはタグをリンクする必要があります。

39
00:02:19,710 --> 00:02:22,770
その後、私たちはJavaScriptを取得します。

40
00:02:22,770 --> 00:02:24,030
了解。

41
00:02:24,090 --> 00:02:32,030
これをスクリプトタグの一番下に置き、ソースをあなたと同じに設定します。

42
00:02:32,520 --> 00:02:41,040
今、私たちがこれを開くと、コンソールを開くと小さな問題があります。これは、ブートストラップのjavascriptのためにJayのクエリも必要とすることです。

43
00:02:41,040 --> 00:02:43,390
 

44
00:02:43,450 --> 00:02:46,290
私たちがJを必要とする必要があるナビゲーションバーの教訓から覚えています。

45
00:02:46,290 --> 00:02:46,750
クエリー。

46
00:02:46,860 --> 00:02:52,500
だから私たちはそのためのCDNを手に入れます。

47
00:02:53,730 --> 00:02:55,290
私たちは修正版をやります。

48
00:02:55,290 --> 00:02:57,500
そのURLをコピーします。

49
00:02:57,600 --> 00:03:04,110
そして最後にここに戻り、javascriptへのリンクを張る前にそれをしなければなりません。

50
00:03:04,440 --> 00:03:09,360
それ以外の場合は、依然としてクエリについて知りませんので、まずクエリをロードする必要があります。

51
00:03:09,360 --> 00:03:10,650
もう一度やり直しましょう。

52
00:03:10,870 --> 00:03:11,960
火災リフレッシュ。

53
00:03:12,520 --> 00:03:17,490
私たちは何の誤りも見られないので、いい兆候は何も見えません。

54
00:03:18,570 --> 00:03:20,850
真ん中のテキストから始めましょう。

55
00:03:20,850 --> 00:03:22,480
このすべてのコンテンツはここにあります。

56
00:03:22,620 --> 00:03:29,570
そこで、コンテナを作成し、コンテナ内にクラスECOコンテナを作成する行が必要です。次に、そこには常にその行が必要な別のdivがあります。

57
00:03:30,870 --> 00:03:35,870
 

58
00:03:35,930 --> 00:03:45,780
グリッドシステムを使用しているときはいつでも、divは列ダッシュ大12に等しいクラスになります。

59
00:03:46,230 --> 00:03:47,220
 

60
00:03:48,240 --> 00:03:50,750
そして、それはその容器の向こうまで広がっていきます。

61
00:03:51,210 --> 00:03:59,330
そして、彼らは完全なマッチと保存を言うだけのH1を持っている場合は、内部。

62
00:03:59,520 --> 00:04:02,280
そして、そのリフレッシュでそれを残しましょう。

63
00:04:02,580 --> 00:04:06,660
実際には私たちが望むものではありません。それは、私たちがやるべきことがいくつかあるからです。

64
00:04:06,660 --> 00:04:09,010
最初は、すべてをその列に集中させる必要があるということです。

65
00:04:09,300 --> 00:04:16,700
したがって、ここで扱っていることを調べると、H1が全部通り抜けていることがわかり、その内部にH1の中心を置くだけでよいのです。

66
00:04:16,710 --> 00:04:19,190
 

67
00:04:19,410 --> 00:04:21,680
もう1つは、少し下げなければならないということです。

68
00:04:21,720 --> 00:04:26,250
パディングや余白を追加して、ページの上部に移動しないようにする必要があります。

69
00:04:26,250 --> 00:04:28,480
残りのコンテンツを追加することから始めましょう。

70
00:04:28,830 --> 00:04:36,180
だから私たちは唯一の人間のネコの出会い系アプリを持っていて、それはただH

71
00:04:36,180 --> 00:04:46,110
3になり、私たちが望むどんな要素でもできるが、私はそれをH-3唯一の人間ダッシュネコのデートアプリにするだろう。

72
00:04:46,590 --> 00:04:47,730
 

73
00:04:48,090 --> 00:04:54,060
そして、そのように見えない水平ルールを追加することができますが、事実の後にスタイルを適用し、そのボタンのクラスにボタンを追加します。

74
00:04:54,060 --> 00:04:59,180
 

75
00:04:59,240 --> 00:05:01,680
私たちは見ています。

76
00:05:02,100 --> 00:05:06,010
これはブートストラップボタンのデフォルトであり、大きなボタンです。

77
00:05:06,330 --> 00:05:07,830
戻ってみましょう。

78
00:05:07,830 --> 00:05:18,120
だから私たちはPTENと色のデフォルトとLGの間のサイズが大きいとここでは、開始するテキストを追加して保存してみましょう。

79
00:05:18,120 --> 00:05:20,520
 

80
00:05:24,290 --> 00:05:29,320
 

81
00:05:29,340 --> 00:05:30,330
大丈夫。

82
00:05:30,330 --> 00:05:34,270
だから私たちのコンテンツは次にグリッドの中央にあります。

83
00:05:34,470 --> 00:05:36,920
そして、我々はパッディングに焦点を当てて、それを動かします。

84
00:05:36,930 --> 00:05:41,430
しかし、このグリッド内の中心から始めて、それをより簡単にするために、私たちがそれぞれのものを個別に集中させる必要がないように、div内にすべてをグループ化します。

85
00:05:41,430 --> 00:05:44,720
 

86
00:05:44,760 --> 00:05:49,680
H-1を3つ、次に3つのボタンを中心に配置する必要があります。むしろ、1つの線で区切るdivとちょうど中央にグループ化することができます。

87
00:05:49,680 --> 00:05:51,430
 

88
00:05:51,750 --> 00:06:01,490
divを作ってみましょう。私はCantetのIDを与えて、その中にすべてを入れます。

89
00:06:01,560 --> 00:06:08,340
だからH-1歳3歳。 R. ボタンが適切にインデントされて保存されます。

90
00:06:08,580 --> 00:06:13,420
私たちがスタイルシートを追加する前にページをリフレッシュすると、何も変わっていないはずです。

91
00:06:14,340 --> 00:06:18,840
だから私はリンクのタグを追加し、私は自分のスタイルシートアプリを呼び出すよ。

92
00:06:18,920 --> 00:06:20,920
SSまだ存在しません。

93
00:06:21,120 --> 00:06:24,220
だから私はそれを保存する必要があります。

94
00:06:24,230 --> 00:06:27,060
同じディレクトリにSSがあります。

95
00:06:27,420 --> 00:06:31,550
すべてのhが紫色であるような単純なものから始めましょう。

96
00:06:31,680 --> 00:06:35,030
それが正常に動作することを確認するだけです。

97
00:06:35,400 --> 00:06:37,060
リフレッシュに戻りましょう。

98
00:06:37,390 --> 00:06:39,100
アンドリューは紫色のH-1を手に入れました。

99
00:06:39,180 --> 00:06:39,670
すばらしいです。

100
00:06:39,870 --> 00:06:44,970
それでは、Daveにコンテンツのアイデアを追加して中心に置くことを選択しましょう。

101
00:06:45,030 --> 00:06:53,620
だからそれを取り除くと、IDの内容が必要になり、テキストを整列することは省略します。

102
00:06:54,210 --> 00:06:56,430
戻ってみましょう。

103
00:06:56,430 --> 00:06:57,110
そこに行く。

104
00:06:57,120 --> 00:06:59,490
だから今はセンターが一直線に並んでいる。

105
00:06:59,490 --> 00:07:06,720
次に、25％のパディングを正確に行うために、このページを25％下に押し下げます。

106
00:07:07,470 --> 00:07:15,270
だから、ここではパディングトップ25％を行うだろう。

107
00:07:16,270 --> 00:07:21,720
そして、それをパーセンテージとして保持すると、ピクセル数を厳密に指定するのではなく、少し反応がよくなります。

108
00:07:21,720 --> 00:07:22,870
 

109
00:07:22,890 --> 00:07:24,790
それは中心にあるのです。

110
00:07:25,230 --> 00:07:29,940
画面のサイズを変更すると25％も変化します。

111
00:07:29,940 --> 00:07:30,540
すばらしいです。

112
00:07:30,540 --> 00:07:32,480
さて、背景画像を追加しましょう。

113
00:07:32,670 --> 00:07:38,460
私が使用しているイメージは愛らしい猫であり、人間のやりとりはここから始まります。これはSplash

114
00:07:38,460 --> 00:07:43,280
Webサイトで最後に紹介したブートストラップイメージグリッドのビデオで紹介しました。

115
00:07:43,680 --> 00:07:48,300
そして、彼らはあなたが何の問題もなく使用することができる本当に素晴らしい高品質の画像のすべての種類があります。

116
00:07:48,480 --> 00:07:54,110
そして、私が使っているものはここにあります。私はその説明の猫のリンクも検索します。

117
00:07:54,450 --> 00:08:00,230
ここであなたはこの画像のAroです。ちょうどあなたの画像を右クリックしてコピーしてください。

118
00:08:00,360 --> 00:08:06,310
今戻って、それを背景イメージとして体に追加します。

119
00:08:06,800 --> 00:08:13,830
だからバックグラウンドし、その巨人であるURLをあなたに教えてください。

120
00:08:13,830 --> 00:08:22,530
そして、それをこのレベルのままにしたり、リフレッシュすると、巨大な背景イメージが得られます。これは、爪のスタートアップのようなものです。

121
00:08:22,530 --> 00:08:26,010
 

122
00:08:26,010 --> 00:08:36,060
だから我々はそれをサイズ変更する必要があり、それを行うには、バックグラウンドサイズを使用し、それを変更して新たにカバーする必要があります。

123
00:08:36,060 --> 00:08:39,230
再び我々は近づいている。

124
00:08:39,270 --> 00:08:44,430
これにより、画面の幅と高さ全体をカバーしながら、画像をできるだけ小さくします。

125
00:08:44,430 --> 00:08:44,950
 

126
00:08:45,240 --> 00:08:50,820
したがって、アスペクト比は変更されません。画像の歪みはありませんが、必要に応じて両方向に伸びます。

127
00:08:50,850 --> 00:08:52,240
 

128
00:08:52,350 --> 00:08:57,060
しかし、それは我々の画面に合うために必要な最小限の量であり、それはまだ完全ではありません。

129
00:08:57,210 --> 00:09:01,900
そして私たちがしたいことは、その大きさを変えることではなく、その位置を変えることです。

130
00:09:02,190 --> 00:09:10,280
我々はバックグラウンドポジションセンターを中心にしますが、私たちはより近くにいます。

131
00:09:10,290 --> 00:09:13,320
しかし、それはイメージが行く限り、まだ完璧なマッチではありません。

132
00:09:13,800 --> 00:09:15,510
そして、それらの変更は後で来るでしょう。

133
00:09:15,510 --> 00:09:21,540
今のところ私はナビゲーションバーに追加することに焦点を当て、Boucekのドキュメントに行きコンポーネントを調べる前にこれを行うことにしたいと思います。

134
00:09:21,540 --> 00:09:24,650
 

135
00:09:25,080 --> 00:09:27,690
私がブートストラップのナビゲーションバーに追加する場合、私はいつもこれを行います。

136
00:09:27,810 --> 00:09:29,850
そうでなければ覚えておくのはあまりにも多くのものです。

137
00:09:30,230 --> 00:09:32,070
そして私はちょうどここにこれをコピーします。

138
00:09:32,370 --> 00:09:39,630
全体のナビゲーションをここに戻って開始し、ちょうどそれを一番上に置きます。

139
00:09:39,630 --> 00:09:46,110
これは間違いなく私たちが望むNAFではなく、更新したい部分を含んでいます。

140
00:09:46,380 --> 00:09:47,380
それは十分に近いです。

141
00:09:47,610 --> 00:09:49,360
だから私たちがしたいいくつかの変更があります。

142
00:09:49,470 --> 00:09:55,890
最初の最も簡単なのは、ソリューション上のコンテンツがコンテナ内にあるため、ここにあるようにエッジまで完全には移動しないということです。

143
00:09:55,890 --> 00:09:58,570
 

144
00:09:59,100 --> 00:10:05,670
だから、私たちは戻ってinsetすることができます、またはこれをdivクラスのコンテナに変更するだけです。今戻ってみると、そのコンテナに追加したので、ここで解決策のようにいくつかの間隔があることがわかります。

145
00:10:07,290 --> 00:10:13,020
 

146
00:10:13,260 --> 00:10:14,250
 

147
00:10:14,250 --> 00:10:16,920
さて、Nevの実際のコンテンツを手に入れましょう。

148
00:10:17,070 --> 00:10:26,520
だから、最も簡単なのは今言うだけのブランドを変えることです。ブランドはここにこのラインクラスはネズバーブランドと同じで、それを固定マッチと保存に変更します。

149
00:10:26,550 --> 00:10:33,950
やってみて。

150
00:10:33,940 --> 00:10:34,990
いいよ。

151
00:10:35,490 --> 00:10:37,500
さて、このフォームを取り除きましょう。

152
00:10:37,500 --> 00:10:39,050
私たちはこれを全く必要としません。

153
00:10:39,060 --> 00:10:41,150
だから私たちのフォームはすべてここから始まります。

154
00:10:41,310 --> 00:10:45,030
その全体をリフレッシュしてください。

155
00:10:45,030 --> 00:10:50,490
ドロップダウンも取り除きましょう。

156
00:10:50,860 --> 00:10:52,560
あなたはそれを必要としません。

157
00:10:52,560 --> 00:10:54,570
それはここから始まります。

158
00:10:54,570 --> 00:10:56,680
この嘘は終わり、再び新鮮です。

159
00:10:56,680 --> 00:10:58,680
 

160
00:11:01,770 --> 00:11:02,810
今、我々は単一のリンクを持っています。

161
00:11:03,120 --> 00:11:04,540
だから私たちはサインアップしてログに記録されるはずのこれら2つのリンクから始めます。

162
00:11:04,710 --> 00:11:10,910
それがここのリンクなので、サインアップして複製することができます。

163
00:11:11,360 --> 00:11:18,110
内部にアンカータグが付いた味方だけ。

164
00:11:18,390 --> 00:11:21,450
これがログインします。

165
00:11:21,450 --> 00:11:23,840
それをチェックしよう。

166
00:11:24,750 --> 00:11:26,640
すばらしいです。

167
00:11:26,700 --> 00:11:27,260
アイコンは最後に表示されます。

168
00:11:27,270 --> 00:11:29,100
私たちは2つのリンクを持っています。

169
00:11:29,100 --> 00:11:30,380
今ここでは3つのリンクが必要です。

170
00:11:30,450 --> 00:11:32,320
私たちはすでにそれらの2つを持っており、私たちはそのドロップダウンを取り除くでしょう。

171
00:11:32,340 --> 00:11:35,500
だから私たちは連絡のために家にいる必要があります。

172
00:11:35,610 --> 00:11:38,560
そこでドロップダウンを見つけてください。

173
00:11:38,600 --> 00:11:41,490
クラスはドロップダウンに等しい。

174
00:11:41,490 --> 00:11:43,100
それを取り除きましょう。そして今、アクバルは単純化されています。

175
00:11:43,140 --> 00:11:49,070
今我々は2つの異なる長さを持っています。

176
00:11:49,080 --> 00:11:50,370
私たちは実際にそれらの両方を取り除き、最初からやります。

177
00:11:50,390 --> 00:11:53,760
そこで、アンカータグを付けて1人の同盟者を追加してから、それを3回実行します。

178
00:11:53,760 --> 00:12:00,120
この最初のものは家に言わなければなりません。

179
00:12:00,120 --> 00:12:02,260
次は約です。

180
00:12:02,550 --> 00:12:04,100
そして最後は連絡先です。

181
00:12:04,320 --> 00:12:06,530
それをチェックしよう。

182
00:12:07,020 --> 00:12:08,760
そこには3つの長さがあります。

183
00:12:08,760 --> 00:12:11,050
一つの小さなこと。

184
00:12:11,070 --> 00:12:11,970
ホームはアクティブで、ブートストラップは本当に簡単です。

185
00:12:11,970 --> 00:12:16,830
 

186
00:12:16,980 --> 00:12:24,860
私たちがしなければならないことは、アンカータグではなく親の同盟国である同盟者にアクティブなクラスを追加することです。

187
00:12:26,220 --> 00:12:29,390
すばらしいです。

188
00:12:29,400 --> 00:12:29,960
 

189
00:12:30,200 --> 00:12:36,900
OKですので、私たちのナビゲーションバーです。サイズを変更すると、このハンバーガーはすでにうまく動作しています。

190
00:12:36,900 --> 00:12:37,940
私たちは、私たちの背景イメージが台無しになるという問題があります。

191
00:12:38,520 --> 00:12:42,420
私たちはそれをちょっとだけカバーするつもりですが、ハムバーガーはうまく動作しています。

192
00:12:42,420 --> 00:12:45,750
すべてがよさそうだ。

193
00:12:45,750 --> 00:12:47,400
さて、私がここで使ったフォントがLedo Lであるように、フォントを説明しましょう。 A. それはGoogleのフォントのものなので、Googleのフォントに行き、Ledoを探します。

194
00:12:47,430 --> 00:12:53,360
LA T-Oは毎回コレクションに行きます。

195
00:12:53,430 --> 00:12:57,900
正常で大胆になったら使いましょう。

196
00:12:58,010 --> 00:13:02,720
また、H-1を大胆にしたい。

197
00:13:03,180 --> 00:13:06,820
はい。

198
00:13:06,840 --> 00:13:10,050
そして、彼女のアプリケーションにこのリンクを追加します。

199
00:13:10,590 --> 00:13:11,040
ここに一番上へここで今すぐアプリケーションを入力してください。私たちはそのフォントをすべてに適用しようとしています。

200
00:13:11,070 --> 00:13:16,290
だから私は本体フォントファミリの中からLedoを選択し、それが正しくロードされていることを確認しましょう。

201
00:13:16,290 --> 00:13:24,090
私たちがリフレッシュしたものを見てください。

202
00:13:24,270 --> 00:13:33,720
そして、私たちの前部は、テキストが暗いですが、変更されているので、見るのが難しいです。あなたはNFRでそれを見ることもできます。

203
00:13:34,050 --> 00:13:36,780
 

204
00:13:37,520 --> 00:13:43,000
それは変わった。

205
00:13:43,000 --> 00:13:43,990
これは、このソリューションに含まれているものと一致します。

206
00:13:44,160 --> 00:13:44,790
 

207
00:13:44,790 --> 00:13:47,510