22. Создание сайта с помощью фреймворка. Использование возможностей фреймворка

Автор Lyubov Stishevskaya
22. Создание сайта с помощью фреймворка. Использование возможностей фреймворка

Если вы используете более комплексный Framework как будет Foundation или гамбия у вас будет доступ ко многим встроенным возможностям которые позволяют расширить функционал сайта почти дополнительные работы с вашей стороны.

Несмотря на то, что эти возможности иногда очень сильно отличаются от фреймворка Framework. Я хочу рассмотреть как они обычно работают для этого я перейду на странице документации Foundation и посмотрю на некоторые доступные элементы которые могу использовать внутри фреймворка здесь есть встроенные диалоговые окна предупреждений различные стили для лейблов из хочу их. Изменить можно очень легко создать всплывающие подсказки раздвигающиеся панели и так далее если я хочу посмотреть как использовать эти элементы на странице там не нужно просто открыть код пример ну скажем в моём блоге я бы хотел использовать выноску текста подобную этой всё, что мне для этого сделать — это посмотреть на код примера и разобрать как здесь всё устроено в данном случае всё, что мне нужно.

Это дефект с классами пенал калауд и радиус если я перейду на страницу Block Moving From printer Web — это название моей записи о переходе от печати kweb и про кручу вниз тадамаки то у нас здесь ещё не закончен.

Но вот эти абзаце hate love Enough готовое. ДЗ Я бы хотел чтобы находились в панели выноски в документации Foundation мы увидели, что для этого просто нужно применить класс. Поэтому если я вернусь к коду этой maven HTML которая находится в папке 04 подчёркивание 08 и прокручивать вниз до моей статьи то смогу найти эти два параграфа. Вот они, что мне нужно сделать — это взять эти два параграфа и заключите в. Екатеринбурге книгу. Я просто применил pnl калауд радиус Essentials всё — это классы которые встроены в Foundation. Я просто просмотрел его документацию посмотрел, что доступно и решил воспользоваться этим без необходимости написания стилей вручную теперь я сохраню — это вернусь к моей страницы и обновлю её и мы получили форматирование выноски без дополнительной работы применение классов и когда мы разберемся с макетом панель не будет растягиваться на всю страницу — это показывает как легко использовать все эти опции форматирования. А некоторые из этих дополнительных возможно могут быть связаны с функционалом если я вернусь к документации и про кручу вверх то я увижу там ссылку джаваскрипт и кликнув по ней. Здесь также есть некоторые интересные вещи которые встроены в такие как слайд-шоу. Орбит Магеллан навигация остающиеся на одном месте и другое, но я хочу норвел — это возможность добавлять на сайт модальные окна если кликнуть на примере вы увидите, что модальное окно как бы выплывают вниз и можно закрыть его кликнув здесь или просто в — это функция. Сейчас очень часто встречается на сайтах и если вы дизайнер и не сильны в использовании джаваскрипт джейквери или других библиотек вам может быть сложно — это сделать, но — это в варфрейм барук. И вам нужно лишь прочитать его документацию сначала здесь говорится, что я должен создать div Tag который будет модальным окном и задать ему — это и нужно использовать некоторые классы для стилизации, а также опциональные классы expand large Medium которые будут контролировать размеры и после этого я могу либо использовать функцию Java Script для вызова модального окна либо добавить ссылку со следующими свойствами для этого Evil ED с именем модального окна которая. Это всё, что нужно сделать там есть ещё документация, но добавление — это просто процесс из двух шагов одна из вещей которые здесь у меня есть — это подписка на рассылку новостей. Я бы чтобы при нажатии на эту ссылку вместо перенаправление на другую страницу просто всплывало окно где можно подписаться на новости, а потом вернуться к тому, что вы делали для этого я перейду к моим уходам 1, что я сделаю — это создам сама модальное окно. Я тут нам сохранил немного времени. Если вы. Прокрутите в самый низ страницы то увидите там закомментированный код давайте от комментируем здесь у нас есть гифтек сойди News module такое у меня будет имя и я дал ему классы reveal modal large которые выбрал в документации. Мне нужно поместить — это на страницу я не могу оставить — это HTML поэтому я вырежу и вставлю в самом низу страницы под футером Foundation — это спрячет и никто не сможет увидеть. Это если у них не будут отключены джаваскрипт и стили. А если и будут то страница в любом случае будет выглядеть по-другому в общем — это от пользователя пока он не нажмёт кнопку для этого я прокрутила немного вверх. До раздела our newsletter из-за ключевые слова в тексте ссылки и добавлю ему от шрамов в примере. В качестве ссылки использовался только знак диез, но мне этот метод не нравится потому, что так при клике выпили прыгните верх страницы. Я просто задам этот моего окна. Это означает, что если кто-то использует. Агент пользователя у которого не включён джаваскрипт или стиле. Это ссылка будет переносить их. Вниз страницы к модельному окно. Так, что даже ты не всё работает к нему всё равно можно получить доступ. И — это хорошо. А в качестве классов я использую Small батон кнопка играет справа. Я хочу чтобы — это выглядело никак ссылка как кнопка которая будет как бы призывать к действию для этого я использую класса встроенные в Foundation и в конце концов пишем data-id затем равно и значение будет News module — это снова тот — это который мы дали диван. Вот — это это атрибут фреймворк Foundation он делает следующие вызывает джаваскрипт и говорит. А я хочу получить конкретно — это модальное окно News если сохранить — это вернуться на страницу и обновить мы увидим, что надпись line-up выглядит кнопка и если кликнуть по ней отобразится модальное окно с формой можно заполнить её подписаться на новости закрыть и вернуться к чтению клёво так мы рассмотрели только некоторые возможности встроенные в.

0 комментариев
0

Читайте также