1
00:00:00,390 --> 00:00:07,550
이번 레슨에서 우리는 부트 스트랩 그리드 작업을 계속할 것입니다. 특별히 강조하고 싶은 두 가지 주요 기능이 있습니다.

2
00:00:07,590 --> 00:00:12,070
첫 번째는 간단히 언급 한 네 가지 크기를 다루고 싶다는 것입니다.

3
00:00:12,150 --> 00:00:18,530
우리는 Elgie 칼럼을 가지고 일해 왔으며 그 의미에 대해 이야기하지 않았으며 이것도 사용할 수있는 다른 세 가지 크기가 있습니다.

4
00:00:18,600 --> 00:00:25,820
또한 다른 그리드 내부에 그리드를 중첩하여 12 개의 단위를 더 작은 조각으로 더 나눌 수있는 방법을 보여줍니다.

5
00:00:26,250 --> 00:00:34,100
그러나 네 가지 크기에 대해 이야기하면서 시작하겠습니다. 먼저 브라우저로 돌아가서 마지막 강의에서 작성한 데모를 살펴보십시오.

6
00:00:34,290 --> 00:00:50,810
그래서 우리는 12 개의 컬럼을 가진 2 개의 컬럼을 가지고 있습니다. 하나는 3 개의 컬럼을 가지며, 윈도우의 크기를 조정하면 어떻게 될지를 볼 수 있습니다. 그리고 나서 모든 컬럼에서 모든 것이 바뀌는 중단 점을 찾습니다.

7
00:00:50,850 --> 00:00:59,400
이제 전체 12 단위를 차지하고 서로 겹쳐서 크기를 유지하면서 변경 사항을 실제로 알 수 없습니다.

8
00:00:59,460 --> 00:01:03,140
그들은 모두 12 대를 차지하고 서로 쌓아 올리고 있습니다.

9
00:01:03,330 --> 00:01:08,980
그러나 실제로 네 가지 크기가 있으므로 지정할 수 있습니다. 그래서 네 가지 레이아웃을 가질 수 있습니다.

10
00:01:09,030 --> 00:01:13,850
지금 이것은 여분의 작은 액세스 인 모바일 레이아웃입니다.

11
00:01:14,040 --> 00:01:20,730
그런 다음 우리는 너무 작아서 태블릿과 비슷한 모양으로되어 있고 여기에있는 매체가 있습니다.

12
00:01:20,730 --> 00:01:26,590
이것은 노트북이나 작은 브라우저 창에있을 것이고 그 다음 우리는 여기에 있습니다.

13
00:01:26,940 --> 00:01:31,870
그래서 우리가 더 커질 때를 제외하고는 여기에 차이점이 많이있는 것 같지 않습니다.

14
00:01:31,980 --> 00:01:38,330
그러나 네 가지 크기가 있으며 각 크기에 대한 비율과 비율을 지정할 수 있습니다.

15
00:01:38,460 --> 00:01:46,900
그리드 옵션 아래의 부트 스트랩 부두에서 그리드 시스템을 보면 테이블이 있다는 것을 볼 수 있으며 네 가지 크기를 보여줍니다.

16
00:01:47,130 --> 00:02:02,940
따라서 태블릿 매체 장치 데스크톱 인 대형 장치 또는 12 백 픽셀보다 큰 대형 데스크톱 인 소형 장치보다 전화기와 같은 소형 장치가 있으며 각 열에는 접두어가있어 열 액세스가 실제로 작습니다.

17
00:02:03,000 --> 00:02:08,630
S.M. 작고 M.D.는 중간 크기이고 LG는 우리가 사용해온 크기가 큽니다.

18
00:02:09,030 --> 00:02:14,170
그래서 큰 브레이크 포인트에서 레이아웃을 똑같이 유지하길 원한다고 가정 해 봅시다.

19
00:02:14,340 --> 00:02:22,410
그리고 매체를 여기 오른쪽으로 전환하면 각각이 하나의 단위를 차지하는이 12 개의 컬럼이 필요합니다.

20
00:02:22,800 --> 00:02:25,320
나는 그들 각각이 2 개의 유닛을 대신 사용하기를 바란다.

