1
00:00:03,650 --> 00:00:08,240
У вас может быть несколько причин для привлечения внимания посетителей

2
00:00:08,240 --> 00:00:11,890
к определенным частям вашего сайта или, возможно, вы хотите предупредить

3
00:00:11,890 --> 00:00:16,370
пользователей о некоторой информации или вы можете

4
00:00:16,370 --> 00:00:22,150
информировать пользователей о ходе операции, которую они инициируют на вашем сайте.

5
00:00:22,150 --> 00:00:25,840
Давайте посмотрим на некоторые различные механизмы, которые

6
00:00:25,840 --> 00:00:30,750
bootstrap обеспечивает для такого рода операций.

7
00:00:30,750 --> 00:00:38,810
Bootstrap имеет много различных компонентов, которые позволяют нам держать пользователей в курсе.

8
00:00:38,810 --> 00:00:42,440
У нас есть бейджи, которые позволяют нам привлечь внимание

9
00:00:42,440 --> 00:00:46,550
пользователей к последним обновлениям нашей веб-страницы.

10
00:00:46,550 --> 00:00:48,365
У нас есть предупреждения, ошибки

11
00:00:48,365 --> 00:00:52,010
и предупреждения, которые могут быть доставлены пользователям, если

12
00:00:52,010 --> 00:00:56,470
они выполняют недопустимые операции.

13
00:00:56,470 --> 00:01:01,870
Кроме того, мы можем использовать индикаторы прогресса, чтобы информировать пользователей

14
00:01:01,870 --> 00:01:08,135
о ходе любых операций, которые они инициируют на нашем веб-сайте.

15
00:01:08,135 --> 00:01:11,455
Давайте посмотрим на это чуть более подробно.

16
00:01:11,455 --> 00:01:15,800
Значки — это простой способ добавления небольшого количества

17
00:01:15,800 --> 00:01:21,085
информации на ваш сайт, чтобы привлечь внимание посетителей.

18
00:01:21,085 --> 00:01:24,710
В качестве примера вы можете увидеть, что мы добавили пару значков к

19
00:01:24,710 --> 00:01:30,890
этому описанию блюда здесь, на нашей главной странице, так что вы

20
00:01:30,890 --> 00:01:37,480
можете видеть, что у нас есть красный цветной значок, привлекающий внимание пользователей к

21
00:01:37,480 --> 00:01:40,495
тому, что это горячий пункт меню

22
00:01:40,495 --> 00:01:44,605
и, возможно, даже информирующий их о цена меню.

23
00:01:44,605 --> 00:01:51,455
Такие небольшие фрагменты информации могут быть добавлены на ваш сайт с помощью бейджа.

24
00:01:51,455 --> 00:01:52,960
Например,

25
00:01:52,960 --> 00:02:00,400
красный значок здесь создается с помощью пролета с значком классов и значком опасности.

26
00:02:00,400 --> 00:02:04,495
Вы можете использовать различные другие цвета, встроенные в

27
00:02:04,495 --> 00:02:11,945
фреймворк начальной загрузки для создания значков нескольких разных цветов.

28
00:02:11,945 --> 00:02:18,075
Аналогично, вы можете использовать бейдж-таблетку, которая создает округленный прямоугольник, как вы видите здесь,

29
00:02:18,075 --> 00:02:21,700
и это может быть сделано, применив значок,

30
00:02:21,700 --> 00:02:26,000
класс badge-pill к нему вместе с классом значков.

31
00:02:26,000 --> 00:02:30,655
Оповещения — это еще один способ информирования пользователей об информации.

32
00:02:30,655 --> 00:02:37,245
Так, например, оповещение может быть создано с помощью компонента alert,

33
00:02:37,245 --> 00:02:45,370
который просто может быть создан путем применения предупреждения с предупреждением, например,

34
00:02:45,370 --> 00:02:50,285
в этом примере вы видите предупреждение, создающее желтое цветное предупреждение.

35
00:02:50,285 --> 00:02:57,075
Вы можете применить снова опасные основные и другие цвета начальной загрузки там.

36
00:02:57,075 --> 00:02:59,955
А затем класс предупреждения,

37
00:02:59,955 --> 00:03:06,190
позволяет включить класс, который пользователь может щелкнуть, чтобы отклонить предупреждение.

38
00:03:06,190 --> 00:03:08,140
Чтобы поддержать эту операцию,

39
00:03:08,140 --> 00:03:14,625
вам также нужно включить кнопку в ваше оповещение, как вы можете видеть внутри этого div,

