1
00:00:00,330 --> 00:00:05,940
이 강의로 돌아 가시면 부트 스트랩을 사용하여 가상의 시작을위한 방문 페이지를 만들 것입니다.

2
00:00:06,070 --> 00:00:08,760
시작은 완벽한 경기라고합니다.

3
00:00:08,760 --> 00:00:09,210
아주 재밌 네요.

4
00:00:09,210 --> 00:00:22,430
나는 그것이 인간 고양이과 데이트 앱이라는 것을 알고 있으며, 인간 고양이와 데이트하는 것이 상대적으로 무해 할 수도 있다는 것을 해석하기 위해 여러분에게 맡겨 놓을 것입니다. Sheldrick 고양이와 외로운 사람을 어울리는 것은 다른 것일 수 있습니다.

5
00:00:22,440 --> 00:00:23,260
나는 모른다.

6
00:00:23,550 --> 00:00:27,690
사이트를 둘러보고 그녀에게 편지 쓰기를 시작하겠습니다.

7
00:00:27,690 --> 00:00:29,920
나는 정말로 몇 가지 특징을 지적하는 것입니다.

8
00:00:29,970 --> 00:00:31,250
여기에는별로 없습니다.

9
00:00:31,290 --> 00:00:33,780
우리는 실제로 이것을 접하지 않았다. 아직 아무것도하지 않는다.

10
00:00:33,840 --> 00:00:37,770
HD mounseers만이 사실입니다. 그러나 지금까지 우리가 다루었습니다.

11
00:00:38,100 --> 00:00:42,510
그래서 우리는 접촉 길이에 관해 우리의 완벽한 매치 가정을 충분히 가지고 있습니다.

12
00:00:42,510 --> 00:00:51,030
그들은 실제로 어디에도 가입하지 않고 오른쪽에 두 개의 작은 아이콘으로 로그인합니다. 거기에 우리는 그녀의 햄버거를 얻습니다.

13
00:00:51,180 --> 00:00:52,320
나는 그것을 클릭 할 수있다.

14
00:00:52,380 --> 00:00:55,980
그 모든 링크는 이제 그 햄버거 안에 있습니다.

15
00:00:55,980 --> 00:01:01,650
그런 다음 우리는 중심에 머물고 전체 배경을 커버하는 큰 배경 이미지를 가지고 있습니다.

16
00:01:01,740 --> 00:01:09,750
그래서 중간에 우리는 우리의 시작의 이름을 가지고 우리와 완벽하게 일치합니다. 그리고 우리는 캡션을 가지고 있습니다. 데이트 앱의 유일한 인간 피드.

17
00:01:09,750 --> 00:01:15,420
그리고 나서 우리는 약간의 H R 수평 규칙을 가지고 아이콘을 시작하는 버튼을 가지고 있습니다.

18
00:01:15,810 --> 00:01:26,960
그리고이 크기를 줄이면 모든 것이 중간에 머물러있게되고 페이지 위로 아래쪽으로 텍스트가 시작되는 모바일 장치에 어색한 레이아웃이 생기지 않도록 조금 위로 이동합니다.

19
00:01:27,060 --> 00:01:29,690
그래서 우리는 그것을 조금 움직이고 중심에 머물러 있습니다.

20
00:01:29,700 --> 00:01:33,900
이 레이아웃은 정말 쉽고 부트 스트랩이 쉽지만 방문 페이지의 경우 비교적 효과적입니다.

21
00:01:33,900 --> 00:01:38,180
우리가 가지고있는 모든 것은 전체 너비를 차지하는 단일 컬럼입니다.

22
00:01:38,220 --> 00:01:40,850
그래서이 칼럼은 12 단위로 나뉩니다.

23
00:01:40,860 --> 00:01:48,510
우리는 하나의 열을 12 개 단위로 나누는 것이 아니라 그 열의 모든 것을 가운데에 배치합니다.

24
00:01:48,540 --> 00:01:49,860
시작하겠습니다.

25
00:01:49,860 --> 00:01:52,350
우리가해야 할 일은 파일을 만드는 것입니다.

26
00:01:52,440 --> 00:01:54,640
DML에서 색인이라고하는 색인이 있습니다.

