1
00:00:00,410 --> 00:00:11,310
이 강의로 돌아와 부트 스트랩 그리드 시스템을 시연 할 것이며, 그리드 시스템은 아마도 사람들이 낮잠 시간 동안 부트 스트랩을 사용하는 가장 큰 이유 일 것입니다.

2
00:00:11,310 --> 00:00:19,290
버튼은 부트 스트랩으로 만들 수있는 멋진 문체 변경이지만 부트 스트랩 그리드 시스템은 전체 응용 프로그램의 골격 역할을합니다.

3
00:00:19,440 --> 00:00:23,980
구조를 추가하고 응용 프로그램에 배치하는 것은 정말 쉬운 방법입니다.

4
00:00:24,000 --> 00:00:27,480
그리드 시스템으로 할 수있는 일의 몇 가지 예를 보여 드리겠습니다.

5
00:00:27,480 --> 00:00:36,140
Bootstrap ex-beau에서 몇 개의 사이트를 열었습니다. 첫 번째 것은 물 주전자를위한 제품 페이지이며 스크롤 다운입니다.

6
00:00:36,240 --> 00:00:37,530
여기 누워보세요.

7
00:00:37,560 --> 00:00:50,310
우리는 세 가지 항목을 나란히 놓은 다음 그들이 크기를 변경함에 따라 알기도합니다. 그리고 크기가 줄어들면 크기가 줄어들어 서로의 위에 쌓입니다.

8
00:00:51,090 --> 00:00:57,270
그래서 바로 여기에있는 부트 스트랩 그리드 시스템이 다른 유사한 효과를 가지고 있습니다.

9
00:00:57,270 --> 00:01:02,100
그들은 크기를 조정 한 다음 태블릿 및 모바일 크기로 쌓습니다.

10
00:01:02,880 --> 00:01:04,110
다른 예가 있습니다.

11
00:01:04,140 --> 00:01:10,440
아이슬란드 음악가이자 Olafur Arnolds입니다.이 사이트로 이동합니다.

12
00:01:10,560 --> 00:01:23,150
비슷한 레이아웃을 볼 수있는 그리드 시스템으로 구축 된 일부 컨텐츠가 있지만 그리드 시스템으로 구축 된 것은 아닙니다.

13
00:01:23,160 --> 00:01:25,210
여기에이 내용이 있습니다.

14
00:01:26,100 --> 00:01:28,350
이 투어 날짜는 여기에 있습니다.

15
00:01:28,350 --> 00:01:49,220
기본적으로 그리드 시스템을 사용하여 일부 콘텐츠가 화면의 100 %를 차지하고 싶다고 말할 수 있으며,이를 사용하여 각각의 콘텐츠가 화면 폭의 25 %를 차지할 때까지 사용할 수 있습니다 모바일 쪽 또는 태블릿 크기가 각각 50을 차지한 다음 모바일에 도달 할 때마다 각각 100 %를 차지합니다.

16
00:01:49,860 --> 00:01:50,850
똑같은 일이 여기서 끝났어.

17
00:01:50,850 --> 00:01:56,660
그것은 우리가 화면으로 그것을 조각으로 나눌 수있게 해주고 우리가 원하는 조각을 몇 개 골라 낼 수있게합니다.

18
00:01:56,790 --> 00:02:00,660
이륙 할 우리 자신의 요소 각각은 우리가 이미 본 마지막 것입니다.

19
00:02:00,660 --> 00:02:05,670
크리 에이 티브 팀 사막이라는 비슷한 내용의 스크롤입니다.

20
00:02:05,680 --> 00:02:09,530
여기 그리드 시스템과 여기에 있습니다.

21
00:02:09,570 --> 00:02:11,430
그리드 시스템으로 모든 작업이 완료됩니다.

22
00:02:11,430 --> 00:02:15,590
이 모든 것은 매우 흥미로운 매우 중요한 것들입니다.

23
00:02:15,760 --> 00:02:20,640
부트 스트랩없이해야 할 일들에 비해 쉽게 레이아웃 할 수 있습니다.

24
00:02:20,670 --> 00:02:25,660
그래서 우리는 부트 스트랩 그리드 시스템을 사용할 것이고 거의 모든 부트 스트랩을 사용하는 모든 응용 프로그램을 사용할 것입니다.

