1
00:00:00,310 --> 00:00:04,590
このレッスンでは、ショーページのスタイリングに焦点を当てています。

2
00:00:04,620 --> 00:00:07,080
だから今私たちのショーページはこのように見えます。

3
00:00:07,230 --> 00:00:10,710
私たちは何もしないボタンを使ってここに小さなナーバーを持っています。

4
00:00:10,710 --> 00:00:12,910
私たちはキャンプ場の名前を持つH-1を持っています。

5
00:00:13,190 --> 00:00:18,060
画像と説明があり、新しいコメントを追加するボタンがあると、すべてのコメントが表示されます。

6
00:00:18,060 --> 00:00:19,290
 

7
00:00:19,410 --> 00:00:21,900
各1つの小さな段落。

8
00:00:21,900 --> 00:00:25,230
ですから、私たちの目標はこれをもう少し見えるようにすることです。

9
00:00:25,230 --> 00:00:27,190
だから私はここにサイドバーを持っている。

10
00:00:27,270 --> 00:00:31,950
私たちはまだ地図を持っていませんが、私たちは地図のためのスペースを作って、主な内容を説明します。

11
00:00:31,950 --> 00:00:34,250
 

12
00:00:34,380 --> 00:00:40,020
いくつかのテキストはまだ評価を行うつもりはないが、次に同様のようなレビューのリストが表示されます。

13
00:00:40,020 --> 00:00:41,350
 

14
00:00:41,430 --> 00:00:45,360
彼ら自身の小さなコンテナは、私は少しレバーをするための小さなボタンがあります。

15
00:00:45,360 --> 00:00:47,240
一般的には少しスタイリッシュです。

16
00:00:47,310 --> 00:00:50,210
私たちはこれを追加することができます。

17
00:00:50,280 --> 00:00:51,540
それが私たちが目指しているものです。

18
00:00:51,720 --> 00:00:55,170
開始するには、ブートストラップグリッドに焦点を当てるだけです。

19
00:00:55,350 --> 00:00:58,500
ブートストラップグリッドは12単位であることに注意してください。

20
00:00:58,560 --> 00:01:03,540
この小さなサイドバーの12のうち3つを指定し、次にメインコンテンツに9を追加します。

21
00:01:03,540 --> 00:01:05,500
 

22
00:01:05,760 --> 00:01:10,200
実際に何かを変えることを始める前に、今私がv5で作業していることを指摘したいと思います。

23
00:01:10,680 --> 00:01:13,710
ですから、もしあなたがこれらすべての変化に沿って歩きたいのであれば、V 5になります。

24
00:01:13,800 --> 00:01:17,280
私がやっている理由は、カスタムスタイルシートを作る必要があるということです。

25
00:01:17,340 --> 00:01:21,780
私たちは、公開ディレクトリとその他の大きな変更であるいくつかのものを提供しなければなりません。

26
00:01:22,020 --> 00:01:24,020
だから私は別のバージョンを作りたかったのです。

27
00:01:24,270 --> 00:01:29,070
しかし、これを行う前に、最初に行うことは、このブートストラップコンテナのすべてにコンテナを追加することです。

28
00:01:29,070 --> 00:01:30,020
 

29
00:01:30,150 --> 00:01:38,850
だから、E. J. コンテナのクラスをdivに追加する予定です。その中にすべてを入れていきます。

30
00:01:38,850 --> 00:01:40,290
 

31
00:01:40,290 --> 00:01:44,850
サイドバーを追加することから始めましょう。私たちはここにあるようにいくつかのダミーデータを埋めます。

32
00:01:45,660 --> 00:01:55,120
だからDIVXとこれは、クラスはプロと等しい必要があります。その行では、クラスがそのような列の中の3つのクラスである別のdivを持つことになります。

33
00:01:55,120 --> 00:02:00,920
 

34
00:02:01,080 --> 00:02:06,790
そして、ここでは、段落を追加して、Joachimと言うこのテキストを取得します。

