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:13,990
헤더와 푸터 Parshall에 부트 스트랩을 추가하고 새로운 캠프장을 만드는 기능을 추가했습니다.

4
00:00:14,010 --> 00:00:17,550
이제 부트 스트랩을 사용하여 캠프 그라운드 페이지를 방문하겠습니다.

5
00:00:17,550 --> 00:00:18,600
시작하겠습니다.

6
00:00:18,600 --> 00:00:21,230
제일 먼저 할 일은 내 서버가 실행 중인지 확인하는 것입니다.

7
00:00:22,000 --> 00:00:25,260
그리고 지금 우리가 가진 것을 살펴보십시오.

8
00:00:25,350 --> 00:00:26,740
확실히 조금 실망.

9
00:00:26,850 --> 00:00:28,110
그래서 두 가지 주요 목표가 있습니다.

10
00:00:28,170 --> 00:00:34,150
첫 번째는 제목에서 더 좋은 헤더가 필요하기 때문에 여기가 더 멋지게 보일 것입니다.

11
00:00:34,170 --> 00:00:43,000
우리는 부트 스트랩 (Bootstrap)에서 점보트론 (jumbotron)이라고 불리는 것을 사용하고 캠프장은 캠프장 목록을 수직으로 표시해서는 안됩니다.

12
00:00:43,020 --> 00:00:48,200
대신 우리는 더 작은 이미지의 그리드를 만들고 그 그리드는 반응 적이어야합니다.

13
00:00:48,480 --> 00:00:52,850
우선이 제목 텍스트가 약간 더 멋지게 보이도록하는 첫 번째 텍스트부터 시작해 보겠습니다.

14
00:00:53,100 --> 00:00:58,440
그래서 캠프장을 열어서 여기서 일하게 될 것입니다.

15
00:00:58,590 --> 00:01:06,390
그래서 우리는 약간의 크기를 재조정 할 것입니다. 왜냐하면 우리는 꽤 많은 HD 우편물을 작성하게 될 것이고 우리는 단말기로는 아무 것도하지 않을 것입니다.

16
00:01:06,440 --> 00:01:12,510
헤더에서 작업하기 전에 이전에는 보지 못했던 헤더 태그를 사용합니다.

17
00:01:12,510 --> 00:01:15,740
기능적으로 div와 같은 방식으로 작동합니다.

18
00:01:15,780 --> 00:01:20,080
유일한 차이점은 이것에 약간 의미 론적 의미가 있다는 것입니다.

19
00:01:20,400 --> 00:01:25,850
그냥 임의의 div보다 헤더를 사용하지만 실제로는 별 문제가되지 않습니다. 단지 컨테이너 일뿐입니다.

20
00:01:26,010 --> 00:01:42,540
그리고 우리는 그것을 jumbotron의 클래스에 넣을 것입니다. 그리고 그 안에 우리는이 H-1을 실제로 복사 해 넣을 것입니다. 그리고 우리는 그것을 실제로 남겨두고 Frigo를 저장하고 페이지를 새로 고칩니다.

21
00:01:42,570 --> 00:01:44,890
우리는 지금 점보트론 (Jumbotron)이라고 불리는 것을 가지고 있습니다.

22
00:01:45,130 --> 00:01:46,280
그것은 여전히 ​​좋지 않습니다.

23
00:01:46,290 --> 00:01:50,720
다음으로해야 할 일은 부트 스트랩 컨테이너 안의 모든 것을 만드는 것입니다.

24
00:01:51,030 --> 00:02:01,260
그래서 우리가 여기있는 모든 것을 들여 쓰기로 할 것이고 클래스와 같은 div를 추가 할 것입니다.

25
00:02:01,460 --> 00:02:07,670
그리고 나서 우리는 그 안의 모든 것을 고집 할 것이고 이것은 우리쪽에 약간의 speccing을 부가 할 것입니다.

26
00:02:07,830 --> 00:02:08,710
새롭게 하다.

27
00:02:08,880 --> 00:02:13,800
우리는 더 이상 여기 왼쪽 편에있는 것을 볼 수 없습니다.

28
00:02:13,830 --> 00:02:20,330
우리는 약간의 공간이 있고 JumboTron은 조금 더 가까이서 보입니다. 결국에는 멍청한 막대가 나타납니다.

29
00:02:20,520 --> 00:02:22,890
그래서 이것은 조금 더 멋지게 보일 것입니다.

30
00:02:22,890 --> 00:02:25,530
지금 우리는 점보트론을 가지고 있습니다.

