1
00:00:00,410 --> 00:00:06,720
このレッスンでは、ブートストラップグリッドシステムを紹介します。グリッドシステムは、おそらく、人々がブートストラップを使用してフォームの昼寝をするナンバーワンの理由です。

2
00:00:06,720 --> 00:00:11,310
 

3
00:00:11,310 --> 00:00:16,500
このボタンは、ブートストラップを使用してスタイルを変更することができますが、ブートストラップグリッドシステムは、アプリケーション全体のスケルトンとして機能します。

4
00:00:16,500 --> 00:00:19,290
 

5
00:00:19,440 --> 00:00:23,980
構造を追加してアプリケーションにレイアウトするのは、本当に簡単な方法です。

6
00:00:24,000 --> 00:00:27,480
では、グリッドシステムでできることのいくつかの例を紹介しましょう。

7
00:00:27,480 --> 00:00:33,990
私はいくつかのサイトをBootstrap ex-beauからオープンしています。最初のものは水の投手のためのプロダクトページです。

8
00:00:34,380 --> 00:00:36,140
 

9
00:00:36,240 --> 00:00:37,530
ここにレイアウトを確認してください。

10
00:00:37,560 --> 00:00:46,740
3つのアイテムが並んでいます。サイズが変わるにつれてサイズが小さくなるにつれて通知されます。次に、タブレットのサイズに合わせて重ねて表示されます。

11
00:00:46,890 --> 00:00:50,310
 

12
00:00:51,090 --> 00:00:56,940
それは、これと同じように、これと同じように、ブートストラップ・グリッド・システムのようなものです。

13
00:00:57,270 --> 00:01:02,100
それらは拡大縮小し、その後、タブレットと携帯サイズで積み重ねます。

14
00:01:02,880 --> 00:01:04,110
別の例があります。

15
00:01:04,140 --> 00:01:10,440
これはアイスランドのミュージシャン、オラフル・アーノルドスで、これはこのサイトをスクロールダウンしています。

16
00:01:10,560 --> 00:01:19,260
グリッドシステムで構築されたコンテンツがありますが、同様のレイアウトを見ることができますが、グリッドシステムで構築されているだけではありません。

17
00:01:19,260 --> 00:01:23,150
 

18
00:01:23,160 --> 00:01:25,210
これはここの内容です。

19
00:01:26,100 --> 00:01:28,350
これらのツアー日程はここにあります。

20
00:01:28,350 --> 00:01:33,930
 

21
00:01:34,950 --> 00:01:39,870
 

22
00:01:39,870 --> 00:01:46,620
 

23
00:01:46,620 --> 00:01:49,220
基本的にグリッドシステムを使用すると、コンテンツの一部が画面の100％を占めるようにしたい場合、ヒットするまで画面の幅の25％を占めるようにすることができますモバイル側やタブレットのサイズがそれぞれ50になり、モバイルにヒットしたらそれぞれ100％を占めます。

24
00:01:49,860 --> 00:01:50,850
同じことがここで行われました。

25
00:01:50,850 --> 00:01:56,660
それは私たちが画面でそれを分割し、いくつのピースを選ぶかを選ぶことができます。

26
00:01:56,790 --> 00:02:00,660
テイクアップのための私たち自身の要素のそれぞれは、私たちがすでに見た最後のものです。

27
00:02:00,660 --> 00:02:05,670
クリエイティブなTim砂漠と呼ばれるこの似たようなコンテンツをスクロールします。

28
00:02:05,680 --> 00:02:09,530
グリッドシステムとここにもあります。

29
00:02:09,570 --> 00:02:11,430
これはすべてグリッドシステムで行われます。

30
00:02:11,430 --> 00:02:15,590
これは本当に大変エキサイティングなものです。

31
00:02:15,760 --> 00:02:20,640
それは、私たちがブートストラップなしでやらなければならないことと比べて簡単に物事を築くのに役立ちます。

32
00:02:20,670 --> 00:02:25,660
だから私たちはブートストラップグリッドシステムと、ブートストラップを使って作るすべてのアプリケーションを使用しています。

33
00:02:25,890 --> 00:02:27,500
そして、あなたにそれらの1つを見せてください。

34
00:02:27,540 --> 00:02:33,940
これは私たちのヨーヨーキャンプのアプリケーションであり、私たちは横断したキャンプ場のグリッドを持っていることに気づくでしょう。

35
00:02:33,960 --> 00:02:39,750
そして、画面のサイズを変更すると、それらが拡大縮小して表示され、次に2つに移動してからMobileに移動します。

36
00:02:40,050 --> 00:02:44,480
私たちは1つに行くと、モバイルレイアウトを使用することは本当に素敵です。

37
00:02:44,760 --> 00:02:47,840
だからこそ、グリッドシステムを使う場所は1つだけです。

38
00:02:47,850 --> 00:02:54,060
今度はグリッドシステムを使っていくつかのコードを書いてみましょう。このウィンドウをフルスクリーンで表示して、評価されたタブのブートストラップドットコムを取得して戻ってみましょう。

39
00:02:54,060 --> 00:02:57,800
 

