1
00:00:00,750 --> 00:00:12,290
이 강의로 돌아와서 여러분에게 NFR 인 모든 부트 스트랩에서 가장 중요하고 널리 사용되는 구성 요소 중 하나를 보여주기 위해 Boucek dotcom을 실제로 볼 수 있습니다.

2
00:00:12,450 --> 00:00:15,980
여기서 충분한 바 구성 요소를 사용합니다.

3
00:00:16,200 --> 00:00:21,900
우리는 또한 Yelp 캠프 응용 프로그램과 Nav 막대의 크기를 조정할 때 하나를 사용하려고합니다.

4
00:00:21,900 --> 00:00:30,700
얼마나 반응이 좋았는지주의하십시오. 그리고 TAB을 눌렀을 때 곧 알아 차릴 수 있습니다. 우리는이 크기의 햄버거를 휴대 전화 크기로 얻습니다.

5
00:00:30,720 --> 00:00:33,020
그래서 우리는이 공과의 모든 것을 향해 노력할 것입니다.

6
00:00:33,180 --> 00:00:34,890
그러나 우리는 더 쉽게 시작할 것입니다.

7
00:00:34,890 --> 00:00:46,290
가장 먼저해야 할 일은 구성 요소로 이동하여 탐색 바를 사용하는 것입니다. 코드를 많이 작성하기 때문에 새 파일을 만들었습니다.

8
00:00:46,380 --> 00:00:48,150
늙은 사람이 어지러워졌습니다.

9
00:00:48,150 --> 00:00:50,620
나는 그걸 부르짖고있다. Bar H T M L.

10
00:00:50,820 --> 00:00:56,030
그들 안에는 타이틀을 바꾸지 않는 부트 스트랩 링크가 있습니다.

11
00:00:56,630 --> 00:01:00,980
그냥 부스트 바브라고 부르겠다.

12
00:01:01,350 --> 00:01:02,910
그냥 그렇게.

13
00:01:02,910 --> 00:01:07,580
이제 문서로 이동하여 기본 탐색 모음을 살펴 봅시다.

14
00:01:08,220 --> 00:01:13,460
여기이 예제는 브랜드 링크가있는 모든 중요한 기능을 보여줍니다.

15
00:01:13,560 --> 00:01:15,800
메뉴에 드롭 할 수있는 다른 링크가있을 수 있습니다.

16
00:01:15,930 --> 00:01:22,010
우리는 네비게이션 바 형태와 버튼을 가질 수 있습니다. 우리는 왼쪽에있는 오른쪽에있는 것들을 가질 수 있습니다.

17
00:01:22,020 --> 00:01:23,720
이것은 정말 모든 것을 보여줍니다.

18
00:01:23,790 --> 00:01:30,330
그것은 부트 스트랩 너프 바 (bootstrap naff bars)의 부엌 싱크대이며 결과적으로 마크 업은 조금 길다.

19
00:01:30,390 --> 00:01:33,530
이 비디오가 끝날 때까지이 모든 작업을 진행할 것입니다.

20
00:01:33,540 --> 00:01:37,790
그러나 나는 더 간단하게 시작하기를 원하며, 나는 당신에게 숫자를 만드는 가장 간단한 방법을 보여줌으로써 시작할 것입니다.

21
00:01:38,040 --> 00:01:51,550
그래서 우리는 nav 요소를 만들 필요가 있습니다. 그리고 NAV 요소는 우리가 nav bar와 nav bar를 원하는 두 개의 클래스를 가질 필요가 있습니다. 그리고 Dasch default로 시작할 수 있습니다.

22
00:01:51,550 --> 00:01:54,920
이제 브라우저에서 파일을보고 새로 고침 해 봅시다.

23
00:01:55,200 --> 00:02:04,860
내가 가로 질러지기를 바라며 거기에 충분한 바가 있다는 희미한 바가 맨 위를 가로 질러가는 것을 볼 수 있습니다. 그것이 우리가 실제로 NF 바를 초기화하는 방법입니다.

24
00:02:04,860 --> 00:02:06,980
이제 몇 가지 내용으로 채우자.

25
00:02:07,050 --> 00:02:11,640
가장 먼저 살펴볼 것은이 브랜드에서 어떻게 추가 할 수 있는지입니다.

