1
00:00:03,670 --> 00:00:09,835
Trong bài tập này, chúng ta sẽ khám phá điều hướng dựa trên tab của Boo

2
00:00:09,835 --> 00:00:11,920
tstrap, hỗ trợ Bootstrap cho các tab,

3
00:00:11,920 --> 00:00:17,310
và cách các tab có thể được sử dụng để tổ chức nội dung trên trang web của bạn.

4
00:00:17,310 --> 00:00:21,165
Và cách bạn có thể điều hướng từ tab này sang tab khác,

5
00:00:21,165 --> 00:00:26,235
sau đó tiết lộ nội dung trong mỗi tab đó trong trang web.

6
00:00:26,235 --> 00:00:30,115
Bây giờ, bạn sẽ ở đây thấy tôi sử dụng lớp nav,

7
00:00:30,115 --> 00:00:34,560
và sau đó tiếp tục đủ điều kiện nó bằng cách sử dụng lớp nav tab.

8
00:00:34,560 --> 00:00:38,065
Cách tiếp cận tương tự cũng có thể được sử dụng với các viên thuốc nav

9
00:00:38,065 --> 00:00:42,740
mà chúng tôi đã xem xét trong bài giảng trước đó.

10
00:00:43,470 --> 00:00:46,440
Để bắt đầu với bài tập này,

11
00:00:46,440 --> 00:00:49,200
chúng ta sẽ đi vào trang aboutus.html.

12
00:00:49,200 --> 00:00:50,545
Và ngay tại đó,

13
00:00:50,545 --> 00:00:53,690
nơi mà chúng ta có nội dung lãnh đạo công ty ở đó

14
00:00:53,690 --> 00:00:59,290
, sau h2, tôi sẽ giới thiệu điều hướng theo tab.

15
00:00:59,290 --> 00:01:07,960
Vì vậy, đây là nơi tôi sẽ làm cho sử dụng ul với lớp nav nav-tab.

16
00:01:07,960 --> 00:01:12,070
Vì vậy, bạn đã thấy rằng trước đó khi chúng tôi xây dựng thanh điều hướng,

17
00:01:12,070 --> 00:01:17,215
chúng tôi cũng sử dụng ul bên trong thanh điều hướng để xác định các mục điều hướng ở đó.

18
00:01:17,215 --> 00:01:20,270
Cách tiếp cận tương tự ở đây, ngoại trừ

19
00:01:20,270 --> 00:01:24,235
việc ở đây chúng ta sẽ sử dụng ul với nav và các tab nav ở đây.

20
00:01:24,235 --> 00:01:26,120
Vì vậy, bên trong ul này,

21
00:01:26,120 --> 00:01:33,395
chúng tôi sẽ xây dựng cấu trúc điều hướng cho điều hướng tab này ở đây.

22
00:01:33,395 --> 00:01:41,850
Vì vậy, trong đó, tôi sẽ sử dụng các mục danh sách với các lớp nav-item,

23
00:01:41,850 --> 00:01:48,965
và xây dựng các điều hướng xung quanh mục danh sách này.

24
00:01:48,965 --> 00:01:53,770
Vì vậy, điều này giới thiệu mục đầu tiên vào các tab nav của tôi.

25
00:01:53,770 --> 00:02:03,605
Ngay sau đó, bên trong đó tôi sẽ giới thiệu một với lớp nav-liên kết hoạt động.

26
00:02:03,605 --> 00:02:05,960
Vì vậy, cái này, như bạn thấy,

27
00:02:05,960 --> 00:02:10,670
nếu bạn nhớ lại từ cách chúng tôi sử dụng ul với mục nav và liên kết nav.

28
00:02:10,670 --> 00:02:12,995
Trong thanh điều hướng,

29
00:02:12,995 --> 00:02:14,970
chúng ta đang thấy một cách tiếp cận tương tự ở đây.

30
00:02:14,970 --> 00:02:19,150
Vì vậy, nav-mục hoạt động, và sau đó href.