35
00:02:08,460 --> 00:02:15,960
だから、クラスが先導されている段落です。そして、私たちはあなたをキャンプに入れようとしています。今度は、これを最終的に変更します。

36
00:02:15,960 --> 00:02:17,640
 

37
00:02:17,640 --> 00:02:24,870
 

38
00:02:25,950 --> 00:02:34,670
しかし、ええキャンプし、それらの小さなリストアイテムを追加するには、クラスとdivを行うリストダッシュグループを作成し、ここでは各アリーで同盟者の束を追加するつもりですリストグループ項目のクラスを持っています。

39
00:02:35,610 --> 00:02:41,490
そして、内部ではダミーのデータを追加するだけで、情報1と呼ぶことにして、この情報を情報3に複製します。

40
00:02:41,490 --> 00:02:44,530
 

41
00:02:44,610 --> 00:02:46,340
それでは、どうなっているのか見てみましょう。

42
00:02:46,500 --> 00:02:52,480
ページをリフレッシュするにはここにサイドバーがあり、これらのアイテムの1つを選択して開始します。

43
00:02:52,830 --> 00:02:55,480
そして、私たちがしなければならないことは、積極的に権利を追加することだけです。

44
00:02:55,650 --> 00:02:58,900
私たちが新鮮ならば、そのうちの1人が活発であることがわかります。

45
00:02:59,460 --> 00:03:03,900
これは実際には何かを持つプレースホルダなので、空白がたくさんありませんが、実際のデータとマップを最終的に追加します。

46
00:03:03,900 --> 00:03:07,680
 

47
00:03:07,770 --> 00:03:13,710
そして、それを指摘するために、マップはこの媒体の3列の中に、ここでは最終的にはまだまだではありません。

48
00:03:13,710 --> 00:03:14,590
 

49
00:03:14,940 --> 00:03:16,560
OK、それはサイドバーです。

50
00:03:16,560 --> 00:03:19,050
ここでメインコンテンツに追加します。

51
00:03:19,290 --> 00:03:28,670
だから別の列が必要で、これはクラス列の媒体9です。

52
00:03:29,130 --> 00:03:36,120
その代わりに、イメージを持つ必要があるH-1を持つ必要がありますが、その前に、実際にはサムネイルのいずれかに気づくでしょう。

53
00:03:36,120 --> 00:03:41,820
 

54
00:03:41,940 --> 00:03:44,150
これらはそれぞれサムネイルです。

55
00:03:44,190 --> 00:03:49,560
私たちはタイトルとコメントとそのすべてのイメージ全体で同じことをやろうとしています。

56
00:03:50,220 --> 00:03:56,930
そこで、divを追加し、そのdivにはクラスがサムネイルと同じになるようにします。

57
00:03:58,110 --> 00:04:04,620
そして、その中にイメージを追加するつもりです。私はすでに書いたイメージをそのまま残し、そこに置いてください。

58
00:04:04,620 --> 00:04:06,140
 

59
00:04:06,180 --> 00:04:08,260
それが私たちのキャンプ場のイメージになるでしょう。

60
00:04:08,490 --> 00:04:17,250
そして、ブートストラップされたものにクラスを追加して、画像Daschが応答するものを与えたいと思っています。

61
00:04:19,560 --> 00:04:20,420
そこに行く。

62
00:04:20,490 --> 00:04:23,270
それを保存します。

63
00:04:23,400 --> 00:04:28,470
私たちが現在持っているものを見て、リフレッシュすると、少なくとも適切な場所にイメージとコンテンツがあります。

64
00:04:28,470 --> 00:04:29,570
 

65
00:04:29,610 --> 00:04:33,280
私たちは、これが欲しいと思っているにもかかわらず、これがうまくいかない問題があります。

66
00:04:33,320 --> 00:04:37,950
私はそれを全面的に行きたいと思っていますし、最後にカスタムC Sを使ってそれを処理しなければなりません。

67
00:04:38,970 --> 00:04:44,040
そしてここで私たちは戻ってここにキャンプ場の名前と、データベースに実際にはない夜間の料金がある場所を追加します。