27
00:01:54,720 --> 00:02:10,410
이것을 정기적 인 상용구 완벽한 경기에 추가하고 부트 스트랩에 추가하여 시작하고 CDN 비트 스트립 CDN을 사용하겠습니다.

28
00:02:11,490 --> 00:02:14,350
SS와 Javascript를 여기서 보자.

29
00:02:14,400 --> 00:02:16,860
우리는 작업 표시 줄에 해당 자바 스크립트가 필요합니다.

30
00:02:17,220 --> 00:02:19,130
그래서 우리는 태그를 연결해야합니다.

31
00:02:19,710 --> 00:02:22,770
그런 다음 자바 스크립트를 얻습니다.

32
00:02:22,770 --> 00:02:24,030
알았다.

33
00:02:24,090 --> 00:02:32,030
이것을 스크립트 태그 인 맨 아래에 놓은 다음 소스를 사용자와 동일하게 설정합니다.

34
00:02:32,520 --> 00:02:43,390
이제 우리가 이것을 열면 콘솔을 열어서 작은 문제가 생겼습니다. Jay 쿼리가 필요하고 bootstrap 자바 스크립트도 필요합니다.

35
00:02:43,450 --> 00:02:46,290
탐색 바에서 우리가 필요로하는 교훈을 기억하십시오.

36
00:02:46,290 --> 00:02:46,750
퀘 레이.

37
00:02:46,860 --> 00:02:52,500
그래서 우리는 CDN을 얻을 것입니다.

38
00:02:53,730 --> 00:02:55,290
수정 된 버전을 사용하겠습니다.

39
00:02:55,290 --> 00:02:57,500
해당 URL을 복사하십시오.

40
00:02:57,600 --> 00:03:04,110
그리고 마침내 여기로 돌아가서 자바 스크립트로 연결하기 전에해야만합니다.

41
00:03:04,440 --> 00:03:09,360
그렇지 않으면 여전히 쿼리에 대해 알지 못하므로 먼저 쿼리를로드해야합니다.

42
00:03:09,360 --> 00:03:10,650
이제 다시 시도하겠습니다.

43
00:03:10,870 --> 00:03:11,960
화재 새로 고침.

44
00:03:12,520 --> 00:03:17,490
우리는 아무런 오류도 보이지 않기 때문에 좋은 징후는 보이지 않습니다.

45
00:03:18,570 --> 00:03:20,850
중간에있는 텍스트로 시작해 봅시다.

46
00:03:20,850 --> 00:03:22,480
이 모든 내용은 여기에 있습니다.

47
00:03:22,620 --> 00:03:35,870
그래서 우리는 컨테이너를 생성 한 다음 컨테이너 내부에 클래스 ECO 컨테이너를 div 행할 행이 필요합니다. 그리고 그 안에는 항상 그 행이 필요한 또 다른 div가 있습니다.

48
00:03:35,930 --> 00:03:47,220
우리가 그리드 시스템을 사용할 때마다 우리 div는 열 대시 12와 동등한 클래스가 될 것입니다.

49
00:03:48,240 --> 00:03:50,750
그리고 그것은 그 컨테이너를 가로 질러 줄 것입니다.

50
00:03:51,210 --> 00:03:59,330
그리고 나서 그들은 완벽한 일치를 말하고 저장하는 H1을 갖게 될 것입니다.

51
00:03:59,520 --> 00:04:02,280
그리고 새로 고침을 해봅시다.

52
00:04:02,580 --> 00:04:06,660
그리고 우리가 아직 원하는 것은 아니며, 우리가해야 할 일이 몇 가지 있기 때문입니다.

53
00:04:06,660 --> 00:04:09,010
첫 번째는 우리가 그 칸에 모든 것을 집중시킬 필요가 있다는 것입니다.

54
00:04:09,300 --> 00:04:19,190
따라서 우리가 여기서 다루고있는 것을 조사해 보면 H1이 모든 것을 가로 질러가는 것을 볼 수 있습니다.

55
00:04:19,410 --> 00:04:21,680
그리고 두 번째는 우리가 그것을 약간 밀어 내야한다는 것입니다.

56
00:04:21,720 --> 00:04:26,250
패딩이나 여백을 추가하여 페이지 상단으로 이동하지 않아야합니다.

