1
00:00:00,750 --> 00:00:06,120
&nbsp;

2
00:00:06,120 --> 00:00:12,290
このレッスンをもう一度覚えておきますが、ブートストラップの中で最も重要で広く使われているコンポーネントの1つをNFRに表示して、実際にBoucekドットコムを入手することができます。

3
00:00:12,450 --> 00:00:15,980
彼らはここに十分な棒成分を使っています。

4
00:00:16,200 --> 00:00:21,900
また、Yelpキャンプアプリケーションとナビゲーションバーのサイズを変更する際にも使用します。

5
00:00:21,900 --> 00:00:28,980
それがどれほど反応しているかを確認してから、TABを押すと直ちに通知し、私たちはこのサイズのハンバーガーを手に入れます。

6
00:00:28,980 --> 00:00:30,700
&nbsp;

7
00:00:30,720 --> 00:00:33,020
そこで、このレッスンではすべてのことに取り組んでいきます。

8
00:00:33,180 --> 00:00:34,890
しかし、我々はより簡単に始めるつもりです。

9
00:00:34,890 --> 00:00:42,480
まず最初にする必要があるのは、コンポーネントに行き、nav

10
00:00:42,480 --> 00:00:46,290
barに行くことです。かなり前に行く前に、かなりのコードを書いているので、新しいファイルを作成しました。

11
00:00:46,380 --> 00:00:48,150
古いものは渋滞していた。

12
00:00:48,150 --> 00:00:50,620
私はそれをナフと呼んでいますBar H T M L.

13
00:00:50,820 --> 00:00:56,030
それらの中にはブートストラップへのリンクがあり、ここでタイトルを変更しません。

14
00:00:56,630 --> 00:01:00,980
私はちょうどそれをブートストラップのNav Barと呼ぶでしょう。

15
00:01:01,350 --> 00:01:02,910
ちょうどそれのように。

16
00:01:02,910 --> 00:01:07,580
さて、ドキュメントに行き、デフォルトのナビゲーションバーを見てみましょう。

17
00:01:08,220 --> 00:01:13,460
ここでは、ブランドリンクを持つことができる重要な機能のすべてを紹介しています。

18
00:01:13,560 --> 00:01:15,800
私たちはメニューにドロップできる他のリンクを持つことができます。

19
00:01:15,930 --> 00:01:20,940
私たちは、ナビゲーションバーのフォームとボタンを持つことができます。私たちは、左側にある右側のものにあるものを持つことができます。

20
00:01:20,940 --> 00:01:22,010
&nbsp;

21
00:01:22,020 --> 00:01:23,720
これは本当にすべてを展示しています。

22
00:01:23,790 --> 00:01:30,330
それはブートストラップナフバーのキッチンシンクです。その結果、マークアップは少し長くなります。

23
00:01:30,390 --> 00:01:33,530
このビデオの終わりまでに、これらのすべての作品と一緒に作業します。

24
00:01:33,540 --> 00:01:37,790
しかし、私はより簡単に始めたいと思います。まず番号を作る最も簡単な方法を紹介します。

25
00:01:38,040 --> 00:01:46,470
だから、私たちはnav要素を作る必要があり、そのNAV要素にはnav barとnav

26
00:01:46,470 --> 00:01:51,550
barが必要な2つのクラスが必要です。そして、Daschのデフォルトで保存を開始できます。

27
00:01:51,550 --> 00:01:54,920
それではブラウザのファイルを見てみましょう。

28
00:01:55,200 --> 00:02:00,690
私はそれが横断してスクリーンキャストが十分にあることを願っていることがわかります。バーが非常に暗いバーが上を横切っているので、実際にNFバーを初期化する方法です。

29
00:02:00,690 --> 00:02:04,860
&nbsp;

30
00:02:04,860 --> 00:02:06,980
さあ、いくつかのコンテンツを埋めてみましょう。

31
00:02:07,050 --> 00:02:11,640
まず最初に、このブランドをどのように追加できるかを見ていきます。

32
00:02:11,790 --> 00:02:13,180
基本的にあなたの会社名。

