1
00:00:00,242 --> 00:00:04,459
[MUSIC]

2
00:00:04,459 --> 00:00:09,590
Давайте теперь поговорим о очень полезном плагине в Bootstrap, называемом Collapse.

3
00:00:09,590 --> 00:00:14,110
Мы видели его применение в навигационной панели ранее.

4
00:00:14,110 --> 00:00:19,050
Мы пересмотрим этот код и рассмотрим его более подробно.

5
00:00:19,050 --> 00:00:21,910
Связанный компонент называется аккордеон.

6
00:00:21,910 --> 00:00:26,310
Аккордеон использует плагин Collapse для его функционирования.

7
00:00:26,310 --> 00:00:30,100
И мы увидим это подробно в упражнении, которое следует.

8
00:00:31,740 --> 00:00:36,570
Плагин Collapse обеспечивает простой способ обнаружения и

9
00:00:36,570 --> 00:00:38,487
скрытия контента на вашей веб-странице.

10
00:00:40,030 --> 00:00:45,307
Это раскрытие и скрытие контента, как правило

11
00:00:45,307 --> 00:00:50,186
, инициируется пользователем нажатием кнопки или ссылки на вашей веб-странице.

12
00:00:50,186 --> 00:00:55,001
Теперь вы увидите много мест, где

13
00:00:55,001 --> 00:01:00,006
поведение Collapse очень хорошо используется, чтобы показать контент.

14
00:01:00,006 --> 00:01:04,760
Мы перейдем к нашей навигационной панели, чтобы посмотреть на плагин Collapse в действии, а

15
00:01:04,760 --> 00:01:07,590
затем мы также увидим пример Accordion.

16
00:01:08,630 --> 00:01:14,381
Возвращаясь к нашей веб-странице, вы вспомните, что когда мы создали навигационную панель на

17
00:01:14,381 --> 00:01:19,948
нашей веб-странице для сверхмаленьких экранов, навигационная панель была свернута, а

18
00:01:19,948 --> 00:01:24,346
затем она была раскрыта, когда мы нажали на кнопку здесь.

19
00:01:24,346 --> 00:01:29,670
Теперь это пример использования плагина Collapse здесь.

20
00:01:29,670 --> 00:01:34,890
Когда мы посмотрим на код, мы увидим, что мы действительно применяем плагин Collapse

21
00:01:34,890 --> 00:01:38,440
к div, который содержит эту навигационную панель.

22
00:01:39,530 --> 00:01:41,534
Взглянув на код

23
00:01:41,534 --> 00:01:46,320
нашей навигационной панели, которую мы разработали ранее, вы увидели, что здесь,

24
00:01:46,320 --> 00:01:51,012
внутри контейнера, мы создали эту кнопку, которая отображается для

25
00:01:51,012 --> 00:01:56,850
сверхмалых размеров экрана с помощью класса navbar-toggler.

26
00:01:56,850 --> 00:01:59,440
Посмотрите на div, который следует за этой кнопкой здесь.

27
00:01:59,440 --> 00:02:02,600
Для div, который следует за этой кнопкой, мы использовали класс свертывания.

28
00:02:02,600 --> 00:02:06,495
Таким образом, это использование плагина Collapse в нашей навигационной панели.

29
00:02:06,495 --> 00:02:10,627
Таким образом, это создает то, что этот конкретный контент,

30
00:02:10,627 --> 00:02:15,095
наша навигационная панель, которая заключена внутри этого div, будет

31
00:02:15,095 --> 00:02:17,065
свернута для очень небольших размеров экрана.

32
00:02:17,065 --> 00:02:22,080
И затем вместе с плагином Collapse, эта кнопка, которая появляется

33
00:02:22,080 --> 00:02:26,589
там, вызовет отображение и скрытие этой навигационной панели здесь.

34
00:02:26,589 --> 00:02:32,582
Вот почему, когда вы посмотрите на кнопку, вы увидите, что прямо там,

35
00:02:32,582 --> 00:02:38,171
мы поставляем атрибут data-toggle с коллапсом здесь,

