1
00:00:00,390 --> 00:00:07,420
이 유닛으로 돌아와서 jumbotron 및 부트 스트랩 폼과 입력을 포함한 몇 가지 다른 구성 요소를 보여 드리겠습니다.

2
00:00:07,530 --> 00:00:14,520
그러나 그 전에 부트 스트랩과 같은 새로운 도구를 배울 때 정말 중요한 것을 처리하기 위해 잠깐 시간을 내고 싶습니다.

3
00:00:14,760 --> 00:00:31,200
그리고 웹 개발자가되는 사람들을 가르쳐 준 경험으로 부트 스트랩이 학생들 중 일부가 불편 함을 느낄 수있는 첫 번째 장소 중 하나라는 사실을 알게되었습니다. 우리는 누군가 다른 사람이 우리 응용 프로그램에 쓴 코드를 갑자기 포함시키고 있습니다.

4
00:00:31,200 --> 00:00:43,550
그러나 여기서 문서를 살펴 본다면 정말 길기 때문에 포괄적입니다.하지만 여기에 많은 내용이 있습니다. 모든 것을 이해하기 위해 읽어야 할 설명서가 아닌 프레임으로 구성 해주십시오.

5
00:00:43,560 --> 00:00:47,980
이것은 부트 스트랩을 사용하기 전에 끝내야한다는 안내 방법과는 다릅니다.

6
00:00:48,300 --> 00:00:53,820
그것은 당신이 테이블이 필요하면 양식 섹션을 보면 양식이 필요하다고 결정한 경우 참조하십시오.

7
00:00:53,850 --> 00:00:56,780
네비게이션 바가 필요한 경우 테이블 섹션을 누르십시오.

8
00:00:56,850 --> 00:01:12,810
당신은 NFR 섹션을 보았습니다. 그러나 여러분이 사용하게 될 것처럼 문서를 다루는 것이 중요합니다. 여기서 다시 돌아 오는 것은 개별 코드 비트를 참조하여 코드 세그먼트를 복사하는 것입니다. 년이 시점에서.

9
00:01:12,930 --> 00:01:14,630
그리고 나는 그것의 대부분을 꽤 잘 느낍니다.

10
00:01:14,760 --> 00:01:18,220
하지만 부트 스트랩을 사용하여 작업 할 때 문서를 열어 두었습니다.

11
00:01:18,330 --> 00:01:26,900
나는이 과정에서 정말로 초기의 비디오 중 하나에서 예제를 계속 참고하고 있는데, 나는 웹 개발자가되는 법을 이야기했다.

12
00:01:27,060 --> 00:01:32,490
당신은 암기하고 모든 정보를 아는 전문가가되지 않습니다.

13
00:01:32,730 --> 00:01:33,960
예, 당신은 사물을 알아야합니다.

14
00:01:33,960 --> 00:01:39,210
예, 당신은 이해하고 기억해야하지만 당신은 전문가가되거나 암기가되지 않습니다.

15
00:01:39,210 --> 00:01:41,990
귀하는 정보에 접근하는 전문가가되어 가고 있습니다.

16
00:01:42,120 --> 00:01:52,410
그리고 그 중 일부 정보는 기억할 것이며 그 중 많은 부분이 문서 또는 예제 비디오 서적에서 온갖 종류의 자원으로 온라인 될 것입니다.

17
00:01:52,410 --> 00:01:54,350
알았어. 전부 얘기하자.

18
00:01:54,450 --> 00:02:01,430
기본적으로 나는 단지 부트 스트랩에 많은 것들이 있음을 명심하십시오. 그리고 당신은 그것의 20 30 %를 보게 될 것이고 거기에 더 많은 것이 있습니다.

19
00:02:01,440 --> 00:02:03,210
그러나 그것에 협박하지 마십시오.

20
00:02:03,240 --> 00:02:07,800
수행 방법을 보여주지 않는 무언가를해야 할 경우 문서에 쉽게 액세스 할 수 있어야합니다.

21
00:02:07,860 --> 00:02:09,480
문서를 열고 찾아 봅니다.

22
00:02:09,600 --> 00:02:13,760
그리고 항상 좋은 예와 설명이 bootstrapped dotcom을 얻습니다.