31
00:02:19,970 --> 00:02:24,895
Vì vậy, đây sẽ là một tham chiếu đến tab ngăn sau này,

32
00:02:24,895 --> 00:02:28,695
trong đó sẽ có ID của peter đó,

33
00:02:28,695 --> 00:02:33,310
và vai trò là tab cho điều này,

34
00:02:33,310 --> 00:02:39,560
và tab chuyển đổi dữ liệu.

35
00:02:39,560 --> 00:02:45,540
Vì vậy, bạn có thể thấy thành phần javascript của Bootstrap đi vào hình ảnh ở đây.

36
00:02:45,540 --> 00:02:49,500
Và sau đó tôi sẽ nói Peter Pan,

37
00:02:49,700 --> 00:02:54,405
và sau đó đóng một cái thẻ ở đó.

38
00:02:54,405 --> 00:03:01,435
Vì vậy, điều này sẽ hoàn thành tab đầu tiên của chúng tôi trong điều hướng tab của chúng tôi.

39
00:03:01,435 --> 00:03:03,310
Hãy để tôi hoàn thành phần còn lại của mã,

40
00:03:03,310 --> 00:03:07,255
và sau đó chúng tôi sẽ quay lại và xem lại phần còn lại của mã ở đó.

41
00:03:07,255 --> 00:03:13,630
Vì vậy, ở đây bạn có thể thấy rằng tôi đã hoàn thành cấu trúc điều hướng này ở đây.

42
00:03:13,630 --> 00:03:23,635
Tương tự như vậy, tôi đang xác định các mục danh sách cho các nhà lãnh đạo công ty miễn phí còn lại ở đây.

43
00:03:23,635 --> 00:03:26,305
Bây giờ, để tôi tiết kiệm sự thay đổi.

44
00:03:26,305 --> 00:03:30,160
Và sau đó chúng ta hãy đi và xem nhanh trang web.

45
00:03:30,840 --> 00:03:33,070
Chuyển sang trang web,

46
00:03:33,070 --> 00:03:37,260
bây giờ bạn thấy cách sử dụng các tab nav mà chúng tôi đã tạo ra

47
00:03:37,260 --> 00:03:42,400
cấu trúc điều hướng này ngay dưới sự lãnh đạo của công ty ở đây.

48
00:03:42,400 --> 00:03:47,110
Vì vậy, cấu trúc điều hướng này có nghĩa là tôi sẽ có thể điều hướng và

49
00:03:47,110 --> 00:03:51,815
xem từng chi tiết hơn bằng cách nhấp vào điều này.

50
00:03:51,815 --> 00:03:54,830
Vì vậy, đó là cách điều hướng theo tab hoạt động ở đây.

51
00:03:54,830 --> 00:03:58,525
Bây giờ, rõ ràng, nội dung của mỗi người trong số họ nên

52
00:03:58,525 --> 00:04:02,700
chỉ hiển thị một cách thích hợp chi tiết của người đó ở đây.

53
00:04:02,700 --> 00:04:06,145
Vì vậy, đây là nơi việc sử dụng nội dung tab

54
00:04:06,145 --> 00:04:10,630
và các lớp ngăn tab sẽ có hiệu lực.

55
00:04:10,630 --> 00:04:13,925
Và chúng ta sẽ kèm theo nội dung này bằng cách sử dụng nó.

56
00:04:13,925 --> 00:04:17,200
Và sau đó buộc điều này với những điều hướng,

57
00:04:17,200 --> 00:04:18,660
điều hướng tab ở đây,

58
00:04:18,660 --> 00:04:22,580
để chỉ có một thông tin của lãnh đạo công ty duy nhất

59
00:04:22,580 --> 00:04:25,380
được hiển thị trên màn hình tại một thời điểm.

60
00:04:25,380 --> 00:04:28,910
Một khi chúng tôi hoàn thành thiết lập điều hướng theo tab

61
00:04:28,910 --> 00:04:31,755
đó, sau đó chúng tôi sẽ di chuyển xuống nội dung thực tế ở đây.

