1
00:00:00,240 --> 00:00:04,170
このレッスンでは、あなたのキャンプで作業を続けようとしています。

2
00:00:04,170 --> 00:00:06,070
すでに初期設定を行っています。

3
00:00:06,180 --> 00:00:11,430
ヘッダーとフッターのParshallにブートストラップを追加し、新しいキャンプ場を作成する機能を追加しました。

4
00:00:11,430 --> 00:00:13,990
 

5
00:00:14,010 --> 00:00:17,550
今度は、ブートストラップを使ってキャンプ場のページをインスタイルにします。

6
00:00:17,550 --> 00:00:18,600
だから始めましょう。

7
00:00:18,600 --> 00:00:21,230
私が最初にやることは、サーバーが稼動していることを確認することです。

8
00:00:22,000 --> 00:00:25,260
そして今私たちが持っているものを見てみましょう。

9
00:00:25,350 --> 00:00:26,740
間違いなくちょっとアンダー。

10
00:00:26,850 --> 00:00:28,110
だから私は2つの主な目標を持っています。

11
00:00:28,170 --> 00:00:34,150
最初の1つは、ここでタイトルのヘッダーをより良くしたいので、これはよりよく見えるはずです。

12
00:00:34,170 --> 00:00:40,050
私たちは、ブートストラップにジャンボトロンと呼ばれるものを使用し、次にキャンプ場もキャンプ場のリストをこのように垂直に表示すべきではありません。

13
00:00:40,050 --> 00:00:43,000
 

14
00:00:43,020 --> 00:00:48,200
代わりに、より小さなイメージのグリッドが横切っていて、そのグリッドが反応しやすいようにする必要があります。

15
00:00:48,480 --> 00:00:52,850
このタイトルのテキストを少し上手く見せている最初のものから始めましょう。

16
00:00:53,100 --> 00:00:58,440
だから私はキャンプ場を開くつもりです、はい、ここで働くつもりです。

17
00:00:58,590 --> 00:01:04,010
だから私はちょっとサイズを変えるつもりです。なぜなら、私たちはかなりのHDメールを書くつもりであり、端末では何もしません。

18
00:01:04,020 --> 00:01:06,390
 

19
00:01:06,440 --> 00:01:12,510
ヘッダーを処理するには、これまで見たことがないヘッダータグを使用します。

20
00:01:12,510 --> 00:01:15,740
機能的には、divのようなものとまったく同じように動作します。

21
00:01:15,780 --> 00:01:20,080
唯一の違いは、これに意味的な意味が少しあることです。

22
00:01:20,400 --> 00:01:25,850
任意のdivではなくヘッダーを使用していますが、それは単なるコンテナではありません。

23
00:01:26,010 --> 00:01:35,340
そして、私たちはそれにジャンボトロンのクラスを与え、それからその中に実際にこのH-1をコピーして追加するつもりです。それをそのままにしてFrigoを保存し、ページを更新します。

24
00:01:35,340 --> 00:01:42,540
 

25
00:01:42,570 --> 00:01:44,890
私たちは現在、ジャンボトロンと呼ばれるものを持っています。

26
00:01:45,130 --> 00:01:46,280
それはまだ素晴らしいことではありません。

27
00:01:46,290 --> 00:01:50,720
次の作業は、ブートストラップコンテナの中にすべてを作ることです。

28
00:01:51,030 --> 00:01:57,690
だから私たちがここで見ることのすべては、私はインデントするつもりです、そして、私は、クラスと同じようにコンテナを持つdivを追加するつもりです。

29
00:01:58,110 --> 00:02:01,260
 

30
00:02:01,460 --> 00:02:07,670
そして、私たちはそれの中にすべてをこだわるでしょう、そして、これは私たちの側にいくつかのspecacingを追加します。

31
00:02:07,830 --> 00:02:08,710
リフレッシュ。

32
00:02:08,880 --> 00:02:13,800
あなたはもはやここでは左側のものに対して右のものを持っていないことが分かります。

33
00:02:13,830 --> 00:02:19,200
私たちはいくつかのスペースを持っており、JumboTronは少し近くを見ていて、ついにナフバーが現れます。

34
00:02:19,200 --> 00:02:20,330
 

35
00:02:20,520 --> 00:02:22,890
だからこれは少し良く見えるでしょう。

36
00:02:22,890 --> 00:02:25,530
今のところ、ジャンボトロンがあります。

