1
00:00:00,250 --> 00:00:03,150
このビデオはキャンプのスタイリングを続けます。

2
00:00:03,360 --> 00:00:08,590
すべての単一ページにナビゲーションバーを追加し、そのナビゲーションバーは今のところ空になります。

3
00:00:08,700 --> 00:00:14,780
しかし、最終的には、ログインやサインアウトのようなボタンがその機能をすべて登録します。

4
00:00:15,030 --> 00:00:19,710
しかしそれまではプレースホルダーのテキストを置くだけで、新しいキャンプグラウンドフォームのスタイルを変更しようとしています。

5
00:00:19,710 --> 00:00:23,510
 

6
00:00:23,580 --> 00:00:28,860
だから、サーバーを起動して、私たちが持っているものを見てみましょう。

7
00:00:28,890 --> 00:00:31,150
ここにリンク先ページがあります

8
00:00:31,680 --> 00:00:36,250
キャンプ場のリストにはキャンプの変更がすべて表示されます。

9
00:00:36,290 --> 00:00:38,180
それはかなり大丈夫に見えます。

10
00:00:38,430 --> 00:00:40,490
私たちはここにナビゲーションバーを置いておきたい。

11
00:00:40,890 --> 00:00:43,370
新しいキャンプ場を追加するのと同じこと。

12
00:00:43,740 --> 00:00:49,290
フォームを中央に配置し、2つの入力を並べて配置するのではなく、2つの入力を重ねて配置します。

13
00:00:49,290 --> 00:00:51,050
 

14
00:00:51,360 --> 00:00:56,400
しかし、私たちはnav barから始め、ちょうどcampgroundテンプレートでそれをやってみましょう。

15
00:00:56,610 --> 00:01:00,990
そこでここに戻り、キャンプグラウンドのテンプレートを開いて始めましょう。

16
00:01:00,990 --> 00:01:08,220
barを追加するのが本当に簡単であるにもかかわらず、それはかなりのマークアップであり、私たちがドロップダウンのすべてのボタンを持っていないときには、私たちはこの長い間、少なくとも始まって​​はいけません。

17
00:01:08,220 --> 00:01:13,440
 

18
00:01:13,440 --> 00:01:19,890
私はブートストラップされたボックスを開くつもりです、そして、私はコンポーネントに移動して、次にnavバーに行きます。そして、ブートストラップが本当にあなたがまだ見ることができるnav

19
00:01:19,890 --> 00:01:22,910
 

20
00:01:22,950 --> 00:01:27,690
私たちは素敵でシンプルなところから始めるつもりですが、それでもまだ覚えておくべきクラスがたくさんあります。

21
00:01:28,140 --> 00:01:32,700
だから、このクラスの何かのようなブートストラップDarcsを引き上げることには間違いなく、あなたは物事を見て恥ずかしいと感じるべきではありません。

22
00:01:32,710 --> 00:01:35,040
 

23
00:01:35,100 --> 00:01:40,320
しかし、特にブートストラップでは、これらのクラスや要素が混乱することがあり、ドキュメントを見なくてもそれを行う方法はありません。

24
00:01:40,320 --> 00:01:42,860
 

25
00:01:42,870 --> 00:01:48,870
OKをクリックして、私のキャンプ場のテンプレートの上部に部屋を作って、Navを定義することから始めます。

26
00:01:48,870 --> 00:01:55,180
これはヘッダーに似ています。

27
00:01:55,320 --> 00:01:59,450
私たちはdivだけでNavをすることができます。 もう少し意味があります。

28
00:01:59,460 --> 00:02:00,870
それは意味論的です。

29
00:02:01,050 --> 00:02:09,580
だから、私はクラスのナビゲーションバーでナビゲーションを行い、次にnav barのダッシュのデフォルトを行います。

30
00:02:09,600 --> 00:02:14,640
さまざまな種類と色がありますが、逆のナビゲーションバーを使用することもできますが、デフォルトのものを使用します。

31
00:02:14,640 --> 00:02:16,240
 

32
00:02:16,410 --> 00:02:25,500
bar dashと等しいクラスのアンカータグを追加しようとしています。

33
00:02:25,590 --> 00:02:33,570
そして、内部はコンテナ流体と等しいクラスのdivを追加することになります。それはちょうど良い埋め込みとそこにいくつかのスペースを作って、次に私たちはnav

34
00:02:36,480 --> 00:02:45,570
bar

