1
00:00:03,650 --> 00:00:11,190
Chúng tôi vừa hoàn thành một cuộc thảo luận về tầm quan trọng của việc cung cấp điều hướng trong trang web của bạn.

2
00:00:11,190 --> 00:00:15,920
Chúng tôi cũng xem xét một số cách khác nhau mà chúng tôi có thể cung cấp điều hướng trong một trang web.

3
00:00:15,920 --> 00:00:21,229
Bây giờ là lúc chúng ta nhìn vào bootstrap và nhìn vào các thành phần

4
00:00:21,229 --> 00:00:26,269
mà bootstrap cung cấp cho phép chúng tôi thêm điều hướng vào các trang web của chúng tôi.

5
00:00:26,269 --> 00:00:32,815
Hai thành phần quan trọng từ bootstrap là Navbar và Breadcrumbs.

6
00:00:32,815 --> 00:00:37,610
Chúng ta sẽ xem xét cả hai trong số này trong bài tập này.

7
00:00:37,610 --> 00:00:44,745
Hãy bắt đầu bằng cách thêm thanh điều hướng vào đầu trang web của chúng tôi.

8
00:00:44,745 --> 00:00:50,065
Chúng ta có thể làm điều đó bằng cách sử dụng các thành phần Navbar là một phần của bootstrap.

9
00:00:50,065 --> 00:00:51,605
Vậy, làm thế nào để bắt đầu?

10
00:00:51,605 --> 00:00:56,260
Chúng tôi đi đến phần thân của trang HTML của chúng tôi.

11
00:00:56,260 --> 00:00:58,760
Vì vậy, ở đây, tôi có index.HTML mở.

12
00:00:58,760 --> 00:01:00,495
Và ở phía trên,

13
00:01:00,495 --> 00:01:06,090
tôi sẽ thêm vào một phần tử bằng cách sử dụng thẻ HTML nav đó.

14
00:01:06,090 --> 00:01:10,330
Bây giờ thẻ HTML nav được thiết kế để cung cấp điều hướng.

15
00:01:10,330 --> 00:01:17,880
Vì vậy, chúng ta hãy tận dụng lợi thế của thẻ này và xây dựng thanh điều hướng của chúng tôi bằng cách sử dụng thẻ nav.

16
00:01:17,880 --> 00:01:19,645
Vì vậy, bây giờ, ở trên cùng,

17
00:01:19,645 --> 00:01:22,055
tôi sẽ thêm vào thẻ này,

18
00:01:22,055 --> 00:01:30,040
đặt nav và xây dựng thanh điều hướng xung quanh thẻ nav này.

19
00:01:30,040 --> 00:01:33,910
Vì vậy, một khi chúng ta thêm thẻ nav này vào index.HTML,

20
00:01:33,910 --> 00:01:39,590
sau đó chúng ta có thể đi trước và sau đó áp dụng các lớp bootstraps để thẻ nav này.

21
00:01:39,590 --> 00:01:42,700
Vì vậy, tôi áp dụng navbar lớp.

22
00:01:42,700 --> 00:01:47,485
Vì vậy, lớp navbar trong bootstrap cho phép tôi tạo ra một thanh điều hướng.

23
00:01:47,485 --> 00:01:50,730
Có rất nhiều cách khác nhau để tùy chỉnh thanh điều hướng,

24
00:01:50,730 --> 00:01:56,600
mà chúng ta có một cái nhìn như các lớp bổ sung sẽ thêm vào thẻ nav này.

25
00:01:56,600 --> 00:01:58,770
Cùng với navbar,

26
00:01:58,770 --> 00:02:02,880
chúng tôi cũng thêm vào lớp tiếp theo đó là navbar-tối.

27
00:02:02,880 --> 00:02:08,480
Bây giờ tôi muốn thanh điều hướng của tôi có màu tối,

28
00:02:08,480 --> 00:02:09,985
với nền tối hơn.

29
00:02:09,985 --> 00:02:13,920
Bởi vì nó đi rất tốt với trang web mà tôi vừa thiết kế.

30
00:02:13,920 --> 00:02:16,150
Chúng ta có thể có ánh sáng navbar-light,

31
00:02:16,150 --> 00:02:18,950
đó là một thanh điều hướng màu nhẹ hơn.

32
00:02:18,950 --> 00:02:23,775
Vì vậy, bạn có thể chọn để sử dụng một trong hai trong số họ trong trang web của bạn.

33
00:02:23,775 --> 00:02:32,620
Lớp tiếp theo mà tôi sẽ sử dụng là lớp navbar-expand-sm.

34
00:02:32,620 --> 00:02:36,870
Bây giờ, và cũng có thể, tôi sẽ chỉ định kích thước màn hình bên

35
00:02:36,870 --> 00:02:42,064
dưới mà hành vi có thể chuyển đổi đi vào tồn tại.

36
00:02:42,064 --> 00:02:45,165
Bây giờ, khi tôi nói navbar-expand-sm,

37
00:02:45,165 --> 00:02:48,480
điều đó có nghĩa là đối với các màn hình nhỏ và thêm nhỏ,

38
00:02:48,480 --> 00:02:51,370
navbars này sẽ trở thành một navbar có thể bật. Có

39
00:02:51,370 --> 00:02:57,080
nghĩa là, nó sẽ bị thu gọn trong các kích cỡ màn hình.

40
00:02:57,080 --> 00:03:00,520
Bạn sẽ sớm tìm hiểu cách thức hoạt động này,

41
00:03:00,520 --> 00:03:02,930
khi chúng ta nhìn vào cách chúng ta có thể thêm

42
00:03:02,930 --> 00:03:07,460
plugin sụp đổ vào navbar để kích hoạt loại hành vi đó.

43
00:03:07,460 --> 00:03:10,970
Vì vậy, cùng với một navbar có thể

44
00:03:10,970 --> 00:03:15,240
chuyển đổi sm, tôi sẽ áp dụng một màu nền cho navbar ban đầu,

45
00:03:15,240 --> 00:03:18,570
đó sẽ là bg-chính.

46
00:03:18,570 --> 00:03:25,909
Bây giờ bg-chính là màu chính được xác định trong bootstrap của bạn.

47
00:03:25,909 --> 00:03:33,350
Theo mặc định, đây là một phiên bản của màu xanh được sử dụng bởi bootstraps.

48
00:03:33,350 --> 00:03:35,910
Vì vậy, tôi sẽ bắt đầu với điều đó như là màu chính của tôi.

