1
00:00:00,270 --> 00:00:08,110
이 부대에 오신 것을 환영합니다. 부트 스트랩이라는 새로운 도구를 소개 할 예정입니다. 부트 스트랩 홈 페이지에는 부트 스트랩 된 닷콤이 있습니다.

2
00:00:08,330 --> 00:00:13,180
그리고이 소개 비디오에서 부트 스트랩이 무엇이며 왜 우리가 그것을 사용하는지 설명하기 위해 몇 분이 걸릴뿐입니다.

3
00:00:13,230 --> 00:00:17,100
또한 부트 스트랩을 사용하는 사이트의 몇 가지 예를 보여줍니다.

4
00:00:17,100 --> 00:00:20,350
공식 부트 스트랩을 읽는 것으로 시작해 봅시다.

5
00:00:20,610 --> 00:00:28,310
부트 스트랩은 자바 스크립트 프레임 워크에서 가장 인기있는 TMLC SS로서 웹에서 반응 형 모바일의 첫 번째 프로젝트를 개발합니다.

6
00:00:28,710 --> 00:00:30,460
그걸 좀 어기 죠.

7
00:00:30,480 --> 00:00:32,540
부트 스트랩은 대단히 인기가 있습니다.

8
00:00:32,580 --> 00:00:47,550
사실 그것은 기본적으로 가장 많은 사람들이 그것을 사용하는 것을 의미하는 허브를 얻는 데있어 가장 많은 별표가 있고 분기 된 저장소입니다. 대부분의 사람들이 도움을 얻고 부스터를 얻는 것은 사실 성공의 단일 파일이고 자바 스크립트의 단일 파일입니다. .

9
00:00:47,550 --> 00:00:54,180
이제 C S S와 그 파일에 많은 자바 스크립트가 있지만 두 파일 일 뿐이므로 우리의 응용 프로그램에 포함시킬 수 있습니다.

10
00:00:54,180 --> 00:01:05,950
기본적으로 우리는 다른 사람의 코드를 가져 와서 Bootstrap에서 우리 자신의 응용 프로그램을 추가했고 반응이 좋은 좋은 사이트를 만드는 데 도움을 주며 우리 자신의 코드를 작성하지 않고도 빠르게 만들 수 있습니다.

11
00:01:05,970 --> 00:01:08,760
이 과정에서 제가 여러분에게 보여줄 두 가지 주요 이유가 있습니다.

12
00:01:08,760 --> 00:01:10,890
첫 번째는 매우 인기있는 것입니다.

13
00:01:10,890 --> 00:01:11,850
많은 장소에서 사용합니다.

14
00:01:11,850 --> 00:01:15,560
많은 회사에서 많은 개발자들이 사용하고 있으며 가치가 있습니다.

15
00:01:15,690 --> 00:01:20,640
그러나 두 번째는이 과정에서 우리가 멋진 웹 사이트를 빠르게 만들 수 있도록 도와 줄 것입니다.

16
00:01:20,640 --> 00:01:40,020
그래서 우리가 노드와 익스프레스와 몽고와 몽구스와 무릎 깊숙이에 초점을 맞추고있을 때 우리가 배움을 배우고있을 때, 우리는 여전히 한 시간이나 두 시간을 바치지 않고도 좋은 것처럼 보이는 것을 만들 수 있습니다. 비디오를 스타일링 할 때 뭔가 붓 스트랩을 끼워 넣으면 10 분 15 초가 지나면 잘 볼 수 있습니다.

17
00:01:40,020 --> 00:01:50,840
다음에 할 일은 당신에게 부두에 대한 간단한 둘러보기를 제공하는 것입니다. 그러나 부트 스트랩은 좋은 예제를 많이 포함하고 있으며 실제로이 웹 사이트에서 부트 스트랩을 사용합니다.

18
00:01:51,060 --> 00:02:00,250
그래서 C Ss를 클릭하여 시작해 봅시다. 부트 스트랩은 CSSA 파일 내에 하나의 CSSA 파일과 자바 스크립트 파일로 구성되어 있습니다.