26
00:02:11,790 --> 00:02:13,180
기본적으로 회사 이름.

27
00:02:13,230 --> 00:02:14,320
대부분의 경우에.

28
00:02:14,900 --> 00:02:20,830
그리고 그것은 nav bar header를 사용하고 나서 NFR header 안에서 nav bar brand를 사용합니다.

29
00:02:20,850 --> 00:02:35,910
div 클래스를 nav bar 대시 헤더와 동등하게 추가 한 다음 앵커 태그 인 nav bar 브랜드에 추가 할 것입니다.

30
00:02:35,910 --> 00:02:39,440
일반적으로 회사 이름을 클릭하면 홈 페이지로 돌아갑니다.

31
00:02:39,660 --> 00:02:45,840
그래서 우리는 그것을 앵커 태그로 여기에서 할 것이고 우리는 소프와 같은 트래픽으로 시작할 것입니다. 그래서 그것은 우리를 어디로 든 데려 가지 않습니다.

32
00:02:45,870 --> 00:02:52,890
클래스는 nav bar dash 브랜드와 같을 것이고 우리는 단지 회사 이름을 만들 것입니다.

33
00:02:52,890 --> 00:02:57,170
내가 커피 컵을 가지고 주변에 있는지 보자. 그래서 커피를 마시자.

34
00:02:57,270 --> 00:03:02,210
그러나 실제로 그것을 진정한 시작으로 만들기 위해 우리는 철자를 조금 바꿔야합니다.

35
00:03:02,400 --> 00:03:03,180
알렉스.

36
00:03:03,180 --> 00:03:03,990
나를 위해 충분하다.

37
00:03:04,020 --> 00:03:05,350
커피와 K.

38
00:03:05,760 --> 00:03:07,420
가자.

39
00:03:07,590 --> 00:03:11,830
새로 고침을하고 NAV 바 브랜드가 링크로되었습니다.

40
00:03:11,940 --> 00:03:12,880
나는 그것을 클릭한다.

41
00:03:13,010 --> 00:03:20,940
지금은 아무데도 안 걸리지 만 결국에는 응용 프로그램에 들어 있으므로 회사 이름을 클릭하면 다음 번 홈 페이지로 돌아갑니다.

42
00:03:20,940 --> 00:03:24,480
연락처와 같은 다른 링크를 추가 할 수 있는지 봅시다.

43
00:03:24,510 --> 00:03:25,660
등록을 위해 등록하십시오.

44
00:03:25,770 --> 00:03:27,490
술집에있는 모든 공통 링크.

45
00:03:27,660 --> 00:03:31,190
여기 페이지 링크에 대한 추가로 시작하겠습니다.

46
00:03:31,500 --> 00:03:41,600
그래서 우리는 되돌아 갈 것이고 그 다음 nav div 바깥 쪽에서 우리는이 div에서 다른 div를 만들려고합니다. 적어도 NAV 바의 왼쪽에있는 모든 내용을 수집 할 것입니다.

47
00:03:41,760 --> 00:03:48,960
그래서 우리는 헤더를 가지고 있고 우리는 약간의 내용을 가지게 될 것입니다. 그리고 우리가 오른쪽에 뭔가를 원한다면 또 다른 클래스를 가진 다른 div를 갖게 될 것입니다.

48
00:03:48,960 --> 00:03:50,010
여기 수업이 있습니다.

49
00:03:50,070 --> 00:03:56,730
실제로 우리는 nav과 nav bar 대시 nav를 원합니다.

50
00:03:56,850 --> 00:04:00,170
탐색 표시 줄 대시 탐색에 대한 이름을 묻지 마십시오.

51
00:04:00,210 --> 00:04:05,940
부트 스트랩의 큰 비판 중 하나는 약간 추한 것이고 때로는별로 의미가 없다는 것입니다.

52
00:04:06,030 --> 00:04:14,630
시맨틱 UI라고 부르는 경우 부트 스트랩의 의미 론적 의미에 대한 응답으로 만들어진 CSSA 프레임 워크가 실제로 있습니다.

53
00:04:14,910 --> 00:04:16,660
그리고 그것은 제가 실제로 즐기는 것입니다.

54
00:04:16,710 --> 00:04:18,070
그리고 나는 가르침에 대해 토론했다.