49
00:03:35,910 --> 00:03:42,350
Sau đó, tôi sẽ tùy chỉnh màu của navbar của tôi bằng cách sử dụng một số lớp CSS.

50
00:03:42,350 --> 00:03:45,155
Ngoài ra, tôi cũng sẽ áp dụng

51
00:03:45,155 --> 00:03:50,255
một lớp khác gọi là fixed-top để thanh điều hướng đó.

52
00:03:50,255 --> 00:03:55,210
Những gì cố định đầu làm, là nó sửa thanh điều hướng lên phía trên cùng

53
00:03:55,210 --> 00:04:00,330
của cửa sổ trình duyệt nơi trang web này đang được hiển thị.

54
00:04:00,330 --> 00:04:03,830
Ngay cả khi bạn cuộn trang ướt của bạn,

55
00:04:03,830 --> 00:04:07,870
thanh điều hướng vẫn còn ở đầu trang.

56
00:04:07,870 --> 00:04:12,250
Bạn có thể chỉ cần sử dụng đáy cố định để sửa

57
00:04:12,250 --> 00:04:18,235
thanh điều hướng xuống dưới cùng của cửa sổ trình duyệt của bạn hoặc bạn có thể nói, đầu tĩnh.

58
00:04:18,235 --> 00:04:21,810
Và cũng có thể, bạn chỉ có thể không sử dụng lớp này.

59
00:04:21,810 --> 00:04:23,140
Nếu bạn không sử dụng nó,

60
00:04:23,140 --> 00:04:29,325
sau đó thanh điều hướng của bạn cũng sẽ cuộn khi trang web của bạn được cuộn lên trên.

61
00:04:29,325 --> 00:04:36,670
Trong trang web của tôi, tôi chọn giữ thanh điều hướng cố định ở đầu trang.

62
00:04:36,670 --> 00:04:38,600
Có rất nhiều tùy chọn khác có

63
00:04:38,600 --> 00:04:43,920
sẵn mà bạn có thể tìm thấy trong tài liệu bootstraps.

64
00:04:43,920 --> 00:04:48,495
Vì vậy, đây là một ví dụ về việc sử dụng thanh điều hướng.

65
00:04:48,495 --> 00:04:51,645
Bây giờ ngoài ra, bên trong thanh điều hướng,

66
00:04:51,645 --> 00:04:54,545
tôi sẽ kèm theo bất kỳ nội dung

67
00:04:54,545 --> 00:04:57,450
nào sẽ được sử dụng trong thanh điều hướng bên trong một vùng chứa.

68
00:04:57,450 --> 00:05:02,880
Vì vậy, đây là nơi tôi sẽ sử dụng một phần tử div ở đây

69
00:05:02,880 --> 00:05:10,125
và áp dụng các lớp container để phần tử div này.

70
00:05:10,125 --> 00:05:12,520
Vì vậy, bất cứ điều gì được bao bọc bên trong đó,

71
00:05:12,520 --> 00:05:17,375
sẽ bị hạn chế ở cùng độ rộng như phần còn lại của trang Web của tôi.

72
00:05:17,375 --> 00:05:20,575
Như bạn nhớ lại, tôi đã sử dụng lớp chứa để

73
00:05:20,575 --> 00:05:24,870
xác định chiều rộng của nội dung trong trang web của tôi,

74
00:05:24,870 --> 00:05:28,080
vì vậy tôi sẽ áp dụng tương tự cho thanh điều hướng của tôi cũng,

75
00:05:28,080 --> 00:05:31,490
do đó thông tin thanh điều hướng của tôi sẽ được

76
00:05:31,490 --> 00:05:36,185
hiển thị trong cùng chiều rộng với phần còn lại của trang web của tôi.

77
00:05:36,185 --> 00:05:41,225
Bạn có thể chọn không sử dụng lớp chứa trong thanh điều hướng, Trong trường hợp đó,

78
00:05:41,225 --> 00:05:47,200
nội dung của thanh điều hướng sẽ trải rộng trên toàn bộ chiều rộng của màn hình của bạn.

79
00:05:47,200 --> 00:05:49,055
Bên trong thanh điều hướng,

80
00:05:49,055 --> 00:05:54,280
tôi sẽ thêm một lớp vào một thẻ ở đây.

81
00:05:54,280 --> 00:06:02,390
Lớp học này mà tôi gọi là navbar-thương hiệu,

82
00:06:02,520 --> 00:06:09,170
cho phép tôi hiển thị một số thông tin như một thông tin thương hiệu trong thanh điều hướng của tôi.

83
00:06:09,170 --> 00:06:11,110
Vì vậy, nếu bạn có một công ty ví dụ,

84
00:06:11,110 --> 00:06:13,050
bạn có thể hiển thị tên của công ty của bạn hoặc

85
00:06:13,050 --> 00:06:16,040
logo của công ty của bạn bằng cách sử dụng thương hiệu navbar-

86
00:06:16,040 --> 00:06:21,390
để sẽ được hiển thị nổi bật trong thanh điều hướng của bạn.

87
00:06:21,390 --> 00:06:23,370
Rõ ràng, khi bạn truy cập nhiều trang web,

88
00:06:23,370 --> 00:06:26,400
bạn sẽ thấy rằng tên của công ty là một nơi nào đó có thể nhìn thấy

89
00:06:26,400 --> 00:06:30,310
trong thanh điều hướng của trang web đó.

90
00:06:30,310 --> 00:06:33,085
Vì vậy, để tôi thêm vào đó một thương hiệu navbar-.

91
00:06:33,085 --> 00:06:42,190
Điều này cũng có thể được siêu liên kết đến trang chủ của trang web của bạn.

92
00:06:42,190 --> 00:06:43,895
Vì vậy, tôi sẽ để nó ở đó.

93
00:06:43,895 --> 00:06:46,000
Trong các trang còn lại trên trang web của

94
00:06:46,000 --> 00:06:50,480
tôi, tôi sẽ chỉ thêm href để đưa tôi trở lại trang index.HTML,

95
00:06:50,480 --> 00:06:52,449
đó là trang chủ.

96
00:06:52,449 --> 00:07:00,109
Và bên trong đây tôi sẽ thêm vào tên của nhà hàng của tôi.

97
00:07:03,220 --> 00:07:06,890
Hãy lưu các thay đổi và đi và

98
00:07:06,890 --> 00:07:11,110
xem nhanh trạng thái hiện tại của thanh điều hướng của tôi.

99
00:07:11,110 --> 00:07:13,710
Đi đến trang web trong trình duyệt,

