1
00:00:00,250 --> 00:00:03,150
이 비디오는 캠프 스타일을 계속 유지할 것입니다.

2
00:00:03,360 --> 00:00:08,590
우리는 모든 단일 페이지에 탐색 막대를 추가 할 예정이며 탐색 막대는 지금은 꽤 비어 있습니다.

3
00:00:08,700 --> 00:00:14,780
그러나 결국에는 로그인과 같은 버튼이있을 것이며 모든 기능을 등록 할 수 있습니다.

4
00:00:15,030 --> 00:00:23,510
그러나 그때까지는 자리 표시 자 텍스트를 넣을 것입니다. 그리고 나서 지금은 꽤 거친 모양이기 때문에 새로운 캠프장 양식을 스타일링 할 것입니다.

5
00:00:23,580 --> 00:00:28,860
이제 서버를 시작하고 우리가 가진 것을 살펴 봅시다.

6
00:00:28,890 --> 00:00:31,150
여기 방문 페이지가 있습니다.

7
00:00:31,680 --> 00:00:36,250
모든 캠프가 캠프장 목록을 변경한다는 우리의 견해가 있습니다.

8
00:00:36,290 --> 00:00:38,180
꽤 괜찮아 보인다.

9
00:00:38,430 --> 00:00:40,490
여기에 탐색 바가 필요해.

10
00:00:40,890 --> 00:00:43,370
새로운 캠프장을 추가 할 때도 마찬가지입니다.

11
00:00:43,740 --> 00:00:51,050
양식을 가운데에 배치하고 두 입력을 나란히 놓는 대신 서로 쌓을 것입니다.

12
00:00:51,360 --> 00:00:56,400
그러나 우리는 nav 막대기로 시작해서 캠프장 ​​템플릿에서 작업 해 보겠습니다.

13
00:00:56,610 --> 00:01:00,990
그래서 우리는 여기서 다시 돌아와 캠프장 템플릿을 열어 시작할 것입니다.

14
00:01:00,990 --> 00:01:22,910
bootstrapped 상자를 열어서 구성 요소로 이동 한 다음 nav 막대를 탐색하면이 섹션에 항상 표시됩니다. 부트 스트랩을 사용하면 nav 막대를 추가하는 것이 정말 쉽지만 여전히 볼 수 있습니다. 꽤 많은 마크 업이고 우리는 드롭 다운의 모든 버튼을 가지고 있지 않을 때 최소한 오랫동안 시작하지 않을 것입니다.

15
00:01:22,950 --> 00:01:28,130
우리는 멋지고 간단하게 시작할 것입니다. 그렇더라도 여전히 기억해야 할 수업이 많이 있습니다.

16
00:01:28,140 --> 00:01:35,040
그래서이 클래스의 다른 것들처럼 부트 스트랩 Darcs를 끌어 당기는 데는 부끄러움이 없습니다. 물건을 찾는 것에 대해 부끄러워하지 않아야합니다.

17
00:01:35,100 --> 00:01:42,860
그러나 특정 부트 스트랩에서 때때로 이러한 클래스와 요소가 엉망 일 수 있으며 문서를 보지 않고도이를 수행 할 수있는 방법은 없습니다.

18
00:01:42,870 --> 00:01:55,180
OK로 돌아가서 캠프장 ​​템플릿 상단에 약간의 공간을 만들고 Nav를 정의하여 시작하겠습니다. 다시 헤더와 같습니다.

19
00:01:55,320 --> 00:01:59,450
div하지만 탐색은 할 수 있습니다. 조금 더 의미가 있습니다.

20
00:01:59,460 --> 00:02:00,870
그것은 의미 론적입니다.

21
00:02:01,050 --> 00:02:09,580
그래서 클래스 탐색 바를 사용하여 nav를 수행 한 다음 nav bar bar dash default를 탐색 할 것입니다.