62
00:04:31,755 --> 00:04:36,505
Và sau đó bây giờ, tôi sẽ tổ chức lại nội dung này thành bốn ngăn tab riêng biệt,

63
00:04:36,505 --> 00:04:38,840
mỗi ngăn sẽ được hiển

64
00:04:38,840 --> 00:04:44,010
thị khi ngăn tab tương ứng được chọn trong điều hướng tab.

65
00:04:44,010 --> 00:04:45,830
Vì vậy, để bắt

66
00:04:45,830 --> 00:04:50,755
đầu, điều đầu tiên chúng tôi sẽ làm là đi vào và tách

67
00:04:50,755 --> 00:04:55,680
từng người trong bốn nhà lãnh đạo công ty này thành bốn phần ở

68
00:04:55,680 --> 00:04:58,815
đó, để tôi dễ dàng nhìn thấy những gì tôi đang làm.

69
00:04:58,815 --> 00:05:01,180
Vì vậy, ở h3,

70
00:05:01,180 --> 00:05:04,355
tôi cắt chúng thành bốn phần khác nhau,

71
00:05:04,355 --> 00:05:08,610
và sau đó chúng tôi sẽ có thể làm việc với những thứ này.

72
00:05:08,610 --> 00:05:13,395
Bây giờ tôi có một, hai, ba, bốn.

73
00:05:13,395 --> 00:05:19,055
Vì vậy, nội dung này bây giờ cần phải được kèm theo bên trong một div

74
00:05:19,055 --> 00:05:28,540
với nội dung tab lớp.

75
00:05:28,540 --> 00:05:32,845
Vì vậy, tất cả nội dung này mà chúng tôi có cho

76
00:05:32,845 --> 00:05:40,055
bốn nhà lãnh đạo công ty khác nhau nên được kèm theo bên trong một tab nội dung div có.

77
00:05:40,055 --> 00:05:44,455
Vì vậy, bây giờ tôi đã kèm theo đó bên trong liên lạc tab.

78
00:05:44,455 --> 00:05:46,090
Bây giờ, đối với mỗi người trong số họ,

79
00:05:46,090 --> 00:05:52,235
tôi cần phải tạo ra một div khác với ngăn tab lớp và một số lớp bổ sung.

80
00:05:52,235 --> 00:05:56,430
Và sau đó tổ chức liên lạc này.

81
00:05:56,430 --> 00:05:58,680
Vì vậy, chúng ta hãy bắt đầu với cái đầu tiên.

82
00:05:58,680 --> 00:06:02,215
Vì vậy, đối với các nhà lãnh đạo công ty đầu tiên,

83
00:06:02,215 --> 00:06:07,955
tôi sẽ giới thiệu một div mới với vai trò như tabpanel.

84
00:06:07,955 --> 00:06:12,250
Vì vậy, điều này phục vụ như là bảng điều khiển tab sẽ được hiển

85
00:06:12,250 --> 00:06:17,235
thị khi điều hướng tab đầu tiên được chọn.

86
00:06:17,235 --> 00:06:22,440
Và lớp tương ứng mà tôi cần phải áp dụng là tab-pane.

87
00:06:22,440 --> 00:06:24,090
Vì vậy, đây là ngăn tab,

88
00:06:24,090 --> 00:06:26,430
nội dung thực tế được chứa trong đó.

89
00:06:26,430 --> 00:06:29,805
Và sau đó một lớp khác mà tôi áp dụng là mờ dần.

90
00:06:29,805 --> 00:06:32,920
Vì vậy, lớp mờ dần cho phép nội dung này mờ dần vào.

91
00:06:32,920 --> 00:06:37,090
Vì vậy, đây là một lớp hoạt hình mà Bootstrap hỗ trợ.

92
00:06:37,090 --> 00:06:40,340
Ngoài ra, tôi áp dụng lớp này được gọi là chương trình.

93
00:06:40,340 --> 00:06:43,770
Lớp show về cơ bản xác định

94
00:06:43,770 --> 00:06:48,425
rằng nội dung cụ thể này sẽ được hiển thị khi trang được kết xuất lần đầu tiên.

