1
00:00:00,390 --> 00:00:05,640
このレッスンでは、ブートストラップグリッドの作業を続けていきますが、特に強調する2つの主な機能があります。

2
00:00:05,640 --> 00:00:07,550
 

3
00:00:07,590 --> 00:00:12,070
最初に、簡単に言及した4つの異なるサイズに対処したいと思います。

4
00:00:12,150 --> 00:00:16,950
私たちはElgieコラムを使って作業してきましたが、それが意味するものについては話していませんでした。

5
00:00:16,950 --> 00:00:18,530
 

6
00:00:18,600 --> 00:00:24,270
彼らはまた、他のグリッドの内部にグリッドを入れ子にして、それらの12個の単位をさらに細かく分割する方法を示したいと思っています。

7
00:00:24,270 --> 00:00:25,820
 

8
00:00:26,250 --> 00:00:31,200
しかし、私はブラウザに戻り、最後のレッスンで構築したデモを見て始めるつもりの4つのサイズについて話しています。

9
00:00:31,200 --> 00:00:34,100
 

10
00:00:34,290 --> 00:00:41,700
 

11
00:00:41,700 --> 00:00:48,660
 

12
00:00:48,660 --> 00:00:50,810
だから、私たちは2列に1列に12列、3列には3列の列があり、ウィンドウのサイズを変更すると何が起こるのかを見ています。

13
00:00:50,850 --> 00:00:57,420
今では全部で12単位を占め、互いの上に積み重なります。サイズを変更し続けると、実際には何の変更も気付かないでしょう。

14
00:00:57,420 --> 00:00:59,400
 

15
00:00:59,460 --> 00:01:03,140
彼らはすべて12台を持ち続け、互いの上に積み重ねています。

16
00:01:03,330 --> 00:01:08,620
しかし実際には4つの異なるサイズがあり、4つの異なるレイアウトを持つことができます。

17
00:01:09,030 --> 00:01:13,850
今はこれがモバイルレイアウトです。これは余分な小さなアクセスです。

18
00:01:14,040 --> 00:01:20,730
それから、私たちは小さすぎて、タブレットのようになり、ここにあるのは媒体です。

19
00:01:20,730 --> 00:01:26,590
これは、ラップトップや小さいブラウザウィンドウにあるでしょうし、ここには大きなものがあります。

20
00:01:26,940 --> 00:01:31,340
だから、私たちが大きなものになるときはここを除いて違いがあるようには見えません。

21
00:01:31,350 --> 00:01:31,870
 

22
00:01:31,980 --> 00:01:38,330
しかし、4つのサイズがあり、それらのサイズごとに比率と比率を指定できます。

23
00:01:38,460 --> 00:01:44,850
したがって、グリッドオプションの下のブートストラップドックには、グリッドシステムがあります。テーブルがあり、4つの異なるサイズが表示されています。

24
00:01:44,850 --> 00:01:46,900
 

25
00:01:47,130 --> 00:01:53,220
 

26
00:01:53,400 --> 00:01:59,190
 

27
00:01:59,190 --> 00:02:02,940
だから、小さなデバイス、すなわち、タブレットメディアデバイスのデスクトップである小型デバイスよりも電話のような特別なデバイスがあります。それは、幅が1200ピクセルを超える大型デバイスやデスクトップです。

28
00:02:03,000 --> 00:02:08,630
S. M. 小さいです。 D. 私たちが使ってきたものはLGです。

29
00:02:09,030 --> 00:02:14,170
だから私は私のレイアウトが大きなブレークポイントで同じままにしたいとしましょう。

30
00:02:14,340 --> 00:02:22,020
ここでメディアに切り替えると、それぞれが1つのユニットを占める12個の列が必要になります。

31
00:02:22,800 --> 00:02:25,320
代わりにそれぞれ2つのユニットを使いたいと思います。