23
00:02:14,120 --> 00:02:22,110
OK 그럼 더 이상 안도로 이러한 중요한 구성 요소 중 일부에 대한 이야기로 이동하자 그리고 당신 Jumbotron 보여 주기로 시작하겠습니다.

24
00:02:22,500 --> 00:02:31,680
따라서 Jumbotron은 공식 문서에 따라 경량의 유연한 구성 요소로서 선택적으로 전체 뷰포트를 확장하여 사이트의 주요 내용을 보여줄 수 있습니다.

25
00:02:31,680 --> 00:02:37,670
여기서 예를 볼 수 있습니다. 만약 우리가 점보트론을 사용하고 싶다면 정말 쉽습니다.

26
00:02:37,680 --> 00:02:44,750
우리가해야 할 일은 div class jumbotron을 쓰는 것입니다. 그리고 나서 우리가 그 안에 넣는 것이 Jumbotron의 일부가 될 것입니다.

27
00:02:44,970 --> 00:02:46,680
그럼 해보 죠.

28
00:02:47,190 --> 00:03:17,300
Jumbotron jumbo tron ​​클래스가있는 div가있을 것입니다. 그리고 H1 또는 H-1이 jumbotron이라고 말하면 거기에 버튼이 추가됩니다. 여기에 버튼이 추가됩니다. 단락을 단락에 추가하면 단락이 복잡해질 것입니다.

29
00:03:17,790 --> 00:03:19,420
지금은 충분히 좋습니다.

30
00:03:20,310 --> 00:03:28,460
그리고 버튼과 우리 버튼은 단지 거기에서 인사 할 것입니다.

31
00:03:28,800 --> 00:03:29,250
승인.

32
00:03:29,250 --> 00:03:31,830
그런 다음 버튼 하나를 선택해야합니다.

33
00:03:31,980 --> 00:03:39,680
우리는 버튼 성공을 할 것이고 나는 그것을 크게 만들고 구할 것입니다.

34
00:03:39,940 --> 00:03:41,620
우리가 얻는 것을 보도록하겠습니다.

35
00:03:41,790 --> 00:03:48,740
Jumbotron은 브라우저 윈도우의 전체 너비를 차지한다는 것을 알 수 있습니다. 이것은 보통 우리가 원하는 바가 아닙니다.

36
00:03:49,050 --> 00:03:55,510
그리고 JumboTron은 내부에있는 모든 컨테이너의 100 %를 차지하도록 설정되어 있습니다.

37
00:03:55,640 --> 00:03:57,740
이 경우에는 아무 것도 아닙니다.

38
00:03:57,900 --> 00:04:07,640
그러나 곧 그리드 시스템과 부트 스트랩을 보여 드리며, 화면 중앙에 위치시키고 화면의 3 분의 1을 차지하고 싶다면 스크린의 크기를 정확히 제어 할 수 있습니다.

39
00:04:07,650 --> 00:04:14,150
화면의 2/3는 화면의 1/4에 해당하며, 부트 스트랩 그리드 시스템을 사용하여 이러한 다양한 선택을 할 수 있습니다.

40
00:04:14,310 --> 00:04:25,140
지금은 컨테이너와 동등한 클래스와 컨테이너가 수행 할 div가없는 다른 요소를 보여 드리겠습니다.

41
00:04:25,140 --> 00:04:32,950
우리가 div 클래스 컨테이너 안에 물건을 넣는다면 주변에 약간의 간격을두고 그것을 중심으로 배치합니다.

42
00:04:33,360 --> 00:04:46,750
그래서 컨테이너는 여기에있는 모든 공간을 차지하는 것을 확인합니다.하지만 여기에는 약간의 여유가 있습니다.

43
00:04:46,750 --> 00:04:55,990
따라서 우리가 이야기하지 않은 그리드 시스템을 사용하지 않고도 빠른 개선을 원한다면 div 클래스 컨테이너를 추가 할 수 있습니다. 이제이 멋진 Jumbotron을 얻을 수 있습니다.

44
00:04:55,990 --> 00:05:03,230
그리고 우리가이 코드를 컨테이너에 잘 넣었다면 Jumbotron 안에 넣지 않을 것입니다.

