1
00:00:00,660 --> 00:00:05,550
このレッスンでは、今までブートストラップについて学んだことを使用して、小さなプロジェクトを構築します。

2
00:00:05,550 --> 00:00:06,740
 

3
00:00:06,770 --> 00:00:11,880
ジャンボトロンとグリッドシステムを遮断するなど、私たちが話していた多くのコンポーネントが含まれています。

4
00:00:12,390 --> 00:00:13,590
 

5
00:00:13,920 --> 00:00:17,370
私はまたここにアイコンを含む1つか2つの新しいものを投げた。

6
00:00:17,370 --> 00:00:19,180
私たちはまだそれらをどうやって行うのか見ていません。

7
00:00:19,500 --> 00:00:25,590
また、このスクロールバーがスクロールすると、スクロールバーが上部に固定されているため、固定スクロールバーがスクロールしないようになります。

8
00:00:25,590 --> 00:00:30,360
 

9
00:00:30,360 --> 00:00:34,800
最後に、デフォルトのブートストラップされたコンポーネントの色の一部を変更しています。

10
00:00:34,800 --> 00:00:37,290
これは実際には少し灰色の陰影です。

11
00:00:37,380 --> 00:00:40,480
これは青の色合いで、ナビゲーションバーにはいくつかの色があります。

12
00:00:40,560 --> 00:00:44,250
だから私はコードを書く前にすべてのことをする方法をあなたに教えてくれるでしょう。

13
00:00:44,320 --> 00:00:49,420
ほとんどの場合、これらのイメージがWebサイトからSplashという偉大なリソースであるという事実を指摘してください。

14
00:00:49,420 --> 00:00:52,620
 

15
00:00:52,920 --> 00:00:57,640
だからスプラッシュはあなたが欲しいものを何でもすることができる美しい高いrezの写真の束を提供します。

16
00:00:57,750 --> 00:01:00,630
あなたはここでライセンスを読むことができますが、それはあなたが欲しいものは大体です。

17
00:01:00,630 --> 00:01:05,610
それは創造的なコモンズのライセンスだよ私は本当に気にしないと確信しているが、写真は本当に素晴らしいですし、私はこれらの8つの多くを使用しています。

18
00:01:05,610 --> 00:01:09,390
 

19
00:01:09,390 --> 00:01:11,450
実際に私たちのギャラリーに。

20
00:01:11,790 --> 00:01:17,280
そして、それは私が実際に写真授業を取った以上の自分を取ったこの1つのイメージをここに残して、これは私が半分まともに見える撮影した最初のものです。

21
00:01:17,280 --> 00:01:21,090
 

22
00:01:21,090 --> 00:01:24,780
私はこれらのものに比べても熱く見えないと思う。

23
00:01:24,780 --> 00:01:28,650
とにかく重要ではないこれらの全く同じイメージを使用したい場合。

24
00:01:28,740 --> 00:01:30,430
これはどの画像でも動作します。

25
00:01:30,450 --> 00:01:36,180
しかし、あなたがまったく同じものを望むなら、私はこのファイルギャラリーMの全てのリンクを含んでいます。

26
00:01:36,210 --> 00:01:41,310
Dにはこのビデオとともにアップロードされており、ダークブルーとライトグレーを使用する2つの色も含まれています。

27
00:01:41,310 --> 00:01:42,570
 

28
00:01:42,740 --> 00:01:42,990
OK。

29
00:01:42,990 --> 00:01:46,790
だからこそ、このようなことがあれば、今すぐプロジェクトを始めましょう。

30
00:01:47,100 --> 00:01:48,740
だから私は空のファイルギャラリーを持っている。

31
00:01:48,750 --> 00:01:49,620
H m l。

32
00:01:49,860 --> 00:01:56,400
私はここでスケルトンを追加していきます。このイメージギャラリーと呼ぶだけで、まずブートストラップが必要です。

33
00:01:56,400 --> 00:01:58,670
 

34
00:01:58,800 --> 00:02:06,490
そして私はちょうど古いプロジェクトからCDの端をコピーするつもりですので、今すぐやります。