19
00:02:00,300 --> 00:02:02,560
우리가 무료로 얻을 수있는 것들이 많이 있습니다.

20
00:02:02,610 --> 00:02:05,420
이제 Buttons를 살펴 보겠습니다.

21
00:02:05,460 --> 00:02:16,680
따라서 우리가 버튼을 만들고 싶다면 우리의 애플리케이션에 부트 스트래핑을 포함시켜 클래스에이 클래스를 추가 할 수 있습니다. 실제로 Beati와 PTEN 기본값이며 우리는이 버튼을 얻습니다.

22
00:02:17,010 --> 00:02:18,840
우리는 다른 색깔을 할 수 있습니다.

23
00:02:19,470 --> 00:02:21,260
형태에 대해 살펴 보겠습니다.

24
00:02:21,360 --> 00:02:22,870
우리는 여기서 좋은 의견을 얻습니다.

25
00:02:23,310 --> 00:02:31,890
또한 모든 것이 사이트에서 반응적임을 알리는 것이 중요하므로 화면 너비에 반응하는 것을 볼 수 있습니다.

26
00:02:32,250 --> 00:02:34,060
우리는 또한 다양한 형태의 형태를 가지고 있습니다.

27
00:02:34,080 --> 00:02:35,680
당신은 다른 조각을 결합 할 수 있습니다.

28
00:02:35,700 --> 00:02:38,330
그래서 그들은 여기에 폼이있는 버튼을 사용하고 있습니다.

29
00:02:38,400 --> 00:02:46,660
따라서 레고 조각 부트 스트랩과 많은 방법이 있습니다. 레고 조각으로되어있어 적합하다고 생각할 때 함께 넣고 사이트에 추가 할 수 있습니다.

30
00:02:46,740 --> 00:02:48,690
우리는 이러한 구성 요소의 대부분을 살펴볼 것입니다.

31
00:02:48,720 --> 00:02:53,800
우리가이 작업을 시작하고 부트 스트랩 코드를 작성하기 시작하면 대부분의 큰 조각들.

32
00:02:54,270 --> 00:03:05,750
이제 우리는 다음 단계로 넘어가 자 다음 탭을 보게 될 것입니다. 구성 요소 구성 요소는 우리가 사용할 수있는 부트 스트랩의 더 큰 부분 중 일부를 포함하며 여기에는 탐색 모음과 같은 항목이 포함되어 있습니다.

33
00:03:05,940 --> 00:03:13,680
그리고 이것은 아마 약간의 코드로 볼 수있는 많은 사이트가 사용하는 부트 스트랩 중 가장 인기있는 부분 중 하나 일 것입니다.

34
00:03:13,710 --> 00:03:19,680
그것은 많이 보입니다. 그러나 우리가 처음부터 NAV 바를 쓰고있을 때보 다 훨씬 적습니다.

35
00:03:19,680 --> 00:03:30,660
그리고 이것은 드롭 다운 양식과 함께 여러 종류의 막대 다른 색상이 일부는 스크롤됩니다 페이지의 상단에 고정되어 있습니다.

36
00:03:30,690 --> 00:03:38,390
점보 트론 (Jumbotron)과 같은 다른 구성 요소는 웹 사이트 진행률 막대의 일부 내용을 보여주는 방법입니다.

37
00:03:38,670 --> 00:03:40,330
이것들은 모두 부트 스트랩과 함께 제공됩니다.

38
00:03:40,680 --> 00:03:48,970
따라서 부트 스트랩이이 모든 조각에 포함되는지 궁금해 할 것입니다. 부트 스트랩을 사용하는 모든 사이트가 똑같이 보인 스타일이 이미 미리 지정되어 있습니다.

39
00:03:49,320 --> 00:03:50,760
그리고 대답은 '예'입니다.

40
00:03:50,760 --> 00:03:53,240
사이트에서 부트 스트랩을 사용하는 방법에 따라 다릅니다.