55
00:04:18,420 --> 00:04:22,190
그러나 결국에는 널리 사용되지 않는 훌륭한 자습서가 아직 없습니다.

56
00:04:22,200 --> 00:04:23,550
그래서 여기에 우리의 diff에.

57
00:04:23,590 --> 00:04:27,600
클래스 탐색 막대 탐색과 클래스는 그 두 가지를 탐색합니다.

58
00:04:27,690 --> 00:04:36,850
그리고 나서 우리가이 NFR에서 원하는 각 항목에 대해 우리는 동맹군을 추가해야하고 우리가 우리가 방금 앵커 태그를 가지고 있었으면 연결하고 싶다면 Y 내부에 추가해야합니다.

59
00:04:37,050 --> 00:04:38,810
그래서 이것은 아무데도 가지 않을 것입니다.

60
00:04:38,850 --> 00:04:42,280
다시 한번 이것은 About 페이지에있을 것입니다.

61
00:04:42,500 --> 00:04:54,120
그리고 내가 돌아가서 새로 고침하면 우리는 지금 하나 더 연락을 다시 저장에 추가하자에 대한 링크가 있습니다.

62
00:04:54,570 --> 00:04:58,950
이제 우리는 두 개의 링크가 있습니다. 이제 페이지의 오른쪽에 뭔가를 추가하겠습니다.

63
00:04:59,160 --> 00:05:07,630
등록 또는 등록을 위해 두 개의 링크를 추가하고 바의 오른쪽에 로그인을 위해 두 개의 링크를 추가합시다.

64
00:05:07,690 --> 00:05:23,570
우리는 여기에 nother 컨테이너가 필요합니다. divs를 사용하는 대신 divs를 사용하는 것이 더 일반적입니다. 똑같은 방식으로 작동하지만 div로 잘 작동 할지라도 우물 대신 동맹국을 원합니다. UL 대신에 조금 더 의미가 있습니다.

65
00:05:23,620 --> 00:05:32,700
그래서 우리는 또 다른 UL을 추가 할 것이고이 UL은 Nav가 될 것입니다. nav bar 대쉬 nav 그리고 nav bar 대쉬.

66
00:05:32,760 --> 00:05:33,570
권리.

67
00:05:33,660 --> 00:05:38,280
그리고 우리는 그 철자가 틀림없이 철자가 틀림없이 이루어 지도록해야합니다.

68
00:05:38,280 --> 00:05:42,960
따라서이 작업을 수행하면 해당 탐색 바의 오른쪽에 새로운 콘텐츠 그룹이 만들어집니다.

69
00:05:43,120 --> 00:05:44,540
이제 우리는 단지 그것을 채울 필요가 있습니다.

70
00:05:44,550 --> 00:05:47,750
그래서 나는 양쪽 가장자리에 두 개의 링크를 추가 할 것입니다.

71
00:05:47,820 --> 00:05:56,550
첫 번째 것은 아무데도 갈 것이고 가입이 끝나면 로그인 만하는 또 다른 로그인 창이 나타납니다.

72
00:05:56,940 --> 00:05:58,080
한 번 보자.

73
00:05:58,290 --> 00:06:01,630
페이지를 새로 고치면 오른쪽에 내용이 있음을 알 수 있습니다.

74
00:06:01,650 --> 00:06:12,220
그러나 가장자리에 맞춰서 주 컨테이너에 약간의 공간을 추가하는 것처럼 컨테이너에 충분한 바를 추가 할 수 있다고 수정했습니다.

75
00:06:12,220 --> 00:06:14,190
탐색 막대 대신 하나를 추가 할 수 있습니다.

76
00:06:14,400 --> 00:06:17,730
그래서 저는 용기 대신에 모든 것을 네 바에 넣었습니다.

77
00:06:17,740 --> 00:06:20,800
따라서 클래스는 컨테이너와 같습니다.

78
00:06:21,060 --> 00:06:22,430
이걸 내려 놔.

79
00:06:22,560 --> 00:06:26,180
모든 것이 제대로 들여 쓰기되었는지 확인하십시오.

80
00:06:26,190 --> 00:06:27,770
우리는 거기에 갈.

81
00:06:27,780 --> 00:06:30,930
그것을 시험해 봅시다.