35
00:02:45,570 --> 00:02:54,090
headerと等しいクラスの別のdivを追加してから、そのクラスは私たちのヘッダーと同じです。そのような終わりにnav

36
00:02:54,330 --> 00:03:03,870
そして、リンクをスラッシュにするように設定してから、それを閉じてそのようなyelperキャンプを追加します。

37
00:03:03,870 --> 00:03:04,850
 

38
00:03:04,980 --> 00:03:07,750
そして、この単純なマークアップで何が得られるか見てみましょう。

39
00:03:07,920 --> 00:03:14,430
したがって、NAVにはナビゲーションバーヘッダー付きのコンテナがあり、ナビゲーションバーヘッダーにはネフバーブランドのアイテムが1つしかありません。

40
00:03:14,820 --> 00:03:16,730
 

41
00:03:17,010 --> 00:03:18,290
リフレッシュしましょう。

42
00:03:18,780 --> 00:03:24,060
OKをクリックするとナビゲーションバーが表示され、ここにブランドが表示されます。このリンクをクリックすると、そのリンクは気まぐれなリンク先ページに戻ります。

43
00:03:24,060 --> 00:03:27,710
 

44
00:03:28,200 --> 00:03:34,320
ここでいくつかのプレースホルダを追加してログインしてサインアップしてみましょう。

45
00:03:34,320 --> 00:03:40,500
彼らは働かないか、何もしませんが、私たちは良く見えるので、今度は私たちのキャンプに行きましょう。

46
00:03:40,890 --> 00:03:47,710
E. J. テンプレートとして、その後、ナビゲーションバーとコンテナの内側ではなく、Nの内部にはありません。 F. バーヘッター。

47
00:03:47,970 --> 00:03:55,950
別のdivに追加するつもりです。このdivには、それが何をするかを見る崩壊のクラスがあります。

48
00:03:55,950 --> 00:03:56,220
 

49
00:03:56,220 --> 00:04:01,810
そしてちょうどその時、Neph bar Daschはそんなに崩壊します。

50
00:04:01,890 --> 00:04:13,710
そして、内部にはULを追加するつもりです。このULにはnav barダッシュnavのクラスがあります。そして、nav

51
00:04:13,770 --> 00:04:20,430
barダッシュの右側に移動して、右側に移動します。今のところ3つのリンクがあり、それぞれが味方になります。

52
00:04:20,430 --> 00:04:24,520
 

53
00:04:25,170 --> 00:04:32,820
そしてその中には、アリーはアンカータグを持っていて、最初のものにログインするようにします。

54
00:04:32,850 --> 00:04:40,830
そして今のところ、H refは私たちのルートパスに設定されます。なぜなら、まだログインしていないからです。登録についても同じことをします。

55
00:04:40,830 --> 00:04:42,940
 

56
00:04:42,980 --> 00:04:49,540
サインアップをして、そのようにログアウトしましょう。

57
00:04:49,910 --> 00:04:50,680
OK。

58
00:04:51,210 --> 00:04:52,580
だから、これがどのように見えるか見てみましょう。

59
00:04:52,590 --> 00:04:59,550
私たちがリフレッシュして見た目が良くない場合の崩壊の話をする前に、私たちはここでUL上の1つのマイナークラスを見逃していました。

60
00:04:59,550 --> 00:05:02,090
 

61
00:05:02,290 --> 00:05:06,470
私たちは今すぐ追加していないように見えるので、我々はちょうどナビゲーションバーを追加しました。

62
00:05:06,470 --> 00:05:13,680
今私はそれを正しくしたことはありませんでしたが、私たちはnav自体を追加しなかったので、今度は保存し直して、NAVの右側にある3つのリンクと、ここでサイズを変更します。

63
00:05:13,680 --> 00:05:20,430
 

64
00:05:20,430 --> 00:05:25,130
右のところでは、そこが右に倒れていることに注目してください。

65
00:05:25,680 --> 00:05:29,300
そして最終的には小さなハンバーガーのアイコンがあります。

66
00:05:29,340 --> 00:05:32,610
クリックした場所とメニューのように見えます。

67
00:05:33,050 --> 00:05:36,180
今のところ、私たちはそのサイズに達すると、それらを隠すだけです。

68
00:05:36,450 --> 00:05:36,690
OK。