33
00:02:13,230 --> 00:02:14,320
ほとんどの場合。

34
00:02:14,900 --> 00:02:20,830
それはナビゲーションバーのヘッダーを使用しており、NFRヘッダーの内側にはNavバーブランドを使用しています。

35
00:02:20,850 --> 00:02:32,160
だからdivクラスがnav barのダッシュヘッダと同じであることを追加してみましょう。そこにアンカータグであるnav

36
00:02:32,160 --> 00:02:35,910
barブランドを追加します。

37
00:02:35,910 --> 00:02:39,440
通常、その会社名をクリックすると、ホームページに戻ります。

38
00:02:39,660 --> 00:02:44,760
だからここでアンカータグをして、ソープスと同じ交通量から始めて、どこにでも連れて行くわけではありません。

39
00:02:44,760 --> 00:02:45,840
&nbsp;

40
00:02:45,870 --> 00:02:52,890
クラスはnav bar dashブランドと同等で、会社名を作るだけです。

41
00:02:52,890 --> 00:02:57,170
私は私の周りのコーヒーカップを持っているので、コーヒーと一緒に行こうかどうか見てみましょう。

42
00:02:57,270 --> 00:03:02,210
しかし、実際にそれを真のスタートアップにするには、スペルを少し変更する必要があります。

43
00:03:02,400 --> 00:03:03,180
OKアレックス。

44
00:03:03,180 --> 00:03:03,990
私のために十分に良い。

45
00:03:04,020 --> 00:03:05,350
Kとコーヒー

46
00:03:05,760 --> 00:03:07,420
見てみましょう。

47
00:03:07,590 --> 00:03:11,830
リフレッシュし、NAVバーブランドをリンクにしました。

48
00:03:11,940 --> 00:03:12,880
私はそれをクリックします。

49
00:03:13,010 --> 00:03:17,250
私は今どこにでもいませんが、最終的に私たちのアプリケーションはそれを持っているので、会社名をクリックすると次のホームページに戻ります。

50
00:03:17,250 --> 00:03:20,940
&nbsp;

51
00:03:20,940 --> 00:03:24,480
連絡先のような他のリンクを追加できるかどうかを見てみましょう。

52
00:03:24,510 --> 00:03:25,660
登録するにはサインアップしてください。

53
00:03:25,770 --> 00:03:27,490
バーのすべての共通リンク。

54
00:03:27,660 --> 00:03:31,190
ページリンクについては、ここで追加してみましょう。

55
00:03:31,500 --> 00:03:37,620
だから私たちは元に戻って、次にこのdivの別のdivを作るためのnav

56
00:03:37,620 --> 00:03:41,600
barヘッダーの外側で、少なくともNAVバーの左側にすべてのコンテンツを集めます。

57
00:03:41,760 --> 00:03:46,410
ヘッダーがあり、コンテンツがあるとしたら、右側に何かが必要な場合は別のクラスを持つ別のdivがあります。

58
00:03:46,500 --> 00:03:48,960
&nbsp;

59
00:03:48,960 --> 00:03:50,010
だからここのクラス。

60
00:03:50,070 --> 00:03:56,730
実際には2つのnavとnav barダッシュnavが必要です。

61
00:03:56,850 --> 00:04:00,170
彼らのnav bar dash navの命名について私に聞かないでください。

62
00:04:00,210 --> 00:04:05,040
ブートストラップの大きな批判の1つは、少し醜いことであり、時にはあまり意味がないということです。

63
00:04:05,040 --> 00:04:05,940
&nbsp;

64
00:04:06,030 --> 00:04:12,030
また、セマンティックUIと呼ばれる場合は、ブートストラップのセマンティックな無意味さに対応して作成されたCSSAフレームワークが実際にあります。

65
00:04:12,030 --> 00:04:14,630
&nbsp;

66
00:04:14,910 --> 00:04:16,660
それは私が本当に楽しむものです。

67
00:04:16,710 --> 00:04:18,070
そして私は教えを議論しました。