82
00:06:30,930 --> 00:06:31,430
좋은.

83
00:06:31,440 --> 00:06:33,910
이제 모든 것이 훌륭하고 정확하게 중심에 위치합니다.

84
00:06:34,140 --> 00:06:41,940
nav 바깥에 컨테이너를 추가하고 전체 nav 바를 안에 넣으면 보여 드리겠습니다.

85
00:06:42,880 --> 00:06:43,650
뭐가 어떻게되는지보십시오.

86
00:06:43,660 --> 00:06:49,950
이제 내가 충분히 신선한 술집이라면 나는 사실 잘라내어 거리를 가로 질러가는 길의 일부만을 가야합니다.

87
00:06:50,460 --> 00:06:53,460
그래서 컨테이너는 우리가 그 내부에 넣는 모든 것에 그것을 할 것입니다.

88
00:06:53,670 --> 00:07:03,820
이 경우 우리는 네비게이션 바 내부에있는 콘테이너를 원합니다. 따라서 실제 네오 파트를 스스로 제약하지는 않지만 내부의 내용을 제한하고 있습니다.

89
00:07:04,440 --> 00:07:04,950
승인.

90
00:07:05,060 --> 00:07:13,060
그래서 우리는 우리의 헤터 (Hetter)를 가지고 있습니다. 우리는 왼쪽에 물건을 가지고 있고 오른쪽에 약간의 내용이 있습니다. 그래서 여기에서 볼 수 있습니다.

91
00:07:13,290 --> 00:07:29,670
이제 조금 더 나아가서이 기본 탐색 모음이나 기본 탐색 모음을 문서에서 사용하고이 전체 내용을 복사하고 바로 아래에 놓겠습니다. 이제는 약간의 공간을 만듭니다.

92
00:07:29,670 --> 00:07:33,010
더 명확하게하기위한 많은 의견.

93
00:07:33,250 --> 00:07:35,510
기본 탐색 막대.

94
00:07:36,060 --> 00:07:40,280
새로 고침 해 봅시다.

95
00:07:40,560 --> 00:07:44,580
여기에이 탐색 바가 있습니다. 강조하고 싶은 몇 가지 사항이 있습니다.

96
00:07:44,580 --> 00:07:48,690
하나는 우리가 메뉴에 떨어 뜨 렸지만 실제로 작동하지 않는다는 것입니다.

97
00:07:48,900 --> 00:07:53,300
그리고 창 크기를 조정할 때 여기 햄버거 메뉴가 있습니다.

98
00:07:53,550 --> 00:07:54,740
링크가 사라집니다.

99
00:07:54,750 --> 00:07:58,630
양식이 사라지고 여기를 클릭해야하는 내용이 표시됩니다.

100
00:07:58,830 --> 00:08:00,480
그러나 그것도 작동하지 않습니다.

101
00:08:00,960 --> 00:08:07,570
그럼 먼저 작동시켜 보도록하겠습니다. 그런 다음이 모든 다른 부분들과 그것이 작동하도록하기 위해 무엇을하는지 이야기하겠습니다.

102
00:08:07,590 --> 00:08:10,550
우리는 가서 부트 스트랩 자바 스크립트 파일을 포함시켜야합니다.

103
00:08:10,830 --> 00:08:15,660
부팅 스트랩 문서로 돌아 가면 다운로드를 클릭합니다.

104
00:08:15,780 --> 00:08:19,800
우리가 필요로하는 javascript 파일도 있습니다.

105
00:08:19,800 --> 00:08:24,460
Cdn 버전을 사용할 것이지만 다운로드 한 폴더 안에도 들어 있습니다.

106
00:08:24,510 --> 00:08:25,700
그냥 부트 스트랩이라고합니다.

107
00:08:25,810 --> 00:08:26,220
예.

108
00:08:26,250 --> 00:08:29,890
또는 최소화 된 버전이 Mencius를 부트 스트랩했습니다.

109
00:08:30,420 --> 00:08:36,210
그리고 그것을 추가하자. 그러면 우리는 우리 몸의 맨 아래에서 그것을 끝내고 구할 것이다.

110
00:08:36,210 --> 00:08:38,280
그리고 나는 우리가 자바 스크립트에 대해 말하지 않았다는 것을 안다.