69
00:05:36,690 --> 00:05:42,240
つまり、この1ページにしかないことを除いて、Navバーのために必要なのはこれだけです。

70
00:05:42,240 --> 00:05:45,390
それでは、すべてのページに追加しましょう。

71
00:05:45,390 --> 00:05:50,030
だからそれをコピーするか、それをカットしてヘッダに移動します。

72
00:05:50,460 --> 00:05:52,400
だから頭部または部分的に移動してください。

73
00:05:52,680 --> 00:05:53,790
私はそれを開くだけです。

74
00:05:53,790 --> 00:06:00,130
コマンドラインを使用するC9では、ParshallのスラッシュヘッダIjaw Yesをスラッシュして表示します。

75
00:06:00,570 --> 00:06:03,840
そして、体の一番上のところに追加します。

76
00:06:04,320 --> 00:06:06,080
これを正しくインデントしましょう。

77
00:06:06,570 --> 00:06:09,230
私たちは行くよ。

78
00:06:09,900 --> 00:06:15,840
ヘッダーバーにはヘッダーバーがあり、ヘッダー部分を含むファイルにはナビゲーションバーが表示されますが、サーバーを再起動します。

79
00:06:15,840 --> 00:06:20,550
 

80
00:06:20,850 --> 00:06:25,790
新しいキャンプ場を追加すれば、ここにもそのバーができます。

81
00:06:26,160 --> 00:06:31,270
また、ホームページに行くと十分なバーがあります。

82
00:06:31,530 --> 00:06:32,110
すばらしいです。

83
00:06:32,130 --> 00:06:36,950
ですから、このフォームを少し上手く見せるようにしましょう。

84
00:06:36,990 --> 00:06:40,840
私が以前に言及したように、私はこの形にしたい2つの大きなことがあります。

85
00:06:40,860 --> 00:06:46,470
 

86
00:06:46,950 --> 00:06:52,320
 

87
00:06:52,320 --> 00:06:53,270
最初の1つはページの中央に配置し、もう1つは3つの入力または2つの入力とボタンを画面全体に水平に並べるのではなく、フォームを垂直に積み重ねることです。

88
00:06:53,370 --> 00:06:56,120
あなたはそれらを取って別のものの上にそれらを積み重ねたい。

89
00:06:56,370 --> 00:07:00,820
新しいドットである正しいファイルを開くことから始めましょう。

90
00:07:00,960 --> 00:07:01,510
はい。

91
00:07:01,650 --> 00:07:11,470
だから私たちはC9の意見をスラッシュして、Ejayと私たちがこれまでに持っていた私たちの形を知っています。

92
00:07:11,970 --> 00:07:18,750
簡単に始めて、いくつかのブートストラップクラスをフォームや入力に追加しましょう。それはフォームダッシュコントロールです。

93
00:07:19,020 --> 00:07:20,810
 

94
00:07:21,150 --> 00:07:25,390
そして、両方の入力とボタンの両方でそれが必要です。

95
00:07:25,500 --> 00:07:33,290
BootstrapクラスのPTEN ETNをそのように大きく追加しましょう。

96
00:07:33,570 --> 00:07:39,090
そして、我々はまた、間違いの間にして、それがどのように見えるか見てみましょう。

97
00:07:39,090 --> 00:07:40,920
だからJ.の後のノード

98
00:07:41,030 --> 00:07:42,830
はい、リフレッシュします。

99
00:07:43,300 --> 00:07:49,770
ここではブートストラップのコントロールとブートストラップのボタンを取得していますが、確かに巨大ですが、その必要はありません。

100
00:07:50,100 --> 00:07:51,060
 

101
00:07:51,210 --> 00:07:54,840
この問題を解決するには、私たちができることがいくつかあります。

102
00:07:54,840 --> 00:07:57,900
最初は、すべてをコンテナの中に置くことです。

103
00:07:58,110 --> 00:08:01,520
 

104
00:08:04,680 --> 00:08:09,960
だから私たちはdivクラスのコンテナに入りました。そして、私はこれを底に移動します。

105
00:08:10,930 --> 00:08:13,690
そこに行って、これを正しくインデントしましょう。

106
00:08:13,950 --> 00:08:16,450
非常にマイナーな変更を保存します。

107
00:08:16,530 --> 00:08:19,850
今はいくつかの間隔がありますが、それはまだ大きな形です。

108
00:08:20,220 --> 00:08:23,280
ですから、次はグリッドシステムの使用です。