68
00:04:18,420 --> 00:04:22,190
しかし、結局のところ、それほど広く使われていないだけでなく、偉大なチュートリアルはまだありません。

69
00:04:22,200 --> 00:04:23,550
だから私たちのdiffにここに戻る。

70
00:04:23,590 --> 00:04:27,600
クラスnav nav navとクラスnavの両方。

71
00:04:27,690 --> 00:04:34,710
そして、私たちがこのアンカータグを持っているだけでリンクしたいならば、私たちがこのNFR上で必要とする各アイテムについて、同盟国を追加し、次にYの内部に追加する必要があります。

72
00:04:34,710 --> 00:04:36,850
&nbsp;

73
00:04:37,050 --> 00:04:38,810
だから、これはどこにも行きません。

74
00:04:38,850 --> 00:04:42,280
再度これはAboutページになります。

75
00:04:42,500 --> 00:04:53,550
私が戻ってリフレッシュすると、もう一度save save goに連絡してみましょう。

76
00:04:54,570 --> 00:04:58,950
今、2つのリンクがあります。ページの右側に何かを追加しましょう。

77
00:04:59,160 --> 00:05:05,340
登録のために2つのリンクを追加してください。もう1つは、バーの右側にログインするためのリンクです。

78
00:05:06,840 --> 00:05:07,630
&nbsp;

79
00:05:07,690 --> 00:05:13,370
&nbsp;

80
00:05:13,630 --> 00:05:19,150
ここではnotherコンテナが必要です。実際にdivを使用する代わりに、それを使用するのがより一般的です。同じ方法で動作しますが、divでうまく動作するにもかかわらず、井戸の代わりに味方をしたいULの代わりになるという感覚はほとんどありません。

81
00:05:19,140 --> 00:05:23,570
&nbsp;

82
00:05:23,620 --> 00:05:32,010
それで、別のULを追加して、これをNavにします。 nav barダッシュnavとnav barダッシュ。

83
00:05:32,100 --> 00:05:32,700
&nbsp;

84
00:05:32,760 --> 00:05:33,570
右。

85
00:05:33,660 --> 00:05:38,280
そして、クラスを有効にしない場合は、それを正しく綴るようにする必要があります。

86
00:05:38,280 --> 00:05:42,960
これが行うことは、そのnav barの右側の新しいコンテンツグループになります。

87
00:05:43,120 --> 00:05:44,540
そして今、私たちはそれを埋める必要があります。

88
00:05:44,550 --> 00:05:47,750
そこで、エッジワイドに2つのリンクを追加します。

89
00:05:47,820 --> 00:05:55,510
最初のものはどこにも行きませんし、サインアップをしてからもう一度ログインするだけです。

90
00:05:55,770 --> 00:05:56,550
&nbsp;

91
00:05:56,940 --> 00:05:58,080
見てみましょう。

92
00:05:58,290 --> 00:06:01,630
ページを更新すると、右側にコンテンツが表示されます。

93
00:06:01,650 --> 00:06:07,710
しかし、それはちょうど端に逆らって、我々が主なコンテンツにいくらかのスペースを追加するために以前コンテナを使用するのと同じように、十分なバーにコンテナを追加することを修正することです。

94
00:06:07,710 --> 00:06:12,220
&nbsp;

95
00:06:12,220 --> 00:06:14,190
ナビゲーションバーの代わりに1つを追加することができます。

96
00:06:14,400 --> 00:06:17,730
だから私は容器の代わりにネフバーにすべてを置く。

97
00:06:17,740 --> 00:06:20,800
クラスはコンテナと同じです。

98
00:06:21,060 --> 00:06:22,430
これを下に移動してください。

99
00:06:22,560 --> 00:06:26,180
すべてが正しくインデントされていることを確認してください。

100
00:06:26,190 --> 00:06:27,770
そこに行く。

101
00:06:27,780 --> 00:06:30,930
それを試してみましょう。

102
00:06:30,930 --> 00:06:31,430
ニース。

103
00:06:31,440 --> 00:06:33,910
だから今はすべてがうまく中心に置かれています。