100
00:07:13,710 --> 00:07:21,150
bây giờ bạn có thể thấy thanh điều hướng hiển thị trên trang web của tôi trong trình duyệt.

101
00:07:21,150 --> 00:07:25,960
Thanh điều hướng bây giờ là ở đầu trang và bạn

102
00:07:25,960 --> 00:07:30,490
có thể thấy rằng khi tôi cuộn trang của tôi,

103
00:07:30,490 --> 00:07:36,745
thanh điều hướng vẫn còn ở trên cùng bởi vì tôi đã sử dụng lớp cố định hàng đầu.

104
00:07:36,745 --> 00:07:38,520
Bạn cũng có thể thấy

105
00:07:38,520 --> 00:07:45,460
thương hiệu navbar-cho phép tôi hiển thị tên của nhà hàng ở đó.

106
00:07:45,460 --> 00:07:50,310
Sau đó tôi sẽ thay thế nó bằng logo cho nhà hàng này.

107
00:07:50,310 --> 00:07:56,010
Bạn nhận thấy rằng thanh điều hướng được bao phủ một phần trong Jumbotron.

108
00:07:56,010 --> 00:08:01,395
Bạn sẽ sửa chữa điều đó một chút sau đó bằng cách sử dụng một số tùy biến CSS.

109
00:08:01,395 --> 00:08:07,255
Điều tiếp theo mà tôi sẽ làm là thêm một vài liên kết vào thanh điều hướng của tôi,

110
00:08:07,255 --> 00:08:13,060
để các liên kết này sẽ dẫn tôi đến các trang khác trong trang web của tôi.

111
00:08:13,060 --> 00:08:14,790
Vậy làm thế nào để chúng ta làm điều đó?

112
00:08:14,790 --> 00:08:17,575
Quay trở lại index.HTML,

113
00:08:17,575 --> 00:08:24,490
Tôi sẽ thêm vào một ul ở đây,

114
00:08:24,490 --> 00:08:27,715
trong đó tôi sẽ khai báo

115
00:08:27,715 --> 00:08:36,460
tất cả các liên kết khác nhau mà sẽ được hiển thị trong hộp điều hướng của tôi.

116
00:08:36,460 --> 00:08:43,590
Vì vậy, ul này mà tôi sẽ áp dụng các lớp như navbar-nav.

117
00:08:43,590 --> 00:08:46,530
Vì vậy, đây là lớp học sẽ giúp tôi xác định

118
00:08:46,530 --> 00:08:51,275
tập hợp các liên kết sẽ được bao gồm trong thanh điều hướng của tôi.

119
00:08:51,275 --> 00:08:56,655
Và các liên kết này sẽ được hiển thị theo chiều ngang bên trong thanh điều hướng của tôi.

120
00:08:56,655 --> 00:09:01,660
Các mr autoclass mà tôi cũng đã áp dụng cho ul,

121
00:09:01,660 --> 00:09:05,740
được sử dụng để xác định lề phải.

122
00:09:05,740 --> 00:09:08,590
Vì vậy, đây là một lớp tiện ích có sẵn

123
00:09:08,590 --> 00:09:13,815
trong bootstrap cho phép tôi xác định lề phải.

124
00:09:13,815 --> 00:09:17,190
Vì vậy, nếu tôi nói, mr-auto,

125
00:09:17,190 --> 00:09:19,390
ý nghĩa của nó là ở phía bên phải,

126
00:09:19,390 --> 00:09:23,100
lề phải nên được thiết lập càng nhiều càng tốt.

127
00:09:23,100 --> 00:09:26,380
Vì vậy, điều đó có nghĩa là nội dung sẽ được đẩy càng trái

128
00:09:26,380 --> 00:09:30,175
càng tốt trong thanh điều hướng.

129
00:09:30,175 --> 00:09:32,310
Bên trong danh sách không có thứ tự này,

130
00:09:32,310 --> 00:09:34,515
tôi có thể sử dụng các yếu tố danh sách để bao gồm

131
00:09:34,515 --> 00:09:38,775
các liên kết khác nhau mà sẽ là một phần của thanh điều hướng của tôi.

132
00:09:38,775 --> 00:09:42,595
Vì vậy, trong đó, tôi sẽ thêm vào một vài liên kết ở đó

133
00:09:42,595 --> 00:09:48,900
và tôi sẽ bắt đầu bằng cách xác định một trong những đầu tiên có liên kết.

134
00:09:48,900 --> 00:09:51,830
Đối với mọi mục danh sách trong thanh điều hướng của

135
00:09:51,830 --> 00:09:56,110
bạn, bạn sẽ áp dụng các lớp như mục điều hướng.

136
00:09:56,110 --> 00:10:03,780
Điều này cho phép các mục danh sách được hiển thị theo chiều ngang dưới dạng liên kết trong thanh điều hướng của tôi.

137
00:10:03,780 --> 00:10:06,055
Và sau đó bên trong đây,

138
00:10:06,055 --> 00:10:10,640
sau đó tôi có thể sử dụng một thẻ để thêm vào

139
00:10:10,640 --> 00:10:16,140
liên kết thực tế sẽ là một phần của thanh điều hướng của tôi.

140
00:10:16,140 --> 00:10:19,600
Vì vậy, bên trong đó tôi sử dụng một thẻ với

141
00:10:19,600 --> 00:10:28,730
liên kết nav-class và điều này cũng cho phép tôi sử dụng href.

142
00:10:30,260 --> 00:10:37,145
Thuộc tính để xác định liên kết ở đó.

143
00:10:37,145 --> 00:10:41,255
Và cái đầu tiên mà tôi sẽ bao gồm là Home.

144
00:10:41,255 --> 00:10:46,935
Vì vậy, điều này sẽ bao gồm một mục được gọi là Trang chủ trong thanh điều hướng này.

145
00:10:46,935 --> 00:10:51,900
Để tôi sao chép lại rồi dán nó.

146
00:10:51,900 --> 00:10:55,475
Và sau đó chúng tôi sẽ chỉnh sửa một số trong số này bởi vì tôi muốn thêm

147
00:10:55,475 --> 00:11:00,630
bốn cái khác nhau vào thanh điều hướng của tôi.

148
00:11:00,630 --> 00:11:02,110
Người đầu tiên là Home.

149
00:11:02,110 --> 00:11:04,170
Người thứ hai sẽ là About.

150
00:11:04,170 --> 00:11:13,560
Thứ ba sẽ là Menu mà tôi sẽ xây dựng như một phần của khóa học tiếp theo.

151
00:11:13,560 --> 00:11:16,630
Và người cuối cùng sẽ là Liên hệ.