109
00:08:23,520 --> 00:08:30,710
だから私たちは別のdivに追加し、このクラスはそのような行に等しいクラスを持ちます。

110
00:08:30,720 --> 00:08:33,750
これを取って行にコピーしましょう。

111
00:08:33,780 --> 00:08:36,630
だから、フォーム全体が一列になります。

112
00:08:36,810 --> 00:08:39,220
そして、これもやっています。

113
00:08:39,610 --> 00:08:44,930
OKセーブリフレッシュは大きな違いではありません。

114
00:08:44,970 --> 00:08:51,150
CSSAを使って実際にブートストラップの上に独自のスタイルを書いて、これにマージンを与えて中心に置くことです。

115
00:08:51,150 --> 00:08:52,880
 

116
00:08:52,880 --> 00:08:56,580
ここでは、このすべてを左右に表示します。

117
00:08:56,700 --> 00:09:01,110
そして私たちは、それが入っているこのコンテナの約30％を占有したかっただけです。

118
00:09:01,110 --> 00:09:06,960
だから私たちはそれをやってから戻ってきます。私は規則の一つを破り、インラインスタイルをやめないように言ってくれました。

119
00:09:06,960 --> 00:09:10,120
 

120
00:09:10,230 --> 00:09:13,930
それは間違いなく良いアイデアです。

121
00:09:14,010 --> 00:09:20,010
しかし、今は私たちが独自のスタイルシートを作成する新しいバージョンになるまで、私はそれを一直線にします。

122
00:09:20,010 --> 00:09:20,500
 

123
00:09:20,580 --> 00:09:24,130
だから私は新しいdivを作って、フォームを内部に入れます。

124
00:09:24,270 --> 00:09:26,130
ちょうどそれのように。

125
00:09:26,760 --> 00:09:34,760
そして、私はそのdivスタイルを与えるつもりです、そして、私は30％であると言って始めます。

126
00:09:34,980 --> 00:09:39,650
そして、それをそのままにして、私たちがもっと小さな形を見ないようにしてください。

127
00:09:39,660 --> 00:09:41,820
今我々はそれを中心にしたい。

128
00:09:41,820 --> 00:09:43,080
そこでここに戻ります。

129
00:09:43,110 --> 00:09:49,730
上下にマージンゼロを、左右にオットーを言う。

130
00:09:50,430 --> 00:09:52,790
今、我々は中心にある形を持っています。

131
00:09:52,800 --> 00:09:58,750
次に行うことは、ボタンがまだかなり長い全体の幅を占めるようにすることです。

132
00:09:58,790 --> 00:10:05,760
しかし、私たちがやることは、それをブロック要素にするBootstrapの方法で構築されたDTNブロックを与えることです。

133
00:10:05,790 --> 00:10:08,370
そして今、それは全体の行を占めます。

134
00:10:08,400 --> 00:10:13,530
次に、これらのすべての要素の間にある程度の間隔をあけて説明しましょう。

135
00:10:13,710 --> 00:10:17,300
フォームグループクラスで構築されたブートストラップを使用します。

136
00:10:17,370 --> 00:10:25,250
ですから、divクラスECOがダッシュグループを形成する必要があり、入力ごとにECOが必要になります。

137
00:10:25,470 --> 00:10:34,440
ですから、すべての入力はそのようなものの中に入ります。そして、私はこれを複製して、ここに別のものを持っていきます。これがその中に入ります。

138
00:10:34,560 --> 00:10:41,240
 

139
00:10:41,850 --> 00:10:44,080
そして、ボタンのためにもう1つ持っています。

140
00:10:44,610 --> 00:10:50,860
だから我々は古典的なフォームグループを3回持っており、また閉じたdivタグが必要です。

141
00:10:50,850 --> 00:10:54,810
私たちはそこに1つあります。ここにもう1つの閉じたdivタグが必要です。

142
00:10:55,190 --> 00:10:56,060
OK。

143
00:10:56,220 --> 00:10:59,140
フォームグループが一緒に物事を把握するように。

144
00:10:59,160 --> 00:11:01,530
しかしそれはまた私たちに少しのスペースを与えます。

145
00:11:01,530 --> 00:11:03,300
今ここにこのボタンがあります。

146
00:11:03,390 --> 00:11:08,730
次のことは、テキストを中心に配置し、それを行うことです。テキストを中心に配置するだけです。