104
00:06:34,140 --> 00:06:41,940
あなたがnavの外にコンテナを追加して、それらがnav bar全体を内側に置くと、私はあなたを見せます。

105
00:06:42,880 --> 00:06:43,650
まあ何が起こるか見る。

106
00:06:43,660 --> 00:06:49,950
今私が十分な新鮮なバーであれば、私は実際には切り離され、通りの向こう側に行くだけです。

107
00:06:50,460 --> 00:06:53,460
だから、コンテナはそれを私たちが内部に置いたものにする。

108
00:06:53,670 --> 00:06:59,640
そして、この場合、私たちはnav

109
00:06:59,640 --> 00:07:03,820
barの中にコンテナを置いて、実際のnaffパーツを自分自身に束縛していないようにしますが、内部の内容を制限しています。

110
00:07:04,440 --> 00:07:04,950
OK。

111
00:07:05,060 --> 00:07:11,250
コンテナにはヘタがあり、左に物があり、右にいくらかの内容があるので、ここで見ることができます。

112
00:07:11,990 --> 00:07:13,060
&nbsp;

113
00:07:13,290 --> 00:07:20,050
&nbsp;

114
00:07:20,040 --> 00:07:28,850
さて、ちょっとステップアップして、この基本的なナビゲーションバーか、ドキュメントにあるデフォルトのナビゲーションバーを使って、この全体をコピーして、ちょうどそれをすぐ下に置いてみましょう。

115
00:07:28,900 --> 00:07:29,670
&nbsp;

116
00:07:29,670 --> 00:07:33,010
それをもっと明確にするためのコメントがたくさんあります。

117
00:07:33,250 --> 00:07:35,510
デフォルトのナビゲーションバー。

118
00:07:36,060 --> 00:07:40,280
それをリフレッシュしてみましょう。

119
00:07:40,560 --> 00:07:44,580
だからここにこのナビゲーションバーがあり、私が強調したいことがいくつかあります。

120
00:07:44,580 --> 00:07:48,690
1つは、メニューにドロップしたが、実際には機能しないということです。

121
00:07:48,900 --> 00:07:53,300
また、ウィンドウのサイズを変更すると、ここでハンバーガーメニューが表示されます。

122
00:07:53,550 --> 00:07:54,740
それらのリンクは遠ざかります。

123
00:07:54,750 --> 00:07:58,630
フォームは消え、ここをクリックする必要があります。

124
00:07:58,830 --> 00:08:00,480
しかし、それはどちらもうまくいかない。

125
00:08:00,960 --> 00:08:05,890
ですから、それを動作させることから始めましょう。次に、これらのさまざまな部分について、それらを動作させるために何をするかについて話します。

126
00:08:05,880 --> 00:08:07,570
&nbsp;

127
00:08:07,590 --> 00:08:10,550
私たちは、ブートストラップのjavascriptファイルを含める必要があります。

128
00:08:10,830 --> 00:08:15,660
したがって、ブートストラップのドキュメントに戻ると、ダウンロードをクリックします。

129
00:08:15,780 --> 00:08:19,800
私たちが必要とするjavascriptファイルもここにあります。

130
00:08:19,800 --> 00:08:24,460
私はCdnバージョンを使用しますが、ダウンロードしたフォルダの中にも入っています。

131
00:08:24,510 --> 00:08:25,700
それはちょうどブートストラップと呼ばれています。

132
00:08:25,810 --> 00:08:26,220
はい。

133
00:08:26,250 --> 00:08:29,890
または、最小化されたバージョンがMenciusを起動しました。

134
00:08:30,420 --> 00:08:36,210
それを加えてみましょう。体の一番下に置いて保存します。

135
00:08:36,210 --> 00:08:38,280
私はJavaScriptについて話していないことを知っています。

136
00:08:38,380 --> 00:08:42,860
あなたはスクリプトが何であるかわからないし、ここでは何のソースも問題ではない。

137
00:08:42,900 --> 00:08:44,710
ブートストラップにプラグインするだけです。

138
00:08:44,910 --> 00:08:46,550
そして、今私たちのリフレッシュ。