25
00:02:25,890 --> 00:02:27,500
그리고 그들 중 하나를 보여 드리죠.

26
00:02:27,540 --> 00:02:33,940
이것은 우리의 요 캠프 응용 프로그램이며 우리는 가로 질러 캠프장을 그리드가 있음을 알 수 있습니다.

27
00:02:33,960 --> 00:02:40,050
화면 크기를 조정하면 크기가 조정되었음을 알게되고, 그 다음에 2 단계로 이동 한 다음 다시 모바일로 이동합니다.

28
00:02:40,050 --> 00:02:44,480
우리는 가로 질러가는 곳으로 가면 모바일 레이아웃을 사용하기가 정말 쉽습니다.

29
00:02:44,760 --> 00:02:47,840
그리드 시스템을 사용할 장소는 여기에 있습니다.

30
00:02:47,850 --> 00:02:57,800
이제 그리드 시스템을 사용하여 코드를 작성하고이 화면을 전체 화면으로 시작한 다음 평가 된 탭 아래에있는 부트 스트랩 된 닷컴을 다시 시작하십시오.

31
00:02:58,050 --> 00:03:00,850
그리드 시스템을 클릭 할 수 있습니다.

32
00:03:00,850 --> 00:03:07,300
그리드 시스템에는 약간의 차이점이 있습니다.하지만 여기서는 하나의 번호 만 지적하면됩니다.

33
00:03:07,470 --> 00:03:09,890
이것은 그리드 시스템이 작동하는 데 정말로 중요합니다.

34
00:03:09,900 --> 00:03:21,150
따라서 모든 컨테이너와 부트 스트랩을 12 개의 다른 열로 나눌 수 있습니다. 그런 다음 그리드 시스템을 사용하여 각 요소가 차지하는 12 개의 단위 중 몇 개를 선택할 수 있습니다.

35
00:03:21,150 --> 00:03:27,050
그래서이 경우에는 12 단위 중 약 10을 차지하는 것처럼 보입니다.

36
00:03:27,060 --> 00:03:40,320
그리고 12 개 유닛 중 2 개 유닛이 9 개 또는 3 개일 수 있지만, 왼쪽에 12 개가 있고 오른쪽에 12 개 중 작은 부분이있는 비율이 있습니다.

37
00:03:40,770 --> 00:03:46,510
그래서 우리가 여기 캠프로 돌아 간다면 이것은 바로 우리의 컨테이너입니다.

38
00:03:46,890 --> 00:03:51,670
그리고 이들 각각 12 유닛 중 하나는 3 유닛을 차지합니다.

39
00:03:51,810 --> 00:03:56,850
그래서 우리는 4 개의 동등한 기둥으로 끝나고 여기에서 바로 아래로 축소합니다.

40
00:03:56,880 --> 00:04:00,040
이제 그들은 각각 12 명 중 6 명을 차지합니다.

41
00:04:00,240 --> 00:04:02,840
그래서 다시 12 번 번호가 매우 중요합니다.

42
00:04:02,850 --> 00:04:03,660
이제 오른쪽으로 가자.

43
00:04:03,660 --> 00:04:05,130
첫 번째 그리드.

44
00:04:05,250 --> 00:04:14,640
그래서 파일을 그리드로 만들었습니다. SS 파일의 부트 스트랩을 제외하고는 비어 있습니다. 그리고 컨테이너를 정의해야합니다.

45
00:04:14,860 --> 00:04:18,180
Boucek 그리드를 사용할 때마다 컨테이너 내부에 있어야합니다.

46
00:04:18,210 --> 00:04:22,230
따라서 클래스는 컨테이너와 같습니다.

47
00:04:22,290 --> 00:04:29,190
그리고 우리가해야 할 첫 번째 일은 각 행 대신에 행과 동일한 클래스를 가진 다른 div를 찾는 것입니다.

48
00:04:29,220 --> 00:04:31,100
우리는 12 유닛을 골라야합니다.

49
00:04:31,350 --> 00:04:40,730
그래서 우리가 할 일은 50 50 분할을하는 것입니다. 우리는 12 div에서 6을 차지하고 다른 div는 12에서 6을 차지합니다.