32
00:02:25,320 --> 00:02:27,670
だから、私たちは6人になるだろう。

33
00:02:27,690 --> 00:02:29,510
そして、さらに6つ下に。

34
00:02:29,820 --> 00:02:32,880
ですから、それに集中して物事を簡素化しましょう。

35
00:02:33,100 --> 00:02:36,360
私は実際に今のところ2列目を取り除くでしょう。

36
00:02:36,600 --> 00:02:39,170
だから私たちが持っているものはすべてここにある。

37
00:02:39,210 --> 00:02:43,730
だから私たちがこの中断点をそこに打つと、​​私はこれが起こることを望んでいません。

38
00:02:43,740 --> 00:02:48,510
代わりに、私はそれをするために横に6つのコラムをしたい。

39
00:02:48,510 --> 00:02:50,740
私は別のクラスを追加するだけです。

40
00:02:50,940 --> 00:02:58,120
だから私はそれをそれぞれに行い、それは列の媒体になるだろう。

41
00:02:58,200 --> 00:03:05,600
だから、このグリッドが設定されているときには、それぞれのサイズを2単位にして保存して、保存します。

42
00:03:05,640 --> 00:03:07,200
さあ、行きましょう。

43
00:03:07,380 --> 00:03:09,120
フルサイズにします。

44
00:03:09,120 --> 00:03:12,380
私たちは大きなサイズなので何も変わりません。

45
00:03:12,570 --> 00:03:16,190
しかし、今私はここにメディアに切り替える。

46
00:03:16,200 --> 00:03:21,380
彼らはそれぞれ2つのユニットを今持っていることに注意してください。

47
00:03:21,630 --> 00:03:28,230
そして私がそれを縮め続けたら、小さなブレークポイントを打ちました、そして、それはそれぞれのコラムが全部で12個のユニット全体に行き渡って、それが互いの上に積み重なる位置に切り替わります。

48
00:03:28,230 --> 00:03:33,480
 

49
00:03:33,900 --> 00:03:41,040
だから戻って、崇高なものに戻り、古いグリッドを復活させてみましょう。

50
00:03:41,130 --> 00:03:46,410
実際には12種類のコンポーネントが共通しているのは一般的ではないので、これを取り除きます。

51
00:03:46,410 --> 00:03:47,160
 

52
00:03:47,160 --> 00:03:53,300
通常、3つまたは4つの作業をしている場合がありますが、6つの列がありますが、12つの列はかなりまれです。

53
00:03:53,400 --> 00:03:59,550
だからここに戻りましょう。ここでは、オラフル・アーノルドのツアースケジュールから、そのグリッドを再現しようとしています。

54
00:03:59,550 --> 00:04:01,250
 

55
00:04:01,590 --> 00:04:04,200
だから、それは4回に渡って始まります。

56
00:04:04,200 --> 00:04:05,400
その後、縮小します。

57
00:04:05,550 --> 00:04:12,060
ミディアムブレークポイントがあり、私たちはまだ4であり、次に小さなブレークポイントに到達し、2つに移動します。

58
00:04:12,060 --> 00:04:13,100
 

59
00:04:13,140 --> 00:04:15,580
そして、モバイルxまたは小さいものが1つです。

60
00:04:15,990 --> 00:04:20,530
だからこそ、私たちは、構造だけのコンテンツではなく、再作成しようとします。

61
00:04:20,790 --> 00:04:22,080
そこでここに戻ってきます。

62
00:04:22,650 --> 00:04:25,740
そして、私たちは4人から始めたいと思っています。

63
00:04:25,740 --> 00:04:31,860
これは、それぞれが3つのユニットを取り上げ、ここでテキストを変更できることを意味します。

64
00:04:31,860 --> 00:04:35,510
そして、それを言うか、または日付をつけましょう。

65
00:04:35,610 --> 00:04:43,470
だから私たちが新鮮だったならば、私たちは4つの列を通過するべきです。