111
00:08:38,380 --> 00:08:42,860
스크립트가 무엇인지 알지 못하며 여기서 소스는 중요하지 않습니다.

112
00:08:42,900 --> 00:08:44,710
부트 스트랩에 꽂을 것입니다.

113
00:08:44,910 --> 00:08:46,550
그리고 이제 우리의 새로 고침.

114
00:08:46,710 --> 00:08:53,470
우리가 여기서 보여줄 하나의 작은 문제를 해결할 수 있습니까? 자바 스크립트 부트 스트랩은 쿼리가 필요하다는 것을 알려줍니다.

115
00:08:53,790 --> 00:08:56,180
이것이 무엇인지,이 메시지에 어떻게 도달했는지 걱정하지 마십시오.

116
00:08:56,250 --> 00:08:59,970
그러나 나는 단지 당신에게 그것을 보여주고 싶습니다. 그래서 우리가 얻는 실제 메시지를 볼 수 있습니다.

117
00:08:59,970 --> 00:09:03,240
우리는 J 쿼리를 요구할 필요가 있습니다.

118
00:09:03,580 --> 00:09:05,360
그러나 가서 쉽게 얻을 수 있습니다.

119
00:09:05,400 --> 00:09:07,140
우리는 자바 스크립트를 작성할 필요가 없습니다.

120
00:09:07,170 --> 00:09:08,830
자바 스크립트를 알 필요가 없습니다.

121
00:09:08,830 --> 00:09:10,180
우리는 단지 그것을 포함해야합니다.

122
00:09:10,230 --> 00:09:23,890
그래서 우리가해야 할 일은 Jay dot com과 그 아래에서 가장 최근 버전을 선택하고이 URL을 복사해야하는 코드에있는 Jay queries CDN을 검색하는 것입니다.

123
00:09:23,910 --> 00:09:30,150
이것은 Querrey 파일입니다. 그리고 우리는 여기서 다시 돌아올 것입니다.

124
00:09:30,150 --> 00:09:32,560
이 스크립트 태그 중 하나를 추가 할 것입니다.

125
00:09:32,640 --> 00:09:34,410
기본적으로이 정확한 코드를 복사합니다.

126
00:09:34,410 --> 00:09:42,030
실제로 나는 그 정확한 줄을 복제하고이 URL을 당신이있는 jey 질의로 바꾸기가 쉬워 지도록 할 것입니다.

127
00:09:42,610 --> 00:09:44,530
그 밖의 모든 것이 실패하면 그냥 이것을 입력하면됩니다.

128
00:09:44,560 --> 00:09:56,290
그것은 나쁘지 않아 만약 내가하지만 제이 queery CDN에 대한 검색 하여이 저장하고 이것은 부팅 스크립트 파일을하기 전에 자바 스크립트 파일에 의존하기 때문에 쿼리에 의존합니다.

129
00:09:56,560 --> 00:10:00,370
그래서 한번 더 Jay 쿼리가 어떻게 작동하는지에 대해 너무 걱정하지 않아도됩니다.

130
00:10:00,450 --> 00:10:02,150
그게 지금부터 몇 분 남았 어.

131
00:10:02,430 --> 00:10:06,550
하지만 부트 스트랩을 최대한 활용하려면 특히 탐색 모음과 드롭 다운 메뉴를 사용해야합니다.

132
00:10:06,750 --> 00:10:13,210
우리는 지금이 두 줄을 사용해야 만 언제든지 다시 돌아가서 새로 고침 할 것입니다.

133
00:10:13,230 --> 00:10:18,850
먼저 드롭 다운 메뉴가 있음을 알 수 있듯이 우선 메뉴가 드롭되었습니다.

134
00:10:18,880 --> 00:10:24,430
우리는이 비디오에서 그것에 대해 이야기하지 않을 것이지만, 크기를 조정할 때 햄버거를 얻습니다.

135
00:10:25,050 --> 00:10:26,980
이제 햄버거를 클릭하면 작동합니다.

136
00:10:26,980 --> 00:10:29,480
숨겨진 자료를 토글합니다.

137
00:10:29,560 --> 00:10:43,280
그래서 바로 여기에서 작동하는 방식으로 여기에이 작은 중단 점이 있습니다.이 모든 내용은 숨기고 우리가 보는 모든 것은 머리말과 버튼입니다.