139
00:08:46,710 --> 00:08:52,590
私がここに示した小さな問題を解くことができますか？ブートストラップのjavascriptにはクエリが必要です。

140
00:08:52,700 --> 00:08:53,470
&nbsp;

141
00:08:53,790 --> 00:08:56,180
これが何で、どのようにこのメッセージになったのか心配しないでください。

142
00:08:56,250 --> 00:08:59,970
しかし、私はちょうどそれをあなたに示して、実際のメッセージを見るようにしたいと思います。

143
00:08:59,970 --> 00:09:03,240
私たちはまだ話していないJの問い合わせを必要とする必要があります。

144
00:09:03,580 --> 00:09:05,360
しかし、行くと取得するのは簡単です。

145
00:09:05,400 --> 00:09:07,140
JavaScriptを書く必要はありません。

146
00:09:07,170 --> 00:09:08,830
あなたはJavaScriptを知る必要はありません。

147
00:09:08,830 --> 00:09:10,180
それを含めるだけです。

148
00:09:10,230 --> 00:09:18,200
だから、私たちがする必要があることは、Jayのcomとその下にある最新のバージョンを選択してこのURLをコピーする必要があるコード上のJayクエリーCDNを検索することだけです。

149
00:09:18,200 --> 00:09:23,890
&nbsp;

150
00:09:23,910 --> 00:09:30,150
これはQuerreyファイルです。ここから戻ってきます。

151
00:09:30,150 --> 00:09:32,560
これらのスクリプトタグの1つを追加します。

152
00:09:32,640 --> 00:09:34,410
基本的にこの正確なコードをコピーします。

153
00:09:34,410 --> 00:09:40,670
実際には、その正確な行を複製し、このURLを変更してjeyクエリにするのが簡単になるようにします。

154
00:09:40,680 --> 00:09:42,030
&nbsp;

155
00:09:42,610 --> 00:09:44,530
他のすべてが失敗した場合は、これを入力するだけです。

156
00:09:44,560 --> 00:09:51,220
あなたが私であるならそれは悪くないが、私はJay queery

157
00:09:51,210 --> 00:09:56,290
CDNを検索してこれを取得して保存し、これはクエリに依存しているのでjavascriptファイルをブートストラップする前に来る必要がある。

158
00:09:56,560 --> 00:10:00,370
だからもう一度、Jayのクエリーがどのように機能するかについて、あまり心配しないでください。

159
00:10:00,450 --> 00:10:02,150
それは今から数分後に起こっている。

160
00:10:02,430 --> 00:10:06,550
しかし、ブートストラップを最大限に活用するには、特にナビゲーションバーとドロップダウンメニューが必要です。

161
00:10:06,750 --> 00:10:13,210
私たちはこれを使用しているときはいつでもこの2つのラインを持つ必要がありますので、今戻ってリフレッシュします。

162
00:10:13,230 --> 00:10:18,850
まず最初に、ドロップダウンメニューを持っているのがわかるように、今メニューがドロップされています。

163
00:10:18,880 --> 00:10:24,430
私たちはこのビデオでそれについて話すつもりはありませんが、サイズを変更するとそのハンバーガーを手に入れます。

164
00:10:25,050 --> 00:10:26,980
ハンバーガーは、クリックすると動作します。

165
00:10:26,980 --> 00:10:29,480
その隠された素材をトグルします。

166
00:10:29,560 --> 00:10:36,850
だからここには、この小さなブレークポイントがあります。このコンテンツはすべて隠れていて、私たちが見ているのはヘッダとそのボタンだけです。

167
00:10:36,880 --> 00:10:43,280
&nbsp;

168
00:10:43,380 --> 00:10:48,870
そして、ボタンをクリックすると、それ以前に隠されたコンテンツがすべて再表示されます。

169
00:10:48,880 --> 00:10:49,120
&nbsp;

170
00:10:49,120 --> 00:10:50,650
今私たちのために。

171
00:10:50,950 --> 00:10:55,930
&nbsp;