66
00:04:43,470 --> 00:04:46,320
 

67
00:04:46,320 --> 00:04:48,720
唯一の違いは実際のコンテンツです。

68
00:04:48,720 --> 00:04:55,650
だから、各列の代わりに、H3段落のボタンを追加し、何か他の内容を追加するだけです.Hを少し必要とします。

69
00:04:55,650 --> 00:05:00,190
R. それは同じように見え、私たちはまだ同じ間隔を得るでしょう。

70
00:05:00,600 --> 00:05:01,200
大丈夫。

71
00:05:01,200 --> 00:05:03,790
だから次のブレークポイントは、私たちが中に入るときです。

72
00:05:03,960 --> 00:05:05,840
それは4にとどまります。

73
00:05:06,300 --> 00:05:12,570
だから、私たちがする必要があると思うことは中程度のブレークポイントを指定することなので、これをヒットするとそれぞれは3つの単位を取ります。

74
00:05:12,570 --> 00:05:15,440
 

75
00:05:15,600 --> 00:05:26,810
私たちは昇華に戻ってそれを追加し、再び3つのメディアと呼ぶことができ、3つのユニットからスタートし、それぞれ3つのユニットに入り、3つのユニットに留まり、次に小さくなり、今度は12ユニットになります。

76
00:05:26,840 --> 00:05:33,300
 

77
00:05:33,290 --> 00:05:34,190
 

78
00:05:34,310 --> 00:05:42,610
そして、私たちがこれに従うことを望んでいるのは、小さいサイズになったときに、それぞれ6単位を使うから、ここに入り、それを小さな列6に加えることができるということです。

79
00:05:43,400 --> 00:05:49,140
 

80
00:05:49,400 --> 00:05:57,070
したがって、これらの大きなサイズはそれぞれ、中型サイズで12のうち3単位が25％を占めます。

81
00:05:57,120 --> 00:05:57,920
同じこと。

82
00:05:58,010 --> 00:06:04,730
彼らは25％を占め、次に小さなサイズではそれぞれ50％を占めるタブレット用です。

83
00:06:05,480 --> 00:06:12,980
ですから、それぞれ3分後に3単位を更新してから、少しずつヒットしましょう。

84
00:06:13,040 --> 00:06:17,880
そして今、彼らはそれぞれ6つのユニットを持っているし、我々はさらに小さなものを持っていた。

85
00:06:17,940 --> 00:06:21,620
それから、彼らは自動的に全部で12個のユニットを取ります。

86
00:06:21,810 --> 00:06:27,350
あなたが小さなものに当たったとき、彼らが1つのユニットを横切って行くのを見ることができます。

87
00:06:27,380 --> 00:06:28,010
大丈夫。

88
00:06:28,010 --> 00:06:33,240
だから、私たちが崇高なるものに戻るならば、私たちができる小さな変化があります。

89
00:06:33,770 --> 00:06:39,560
この3つのユニットを大型と中型の2つに指定していることがわかります。

90
00:06:39,560 --> 00:06:46,700
 

91
00:06:46,740 --> 00:06:51,650
 

92
00:06:51,650 --> 00:06:54,320
私たちは実際に大きな3列を取り除き、そこにメディアを入れて、ブートストラップは、メディアを3に設定しているので、明示的に大きく設定していないので、メディアに対して設定したものだけを適用し、適用しますそれは大きい。

93
00:06:54,440 --> 00:06:55,880
それは同じように動作します。

94
00:06:55,880 --> 00:06:56,650
何も変わっていません。

95
00:06:56,660 --> 00:07:02,420
私はすでに、中位のブレークポイントはまだそこにあり、我々の小さな作品と同じ見た目をリフレッシュしています。

96
00:07:02,420 --> 00:07:04,800
だから私たちはそれを二度指定する必要はありません。

97
00:07:05,300 --> 00:07:10,460
だから私はNに来てください。 Z. 私たちはそれを取り除き、全く同じように動作します。