95
00:06:48,425 --> 00:06:52,870
Vì vậy, nó sẽ chỉ áp dụng lớp show cho ngăn tab đầu tiên,

96
00:06:52,870 --> 00:06:56,640
các ngăn tab còn lại sẽ không có lớp show được áp dụng.

97
00:06:56,640 --> 00:07:00,910
Và lớp cuối cùng mà tôi sẽ áp dụng là hoạt động bởi vì đây

98
00:07:00,910 --> 00:07:07,190
là ngăn tab sẽ được hiển thị trong trang khi trang được kết xuất lần đầu tiên.

99
00:07:07,190 --> 00:07:10,095
Ngoài ra, để điều hướng hoạt động,

100
00:07:10,095 --> 00:07:12,760
tôi cần phải cung cấp cho điều này một và ID,

101
00:07:12,760 --> 00:07:19,340
và kể từ khi tôi sử dụng hashtag Peter cho nội dung điều hướng tab,

102
00:07:19,340 --> 00:07:23,705
vì vậy tôi sẽ áp dụng ID như Peter ở đây.

103
00:07:23,705 --> 00:07:31,680
Và như vậy, khi điều này được đề cập đến trong một liên kết có với hashtag Peter,

104
00:07:31,680 --> 00:07:34,740
đây là ngăn tương ứng mà tôi đang đề cập đến.

105
00:07:34,740 --> 00:07:39,885
Bây giờ, những gì tôi sẽ làm là tôi sẽ sao chép div này từ đó.

106
00:07:39,885 --> 00:07:49,010
Và sau đó tôi sẽ áp dụng div này vào thông tin của nhà lãnh đạo công ty thứ hai,

107
00:07:49,010 --> 00:07:55,255
ngoại trừ việc đối với điều này tôi chỉ nên áp dụng ngăn tab và phù hợp.

108
00:07:55,255 --> 00:07:58,730
Chương trình và hoạt động không nên được áp dụng cho ba người còn lại.

109
00:07:58,730 --> 00:08:03,820
Và giấy tờ tùy thân ở đây phải là Danny cho tờ thứ hai.

110
00:08:03,820 --> 00:08:08,190
Tôi sẽ chỉ đơn giản là sao chép mã này,

111
00:08:08,190 --> 00:08:13,460
và sau đó dán nó cho các nhà lãnh đạo công ty thứ ba ở đây.

112
00:08:13,460 --> 00:08:20,955
Và sau đó bảng điều khiển tab và bảng thứ ba là Agumbe.

113
00:08:20,955 --> 00:08:23,795
Và người cuối cùng, một

114
00:08:23,795 --> 00:08:27,235
lần nữa, tôi dán vào,

115
00:08:27,235 --> 00:08:31,640
và sau đó ID nên được thay đổi thành Alberto,

116
00:08:31,640 --> 00:08:34,280
và đóng div này ở đây.

117
00:08:34,280 --> 00:08:39,580
Vì vậy, div này cho người cuối cùng nên được đóng cửa tại thời điểm đó.

118
00:08:39,580 --> 00:08:45,355
Và điều đó sẽ chăm sóc bốn bảng tab mà tôi cần.

119
00:08:45,355 --> 00:08:50,725
Đi vào và thụt lề nội dung này,

120
00:08:50,725 --> 00:08:53,490
để tôi hài lòng,

121
00:08:53,490 --> 00:08:56,245
nỗi ám ảnh của tôi là hài lòng ở đó.

122
00:08:56,245 --> 00:09:01,805
Được rồi, điều đó hoàn thành việc tổ chức nội dung tab.

123
00:09:01,805 --> 00:09:04,600
Bây giờ, chúng ta hãy lưu thay đổi và đi và

124
00:09:04,600 --> 00:09:09,030
xem nhanh những gì trang web trông thích bây giờ.

125
00:09:09,330 --> 00:09:11,480
Đến trang web của chúng tôi,

