1
00:00:00,180 --> 00:00:04,680
이 강의로 돌아와서 여러분의 응용 프로그램에 부트 스트랩을 설치하는 방법을 보여 드리겠습니다.

2
00:00:04,740 --> 00:00:08,370
그리고 일단 당신이 그것을하면 피치를 사용하는 중요한 몇 가지 기초를 보여 드리겠습니다.

3
00:00:08,850 --> 00:00:14,180
그래서 나는 홈 페이지에서 bootstrapped 닷컴을 얻고 있는데 여기에 다운로드 부트 스트랩 링크가있다.

4
00:00:14,850 --> 00:00:20,100
부트 스트랩을 사용하는 방법에 대한 두 가지 주요 선택 사항이 있기 때문에 실제로는 직접 다운로드 링크가 아닙니다.

5
00:00:20,430 --> 00:00:24,340
우리는 파일을 다운로드 할 수 있으며 시작할 수 있도록 할 것입니다.

6
00:00:24,530 --> 00:00:29,360
그런 다음 파일을 가져 와서 응용 프로그램에 추가 할 수 있습니다.

7
00:00:29,430 --> 00:00:35,230
나는 기본적인 자료를 hMLML이라고 부르고 있다는 간단한 파일 탐색 팀을 만들었습니다.

8
00:00:35,790 --> 00:00:40,770
제목을 추가하기 만하면 부트 스트랩의 몇 가지 요소를 추가 할 것입니다.

9
00:00:40,800 --> 00:00:47,960
일단 우리가 그것을 설치하면 우리는 포괄적 인 것을 만들지 않을 것입니다. 우리는 그것을 기본적인 부트 스트랩 구성 요소의 놀이터로 사용하게 될 것입니다.

10
00:00:48,510 --> 00:00:58,460
이제 간단하게 H-1 부트 스트랩을 추가하고 저장해 봅시다.

11
00:00:58,700 --> 00:01:01,790
그리고 브라우저에서 이것을 열어 보겠습니다.

12
00:01:03,240 --> 00:01:05,280
그냥 지금 거기에 보관하십시오.

13
00:01:05,280 --> 00:01:06,690
이제 부트 스트랩을 설치하십시오.

14
00:01:06,780 --> 00:01:08,190
나는 그것을 다운로드했다.

15
00:01:08,250 --> 00:01:13,720
그래서 그 파일을 열면 여기에 몇 가지 다른 구성 요소가 있음을 볼 수 있습니다.

16
00:01:13,830 --> 00:01:23,890
C S 디렉토리가 있고 CCS 디렉토리 안에는 꽤 많은 파일이 있지만 실제로 CSSA를 부트 스트래핑 한 중요한 파일이 하나 있습니다.

17
00:01:24,630 --> 00:01:27,710
그리고 실제로 이것은 분당 최대 부트 스트랩 된 파일과 같습니다.

18
00:01:27,740 --> 00:01:32,290
SS보다 작은 공간을 차지하기 위해 수축이 줄어들었다.

19
00:01:32,460 --> 00:01:36,280
따라서이 두 파일은 실제로 부트 스트랩을 사용하는 중요한 파일입니다.

20
00:01:36,600 --> 00:01:43,370
그리고 이것은 부트 스트랩 테마입니다.이 세가지는 부트 스트랩에 커스텀 테마를 추가하는 데 사용됩니다. 그래서 그다지 중요하지 않습니다.

21
00:01:43,380 --> 00:01:45,680
우리가 필요로하는 것은 부트 스트랩 Dotsie 평가입니다.

22
00:01:45,780 --> 00:01:49,430
그리고 우리는 그것을 열어서 우리가 작업하고있는 것을 볼 수 있습니다.

23
00:01:49,470 --> 00:01:52,200
이것은 주 부트 스트랩 재평가 파일입니다.

24
00:01:52,770 --> 00:01:54,280
그것은 단지 많은 수업들입니다.

25
00:01:54,300 --> 00:02:00,510
CSSA의 모든 단일 라인을 보면 거의 클래스 선언 점이 있습니다.