98
00:07:10,520 --> 00:07:14,990
実際に見てみると、Webサイトに行きます。

99
00:07:15,000 --> 00:07:19,770
私は、これらのそれぞれを調べると、そこに行くことがわかるでしょう。

100
00:07:19,780 --> 00:07:22,590
列の小さな6列の媒体3。

101
00:07:22,790 --> 00:07:26,990
今私たちが持っていたのは、これら4つの異なるサイズをカバーしたものです。

102
00:07:27,070 --> 00:07:30,710
うまくいけば、グリッドシステムがいかに多目的かつ有用であるかを見ることができます。

103
00:07:30,750 --> 00:07:31,520
戻ってみましょう。

104
00:07:31,740 --> 00:07:33,960
そして今、私はグリッドの入れ子に取り組んでいきます。

105
00:07:34,310 --> 00:07:40,130
ここでは、この最初の列の代わりに、半分に分割し、左側に何かを、右側に何かを入れたいとしましょう。

106
00:07:40,130 --> 00:07:42,710
 

107
00:07:42,800 --> 00:07:47,340
私は実際に行くことができ、そこの別の列に追加します。

108
00:07:47,370 --> 00:07:49,230
したがって、クラスは行と等しくなります。

109
00:07:49,740 --> 00:07:56,300
 

110
00:07:56,300 --> 00:08:06,620
そして、その行の中で、私は列に等しい等級のクラスにdivを追加することができます。今は大きすぎる列6と大きな列6を追加して、ここで半分のテキストと他の半分を書きます。

111
00:08:06,710 --> 00:08:09,100
 

112
00:08:09,360 --> 00:08:18,170
前半と後半に変更しましょう。保存して古典的なピンクにしましょう。

113
00:08:18,200 --> 00:08:24,000
だから、私たちが今やったことは、3つがまだ横断しているか、あるいは4つ横切っていることです。

114
00:08:24,000 --> 00:08:30,290
 

115
00:08:30,290 --> 00:08:35,420
 

116
00:08:36,330 --> 00:08:38,530
1つ2つ3つ4つ、最初の1つは別の行を追加してさらに12単位に分割し、最初の6つを使用して、次の6つを使用して保存またはリフレッシュします。

117
00:08:38,960 --> 00:08:41,770
そこに行くとそれはさらに明らかにします。

118
00:08:41,780 --> 00:08:43,280
もう一つのクラスを私に教えてください。

119
00:08:43,400 --> 00:08:45,170
それをオレンジ色と呼んでみましょう。

120
00:08:45,370 --> 00:08:46,940
まだ存在しません。

121
00:08:46,940 --> 00:09:00,030
これはオレンジ色で表示され、背景色はオレンジ色で表示され、赤色のピクセルを赤色で順番に追加し、実際にはダッシュをOKにします。

122
00:09:00,140 --> 00:09:04,870
 

123
00:09:05,540 --> 00:09:10,530
リフレッシュすると、今、これらの4つのことが起こっていることがわかります。

124
00:09:10,520 --> 00:09:16,880
それぞれが3つのユニットを取りますが、最初のユニットを6つのユニットと6つのユニットに分割します。その行を追加すると、行を追加する必要があります。

125
00:09:16,880 --> 00:09:19,160
 

126
00:09:19,160 --> 00:09:22,520
列の代わりに列がある場所でこれをやり始めることはできません。

127
00:09:22,520 --> 00:09:23,980
行がなければなりません。

128
00:09:24,260 --> 00:09:25,520
もう一度やりましょう。

129
00:09:25,910 --> 00:09:31,090
この最後のものを6個の小さな小片に入れてみましょう。

130
00:09:31,500 --> 00:09:39,770
だから、そのdivクラスの内部に行を追加する必要があります。