138
00:10:43,380 --> 00:10:49,120
그리고 나서 버튼을 클릭하면 이전에 숨겨진 콘텐츠가 모두 다시 나타납니다.

139
00:10:49,120 --> 00:10:50,650
이제 우리를 위해서.

140
00:10:50,950 --> 00:11:01,960
그러나 우리는이 4 개의 링크를 숨기고 크기를 조정할 때 숨겨진 4 개의 링크가 표시되도록 훨씬 덜 복잡한 버전을 수행 할 것입니다.

141
00:11:02,250 --> 00:11:09,830
그렇게하려면이 기본 버전에서이 거대한 몬스터 인 nav bar를 어떻게 수행하는지 살펴 봄으로써 시작하십시오.

142
00:11:10,380 --> 00:11:13,650
여기 중요한 라인을 지적 할께.

143
00:11:13,760 --> 00:11:24,850
div 클래스 붕괴 nav bar 붕괴 우리가이 div의 내부에 넣은 것은 무엇이든간에 우리가 Mobile size를 치면 붕괴되어 버튼을 만들 수 없습니다.

144
00:11:24,850 --> 00:11:33,470
숨기기에서 다시 나타나기에 토글 링을하지는 않지만 태블릿과 모바일 크기를 때릴 때 내용을 숨길 수 있습니다.

145
00:11:33,650 --> 00:11:40,320
그래서 우리는 이것을 복사 할 것이고 우리는 우리가 숨기고 싶은 컨텐트 주위에 그것을 감쌀 필요가 있습니다. 그리고 우리는 이것을 여기 숨기고 싶습니다.

146
00:11:40,330 --> 00:11:49,980
이 두 Juelz 그래서 우리는 작은 화면 크기를 때 우리가 숨기려면 4 개의 링크.

147
00:11:50,440 --> 00:11:57,820
그래서 닫기 태그를 추가하고 저장하면 여기에 선이 있으며 이것은 중요하며 잠깐 후에 나옵니다.

148
00:11:57,850 --> 00:12:01,230
아직 우리에게 영향을 미치지는 않을 것입니다.

149
00:12:01,690 --> 00:12:02,160
당신은 볼 수.

150
00:12:02,170 --> 00:12:10,650
이제 크기를 조정하면 축소 된 div의 모든 콘텐츠가 사라지는 지점이 바로 여기에 있습니다.

151
00:12:10,680 --> 00:12:11,650
이제는 다시 나타나지 않습니다.

152
00:12:11,640 --> 00:12:13,180
우리는이 햄버거를 얻지 못합니다.

153
00:12:13,330 --> 00:12:16,940
우리는 아무 것도 클릭하지 않고 붕괴되어 사라졌습니다.

154
00:12:17,050 --> 00:12:24,580
그리고 그것은 div 클래스 붕괴 nav bar 붕괴를 여기에 추가했기 때문입니다.

155
00:12:24,630 --> 00:12:29,780
다음으로해야 할 일은 햄버거를 넣는 것입니다. 코드는 아주 간단합니다.

156
00:12:29,780 --> 00:12:33,010
불행히도 우리가 스스로해야만하는 것보다 여전히 훨씬 낫습니다.

157
00:12:33,280 --> 00:12:37,220
하지만 햄버거는 실제로이 모든 것입니다.

158
00:12:37,800 --> 00:12:48,660
그래서 나는 그것을 복사하여 우리의 커피가 접촉하기 전에 낮잠이나 헤터의 내부에 붙여 넣을 것입니다.

159
00:12:48,970 --> 00:12:52,420
그리고 우리는 내가하는 일로 돌아갈거야.

160
00:12:53,320 --> 00:12:54,680
그냥 새로 고쳐 보자.

161
00:12:55,140 --> 00:12:57,910
그리고 지금 내가 크기를 조정하면 나는 햄버거를 얻는다.

162
00:12:58,120 --> 00:13:00,280
우리는 거기에 갈.

163
00:13:00,310 --> 00:13:03,240
이제 어떻게 작동하는지 조금 설명해 드리겠습니다.