152
00:11:16,630 --> 00:11:25,495
Một trang web công ty điển hình sẽ có các liên kết như thế này trong thanh điều hướng của nó.

153
00:11:25,495 --> 00:11:27,830
Vì vậy, với việc thêm hai,

154
00:11:27,830 --> 00:11:30,915
bây giờ những gì tôi có thể làm là

155
00:11:30,915 --> 00:11:36,560
chúng ta có thể xác định rõ ràng một trong những liên kết này là liên kết hoạt động, có

156
00:11:36,560 --> 00:11:39,600
nghĩa là khi bạn đang ở trên trang cụ thể đó,

157
00:11:39,600 --> 00:11:42,145
liên kết cụ thể đó có thể được đánh dấu.

158
00:11:42,145 --> 00:11:48,685
Vì vậy, để làm điều đó, chúng tôi sẽ áp dụng ở đây lớp được gọi là hoạt động cho một trong những mục danh sách này.

159
00:11:48,685 --> 00:11:51,815
Trong trường hợp này, vì đây là trang index.html,

160
00:11:51,815 --> 00:11:56,085
tôi đang áp dụng lớp hoạt động cho liên kết nhà ở đó.

161
00:11:56,085 --> 00:12:02,725
Điều này khá nhiều hoàn thành thanh điều hướng của tôi trong trang index.HTML.

162
00:12:02,725 --> 00:12:08,095
Một điều nhỏ mà tôi muốn sửa chữa ở đây là liên kết Giới thiệu,

163
00:12:08,095 --> 00:12:12,130
tôi muốn liên kết nó với

164
00:12:12,130 --> 00:12:16,965
trang aboutus.HTML mà chúng tôi đã đưa vào trang web của chúng tôi,

165
00:12:16,965 --> 00:12:19,680
bởi vì đó là nơi tôi muốn nó dẫn đầu.

166
00:12:19,680 --> 00:12:23,795
Chúng ta hãy đi và xem nhanh thanh điều hướng của chúng tôi về phần này.

167
00:12:23,795 --> 00:12:25,985
Quay trở lại thanh điều hướng của chúng tôi,

168
00:12:25,985 --> 00:12:28,995
bạn có thể ngay lập tức thấy kết quả của việc đưa các

169
00:12:28,995 --> 00:12:32,730
mục đó vào danh sách không có thứ tự ở đó.

170
00:12:32,730 --> 00:12:34,160
Vì vậy, bạn thấy Trang chủ,

171
00:12:34,160 --> 00:12:36,500
Giới thiệu, Menu và Liên hệ ở đó,

172
00:12:36,500 --> 00:12:43,145
và mỗi người trong số họ là một liên kết nhưng đây là một mục điều hướng ở đây.

173
00:12:43,145 --> 00:12:48,740
Và lưu ý cách Trang chủ được đánh dấu ở đây vì việc sử dụng lớp hoạt động.

174
00:12:48,740 --> 00:12:50,305
Vì vậy, nếu tôi bấm vào About,

175
00:12:50,305 --> 00:12:52,990
nó sẽ đưa tôi đến sân About.

176
00:12:52,990 --> 00:12:55,670
Kìa, kìa, chúng ta ở đó.

177
00:12:55,670 --> 00:12:58,970
Nhưng tôi nhận ra rằng tôi không có một cách để quay trở lại,

178
00:12:58,970 --> 00:13:04,190
vì vậy điều đó có nghĩa là tôi cũng cần phải giao thanh điều hướng này cho trang aboutus.HTML.

179
00:13:04,190 --> 00:13:07,330
Chúng tôi sẽ đến đó trong một thời gian ngắn.

180
00:13:07,330 --> 00:13:11,360
Bây giờ, tôi sẽ nhanh chóng điều hướng bằng cách sử dụng nút trở lại của

181
00:13:11,360 --> 00:13:16,585
trình duyệt của tôi trở lại trang index.HTML của tôi.

182
00:13:16,585 --> 00:13:21,030
Một điều mà tôi cũng muốn chứng minh cho bạn là làm thế nào

183
00:13:21,030 --> 00:13:27,525
thanh điều hướng này sẽ sụp đổ cho kích thước màn hình nhỏ và nhỏ hơn.

184
00:13:27,525 --> 00:13:35,570
Vì vậy, hãy bật chế độ xem bằng cách sử dụng Chế độ xem Responsive,

185
00:13:35,570 --> 00:13:37,960
và sau đó cho phép tôi đi đến Galaxy S5.

186
00:13:37,960 --> 00:13:43,250
Và tôi nhận thấy rằng khi tôi sử dụng Galaxy S5 như thế này,

187
00:13:43,250 --> 00:13:50,000
bạn có thể thấy rằng điều này đang được hiển thị sớm hơn nó đã bao gồm màn hình.

188
00:13:50,000 --> 00:13:52,145
Đó không phải là hành vi mà tôi muốn.

189
00:13:52,145 --> 00:14:00,075
Tôi muốn có thể che giấu điều này khi tôi đang xem điều này trên một màn hình nhỏ và nhỏ hơn.

190
00:14:00,075 --> 00:14:04,220
Và sau đó có lẽ tôi thêm một nút ở đây mà tôi có thể sử dụng

191
00:14:04,220 --> 00:14:08,450
để bật và tắt hiển thị các liên kết này.

192
00:14:08,450 --> 00:14:13,170
Bạn đã thấy những điều như vậy trong các trang web di động.

193
00:14:13,170 --> 00:14:16,935
Làm thế nào để chúng ta làm điều này trong bootstrap?

194
00:14:16,935 --> 00:14:19,645
Chúng ta hãy đi đến bước đó tiếp theo.

195
00:14:19,645 --> 00:14:24,300
Quay trở lại thanh điều hướng của chúng tôi ở đây.

196
00:14:24,300 --> 00:14:27,910
Hãy để tôi thêm vào một nút ở đó,

197
00:14:27,910 --> 00:14:33,840
mà sẽ hoạt động như nút chuyển đổi để hiển thị và ẩn các

198
00:14:33,840 --> 00:14:42,225
liên kết của tôi từ thanh điều hướng của tôi khi nó được hiển thị trên màn hình thông minh và nhỏ.

199
00:14:42,225 --> 00:14:43,615
Vì vậy, để thêm vào đó,

200
00:14:43,615 --> 00:14:47,645
hãy để tôi thêm vào một nút và áp dụng một số lớp học để nút này.