21
00:02:25,320 --> 00:02:27,670
그래서 우리는 여섯 명으로 끝날 것입니다.

22
00:02:27,690 --> 00:02:29,510
그리고 나서 아래 6 개를 추가로 입력하십시오.

23
00:02:29,820 --> 00:02:32,880
그래서 그것에 집중하고 사물을 단순화합시다.

24
00:02:33,100 --> 00:02:36,360
나는 실제로 우리 두 번째 줄을 제거 할 것이다.

25
00:02:36,600 --> 00:02:39,170
우리가 갖고있는 모든 것이 바로 여기 있습니다.

26
00:02:39,210 --> 00:02:43,730
그래서 우리가이 중간 중단 점을 맞았을 때 나는 이것이 일어나기를 원하지 않습니다.

27
00:02:43,740 --> 00:02:48,510
대신 나는 그것을하기 위해 가로 질러가는 6 개의 기둥이 필요하다.

28
00:02:48,510 --> 00:02:50,740
다른 수업을 추가하기 만하면됩니다.

29
00:02:50,940 --> 00:02:58,120
그래서 나는 그것을 각자에게 할 것이고 그것은 열 매체가 될 것입니다.

30
00:02:58,200 --> 00:03:05,600
그래서이 그리드를 중간 크기로 설정하면 각각 2 단위를 취하고 저장하게됩니다.

31
00:03:05,640 --> 00:03:07,200
이제 가자.

32
00:03:07,380 --> 00:03:09,120
그것을 전체 크기로 만드십시오.

33
00:03:09,120 --> 00:03:12,380
우리는 큰 크기 때문에 아무것도 바뀌지 않습니다.

34
00:03:12,570 --> 00:03:16,190
하지만 이제 내가 여기서 매체로 전환 할 때.

35
00:03:16,200 --> 00:03:21,380
그들 각자가 지금 두 대를 차지하고 있으며 우리는 여섯 대를 보게됩니다.

36
00:03:21,630 --> 00:03:33,480
그리고 계속 축소하면 작은 브레이크 포인트가 발생하고 각 열이 이제 전체 12 단위로 이동하여 서로 겹쳐집니다.

37
00:03:33,900 --> 00:03:41,040
다시 돌아가서 우리의 숭고한 모습으로 돌아가 보자.

38
00:03:41,130 --> 00:03:47,160
그래서 우리는 실제로이 12 개의 다른 구성 요소를 가로 지르는 것이 일반적이지 않기 때문에이 것을 제거 할 것입니다.

39
00:03:47,160 --> 00:03:53,300
일반적으로 3 ~ 4 개로 작업하는 경우가 있지만 6 개이지만 12 개의 개별 열은 매우 드뭅니다.

40
00:03:53,400 --> 00:04:01,250
이제 다시이 자리로 돌아가서 우리가 할 일은 올라프 아놀드의 투어 일정에서 그리드 플레이를 시도하고 재현하는 것입니다.

41
00:04:01,590 --> 00:04:04,200
그래서 4시에 시작합니다.

42
00:04:04,200 --> 00:04:05,400
그런 다음 축소합니다.

43
00:04:05,550 --> 00:04:13,100
중간 휴식 지점이 있고 우리는 여전히 4시에 있습니다. 그리고 나서 작은 휴식 지점에 도달하고 우리는 두 곳으로갑니다.

44
00:04:13,140 --> 00:04:15,580
그리고 모바일 x 또는 작은 하나입니다.

45
00:04:15,990 --> 00:04:20,530
그래서 우리가 시도하고 구조만으로 콘텐츠를 재창조하지 않습니다.

46
00:04:20,790 --> 00:04:22,080
그래서 우리는 여기서 돌아갈거야.

47
00:04:22,650 --> 00:04:25,740
그리고 우리는 네 가지로 시작하고 싶습니다.

48
00:04:25,740 --> 00:04:31,860
즉, 한 명당 3 단위를 취한 다음 여기에서 본문을 변경할 수 있습니다.

49
00:04:31,860 --> 00:04:35,510
그리고 그냥 말하거나 데이트하자.