35
00:02:06,900 --> 00:02:07,640
さあ。

36
00:02:07,710 --> 00:02:09,830
私はブートストラップCDNにリンクしています。

37
00:02:10,200 --> 00:02:18,300
私がここにいる間、私はCSSAとJay queery都市のブートストラップをつかんで、Nav

38
00:02:18,300 --> 00:02:23,580
Barレッスンで行ったことをここに置いて、nav

39
00:02:23,580 --> 00:02:25,990
barを追加するときには狩りをする必要はないこれらのファイルまたはスクリプトタグのために。

40
00:02:26,250 --> 00:02:30,250
だから保存して、私たちができる最初のことはJumbotronを追加することです。

41
00:02:30,510 --> 00:02:32,160
それは素敵で簡単です。

42
00:02:32,400 --> 00:02:38,470
だから私たちはdivを持って、クラスはJumbotronに等しくなります。

43
00:02:38,880 --> 00:02:47,520
そして、ジャンボトロンの内部は、画像ギャラリーだけを表示するH1から始まります。

44
00:02:47,670 --> 00:02:51,420
私たちは行くと私たちは保存し、これが動作することを確認しましょう。

45
00:02:51,720 --> 00:02:53,660
それで、このファイルが開きます。

46
00:02:54,060 --> 00:02:55,330
Boucekが含まれています。

47
00:02:55,350 --> 00:02:56,780
私たちはフォントの変更を見ています。

48
00:02:56,820 --> 00:02:58,980
私たちはジャンボトロンからこのグレーを見ています。

49
00:02:58,980 --> 00:03:04,560
ここでは、画面全体にわたってどこに行っているかではなく、ここにあるようにコンテナ内にあることを確認しましょう。

50
00:03:04,560 --> 00:03:07,040
 

51
00:03:07,320 --> 00:03:12,850
だから私たちはそのdivクラスがコンテナに等しいことを行います。

52
00:03:14,010 --> 00:03:21,900
そこに行って、これを適切に行い、リフレッシュして元に戻しましょう。

53
00:03:21,900 --> 00:03:25,140
さて、私たちはジャンボトロンを持っていますが、この段落を追加します。

54
00:03:25,140 --> 00:03:33,080
今度は戻ってアイコンをやってみましょうが、これは保存するH-1の単なる段落タグです。

55
00:03:33,090 --> 00:03:38,040
あなたがそこに望むテキストを自由に置いてください。私たちは現在、ジャンボトロンで終わっています。

56
00:03:38,730 --> 00:03:43,950
だから戻ってみましょう。今度はnav barをやってみましょう。私は2つの理由から、最初から十分なバーをタイプするつもりはありません。

57
00:03:43,950 --> 00:03:45,190
 

58
00:03:45,210 --> 00:03:46,970
1つはかなりのコードだということです。

59
00:03:47,010 --> 00:03:48,000
それは長い時間がかかります。

60
00:03:48,010 --> 00:03:48,840
そしてこのビデオ。

61
00:03:48,960 --> 00:03:52,870
しかし2つは、スクラッチからAckbarをほとんどタイプしないという事実です。

62
00:03:53,220 --> 00:03:58,800
ほとんどの場合、NASCARのビデオで述べたように、私のワークフローは、私がブートストラップサイトまたはNAVバーで作成した以前のサイトに移動してコピーすることです。

63
00:03:58,800 --> 00:04:02,580
 

64
00:04:02,580 --> 00:04:04,990
そして私はちょうどそれをチェックし、私は欲しくない部分を取り除く。

65
00:04:05,010 --> 00:04:06,530
私はいくつかの新しい作品を追加します。

66
00:04:06,570 --> 00:04:08,020
それで私はここでやるつもりです。

67
00:04:08,160 --> 00:04:14,160
私はすでに、ナビゲーションバーにある各HTMLアプリケーションには十分な部分があります。

68
00:04:14,280 --> 00:04:19,570
それはちょうどここにあり、それをコピーするつもりだし、ちょっと微調整します。

