1
00:00:00,000 --> 00:00:04,432
[МУЗЫКА]

2
00:00:04,432 --> 00:00:09,439
Давайте теперь попробуем понять несколько механизмов, которые позволяют нам

3
00:00:09,439 --> 00:00:16,100
отображать информацию для пользователей, накладывающих содержимое вашей веб-страницы.

4
00:00:16,100 --> 00:00:21,040
Итак, здесь мы рассмотрим три различных конструкции, которые доступны в Bootstrap

5
00:00:21,040 --> 00:00:24,230
называются всплывающие подсказки, popovers и modals.

6
00:00:25,570 --> 00:00:30,760
Итак, что такое всплывающие подсказки, поповеры и модалы и как они полезны?

7
00:00:30,760 --> 00:00:36,090
Сначала мы рассмотрим некоторые основные идеи, а затем рассмотрим некоторые примеры.

8
00:00:36,090 --> 00:00:39,844
В следующем упражнении мы будем использовать всплывающие подсказки и

9
00:00:39,844 --> 00:00:45,130
модалы на нашей веб-странице, и мы рассмотрим пример popovers.

10
00:00:45,130 --> 00:00:51,610
Итак, как я уже упоминал, всплывающие подсказки, popovers и modals являются способом раскрытия контента

11
00:00:51,610 --> 00:00:56,090
пользователям, когда пользователь взаимодействует с определенными элементами на вашей веб-странице.

12
00:00:56,090 --> 00:01:01,280
Например, когда пользователь

13
00:01:01,280 --> 00:01:06,640
нажимает на кнопку, или наводит курсор на кнопку, или нажимает на ссылку,

14
00:01:06,640 --> 00:01:11,830
или достигает определенной точки на вашей веб-странице.

15
00:01:11,830 --> 00:01:16,170
Таким образом, все это вызовет информацию, которая будет отображаться пользователям.

16
00:01:16,170 --> 00:01:17,470
Таким образом,

17
00:01:17,470 --> 00:01:22,970
в этом случае информация отображается в виде наложения поверх вашей веб-страницы.

18
00:01:22,970 --> 00:01:25,700
Таким образом, основное содержание веб-страницы все еще существует, но

19
00:01:25,700 --> 00:01:30,280
это выложено поверх базового контента.

20
00:01:30,280 --> 00:01:35,750
Таким образом, с точки зрения гибкости, подсказки являются наиболее простыми в реализации, но

21
00:01:35,750 --> 00:01:40,160
в то же время имеют ограниченную гибкость в том, как они могут отображать информацию.

22
00:01:40,160 --> 00:01:46,610
Поповеры более гибки, чем подсказки, но у них также есть свои ограничения.

23
00:01:46,610 --> 00:01:50,110
Модалы дают вам самую широкую поддержку для

24
00:01:50,110 --> 00:01:54,980
отображения контента различными способами.

25
00:01:56,250 --> 00:02:02,600
В качестве примера, давайте перейдем на нашу веб-страницу, над которой мы работали.

26
00:02:02,600 --> 00:02:09,970
Вы видите это, когда мы наводим указатель мыши на эту кнопку.

27
00:02:09,970 --> 00:02:14,560
Вы видите это сообщение на экране здесь

28
00:02:14,560 --> 00:02:16,930
с некоторой дополнительной информацией.

29
00:02:16,930 --> 00:02:18,975
Это пример всплывающей подсказки.

30
00:02:20,290 --> 00:02:24,210
Это позволяет отображать меньший объем информации для пользователей.

31
00:02:24,210 --> 00:02:29,340
Так, например, если вы пытаетесь направлять пользователей через ваш веб-сайт и

32
00:02:29,340 --> 00:02:33,740
хотите, чтобы они знали, что происходит, когда вы нажимаете различные местоположения любой веб-страницы,

33
00:02:33,740 --> 00:02:38,240
это, возможно, хороший способ напомнить им о том, что ожидается.