41
00:03:53,760 --> 00:04:04,490
나는 부트 스트랩을 잘 사용하는 회사 나 프로젝트가 부트 스트랩을 사용하고 있다는 사실을 알기 어렵다고 주장 할 것이다. 왜냐하면 부트 스트랩이 주요 컴포넌트를 사용하기 때문에 실제로 들어가서 자신 만의 스타일을 쓸 수 있기 때문이다.

42
00:04:04,500 --> 00:04:07,860
색상을 변경하면 글꼴이 호버 효과 중 일부를 변경합니다.

43
00:04:07,920 --> 00:04:17,670
부트 스트랩과 동일한 색상과 모든 것을 사용할 필요는 없지만 부트 스트랩 스타일을 사용하는 것이 본질적으로 나쁘다는 것을 의미하지는 않습니다.

44
00:04:17,670 --> 00:04:19,080
그리고 우리는 확실히 둘 다 할 것입니다.

45
00:04:19,200 --> 00:04:25,290
그래서 우리가 사이트를 만들 때 포커스가 실제로 프론트 엔드에 있지 않다면, 우리는 단지 빠르게 볼 수있는 무언가를 만들고 싶습니다.

46
00:04:25,290 --> 00:04:30,310
기본적으로 프로토 타입 프런트 엔드는 부트 스트랩을 사용하며 많은 부분을 실제로 수정하지는 않습니다.

47
00:04:30,780 --> 00:04:42,580
그러나 우리가 조금 더 큰 무언가에 대해 작업하고 있다면, 부트 스트랩을 전혀 사용하지 않고 사용하는 것처럼 보이기를 원하지 않는다면 우리는 들어가서 우리 자신의 스타일을 추가 할 것입니다. 기본적으로 스프레이 페인트 부트 스트랩 맨 위에.

48
00:04:42,600 --> 00:04:50,740
다음으로하고 싶은 일은 부트 스트랩으로 구축 된 사이트 중 일부를 소개하고 Buddh 여행은 실제로 해당 사이트 중 일부를 선보이는 공식 웹 사이트입니다.

49
00:04:50,970 --> 00:04:54,330
엑스포를 클릭하면 이미 열어 놓았습니다.

50
00:04:54,330 --> 00:05:01,890
아름답고 고무적인 쇼케이스가 부트 스트랩을 사용함을 알 수 있습니다. 따라서 이들 중 일부를 열어 새 탭을 열 수 있습니다.

51
00:05:02,270 --> 00:05:03,870
그리고 이것들은 가장 최근의 것입니다.

52
00:05:03,870 --> 00:05:05,390
이 사이트에는 수백 명이 있습니다.

53
00:05:05,420 --> 00:05:14,660
당신은 그들 중 톤과 톤을 볼 수 있고 스크롤과 스크롤링을 유지할 수 있습니다. 그리고 나서 우리는 몇개 더 오래된 곳으로 갈 수 있고 그것을 사용하는 많은 다른 사이트가 있습니다.

54
00:05:15,000 --> 00:05:17,050
그리고 그들은 모두 똑같은 것처럼 보이지 않습니다.

55
00:05:17,610 --> 00:05:20,190
네, 아마도 그들 중 많은 사람들이 nav bar를 가지고 있습니다.

56
00:05:20,190 --> 00:05:28,450
어쩌면 그들 중 많은 사람들이이 풀 스크린 대형 이미지 레이아웃을 가지고 있을지도 모르지만 그것은 순수하게 책임 져야하는 것보다 더 많은 디자인 트렌드입니다.

57
00:05:28,980 --> 00:05:30,890
그럼 이들 중 일부를 살펴 보겠습니다.

58
00:05:30,930 --> 00:05:36,400
이 웹 사이트 템플릿을 실제로 만드는 회사 인 Creative Tim입니다.

59
00:05:36,630 --> 00:05:40,330
그리고 우리는이 멋진 이미지 격자를 볼 수 있습니다.

60
00:05:40,500 --> 00:05:41,600
그것은 매우 반응 적입니다.

61
00:05:41,610 --> 00:05:46,710
내가 이것을 축소하면 여기에 작은 항법 바가 생깁니다.