26
00:02:00,690 --> 00:02:05,340
그러면 우리가 할 수있는 일은 우리의 어플리케이션 대신에 클래스를 사용하는 것입니다.

27
00:02:05,340 --> 00:02:12,720
따라서 흰색 텍스트와 빨간색 배경이있는 버튼을 원한다면 도트 버튼 위험을 적용 할 것입니다.

28
00:02:12,900 --> 00:02:14,510
그리고 이것이 바로 이것이 여기서하는 일입니다.

29
00:02:14,730 --> 00:02:19,590
그러나 위험은 흰 바탕에 빨간색 배경과 붉은 테두리가 있습니다.

30
00:02:19,650 --> 00:02:24,410
이제 다른 CSSA 파일처럼 애플리케이션에 포함시켜 보겠습니다.

31
00:02:24,750 --> 00:02:37,020
그래서 제가 할 일은 저의 기본 연구 팀이있는 곳과 같은 디렉토리로 끌어다 놓는 것입니다. 그리고 이것 대신에 부트 스트랩 된 분을 재평가 할 수 있습니다.

32
00:02:37,020 --> 00:02:38,520
별로 중요하지 않습니다.

33
00:02:38,550 --> 00:02:47,570
기술적으로 이것은 좀 더 빠르게로드됩니다. 왜냐하면 내가 여는 경우 모든 공백이 제거 된 거대한 라인이기 때문입니다.

34
00:02:47,850 --> 00:02:55,450
따라서로드하는 것이 더 쉽지만이 더 긴 버전을 사용하여 우리가 작업하고있는 것을 정확히 볼 수 있습니다.

35
00:02:55,470 --> 00:03:03,120
이제 실제 파일을 살펴 보겠습니다.이 파일을 닫고 CSX를 부트 스트랩으로 포함 할 것입니다.

36
00:03:03,220 --> 00:03:16,310
그래서 다른 스타일 시트와 마찬가지로 우리는 링크 된 태그가 필요하고 Tref는 부트 랏트 C S S입니다. 그리고 우리가 저장하면 여기에 신선한 페이지가 있습니다. 약간의 차이가 있습니다.

37
00:03:16,320 --> 00:03:18,140
이 H-1에서 글꼴을보십시오.

38
00:03:18,420 --> 00:03:19,590
그것은 바뀐다.

39
00:03:19,620 --> 00:03:25,500
이제 부트 스트랩이 설치되었거나 부트 스트랩과 함께 작동하는 C S가 필요합니다.

40
00:03:25,650 --> 00:03:35,310
우리는 javascript로 작업하지 않을 것입니다. 그러나 부트 스트랩을 설치하는 또 다른 옵션은 실제로 부트 스트랩 웹 사이트에 있습니다.

41
00:03:35,400 --> 00:03:40,750
부트 스트랩 CDN 여기에서이 링크를 가져 와서 코드에 추가 할 수 있습니다.

42
00:03:41,010 --> 00:03:44,870
그리고 그것은 동일한 파일의 호스트 된 버전에 대한 링크입니다.

43
00:03:45,120 --> 00:03:56,900
브라우저에서 열어서 붙여 넣으면 최소화 된 파일의 내용을 볼 수 있습니다.이 파일은이 파일에 저장되어 있습니다. 그래서 우리는 그 파일을 대체 할 수있는 링크를 가질 수 있습니다.

44
00:03:56,970 --> 00:03:57,540
다른 링크.

45
00:03:57,540 --> 00:04:01,530
태그를 붙여서 당신이 엘렌이고이 글을 주석으로 칠하겠습니다.

46
00:04:01,530 --> 00:04:04,230
당분간은 돌아가서 새로 고침하십시오.

47
00:04:04,380 --> 00:04:06,020
그리고 아무것도 바뀌지 않습니다.

48
00:04:06,030 --> 00:04:16,650
유일한 차이점은 첫 번째 경우에는 컴퓨터에 다운로드 한 파일을 연결 한 것이고 두 번째 경우에는 줄에 호스팅 된 외부 파일에 연결하는 것입니다.

49
00:04:16,650 --> 00:04:20,750
이제 부트 스트랩 문서를 살펴보고 이러한 구성 요소 중 일부 또는 일부를 시작해 보겠습니다.