164
00:13:03,250 --> 00:13:13,000
따라서 버튼이 있고 그 버튼 안에 3 개의 스팬이 있고 각 막대는이 막대 중 하나를 만드는 데 책임이 있습니다.

165
00:13:13,210 --> 00:13:21,780
그래서 우리가 여기에서 볼 수있는 이미지가 아닙니다. 사실이 햄버거를 만들기 위해 좁은 막대 모양으로되어있는이 작은 막대를 만들고있는 것은 각 팀입니다.

166
00:13:22,030 --> 00:13:34,310
그리고 나서 우리가 그것을 클릭 할 때 내용을 보이고 숨기는 한,이 데이터 대상 속성과 우리의 경우 B-S 예제에서 설정 한 것이 무엇이든 상관없이 우리는이 속성을 가지고 있습니다.

167
00:13:34,310 --> 00:13:41,700
이제 우리의 붕괴를위한 부트 스트랩 예제 넷이 우리 클럽을위한 것입니다.

168
00:13:42,180 --> 00:13:44,330
Nav. 데모처럼.

169
00:13:44,470 --> 00:13:49,810
그런 다음 실제로 축소하고 싶은 콘텐츠의 ID를 변경해야합니다.

170
00:13:49,870 --> 00:13:57,310
그래서 vs nav 데모와 일치하도록 변경하겠습니다.

171
00:13:57,340 --> 00:13:59,710
중요한 차이점 하나를 주목하십시오.

172
00:13:59,710 --> 00:14:11,420
우리는 북극 토르 (Arctic Thor)에 추가하지 않을 것입니다. CSI와 마찬가지로 C로 뭔가를 선택할 때 Octa Thorpe를 사용하여 ID를 대상으로 지정해야하므로 ID를 텍스트 이름으로 남겨 둡니다.

173
00:14:11,440 --> 00:14:18,120
이제 여기에서 데모를하면 Thorpe에 추가하여 새로 고침을 저장합니다.

174
00:14:18,120 --> 00:14:25,490
이제 크기를 조정하면 햄버거를 얻고 클릭하면 표시 및 숨기기를 전환 할 수 있습니다.

175
00:14:26,250 --> 00:14:27,040
큰.

176
00:14:27,070 --> 00:14:32,400
마지막으로 당신에게 보여줄 것은 우리가이 붕괴를 벗어나 뭔가를 움직이는 것입니다.

177
00:14:32,470 --> 00:14:35,710
여기에이 링크를 가져가 봅시다.

178
00:14:36,070 --> 00:14:55,710
계정 또는 about 및 연락처와 우리는 축소 된 div 바깥에서 바로 여기로 이동하고 새로 고침하면 실제로 붕괴하지 않고 볼 수 있으며 그 다음에는 붕괴 대신 다른 두 가지를 클릭합니다. 토글됩니다.

179
00:14:55,720 --> 00:15:00,390
지금 나는 이것이 좋게 보인다는 것을 말하고 있지 않다 그러나 그것은 붕괴 div의 중요성을 설명한다.

180
00:15:00,630 --> 00:15:08,160
따라서 붕괴가 일어 났거나 그와 관련된 다른 링크가있는 경우에는 왼쪽에있는 권리가 있습니다.

181
00:15:08,160 --> 00:15:12,070
우리는 그 작은 모바일 크기에 도달 할 때마다 모두 붕괴 될 것입니다.

182
00:15:12,070 --> 00:15:23,570
다시 버튼을 클릭하면 버튼이 데이터 대상 속성을 가지며 해당 ID가 숨겨져 있고 해당 버튼을 클릭하면 표시됩니다.

183
00:15:24,010 --> 00:15:25,930
그리고 그것이 여기서 일어나는 아이디어입니다.

184
00:15:26,440 --> 00:15:28,230
OK 마라톤의 종류.

185
00:15:28,270 --> 00:15:30,750
부트 스트랩 탐색 모음을 만드는 데 필요한 많은 것들.

186
00:15:30,970 --> 00:15:37,450
그러나 다시 우리가 거기에 도달하는 방법은 바로 이것을 파일에 복사하고 조각을 해부하는 것입니다.

187
00:15:37,540 --> 00:15:44,080
이것이 바로 예제 코드를 가지고 필요할 때마다 우리가 필요로하는 부분을 파악할 때마다 충분하게 만듭니다.