131
00:09:39,770 --> 00:09:48,770
別のdivが必要です。これらのうち6つの列があります。ここでは、2つの列のそれぞれが12単位のうち2つを占めています。

132
00:09:48,770 --> 00:09:50,310
 

133
00:09:50,310 --> 00:09:58,070
私たちは6つを求めてから、それぞれに進み、そのオレンジ色のクラスを追加してみましょう。

134
00:09:58,080 --> 00:09:59,370
 

135
00:10:00,440 --> 00:10:01,150
OK。

136
00:10:01,640 --> 00:10:06,540
だから我々は4つの大きな柱が最初の柱を横切って半分に分かれています。

137
00:10:06,650 --> 00:10:12,410
私たちが6つの部分に分割した最後のものは何も見えないので、そこにテキストを置かなかった。

138
00:10:12,920 --> 00:10:14,200
だからそれをやりましょう。

139
00:10:14,270 --> 00:10:20,100
それとも、実際にはオレンジ色のクラスまたは高さを与えるだけです。

140
00:10:20,100 --> 00:10:22,950
それらをそれぞれ50ピクセルにしましょう。

141
00:10:22,940 --> 00:10:29,330
そして私がリフレッシュすると、クラスオレンジ色のオレンジ色のものはすべて、高さが50ピクセルになります。

142
00:10:29,340 --> 00:10:29,960
 

143
00:10:30,260 --> 00:10:37,640
そこで、2つの均等に分割された列と、これらの4つの均等に分割されたトップレベルの列の中の6つの均等に分割された列を持っています。

144
00:10:37,730 --> 00:10:40,880
 

145
00:10:40,880 --> 00:10:43,700
それが、グリッドシステムの重要な部分のすべてです。

146
00:10:43,860 --> 00:10:46,420
一言で言えば、我々はすべての行に12ユニットを持っています。

147
00:10:46,560 --> 00:10:48,300
あなたは好きなようにそれらを分割します。

148
00:10:48,360 --> 00:10:56,360
4つのサイズがありますが、中小規模のものがあります.4つの異なるサイズの4つのブレークポイントのいずれかでこれらの12の単位を再割り当てすることができます。

149
00:10:56,370 --> 00:10:58,900
 

150
00:10:59,000 --> 00:11:03,050
それで、あなたはこれらの素敵なレスポンシブなレイアウトに仕上がり、一般的に見ているパターンはモバイルサイトにあります。

151
00:11:03,410 --> 00:11:04,870
 

152
00:11:04,880 --> 00:11:10,700
私たちがこれを縮小すれば、ここにあるように、余分な小さなサイズでは、ほとんどのサイトはコンテンツを互いの上に重ねて表示します。

153
00:11:10,700 --> 00:11:12,830
 

154
00:11:12,840 --> 00:11:18,180
これは、同じ行に複数のコンテンツがないモバイル上の一般的なレイアウトです。

155
00:11:19,080 --> 00:11:19,540
OK。

156
00:11:19,700 --> 00:11:20,990
昇華に戻ってみましょう。

157
00:11:21,090 --> 00:11:23,290
3つの主な目的について私が話したことを確認してください。

158
00:11:23,610 --> 00:11:28,160
そこで、グリッドシステムのポイントが私たちの物事を築くのに役立つという目的について話しました。

159
00:11:28,160 --> 00:11:29,270
それは素晴らしいです。

160
00:11:29,660 --> 00:11:31,690
4つの異なるサイズを理解する。

161
00:11:31,700 --> 00:11:36,740
それらは大きな中小小規模で小さいネストされたグリッドです。

162
00:11:37,040 --> 00:11:42,450
そして、ここでは列の代わりに行を追加して、次にその行に次のビデオのさらに別の列を埋め込むことができます。

163
00:11:42,600 --> 00:11:45,790
 

164
00:11:45,840 --> 00:11:48,650
グリッドシステムを使って簡単な画像グリッドを構築しよう