68
00:04:44,040 --> 00:04:46,360
 

69
00:04:46,440 --> 00:04:47,830
だから私たちはただハードコーディングします。

70
00:04:48,150 --> 00:04:49,400
それでは、今やってみましょう。

71
00:04:49,860 --> 00:04:57,250
そして、それは別のdivです、そして、これは、キャプションダッシュいっぱいのクラスを持っています。

72
00:04:57,570 --> 00:05:01,190
そしてそこに、Hを追加します。

73
00:05:01,620 --> 00:05:07,980
そして、私たちはこれを右に引き上げるでしょう、そして、私たちはクラスが正しいダッシュを引きます、そして、私たちがここに入れたものが価格になります。

74
00:05:07,980 --> 00:05:09,540
 

75
00:05:09,750 --> 00:05:15,300
そして、私はもう一度$ 9で始まるでしょう、これは最終的にデータベースから来るでしょう。

76
00:05:15,540 --> 00:05:22,080
私たちが新鮮なら今私たちは右側に1泊9ドルを得て、私たちはここで左手にコピーするキャンプ場の名前を得たいと思っています。

77
00:05:22,260 --> 00:05:25,610
 

78
00:05:25,650 --> 00:05:30,870
 

79
00:05:31,080 --> 00:05:38,400
 

80
00:05:38,400 --> 00:05:44,490
右下に置くと右に引っ張りますが、それは自動的に左に移動しますが、これは私が気にしていたものよりも大きく、私はそれをより小さなHに変換しますそこにアンカータグを追加し、アンカータグの中にキャンプグラウンド名を入れてください。

81
00:05:46,500 --> 00:05:50,370
その背後にあるアイデアは、結局私は元に戻るということです。

82
00:05:50,380 --> 00:05:55,740
これは実際のキャンプ場へのリンクか、または何かを予約することができるパークサービスページにリンクする必要があります。

83
00:05:56,130 --> 00:05:58,050
今のところ、どこにもリンクしていません。

84
00:05:58,410 --> 00:05:59,020
OK。

85
00:05:59,160 --> 00:06:00,350
だから我々はそれを持っている。

86
00:06:00,360 --> 00:06:01,370
私たちには価格があります。

87
00:06:01,470 --> 00:06:03,660
ここで説明を追加してみましょう。

88
00:06:04,230 --> 00:06:10,950
ですから、これは単なる段落タグになります。そこで私たちの説明には、ここにキャンプ場の説明が追加されます。

89
00:06:13,050 --> 00:06:14,060
 

90
00:06:14,640 --> 00:06:20,190
私たちが大量のサブスクリプションを持っていないので、今はちょっと印象的ではありません。Lorem

91
00:06:20,790 --> 00:06:26,100
Ipsumを使ってデータベースを見て、これを盗むつもりです。それをシードファイルに戻してください。

92
00:06:26,100 --> 00:06:29,750
 

93
00:06:29,940 --> 00:06:34,700
その後、私たちの種子のファイルの代わりに、私はそれらの3つすべての記述を変更します。

94
00:06:34,720 --> 00:06:37,990
ちょっとしたことではなく、同じことをしてください。

95
00:06:38,130 --> 00:06:42,380
私たちはLorem Ipsumのロングビットを持っています。

96
00:06:42,660 --> 00:06:48,070
そして、これを有効にするには、データベースを受信するためにサーバーを再起動する必要があります。

97
00:06:48,720 --> 00:06:52,340
そして、戻ってキャンプ場のページに戻ってみましょう。

98
00:06:52,440 --> 00:06:54,090
私たちは3つのキャンプ場を持っています。

99
00:06:54,090 --> 00:06:58,330
しかし、彼らは今、より正当な説明をいくつかのテキストがあります。

100
00:06:58,680 --> 00:07:00,050
大丈夫です。

101
00:07:00,060 --> 00:07:02,240
それでは、今私たちが取り組むべきことを見てみましょう。