45
00:05:03,310 --> 00:05:07,890
컨테이너에 의해 여전히 영향을받는 것을 볼 수 있습니다.

46
00:05:08,020 --> 00:05:18,120
그래서 Jumbotron 바깥 쪽에서 컨테이너 안을 저장하고 새로 고침하면 컨테이너 안에 있다는 것을 볼 수 있으며 시각적으로 반영됩니다.

47
00:05:18,400 --> 00:05:22,320
이제 구성 요소와 내가 보여줄 다음 항목으로 돌아가 보겠습니다.

48
00:05:22,330 --> 00:05:23,950
우리는 정상에갑니다.

49
00:05:24,280 --> 00:05:28,760
우리는 평가를 보러 가야하고, 나는 당신에게 그 형태와 방법을 보여줄 것입니다.

50
00:05:28,990 --> 00:05:33,030
따라서 양식을 클릭하면 상당히 다른 유형과 다른 예가 있습니다.

51
00:05:33,070 --> 00:05:35,710
그리고 우리가 무엇이든 입력하기 전에 먼저 스크롤 할 것입니다.

52
00:05:35,980 --> 00:05:39,910
다음은 부트 스트랩 양식의 기본 예제입니다.

53
00:05:39,910 --> 00:05:42,540
그것을 만드는 시장을 볼 수 있습니다.

54
00:05:42,760 --> 00:05:55,320
그런 다음 우리는 인라인 형식으로 알려진 형식을 가지며 다른 유형의 인라인 형식과 다른 유형의 입력 및 다른 유형의 형식을 가진 또 다른 형식을 갖습니다.

55
00:05:55,480 --> 00:06:00,420
이제는 지원되는 다양한 유형의 입력을 제어하는 ​​모든 유형의 양식에 대해 설명합니다.

56
00:06:00,430 --> 00:06:03,280
그래서이 색들이 모두 당신입니다.

57
00:06:03,310 --> 00:06:24,940
이메일 번호 주 시간 등 텍스트 영역에 따라 다른 확인란 사용 안 함 확인란 선택 취소 라디오 버튼 인라인 확인란 인라인 라디오 버튼 드롭 다운 메뉴는 계속 진행됩니다.

58
00:06:24,970 --> 00:06:26,780
우리는 다른 포럼 국가를 가지고 있습니다.

59
00:06:26,780 --> 00:06:28,370
우리는 초점 상태가 있습니다.

60
00:06:28,470 --> 00:06:30,910
이 파란색 주위에서 강조 표시를 볼 수 있습니다.

61
00:06:31,060 --> 00:06:34,420
기본 부트 스트랩 포커스 스타일입니다.

62
00:06:34,420 --> 00:06:54,610
우리는 또한 무능하게 추가해서 입력을 무력화 할 수 있고 우리는 할 수있는 몇 가지 다른 것들을 얻었지만, 나는 다시 돌아가서 기본적인 예제 설치에 집중할 것입니다.이 전체 양식을 복사하는 것부터 시작하겠습니다. 그리고 나서 우리는 그것을 조금씩 해부 할 것입니다.

63
00:06:54,610 --> 00:06:59,200
여기로 돌아가서이 양식을 다른 모든 것 다음에 추가합니다.

64
00:06:59,200 --> 00:07:01,420
그러나 나는 그것을 용기 안에서 할 것이다.

65
00:07:01,420 --> 00:07:03,290
이 풀 스크린을 잠시 동안 만들어 보도록하겠습니다.

66
00:07:03,340 --> 00:07:08,580
우리는 우리의 형식을 가지고 있으며 그 안에는 상당히 많은 내용이 있습니다.

67
00:07:08,590 --> 00:07:11,900
브라우저로 돌아가서 어떻게 생겼는지 살펴 보겠습니다.

68
00:07:12,460 --> 00:07:17,170
그리고 가장 먼저 눈에 띄는 것은 우리 양식이이 컨테이너를 가로 질러 진행된다는 것입니다.

69
00:07:17,230 --> 00:07:21,060
그것은 그 중 100 %를 차지하며, 우리가 통제 할 수있는 것입니다.