201
00:14:47,645 --> 00:14:54,285
Chúng ta sẽ thảo luận thêm về các nút trong bootstrap trong bài học tiếp theo.

202
00:14:54,285 --> 00:14:57,515
Nhưng để thêm một nút trong bootstrap,

203
00:14:57,515 --> 00:15:03,770
bạn sẽ áp dụng các lớp cho nút đặc biệt này như navbar-toggle.

204
00:15:04,450 --> 00:15:07,420
Vì vậy, đây là một navbar-toggle.

205
00:15:07,420 --> 00:15:09,400
Vì vậy, như tên của nó,

206
00:15:09,400 --> 00:15:14,970
bạn đã bắt đầu hiểu những gì nút này sẽ làm trong trường hợp này.

207
00:15:14,970 --> 00:15:22,650
Và sau đó tôi sẽ thêm các loại như nút để chỉ ra rằng điều này đang hoạt động như một nút.

208
00:15:22,650 --> 00:15:31,360
Và sau đó chuyển đổi dữ liệu như sự sụp đổ.

209
00:15:31,360 --> 00:15:36,070
Bây giờ, thuộc tính chuyển đổi dữ liệu này mà bạn sẽ thấy ở đây thực sự là

210
00:15:36,070 --> 00:15:42,400
một sử dụng thành phần JavaScript trong bootstrap.

211
00:15:42,400 --> 00:15:48,100
Chúng ta sẽ nhìn vào dữ liệu này gạch nối thanh loại thuộc tính hơn trong mô-đun tiếp theo,

212
00:15:48,100 --> 00:15:50,875
nơi chúng ta sẽ xem xét các thành phần JavaScript bootstraps.

213
00:15:50,875 --> 00:15:55,225
Thanh điều hướng đòi hỏi một trong những thành phần JavaScript để có thể

214
00:15:55,225 --> 00:15:59,980
bật và tắt các liên kết của tôi trong thanh điều hướng của tôi, Vì vậy,

215
00:15:59,980 --> 00:16:03,825
đó là lý do tại sao tôi nhanh chóng giới thiệu khái niệm này ở đây,

216
00:16:03,825 --> 00:16:05,800
nhưng chúng tôi sẽ trở lại để kiểm tra các

217
00:16:05,800 --> 00:16:12,020
thành phần JavaScript bootstraps này nhiều hơn trong mô-đun tiếp theo.

218
00:16:12,020 --> 00:16:14,420
Vì vậy, chuyển đổi dữ liệu sụp đổ và

219
00:16:14,420 --> 00:16:24,610
sau đó là dữ liệu mục tiêu là #Navbar.

220
00:16:24,610 --> 00:16:30,660
Bây giờ, tôi sẽ giới thiệu một div với ID như navbar.

221
00:16:30,660 --> 00:16:33,470
Vì vậy, khi tôi chỉ định một ngày hoặc mục tiêu #Navbar,

222
00:16:33,470 --> 00:16:38,560
mà đề cập đến ID của phần tử khác đó sẽ là

223
00:16:38,560 --> 00:16:44,025
mục tiêu của nút đặc biệt này ở đây.

224
00:16:44,025 --> 00:16:47,625
Vì vậy, đó là phần mà tôi thêm vào dưới cùng.

225
00:16:47,625 --> 00:16:52,340
Và cũng có thể, tôi muốn nút hiển thị một cái gì đó ở đây.

226
00:16:52,340 --> 00:16:56,970
Và thông thường, khi bạn nhìn thấy các loại nút này trong các trang web di động,

227
00:16:56,970 --> 00:16:59,730
nó sẽ chứa các dòng miễn phí ở đó,

228
00:16:59,730 --> 00:17:04,310
do đó, thường được gọi là biểu tượng chuyển đổi Navbar-toggle.

229
00:17:04,310 --> 00:17:11,630
Vì vậy, tôi sẽ bao gồm một biểu tượng đặc biệt

230
00:17:11,630 --> 00:17:19,660
được bao gồm trong bootstrap, được gọi là biểu tượng navbar-toggle.

231
00:17:19,660 --> 00:17:23,395
Vì vậy, nếu tôi áp dụng lớp này để span tag,

232
00:17:23,395 --> 00:17:29,050
sau đó sẽ giới thiệu một biểu tượng navbar-toggle để nút của tôi ở đây.

233
00:17:29,410 --> 00:17:32,130
Vì vậy, điều đó giới thiệu một nút.

234
00:17:32,130 --> 00:17:34,980
Chúng ta sẽ xem xét nó trông như thế nào trong một thời gian ngắn.

235
00:17:34,980 --> 00:17:36,780
Bây giờ, khi tôi nhấp vào nút này,

236
00:17:36,780 --> 00:17:41,140
tôi muốn có thể hiển thị và ẩn các liên kết này.

237
00:17:41,140 --> 00:17:43,140
Để cho phép tôi làm điều đó,

238
00:17:43,140 --> 00:17:50,780
những gì tôi sẽ làm là bao quanh ul này với một div ở đây.

239
00:17:51,070 --> 00:17:57,585
Vì vậy, tôi sẽ đi vào và giới thiệu một div xung quanh ul này.

240
00:17:57,585 --> 00:17:59,280
Và để div này,

241
00:17:59,280 --> 00:18:04,850
tôi sẽ áp dụng các lớp như sụp đổ,

242
00:18:04,850 --> 00:18:15,895
và sau đó navbar-sụp đổ, và sau đó tôi cung cấp cho nó một ID như Navbar.

243
00:18:15,895 --> 00:18:20,115
Bây giờ, bạn đang bắt đầu thấy sự tương quan giữa

244
00:18:20,115 --> 00:18:26,300
các lớp này và ID và những gì tôi tuyên bố trong chuyển đổi dữ liệu và mục tiêu dữ liệu.

245
00:18:26,300 --> 00:18:32,750
Vì vậy, ở đây mục tiêu dữ liệu tôi chỉ định là #Navbar và do đó ID được đưa ra cho div này là navbar.

246
00:18:32,750 --> 00:18:35,640
Và tôi chỉ định chuyển đổi dữ liệu là sự sụp đổ.

247
00:18:35,640 --> 00:18:40,440
Thu gọn là một trong những thành phần JavaScript bootstraps

248
00:18:40,440 --> 00:18:43,955
, chúng ta sẽ xem xét chi tiết hơn trong mô-đun tiếp theo.

249
00:18:43,955 --> 00:18:50,780
Vì vậy, kèm theo điều này bên trong div cho màn hình nhỏ và thêm nhỏ,

