У вас может быть несколько причин для привлечения внимания посетителей
к определенным частям вашего сайта или, возможно, вы хотите предупредить
пользователей о некоторой информации или вы можете
информировать пользователей о ходе операции, которую они инициируют на вашем сайте.
Давайте посмотрим на некоторые различные механизмы, которые
bootstrap обеспечивает для такого рода операций.
Bootstrap имеет много различных компонентов, которые позволяют нам держать пользователей в курсе.
У нас есть бейджи, которые позволяют нам привлечь внимание
пользователей к последним обновлениям нашей веб-страницы.
У нас есть предупреждения, ошибки
и предупреждения, которые могут быть доставлены пользователям, если
они выполняют недопустимые операции.
Кроме того, мы можем использовать индикаторы прогресса, чтобы информировать пользователей
о ходе любых операций, которые они инициируют на нашем веб-сайте.
Давайте посмотрим на это чуть более подробно.
Значки — это простой способ добавления небольшого количества
информации на ваш сайт, чтобы привлечь внимание посетителей.
В качестве примера вы можете увидеть, что мы добавили пару значков к
этому описанию блюда здесь, на нашей главной странице, так что вы
можете видеть, что у нас есть красный цветной значок, привлекающий внимание пользователей к
тому, что это горячий пункт меню
и, возможно, даже информирующий их о цена меню.
Такие небольшие фрагменты информации могут быть добавлены на ваш сайт с помощью бейджа.
Например,
красный значок здесь создается с помощью пролета с значком классов и значком опасности.
Вы можете использовать различные другие цвета, встроенные в
фреймворк начальной загрузки для создания значков нескольких разных цветов.
Аналогично, вы можете использовать бейдж-таблетку, которая создает округленный прямоугольник, как вы видите здесь,
и это может быть сделано, применив значок,
класс badge-pill к нему вместе с классом значков.
Оповещения — это еще один способ информирования пользователей об информации.
Так, например, оповещение может быть создано с помощью компонента alert,
который просто может быть создан путем применения предупреждения с предупреждением, например,
в этом примере вы видите предупреждение, создающее желтое цветное предупреждение.
Вы можете применить снова опасные основные и другие цвета начальной загрузки там.
А затем класс предупреждения,
позволяет включить класс, который пользователь может щелкнуть, чтобы отклонить предупреждение.
Чтобы поддержать эту операцию,
вам также нужно включить кнопку в ваше оповещение, как вы можете видеть внутри этого div,
мы включили эту кнопку здесь.
И содержимое оповещения может быть отформатировано с помощью стандартного HTML, как вы можете видеть здесь.
Таким образом, это позволяет нам создать оповещение на нашей веб-странице.
Таким образом, для подведения итогов, Alert может быть создан путем добавления класса alert
вместе с дополнительными квалификационными классами оповещений,
которые позволяют создавать оповещения разных цветов.
Мы также можем включать ссылки в наши оповещения.
Мы также можем сделать предупреждение оправданным, используя
класс предупреждений и включая перекрестную кнопку внутри нашего оповещения.
Аналогичным образом, индикаторы прогресса включены в веб-сайты, чтобы держать
пользователей в курсе прогресса того, что мы инициировали на веб-сайте.
Так, например, если вы загружаете файл на веб-сайт,
то вы можете держать пользователя в курсе того, сколько файла
завершили загрузку, показывая индикатор выполнения на веб-сайте.
Таким образом, создание индикатора прогресса в bootstrap
выполняется путем применения класса прогресса к div и внутри, что мы можем применить
другой внутренний div с индикатором прогресса класса, а
также позволить, чтобы это было дополнительно стилизовано, используя такие вещи, как
индикатор прогресса полосатый, а затем вы можете применить цвет для
индикатор выполнения, указав цвет как BG дефис и цвет.
Итак, в этом случае bg-danger применяется к этому индикатору прогресса.
Мы также можем сделать часть прогресса полосатой,
мы также можем анимировать индикатор прогресса,
а также указать, сколько из этого индикатора прогресса должно быть в форме.
Таким образом, изменяя это значение ширины
динамически, вы можете создать индикатор выполнения, который будет обновлять себя на веб-странице.
Таким образом, для подведения итогов, индикатор выполнения может быть создан путем
применения класса прогресса к div, а
внутри него внутренний div, к которому вы применяете
класс индикатора выполнения, позволит вам создать индикатор выполнения.
Вы даже можете складывать несколько индикаторов выполнения вместе, чтобы
создать сложенный индикатор выполнения, а также применить разные цвета к индикатору выполнения, а также
может иметь различный внешний вид для индикатора
выполнения, используя класс полосы выполнения, а также
анимированный класс индикатора выполнения для анимации полосы на нашем индикаре прогресса.
Теперь, когда мы рассмотрели различные способы оповещения пользователей,
давайте сделаем простое упражнение дальше и использовать значки
на нашей веб-странице, чтобы привлечь внимание пользователей.