70
00:07:21,100 --> 00:07:28,470
일단 우리가 부트 스트랩 그리드 시스템에 대해 이야기하고 나면 이것이 50 % 가량 나아갈 것이라고 쉽게 말할 수있을 것입니다.

71
00:07:28,480 --> 00:07:34,090
부트 스트랩 그리드 시스템에 대해 말하면 쉽게 변경할 수있는 것이거나 아직 존재하지 않습니다.

72
00:07:34,120 --> 00:07:35,510
그래서 우리는 그걸로 갈 것입니다.

73
00:07:35,530 --> 00:07:37,080
지금은 100 %를 차지합니다.

74
00:07:37,120 --> 00:07:39,670
그것은 거대한 이상한 찾고있는 포럼이지만 괜찮습니다.

75
00:07:39,820 --> 00:07:41,320
우리는 그것을 어떻게 좋아합니다.

76
00:07:41,470 --> 00:07:45,290
그래서 우리는 다시 숭고하게 돌아가서 한 번에 하나씩 해부하겠습니다.

77
00:07:45,550 --> 00:07:48,730
그래서 우리는 포럼 태그 안에 포럼 태그를 가지고 있습니다.

78
00:07:48,910 --> 00:08:04,010
div 클래스 폼 그룹이 있습니다. 부트 스트랩 문서로 돌아가 폼 그룹 검색을하면 최적의 간격을위한 랩 레이블과 컨트롤을 폼 그룹에서 볼 수 있습니다.

79
00:08:04,300 --> 00:08:13,800
따라서이 첫 번째 그룹 클래스에서 그룹 클래스를 제거하면 첫 번째 클래스와 두 번째 클래스에서이를 수행하게 될 것입니다.

80
00:08:13,870 --> 00:08:21,520
저장하고 새로 고침하여 입력 사이에 간격이 어떻게 변하는 지 확인할 수 있습니다.

81
00:08:22,150 --> 00:08:30,640
그래서 우리는 돌아가서 양식 그룹을 추가 할 수 있습니다. 이것은 실제로 당신이 입력과 레이블을 가지고 그것을 그룹화하기를 원하는 곳에 사용하는 방법입니다.

82
00:08:30,940 --> 00:08:35,320
여기서주의를 기울이십시오. 바로 약간의 공간이 여기에 추가됩니다.

83
00:08:35,320 --> 00:08:43,660
단지 여기에 약간의 공간이 추가되어 시각적으로 효과적으로 이들 두 그룹을 그룹화 한 다음 그립을 시각적으로 함께 표시합니다.

84
00:08:43,660 --> 00:08:45,390
그래서 폼 그룹입니다.

85
00:08:46,000 --> 00:08:47,860
그런 다음 레이블은 정상입니다.

86
00:08:47,860 --> 00:08:54,960
Boucek 클래스에 라벨을 붙이기 위해 멋진 것을 추가 할 필요는 없지만 입력에는 클래스 폼 컨트롤이 있습니다.

87
00:08:55,300 --> 00:08:57,470
그래서 내가 그것을 없앨 때 어떤 일이 일어나는지 봅시다.

88
00:08:57,700 --> 00:09:03,670
그래서 나는 처음에 그것을 할 것이고 이메일 입력을 넣고 돌아가서 새로 고침 할 것입니다.

89
00:09:03,670 --> 00:09:08,590
이렇게하면 일반 기본 브라우저 입력으로 완전히 변경됩니다.

90
00:09:08,590 --> 00:09:10,050
그래서 당신은 둥근 모서리를 얻지 못합니다.

91
00:09:10,060 --> 00:09:12,800
우리는 같은 패딩과 사물 간격을 갖지 않습니다.

92
00:09:13,000 --> 00:09:19,010
그리고 우리가 클릭했을 때 같은 윤곽 효과를 얻지도 않습니다. 파란색 윤곽선을 얻지 만이 윤곽선과는 다른 것입니다.