57
00:04:26,250 --> 00:04:28,480
나머지 콘텐츠를 추가하여 시작하겠습니다.

58
00:04:28,830 --> 00:04:47,730
그래서 우리는 유일한 인간 고양이 데이트 앱을 가지고 있으며 그것은 단지 H 3 일 것이고 우리는 그것이 우리가 원하는 어떤 요소이든지간에 실제로 놀 수 있습니다.하지만 H-3 인간 친화적 인 대시 고양이 데이트 앱으로 만들 것입니다.

59
00:04:48,090 --> 00:04:59,180
그리고 나서 우리는 많이 보이지 않을 수평 규칙을 추가 할 수 있습니다. 그러나 사실 후에 스타일을 적용한 다음 해당 버튼의 클래스에 버튼을 추가 할 것입니다.

60
00:04:59,240 --> 00:05:01,680
우리가 살펴 봅니다.

61
00:05:02,100 --> 00:05:06,010
이것은 부트 스트랩 버튼 기본값이며 커다란 버튼입니다.

62
00:05:06,330 --> 00:05:07,830
다시 가자.

63
00:05:07,830 --> 00:05:29,320
따라서 우리는 PTEN과 컬러 기본값을 필요로하고 크기가 큰 LG와 크기 사이의 크기를 입력해야합니다. 여기서는 시작하는 텍스트를 추가하고 저장하는 방법을 알려 드리겠습니다.

64
00:05:29,340 --> 00:05:30,330
괜찮아.

65
00:05:30,330 --> 00:05:34,270
이제 우리는 우리의 내용을 다음에 그리지 만 가운데에 그리드가 있습니다.

66
00:05:34,470 --> 00:05:36,920
그리고 나서 패딩에 초점을 맞추고 그것을 움직입니다.

67
00:05:36,930 --> 00:05:44,720
그러나이 그리드 안의 중심에서 시작하여 더 쉽게하기 위해 div의 모든 것을 그룹화하여 각 것을 개별적으로 중앙에 배치 할 필요가 없습니다.

68
00:05:44,760 --> 00:05:51,430
우리는 H-1과 3, 그리고 나서 버튼을 중앙에 배치해야합니다. 하나의 선으로 나누는 div와 center에서 그룹화 할 수 있습니다.

69
00:05:51,750 --> 00:06:01,490
div를 만들어 보자. Cantet의 신분증을주고 그 안에 모든 것을 넣을거야.

70
00:06:01,560 --> 00:06:08,340
그래서 H-1 세 살이 H.R.이고 버튼이 들여 쓰기되고 저장됩니다.

71
00:06:08,580 --> 00:06:14,270
그래서 우리 스타일 시트에 추가하기 전에 페이지를 새로 고치면 아무 것도 다르게 보일 것입니다.

72
00:06:14,340 --> 00:06:18,840
그래서 링크 태그를 추가하고 스타일 시트 애플리케이션을 호출 할 것입니다.

73
00:06:18,920 --> 00:06:20,920
SS 아직 존재하지 않습니다.

74
00:06:21,120 --> 00:06:24,220
그래서 그것을 구할 필요가 있습니다.

75
00:06:24,230 --> 00:06:27,060
같은 디렉토리에 SS가 보입니다.

76
00:06:27,420 --> 00:06:31,550
그리고 모든 h가 보라색 인 것처럼 간단한 것으로 시작합시다.

77
00:06:31,680 --> 00:06:35,030
그냥 제대로 작동하는지 확인하십시오.

78
00:06:35,400 --> 00:06:37,060
새로 고침하자.

79
00:06:37,390 --> 00:06:39,100
앤드류는 보라색 H-1을 얻는다.

80
00:06:39,180 --> 00:06:39,670
큰.

81
00:06:39,870 --> 00:06:44,970
이제 Dave에 콘텐츠 아이디어를 추가하고 중심에두기로 선택하겠습니다.

82
00:06:45,030 --> 00:06:53,620
그러니 그걸 없애고 ID 콘텐츠가 필요하고 텍스트 생략 센터를 생략하면됩니다.

83
00:06:54,210 --> 00:06:56,430
다시 가자.