69
00:04:19,620 --> 00:04:26,940
それでコピーしてみましょう。私は戻ってきます。ちょうどそのようなファイルの一番上にこれを置きます。

70
00:04:27,330 --> 00:04:32,770
私たちが得たものが新鮮であることを見てみましょう。私たちはnav barを持っています。

71
00:04:33,030 --> 00:04:34,010
それは近いです。

72
00:04:34,050 --> 00:04:36,410
ここでブランドを変えたい。

73
00:04:36,420 --> 00:04:40,740
最終的に色を変えたいと思っています。色が上に固定されていることを確認したいのですが、今はそうではありませんが、そこに着きます。

74
00:04:40,760 --> 00:04:43,020
 

75
00:04:43,290 --> 00:04:45,500
戻ってブランドを変えましょう。

76
00:04:45,690 --> 00:04:49,980
だからコーヒーの代わりに私は鉱山のイメージを呼んでいます。

77
00:04:49,980 --> 00:04:53,970
もちろん、それが正常に動作することを確認してください。

78
00:04:54,250 --> 00:05:00,490
次は、昼寝やデフォルトの代わりに表示される色を変更するための簡単な変更です。

79
00:05:00,490 --> 00:05:01,690
 

80
00:05:01,700 --> 00:05:06,880
私たちは今、詩にバーがあれば、私はこれを行うことができます。

81
00:05:06,880 --> 00:05:11,770
私たちは現在今のところ暗くなっているか、テキストが明るいところで色が反転し、暗い背景が得られます。

82
00:05:11,770 --> 00:05:12,500
 

83
00:05:12,750 --> 00:05:15,660
まだ私はここで青色ではありません。

84
00:05:16,030 --> 00:05:19,740
そしてフォントも白ではありませんが、私たちは戻ってそれを修正します。

85
00:05:19,750 --> 00:05:21,650
これは今のところ十分に近いです。

86
00:05:21,670 --> 00:05:26,100
ここで、そのグリッドの実際のイメージギャラリーに焦点を当てることができます。

87
00:05:26,350 --> 00:05:29,640
まず、ソリューション上でどのように動作するかを見てみましょう。

88
00:05:29,860 --> 00:05:39,160
それで、3つのイメージが横切って始まり、次にサイズを変更すると2つになり、次に2つになり、最後に小さいサイズでは、ここに見られるように1になります。

89
00:05:39,160 --> 00:05:44,480
 

90
00:05:44,720 --> 00:05:47,110
そして、私たちは一つのイメージを横断しています。

91
00:05:47,500 --> 00:05:52,780
まずは、この3つの大きなサイズのグリッドを設定してみましょう。

92
00:05:52,780 --> 00:05:54,850
12単位の合計があることを忘れないでください。

93
00:05:54,910 --> 00:05:59,730
したがって、3つずつ進めたい場合は、それぞれを4つの単位として指定します。

94
00:06:00,160 --> 00:06:04,420
だから、それをジャンボトロンの直下に設定しましょう。

95
00:06:04,420 --> 00:06:13,900
まだコンテナの内部にあるが、divクラスが行と等しくなるようにし、その中でdivクラスが等しくなるようにし、それを4つのユニットにしたい。

96
00:06:13,900 --> 00:06:17,680
 

97
00:06:17,770 --> 00:06:27,120
だから我々はコラム大ダッシュ4を実行してEnterを押すだけで、ここにテキストを入力することから始めることができます。

98
00:06:27,120 --> 00:06:30,260
 

99
00:06:30,430 --> 00:06:35,170
そして私は、まだ刻々と大きな変化を起こすため、インデントを固定することについては心配しません。

100
00:06:35,170 --> 00:06:35,770
 

101
00:06:36,100 --> 00:06:40,170
しかし、リフレッシュして、3つの列を横断してみましょう。

102
00:06:40,180 --> 00:06:47,050
だから私たちがやりたいことは、いくつかの画像を撮って、すべて始めるだけですが、私のゴールデンゲートブリッジの写真を撮って、テキストではなく画像タグを追加します。

103
00:06:47,050 --> 00:06:52,860
 