250
00:18:50,780 --> 00:18:54,860
điều này sẽ được ẩn theo mặc định,

251
00:18:54,860 --> 00:18:56,520
nhưng khi tôi nhấp vào nút,

252
00:18:56,520 --> 00:19:01,445
nội dung của div này sẽ được tiết lộ trên màn hình.

253
00:19:01,445 --> 00:19:09,540
Hãy để tôi cũng thêm một mr-auto vào một lớp navarbar-thương hiệu ở đó để

254
00:19:09,540 --> 00:19:18,775
tôi tự động giới thiệu một lề phải đủ để navbar- thương hiệu này.

255
00:19:18,775 --> 00:19:22,495
Bây giờ, chúng ta hãy đi và nhìn vào điều này trong trình duyệt của chúng tôi.

256
00:19:22,495 --> 00:19:25,270
Đi đến trình duyệt, bây giờ bạn có thể thấy làm thế nào

257
00:19:25,270 --> 00:19:31,370
navbar của tôi bị thu gọn trên kích thước màn hình nhỏ và nhỏ hơn.

258
00:19:31,370 --> 00:19:35,925
Và chú ý nút này ở phía bên trái.

259
00:19:35,925 --> 00:19:38,005
Khi tôi nhấp vào nút, các

260
00:19:38,005 --> 00:19:43,805
liên kết trong thanh điều hướng của tôi sẽ được hiển thị và ẩn.

261
00:19:43,805 --> 00:19:51,360
Đây là hành vi mà tôi muốn thực hiện đáp ứng thanh điều hướng của tôi.

262
00:19:51,360 --> 00:19:55,375
Nếu tôi chuyển sang

263
00:19:55,375 --> 00:20:00,925
màn hình bình thường, lớn hơn, thanh điều hướng sẽ được hiển thị hoàn toàn bao gồm các liên kết.

264
00:20:00,925 --> 00:20:07,190
Nhưng khi tôi xem cùng một điều trên một màn hình nhỏ hơn như thế này,

265
00:20:07,190 --> 00:20:10,430
sau đó các liên kết thanh điều hướng được ẩn đằng sau

266
00:20:10,430 --> 00:20:15,020
nút này và sau đó sẽ được bật và tắt bằng cách nhấp vào nút đó.

267
00:20:15,020 --> 00:20:18,190
Vì vậy, đó là hành vi đáp ứng mà bạn có thể

268
00:20:18,190 --> 00:20:22,870
xây dựng vào thanh điều hướng của bạn trên trang web của bạn.

269
00:20:22,870 --> 00:20:27,285
Bây giờ chúng tôi đã hoàn thành thanh điều hướng trên trang index.HTML của

270
00:20:27,285 --> 00:20:32,015
tôi, tôi muốn có thể giới thiệu cùng một thanh điều hướng đến trang aboutus.HTML.

271
00:20:32,015 --> 00:20:35,540
Trước khi chúng tôi đến đó, chúng ta hãy đi đến chân trang ở đây.

272
00:20:35,540 --> 00:20:38,250
Và sau đó bạn nhận thấy rằng ở chân trang,

273
00:20:38,250 --> 00:20:39,870
chúng tôi có những liên kết này.

274
00:20:39,870 --> 00:20:43,265
Tôi muốn có thể cập nhật liên kết này cũng để trỏ

275
00:20:43,265 --> 00:20:48,450
đến aboutus.HTML để ngay cả bằng cách nhấp vào liên kết trong chân trang của

276
00:20:48,450 --> 00:20:51,090
tôi, tôi vẫn sẽ đi đến trang về.

277
00:20:51,090 --> 00:20:53,780
Bây giờ, quay trở lại đây,

278
00:20:53,780 --> 00:21:02,320
những gì tôi sẽ làm chỉ đơn giản là sao chép mã này của thanh điều hướng này từ đây.

279
00:21:02,870 --> 00:21:13,520
Và sau đó, đi đến trang aboutus.HTML và sau đó dán vào trang aboutus.HTML của tôi.

280
00:21:13,520 --> 00:21:17,145
Không chỉ vậy, tôi cần phải làm một số điều chỉnh này,

281
00:21:17,145 --> 00:21:20,750
bởi vì điều này bây giờ là trong trang aboutus.HTML.

282
00:21:20,750 --> 00:21:25,105
Vì vậy, rõ ràng, có một vài điều mà tôi cần phải cập nhật.

283
00:21:25,105 --> 00:21:29,875
Đầu tiên và quan trọng nhất, điều này navbar-thương hiệu mà nên dẫn tôi trở

284
00:21:29,875 --> 00:21:35,485
lại trang chủ của tôi bây giờ nên được cập nhật như index.HTML ở đây.

285
00:21:35,485 --> 00:21:43,045
Và sau đó, mục danh sách ở đây bây giờ là thứ hai trang chủ một lần nữa,

286
00:21:43,045 --> 00:21:51,165
Tôi muốn cập nhật mà index.HTML có và sau đó liên kết thứ hai để về,

287
00:21:51,165 --> 00:21:53,610
bởi vì đây là trang aboutus.HTML,

288
00:21:53,610 --> 00:21:58,480
Tôi sẽ đặt nó trở lại mà băm đó và sau đó tôi sẽ loại bỏ

289
00:21:58,480 --> 00:22:06,045
các lớp hoạt động từ đầu tiên mục và sau đó áp dụng các lớp hoạt động cho mục thứ hai,

290
00:22:06,045 --> 00:22:11,520
bởi vì đây là trang Giới thiệu và vì vậy mà nên là một trong đó được đánh dấu.

291
00:22:11,520 --> 00:22:16,705
Một lần nữa, đi đến chân trang của Trang Giới thiệu.

292
00:22:16,705 --> 00:22:22,870
Trong chân trang, tôi sẽ thực hiện các cập nhật tương tự cho các liên kết ở đây để

293
00:22:22,870 --> 00:22:29,525
Trang chủ sẽ dẫn tôi trở lại index.HTML và sau đó cho phép tôi lưu các thay đổi.

294
00:22:29,525 --> 00:22:34,740
Vì vậy, bây giờ About Page của tôi cũng được cập nhật một cách chính xác.

295
00:22:34,740 --> 00:22:36,390
Đi đến trình duyệt,

296
00:22:36,390 --> 00:22:41,220
bây giờ bạn có thể thấy rằng tôi đang ở trên Trang chủ của tôi và sau đó khi tôi nhấp vào trang about,

297
00:22:41,220 --> 00:22:42,795
tôi sẽ đi đến Trang About.

