В предшествующей лекции мы увидели несколько способов раскрытия контента пользователям.
Таким образом, это будет наложение поверх
вашей веб-страницы, чтобы показать информацию пользователям.
Итак, мы рассмотрим два из этих подходов,
Tooltips и Modals в этом упражнении.
Во-первых, мы добавим всплывающую подсказку на эту страницу.
Итак, перейдя к index.html и в Jumbotron,
мы видим эту кнопку в Jumbotron там.
К этой кнопке я собираюсь добавить всплывающую подсказку.
Итак, перейдя в эту кнопку,
то, что я буду делать сейчас, просто перейдите в следующую строку,
чтобы было немного яснее написать код там и в эту кнопку,
я собираюсь ввести всплывающую подсказку здесь.
Итак, после предупреждения кнопки, я бы сказал,
data-toggle-tooltip, чтобы вы могли видеть, что
компонент javascript, который используется здесь, а затем data-html-true.
Итак, если мы применим этот атрибут HTML данных и отправим его в true, это
означает, что содержимое всплывающей подсказки может быть стилизовано с помощью
HTML, а затем они скажут следующую строку,
я дам атрибут заголовка.
Таким образом, это место, где содержимое всплывающей подсказки будет заключено.
Так что мы скажем «или позвоним нам».
Итак, вы можете видеть, что я использую HTML для
форматирования содержимого всплывающей подсказки там.
Таким образом, всплывающая подсказка вводится в кнопку там, а также последний атрибут, который
я дам, - это размещение данных, которое я дам внизу здесь.
Таким образом, это означает, что эта всплывающая подсказка будет показана внизу этой кнопки.
После добавления этого в кнопку,
мы теперь перейдем и
добавим код JavaScript в нижней части этой страницы, чтобы активировать эту всплывающую подсказку.
Перейдя к нижней части страницы,
позвольте мне представить сценарий там, добавив теги для скрипта.
Внутри этого мы определим фактический код JavaScript здесь.
Так что скажем долларовые документы.
Таким образом, этот скрипт использует синтаксис jQuery здесь.
Таким образом, это указывает, когда документ готов,
когда этот конкретный HTML-документ готов
для рендеринга и определить вызов этой конкретной функции здесь.
Таким образом, мы поставляем функцию JavaScript для
вызова в этот момент, поэтому мы будем указывать нашу функцию, а затем мы скажем
в скобках data-toggle-tooltip и всплывающая подсказка.
Итак, это код, который мы собираемся ввести на этой странице здесь.
Это в синтаксисе jQuery, и мы рассмотрим jQuery немного больше в следующем модуле.
На данный момент это указывает, что везде, где есть атрибут
такого рода для этого конкретного HTML-тега,
включайте всплывающую подсказку.
Итак, но это изменение сохранит изменения, а
затем пойдет и посмотрим, как выглядит всплывающая подсказка на веб-странице.
Переходя на веб-страницу,
теперь, когда мы держим наш указатель мыши на шаблон здесь,
вы можете увидеть, что всплывающая подсказка отображается внизу здесь.
Итак, вы можете заметить, что содержание этой подсказки является
именно тем, что мы дали в качестве атрибута заголовка для этого дна.
Таким образом, мы можем добавить всплывающие подсказки на нашу страницу.
Подсказки являются хорошим способом предоставления некоторой дополнительной информации для
пользователя, когда пользователь переходит в разные места на странице.
Продолжая упражнение, на следующем шаге,
мы собираемся создать модальный в нашей веб-странице.
Этот модальный будет содержать форму входа и будет показан с помощью ссылки в их навигационной панели.
Итак, чтобы начать работу,
bootstrap советует, чтобы весь модальный связанный код был помещен в верхней части вашей страницы.
Итак, я собираюсь войти и написать ниже навигационной панели здесь,
я собираюсь поместить в код для модального там.
Поэтому, чтобы создать модальный,
я начну с того, что скажу div ID login modal.
Итак, мы даем идентификатор этому модальному, чтобы он мог быть вызван
ссылкой на навигационную панель, а затем класс как «модальное затухание».
Таким образом, вы видите, что класс модальный, а fade означает,
что, когда модальный выводится на экран,
он исчезает на экране, и роль является диалогом.
Таким образом, это означает, что он отображается в верхней части страницы.
Давайте закроем div части.
Так что внутри здесь, мы собираемся создать модальный.
Итак, там я собираюсь создать второй div с классом в качестве модального диалога, а затем
внутри здесь мы определим содержание
фактического модального здесь и закроем div.
И так, это должно быть модальное содержание будет структурировано здесь.
Итак, внутри этого модального диалога мы создадим еще один div с
классом модального содержимого и
закроем div, а типичный модальный будет содержать модальный заголовок.
Итак, вот где будет размещен следующий div.
А затем модальное тело
, которое будет содержать большую часть модального связанного содержимого.
Все эти разделы модального являются необязательными,
но, по крайней мере, у вас должен быть один такой раздел в вашем
модальном, иначе нет смысла создавать модальный там.
Таким образом, с этим структура модального теперь готова.
Итак, мы собираемся войти и заполнить содержание в этот модальный.
Итак, теперь нам нужно определить, что идет в модальный.
Теперь в заголовке мы собираемся поставить кнопку,
кросс-кнопку в модальном, который при нажатии будет отклонять модальный.
Это обычный способ разработки модалов.
И модальное тело само будет содержать форму.
Теперь модальный может содержать все, что вы хотите, так что, например,
если вы
нажмете на изображение в галерее изображений и хотите показать больший размер изображения,
даже там вы можете использовать модальный для отображения информации.
Теперь в этом упражнении,
мы будем использовать модальный для размещения формы, которая показана для пользователя.
Хорошо, теперь, в модальном заголовке,
мы собираемся ввести кнопку с
кнопкой типа и закрыть класс.
Итак, вы видите, что это кнопка, которая используется для закрытия модального, а затем вы скажете,
data dismiss, а затем модальный.
Итак, это означает, что эта конкретная кнопка
при нажатии будет отклонять модальный с экрана.
И эта кнопка, я собираюсь использовать время,
будет отображаться как крест в модальностях здесь.
Так что я бы сказал раз здесь.
Перед этой кнопкой мы собираемся ввести
заголовок, который мы будем отображать в заголовке модального, поэтому я
начну с h4 с классом модального заголовка.
И затем внутри этого h4
я включу название модального,
который является логином, потому что это покажет форму входа.
Теперь, когда мы поместили некоторые детали в этот модальный,
давайте добавим ссылку в нашу навигационную панель, которая
вызовет этот модальный, а затем мы будем иметь
быстрый взгляд на то, как модальный выглядит на экране.
Перейдя к навигационной панели,
сразу после UL здесь,
я собираюсь включить в
ссылку, которая может быть использована для запуска показа и скрытия модального.
Поэтому, чтобы сделать это, я войду и использую span с классом navbar-text.
Это то, что позволяет мне включить ссылку в навигационную панель и показать ее как текст.
Итак, внутри диапазона
я буду использовать A с переключателем данных,
поэтому вы можете увидеть, как включается переключатель данных JavaScript, а
переключение данных - для модального, а затем для цели данных.
Вы помните, что мы дали ID как логин модальный для наши-
модальный, который мы включили.
Итак, я собираюсь использовать это как мою цель данных с хэшем перед этим.
И внутри здесь, я войду и использую
шрифт удивительный значок для входа в систему.
Итак, это шрифт удивительный
значок «fa- sign-in» и сказать логин и закрыть e-tech.
Таким образом, давайте сохраним изменения и взглянем на веб-страницу.
Перейдя на нашу веб-страницу в браузере,
вы теперь видите, что на правом краю
вы видите этот логин с этим значком, созданным там.
Таким образом, это ссылка, которая будет инициировать отображение модального.
Поэтому, если я нажму на эту ссылку,
то модальный отобразится на экране.
Поэтому обратите внимание, что когда мы создали этот модальный, мы сказали,
заголовок, который содержал логин, а затем эту кнопку, а затем тело
, в настоящее время пустое, мы собираемся ввести больше кода там.
Теперь, если вы нажмете на эту кнопку, модальный исчезнет.
Нажмите на это снова, модальный отображается.
Даже если вы нажимаете за пределами модального, модальный исчезнет.
Таким образом, это поведение модального, что мы пришли ожидать.
Теперь, на следующем шаге я собираюсь войти и представить форму здесь.
Я не собираюсь объяснять детали формы, потому что вы
уже изучали формы на одном из предыдущих уроков.
Поэтому я просто собираюсь просто войти и вставить код формы, а
затем мы посмотрим на форму в модальном здесь.
Возвращаясь к коду,
теперь вы можете видеть, что в
модальном теле я заполнил форму.
И тогда у меня есть две группы форм здесь с вводом с типом электронной почты
и паролем типа ввода, а затем у меня есть флажок здесь, который у меня есть.
Таким образом, это должно быть легко для вас, чтобы расшифровать, что эта форма представляет собой структуру кода EE, исходя
из вашего понимания того, как создаются формы Bootstrap.
Я поставил две пуговицы.
Один - кнопка отправки, а другой - кнопка отмены.
Кнопка отмены имеет первую кнопку.
Кнопка отмены здесь имеет модель отклонения данных.
Таким образом, это означает, что при нажатии на кнопку отмены модель будет уволена.
И другой является кнопкой отправки, которая используется для отправки формы.
Таким образом, с этими изменениями,
давайте сохраним изменения, а затем пойдем и посмотрим на нашу веб-страницу.
Возвращаясь к веб-странице,
теперь вы нажимаете на логин, тогда вы увидите форму для входа пользователя.
Итак, вы увидите, что у вас тут две коробки.
Ввод полей здесь для ввода электронной почты
и пароля, а затем флажок «Запомнить меня».
А потом у вас есть вход и отмена.
Поэтому, если вы нажмете на отмену, модальный уйдет.
Так же, как когда вы нажимаете на крест там.
А затем, если вы заполняете эту информацию и продолжаете кликать на входе,
процесс входа должен быть инициирован.
На данный момент у нас нет сервера для этого,
но я просто показываю вам в Bootstrap, как вы создадите такую форму.
Я уверен, что вы видели такие вещи на
многих веб-сайтах, где, когда вы нажимаете на кнопку входа,
что-то вроде этого с формой появляется на экране
и ожидает, что вы введете информацию.
Теперь вы увидите, как вы можете использовать модели для отображения
информации, накладывающей веб-страницу.
С этим мы завершаем это упражнение.
В этом упражнении мы видели использование подсказок
и мы видели использование моделей для отображения содержимого.
Это хорошее время для вас, чтобы сделать git-commint с подсказками и моделями сообщения.