22
00:02:09,600 --> 00:02:16,240
다른 유형과 색상이 다르거 나 거꾸로 된 탐색 모음을 사용할 수 있지만 기본값으로 이동합니다.

23
00:02:16,410 --> 00:02:54,090
그리고 나서 내부는 컨테이너 유체와 같은 클래스로 div를 추가 할 것입니다. 그리고 그것은 우리에게 멋진 패딩과 공간을 만들 것입니다. 그리고 나서 우리는 nav bar header와 같은 클래스를 가진 다른 div를 추가 할 것입니다. 클래스가 우리 헤더와 같으면 클래스 끝에 nav bar dash와 같은 앵커 태그를 추가 할 것입니다.

24
00:02:54,330 --> 00:03:04,850
그리고 나서 우리는 단지 슬래시로 링크를 설정할 수 있습니다. 그러면 우리는 그것을 닫고 yelper 캠프에 추가 할 것입니다.

25
00:03:04,980 --> 00:03:07,750
이 간단한 마크 업으로 무엇을 얻을 수 있는지 알아 보겠습니다.

26
00:03:07,920 --> 00:03:16,730
따라서 우리는 네비게이션 바 헤더가있는 컨테이너와 함께 네비게이션을 가지며 네비게이션 바 헤더는 네 바아 브랜드 인 항목 하나만 가지고 있습니다.

27
00:03:17,010 --> 00:03:18,290
새로 고쳐 보자.

28
00:03:18,780 --> 00:03:27,710
확인을 클릭하면 탐색 바가 생기며 여기에 브랜드가 있습니다.이 링크를 클릭하면 끔찍한 방문 페이지로 돌아갑니다.

29
00:03:28,200 --> 00:03:34,320
좋아, 여기에 로그인하고 가입하기 위해 여기 몇 자리 표시자를 추가합시다.

30
00:03:34,320 --> 00:03:40,870
그들은 일하지 않거나 아무 것도하지 않을 것입니다. 그러나 우리는 좋아 보이기 때문에 이제는 우리 캠프로갑니다.

31
00:03:40,890 --> 00:03:47,710
E.J. N.F.가 아닌 네비게이션 바 및 컨테이너 내부의 템플릿으로 사용할 수 있습니다. Hetter 바.

32
00:03:47,970 --> 00:03:56,220
우리는 다른 div에 추가 할 것이고이 div는 그것이하는 것을 볼 수있는 붕괴 클래스를 가질 것입니다.

33
00:03:56,220 --> 00:04:01,810
그리고 잠시 후 Neph bar Dasch가 그렇게 붕괴됩니다.

34
00:04:01,890 --> 00:04:24,520
그리고 나서 우리는 UL을 추가 할 것입니다. 그리고이 UL은 nav bar 대쉬 nav 클래스를 가질 것이고, nav bar bar 대시가 오른쪽으로 이동하게 될 것입니다. 현재 3 개의 링크가 있고 각 링크는 동맹국입니다.

35
00:04:25,170 --> 00:04:32,820
그리고 그 안쪽에 맹방은 앵커 태그를 가지며 첫 번째 로그인을줍니다.

36
00:04:32,850 --> 00:04:42,940
그리고 지금은 H ref가 우리 경로 경로로 설정 될 것입니다. 아직 로그인하지 않았기 때문에 우리는 등록을 위해 동일한 작업을 수행 할 것입니다.

37
00:04:42,980 --> 00:04:49,540
Sign-Up을하고 마찬가지로 로그 아웃하십시오.

38
00:04:49,910 --> 00:04:50,680
승인.

39
00:04:51,210 --> 00:04:52,580
그럼 어떻게 생겼는지 보자.

40
00:04:52,590 --> 00:05:02,090
우리가 새로 고침을하면 붕괴가 어떻게되는지에 관해 이야기하기 전에 그것이 좋아 보이지 않는다.

41
00:05:02,290 --> 00:05:06,470
우리가 지금 추가하지 않았던 것처럼 보입니다. 그래서 우리는 방금 nav bar를 추가했습니다.