37
00:02:25,590 --> 00:02:27,570
さて、テキスト自体を変更しましょう。

38
00:02:27,600 --> 00:02:34,530
キャンプ場へようこそ！キャンプ場へようこそ！

39
00:02:34,710 --> 00:02:40,140
 

40
00:02:40,140 --> 00:02:55,470
あなたが望むコンテンツを自由に置いてください。私は段落の段落にも追加します。ほんの少しのタグラインを追加します。私は、私たちの手を見て、世界中のキャンプ場を選ぶと言うでしょう。

41
00:02:55,800 --> 00:02:56,550
 

42
00:02:56,670 --> 00:02:58,940
そのようなものは本当に問題ではありません。

43
00:02:58,950 --> 00:03:00,850
リフレッシュを保存します。

44
00:03:01,170 --> 00:03:06,650
今は小さなタグラインがあり、最後にしたいのはこのリンクの世話です。

45
00:03:06,690 --> 00:03:08,280
新しいキャンプ場のリンクを追加します。

46
00:03:08,580 --> 00:03:12,640
だから私はそれをコピーして、それをジャンボトロンの中に入れます。

47
00:03:12,650 --> 00:03:15,070
しかし、私はボタンにするつもりです。

48
00:03:15,150 --> 00:03:23,190
ブートストラップボタンの1つで、これを行うか、最初に段落を追加して、その中にアンカータグを入れます。

49
00:03:23,190 --> 00:03:24,780
 

50
00:03:24,780 --> 00:03:26,680
そして私は間隔を置いてそれをやっています。

51
00:03:26,730 --> 00:03:32,820
あなたはこれを自分の行にしたいと思っています。そして、私はボタンクラスにPTEN

52
00:03:32,850 --> 00:03:43,320
ETNプライマリの複数のクラスを色のために与え、ダッシュの間にそれを大きく保存して保存します。

53
00:03:43,330 --> 00:03:45,420
今我々は新しいキャンプ場ボタンを持っています。

54
00:03:45,510 --> 00:03:49,930
クリックすると、完全にスタイリングされたフォームが表示されます。

55
00:03:50,220 --> 00:03:54,050
一つの小さなことは、ここでこのウィンドウのサイズを変更した場合です。

56
00:03:55,320 --> 00:04:01,740
私たちのテキストがジャンボトロンの端にぴったりと合っていることに注目してください。

57
00:04:01,860 --> 00:04:07,380
 

58
00:04:07,380 --> 00:04:19,680
ここにいくつかのスペースがあり、それらのスペースを維持したいのは、Jumbotronの中に別のコンテナを追加してdivクラスがコンテナに等しくなるようにしてから、Jumbotronの内側で閉じたdivの最後までインデントしてからすべて。

59
00:04:19,680 --> 00:04:24,330
 

60
00:04:24,420 --> 00:04:26,040
そして今、リフレッシュすれば

61
00:04:26,210 --> 00:04:30,860
彼女は同じように見えましたが、それを縮小するとそこにいくらかスペースがあります。

62
00:04:31,230 --> 00:04:33,790
OKでヘッダー部分です。

63
00:04:33,840 --> 00:04:37,680
今、私たちはそのイメージのグリッドに取り組んでいきたいと思います。私はあなたの前に立ちます。

64
00:04:37,680 --> 00:04:39,770
それは間違いなくもう少し作業です。

65
00:04:40,020 --> 00:04:49,200
そのグリッドを開始してみましょう。行を作成してdivクラスが行と同じになるようにすることから始めます。ここで少しのメッセージから始めます。

66
00:04:49,800 --> 00:04:53,520
 

67
00:04:53,580 --> 00:05:03,210
だから私たちはdivクラスを追加するつもりです、そして、私はこれをちょうど幅全体を占めるようにしようとしています。私たちはここでメッセージを持っています.H-3はあなたが知っているキャンプ場です多くのように見えません。

68
00:05:03,210 --> 00:05:11,040
 

69
00:05:14,270 --> 00:05:15,790
 

70
00:05:15,790 --> 00:05:24,160
ここではもう一度頭を下げて、divクラスの行に追加することから始めましょう。これは、私たちの小学校ですべてを必要としています。

71
00:05:24,160 --> 00:05:25,470
 

72
00:05:25,560 --> 00:05:28,820
divクラスは行と同じです。

73
00:05:28,970 --> 00:05:34,780
 

