[МУЗЫКА]
Давайте теперь попробуем понять несколько механизмов, которые позволяют нам
отображать информацию для пользователей, накладывающих содержимое вашей веб-страницы.
Итак, здесь мы рассмотрим три различных конструкции, которые доступны в Bootstrap
называются всплывающие подсказки, popovers и modals.
Итак, что такое всплывающие подсказки, поповеры и модалы и как они полезны?
Сначала мы рассмотрим некоторые основные идеи, а затем рассмотрим некоторые примеры.
В следующем упражнении мы будем использовать всплывающие подсказки и
модалы на нашей веб-странице, и мы рассмотрим пример popovers.
Итак, как я уже упоминал, всплывающие подсказки, popovers и modals являются способом раскрытия контента
пользователям, когда пользователь взаимодействует с определенными элементами на вашей веб-странице.
Например, когда пользователь
нажимает на кнопку, или наводит курсор на кнопку, или нажимает на ссылку,
или достигает определенной точки на вашей веб-странице.
Таким образом, все это вызовет информацию, которая будет отображаться пользователям.
Таким образом,
в этом случае информация отображается в виде наложения поверх вашей веб-страницы.
Таким образом, основное содержание веб-страницы все еще существует, но
это выложено поверх базового контента.
Таким образом, с точки зрения гибкости, подсказки являются наиболее простыми в реализации, но
в то же время имеют ограниченную гибкость в том, как они могут отображать информацию.
Поповеры более гибки, чем подсказки, но у них также есть свои ограничения.
Модалы дают вам самую широкую поддержку для
отображения контента различными способами.
В качестве примера, давайте перейдем на нашу веб-страницу, над которой мы работали.
Вы видите это, когда мы наводим указатель мыши на эту кнопку.
Вы видите это сообщение на экране здесь
с некоторой дополнительной информацией.
Это пример всплывающей подсказки.
Это позволяет отображать меньший объем информации для пользователей.
Так, например, если вы пытаетесь направлять пользователей через ваш веб-сайт и
хотите, чтобы они знали, что происходит, когда вы нажимаете различные местоположения любой веб-страницы,
это, возможно, хороший способ напомнить им о том, что ожидается.
Таким образом, вы можете легко разработать, например
, видео вашего сайта, используя эти подсказки, чтобы указать пользователям.
Если вы хотите немного более подробную информацию,
то popovers было бы полезнее.
Тот же пример, реализация и использование popover будет выглядеть так.
Теперь в этом случае
вам придется явно нажать на кнопку, чтобы показать popover.
Таким образом, в этом случае popover отображается с некоторой информацией о заголовке, а
затем фактическое содержимое в нижней части этого popover.
Теперь, отклонение popover потребует от вас снова нажать на дно там.
Таким образом, это поведение поповера.
В некоторых случаях popovers полезнее, чем всплывающие подсказки.
Наш третий вид наложения данных является модальным.
Модальный позволяет представить более
подробную информацию пользователям, чем всплывающая подсказка и popover.
Содержимое модального само делится на заголовок, тело и нижний колонтитул.
А сам модальный может содержать гораздо более подробную информацию.
И вы можете использовать всю сетку Bootstrap
внутри модального тела, чтобы организовать фактический контент.
Далее мы рассмотрим несколько примеров использования модалов.
Перейдя на нашу веб-страницу, вы увидите, что на правой стороне,
здесь у нас есть ссылка под названием Login.
Поэтому, когда вы нажимаете на эту ссылку, вы заметите, что этот модальный
с их формой входа появляется на экране.
Таким образом, это типичное поведение модального.
И поэтому здесь вы можете ввести информацию, а
затем нажать на кнопку Войти, чтобы войти на свой сайт.
Переходя на страницу Coursera, вот реальный пример использования модального.
Так, например, если вы нажмете на кнопку «Вход» здесь,
вы увидите, что на Coursera появится форма на экране.
Таким образом, это еще одно использование модального на вашей веб-странице.
Теперь, когда вы видели примеры подсказок, popovers и modals,
давайте перейдем к следующему упражнению, где мы создадим всплывающую подсказку на нашей странице index.html.
Мы также создадим модальный, который позволяет пользователю вводить информацию для
входа в нашу веб-страницу.
[ МУЗЫКА]