34
00:02:38,240 --> 00:02:40,870
Таким образом, вы можете легко разработать, например

35
00:02:40,870 --> 00:02:46,250
, видео вашего сайта, используя эти подсказки, чтобы указать пользователям.

36
00:02:46,250 --> 00:02:49,130
Если вы хотите немного более подробную информацию,

37
00:02:49,130 --> 00:02:51,300
то popovers было бы полезнее.

38
00:02:52,305 --> 00:02:56,920
Тот же пример, реализация и использование popover будет выглядеть так.

39
00:02:56,920 --> 00:02:58,040
Теперь в этом случае

40
00:02:58,040 --> 00:03:02,040
вам придется явно нажать на кнопку, чтобы показать popover.

41
00:03:02,040 --> 00:03:06,670
Таким образом, в этом случае popover отображается с некоторой информацией о заголовке, а

42
00:03:06,670 --> 00:03:12,210
затем фактическое содержимое в нижней части этого popover.

43
00:03:12,210 --> 00:03:17,200
Теперь, отклонение popover потребует от вас снова нажать на дно там.

44
00:03:17,200 --> 00:03:19,640
Таким образом, это поведение поповера.

45
00:03:19,640 --> 00:03:26,420
В некоторых случаях popovers полезнее, чем всплывающие подсказки.

46
00:03:26,420 --> 00:03:29,990
Наш третий вид наложения данных является модальным.

47
00:03:29,990 --> 00:03:33,140
Модальный позволяет представить более

48
00:03:33,140 --> 00:03:37,410
подробную информацию пользователям, чем всплывающая подсказка и popover.

49
00:03:37,410 --> 00:03:44,060
Содержимое модального само делится на заголовок, тело и нижний колонтитул.

50
00:03:44,060 --> 00:03:49,700
А сам модальный может содержать гораздо более подробную информацию.

51
00:03:49,700 --> 00:03:52,740
И вы можете использовать всю сетку Bootstrap

52
00:03:52,740 --> 00:03:57,630
внутри модального тела, чтобы организовать фактический контент.

53
00:03:57,630 --> 00:04:02,860
Далее мы рассмотрим несколько примеров использования модалов.

54
00:04:02,860 --> 00:04:06,220
Перейдя на нашу веб-страницу, вы увидите, что на правой стороне,

55
00:04:06,220 --> 00:04:09,400
здесь у нас есть ссылка под названием Login.

56
00:04:09,400 --> 00:04:13,890
Поэтому, когда вы нажимаете на эту ссылку, вы заметите, что этот модальный

57
00:04:13,890 --> 00:04:17,600
с их формой входа появляется на экране.

58
00:04:17,600 --> 00:04:21,060
Таким образом, это типичное поведение модального.

59
00:04:21,060 --> 00:04:23,420
И поэтому здесь вы можете ввести информацию, а

60
00:04:23,420 --> 00:04:28,070
затем нажать на кнопку Войти, чтобы войти на свой сайт.

61
00:04:29,190 --> 00:04:34,890
Переходя на страницу Coursera, вот реальный пример использования модального.

62
00:04:34,890 --> 00:04:38,430
Так, например, если вы нажмете на кнопку «Вход» здесь,

63
00:04:38,430 --> 00:04:43,190
вы увидите, что на Coursera появится форма на экране.

64
00:04:43,190 --> 00:04:47,720
Таким образом, это еще одно использование модального на вашей веб-странице.

65
00:04:49,060 --> 00:04:53,252
Теперь, когда вы видели примеры подсказок, popovers и modals,

66
00:04:53,252 --> 00:04:58,522
давайте перейдем к следующему упражнению, где мы создадим всплывающую подсказку на нашей странице index.html.

67
00:04:58,522 --> 00:05:04,379
Мы также создадим модальный, который позволяет пользователю вводить информацию для

68
00:05:04,379 --> 00:05:06,787
входа в нашу веб-страницу.

69
00:05:06,787 --> 00:05:10,269
[ МУЗЫКА]