298
00:22:42,795 --> 00:22:48,710
Lưu ý làm thế nào mà cùng một thanh điều hướng được hiển thị trong Giới thiệu Trang, vì

299
00:22:48,710 --> 00:22:51,090
vậy bạn có về được đánh dấu bởi vì tôi

300
00:22:51,090 --> 00:22:53,660
áp dụng các lớp hoạt động để đó và sau đó

301
00:22:53,660 --> 00:22:58,770
tôi có thể quay trở lại Trang chủ của tôi hoặc bằng cách nhấp vào narvar-thương hiệu hoặc Trang chủ.

302
00:22:58,770 --> 00:23:02,115
Vì vậy, chúng ta hãy nhấp vào narvar-thương hiệu và chúng tôi đang trở lại trong trang

303
00:23:02,115 --> 00:23:06,210
chủ hoặc trang chủ của chúng tôi hoặc index.HTML.

304
00:23:06,210 --> 00:23:13,180
Vì vậy, bây giờ điều hướng được thiết lập chính xác cả trong Trang chủ và trong Trang Giới thiệu. Một

305
00:23:13,180 --> 00:23:17,810
vài điều bổ sung mà tôi sẽ làm là để áp dụng nếu bạn thấy

306
00:23:17,810 --> 00:23:23,480
nó là lớp mà tôi có thể thay đổi màu sắc của navbar của tôi

307
00:23:23,480 --> 00:23:26,340
và tôi cũng muốn thêm

308
00:23:26,340 --> 00:23:32,595
một breadcrumb vào này About Page và do đó breadcrumb cũng sẽ cung cấp cho tôi một cách khác

309
00:23:32,595 --> 00:23:36,950
để điều hướng trở lại Trang chủ của tôi và cũng sẽ cho biết

310
00:23:36,950 --> 00:23:42,170
hệ thống phân cấp trong trang web của tôi nơi tôi đang ở tại thời điểm này.

311
00:23:42,170 --> 00:23:45,505
Vì vậy, hãy làm hai bước tiếp theo.

312
00:23:45,505 --> 00:23:49,835
Quay trở lại trình soạn thảo đó trong styles.css.

313
00:23:49,835 --> 00:23:52,765
Tôi sẽ thêm vào một vài lớp học nữa ở đây.

314
00:23:52,765 --> 00:23:58,030
Bạn nhận thấy rằng navbar của tôi đang giấu một phần của jumbotron.

315
00:23:58,030 --> 00:23:59,590
Để tránh điều đó,

316
00:23:59,590 --> 00:24:01,705
những gì tôi sẽ làm là với cơ thể của tôi,

317
00:24:01,705 --> 00:24:06,110
tôi sẽ đưa ra một đệm 50 điểm ảnh ở trên

318
00:24:06,110 --> 00:24:11,505
cùng để những 50 điểm ảnh sẽ được để lại cho thanh điều hướng để trang trải.

319
00:24:11,505 --> 00:24:14,580
Bất cứ khi nào bạn đang sử dụng thanh điều hướng trên cùng cố định, bạn

320
00:24:14,580 --> 00:24:17,580
nên đưa phần đệm này vào nội dung

321
00:24:17,580 --> 00:24:20,270
trang web của bạn để điều hướng không bao gồm

322
00:24:20,270 --> 00:24:24,435
phần tử trên cùng trong nội dung trang web của bạn.

323
00:24:24,435 --> 00:24:29,675
Vì vậy, những người còn lại tôi sẽ để lại như là

324
00:24:29,675 --> 00:24:39,155
zero pixel và cũng là z-index cho cơ thể của tôi là zero.

325
00:24:39,155 --> 00:24:43,485
Từ kiến thức của bạn về CSS bạn hiểu những gì z-index không

326
00:24:43,485 --> 00:24:48,865
và một trong những tiếp theo tôi sẽ làm là tôi sẽ

327
00:24:48,865 --> 00:24:55,580
quá tải lớp navbar-tối bằng cách thêm vào một màu sắc hơn cho

328
00:24:55,580 --> 00:24:59,750
lớp navbar và màu sắc mà tôi sẽ

329
00:24:59,750 --> 00:25:06,490
chọn là 512DA8.

330
00:25:06,490 --> 00:25:15,275
Đây là một màu tím sẫm có vẻ rất tốt trong trang web của tôi.

331
00:25:15,275 --> 00:25:21,505
Thật vậy, Nếu bạn có quan tâm nơi tôi tìm thấy màu sắc này bạn có thể truy cập

332
00:25:21,505 --> 00:25:29,665
www.android.com và sau đó tìm kiếm tài liệu của họ cho thiết kế vật liệu và ở đó,

333
00:25:29,665 --> 00:25:33,325
họ có gợi ý về cách màu sắc có thể được sử dụng

334
00:25:33,325 --> 00:25:38,965
trong ứng dụng Android của bạn nhưng điều tương tự áp dụng ngay cả đối với một trang web,

335
00:25:38,965 --> 00:25:46,675
vì vậy đó là nơi tôi đã đi và chọn những màu sắc này để được sử dụng trong trang web của tôi.

336
00:25:46,675 --> 00:25:51,060
Vì vậy, áp dụng điều này, bây giờ khi

337
00:25:51,060 --> 00:25:55,740
tôi làm điều này, tôi phải quay trở lại trang index.HTML của tôi và

338
00:25:55,740 --> 00:26:01,095
sau đó từ navbar tôi nên loại bỏ bg-chính này.

339
00:26:01,095 --> 00:26:09,320
Nếu không, màu sắc mà tôi đề xuất trong CSS sẽ không được áp dụng cho điều này.

340
00:26:09,320 --> 00:26:14,185
Tương tự như vậy, đi đến trang aboutus.HTML và sau đó di chuyển đến

341
00:26:14,185 --> 00:26:20,850
navbar và sau đó loại bỏ bg-chính từ đó cũng.

342
00:26:21,610 --> 00:26:26,580
Bây giờ, trong khi tôi đang ở trong trang aboutus.HTML,

343
00:26:26,580 --> 00:26:34,080
hãy để tôi giới thiệu một breadcrumb vào container của tôi,

344
00:26:34,080 --> 00:26:36,310
hàng đầu tiên của container của tôi ở đó.

345
00:26:36,310 --> 00:26:39,405
Vì vậy, đây là nơi tiêu đề Giới thiệu về chúng tôi đã

346
00:26:39,405 --> 00:26:45,120
có, vì vậy tôi sẽ đi vào và giới thiệu một ol.