147
00:11:08,730 --> 00:11:11,010
 

148
00:11:11,490 --> 00:11:13,680
そして、私は再びそれを行こうとしています。

149
00:11:13,680 --> 00:11:19,710
少なくとも長期的には良いアイデアではありませんが、これは何かをすばやく行うための大きな用途です。

150
00:11:20,160 --> 00:11:24,290
だからスタイルと我々はテキストの中心を行うでしょう。

151
00:11:25,650 --> 00:11:31,470
真ん中を中心に今すぐ保存してください。

152
00:11:31,980 --> 00:11:35,030
次に行うべきことは、このボタンの色を変更することです。

153
00:11:35,070 --> 00:11:37,000
白はとてもよく見えません。

154
00:11:37,230 --> 00:11:44,730
プライマリボタンをプライマリにして青色にしてリフレッシュを保存しましょう。

155
00:11:44,760 --> 00:11:46,430
はい、それはもっと良く見えます。

156
00:11:46,800 --> 00:11:51,700
また、このリンクを中に戻ってリンクしてみましょう。

157
00:11:51,900 --> 00:11:56,850
だから私たちはこれをコピーして、このマージンの内側に置くだけです。

158
00:11:56,880 --> 00:12:07,200
自動divので、ここにこのdivはフォームの後にちょうどそのように保存してください。

159
00:12:07,200 --> 00:12:07,810
そこに行く。

160
00:12:07,860 --> 00:12:14,310
私たちは帰ってきました。最後に行うべきことは、パディングやマージンを少し追加して、このH-1がそれを行うのが正しいとは限りません。

161
00:12:14,970 --> 00:12:18,750
 

162
00:12:19,080 --> 00:12:22,460
私たちはちょうど戻って、私たちがすでに選んだこの部門を持っています。

163
00:12:22,530 --> 00:12:28,050
マージンゼロではなく、開始するために20ピクセルのマージンを与えることができます。

164
00:12:28,050 --> 00:12:29,750
どのように見えるか見てみましょう。

165
00:12:30,580 --> 00:12:32,140
それはもう少しよく見えます。

166
00:12:32,340 --> 00:12:36,070
もっと50のようなことをしよう。

167
00:12:36,600 --> 00:12:38,280
それは少しすぎるかもしれません。

168
00:12:38,280 --> 00:12:40,230
間違いなく自分の好み。

169
00:12:40,350 --> 00:12:43,570
25歳に戻りましょう。

170
00:12:44,700 --> 00:12:44,940
大丈夫。

171
00:12:44,940 --> 00:12:46,420
それは今のところ十分です。

172
00:12:46,440 --> 00:12:51,990
 

173
00:12:51,990 --> 00:12:57,060
 

174
00:12:57,060 --> 00:12:58,160
あなたが好きなだけこれで遊んでください。あなたが好きな人はこのフォームを入力して幅を広げることができますが、それがより狭いのですが、それは反応があり、途中にとどまり、ちょっと収縮することがわかります。

175
00:12:58,170 --> 00:13:00,420
最後にこの商標を取り除きましょう。

176
00:13:00,420 --> 00:13:01,920
あなたは間違いなくもうそれを必要としません。

177
00:13:02,070 --> 00:13:06,570
フッタの一番下にあるので、フッタファイルに行き、私は不正行為をするでしょう。

178
00:13:06,620 --> 00:13:11,530
ちょうどこれを今のところやってください。私たちはそのセーブを取り除きます。

179
00:13:11,700 --> 00:13:17,670
今私たちのフォームが悪く見えることはありません私たちは私たちが1つを追加できる十分なバーを持っているキャンプサイトのリストを取得することができます戻ることができます。

180
00:13:18,180 --> 00:13:19,800
 

181
00:13:19,920 --> 00:13:24,000
また、まだ行っていないランディングページを表示することもできます。

182
00:13:24,210 --> 00:13:28,740
それはおそらく最も仕事があり、それは他のページとはかなり違って見えるでしょう。それはもっとよく見え、より多くのカスタムスタイルを持っています。

183
00:13:28,740 --> 00:13:31,360
 

184
00:13:31,380 --> 00:13:33,280
だからこそ、私はそれを後で保存するのです。

185
00:13:33,570 --> 00:13:38,550
そして、何もしないダミーのボタンでここに番号をつけています。

186
00:13:38,550 --> 00:13:38,890
大丈夫