62
00:05:46,920 --> 00:05:52,660
따라서 이것은 모든 것을이 그리드에 배치하는 방식 인 부트 스트랩 구성 요소입니다.

63
00:05:52,890 --> 00:05:59,540
부트 스트랩은 부분적으로 그 책임이 있지만 부트 스트랩 버튼을 기본으로 사용하고 있지 않음을 알 수 있습니다.

64
00:05:59,580 --> 00:06:00,710
그들은 그들을 바꿨습니다.

65
00:06:00,780 --> 00:06:01,960
상황이 다르게 보입니다.

66
00:06:02,190 --> 00:06:06,130
그래서 이것은 정말 멋진 사이트 인 부트 스트랩을 사용하는 것이 정말 좋다고 생각합니다.

67
00:06:06,180 --> 00:06:12,170
잘 작동하고 부트 스트랩을 사용하지만 100 % 부트 스트랩에 의존하지 않습니다.

68
00:06:13,080 --> 00:06:15,120
하나 또는 두 개 더 살펴 보겠습니다.

69
00:06:15,480 --> 00:06:19,640
그래서 이것은 Indicus라고 불리우며 그와 같은 것을 가리 킵니다.

70
00:06:19,710 --> 00:06:24,200
분명히 사람들이 사용하는 디지털 제품을 설계하고 제작합니다.

71
00:06:24,240 --> 00:06:25,520
여기 아래로 스크롤 해 봅시다.

72
00:06:25,680 --> 00:06:26,980
우리가 가지고있는 것을 보아라.

73
00:06:27,270 --> 00:06:37,500
따라서 Pearcey SS에는 이전에 언급했듯이 정리하고 정리하는 데 도움이되는 부트 스트랩 그리드 시스템으로 구축 된 일부 콘텐츠가 있습니다.

74
00:06:37,560 --> 00:06:42,910
점점 더 좋아지고 있지만 부트 스트랩은 응용 프로그램에 물건을 배치하는 데 정말 유용합니다.

75
00:06:43,260 --> 00:07:05,930
그리고 여기에 작은 꼬리말 바가 있습니다. 여기에 탐색 바가있어서 정말 재미 있습니다. 엑스포는 부트 스트랩을 사용하여 프로젝트를 사용하는 방법과 회사가 수정하는 모든 다른 방법을 확인하는 데 시간을 할애합니다. 자신의 글꼴을 자신의 색으로 추가하고 많은 사이트가 사용하는 핵심 구성 요소가 무엇인지, 왜 부트 스트랩을 사용할지 결정해야합니다.

76
00:07:06,170 --> 00:07:14,970
그리고 제 의견으로는 우리가이 장치의 비디오와 탐색 막대 및 모든 것에 대한 응답 성을 높이기 위해 그리드 시스템에 실제로 도달하게됩니다.

77
00:07:15,420 --> 00:07:15,710
승인.

78
00:07:15,720 --> 00:07:20,230
끝내기 위해 우리가 만드는 간단한 사이트를 보여 드리겠습니다.

79
00:07:20,280 --> 00:07:23,110
이것은 무거운 애 태우기라는 우리의 신생 기업입니다.

80
00:07:23,190 --> 00:07:28,200
그것은 완벽한 고양이 동성애자를 찾는데 도움을 주며 부트 스트랩을 사용합니다.

81
00:07:28,200 --> 00:07:33,610
모르간 (Morgan) 버튼을 등록한 것과 마찬가지로 여기에 탐색 바가 있습니다.

82
00:07:33,630 --> 00:07:39,970
우리는이 작은 아이콘들을 얻습니다. 그리고 우리는 여기에 텍스트와 작은 꼬리표 줄 그리고 우리의 단추를 갖습니다.

83
00:07:40,290 --> 00:07:47,060
그런 다음 모든 것이 크기가 조절되면 모든 것이 반응합니다. 주변을 돌아 다니며 움직이는 것을 볼 수 있습니다.

84
00:07:47,190 --> 00:07:52,660
그리고 가장 중요한 것은 우리는 그 작은 햄버거를 얻습니다. 우리는 모바일 친화적 인 nav bar를 가지고 있습니다.