84
00:06:56,430 --> 00:06:57,110
우리는 거기에 갈.

85
00:06:57,120 --> 00:06:59,490
이제 상황이 센터와 일치합니다.

86
00:06:59,490 --> 00:07:07,440
다음으로 25 %를 페이지 아래로 25 % 밀어 넣고 정확히 25 %의 패딩을 만듭니다.

87
00:07:07,470 --> 00:07:15,270
그래서 여기서 우리는 패딩 25 %를 할 것입니다.

88
00:07:16,270 --> 00:07:22,870
그리고 우리가 백분율로 그것을 지키면 그것을 단단한 수의 픽셀로주는 것보다 좀 더 반응 적입니다.

89
00:07:22,890 --> 00:07:24,790
그것이 바로 중앙에 있습니다.

90
00:07:25,230 --> 00:07:29,940
화면 크기를 조정하면 25 %가 변경됩니다.

91
00:07:29,940 --> 00:07:30,540
큰.

92
00:07:30,540 --> 00:07:32,480
이제 배경 이미지를 추가해 보겠습니다.

93
00:07:32,670 --> 00:07:43,280
그래서 제가 사용하고있는 이미지는 사랑스럽고 고양이와 인간의 상호 작용은 여기에서 진행됩니다. 스플래시 웹 사이트에서 부트 스트랩 이미지 그리드를 만든 마지막 비디오에서 소개했습니다.

94
00:07:43,680 --> 00:07:48,300
그리고 그들은 모든 문제없이 사용할 수있는 모든 종류의 정말 훌륭한 고품질 이미지를 가지고 있습니다.

95
00:07:48,480 --> 00:07:54,110
그리고 제가 사용하는 것은 바로 여기에 고양이 링크를 검색하는 것입니다.

96
00:07:54,450 --> 00:08:00,230
여기이 이미지의 아로가 바로 당신이있는 이미지를 복사하는 것입니다.

97
00:08:00,360 --> 00:08:06,310
이제 돌아가서 배경 이미지로 추가하겠습니다.

98
00:08:06,800 --> 00:08:13,830
그래서 배경과 거대한 그 URL을주세요. 바로 거기에 있습니다.

99
00:08:13,830 --> 00:08:26,010
그리고 우리가 그것을이 수준의 형태로 남겨 두거나 새로 고침을하면 거대한 배경 이미지를 얻을 수 있습니다. 그리고 이것은 우리가 손톱을위한 일종의 신생 식물이라고 말할 수 있습니다.

100
00:08:26,010 --> 00:08:36,060
그래서 우리는 크기를 조정해야하고 그렇게하기 위해서 우리는 배경 크기를 사용하고 그것을 새로 변경해야합니다.

101
00:08:36,060 --> 00:08:39,230
다시 우리는 점점 가까워지고 있습니다.

102
00:08:39,270 --> 00:08:44,950
이렇게하면 화면의 전체 너비와 높이를 가리지 만 가능한 한 이미지가 작아집니다.

103
00:08:45,240 --> 00:08:52,240
따라서 어떤 방식 으로든 이미지를 왜곡시키지 않을 종횡비가 변경되지는 않지만 필요에 따라 양 방향으로 늘어납니다.

104
00:08:52,350 --> 00:08:57,060
그러나 화면에 맞추기 위해 필요한 최소한의 양은 여전히 ​​완벽하지는 않습니다.

105
00:08:57,210 --> 00:09:01,900
우리가하고 싶은 것은 그것의 크기를 바꾸는 것이 아니라 위치를 바꾸는 것입니다.

106
00:09:02,190 --> 00:09:10,280
우리는 배경 위치 센터를 중심으로 배치 할 것이지만 우리가 더 가깝게 만들지는 않을 것입니다.

107
00:09:10,290 --> 00:09:13,320
그러나 이미지가가는 한 여전히 완벽한 일치는 아닙니다.

108
00:09:13,800 --> 00:09:15,510
그리고 그 변화는 나중에 올 것입니다.

109
00:09:15,510 --> 00:09:24,650
지금은 탐색 표시 줄에 추가하는 것에 중점을두고 Boucek 문서로 이동하여 구성 요소로 이동하고 이전에 언급했으면합니다.