50
00:04:21,240 --> 00:04:29,150
그래서 부트 스트랩을 얻고 C Ss를 클릭하자. 우리가 사용하게 될 더 중요한 부분을 지적 할 것이다.

51
00:04:29,400 --> 00:04:31,940
이제 버튼으로 간단하게 시작해 봅시다.

52
00:04:32,460 --> 00:04:49,220
우리가해야 할 일은 버튼을 사용하는 것입니다. 그 다음에 beaten 클래스를 사용하고 기본값 사이에있는 버튼 유형을 사용합니다.이 버튼은 흰색 버튼을 제공하지만 VTAM 기본 BATNA 액세스 정보이기도합니다.

53
00:04:49,260 --> 00:04:54,080
위험과 링크를 경고하고 그들 모두는 약간 다르게 스타일이 지정됩니다.

54
00:04:54,240 --> 00:05:02,500
그리고 물론 우리는이 색상을 스스로 변경할 수 있지만, 우리는 한 번 내장 된 것을 사용하여 시작할 것입니다. 그리고 그는 여기에서도 볼 수 있습니다.

55
00:05:02,700 --> 00:05:08,600
우리는 버튼 요소를 사용할 필요가 없습니다. 버튼이나 입력을 앵커 태그로 사용할 수 있습니다.

56
00:05:08,820 --> 00:05:10,720
그럼 그걸 시험해 봅시다.

57
00:05:11,730 --> 00:05:13,030
H-1 님, 안녕하세요.

58
00:05:13,230 --> 00:05:25,860
버튼 태그를 추가하면이 버튼 태그가 나를 클릭하고 지금 당장 페이지를 새로 고침하고이를 살펴 봅니다.

59
00:05:25,950 --> 00:05:27,310
그건 꽤 못 생겼어.

60
00:05:27,690 --> 00:05:39,200
그러나 우리가 가서 그 수업 PTEN을 추가하고 나서 성공과 저장 사이에 우리는이 멋진 녹색 버튼을 얻습니다.

61
00:05:39,330 --> 00:05:41,870
기본 스타일을 쉽게 익힐 수 있습니다.

62
00:05:42,190 --> 00:05:50,110
다시 돌아가서 우리가 사용할 수있는 크기가 다른 버튼에 대해 몇 가지 다른 것들을 보여 드리겠습니다. 정말 쉽습니다.

63
00:05:50,130 --> 00:06:00,500
단추 하나를 크고 작은 단추 또는 단추를 추가해야하기 때문에 단추 성공 후 시도해 볼 필요가 없습니다.

64
00:06:00,510 --> 00:06:09,740
클래스의 순서는 중요하지 않지만 여기 DTN 이후에 할 것입니다. 좀 더 작게하고 페이지를 새로 고칩니다.

65
00:06:09,750 --> 00:06:11,170
우리는 거기에 갈.

66
00:06:11,170 --> 00:06:30,480
이제 이것을 옮겨 놓고 몇 가지 버튼을 더 추가하겠습니다.하지만이 태그는 앵커 태그가 될 것입니다. 태그에 있거나 HF 콜렉션이 DP 콜론 슬래시와 같습니다. 매일 읽고있는 부트 스트랩 도트 컴을 얻은 다음 텍스트는 단지 부트 스트랩 문서를 말할 것입니다.

67
00:06:30,550 --> 00:06:47,330
이렇게 조금 더 크게 만들면 수업 시간에 수업에 추가하여 PTEN과 동등해야하며 Desch 정보를 공유하고 큰 PTEN 대시 Elgie로 만들고 새로 고침합니다.

68
00:06:47,340 --> 00:06:48,690
이제 두 개의 버튼이 있습니다.

69
00:06:48,750 --> 00:06:50,620
하나는 실제 버튼 요소입니다.

70
00:06:50,620 --> 00:06:55,210
또 다른 하나는 앵커 태그를 가지고 있으며 이것을 클릭하면 앵커 태그로 볼 수 있습니다.

71
00:06:56,340 --> 00:07:01,200
그래서 부트 스트랩을 사용하는 첫 1 분 안에 우리는 괜찮은 버튼을 얻을 수있었습니다.