50
00:04:41,070 --> 00:04:42,050
자 이제하자.

51
00:04:42,120 --> 00:04:48,330
div를 추가 한 다음 두 번째 division을 추가하고 바로 지금 두 개의 장치가 비어 있습니다.

52
00:04:48,330 --> 00:04:49,430
너는 일하지 않을거야.

53
00:04:49,650 --> 00:05:00,300
하지만 제가 할 일은 첫 번째 수업에 수업을 추가하는 것입니다. 그러면 조금 더 이상한 칼럼이 보일 것입니다. 큰 여섯 개는 여기서 똑같이 할 것입니다.

54
00:05:00,300 --> 00:05:03,520
클래스는 큰 열 6과 같습니다.

55
00:05:03,630 --> 00:05:05,200
그런 다음 여기에 몇 가지 콘텐츠를 추가하겠습니다.

56
00:05:05,210 --> 00:05:10,880
그들은 단지 큰 열 여섯을 말할 것입니다.

57
00:05:10,950 --> 00:05:12,140
여기 같은거야.

58
00:05:12,210 --> 00:05:18,950
그리고 제가 그렇게하면 저장하겠습니다. 그리드 자체가 보이지 않는 것을 실제로 보지 않을 것입니다.

59
00:05:19,020 --> 00:05:24,300
그렇게 명확하게하기 위해 스타일 태그 대신 여기에 클래스를 정의 할 것입니다.

60
00:05:24,300 --> 00:05:26,670
제가 할 일은 클래스를 정의하는 것입니다.

61
00:05:26,730 --> 00:05:31,350
나는 그것을 핑크색이라고 부를 것이고, 우리는 그들을 볼 수 있도록이 클래스를 두 div에 적용 할 것입니다.

62
00:05:31,490 --> 00:05:32,820
그래서 지금 그들은 단지 백인입니다.

63
00:05:32,820 --> 00:05:33,660
국경 없어요.

64
00:05:33,750 --> 00:05:34,840
약간의 텍스트.

65
00:05:35,010 --> 00:05:36,050
하지만 우리가 이것을 추가하면.

66
00:05:36,180 --> 00:05:37,010
그래서 분홍색.

67
00:05:37,140 --> 00:05:49,950
그런 다음 배경이 분홍색으로 바뀌고 자주색 테두리가 한 픽셀 짙은 보라색으로 표시되면이 두 div에 분홍색 클래스를 적용합니다.

68
00:05:49,950 --> 00:05:52,660
각자 6 단위를 차지합니다.

69
00:05:52,680 --> 00:05:54,570
이제 우리는 돌아가서 새로 고침합니다.

70
00:05:54,900 --> 00:05:55,580
우리는 거기에 갈.

71
00:05:55,800 --> 00:05:59,640
컨테이너의 절반을 차지하는 두 개의 div가 있음을 알 수 있습니다.

72
00:05:59,670 --> 00:06:01,930
컨테이너가 여기서 시작됩니다.

73
00:06:02,460 --> 00:06:04,530
우리는 둘로 나뉘어져 있습니다.

74
00:06:04,620 --> 00:06:10,110
이제 다시 돌아가서 좀 더 놀고 세 번째 열에 추가해 볼까요?

75
00:06:10,410 --> 00:06:16,150
그리고 이번에는 가운데 열을 8 개 단위로 만들면 왼쪽과 오른쪽이 2가됩니다.

76
00:06:16,170 --> 00:06:21,270
결국이 번호를 여기에서 바꿀 것입니다.

77
00:06:21,280 --> 00:06:22,200
우리는 거기에 갈.

78
00:06:22,200 --> 00:06:30,900
우리는 중간에 멋진 중심의 컬럼을 만들고, 사이드 바 (bar) 등을 위해 사용할 수있는 두 개의 작은 컬럼을 왼쪽과 오른쪽으로 만들 것입니다.

79
00:06:30,900 --> 00:06:34,860
이것이 모든 부트 스트랩 그리드 시스템의 기본 개념입니다.