126
00:09:11,480 --> 00:09:19,680
bây giờ bạn thấy rằng trang web của chúng tôi chỉ hiển thị nội dung tương ứng với CEO của họ.

127
00:09:19,680 --> 00:09:22,825
Nếu bạn chuyển sang bất kỳ một trong những cái khác,

128
00:09:22,825 --> 00:09:26,415
bạn sẽ thấy rằng thông tin tương ứng được hiển thị.

129
00:09:26,415 --> 00:09:32,290
Và lưu ý cách thông tin này mờ dần khi bạn chọn người dùng cụ thể đó.

130
00:09:32,290 --> 00:09:35,400
Nhưng, tất nhiên, nếu bạn hài lòng với điều này,

131
00:09:35,400 --> 00:09:37,890
thì tốt, chúng ta có thể dừng lại ở thời điểm này.

132
00:09:37,890 --> 00:09:45,360
Nhưng tôi muốn độc đáo xác định một tab thực sự xung quanh này.

133
00:09:45,360 --> 00:09:50,370
Vì vậy, đây là nơi tôi sẽ áp dụng một vài thuộc tính CSS, thuộc

134
00:09:50,370 --> 00:09:53,540
tính để tab đặc biệt này ở đây,

135
00:09:53,540 --> 00:09:55,660
do đó nó là tốt đẹp,

136
00:09:55,660 --> 00:09:58,290
cấu trúc tab sạch sẽ được định nghĩa ở đó.

137
00:09:58,290 --> 00:10:03,590
Vì vậy, chúng ta hãy tạo ra một vài thuộc tính CSS cho việc này.

138
00:10:03,590 --> 00:10:06,855
Bước cuối cùng, chuyển sang styles.css.

139
00:10:06,855 --> 00:10:09,555
Sau khi navbar nghịch đảo,

140
00:10:09,555 --> 00:10:15,530
tôi sẽ giới thiệu các lớp CSS cho nội dung tab,

141
00:10:15,530 --> 00:10:18,010
vì vậy tôi chỉ định cho nội dung tab,

142
00:10:18,010 --> 00:10:29,565
biên giới trái: 1px rắn DDD.

143
00:10:29,565 --> 00:10:48,195
Và tôi sẽ áp dụng tương tự cho biên giới bên phải và phía dưới.

144
00:10:48,195 --> 00:10:51,310
Tôi không cần phải áp dụng cho đầu trang vì đầu trang

145
00:10:51,310 --> 00:10:55,585
đã được điều chỉnh bởi điều hướng tab.

146
00:10:55,585 --> 00:11:00,250
Và sau đó để tôi đưa ra một padding của 10 pixel xung quanh,

147
00:11:00,250 --> 00:11:02,990
và sau đó lưu các thay đổi.

148
00:11:02,990 --> 00:11:07,450
Chúng ta hãy đi và xem trang web của chúng tôi sau này.

149
00:11:07,450 --> 00:11:09,980
Chuyển trở lại trang của chúng tôi,

150
00:11:09,980 --> 00:11:11,395
bây giờ bạn thấy một

151
00:11:11,395 --> 00:11:14,920
cấu trúc giống như tab tốt đẹp, sạch sẽ được tạo ra.

152
00:11:14,920 --> 00:11:18,355
Vì vậy, khi bạn điều hướng đến từng người trong số họ,

153
00:11:18,355 --> 00:11:24,695
thông tin tương ứng được hiển thị một cách thích hợp trong tab riêng của nó.

154
00:11:24,695 --> 00:11:28,905
Điều này hoàn thành bài tập này, nơi chúng tôi xem xét

155
00:11:28,905 --> 00:11:33,120
việc sử dụng điều hướng theo tab cho trang web của chúng tôi.

156
00:11:33,120 --> 00:11:39,435
Và sau đó chúng tôi đã thấy cách chúng tôi có thể tạo điều hướng tab và kèm theo các nội dung khác.

157
00:11:39,435 --> 00:11:46,200
Đây cũng là thời điểm tốt để bạn thực hiện một Nhận xét Git với các tab tin nhắn.