50
00:04:35,610 --> 00:04:46,320
그래서 우리가 신선하다면 우리는 네 개의 기둥을 가로 질러 가야합니다. 우리가하는 것은 정확히 네 명이 시작하는 것입니다.

51
00:04:46,320 --> 00:04:48,720
그리고 유일한 차이는 실제로 실제 내용입니다.

52
00:04:48,720 --> 00:05:00,190
따라서 각 열 대신에 단락 3 개의 단락을 추가하고 약간의 H.R이 필요한 다른 모든 내용을 추가하면 우리는 여전히 같은 간격을 갖게됩니다.

53
00:05:00,600 --> 00:05:01,200
괜찮아.

54
00:05:01,200 --> 00:05:03,790
그래서 다음 중점은 우리가 매체에 도달 할 때입니다.

55
00:05:03,960 --> 00:05:05,840
그것은 4시에 머물러 있습니다.

56
00:05:06,300 --> 00:05:15,440
따라서 우리가해야 할 일은 중형 브레이크 포인트를 지정하는 것입니다. 그래서 우리가이 작업을 수행 할 때마다 각각 3 개의 유닛을 사용해야합니다.

57
00:05:15,600 --> 00:05:34,190
우리는 다시 숭고하게 돌아가서 그것을 추가하고 다시 3을 중간이라고 부르면 3 개의 유닛으로 시작하여 3 개의 유닛에 머문 다음 3 개의 유닛에 머물러 있습니다. 그리고 나서 우리는 작아지고 이제는 12 개의 유닛이됩니다.

58
00:05:34,310 --> 00:05:49,140
그리고 우리가 이것을 따르기 위해 원하는 것은 우리가 작은 크기에 도달했을 때 각각 6 개의 유닛을 차지하므로 여기에 들어가 작은 6 열에 추가 할 수 있다는 것입니다.

59
00:05:49,400 --> 00:05:57,070
따라서 이들 각각의 큰 크기는 중간 크기에서 12 개 중 25 개를 차지합니다.

60
00:05:57,120 --> 00:05:57,920
같은 것.

61
00:05:58,010 --> 00:06:05,480
그들은 25 퍼센트를 차지하고 작은 사이즈는 태블릿을위한 것이며 각각 50 퍼센트를 차지합니다.

62
00:06:05,480 --> 00:06:12,980
그러니 각각을 3 분간 새로 고침 한 다음 3 단위를 새로 고치고 작게 칠하십시오.

63
00:06:13,040 --> 00:06:17,880
그리고 이제 그들은 각각 6 개 단위를 취한 다음 여분의 작은 단위를 가졌습니다.

64
00:06:17,940 --> 00:06:21,620
그러면 그들은 자동으로 우리가 원하는 12 개의 유닛을 모두 사용합니다.

65
00:06:21,810 --> 00:06:27,350
우리가 작을 때 우리는 그들이 한 유닛을 가로 질러 가기를 원한다는 것을 알 수 있습니다.

66
00:06:27,380 --> 00:06:28,010
괜찮아.

67
00:06:28,010 --> 00:06:33,240
그래서 우리는 우리가 숭고하게 돌아 간다면 우리가 할 수있는 작은 변화가 있다는 것을 알았습니다.

68
00:06:33,770 --> 00:06:39,560
대형 및 중형에 대해이 세 가지 단위를 두 번 지정하고 있음을 알 수 있습니다.

69
00:06:39,560 --> 00:06:54,320
우리는 실제로 큰 열 3 개를 없애고 매체를 넣을 수 있습니다. 부트 스트랩은 매체를 3으로 설정하고 크기를 명시 적으로 설정하지 않으므로 매체에 설정 한 내용을 적용하고 적용합니다 그것은 큰 것입니다.

70
00:06:54,440 --> 00:06:55,880
그래서 그것은 같은 방식으로 작동합니다.

71
00:06:55,880 --> 00:06:56,650
아무것도 바뀌지 않았습니다.

72
00:06:56,660 --> 00:07:02,420
나는 이미 중간 크기의 브레이크 포인트가 그대로 남아 있고 우리의 작은 작품들과 똑같이 생겼다.