80
00:06:34,920 --> 00:06:42,210
우리는 내부에서 작업하고있는 컨테이너가 무엇이든간에 12 유닛을 가지고 있으며 원하는대로 12 유닛을 지정할 수 있습니다.

81
00:06:42,240 --> 00:06:52,170
그래서 우리는 각각의 열 하나가 큰 열 12 개별 열을 할 수 있고 우리는 이것을 12 번 할 수 있습니다.

82
00:06:52,290 --> 00:06:53,600
내가 잃을 수 있는지 확인하십시오.

83
00:06:54,090 --> 00:06:54,670
우리는 거기에 갈.

84
00:06:54,690 --> 00:06:56,620
그리고 나서 우리는 지금이 두 가지를 제거 할 것입니다.

85
00:06:56,820 --> 00:07:01,630
그리고 제가 신선하다면 한 행에 12 개의 균등 한 크기의 기둥이 나타납니다.

86
00:07:01,650 --> 00:07:07,570
각각은 하나의 단위를 취한 다음 다른 행을 추가 할 수 있음을 보여줄 것입니다.

87
00:07:07,740 --> 00:07:14,390
이제는 div 클래스가 행과 같아 지도록하겠습니다. 그러면 첫 번째 행 아래로 이동하게됩니다.

88
00:07:14,730 --> 00:07:18,870
그래서이 중 하나가 div를 해보 죠.

89
00:07:19,020 --> 00:07:23,350
클래스는 Dasch의 큰 열과 같고 4 개의 행을합니다.

90
00:07:23,370 --> 00:07:27,280
그래서 우리는 그것을 균등하게 세 개의 단위로 나눌 것입니다.

91
00:07:27,360 --> 00:07:36,260
그래서 그녀를위한 칼럼 아지기는 그렇게합니다.

92
00:07:36,420 --> 00:07:49,260
그리고 이제 살펴 보겠습니다. 분홍색 클래스를 적용하지 않았 음을 알 수 있습니다. 그러나 크기가 균일 한 12 개의 열 아래에있는 3 개의 균등 크기 열이 만들어졌습니다.

93
00:07:49,470 --> 00:07:53,240
따라서 우리는 핑크 클래스를 추가하여 어떤 일이 일어나는지 쉽게 볼 수 있습니다.

94
00:07:53,940 --> 00:07:54,800
그리고 거기에 우리가 간다.

95
00:07:55,140 --> 00:07:57,350
그래서 이것은 단지 간단한 예일뿐입니다.

96
00:07:57,420 --> 00:08:01,470
실제로이 분홍색 상자는 우리 사이트에있을 가능성이 거의 없습니다.

97
00:08:01,710 --> 00:08:08,760
그러나 여기에서 볼 수 있듯이 행이 있고 각 행에는 네 개의 열이있는 격자가 있습니다.

98
00:08:08,760 --> 00:08:15,830
이 광고 소재 팀 사이트의 각 광고 단위는 3 단위 넓이입니다.

99
00:08:15,900 --> 00:08:19,830
우리는 하나씩 네 개의 너비가있는 세 개의 열이 있습니다.

100
00:08:20,070 --> 00:08:20,900
여기 같은거야.

101
00:08:20,900 --> 00:08:23,860
여기에 세 개의 열이 있습니다.

102
00:08:23,910 --> 00:08:24,960
우리는 4 개의 기둥을 가지고 있습니다.

103
00:08:24,960 --> 00:08:26,840
각각 3 개의 너비가 있습니다.

104
00:08:27,390 --> 00:08:30,650
이것이 바로 다음 비디오에서 그리드의 기초입니다.

105
00:08:30,660 --> 00:08:35,850
그리드를 반응 적으로 만들고 크기가 다른 레이아웃을 만드는 방법에 대해 이야기하겠습니다.

106
00:08:35,850 --> 00:08:38,230
지금 우리는 큰 열 하나로 작업 해 왔습니다.

107
00:08:38,250 --> 00:08:52,290
나는 큰 의미로 설명했고 세 가지 다른 크기가 있으며 다음 비디오에서 그 크기를 볼 것이며 중첩 된 격자를 작성하여이 열의 내부에 다른 행을 추가 할 수있는 방법을 볼 것입니다. 추가 12 조각으로.