93
00:09:19,180 --> 00:09:33,430
부트 스트랩 개요는 좀 더 미묘한데 두 점 사이의 즉각적인 시각적 변화 일 뿐이지 만 실제로 그리드 시스템과 함께 작업하고 다른 사람들과 행동하고 상호 작용하는 방식에 대해 더 중요한 차이점이 있습니다 집단.

94
00:09:33,620 --> 00:09:36,170
돌아가서 양식 컨트롤을 다시 추가합니다.

95
00:09:36,400 --> 00:09:45,880
그래서 정말로 우리가 이것을 원한다면 여기 모든 것이 종결되어 그룹과 폼 컨트롤을 형성합니다.

96
00:09:46,150 --> 00:09:49,840
이 두 클래스는 실제로 상황을 좋게 만드는 책임이 있습니다.

97
00:09:49,840 --> 00:09:55,680
이제이 단락 클래스 도움말 블록이 있으며 우리는 그 부분에서 얻은 것을 살펴볼 수 있습니다.

98
00:09:55,690 --> 00:10:16,080
여기에이 텍스트가 있습니다.이 힌트는 폼의 일부분에 대한 포인터와 클래스 도움말 블록과 관련된 것들에 대한 힌트를 제공합니다. 그리고 나서 여기에 우리 버튼이 있습니다.이 버튼은 보통의 Pucelle 버튼이거나 a와 b 사이에 있습니다. 가을과 우리가 다른 작은 버튼처럼 크고 작은 작은 여분의 작은 색상을 변경할 수 있습니다.

99
00:10:16,090 --> 00:10:23,270
자, 이제는 이것이 우리가 점보트론에 추가 할 수있는 레고 ​​버튼이있는 레고와 어떻게 다른지 볼 수 있습니다.

100
00:10:23,320 --> 00:10:27,360
또한 자체적으로 추가 할 수도 있고 양식 대신 추가 할 수도 있습니다.

101
00:10:27,430 --> 00:10:32,470
응용 프로그램의 다른 부분에 추가 할 수있는 작은 플러그 앤 플레이 구성 요소 일뿐입니다.

102
00:10:32,500 --> 00:10:36,990
이제 돌아가서 인라인 형식 인 다른 유형의 양식을 살펴 보겠습니다.

103
00:10:37,450 --> 00:10:39,120
그래서 이것은 약간 다르게 보입니다.

104
00:10:39,340 --> 00:10:53,860
이 코드를 복사 한 후 차이점을 살펴보고 첫 번째 형식을 그대로두고 여기에 줄 형식으로 주석을 추가하고 올바르게 들여 쓰기를합시다.

105
00:10:54,880 --> 00:10:56,200
좋아 보인다.

106
00:10:56,200 --> 00:10:58,360
모든 것이 동일하다는 것을 주목하십시오.

107
00:10:58,360 --> 00:11:04,290
양식 그룹을 가지고있는 입력에 대한 양식 제어가 여전히 있지만 큰 차이점이 있습니다.

108
00:11:04,360 --> 00:11:09,070
모든 것은 클래스 형식으로 한 줄 안에 있도록 양식 안에 있습니다.

109
00:11:09,490 --> 00:11:11,550
시작하는 모습을 보여 드리겠습니다.

110
00:11:11,640 --> 00:11:15,450
나는 돌아가서 우리에게이 라인 형태로 좋은 것을 준다.

111
00:11:15,850 --> 00:11:24,870
그리고 그걸 없애고 저장하자마자 이제는 우리가 여기있는 것처럼 정규 양식으로 돌아갑니다.

112
00:11:25,210 --> 00:11:29,330
따라서 하나의 클래스에는이를 제어 할 모든 스타일이 포함되어 있습니다.

113
00:11:29,470 --> 00:11:31,340
그래서 우리는 그것을 Form in Line으로 유지할 것입니다.

114
00:11:31,540 --> 00:11:34,270
그리고 다시 간격은 이상적이지 않습니다.

115
00:11:34,270 --> 00:11:37,130
우리가 그리드 시스템에 관해 말할 때 그것은 고정 될 것입니다.

116
00:11:37,150 --> 00:11:40,090
부트 스트랩 형태에 관해서는 더 많은 이야기를 할 수 있습니다.