110
00:09:25,080 --> 00:09:27,690
부트 스트랩 탐색 모음에 추가하는 경우 항상이 작업을 수행합니다.

111
00:09:27,810 --> 00:09:29,850
다르게 기억하는 것은 너무 많은 것입니다.

112
00:09:30,230 --> 00:09:32,070
그리고 저는 여기에 바로 이것을 복사합니다.

113
00:09:32,370 --> 00:09:39,630
전체 탐색기를 시작하여 여기에있는 앱으로 돌아가서 바로 위에 올리십시오.

114
00:09:39,630 --> 00:09:46,110
이것은 분명히 우리가 원하는 NAF가 아니지만 새로 고치려는 조각을 포함하고 있습니다.

115
00:09:46,380 --> 00:09:47,380
충분히 가깝습니다.

116
00:09:47,610 --> 00:09:49,360
그래서 우리가하고 싶은 몇 가지 변화가 있습니다.

117
00:09:49,470 --> 00:09:58,570
가장 쉬운 방법 중 하나는 솔루션의 콘텐츠가 컨테이너에 있으므로 여기에서와 같이 가장자리까지 완전히 이동하지 않는 것입니다.

118
00:09:59,100 --> 00:10:14,250
그래서 우리는 되돌아 가서 inset을하거나 div 클래스 컨테이너로 바꿀 수 있습니다. 그리고 우리가 지금 되돌아 간다면 우리는 컨테이너에 추가했기 때문에 솔루션에 대해 여기처럼 간격을 두는 것을 볼 수 있습니다.

119
00:10:14,250 --> 00:10:16,920
이제 Nev의 실제 내용을 작업 해 보겠습니다.

120
00:10:17,070 --> 00:10:33,950
따라서 가장 쉬운 방법은 바로 지금 말하는 브랜드를 바꾸는 것입니다.이 라인 클래스의 브랜드는 네스 바 브랜드와 동일하므로 고정 고정 및 저장으로 변경합니다.

121
00:10:33,940 --> 00:10:34,990
그것을 밖으로 시도하십시오.

122
00:10:35,490 --> 00:10:37,500
그래 좋아.

123
00:10:37,500 --> 00:10:39,050
이제이 양식을 제거해 보겠습니다.

124
00:10:39,060 --> 00:10:41,150
우리는 이것을 전혀 필요로하지 않습니다.

125
00:10:41,310 --> 00:10:45,030
그래서 우리의 형식이 모두 여기에서 시작됩니다.

126
00:10:45,030 --> 00:10:50,490
그 모든 것을 새로 고쳐라.

127
00:10:50,860 --> 00:10:52,560
드롭 다운을 없애자.

128
00:10:52,560 --> 00:10:54,570
당신은 그럴 필요가 없습니다.

129
00:10:54,570 --> 00:10:56,680
이제부터 시작됩니다.

130
00:10:56,680 --> 00:11:02,810
끝내는이 거짓말은 다시 신선합니다.

131
00:11:03,120 --> 00:11:04,540
이제 우리는 하나의 링크를 가지고 있습니다.

132
00:11:04,710 --> 00:11:10,910
그래서 우리는 가입해야하고 로그인 할 예정인이 두 링크로 시작할 것입니다.

133
00:11:11,360 --> 00:11:18,110
이것이 바로이 링크입니다. 그래서 우리는이 링크를 등록하고 복제 할 수 있습니다.

134
00:11:18,390 --> 00:11:21,450
안쪽에 앵커 태그가있는 동맹국.

135
00:11:21,450 --> 00:11:23,840
그리고이 사람은 로그인 할 것입니다.

136
00:11:24,750 --> 00:11:26,640
확인 해보자.

137
00:11:26,700 --> 00:11:27,260
큰.

138
00:11:27,270 --> 00:11:29,100
그래서 아이콘이 끝날 것입니다.

139
00:11:29,100 --> 00:11:30,380
두 가지 링크가 있습니다.

140
00:11:30,450 --> 00:11:32,320
이제 세 개의 링크가 필요합니다.

141
00:11:32,340 --> 00:11:35,500
우리는 이미 그 중 두 가지를 가지고 있으며 우리는 그 드롭 다운을 제거 할 것입니다.