42
00:05:06,470 --> 00:05:20,430
이제는 제대로 해본 적이 없지만 nav 자체에 추가하지 않았으므로 이제 저장하겠습니다. 새로 고침을하고 NAV의 오른쪽에있는 세 개의 링크로 끝나고 여기에서 크기를 변경할 때도 있습니다.

43
00:05:20,430 --> 00:05:25,130
여기 바로 여기 그것이 무너 졌음을 주목하십시오.

44
00:05:25,680 --> 00:05:29,300
그리고 결국 우리가 가지고있는 것은 작은 햄버거 아이콘입니다.

45
00:05:29,340 --> 00:05:32,610
클릭 한 곳과 메뉴 인 것처럼 보입니다.

46
00:05:33,050 --> 00:05:36,180
지금은 우리가 그 크기에 도달하면 그냥 숨길 수 있습니다.

47
00:05:36,450 --> 00:05:36,690
승인.

48
00:05:36,690 --> 00:05:42,240
따라서이 페이지에있는 것만 제외하면 탐색 모음에 필요한 모든 작업이 수행됩니다.

49
00:05:42,240 --> 00:05:45,390
이제 모든 페이지에 추가해 보겠습니다.

50
00:05:45,390 --> 00:05:50,030
복사하거나 잘라내어 헤더로 옮깁니다.

51
00:05:50,460 --> 00:05:52,400
머리 또는 부분으로 이동하십시오.

52
00:05:52,680 --> 00:05:53,790
내가 열어 볼게.

53
00:05:53,790 --> 00:06:00,130
커맨드 라인 사용 C9은 Parshall의 슬래시 헤더 인 Ijaw Yes를 슬래시합니다.

54
00:06:00,570 --> 00:06:03,840
그리고 몸 바로 맨 꼭대기에 추가 할 것입니다.

55
00:06:04,320 --> 00:06:06,080
이걸 제대로 들여 씁시다.

56
00:06:06,570 --> 00:06:09,230
그래, 우리가 간다.

57
00:06:09,900 --> 00:06:20,550
그리고 우리는 머리말에 우리의 탐색 바를 가지고있어서 헤더 부분을 포함하는 파일은 이제 탐색 바를 갖지만 서버를 다시 시작합니다.

58
00:06:20,850 --> 00:06:25,790
그래서 우리가 새로운 캠프장을 추가하면 우리는 또한 그 바를 얻습니다.

59
00:06:26,160 --> 00:06:31,270
그리고 우리가 홈 페이지에 간다면 우리는 또한 충분한 바를가집니다.

60
00:06:31,530 --> 00:06:32,110
큰.

61
00:06:32,130 --> 00:06:36,950
자 이제이 폼을 조금 더 돋보이게 만들자.

62
00:06:36,990 --> 00:06:40,840
앞서 언급했듯이이 양식에 두 가지 큰 일을하고 싶습니다.

63
00:06:40,860 --> 00:06:53,270
첫 번째는 페이지 중앙에 가운데 놓고 두 번째는 3 개의 입력 또는 두 개의 입력과 버튼을 화면에 가로로 정렬하지 않고 세로로 양식을 쌓는 것입니다.

64
00:06:53,370 --> 00:06:56,120
당신은 그 (것)들을 가지고 가고 그 (것)들을 다른 사람의 위에 1 개 겹쳐 쌓고 싶다.

65
00:06:56,370 --> 00:07:00,820
새로운 점인 올바른 파일을 열어 보겠습니다.

66
00:07:00,960 --> 00:07:01,510
예.

67
00:07:01,650 --> 00:07:11,470
그래서 우리는 C9 플레이를 할 것입니다. 슬래시는 Ejay와 우리가 지금까지 가지고있는 우리의 형태라는 것을 알았습니다.