31
00:02:25,590 --> 00:02:27,570
이제 텍스트 자체를 변경해 보겠습니다.

32
00:02:27,600 --> 00:02:34,530
따라서 캠프장 ​​페이지가 아닌 캠프에 오신 것을 환영합니다.

33
00:02:34,710 --> 00:02:56,550
원하는 콘텐츠를 자유롭게 넣고 단락에 단락을 추가하겠습니다. 약간의 태그 라인을 추가하겠습니다. 저는 우리 손을보고 전 세계의 캠프장을 선택하겠습니다.

34
00:02:56,670 --> 00:02:58,940
그와 같은 것이 정말로 중요하지 않습니다.

35
00:02:58,950 --> 00:03:00,850
새로 고침을 저장합니다.

36
00:03:01,170 --> 00:03:06,650
좋아, 이제 우리는 작은 태그 라인을 가지고 우리가하고 싶은 마지막 일은이 링크를 돌보는 것이다.

37
00:03:06,690 --> 00:03:08,280
새로운 캠프장 링크를 추가하십시오.

38
00:03:08,580 --> 00:03:12,640
그래서 저는 이것을 복사해서 점보 트론 안에 넣을 것입니다.

39
00:03:12,650 --> 00:03:15,070
그러나 나는 그것을 단추로 만들 예정이다.

40
00:03:15,150 --> 00:03:24,780
부트 스트랩 버튼 중 하나는 그렇게하거나 단락을 먼저 추가 한 다음 그 안에 앵커 태그를 넣는 것입니다.

41
00:03:24,780 --> 00:03:26,680
그리고 저는 그저 간격을두고 있습니다.

42
00:03:26,730 --> 00:03:43,320
당신은 자신의 라인이되기를 원합니다. 그리고 저는 버튼 클래스에 PTEN ETN의 여러 클래스들을 색상과 대시 (dash) 사이의 큰 클래스로주고 저장할 것입니다.

43
00:03:43,330 --> 00:03:45,420
이제 우리는 새로운 캠프장 버튼을 가지고 있습니다.

44
00:03:45,510 --> 00:03:49,930
클릭하면 완전히 스타일이 지정된 양식으로 이동합니다.

45
00:03:50,220 --> 00:03:54,050
하나의 사소한 일은 내가이 창 크기를 조정하면됩니다.

46
00:03:55,320 --> 00:04:01,740
우리 텍스트가 Jumbotron의 가장자리에 대해 어떻게 올라 갔는지 주목하십시오.

47
00:04:01,860 --> 00:04:24,330
우리는 여기에 몇 가지 간격을두고 여기에 간격을두기를 원합니다. Jumbotron 내부에 다른 컨테이너를 추가하여 div 클래스가 컨테이너와 같으면 여기에서 Jumbotron 내부에서 닫는 div의 끝에서부터 들여 쓰기 만하면됩니다. 모두.

48
00:04:24,420 --> 00:04:26,040
그리고 우리가 새로 고침하면.

49
00:04:26,210 --> 00:04:30,860
그녀는 똑같이 보였습니다. 그러나 우리가 그것을 축소 할 때 우리는 이제 약간의 공간을 가지고 있습니다.

50
00:04:31,230 --> 00:04:33,790
좋아요, 헤더 부분입니다.

51
00:04:33,840 --> 00:04:37,680
이제 우리는 그 이미지 그리드에서 작업하고 싶습니다. 그리고 저는 여러분과 함께 할 것입니다.

52
00:04:37,680 --> 00:04:39,770
그것은 확실히 조금 더 많은 일입니다.

53
00:04:40,020 --> 00:04:53,520
좋아요. 그리드에서 시작해 봅시다. 그러면 div 클래스가 행과 같아 지도록 행을 만들어서 시작하겠습니다. 여기서는 작은 메시지로 시작하겠습니다.

54
00:04:53,580 --> 00:05:15,790
그래서 우리는 div 클래스를 추가 할 것입니다. 그리고 저는 이것을 전체 너비를 차지하게 만들 것입니다. 우리는 여기서 가장 인기있는 사이트가 여러분이 알고있는 캠프 그라운드라고 말하는 H-3을 가지고 있습니다. 많이 보이지 않을거야.

55
00:05:15,790 --> 00:05:25,470
이제 다시 돌아가서 div 클래스 행에 추가하여 시작해 보겠습니다. 우리는 초등학교에서 모든 것을 필요로합니다.

56
00:05:25,560 --> 00:05:28,820
div 클래스는 행과 같습니다.