172
00:10:55,930 --> 00:11:01,960
しかし、私たちはこれらの4つのリンクを非表示にして、サイズを変更するとこれらの4つのリンクが隠されていて本当に素早く表示されるように、あまり複雑ではないバージョンを実行します。

173
00:11:02,250 --> 00:11:07,830
それを行うには、このデフォルトバージョンでどのように達成されるのかを見て始めてください。この巨大なnav

174
00:11:07,840 --> 00:11:09,830
barのモンスター。

175
00:11:10,380 --> 00:11:13,650
ここで重要な行を指摘します。

176
00:11:13,760 --> 00:11:22,090
barの崩壊私たちがこのdivの中に置いたものは、Mobile sizeを押したときに折りたたまれ、私たちのためにボタンを作ることはありません。

177
00:11:22,090 --> 00:11:24,850
Divクラスの崩壊nav

178
00:11:24,850 --> 00:11:30,040
それは隠れて見えなくなってしまった時のトグルをやり直すことはありませんが、そのタブレットとモバイルサイズに当たったときに私たちがその中に入れた内容を隠すことになります。

179
00:11:30,040 --> 00:11:33,470
&nbsp;

180
00:11:33,650 --> 00:11:38,500
だから私たちはこれをコピーして、私たちが隠したいコンテンツの周りにそれを囲むだけでいいので、ここでこれを隠したいと思っています。

181
00:11:38,500 --> 00:11:40,320
&nbsp;

182
00:11:40,330 --> 00:11:49,980
これらの2つのJuelzので、我々は小さな画面サイズを打つときに隠したい4つのリンク。

183
00:11:50,440 --> 00:11:56,800
ですから、終了タグを追加して保存してください。ここには行があり、これは重要です。

184
00:11:56,830 --> 00:11:57,820
&nbsp;

185
00:11:57,850 --> 00:12:01,230
まだ私たちに影響を与えることはありませんが、リフレッシュしても意味がありません。

186
00:12:01,690 --> 00:12:02,160
わかるでしょ。

187
00:12:02,170 --> 00:12:09,790
ここでサイズを変更すると、崩壊部内のすべてのコンテンツが消えてしまうところがあります。

188
00:12:09,790 --> 00:12:10,650
&nbsp;

189
00:12:10,680 --> 00:12:11,650
今は再現されません。

190
00:12:11,640 --> 00:12:13,180
私たちはこのハンバーガーを手に入れません。

191
00:12:13,330 --> 00:12:16,940
私たちは何かをクリックすることはありませんが、それは崩壊してしまいました。

192
00:12:17,050 --> 00:12:24,580
これはdivクラスの折りたたみnav bar collapseをここに追加したためです。

193
00:12:24,630 --> 00:12:29,780
次はハンバーガーを追加するだけです。それはかなりのコードです。

194
00:12:29,780 --> 00:12:33,010
残念ながら、それは自分でやる必要がある場合よりずっと優れています。

195
00:12:33,280 --> 00:12:37,220
しかし、ハンバーガーは実際にここのすべてです。

196
00:12:37,800 --> 00:12:48,660
だから私はそれをコピーして、昼寝やヘッターの中にコーヒーを入れる前に貼り付けます。

197
00:12:48,970 --> 00:12:52,420
そして、私たちは私がそれが何をするかに戻るだろう節約します。

198
00:12:53,320 --> 00:12:54,680
ちょっとリフレッシュしましょう。

199
00:12:55,140 --> 00:12:57,910
そして今私がサイズを変更すると、ハンバーガーを手に入れます。

200
00:12:58,120 --> 00:13:00,280
そこに行く。

201
00:13:00,310 --> 00:13:03,240
さて、それがどのように機能するかについて少し説明しましょう。

202
00:13:03,250 --> 00:13:09,700
そこでボタンがあり、そのボタンの中に3つのスパンがあり、それぞれがこれらのバーの1つを作る責任があります。

203
00:13:09,700 --> 00:13:13,000
&nbsp;

204
00:13:13,210 --> 00:13:18,510
だから、私たちが見ているイメージではなく、実際にこの小さなスパンを作っている各チームがその狭いバーにハンバーガーを作るようになっています。