40
00:02:58,050 --> 00:03:00,850
グリッドシステムをクリックすることができます。

41
00:03:00,850 --> 00:03:05,670
グリッドシステムにはかなりのものがありますが、ここでは1つの数字だけを指摘することから始めます12。

42
00:03:06,130 --> 00:03:07,300
 

43
00:03:07,470 --> 00:03:09,890
これは、グリッドシステムの仕組みにとって本当に重要です。

44
00:03:09,900 --> 00:03:15,930
したがって、すべてのコンテナとブートストラップは12の異なる列に分割され、グリッドシステムを使用して、各要素が占めるべき12単位の数を選択することができます。

45
00:03:16,230 --> 00:03:21,150
 

46
00:03:21,150 --> 00:03:27,050
したがって、この場合は、12単位のうち約10単位を取っているように見えます。

47
00:03:27,060 --> 00:03:33,420
 

48
00:03:33,420 --> 00:03:40,320
そして、ここでは12単位のうち2つを、あるいは9と3をとっているかもしれませんが、左側の12個のうちより多くのものがあり、次に右側の12個のうちのわずかな部分がある割合を持っています。

49
00:03:40,770 --> 00:03:46,510
私たちがここにキャンプに戻ると、これは私たちのコンテナです。

50
00:03:46,890 --> 00:03:51,670
そして、これらのうちの1つはそれぞれ12ユニットからなり、それぞれが3ユニットを占めます。

51
00:03:51,810 --> 00:03:56,850
だから、私たちは4つの等しい列で終わり、次にここでそれを縮小します。

52
00:03:56,880 --> 00:04:00,040
今、彼らはそれぞれ12人のうち6人を占めています。

53
00:04:00,240 --> 00:04:02,840
だから、数字12は非常に重要です。

54
00:04:02,850 --> 00:04:03,660
今すぐ右に行こう。

55
00:04:03,660 --> 00:04:05,130
私たちの最初のグリッド。

56
00:04:05,250 --> 00:04:12,710
だから私はグリッドファイルを持っていますが、それはSSファイルのブートストラップを除いて空です。私たちはコンテナを定義する必要があります。

57
00:04:12,870 --> 00:04:14,640
 

58
00:04:14,860 --> 00:04:18,180
Boucekグリッドを使用するたびに、コンテナの内側に配置する必要があります。

59
00:04:18,210 --> 00:04:22,230
クラスはコンテナと同じです。

60
00:04:22,290 --> 00:04:28,950
そして最初に行うべきことは、各行の代わりに行と等しいクラスを持つ別のdivを見つけることです。

61
00:04:29,220 --> 00:04:31,100
私たちは12ユニットから選ぶことができます。

62
00:04:31,350 --> 00:04:37,110
だから私たちがやることから始めようとしているのは、ちょうど50の分割を行い、12のうち6つを占める1

63
00:04:37,110 --> 00:04:40,730
divと、12のうちの6を占める別のdivです。

64
00:04:41,070 --> 00:04:42,050
それでは、今やってみましょう。

65
00:04:42,120 --> 00:04:48,060
divを追加して2番目の部門を追加して、今は2つのデバイスだけが空です。

66
00:04:48,330 --> 00:04:49,430
あなたは働くつもりはありません。

67
00:04:49,650 --> 00:04:57,000
しかし、私がやることは、最初のクラスにクラスを追加することです。これはちょっと変わった列に見えます。大きな6つは、ここで同じことをします。

68
00:04:57,670 --> 00:05:00,300
 

69
00:05:00,300 --> 00:05:03,520
クラスは列の大きさが6に等しい。

70
00:05:03,630 --> 00:05:05,200
次に、ここにいくつかのコンテンツを追加します。

71
00:05:05,210 --> 00:05:10,880
彼らはちょうど大きな列6を言うでしょう。

72
00:05:10,950 --> 00:05:12,140
同じことがここにあります。

73
00:05:12,210 --> 00:05:18,950
そして私がしているように、節約しましょう。実際にはグリッド自体は見えません。

74
00:05:19,020 --> 00:05:24,300
そのことを明確にするために、ここではスタイルタグの代わりにクラスを定義します。

75
00:05:24,300 --> 00:05:26,670
私がやることは、クラスを定義することです。

76
00:05:26,730 --> 00:05:31,350
私はちょうどそれをピンクと呼ぶでしょう、私はそれらを見ることができるようにこのクラスを2つのdivに適用します。

77
00:05:31,490 --> 00:05:32,820
だから今はただ白です。

78
00:05:32,820 --> 00:05:33,660
国境がない。

79
00:05:33,750 --> 00:05:34,840
ちょっとしたテキスト。

80
00:05:35,010 --> 00:05:36,050
しかし、これを追加すると。

81
00:05:36,180 --> 00:05:37,010
だからピンク。

82
00:05:37,140 --> 00:05:45,660
背景をピンクにして、パープルパープルのパープルを紫色に塗りつぶし、ピンク色のクラスをこれらの2つのdivに適用します。

83
00:05:45,660 --> 00:05:49,950
 