347
00:26:45,260 --> 00:26:53,560
Tôi chỉ sử dụng thẻ ol như một cách để giới thiệu breadcrumb.

348
00:26:53,560 --> 00:26:59,025
Bạn có thể sử dụng ngay cả một div cho điều này và nó vẫn sẽ làm việc tốt.

349
00:26:59,025 --> 00:27:06,050
Nó chỉ như vậy xảy ra rằng ví dụ trên bootstraps tài liệu sử dụng một ol vì vậy,

350
00:27:06,050 --> 00:27:14,030
Tôi gắn bó với điều đó ngay cả một div đơn giản cũng sẽ làm việc tốt ở đây.

351
00:27:14,030 --> 00:27:20,895
Vì vậy, tôi nói ol lớp col-12 breadcrumb.

352
00:27:20,895 --> 00:27:23,200
Vì vậy, các lớp breadcrumb áp dụng và

353
00:27:23,200 --> 00:27:26,825
không phải là col-12 nghĩa là kéo dài toàn bộ màn hình.

354
00:27:26,825 --> 00:27:33,500
Và bên trong đó, tôi sẽ đi vào và thêm hai mục danh sách.

355
00:27:34,250 --> 00:27:39,625
Bây giờ bạn thấy lý do tại sao việc sử dụng ol là hữu ích ở đây,

356
00:27:39,625 --> 00:27:48,565
bởi vì tôi có thể sử dụng các mục danh sách để mô tả các mục breadcrumb.

357
00:27:48,565 --> 00:27:50,725
Vì vậy, breadcrumb item ở đây,

358
00:27:50,725 --> 00:27:55,020
vì vậy tôi bao gồm một breadcrumb item và sau đó bên trong đó tôi sẽ sử dụng

359
00:27:55,020 --> 00:28:02,380
thẻ A để xác định một liên kết trở lại Trang chủ của tôi.

360
00:28:02,380 --> 00:28:07,275
Vì vậy, tôi nói, “A” và sau đó A này,

361
00:28:07,275 --> 00:28:12,010
tôi cung cấp cho href như index.HTML và sau đó

362
00:28:12,010 --> 00:28:17,815
bao gồm rằng vào breadcrumb đầu tiên của tôi và sau đó sau này,

363
00:28:17,815 --> 00:28:25,660
một trong những tiếp theo mà tôi sẽ bao gồm là một danh sách mục và mục

364
00:28:25,660 --> 00:28:34,700
danh sách thứ hai tôi sẽ áp dụng các lớp như breadcrumb item và hoạt động.

365
00:28:34,700 --> 00:28:40,900
Vì vậy, lưu ý việc sử dụng các lớp hoạt động ở đây và sau đó bên trong đó tôi sẽ nói “về

366
00:28:40,900 --> 00:28:45,090
chúng tôi” Tôi không cần một liên kết ở đây bởi vì tôi đã có trên trang vì

367
00:28:45,090 --> 00:28:49,425
vậy mà không cần phải được bao gồm cho mục danh sách này.

368
00:28:49,425 --> 00:28:51,010
Hãy lưu các thay đổi,

369
00:28:51,010 --> 00:28:54,910
vì vậy bạn có thể xem cách breadcrumb đã được giới thiệu vào

370
00:28:54,910 --> 00:28:59,555
trang Giới thiệu cụ thể này ở đây.

371
00:28:59,555 --> 00:29:04,410
Chúng ta hãy đi và xem trang web kết quả.

372
00:29:04,410 --> 00:29:11,320
Đi đến trang web của tôi, bây giờ bạn có thể thấy rằng màu sắc của navbar

373
00:29:11,320 --> 00:29:14,310
bây giờ đã thay đổi sang màu tím đậm được giới thiệu

374
00:29:14,310 --> 00:29:17,900
thông qua CSS và điều này trông đẹp trên màn hình ở đây.

375
00:29:17,900 --> 00:29:20,780
Màu tím đậm, tiếp theo là một màu tím nhạt hơn và sau đó ở

376
00:29:20,780 --> 00:29:24,300
phía dưới thậm chí còn nhẹ hơn màu tím cho chân trang của tôi.

377
00:29:24,300 --> 00:29:27,240
Vâng, tôi không phải là nhà thiết kế,

378
00:29:27,240 --> 00:29:33,875
nhưng đây là điều tốt nhất mà tôi có thể đưa ra về việc thêm gần với các trang web.

379
00:29:33,875 --> 00:29:38,660
Như bạn đã biết từ lịch sử đàn ông là người mù màu.

380
00:29:38,660 --> 00:29:42,750
Vì vậy, chúng tôi có hương vị rất kém về màu sắc.

381
00:29:42,750 --> 00:29:48,065
Nếu bạn kết hôn với vợ bạn chắc chắn sẽ nhắc nhở bạn về điều đó.

382
00:29:48,065 --> 00:29:52,680
Hãy đi đến Trang Giới thiệu và xem nó trông như thế nào.

383
00:29:52,680 --> 00:29:55,960
Vì vậy, đây là Trang Giới thiệu và trong Trang Giới thiệu bạn có thể

384
00:29:55,960 --> 00:29:59,520
thấy navbar với màu sắc chính xác ở

385
00:29:59,520 --> 00:30:06,925
đó và lưu ý breadcrumb bao gồm trong Giới thiệu về chúng tôi xuống đây.

386
00:30:06,925 --> 00:30:10,910
Vì vậy, bạn có thể thấy Trang chủ dẫn bạn trở lại trang chỉ mục và

387
00:30:10,910 --> 00:30:15,020
sau đó Giới thiệu về chúng tôi như bạn thấy chúng tôi áp dụng liên kết hoạt

388
00:30:15,020 --> 00:30:16,655
động, lớp hoạt động để trang này.

389
00:30:16,655 --> 00:30:19,500
Vì vậy, đó là cách hiển thị Giới thiệu và Trang chủ.

390
00:30:19,500 --> 00:30:23,770
Vì vậy, đây là phong cách breadcrumb mặc định được sử dụng

391
00:30:23,770 --> 00:30:29,450
trong bootstrap và nếu tôi nhấp vào Trang chủ tôi sẽ quay trở lại Trang chủ của tôi.

392
00:30:29,450 --> 00:30:35,585
Với điều này, chúng tôi hoàn thành bài tập này trên navbar và breadcrumbs.

393
00:30:35,585 --> 00:30:42,640
Đây là thời điểm tốt để bạn thực hiện một cam kết git với thông điệp “navbar và breadcumbs.”