102
00:07:02,250 --> 00:07:03,730
小さなことがいくつかあります。

103
00:07:03,880 --> 00:07:08,580
私たちは、今のところレビュー数に星を残して、コメントに移ります。

104
00:07:08,970 --> 00:07:15,150
Eさんのショーに戻りましょう。 J.

105
00:07:15,150 --> 00:07:21,660
はい、私たちが今では種を取り除くことができるのは、私たちがそれを同じ列に置いて欲しいからです。

106
00:07:21,900 --> 00:07:22,630
 

107
00:07:22,680 --> 00:07:24,350
同じ量のスペースを取る。

108
00:07:24,750 --> 00:07:31,440
サムネイルの後にちょうどここに行けば、これとキャプションはサムネイルです。

109
00:07:31,880 --> 00:07:34,770
だから彼らはdivクラスを追加するつもりです。

110
00:07:34,870 --> 00:07:37,060
それと同じです。

111
00:07:37,410 --> 00:07:42,870
そして、その中でそれを開き、コメントを追加するためのループを行います。

112
00:07:42,880 --> 00:07:43,560
 

113
00:07:43,680 --> 00:07:49,600
しかし、私はあなたのボタンのレバーをボタンに追加することから始めるつもりです。私たちは単純なdivを行い、このdivにはテキストのダッシュのクラスがあります。

114
00:07:50,750 --> 00:07:55,150
 

115
00:07:55,320 --> 00:08:01,760
そしてそこにアンカータグを追加して、すでに新しいコメントを作成する必要があります。

116
00:08:01,770 --> 00:08:02,940
 

117
00:08:03,300 --> 00:08:05,090
ちょうどここに入れてください。

118
00:08:05,820 --> 00:08:11,520
それは長いものですが、ボタンボタンの成功のクラスが緑色になるアンカータグであることを忘れないでください。

119
00:08:11,520 --> 00:08:12,350
 

120
00:08:12,490 --> 00:08:14,620
しかし、refは本当に長い部分です。

121
00:08:14,790 --> 00:08:22,290
キャンプ場には、キャンプ場のIDスラッシュのコメントスラッシュをスラッシュして新しく保存して更新します。

122
00:08:22,680 --> 00:08:23,030
OK。

123
00:08:23,040 --> 00:08:27,750
だから、私たちは今、私たちに国境のすてきな灰色の背景を与える井戸を持っているのを見ることができます。

124
00:08:27,750 --> 00:08:29,960
ここでコメントに追加します。

125
00:08:30,120 --> 00:08:34,170
だから私たちは次のことをする必要がありますコメントをループし、我々はすでにそれを行っている。

126
00:08:34,170 --> 00:08:38,500
しかし、それぞれの段落を作成するのではなく、実際に別の行を作成します。

127
00:08:38,760 --> 00:08:42,880
だから私はそれをコピーするか、それをカットするときに見えるものをあなたに見せます。

128
00:08:43,020 --> 00:08:49,140
そしてこの余分な段落を削除することができます。そして、テキストの直後に置くつもりです。

129
00:08:49,440 --> 00:08:51,850
そしてこれを適切にやりましょう。

130
00:08:52,090 --> 00:08:57,280
 

131
00:08:57,270 --> 00:09:03,830
そこでループを作成し、各コメントをループして、divクラスの行ごとにdivクラスの行を追加します。

132
00:09:04,750 --> 00:09:14,040
そして、それぞれの内部に、別のdivクラスを追加して、列のメディア12と同じものを保存します。

133
00:09:14,110 --> 00:09:20,820
私たちがここにあるものを見れば、私たちは著者と呼ばれるユーザ名の電子メールスラッシュのユーザ名になります。

134
00:09:20,830 --> 00:09:21,850
 

135
00:09:22,090 --> 00:09:29,070
そして、右側に10日前の今度はハードコードがあり、次に実際のコメントが来ます。

136
00:09:29,080 --> 00:09:30,760
 

137
00:09:30,750 --> 00:09:36,790
その作業をするために、テキストを作成して右のテキストを右に引く必要があります。その後、実際のコメント自体のために段落を追加する必要があります。

