1
00:00:00,042 --> 00:00:04,268
[MUSIC]

2
00:00:04,268 --> 00:00:09,793
В предыдущем уроке я ссылался на класс навигации, который используется в Bootstrap для

3
00:00:09,793 --> 00:00:12,790
создания навигационных структур.

4
00:00:12,790 --> 00:00:17,376
Мы исследовали навигационную навигацию уже в предыдущем модуле.

5
00:00:17,376 --> 00:00:21,660
В этой лекции

6
00:00:21,660 --> 00:00:26,700
мы рассмотрим навигационные вкладки и навигационные таблетки немного более подробно.

7
00:00:26,700 --> 00:00:29,350
И упражнение, которое следует за этим, мы

8
00:00:29,350 --> 00:00:33,927
рассмотрим, как мы используем это для создания структуры навигации для нашей веб-страницы.

9
00:00:36,020 --> 00:00:41,300
Вкладки и таблетки обеспечивают интересную структуру навигации для нашей веб-страницы.

10
00:00:42,640 --> 00:00:47,608
Они позволят вам заключать содержимое внутри вашей веб-страницы, что

11
00:00:47,608 --> 00:00:52,201
пользователь может перемещаться между содержимым без перезагрузки

12
00:00:52,201 --> 00:00:55,460
веб-страницы на другую веб-страницу.

13
00:00:55,460 --> 00:01:00,190
Поэтому, если у вас есть определенное количество контента, который будет представлен на вашей веб-странице,

14
00:01:00,190 --> 00:01:04,700
но вы хотите показать только часть контента на вашей веб-странице, но

15
00:01:04,700 --> 00:01:09,855
все же предоставить пользователю возможность навигации к другим частям контента,

16
00:01:09,855 --> 00:01:13,340
то вкладки и таблетки могут быть очень полезны для этой цели.

17
00:01:14,390 --> 00:01:18,290
Что лучше, чем просто пойти и взглянуть на использование вкладок и

18
00:01:18,290 --> 00:01:19,790
таблеток в навигации?

19
00:01:20,860 --> 00:01:25,430
Взглянув на пример использования вкладок в навигации,

20
00:01:25,430 --> 00:01:28,890
вы увидите, что в данном конкретном случае у вас есть

21
00:01:29,910 --> 00:01:34,570
информация о корпоративном лидерстве на нашей странице aboutus.html,

22
00:01:34,570 --> 00:01:40,240
вложенная внутри вкладок с навигацией по вкладкам сверху.

23
00:01:40,240 --> 00:01:44,740
Таким образом, вы можете видеть, что у вас есть четыре разных корпоративных лидера,

24
00:01:44,740 --> 00:01:47,270
представленных в их собственной вкладке здесь.

25
00:01:47,270 --> 00:01:52,080
А содержание, раскрытое в настоящее время на веб-странице, - это только

26
00:01:52,080 --> 00:01:55,270
детали о первом корпоративном лидере.

27
00:01:55,270 --> 00:02:00,280
Поэтому, если вы хотите переключиться на других, то вы просто нажимаете

28
00:02:00,280 --> 00:02:05,520
на соответствующую вкладку, а затем раскрываете этот контент на вашей веб-странице.

29
00:02:05,520 --> 00:02:08,610
Поэтому обратите внимание, что мы не переходим на другую веб-страницу, но

30
00:02:08,610 --> 00:02:13,590
мы просто раскрываем содержимое, используя эту вкладку навигации здесь.

31
00:02:15,030 --> 00:02:17,980
Вместо этого, в некоторых случаях вы можете найти

32
00:02:17,980 --> 00:02:22,650
навигацию на основе столба более полезной для вашей цели.

33
00:02:22,650 --> 00:02:25,150
Таким образом, навигация на основе колонн работает вот так.

34
00:02:25,150 --> 00:02:29,210
Таким образом, у вас все еще есть та же навигационная структура сверху, но

35
00:02:29,210 --> 00:02:34,270
отображаемая в настоящее время информация будет выделена как таблетка здесь.

36
00:02:34,270 --> 00:02:39,760
Поэтому, если вы переключитесь на другую часть навигации, обратите внимание, как

37
00:02:39,760 --> 00:02:45,600
этот конкретный элемент подсвечивается на веб-странице,

38
00:02:45,600 --> 00:02:49,500
и соответствующая информация отображается в содержимом вкладки внизу.

39
00:02:49,500 --> 00:02:51,790
Таким образом, это навигация на основе столбов.

40
00:02:51,790 --> 00:02:56,680
Таким образом, это использует навигационные таблетки вместо вкладок навигации для

41
00:02:56,680 --> 00:03:02,030
класса, применяемого к классу навигации там.

42
00:03:02,030 --> 00:03:06,770
Теперь, когда вы видели пример использования навигации с вкладками и вытягиванием

43
00:03:06,770 --> 00:03:12,180
на веб-странице, я уверен, что вам интересно узнать, как она на самом деле построена.

44
00:03:12,180 --> 00:03:16,310
Это то, что мы собираемся изучить в следующем упражнении.

45
00:03:16,310 --> 00:03:20,418
Таким образом, мы будем использовать вкладки навигации, а затем использовать содержимое

46
00:03:20,418 --> 00:03:25,940
вкладок и панели вкладок, чтобы организовать фактическое содержание, которое будет отображаться на нашей веб-странице.

47
00:03:25,940 --> 00:03:29,369
[ МУЗЫКА]