104
00:06:52,910 --> 00:07:00,820
だからイメージソースはあなたが病気のゴールデンゲートブリッジと同じです。私はそれを3回ペーストして保存します。

105
00:07:01,210 --> 00:07:02,620
 

106
00:07:02,620 --> 00:07:09,430
そして、もし私たちが帰ってきたら、私たちはこれらの3つの列を持っていてもイメージが巨大であるという問題があります。

107
00:07:09,430 --> 00:07:10,310
 

108
00:07:10,360 --> 00:07:14,010
私たちのイメージは縮小していない私たちのコラムの中にとどまっていません。

109
00:07:14,010 --> 00:07:19,010
これを修正するために私たちが何をするかは、ブートストラップを少し追加することでわかります。

110
00:07:19,030 --> 00:07:24,670
私はまだあなたの周りにこの素敵な小さな境界を作成することを示していない、それはサムネイルと呼ばれています。

111
00:07:24,700 --> 00:07:29,520
私たちがする必要があるのは、サムネイルと等しいクラスのdivを作成し、その中に置くイメージが列内に収まるように縮小されることだけです。

112
00:07:29,530 --> 00:07:33,250
 

113
00:07:33,250 --> 00:07:37,090
そして、それはまた、私がかなりいいと思うここでこの小さな国境を取得します。

114
00:07:37,090 --> 00:07:43,720
 

115
00:07:43,720 --> 00:07:52,600
そうするためには、実際に私たちが持っているものをひとつのイメージに戻して、divクラスをサムネイルと同じように追加して適切に処理することにします。

116
00:07:52,930 --> 00:07:57,880
そして、イメージの周りを包み込み、保存します。

117
00:07:57,880 --> 00:08:00,350
今私たちはリフレッシュします。

118
00:08:01,150 --> 00:08:06,470
グリッド内の適切なスペースを占める単一のイメージが得られるかどうかがわかります。

119
00:08:06,730 --> 00:08:11,710
これはコラムであり、その周りに少しの境界線があり、イメージは偉大ではない巨大ではありません。

120
00:08:12,700 --> 00:08:15,980
だから我々はこれを複製する場合、それが動作することを確認しましょう。

121
00:08:16,060 --> 00:08:22,430
これは1回のイメージで3回複製して、何が更新されるのかを見てみましょう。

122
00:08:22,780 --> 00:08:23,610
そしてそこに行く。

123
00:08:23,710 --> 00:08:25,380
我々は3つの画像を持っています。

124
00:08:25,380 --> 00:08:27,290
私は先に進み、さらに6つを追加します。

125
00:08:27,360 --> 00:08:29,790
だから私たちはここでやっているように9つの合計を持っている。

126
00:08:30,490 --> 00:08:32,830
実際には別々の行を追加する必要はありません。

127
00:08:33,040 --> 00:08:35,110
それらをすべて同じ行に置くことができます。

128
00:08:35,200 --> 00:08:40,420
それで、私たちがこれまでに持っていた3つのすべてを時代に回して保存してください。

129
00:08:40,480 --> 00:08:42,730
それは私たちに9つのイメージを与えます。

130
00:08:42,730 --> 00:08:46,950
私がリフレッシュすると、自動的に次の行に折り返されます。

131
00:08:47,230 --> 00:08:52,390
だから、私たちはただ一つの行を持って、それらの列にあなたが医学的に知っていることを知っていなければなりません。

132
00:08:52,480 --> 00:08:57,820
それぞれの画像を4単位にしたい場合は、1行に3つの画像が必要な場合は、3行の画像が必要です。

133
00:08:57,820 --> 00:08:58,720
 

134
00:08:58,780 --> 00:09:02,150
私は戻って、ビデオの終わりにあなたのエルフのすべてのこれらのイメージを変更します。

135
00:09:02,160 --> 00:09:03,600
私はあなたにそれを見させたくありません。

136
00:09:03,630 --> 00:09:08,580
コピーして貼り付けるのはとても面白いですが、このグリッドの残りの部分に集中しましょう。