84
00:05:49,950 --> 00:05:52,660
それぞれが6つのユニットを使います。

85
00:05:52,680 --> 00:05:54,570
今戻ってリフレッシュします。

86
00:05:54,900 --> 00:05:55,580
そこに行く。

87
00:05:55,800 --> 00:05:59,640
コンテナのちょうど半分を占める2つのdivがあることがわかります。

88
00:05:59,670 --> 00:06:01,930
コンテナはこことここから始まります。

89
00:06:02,460 --> 00:06:04,530
私たちは2つに分かれています。

90
00:06:04,620 --> 00:06:10,110
だから今戻って少し遊んで3列目に追加してみましょう。

91
00:06:10,410 --> 00:06:16,150
そして今度は中央の列を8単位にして、左右を2単位にします。

92
00:06:16,170 --> 00:06:21,270
だからここでこれらの数字を変更します。

93
00:06:21,280 --> 00:06:22,200
そこに行く。

94
00:06:22,200 --> 00:06:27,960
私たちは真ん中に素敵なセンタリングされたコラムと、サイドバーなどのために使うことができる左右に2つの小さなコラムで終わります。

95
00:06:27,960 --> 00:06:30,900
 

96
00:06:30,900 --> 00:06:34,860
それはブートストラップグリッドシステムの基礎となる非常に基本的な概念です。

97
00:06:34,920 --> 00:06:40,290
私たちは内部で作業しているコンテナを12ユニット持ち、私たちが望むように12ユニットを指定することができます。

98
00:06:40,290 --> 00:06:42,210
 

99
00:06:42,240 --> 00:06:49,830
だから、私たちは12列の大きな列を1列の大きな列にすることができ、このように12回行うことができます。

100
00:06:49,830 --> 00:06:52,170
 

101
00:06:52,290 --> 00:06:53,600
私がカウントを失わないことを確認してください。

102
00:06:54,090 --> 00:06:54,670
そこに行く。

103
00:06:54,690 --> 00:06:56,620
そして、私たちは今、この2つを取り除くでしょう。

104
00:06:56,820 --> 00:07:01,630
そして私が新鮮ならば、あなたは一列に12の均等な列があることがわかります。

105
00:07:01,650 --> 00:07:07,570
それぞれが1つのユニットを取り上げ、次に私は他の行を追加できることを示します。

106
00:07:07,740 --> 00:07:14,390
それでは、今度はdivクラスが行と等しくなるようにしましょう。それは、私たちが持っている最初の行の下に行くだけです。

107
00:07:14,730 --> 00:07:18,870
だからこの中にdivをしましょう。

108
00:07:19,020 --> 00:07:23,350
クラスはDaschの列と等しく、4つの行為をしましょう。

109
00:07:23,370 --> 00:07:27,280
だから私たちはそれを3つの均等な大きさの単位に分割します。

110
00:07:27,360 --> 00:07:36,260
だから彼女のための列の盛りはそれのように行く。

111
00:07:36,420 --> 00:07:44,190
今すぐ見てみましょう。ピンク色のクラスを適用していないことがわかりますが、均等なサイズの列が3つ作成された3つのサイズの列が作成されています。

112
00:07:44,190 --> 00:07:49,260
 

113
00:07:49,470 --> 00:07:53,240
そこでピンク色のクラスを追加するだけで、何が起こっているのかを簡単に確認することができます。

114
00:07:53,940 --> 00:07:54,800
そしてそこに行く。

115
00:07:55,140 --> 00:07:57,350
これは単なる例に過ぎません。

116
00:07:57,420 --> 00:08:01,470
これらのピンク色の箱は実際には私たちのサイトにはありません。

117
00:08:01,710 --> 00:08:08,730
しかし、ここで見ることができるように、行があり、各行には4つの列があるグリッドがあります。

118
00:08:08,760 --> 00:08:15,830
それぞれが3つのユニットの幅、またはこの創造的なティムサイトでここにあります。

119
00:08:15,900 --> 00:08:19,830
3つの列がそれぞれ4つの単位幅を横切っています。

120
00:08:20,070 --> 00:08:20,900
同じことがここにあります。

121
00:08:20,900 --> 00:08:23,860
3つの列がここにあります。

122
00:08:23,910 --> 00:08:24,960
我々は4つの列を持っています。

123
00:08:24,960 --> 00:08:26,840
それぞれに3つのユニットがあります。

124
00:08:27,390 --> 00:08:30,650
これは、次のビデオのグリッドの非常に基本的なものです。

125
00:08:30,660 --> 00:08:35,850
グリッドを反応させる方法と、さまざまなサイズの異なるレイアウトを作成する方法について説明します。

126
00:08:35,850 --> 00:08:38,230
今、我々は大きなコラムで作業しています。

127
00:08:38,250 --> 00:08:43,050
 

128
00:08:43,050 --> 00:08:49,080
私は大きな手段で説明しましたが、他の3つのサイズがあり、次のビデオでそれらを見ることができます。また、ネストされたグリッドをどのように書くことができ、これらの列の中に別の行を追加し、さらに12個にする。

129
00:08:49,080 --> 00:08:52,290