142
00:11:35,610 --> 00:11:38,560
그래서 우리는 접촉 할 수있는 집이 필요합니다.

143
00:11:38,600 --> 00:11:41,490
따라서 드롭 다운을 찾으십시오.

144
00:11:41,490 --> 00:11:43,100
클래스는 드롭 다운과 같습니다.

145
00:11:43,140 --> 00:11:49,070
이제는 그것을 없애고 아크 바가 단순화되었습니다.

146
00:11:49,080 --> 00:11:50,370
이제 두 가지 길이가 있습니다.

147
00:11:50,390 --> 00:11:53,760
우리는 실제로 그것들을 제거하고 처음부터 그것을 할 것입니다.

148
00:11:53,760 --> 00:12:00,120
그래서 우리는 하나의 동맹에 앵커 태그를 추가하고 그 다음에 3 번 할 것입니다.

149
00:12:00,120 --> 00:12:02,260
이 첫 번째 사람은 집이라고 말해야합니다.

150
00:12:02,550 --> 00:12:04,100
다음은 대략이다.

151
00:12:04,320 --> 00:12:06,530
마지막은 연락입니다.

152
00:12:07,020 --> 00:12:08,760
확인 해보자.

153
00:12:08,760 --> 00:12:11,050
우리는 세 가지 길이 있습니다.

154
00:12:11,070 --> 00:12:11,970
사소한 일 하나.

155
00:12:11,970 --> 00:12:16,830
집은 활발하고 쉬우니까요.

156
00:12:16,980 --> 00:12:29,390
우리가해야 할 일은 앵커 태그가 아니라 동맹인 인 동맹국에 동등한 클래스를 추가하는 것입니다. 이제 우리는 집이 활성 링크가되도록합니다.

157
00:12:29,400 --> 00:12:29,960
큰.

158
00:12:30,200 --> 00:12:37,940
좋아, 그래서 우리 nav 막대기이고 우리가 크기를 재조정하면 우리는 벌써 잘 작동하는이 햄버거를 가지고있는 것을 볼 것이다.

159
00:12:38,520 --> 00:12:42,420
우리에게는 배경 이미지가 엉망인 문제가 있습니다.

160
00:12:42,420 --> 00:12:45,750
우리는 그것을 조금씩 다룰 것입니다. 그러나 햄버거는 잘 작동합니다.

161
00:12:45,750 --> 00:12:47,400
모든 것이 좋아 보인다.

162
00:12:47,430 --> 00:12:53,360
이제 글꼴을 다루겠습니다. 제가 여기 사용 된 글꼴이 Ledo L.A.입니다.

163
00:12:53,430 --> 00:12:57,900
Google 글꼴에서 가져온 것이므로 Google 글꼴로 이동하여 Ledo를 찾아 보겠습니다.

164
00:12:58,010 --> 00:13:02,720
LA T-O는 모두 컬렉션에갑니다.

165
00:13:03,180 --> 00:13:06,820
그것이 정상적이고 대담 해지면 그것을 사용합시다.

166
00:13:06,840 --> 00:13:10,050
또한 우리는 H-1이 대담 해지기를 바랍니다.

167
00:13:10,590 --> 00:13:11,040
괜찮아.

168
00:13:11,070 --> 00:13:16,290
그런 다음이 링크를 애플리케이션에 바로 추가 할 것입니다.

169
00:13:16,290 --> 00:13:24,090
위로 가기 여기까지 저장 이제는 글꼴을 모든 것에 적용 할 것입니다.

170
00:13:24,270 --> 00:13:33,970
그래서 Ledo라는 본문 폰트 패밀리를 선택하고 올바르게로드되는지 확인하겠습니다.

171
00:13:34,050 --> 00:13:36,780
우리가 새롭게 한 것을 보아라.

172
00:13:37,520 --> 00:13:43,990
텍스트가 어둡지 만 변경 되었기 때문에 앞 부분을 변경하기가 어렵습니다. NFR에서도 볼 수 있습니다.

173
00:13:44,160 --> 00:13:44,790
그것은 바뀌 었습니다.

174
00:13:44,790 --> 00:13:47,510
이 솔루션에서 우리가 가진 것과 일치합니다.