57
00:05:28,970 --> 00:05:43,380
그리고 지금 우리는 각 루프에 대해 이것에 대해 이야기해야합니다. 우리가 실제로하고 싶은 것은 각 캠프장의 행 내부에 그리드 대신 칼럼 클래스가있는 div와 부트 스트랩 그리드를 사용하는 열을 만들기 위해서입니다.

58
00:05:43,420 --> 00:05:53,580
그래서 이제부터는 각 루프에 대해이 코드를 모두 넣을 것입니다. 그렇게하면 들여 쓰기가됩니다.

59
00:05:53,830 --> 00:05:57,180
그리고 나서 여기에 닫는 div 태그가 필요합니다.

60
00:05:57,490 --> 00:06:01,500
이것은 고전적인 행을위한 것이며 이것은 컨테이너를위한 것입니다.

61
00:06:02,020 --> 00:06:02,470
승인.

62
00:06:02,730 --> 00:06:28,270
따라서 현명한 클래스 행이 아니라이 콘텐츠를 div로 남기고 여기에 이미지가있는 H를 사용하면 이미지가 생깁니다. 그러나이 div를 변경하여 열 중간에 3 열의 클래스가 있음을 알 수 있습니다. 6 그리고 그것은 단지 반응 형으로 만들어서 화면 크기가 커지면 더 큰 이미지를 얻을 수 있습니다.

63
00:06:28,300 --> 00:06:36,400
그런 다음 축소하면 줄당 2 개의 이미지로 이동 한 다음 줄 당 하나의 이미지로 더 축소됩니다.

64
00:06:36,610 --> 00:06:56,560
그래서 우리는 실제로 다른 div에 추가 할 것이고이 div는 섬네일의 클래스를 가지게 될 것입니다. 이것은 우리가 작은 카드를 만드는 데 도움이 될 부트 스트랩 클래스입니다. 이미지는 그처럼 시작됩니다.

65
00:06:56,680 --> 00:07:02,210
우리는 캠프장 RL과 동등한 이미지 서비스를 제공합니다.

66
00:07:02,230 --> 00:07:08,580
그리고 우리는 지금 이것을 없애고 그냥 저장하고 우리가 신선하면 우리가 얻는 것을 보도록하겠습니다.

67
00:07:09,280 --> 00:07:09,820
괜찮아.

68
00:07:09,910 --> 00:07:11,850
그래서 우리는 지금 이미지 격자를 가지고 있습니다.

69
00:07:11,890 --> 00:07:14,860
단지 세 가지가 있지만 우리는이 격자를 얻고 있습니다.

70
00:07:15,220 --> 00:07:18,580
그리고 나는 그것을 반응 적으로 만들어서 의미를 보여 드리겠습니다.

71
00:07:18,580 --> 00:07:25,270
이렇게 축소하면 화면에서 두 개의 사각형 또는 두 개의 항목으로 변경됩니다.

72
00:07:25,280 --> 00:07:26,910
12 유닛이 있다는 것을 기억하십시오.

73
00:07:27,040 --> 00:07:44,190
그래서 우리가 먼저 가지고있는 것은 4 개의 덩어리로 나누어 각각 3 개의 유닛을 꺼내고 그리드가 더 작아지면 각각 6 개의 유닛을 차지하고 더 작아지면 자동으로 하나가됩니다.

74
00:07:44,350 --> 00:07:49,130
그리고 우리는 여분의 작은 기본값이 12 단위를 사용하기 때문에 이것을 쓰지 않아도되었습니다.

75
00:07:49,180 --> 00:07:52,050
그래서 우리는 그것을 지정할 필요가 없었습니다.

76
00:07:52,090 --> 00:08:07,550
이제 캠프장 이름에서 제목을 다시 가져오고 nother 부트 스트랩 클래스를 수행하는 나이가 아니라 div 클래스가 캡션과 같습니다.

77
00:08:07,780 --> 00:08:13,080
그리고 그 안에는 캠프 그라운드 이름으로 H가 붙을 것입니다.

78
00:08:14,070 --> 00:08:18,670
좋아요. 어떻게 생겼는지 보도록하겠습니다.

79
00:08:18,670 --> 00:08:19,270
우리는 거기에 갈.

80
00:08:19,300 --> 00:08:21,030
우리는이 멋진 작은 카드들을 얻는다.

81
00:08:21,040 --> 00:08:23,700
이것은 우리를 위해 만드는 축소판 클래스입니다.

82
00:08:23,840 --> 00:08:25,030
이미지가 있습니다.