137
00:09:08,580 --> 00:09:16,360
ヒット・メディアがヒット・メディアになるとすぐに、そのイメージを1つのイメージに移動すると、私たちが探しているものは、その中断ポイントに2つのイメージがあります。

138
00:09:16,360 --> 00:09:21,420
 

139
00:09:21,700 --> 00:09:27,940
そしてそこにそこにある中間ブレークポイントの後に私達は小さいヒットし、私達はまだ2にとどまりたいと思う。

140
00:09:28,750 --> 00:09:34,690
したがって、私たちの問題を修正するには、大きなブレークポイントまたは中断ブレークポイントで直ちに1つに移動し、小さなブレークポイントまたは1つの小さなブレークポイントを1にします。

141
00:09:35,110 --> 00:09:39,310
 

142
00:09:39,460 --> 00:09:48,430
私たちはここに戻り、あなたが選択して知っているこれらのすべてを変更し、コマンドdを押すと、それらを大きく呼び出すすべてのインスタンスを選択します。そして、左または右の矢印を押してカーソルを移動します。

143
00:09:48,880 --> 00:09:53,970
 

144
00:09:53,990 --> 00:09:55,840
今すぐ一度に編集することができます。

145
00:09:56,020 --> 00:10:04,240
そして私がしたいことは、私たちがペローになりたいと思って働くので、私は6列の列を追加することができました。

146
00:10:04,410 --> 00:10:10,690
私が戻ってリフレッシュすると、3行に1つずつ滞在してから中央のブレークポイントに到達し、2に移動します。

147
00:10:10,720 --> 00:10:11,920
 

148
00:10:12,280 --> 00:10:20,820
しかし、それから私は小さく打ちました、そして、私たちが小さく打つと、それは1と私たちに飛びます。

149
00:10:20,830 --> 00:10:31,830
だから、列の中の6を行うのではなく、小さな列6を行い、このバージョンをもう一度リフレッシュすることができます。

150
00:10:31,890 --> 00:10:33,390
 

151
00:10:33,730 --> 00:10:34,680
我々は媒体を打つ。

152
00:10:34,680 --> 00:10:35,590
私たちは2つに行きます。

153
00:10:35,800 --> 00:10:36,750
我々は小さなヒット。

154
00:10:36,760 --> 00:10:43,530
私たちは2で滞在し、それから私たちは余分な小さなものに行き、私たちは行ごとに1 1画像にあります。

155
00:10:43,810 --> 00:10:44,620
完璧。

156
00:10:44,910 --> 00:10:49,060
だからこそ、私たちはグリッドのためにやらなければならないことがあります。ここではほとんどの機能が完了しました。

157
00:10:49,170 --> 00:10:51,050
非常に速くそれを稼働させること。

158
00:10:51,220 --> 00:10:55,570
今注目したいのは、いくつかの色やアイコンです。

159
00:10:55,870 --> 00:10:58,890
ブートストラップを使ってアイコンを追加する方法を紹介します。

160
00:10:59,080 --> 00:11:06,180
あなたがコンポーネントに行くとブートストラップが得られます。これらのグリフアイコンが上に表示され、そこからたくさんのものを選ぶことができます。

161
00:11:06,180 --> 00:11:07,670
 

162
00:11:08,320 --> 00:11:11,840
そして私たちは私たちが使いたいものと私が使っているものを見つけます。

163
00:11:12,100 --> 00:11:14,710
私はそれがカメラだと思うだけの検索をします。

164
00:11:14,710 --> 00:11:17,920
このカメラはここにあり、私はそのカメラを使用していません。

165
00:11:18,040 --> 00:11:19,310
それはやや異なっている。

166
00:11:19,330 --> 00:11:23,080
私が使っているのはもっとレトロなカメラなので、それをどのように追加するのかをお見せしましょう。

167
00:11:23,080 --> 00:11:28,220
実際にはブートストラップの一部ではありませんが、ブートストラップに付属の通常のカメラから始めましょう。

168
00:11:28,810 --> 00:11:32,040
だから私たちはClifford Kahnと書いて、connのダッシュカメラに行く。