72
00:07:01,370 --> 00:07:05,330
CSSA 자체를 복제하는 데는 10 ~ 15 줄의 CSSA가 필요했습니다.

73
00:07:05,760 --> 00:07:06,960
다시 가자.

74
00:07:06,990 --> 00:07:10,980
이 전체 화면을 다시 작성하면 버튼에 대한 몇 가지 다른 점을 알려 드리겠습니다.

75
00:07:11,220 --> 00:07:12,720
그래서 우리는 크기가 있습니다.

76
00:07:12,750 --> 00:07:21,080
버튼이 활성 상태 인 것처럼 보이게 만들 수있는 다른 상태와 활성 클래스를 추가하기 만하면됩니다.

77
00:07:21,390 --> 00:07:43,590
그래서 우리가 그것을 시도한다면 이제는 몇 개의 버튼을 추가하여 우리의 작은 미니어쳐 Click Me 버튼을 세 번 반복 할 것입니다. 그리고 중간 클래스의 마지막 하나를 활성화하고 새로 고침하면 잘 보일 것입니다. 이 화면이 제대로 작동하는 것처럼 화면에 충분히 잘 표시됩니다.

78
00:07:43,620 --> 00:07:49,290
다시 돌아가서이 속성을 추가하여 버튼을 비활성화 할 수 있습니다.

79
00:07:49,290 --> 00:07:51,850
사용 안 함은 사용할 수 없게됩니다.

80
00:07:52,440 --> 00:07:57,950
돌아가서 마지막으로 새로 고침을 사용하지 않도록 설정합시다.

81
00:07:58,180 --> 00:08:00,020
이제이 버튼은 사용할 수 없습니다.

82
00:08:00,120 --> 00:08:01,940
우리는 그 작은 작은 아이콘을 얻는다.

83
00:08:02,070 --> 00:08:05,110
색상이 더 이상 바뀌지 않는 호버링 효과가 없습니다.

84
00:08:05,220 --> 00:08:07,460
분명히 비활성화 된 버튼입니다.

85
00:08:07,560 --> 00:08:18,630
내가 당신에게 보여줄 위대한 마지막 것은 우리가 다시 색을 바꿀 수 있도록 위험한 밤은 우리에게 그 붉은 오렌지를 주며 당신은 여기에 모든 색을 볼 수 있습니다.

86
00:08:18,870 --> 00:08:25,850
물론 스타일을 덮어 씀으로써 다른 스타일 시트를 만들지 않고 이렇게 변경할 수 있습니다.

87
00:08:25,860 --> 00:08:27,270
나는 지금 여기서 그것을 할 것이다.

88
00:08:27,330 --> 00:08:32,330
그래서 우리는 단지 한 줄을 할뿐 아니라 아름다움과 위험을 좋아할 것입니다.

89
00:08:32,460 --> 00:08:51,550
우리는 오렌지 색으로 바꿀 수 있고 이제는 텍사스 오렌지를 위험에 빠뜨릴 수 있습니다. 실제로 배경을 변경하고 싶다면 배경색을 오렌지색으로 할 수 있습니다. 그렇게하면 스타일을 변경하고 오버라이드 할 수 있으므로 할 필요가 없습니다. 어떤 부트 스트랩이 당신을 상자에서 꺼내 주는지 사용하십시오.

90
00:08:52,200 --> 00:08:53,580
그리고 대부분의 장소는 그렇지 않습니다.

91
00:08:54,030 --> 00:08:56,940
좋아요, 그래서이 비디오에서 제가 할 일은 버튼입니다.

92
00:08:56,940 --> 00:09:00,300
난 단지 당신에게 부트 스트랩이 어떻게 작동하는지에 대한 정말 빠른 맛을 전하고 싶었습니다.

93
00:09:00,300 --> 00:09:13,540
기존 요소와 클래스에 클래스를 추가하는이 패턴은 다음 비디오의 CSSA 파일 부트 스트랩에서 정의됩니다. 양식과 입력을 포함하여 부트 스트랩과 함께 제공되는 다른 중요한 요소 중 일부를 강조하겠습니다.