138
00:09:37,120 --> 00:09:41,350
 

139
00:09:41,350 --> 00:09:43,890
だからここで試してみましょう。

140
00:09:43,950 --> 00:09:45,900
私たちはコラム培地12を持っています。

141
00:09:46,290 --> 00:09:49,800
その中で、コメント作成者を追加することから始めます。

142
00:09:50,130 --> 00:09:51,770
ですから、そこに追加してみましょう。

143
00:09:52,200 --> 00:09:57,520
そして、それから我々はスパンで追加するつもりです、そして、これは右側にあります。

144
00:09:57,580 --> 00:09:59,770
だから古典的なプル権を追加します。

145
00:09:59,970 --> 00:10:03,340
そして、ここでは10日前に追加するだけです。

146
00:10:03,510 --> 00:10:05,300
まあまあハードコードです。

147
00:10:05,400 --> 00:10:09,520
そして最後に、コメント・テキストを表示します。

148
00:10:09,680 --> 00:10:15,000
 

149
00:10:15,000 --> 00:10:21,340
 

150
00:10:21,660 --> 00:10:22,770
だから私はここでこのコメントテキストを取得するつもりです。私たちは著者と10日間行くようにここに列の中でそれを移動したいのを除いて、私たちがすでに持っている段落の中に入れます。

151
00:10:22,770 --> 00:10:29,680
私たちは、彼らが一緒に同じコラムにいて今は保存して元に戻って欲しいです。

152
00:10:29,700 --> 00:10:31,340
私たちが得るものを見てください。

153
00:10:31,360 --> 00:10:31,980
大丈夫。

154
00:10:31,980 --> 00:10:33,050
だから1つのコメントがあります。

155
00:10:33,070 --> 00:10:33,930
それでおしまい。

156
00:10:33,930 --> 00:10:36,580
しかし、新しいコメントを追加するためのボタンがあることがわかります。

157
00:10:36,580 --> 00:10:37,980
それが動作することを確認します。

158
00:10:38,770 --> 00:10:40,450
コメントはここに表示されます。

159
00:10:40,470 --> 00:10:41,600
我々は格付けを逃している。

160
00:10:41,670 --> 00:10:44,460
だから少し奇妙に見えますが、それは今のところうまいです。

161
00:10:44,700 --> 00:10:48,460
私たちがやりたいことは、1つか2つ以上のコメントを追加することです。

162
00:10:48,450 --> 00:10:52,600
だからここに戻って、ちょっとだけlorem ipsumを使ってみましょう。

163
00:10:52,600 --> 00:10:57,100
ですから、私はちょうどこれの一部をコピーしてコメントとして追加します。

164
00:10:57,270 --> 00:11:02,440
ちょうどそれのいくつかを使用して、著者はここにキャンプするでしょう。

165
00:11:02,520 --> 00:11:03,600
おじいちゃん。

166
00:11:03,820 --> 00:11:05,000
提出してください。

167
00:11:05,720 --> 00:11:06,090
OK。

168
00:11:06,100 --> 00:11:08,420
だから私たちは今ここでコメントしています。

169
00:11:08,430 --> 00:11:09,550
それは働いている。

170
00:11:09,540 --> 00:11:11,610
私は追加したいと思うスペースがあります。

171
00:11:11,610 --> 00:11:16,560
私たちがここにあるものを見れば、本当にかすかな線があるのですが、あなたが画面に出てくるかどうかわかりません。

172
00:11:16,570 --> 00:11:17,520
 

173
00:11:17,520 --> 00:11:22,500
いくつかのスペースを追加する本当にかすかな線があり、その作業を行うために必要なのはh rを追加することだけです。

174
00:11:22,530 --> 00:11:23,890
 

175
00:11:24,370 --> 00:11:31,260
だからこのテキスト右のボタンの後ろに横方向のルールを追加し、リフレッシュするとそこにスペースがあります。

176
00:11:31,770 --> 00:11:33,210
 