169
00:11:32,160 --> 00:11:38,230
さらに下にスクロールすると、クラスを使用してConが等しいスパンを作成した後、グリフアイコンの名前をダッシュ​​することができるスパンを作成する方法が説明されています。

170
00:11:38,230 --> 00:11:43,450
 

171
00:11:43,480 --> 00:11:49,600
 

172
00:11:49,600 --> 00:11:58,200
だからこのスパンをコピーしてみましょう.H-1の中でそれをやってみましょう.H-1の冒頭に置いて、すぐにA-Konダッシュカメラを望んで、保存してリフレッシュします。

173
00:11:58,600 --> 00:12:01,060
そしてちょうどそれのようにあなたはそこにカメラを得ることができます。

174
00:12:01,410 --> 00:12:07,350
私たちが宇宙にいたいなら、それをパディングで行うこともできるし、ちょうどそこにスペースを追加することもできます。

175
00:12:08,260 --> 00:12:14,590
そして、私たちはnav barとまったく同じことをすることができるスペースを得て、私はPhotoと呼ばれるものを使ってここで二重チェックを行った。

176
00:12:15,050 --> 00:12:16,970
 

177
00:12:16,980 --> 00:12:22,780
このページで写真の画像を検索することができます。

178
00:12:22,890 --> 00:12:24,080
そこにそれがある。

179
00:12:24,260 --> 00:12:26,890
それは、絵を打ち消すことができれば行くことができます。

180
00:12:27,730 --> 00:12:32,890
そこでここでnavバーブランドに行って、そのスパンに貼り付けます。

181
00:12:33,120 --> 00:12:41,420
そして、スパンの中で、クラスは画像をクリックしなければなりません。そしてそこにスペースを追加します。

182
00:12:41,460 --> 00:12:45,880
我々は私たちのサイトに戻って新鮮で、我々は今そこに少しの画像を持っています。

183
00:12:46,360 --> 00:12:47,930
そしてカメラも持っています。

184
00:12:48,150 --> 00:12:54,570
次に、ナビゲーションバーに取り掛かりましょう。まずは上部に固定して、今すぐ見ることができます。

185
00:12:54,790 --> 00:12:56,470
それは私たちのスクロールを昼寝する。

186
00:12:56,950 --> 00:12:59,210
しかし、それはそこにとどまっています。

187
00:12:59,640 --> 00:13:04,460
これを行うには、NAVバーに追加する必要がある単一のクラスです。

188
00:13:04,480 --> 00:13:11,800
だからここでは、nav barダッシュをダッシュ​​トップに固定して保存します。

189
00:13:12,120 --> 00:13:16,570
私たちが新鮮ならば、それはトップに固定されていることがわかります。

190
00:13:16,570 --> 00:13:23,080
1つの小さな問題があります。これは、コンテンツが少し遅れているため、Jumbotronの上にその通常のスペーシングがあるようにしたいということです。

191
00:13:23,230 --> 00:13:25,800
 

192
00:13:25,810 --> 00:13:32,770
私たちがする必要があるのは、私たちの身体に詰め物を少し加えて、70ピクセルになることです。

193
00:13:32,770 --> 00:13:37,720
ブートストラップのドキュメントは、70ピクセルのパディングを忘れてしまった場合、それが現在の4ピクセルの幅であることを忘れてしまったことを伝えます。

194
00:13:37,710 --> 00:13:39,320
 

195
00:13:39,490 --> 00:13:47,250
そこでここではスタイルシートを作成してギャラリーDotsie

196
00:13:48,120 --> 00:13:58,300
SSと呼んで選択したボディパッディングの最上部の70ピクセルにして、それをGallery

197
00:13:58,410 --> 00:14:01,850
CSというスタイルシートにリンクして追加する必要がありますS.

198
00:14:01,920 --> 00:14:03,760
それが機能していることを確認しましょう。

199
00:14:03,790 --> 00:14:04,330
そこに行く。

200
00:14:04,360 --> 00:14:10,860
私たちはスペーシングバックを持っており、NFRはあなたが完璧に見えるようにトップに固定されています