73
00:07:02,420 --> 00:07:04,800
그래서 우리는 그것을 두 번 지정할 필요가 없습니다.

74
00:07:05,300 --> 00:07:10,460
그러니 그냥 N.Z. 우리는 그걸 없애고 똑같은 방식으로 작동합니다.

75
00:07:10,520 --> 00:07:14,990
사실 우리가 살펴 본다면 우리는 웹 사이트에 간다.

76
00:07:15,000 --> 00:07:19,770
나는 우리가이 각각을 검사한다면 우리가 거기에 갈 수 있음을 알게 될 것입니다.

77
00:07:19,780 --> 00:07:22,590
열 작은 여섯 열 매체 세.

78
00:07:22,790 --> 00:07:26,990
지금까지 우리가 가지고 있었던 것과 정확히 4 가지 다른 크기를 다루었습니다.

79
00:07:27,070 --> 00:07:30,710
바라건대 당신은 그리드 시스템이 얼마나 다양하고 유용 할 수 있는지 볼 수 있습니다.

80
00:07:30,750 --> 00:07:31,520
다시 가자.

81
00:07:31,740 --> 00:07:33,960
이제는 중첩 그리드를 다룰 것입니다.

82
00:07:34,310 --> 00:07:42,710
이 첫 번째 열 대신 여기에서 반으로 나누고 그 왼쪽에 뭔가가 있고 오른쪽에 뭔가가 있다고 가정 해 봅시다.

83
00:07:42,800 --> 00:07:47,340
나는 실제로 거기에 또 다른 행을 추가 할 수 있습니다.

84
00:07:47,370 --> 00:07:49,230
따라서 클래스는 행과 같습니다.

85
00:07:49,740 --> 00:08:09,100
그리고 그 행의 내부에서 저는 열과 같은 클래스로 div에 추가 할 수 있습니다. 모든 열은 큰 열 여섯 열, 다른 열은 큰 열 여섯 개입니다. 그러면 여기에 반 텍스트와 나머지 열을 입력 할 것입니다.

86
00:08:09,360 --> 00:08:18,170
전반전과 나머지 절반으로 변경하자. 그러면 저장하고 고전적인 분홍색을 보자.

87
00:08:18,200 --> 00:08:24,000
이제 우리가 한 일은 세 개를 가로 질러 가거나 네 개를 가로 지르게 할 것입니다.

88
00:08:24,000 --> 00:08:38,530
1 2 3 4 그리고 첫 번째에는 다른 행을 추가하여 12 단위로 나눕니다. 첫 번째 6을 사용하여 말하고 2 번째 6을 사용하여 다른 것을 저장하거나 새로 고칩니다. .

89
00:08:38,960 --> 00:08:41,770
거기서 가서 더 분명하게 만듭니다.

90
00:08:41,780 --> 00:08:43,280
다른 수업 듣게 해줘.

91
00:08:43,400 --> 00:08:45,170
오렌지라고 부르 자.

92
00:08:45,370 --> 00:08:46,940
아직 존재하지 않습니다.

93
00:08:46,940 --> 00:09:04,870
그리고 이것이 오렌지색으로 나타나면 배경색이 오렌지색으로 바뀌며, 우리는 하나의 픽셀을 적색으로 채우고 실제로 dasht를 OK로 추가 할 것입니다.

94
00:09:05,540 --> 00:09:10,530
새로 고침을하면이 네 가지가 계속 진행되고 있음을 알 수 있습니다.

95
00:09:10,520 --> 00:09:19,160
각각은 3 개의 유닛을 차지하지만 첫 번째 유닛을 6 개의 유닛과 6 개의 유닛으로 나누어 그 행을 추가하면 행을 추가해야합니다.

96
00:09:19,160 --> 00:09:22,520
열 대신에 열이있는 곳에서이 작업을 시작할 수 없습니다.

97
00:09:22,520 --> 00:09:23,980
행이 있어야합니다.

98
00:09:24,260 --> 00:09:25,520
그리고 한 번 더 해보 죠.

99
00:09:25,910 --> 00:09:31,090
이 마지막 것을 여기서 여섯 개의 작은 조각으로 집어 넣자.