177
00:11:33,260 --> 00:11:38,680
あなたにはボタンがあり、私たちはすべてのコメントを短期間で表示しています。

178
00:11:38,730 --> 00:11:40,310
なぜユーザー名を作成しないのですか？

179
00:11:40,620 --> 00:11:46,770
だから私たちはここに戻って、すでにこれを持っていて、彼らはそれを取り除きましたが、私たちは元に戻って、著者に強いタグを付け加え、少し見やすくなります。

180
00:11:46,890 --> 00:11:52,950
 

181
00:11:52,950 --> 00:11:53,770
そこに行く。

182
00:11:53,830 --> 00:11:57,470
まだ偉大ではありませんが、今は十分です。

183
00:11:57,540 --> 00:12:00,060
それは実際には私たちが今必要としているすべてのブートストラップです。

184
00:12:00,240 --> 00:12:01,390
しかし、まだ完了していません。

185
00:12:01,470 --> 00:12:07,680
私たちが戻って、完成したishバージョンを見ると、画像がサムネイル全体を占めていて、それをしていないことがわかります。

186
00:12:07,680 --> 00:12:09,900
 

187
00:12:10,050 --> 00:12:15,000
私はまったく同じイメージを使用するように言いましたが、それは実際のイメージそのものではありません。

188
00:12:15,120 --> 00:12:16,820
問題は私たちのスタイリングに帰着します。

189
00:12:17,080 --> 00:12:22,890
私たちがやりたいことは、入り込み、このイメージにコンテナで100％を占めるように伝えることです。

190
00:12:23,160 --> 00:12:29,150
だから私はあなたにそれを検査することができることを示してくれるでしょう、そして、これはここでインスペクタのための大きな用途です。

191
00:12:29,350 --> 00:12:36,260
ここでそれを選択し、ここで100％のスタイルを追加できます。

192
00:12:36,270 --> 00:12:37,060
そしてそこに行く。

193
00:12:37,120 --> 00:12:39,540
それが私たちがしたいことです。

194
00:12:39,610 --> 00:12:44,400
まだ少しの違いがありますが、そこにはちょっとしたスペースがあります。

195
00:12:44,400 --> 00:12:45,320
 

196
00:12:45,470 --> 00:12:50,980
 

197
00:12:50,970 --> 00:12:56,670
そして、私たちがやりたいことは、実際のサムネイルに入り、ここにあるサムネイルを選択することです。このパディングはゼロにします。

198
00:12:57,580 --> 00:13:02,230
そして、今見てみると、それを見るか、見た目に近いかのように見えるように見えます。

199
00:13:02,220 --> 00:13:02,700
 

200
00:13:02,730 --> 00:13:05,350
ここでは間隔をいくつか追加します。

201
00:13:05,350 --> 00:13:09,740
あなたはここでいくつかのスペースがあることを見ることができ、私たちはそれを今修正することができます。

202
00:13:09,820 --> 00:13:15,180
また、それを調べて、実際に修正していないことを覚えているだけで、ブラウザでテストしてから、私たちは元のスタイルシートに戻って実際にこれらの変更を行います。

203
00:13:15,390 --> 00:13:19,560
 

204
00:13:19,570 --> 00:13:24,760
だから私たちがやりたいことは、ここのボックスであるキャプションの子猫にちょっとしたパディングを加えることです。

205
00:13:24,990 --> 00:13:31,220
そして、私たちが望むパダムは、右上と左下にあり、それは9または10ピクセルになるでしょう。

206
00:13:31,230 --> 00:13:35,370
だから、私たちは9 xをパディングします。

207
00:13:35,760 --> 00:13:36,510
そしてそこに行く。

208
00:13:36,540 --> 00:13:38,240
私たちはそこで素敵なスペースに終わります。

209
00:13:38,520 --> 00:13:43,090
それは私たちがやりたいことではなく、そのスタイリングを取って、私たちが書くスタイルシートに実際に追加することです

210
00:13:43,090 --> 00:13:43,450