74
00:05:34,780 --> 00:05:41,380
 

75
00:05:41,800 --> 00:05:43,380
そして今、私たちが実際にやりたいことは、それぞれのキャンプ場の列の中のグリッドの代わりに、列クラスを持つdivとブートストラップグリッドを使った列を作るためです。

76
00:05:43,420 --> 00:05:50,110
ですから、今度はそれをやってみましょう。ここでは、各ループのすべてのコードを、そのようにインデントされるようにします。

77
00:05:52,390 --> 00:05:53,580
 

78
00:05:53,830 --> 00:05:57,180
そしてここに閉じたdivタグが必要です。

79
00:05:57,490 --> 00:06:01,500
これは古典的な行のためのもので、これはコンテナ用です。

80
00:06:02,020 --> 00:06:02,470
OK。

81
00:06:02,730 --> 00:06:09,370
 

82
00:06:09,870 --> 00:06:17,770
 

83
00:06:18,310 --> 00:06:26,740
 

84
00:06:26,740 --> 00:06:28,270
このようなコンテンツをdivでそのまま残すのではなく、画像のためにHを使用していますが、このdivを変更して列の中の3つのクラス6それは応答するようにするだけで、画面サイズが大きくなると大きな画像が得られます。

85
00:06:28,300 --> 00:06:34,090
そしてそれを縮小すると、行ごとに2つの画像になります。さらに、1行につき1つの画像にまでさらに縮小されます。

86
00:06:34,090 --> 00:06:36,400
 

87
00:06:36,610 --> 00:06:44,080
 

88
00:06:44,110 --> 00:06:49,270
その中に実際に別のdivに追加する予定です。このdivはサムネイルのクラスを持つ予定ですが、これはブートストラップクラスです。小さなカードを作ってサムネイルの中に小さなグリッドアイテムを作成しますそのように始まるイメージ。

89
00:06:49,270 --> 00:06:56,560
 

90
00:06:56,680 --> 00:07:02,210
私たちはRLのキャンプ場と同じイメージサービスを提供しています。

91
00:07:02,230 --> 00:07:08,580
そして、私たちは今、これを取り除き、ただ保存し、私たちが新鮮ならば何を得るのかを見てみましょう。

92
00:07:09,280 --> 00:07:09,820
大丈夫。

93
00:07:09,910 --> 00:07:11,850
だから我々は今、画像のグリッドを持っている。

94
00:07:11,890 --> 00:07:14,860
3つだけですが、私たちはこのグリッドを得ています。

95
00:07:15,220 --> 00:07:18,580
そして私はそれを反応的にすることによって、あなたが何を意味するかを見せます。

96
00:07:18,580 --> 00:07:25,270
したがって、これらを縮小すると、画面上でどのように2つの四角形または2つのアイテムに変化するかを確認します。

97
00:07:25,280 --> 00:07:26,910
12ユニットがあることを覚えておいてください。

98
00:07:27,040 --> 00:07:35,980
だから最初に持っていたものを4つの塊に分けて、それぞれが3つのユニットを取り出してから、ここでグリッドが小さくなると、それぞれ6つのユニットを取り、さらに小さくなると自動的に1つになります。

99
00:07:35,980 --> 00:07:43,390
 

100
00:07:43,390 --> 00:07:44,190
 

101
00:07:44,350 --> 00:07:49,130
余分な小さなデフォルトは12単位を使用するため、これを書く必要はありませんでした。

102
00:07:49,180 --> 00:07:52,050
だから我々はそれを指定する必要はなかった。

103
00:07:52,090 --> 00:07:59,950
さて、このキャンプグラウンドの名前でタイトルを取得してみましょう。notherブートストラップクラスを実行する年齢ではなく、divクラスはそのようなキャプションと同じです。

104
00:08:00,460 --> 00:08:07,550
 

105
00:08:07,780 --> 00:08:13,080
そしてそこに、キャンプグラウンド名のためにHを入れます。

106
00:08:14,070 --> 00:08:18,670
それでは、保存してみましょう。

107
00:08:18,670 --> 00:08:19,270
そこに行く。

108
00:08:19,300 --> 00:08:21,030
私たちはこれらの素敵な小さなカードを手に入れます。

109
00:08:21,040 --> 00:08:23,700
これは私たちのために作ったサムネイルクラスです。

110
00:08:23,840 --> 00:08:25,030
私たちはイメージを持っています。