83
00:08:25,210 --> 00:08:30,480
우리가 일련의 아이템들을 가지고 있다면 이미지가 어떻게 보이는지 보도록하겠습니다.

84
00:08:30,760 --> 00:08:34,160
그래서 당신은 이것을 할 필요는 없지만 이것을 여기에 붙여 넣을 것입니다.

85
00:08:34,600 --> 00:08:36,860
그냥 좀 더 많은 데이터를주세요.

86
00:08:36,880 --> 00:08:38,800
중복 된 데이터가되지만 괜찮습니다.

87
00:08:38,940 --> 00:08:46,250
그리고 올바른 쉼표를 추가하고 쉼표를 추가하고 거기에 와야합니다.

88
00:08:46,300 --> 00:08:49,840
이제 우리가 새로 고침하면 서버를 다시 시작해야합니다.

89
00:08:50,170 --> 00:08:52,060
그리고 매번 우리는 앱을 어지럽 힙니다.

90
00:08:52,120 --> 00:08:53,330
예.

91
00:08:53,590 --> 00:08:58,070
그리고 우리가 새롭게하면 그는 우리에게 작은 문제가 있음을 알게 될 것입니다.

92
00:08:58,120 --> 00:09:00,040
우리 그리드는 좀 엉망이됩니다.

93
00:09:00,170 --> 00:09:03,810
그리고 우리는 서로 다른 높이의 이미지를 가지고 있습니다.

94
00:09:04,090 --> 00:09:07,940
그래서이 연어 크릭 하나는 이것들과 다릅니다.

95
00:09:08,410 --> 00:09:10,710
이 경우 너비가 동일하더라도.

96
00:09:10,930 --> 00:09:16,210
그리고 그것은 그리드에서 벗어나고 있지만 약간의 불안감이 있지만 쉽게 수정할 수 있습니다.

97
00:09:16,270 --> 00:09:19,130
그리고 우리 캠프장 대신에 어떻게하는지 보여 드리겠습니다.

98
00:09:19,270 --> 00:09:19,960
예.

99
00:09:20,320 --> 00:09:26,980
클래스 행의 날에 나는 스타일 속성을 추가 할 것이고, 저는 이것을 일시적으로 할 것입니다.

100
00:09:27,010 --> 00:09:32,530
이 코드를 외부 스타일 시트로 옮기 겠지만 좀 더 쉽게 볼 수 있도록 줄을서야합니다.

101
00:09:32,530 --> 00:09:37,360
그래서 우리는 디스플레이 플렉스와 플렉스 랩으로 스타일을 설정합니다.

102
00:09:37,480 --> 00:09:39,900
그리고 그것들은 그리드를 도울 두 가지 속성입니다.

103
00:09:39,910 --> 00:09:44,810
그래서 신선하다면 더 유연한 그리드로 끝납니다.

104
00:09:44,860 --> 00:09:53,400
그리드가 적용되기 때문에 우리는 다른 높이를 가지고 있어도 상관 없습니다. 그래서이 둘 사이에는 더 많은 공간이 있습니다. 여기에 있습니다.

105
00:09:53,470 --> 00:10:02,750
기본적으로 모든 공간을 완벽하게 정렬 할 수있는 공간을 최소한으로 확보 할 수 있습니다.

106
00:10:02,800 --> 00:10:13,370
그리고 우리가 할 수있는 또 하나의 변화가있었습니다. 텍스트 센터에 텍스트를 추가하는 것은 우리를위한 부트 스트랩입니다.

107
00:10:13,540 --> 00:10:15,410
그리고 나는 그것이 조금 더 좋아 보인다라고 생각한다.

108
00:10:15,490 --> 00:10:20,500
또한 개인 취향의 문제와 당분간 캠프장 페이지로 끝났습니다.

109
00:10:20,620 --> 00:10:27,550
바라기는 부트 스트랩이 실제로 우리를 도울 수있는 방법을 보여줍니다.

110
00:10:27,550 --> 00:10:31,900
그리고 우리가 가진 우리의 훌륭한 반응 그리드를 보여 드리겠습니다.

111
00:10:31,900 --> 00:10:33,260
그래서 이것은 모바일에 있습니다.

112
00:10:33,310 --> 00:10:38,890
우리는이 멋진 레이아웃을 최대 네 개의 이미지까지 줄곧 얻습니다.

113
00:10:39,160 --> 00:10:41,140
좋아, 나는 이것이 어떻게 보이는지에 대해 꽤 행복하다.