68
00:07:11,970 --> 00:07:20,810
쉽게 시작하고 폼이나 입력에 부트 스트랩 클래스 중 일부를 추가하면 폼 대쉬 컨트롤이됩니다.

69
00:07:21,150 --> 00:07:25,390
그리고 우리는 그것을 입력과 버튼 모두에서 원합니다.

70
00:07:25,500 --> 00:07:33,290
Bootstrap 클래스에 PTEN ETN을 추가하자.

71
00:07:33,570 --> 00:07:39,090
그리고 우리는 또한 실수들 사이에서 무엇이 생겼는지 보자.

72
00:07:39,090 --> 00:07:40,920
그래서 J. 후 노드.

73
00:07:41,030 --> 00:07:42,830
예 새로 고침.

74
00:07:43,300 --> 00:07:51,060
좋습니다. 부트 스트랩 컨트롤과 부트 스트랩 버튼은 분명히 커지지 만 우리는 그것을 원하지 않습니다.

75
00:07:51,210 --> 00:07:54,840
그래서이를 해결하기 위해 할 수있는 일이 몇 가지 있습니다.

76
00:07:54,840 --> 00:07:57,900
첫 번째는 모든 것을 컨테이너 안에 넣을 것입니다.

77
00:07:58,110 --> 00:08:09,960
그래서 우리는 div 클래스와 같은 컨테이너에 들어가서 이것을 그냥 바닥으로 옮길 것입니다.

78
00:08:10,930 --> 00:08:13,690
우리가 가서 제대로 들여 보내 보자.

79
00:08:13,950 --> 00:08:16,450
아주 사소한 변경 사항을 저장하십시오.

80
00:08:16,530 --> 00:08:19,850
우리는 지금 약간의 간격을 얻습니다. 그러나 그것은 여전히 ​​거대한 형태입니다.

81
00:08:20,220 --> 00:08:23,280
그래서 제가해야 할 일은 그리드 시스템을 사용하는 것입니다.

82
00:08:23,520 --> 00:08:30,710
그래서 우리는 다른 div에 추가 할 것이고이 클래스는 행과 같은 클래스를 가질 것입니다.

83
00:08:30,720 --> 00:08:33,750
이것을 가지고 행에 복사 해 봅시다.

84
00:08:33,780 --> 00:08:36,630
그래서 전체 양식이 이제 한 행에 들어갑니다.

85
00:08:36,810 --> 00:08:39,220
그리고 그것도 이것으로 끝납니다.

86
00:08:39,610 --> 00:08:44,930
확인 저장은 아직 큰 차이가 없습니다.

87
00:08:44,970 --> 00:08:52,880
그리고 우리가 할 일은 CSSA를 사용하고 실제적으로 여백을 주면서 부트 스트랩 위에 자신 만의 스타일을 작성하는 것입니다.

88
00:08:52,880 --> 00:08:56,580
이 모든 것을 자동으로 왼쪽 및 오른쪽에 표시합니다.

89
00:08:56,700 --> 00:09:01,110
그리고 우리는 단지 그것이 들어있는이 컨테이너의 약 30 퍼센트를 차지하고 싶었습니다.

90
00:09:01,110 --> 00:09:10,120
우리가 돌아 가기 전에 우리는 그렇게했습니다. 규칙 중 하나를 위반하여 인라인 스타일을 사용하지 말라고 일찍 말했을 것입니다.

91
00:09:10,230 --> 00:09:13,930
그리고 그렇게하지 않는 것이 좋은 생각입니다.

92
00:09:14,010 --> 00:09:20,500
그러나 지금은 우리가 새로운 스타일 시트를 만드는 새 버전을 얻을 때까지 줄을 서서 할 것입니다.

93
00:09:20,580 --> 00:09:24,130
그래서 우리는 내부에 양식을 넣는 새로운 div를 만들 것입니다.

94
00:09:24,270 --> 00:09:26,130
그냥 그렇게.