205
00:13:18,670 --> 00:13:21,780
&nbsp;

206
00:13:22,030 --> 00:13:26,530
&nbsp;

207
00:13:26,950 --> 00:13:34,310
そして、私たちがそれをクリックしたときにコンテンツを表示し隠す限り、このデータターゲット属性と、これが私たちのケースB-Sの例で設定されているものを持っているということです。

208
00:13:34,310 --> 00:13:41,700
今私たちの崩壊のために私たちのクラブのためのブートストラップの一例ネットとそうそれをはいに変更しましょう。

209
00:13:42,180 --> 00:13:44,330
Nav。 そのようなデモ。

210
00:13:44,470 --> 00:13:48,880
次に、実際に折りたたみたいコンテンツのIDを表示して非表示にする必要があります。

211
00:13:48,880 --> 00:13:49,810
&nbsp;

212
00:13:49,870 --> 00:13:57,310
だから私はvs navデモと一致するように変更します。

213
00:13:57,340 --> 00:13:59,710
重要な違いがあることに注目してください。

214
00:13:59,710 --> 00:14:05,860
私たちはArctic Thorに追加していません。だから、Cで何かを選択するとCSIのようになります.Cを使ってOcta

215
00:14:05,860 --> 00:14:11,420
Thorpeを使ってIDをターゲットにする必要があるので、IDだけをテキストの名前にします。

216
00:14:11,440 --> 00:14:18,120
ここでデモを行うと、それをThorpeに追加してリフレッシュを保存します。

217
00:14:18,120 --> 00:14:24,600
今私はサイズを変更すると、私たちはハンバーガーを取得し、彼らはそれをクリックし、それは表示と非表示を切り替えるために動作します。

218
00:14:26,250 --> 00:14:27,040
すばらしいです。

219
00:14:27,070 --> 00:14:32,400
最後にあなたに示すのは、この崩壊の外に何かを動かす場合です。

220
00:14:32,470 --> 00:14:35,710
だからここでこれらのリンクを取ってみましょう。

221
00:14:36,070 --> 00:14:44,100
&nbsp;

222
00:14:44,110 --> 00:14:53,310
&nbsp;

223
00:14:53,320 --> 00:14:55,710
アカウントやaboutと連絡先を入力して、崩壊部の外に移動しただけで、実際に崩壊していないことがわかり、崩壊ではなく他の2つをクリックすると表示されますトグルされます。

224
00:14:55,720 --> 00:15:00,390
今私はこれはいいように見えるわけではありませんが、それはその崩壊部の重要性を示しています。

225
00:15:00,630 --> 00:15:06,480
だから何が起こったのか崩壊の辺り、または私たちの場合には、それへの異なるリンクのために何を持っているのかは、左側または右側の右側にあります。

226
00:15:06,490 --> 00:15:08,160
私たちがその小さなモバイルサイズに達すると、それらはすべて崩壊します。

227
00:15:08,160 --> 00:15:12,070
&nbsp;

228
00:15:12,070 --> 00:15:18,250
そして、それらを再び表示させるには、ここでこのボタンをクリックしてください。そのボタンにはデータターゲット属性があり、それに対応するIDは隠れて表示されます。

229
00:15:18,490 --> 00:15:23,570
そして、それはここでこの考え方になります。

230
00:15:24,010 --> 00:15:25,930
OKなので、マラソンのようなものです。

231
00:15:26,440 --> 00:15:28,230
ブートストラップのナビゲーションバーを作るための多くのもの。

232
00:15:28,270 --> 00:15:30,750
&nbsp;

233
00:15:30,970 --> 00:15:36,940
しかし、ここでも私たちがそこに着いたのは、これを私たちのファイルにまっすぐにコピーし、それを解剖することでした。

234
00:15:36,940 --> 00:15:37,450
&nbsp;

235
00:15:37,540 --> 00:15:42,160
それで、サンプルコードを読んで、私たちが必要とする部分を見つけ出し、そこでそこから移動するだけで十分です。

236
00:15:42,150 --> 00:15:44,080
&nbsp;