111
00:08:25,210 --> 00:08:30,480
そして、たくさんのアイテムに画像が残っていれば、それがどのように見えるかを見てみましょう。

112
00:08:30,760 --> 00:08:34,160
だからこそこれをする必要はありませんが、私はここに貼り付けます。

113
00:08:34,600 --> 00:08:36,860
ちょうど私達にいくつかのデータを与えてください。

114
00:08:36,880 --> 00:08:38,800
重複したデータになりますが、問題ありません。

115
00:08:38,940 --> 00:08:46,250
そして、正しいカンマを追加してカンマを追加してそこに来るようにする必要があります。

116
00:08:46,300 --> 00:08:49,840
これで、サーバーを再起動する必要があります。

117
00:08:50,170 --> 00:08:52,060
そして、私たちはアプリを使いこなすたびに。

118
00:08:52,120 --> 00:08:53,330
はい。

119
00:08:53,590 --> 00:08:58,070
そして今、リフレッシュすると、彼には小さな問題があることがわかります。

120
00:08:58,120 --> 00:09:00,040
私たちのグリッドはちょっと混乱しています。

121
00:09:00,170 --> 00:09:03,810
そして、起こっているのは、我々は異なる高さの画像を持っているということです。

122
00:09:04,090 --> 00:09:07,940
だからこのサケ・クリーク・ワンはこれらとは違う。

123
00:09:08,410 --> 00:09:10,710
この場合、幅は同じですが。

124
00:09:10,930 --> 00:09:16,150
それはグリッドから投げ飛ばされていて、ちょっと変わったが、簡単に修正できる方法がある。

125
00:09:16,270 --> 00:09:19,130
そして、私たちがキャンプ場の代わりにそれをどうやって行うのかをお見せしましょう。

126
00:09:19,270 --> 00:09:19,960
はい。

127
00:09:20,320 --> 00:09:26,860
クラス行の日に、私はスタイル属性を追加して、これを一時的に行うつもりです。

128
00:09:27,010 --> 00:09:31,600
私たちはこれを外部のスタイルシートに移していきますが、私はそれを見やすくするために一列にします。

129
00:09:31,600 --> 00:09:32,530
 

130
00:09:32,530 --> 00:09:37,360
そこで、フレックス表示と折り返し表示にスタイルを設定しました。

131
00:09:37,480 --> 00:09:39,900
そしてそれらは私たちのグリッドを助ける2つの特性です。

132
00:09:39,910 --> 00:09:44,810
だから私は新鮮だった今、我々はより柔軟なグリッドで終わる。

133
00:09:44,860 --> 00:09:50,980
グリッドが適応するので、我々はいくつかの異なる高さを持っていることは重要ではありませんので、これらの2つの間にはスペースがあります。

134
00:09:50,980 --> 00:09:53,400
 

135
00:09:53,470 --> 00:09:59,500
基本的には、最小限のスペースが必要ですが、すべてを完全に整列させるために必要なスペースを最小限に抑えることができます。

136
00:09:59,500 --> 00:10:02,750
 

137
00:10:02,800 --> 00:10:09,460
そしてもう一つの変更があります。これは、テキストセンターにテキストを追加することです。テキストセンターは、テキストをテキストの中央に配置するためのブートストラップです。

138
00:10:09,460 --> 00:10:13,370
 

139
00:10:13,540 --> 00:10:15,410
そして私はそれが少し良く見えると思う。

140
00:10:15,490 --> 00:10:20,500
また、個人的な好みの問題と今私たちはしばらくの間、キャンプ場のページで終わった。

141
00:10:20,620 --> 00:10:25,630
ブートストラップが実際に私たちを助けることができる方法を示してくれれば、これを最初からやっているのと比べてかなり容易にすることができます。

142
00:10:25,630 --> 00:10:27,550
 

143
00:10:27,550 --> 00:10:31,900
そして私たちが持っている素敵なレスポンシブルグリッドをお見せしましょう。

144
00:10:31,900 --> 00:10:33,260
これはモバイル上にあります。

145
00:10:33,310 --> 00:10:38,890
私たちはこの素晴らしいレイアウトを、最大4つのイメージまで表示しています。

146
00:10:39,160 --> 00:10:41,140
OKだから私はこれがどのように見えるかにとても満足しています。

147
00:10:41,140 --> 00:10:42,020
私は次のビデオで会いましょう