95
00:09:26,760 --> 00:09:34,760
그리고 나서 저는 그 div 스타일을 주겠다. 그리고 나는 with와 함께 말하는 것으로 시작하겠다.

96
00:09:34,980 --> 00:09:39,650
그리고 그것을 그냥두고 우리가 더 작은 형태를 가지는지보십시오.

97
00:09:39,660 --> 00:09:41,820
이제 우리는 중심에두고 싶습니다.

98
00:09:41,820 --> 00:09:43,080
그래서 우리는 여기로 돌아 간다.

99
00:09:43,110 --> 00:09:49,730
위쪽과 아래쪽에는 여백 0을, 왼쪽과 오른쪽에는 Otto라고 말하십시오.

100
00:09:50,430 --> 00:09:52,790
이제 우리는 중심에있는 양식을 가지고 있습니다.

101
00:09:52,800 --> 00:09:58,750
다음으로해야 할 일은 버튼이 여전히 꽤 긴 전체 너비를 차지하도록 만드는 것입니다.

102
00:09:58,790 --> 00:10:05,780
하지만 우리가 할 일은 블록 요소로 만드는 부트 스트랩 방식의 DTN 블록을 제공하는 것입니다.

103
00:10:05,790 --> 00:10:08,370
그리고 이제 전체 라인을 차지합니다.

104
00:10:08,400 --> 00:10:13,530
다음으로 이러한 모든 요소들 사이에 간격을 두어 그 작업을 수행해 보겠습니다.

105
00:10:13,710 --> 00:10:17,300
우리는 폼 그룹 클래스로 빌드 된 부트 스트랩을 사용할 것입니다.

106
00:10:17,370 --> 00:10:25,250
따라서 우리는 div 클래스 ECO가 대시 그룹을 형성해야하며 각 입력에 대해이를 필요로 할 것입니다.

107
00:10:25,470 --> 00:10:41,240
그래서 모든 입력은 그 중 하나와 마찬가지로 그 중 하나를 누른 다음 나는 단지 이것을 복제하고 우리는 바로 여기 또 다른 하나를 가지고 이것은 내부에 갈 것입니다.

108
00:10:41,850 --> 00:10:44,080
그리고 나서 버튼을 하나 더 갖습니다.

109
00:10:44,610 --> 00:10:50,860
그래서 우리는 클래식 양식 그룹을 세 번 가지며 닫는 div 태그도 필요합니다.

110
00:10:50,850 --> 00:10:54,810
거기에 우리는 하나가 있고 우리는 다른 닫는 div 태그가 필요합니다.

111
00:10:55,190 --> 00:10:56,060
승인.

112
00:10:56,220 --> 00:10:59,140
그래서 폼 그룹은 사물을 함께 털어 놓습니다.

113
00:10:59,160 --> 00:11:01,530
그러나 그것은 또한 우리에게 약간의 공간을줍니다.

114
00:11:01,530 --> 00:11:03,300
이제 여기에이 버튼이 있습니다.

115
00:11:03,390 --> 00:11:11,010
우리가 할 수있는 다음 작업은 텍스트를 가운데 맞추는 것입니다. 텍스트를 가운데 맞춤으로 지정해야합니다.

116
00:11:11,490 --> 00:11:13,680
그리고 저는 다시 그것을 할 것입니다.

117
00:11:13,680 --> 00:11:20,020
적어도 장기간에 좋은 생각은 아니지만, 이것은 빠르게 뭔가를하는 데 큰 도움이됩니다.

118
00:11:20,160 --> 00:11:24,290
그래서 스타일과 우리는 텍스트 정렬 센터 할거야.

119
00:11:25,650 --> 00:11:31,470
중간에 가운데에 저장하십시오.

120
00:11:31,980 --> 00:11:35,030
다음으로해야 할 일은이 버튼의 색상을 변경하는 것입니다.

121
00:11:35,070 --> 00:11:37,000
화이트는별로 좋아 보이지 않습니다.