100
00:09:31,500 --> 00:09:39,770
따라서 div 클래스의 내부에 행을 추가해야합니다.

101
00:09:39,770 --> 00:09:50,310
다른 div가 필요하고 여기에 여섯 개의 열이 있습니다. 여기서 열 두 개는 각각 12 개의 단위 중에서 두 개를 차지합니다.

102
00:09:50,310 --> 00:09:59,370
그리고 우리는 6을 원합니다. 그리고 나서 우리는 각각 하나씩 나아가고, 우리가 그들을 볼 수 있도록 그 오렌지 클래스를 추가합시다.

103
00:10:00,440 --> 00:10:01,150
승인.

104
00:10:01,640 --> 00:10:06,540
그래서 우리는 4 개의 큰 기둥이 우리가 절반으로 갈라진 첫 번째 기둥을 가로 질러갑니다.

105
00:10:06,650 --> 00:10:12,710
마지막으로 여섯 개로 나눠서 실제로 볼 수는 없으므로 텍스트를 입력하지 않았습니다.

106
00:10:12,920 --> 00:10:14,200
그러니 가자.

107
00:10:14,270 --> 00:10:20,100
또는 오히려 실제로는 클래스 오렌지에 높이 또는 높이를 부여하는 것입니다.

108
00:10:20,100 --> 00:10:22,950
각각 50 픽셀을 만들어 보겠습니다.

109
00:10:22,940 --> 00:10:29,960
그리고 새로 고침하면 오렌지색이 오렌지색 인 모든 것이 높이가 50 픽셀입니다.

110
00:10:30,260 --> 00:10:40,880
그래서 우리는 균등하게 분할 된 두 개의 열과이 네 개의 균등하게 분할 된 최상위 열의 내부에있는 여섯 개의 균등 분할 된 열을가집니다.

111
00:10:40,880 --> 00:10:43,700
이것이 모두 그리드 시스템의 중요한 부분입니다.

112
00:10:43,860 --> 00:10:46,420
요컨대 우리는 모든 줄에 12 개의 유닛을 가지고 있습니다.

113
00:10:46,560 --> 00:10:48,300
네가 원하는대로자를거야.

114
00:10:48,360 --> 00:10:58,900
4 가지 크기의 대형 중형 소형 초소형이 있으며 4 가지 다른 크기의 4 가지 브레이크 포인트 중 하나에서 12 가지 단위를 재 할당 할 수 있습니다.

115
00:10:59,000 --> 00:11:04,870
이것이 멋진 반응 형 레이아웃으로 끝나는 방식이며 일반적으로 모바일 사이트에서 볼 수있는 패턴입니다.

116
00:11:04,880 --> 00:11:12,830
따라서 여분의 작은 크기에서 대부분의 사이트는 콘텐츠를 다른 콘텐츠 위에 쌓아 두었습니다.이 콘텐츠를 축소하면 여기에있는 것처럼됩니다.

117
00:11:12,840 --> 00:11:18,630
동일한 행에 여러 개의 콘텐츠가없는 휴대 기기의 일반적인 레이아웃입니다.

118
00:11:19,080 --> 00:11:19,540
승인.

119
00:11:19,700 --> 00:11:20,990
숭고한 것으로 돌아 가자.

120
00:11:21,090 --> 00:11:23,290
세 가지 주요 목표에 대해 이야기했는지 확인하십시오.

121
00:11:23,610 --> 00:11:28,160
그래서 우리는 그리드 시스템의 요점이 우리가 사물을 배치하는 데 도움이되는 목적에 대해 이야기했습니다.

122
00:11:28,160 --> 00:11:29,270
그것은 굉장.

123
00:11:29,660 --> 00:11:31,690
네 가지 크기를 이해하십시오.

124
00:11:31,700 --> 00:11:36,740
그 중형 작은 여분의 작은 다음 오른쪽 중첩 된 격자입니다.

125
00:11:37,040 --> 00:11:45,790
그리고 우리가 여기서하는 일은 열 대신에 행을 추가 한 다음 그 다음 행의 열을 다음 비디오에서 채울 수 있습니다.