117
00:11:40,090 --> 00:11:53,750
우리는 아마도 복잡한 조각을 만드는 부트 스트랩에 30 분 45 분의 강의를 할 수 있습니다.이 모든 다른 조각들과 우리가 할 수있는 여러 가지 스타일의 모든 종류의 사용자 정의를 검증 할 수있는 다양한 것들을 배우고 있습니다.

118
00:11:53,830 --> 00:11:55,120
그러나 나는 그렇게하지 않을 것입니다.

119
00:11:55,210 --> 00:11:56,880
우리는 중요한 기초를 다뤘습니다.

120
00:11:56,940 --> 00:12:09,730
Boucek 양식의 빵과 버터 종류에는 두 가지 유형이 있습니다. 여기에는 기본 정규 양식과 인라인 양식이 있으며 양식 주변에서 사용하는 부트 스트랩의 다른 측면에 몇 가지 다른 기능이 있습니다.

121
00:12:09,910 --> 00:12:20,310
하지만 지금 당장 시간을 보내지 말고 PRICHEP 양식의 모든 세부 사항과 작은 부분에 대해 늪지하기보다는 사실 우리가 실제로 부트 스트랩을 사용할 때 우리가 필요할 때 그 작은 조각들을 넣을 것입니다.

122
00:12:20,530 --> 00:12:33,480
그래서 폼에 관한 두 가지 테이크 아웃은 정말 중요한 폼 컨트롤과 폼 그룹 폼 컨트롤 인 두 개의 클래스가 될 것입니다. 입력을 부트 스트랩으로 정제 된 폼 그룹에 그냥 좋은 간격을 추가하십시오.

123
00:12:33,550 --> 00:12:40,910
그래서 당신이 무엇을 넣었는지간에 폼 그룹은 좋은 간격을 갖게되고 그다음에 하나의 클래스 폼 대시가 생깁니다.

124
00:12:40,960 --> 00:12:44,160
전체 양식이 줄을 서서 양식을 감쌀 경우.

125
00:12:44,520 --> 00:12:46,570
그리고 나서 점보 트론에 대해서도 이야기했습니다.

126
00:12:46,900 --> 00:12:50,020
아주 간단한 클래스는 Jumbotron과 같습니다.

127
00:12:50,110 --> 00:12:51,650
그래서 당신은 동료를 볼 수 있습니다.

128
00:12:51,970 --> 00:12:54,230
그런 다음 모든 것을 컨테이너 안에 넣습니다.

129
00:12:54,460 --> 00:12:59,140
그리고 만약 우리가 컨테이너를 제거하면 어떤 일이 일어나는지 보여줍니다.

130
00:12:59,880 --> 00:13:04,950
좋은 여백이 없어지는 간격을 새로 고칩니다.

131
00:13:05,200 --> 00:13:11,820
따라서 컨테이너는 앱에 간격을 두는 것만으로도 멋지게 보이게합니다.

132
00:13:12,140 --> 00:13:33,160
좋습니다.이 비디오를 끝내기 전에 노드와 익스프레스와 몽고 및 몽구스와 수많은 기술을 사용하여 연결된 전체 백 엔드 데이터베이스가있는 응용 프로그램을 빌드 할 사이트를 보여주는 10 초를 보냅니다. 부트 스트랩을 사용하여 인터페이스를 프로토 타입 화하여 비교적 빠르게 보이게 만들 수 있습니다. 여기서 Jumbotron을 볼 수 있습니다.

133
00:13:33,160 --> 00:13:37,820
우리는 나중에 설명 할 그리드 시스템을 사용하는 버튼 중 일부를 사용하고 있습니다.

134
00:13:37,960 --> 00:13:40,950
그런 다음 로그인하면 양식이 있음을 알 수 있습니다.

135
00:13:41,260 --> 00:13:47,610
그래서 이것들은 그리드 시스템을 사용하여 화면의 전체 너비를 차지하지 않도록 양식 컨트롤을 만들었습니다.

136
00:13:47,680 --> 00:13:50,070
오히려 그것은 단지이 작은 중간 섹션을 차지합니다.

137
00:13:50,170 --> 00:13:52,700
그리드 시스템에 대해 이야기하면 알게 될 것입니다.