122
00:11:37,230 --> 00:11:44,730
기본 버튼을 기본으로 설정하여 파란색으로 새로 고침을 저장하도록하겠습니다.

123
00:11:44,760 --> 00:11:46,430
네, 훨씬 나아졌습니다.

124
00:11:46,800 --> 00:11:51,700
이 링크를 뒤로 이동 링크를 중간으로 이동합시다.

125
00:11:51,900 --> 00:11:56,850
그래서 우리는 이것을 단지 복사 할 것이고 우리가해야 할 일은이 마진 안에 넣는 것뿐입니다.

126
00:11:56,880 --> 00:12:07,200
자동 div 그래서이 div 여기 양식 후 그냥 저장합니다.

127
00:12:07,200 --> 00:12:07,810
우리는 거기에 갈.

128
00:12:07,860 --> 00:12:18,750
우리는 뒤로 물러나서 마지막으로해야 할 일은 패딩이나 마진을 약간 더해서 H-1이 그렇게하지 못하게하는 것입니다.

129
00:12:19,080 --> 00:12:22,460
우리는 단지 돌아갈 것이며 우리는 이미 우리가 선택한이 div를 가지고 있습니다.

130
00:12:22,530 --> 00:12:28,050
그래서 여백이 0 인 것보다는 시작하는 데 20 픽셀의 여유를 줄 수 있습니다.

131
00:12:28,050 --> 00:12:29,750
어떻게 보이는지 보자.

132
00:12:30,580 --> 00:12:32,140
좋아, 조금 나아 졌어.

133
00:12:32,340 --> 00:12:36,070
50 세 이상을 해보 죠.

134
00:12:36,600 --> 00:12:38,280
그리고 그것은 조금 너무 많을 수도 있습니다.

135
00:12:38,280 --> 00:12:40,230
확실히 자신의 취향.

136
00:12:40,350 --> 00:12:43,570
25 번으로 돌아 가자.

137
00:12:44,700 --> 00:12:44,940
괜찮아.

138
00:12:44,940 --> 00:12:46,420
지금은 충분히 좋습니다.

139
00:12:46,440 --> 00:12:58,160
원하는만큼 이걸 가지고 놀아라. 당신이 좋아하거나 더 좁 으면 입력 양식을 더 넓게 만들 수있다.하지만 반응이 빠르다는 것을 알면 중간에 머물러있게 될 것이고 조금 줄어들 것이다.

140
00:12:58,170 --> 00:13:00,420
마지막으로이 상표를 없애자.

141
00:13:00,420 --> 00:13:01,920
너는 그걸 필요가 없어.

142
00:13:02,070 --> 00:13:06,570
바닥 글의 하단에 그래서 우리는 바닥 글 파일에 가서 나는 속일거야.

143
00:13:06,620 --> 00:13:11,530
지금 당장이 작업을 수행하면 저장을 제거합니다.

144
00:13:11,700 --> 00:13:19,800
지금 우리는 우리 모양을 가지고있다. 너무 나쁘게 보이지 않는다. 되돌아 갈 수있다. 우리는 우리가 우리가 1를 더할 수있는 충분한 막대가있는 캠프장의 목록을 얻는다.

145
00:13:19,920 --> 00:13:24,000
Google은 아직 방문 페이지를 보지 않고 방문 페이지를 볼 수도 있습니다.

146
00:13:24,210 --> 00:13:31,360
그 중 하나는 아마 대부분의 작품을 가지고 있으며 그것은 훨씬 더 멋지게 보이고 더 많은 사용자 정의 스타일을 가지고 다른 페이지보다 꽤 다를거야.

147
00:13:31,380 --> 00:13:33,280
그래서 그것이 내가 나중에 저장하기 때문입니다.

148
00:13:33,570 --> 00:13:38,550
그리고 우리는 아무 것도하지 않는 더미 버튼을 사용하여 여기에 번호를 표시합니다.