36
00:02:38,171 --> 00:02:42,350
а затем data-target как #Navbar здесь.

37
00:02:42,350 --> 00:02:47,960
И обратите внимание, что идентификатор для этого div, который мы применили здесь, - Navbar.

38
00:02:47,960 --> 00:02:53,030
Таким образом, мы указываем по существу, что эта кнопка будет действовать как

39
00:02:53,030 --> 00:02:59,460
механизм запуска для этого плагина Collapse для работы над этим div здесь.

40
00:02:59,460 --> 00:03:03,387
Таким образом, это использование плагина Collapse на вашей веб-странице.

41
00:03:04,590 --> 00:03:10,840
Кроме того, мы рассмотрим другой компонент, который является аккордеон в Bootstrap.

42
00:03:10,840 --> 00:03:12,410
Как ведет себя аккордеон?

43
00:03:12,410 --> 00:03:16,110
Итак, это пример аккордеона, который мы собираемся построить в упражнении,

44
00:03:16,110 --> 00:03:16,928
которое следует за этим.

45
00:03:16,928 --> 00:03:21,520
Итак, здесь вы увидите, что я заменил навигацию с вкладками, которую мы

46
00:03:21,520 --> 00:03:25,846
сделали в предыдущем упражнении, используя аккордеон здесь.

47
00:03:25,846 --> 00:03:30,480
Способ работы Аккордеона заключается в том, что один фрагмент контента раскрывается

48
00:03:30,480 --> 00:03:32,020
, а остальные три скрыты.

49
00:03:32,020 --> 00:03:35,640
Таким образом, это использует плагин Collapse для этой цели.

50
00:03:35,640 --> 00:03:41,920
Поэтому, когда вы нажимаете на имя любого из этих других корпоративных лидеров,

51
00:03:41,920 --> 00:03:45,490
то детали этого корпоративного лидера раскрываются, а

52
00:03:45,490 --> 00:03:47,280
остальные три скрываются.

53
00:03:47,280 --> 00:03:50,270
Итак, это поведение аккордеона.

54
00:03:50,270 --> 00:03:52,700
Если вы знакомы с аккордеоном,

55
00:03:52,700 --> 00:03:57,000
музыкальным инструментом, вы знаете, как работают сильфоны аккордеона.

56
00:03:57,000 --> 00:04:02,530
Так что это, в некотором смысле, ведет себя как сильфоны аккордеона.

57
00:04:02,530 --> 00:04:08,996
Поэтому этот компонент называется аккордеоном в Bootstrap.

58
00:04:08,996 --> 00:04:17,280
Еще один пример используемого плагина Collapse находится на вашем сайте курса.

59
00:04:17,280 --> 00:04:19,350
Поэтому, если вы заходите на сайт курса, а

60
00:04:19,350 --> 00:04:23,360
затем заходите в контент вашего сайта курса и

61
00:04:23,360 --> 00:04:28,730
начинаете просматривать его здесь, вы заметите, что с левой стороны

62
00:04:28,730 --> 00:04:32,940
у вас есть навигация, которая появляется в картинке с левой стороны.

63
00:04:32,940 --> 00:04:35,390
Итак, это навигация там.

64
00:04:35,390 --> 00:04:40,510
Поэтому, когда вы нажимаете на каждую из них, вы замечаете, как содержание здесь

65
00:04:40,510 --> 00:04:45,980
скрыто и раскрывается, нажав на каждую из этих ссылок там.

66
00:04:45,980 --> 00:04:51,246
Так что это похоже на плагин Collapse, который мы видели в Bootstrap.

67
00:04:51,246 --> 00:04:57,780
Хотя, конечно, страница Coursera на самом деле не использует Bootstrap.

68
00:04:57,780 --> 00:05:02,306
Мы перейдем к следующему упражнению, где мы увидим, как мы создаем

69
00:05:02,306 --> 00:05:07,010
аккордеон для демонстрации информации о корпоративном лидерстве.

70
00:05:07,010 --> 00:05:13,120
[ МУЗЫКА]