40
00:03:14,625 --> 00:03:16,740
мы включили эту кнопку здесь.

41
00:03:16,740 --> 00:03:23,505
И содержимое оповещения может быть отформатировано с помощью стандартного HTML, как вы можете видеть здесь.

42
00:03:23,505 --> 00:03:27,490
Таким образом, это позволяет нам создать оповещение на нашей веб-странице.

43
00:03:27,490 --> 00:03:32,320
Таким образом, для подведения итогов, Alert может быть создан путем добавления класса alert

44
00:03:32,320 --> 00:03:37,585
вместе с дополнительными квалификационными классами оповещений,

45
00:03:37,585 --> 00:03:40,560
которые позволяют создавать оповещения разных цветов.

46
00:03:40,560 --> 00:03:43,145
Мы также можем включать ссылки в наши оповещения.

47
00:03:43,145 --> 00:03:46,110
Мы также можем сделать предупреждение оправданным, используя

48
00:03:46,110 --> 00:03:51,260
класс предупреждений и включая перекрестную кнопку внутри нашего оповещения.

49
00:03:51,260 --> 00:03:55,360
Аналогичным образом, индикаторы прогресса включены в веб-сайты, чтобы держать

50
00:03:55,360 --> 00:03:59,680
пользователей в курсе прогресса того, что мы инициировали на веб-сайте.

51
00:03:59,680 --> 00:04:04,100
Так, например, если вы загружаете файл на веб-сайт,

52
00:04:04,100 --> 00:04:08,105
то вы можете держать пользователя в курсе того, сколько файла

53
00:04:08,105 --> 00:04:12,780
завершили загрузку, показывая индикатор выполнения на веб-сайте.

54
00:04:12,780 --> 00:04:16,780
Таким образом, создание индикатора прогресса в bootstrap

55
00:04:16,780 --> 00:04:22,155
выполняется путем применения класса прогресса к div и внутри, что мы можем применить

56
00:04:22,155 --> 00:04:26,265
другой внутренний div с индикатором прогресса класса, а

57
00:04:26,265 --> 00:04:30,695
также позволить, чтобы это было дополнительно стилизовано, используя такие вещи, как

58
00:04:30,695 --> 00:04:34,890
индикатор прогресса полосатый, а затем вы можете применить цвет для

59
00:04:34,890 --> 00:04:40,180
индикатор выполнения, указав цвет как BG дефис и цвет.

60
00:04:40,180 --> 00:04:44,910
Итак, в этом случае bg-danger применяется к этому индикатору прогресса.

61
00:04:44,910 --> 00:04:47,150
Мы также можем сделать часть прогресса полосатой,

62
00:04:47,150 --> 00:04:49,395
мы также можем анимировать индикатор прогресса,

63
00:04:49,395 --> 00:04:54,100
а также указать, сколько из этого индикатора прогресса должно быть в форме.

64
00:04:54,100 --> 00:04:58,015
Таким образом, изменяя это значение ширины

65
00:04:58,015 --> 00:05:04,925
динамически, вы можете создать индикатор выполнения, который будет обновлять себя на веб-странице.

66
00:05:04,925 --> 00:05:08,350
Таким образом, для подведения итогов, индикатор выполнения может быть создан путем

67
00:05:08,350 --> 00:05:12,030
применения класса прогресса к div, а

68
00:05:12,030 --> 00:05:14,260
внутри него внутренний div, к которому вы применяете

69
00:05:14,260 --> 00:05:18,800
класс индикатора выполнения, позволит вам создать индикатор выполнения.

70
00:05:18,800 --> 00:05:22,450
Вы даже можете складывать несколько индикаторов выполнения вместе, чтобы

71
00:05:22,450 --> 00:05:28,325
создать сложенный индикатор выполнения, а также применить разные цвета к индикатору выполнения, а также

72
00:05:28,325 --> 00:05:32,865
может иметь различный внешний вид для индикатора

73
00:05:32,865 --> 00:05:36,570
выполнения, используя класс полосы выполнения, а также

74
00:05:36,570 --> 00:05:41,375
анимированный класс индикатора выполнения для анимации полосы на нашем индикаре прогресса.

75
00:05:41,375 --> 00:05:45,515
Теперь, когда мы рассмотрели различные способы оповещения пользователей,

76
00:05:45,515 --> 00:05:50,925
давайте сделаем простое упражнение дальше и использовать значки

77
00:05:50,925 --> 00:05:58,090
на нашей веб-странице, чтобы привлечь внимание пользователей.