На стороне клиента, для адаптивности используются следующие библиотеки: bootstrap и jQuery
Bootstrap – это платформа с открытым исходным кодом, поддерживаемая людьми, которые действительно хорошо разбираются в CSS. Они позаботились о том, чтобы обеспечить бесперебойную работу платформы, и они охватывают несколько общих функций дизайна, которые могут вам понадобиться. Это делает проектирование намного проще и вам не нужно слишком беспокоиться о том, как выглядит ваш сайт в разных браузерах, потому что инфраструктура уже позаботится об этом. Это экономит вам много времени.
Простота использования
Bootstrap предоставляет файлы LESS для тех, кто привык к предварительной обработке CSS, но если вы этого не знаете или не хотите использовать, вы можете иметь простые файлы CSS. Все, что вам нужно сделать, это загрузить файлы с сайта Bootstrap, распаковать их и включить в заготовки ваших файлов HTML. Это дает вам доступ ко всей структуре, и вы можете начать использовать предварительно определенные классы Bootstrap.
Высоко гибкий
Bootstrap дает разработчикам гибкость в разработке. Это CSS-структура с предопределенными классами для макета, сеткой, различными компонентами CSS и функциями Javascript. Все они включены и разработчик обладает гибкостью и свободой использования только тех классов, которые необходимы в разметке. Это делает его очень гибким, поскольку разработчики могут использовать только те объекты, которые необходимы в разметке, и отключить не нужные.
Реагирующая сетка
Это самая сильная часть структуры бутстрапа. Bootstrap предлагает систему с 12 колонками. Система сетки “реагирует”, что означает, что она настраивается в зависимости от разрешения устройства клиента. Эти сетки имеют дополнительные классы ячеек, которые были определены в синхронизации с разрешением устройства, которое они представляют. Эти ячейки имеют классы xs, sm, md и lg, каждый из которых представляет собой разрешение устройства. Все, что разработчик должен сделать, это включить эти классы, определяя видимость элемента в разметке и, следовательно, создать отзывчивый веб-сайт. Интеллектуальная сетка позволяет быстро создавать адаптивные веб-сайты.
Полный список компонентов
Bootstrap содержит все компоненты, которые вам потребуются для вашего сайта. Он включает в себя выпадающие меню, панель навигации, индикатор выполнения, оповещения, ярлыки, значки и т. Д. Он включает все компоненты, которые могут вам потребоваться, и вы можете легко включить их в свою разметку. Это экономит много времени, так как вам не придется разрабатывать их с нуля и беспокоиться о кросс-браузерности и совместимости с другими устройствами. Все, что нужно, чтобы заставить их работать – включить правильные классы в свою разметку, и все будет на месте.
Использование Javascript Libraries
Bootstrap содержит более дюжины плагинов javascript, разработанных и готовых к использованию. Существуют различные популярные функции, которые были включены. К ним относятся Tabs, ScrollSpy, всплывающие подсказки, всплывающие окна, оповещения и многое другое. Использование и настройка их не сложна.
Частые обновления
Bootstrap выпускает больше обновлений, чем любая другая инфраструктура. Команда разработчиков bootstrap начинает работу над решением, как только сталкивается с какой-либо проблемой. С обновлениями Bootstrap, выпускаемыми довольно часто, вы можете быть уверены, что работаете с новейшими инструментами. Это также обеспечивает более широкий диапазон совместимости.
Подробная документация
Bootstrap имеет очень подробную документацию и обширное сообщество, поддерживающее ее. Даже если разработчик новичок в Bootstrap, документация обеспечивает отличную поддержку в обучении без каких-либо проблем. Документация включает примеры и демонстрации, которые помогают понять концепции и привыкнуть к Bootstrap за короткий промежуток времени. И если даже разработчик застопорился в каком либо вопросе, есть огромное сообщество и множество форумов, которые помогут решить все вопросы.
Последовательность
Bootstrap была разработана с идеей дать разработчикам централизованный код разработки. Bootstrap предоставляет вам конечный результат, который является однородным на всех платформах. Вам не нужно больше беспокоиться о проблемах совместимости с Internet Explorer, Google Chrome или Firefox и это дает вам полную свободу действий.
JQuery - это кроссплатформенная JavaScript-библиотека, предназначенная для упрощения клиентского сценария HTML. JQuery - самая популярная в настоящее время библиотека JavaScript, которая устанавливается на 65% из 10 миллионов самых посещаемых сайтов в Интернете. JQuery - это бесплатное программное обеспечение с открытым исходным кодом, лицензированное по лицензии MIT.
jQuery предлагает:
Когда браузер отображает веб-страницу, это визуальное представление того, что известно как DOM (или объектная модель документа). Эта модель может быть концептуально смоделирована как структура данных дерева, где есть определенные узлы с корнями и листьями.
Когда дело доходит до фактического манипулирования DOM, у jQuery есть много функций, которые позволяют нам изменять то, что видят наши посетители.
Некоторые из этих функций просты, например, позволяют нам показывать (show) или скрывать (hide) элементы, которые не отображаются при загрузке страницы. Другие функции позволяют нам создавать новые элементы и добавлять (append) их к существующему элементу или добавлять их перед (prepend) всем списком.
Если вы новичок в JavaScript, то одна вещь, которая имеет ключевое значение для понимания того, как она работает со страницей, отображаемой в веб-браузере, состоит в том, что она реагирует на различные события.
То есть, когда пользователь нажимает на элемент, нажимает клавишу или щелкает мышью, тогда браузер выдает сигнал, соответствующий произошедшему событию. Это позволяет нам использовать преимущества взаимодействия пользователя с браузером.
В частности, каждый раз, когда пользователь что-то делает на странице, мы можем реагировать с помощью пользовательского события. Проблема заключается в том, что не каждый браузер реализует события одинаково (поэтому существует потребность в спецификации, но это контент для другой статьи).
К счастью, jQuery делает это намного проще, определяя последовательное имя для всех событий, чтобы мы могли использовать одно и то же имя для события, на которое мы пытаемся ответить, и оно будет работать во всех основных браузерах.
Когда jQuery впервые вышел, Flash все еще был относительно популярен, и общие анимации в Интернете не были полностью мертвыми.
Когда мы говорим об анимации в контексте jQuery, мы не говорим о том же типе эффектов или поведения, которые мы привыкли видеть со старой технологией. Вместо этого мы говорим об эффектах, которые дают пользователям обратную связь, что-то случилось на экране. Кроме того, он менее инвазивный и может придать правильное чувство стиля странице или приложению при правильном использовании (хотя конечно чем-то можно и злоупотреблять).
Вы можете просмотреть API всех эффектов на этой странице, но стоит заметить, что эффекты jQuery могут варьироваться в любом месте от обработки простого выцветания и выхолащивания элементов или скользящих элементов до более сложного, например манипулирования очередью зарегистрированных эффектов для запуска потом на определенном элементе.
Конечно, в последнем случае предполагается, что у вас есть небольшой опыт работы с API-интерфейсами эффектов, но это естественно, если у вас есть достаточно времени для работы с библиотекой и документацией.
Если вы не знакомы с Ajax, то, по сути, веб-страница может сделать вызов на сервер, обработать ответ и обновить часть страницы, не обновляя всю страницу. Хотя технология существует уже довольно давно, это все еще что-то действительно крутое и может обеспечить некоторые действительно аккуратные функциональные возможности в контексте страницы или веб-приложения при правильном и эффективном использовании.
Хотя поддержка Ajax не так плоха, как это было пять или десять лет назад, реализация API в разных браузерах может немного меняться. Это означает, что нам нужно написать код Ajax специально для браузера, который корпорация Майкрософт предоставляет, который Google предоставляет, который предоставляет Apple, предоставляемый Chrome, и так далее.
По крайней мере, так обстоит дело без jQuery. Благодаря поддержке Ajax, мы можем использовать Ajax несколькими способами, не сталкиваясь с несогласованностью кросс-браузера. На самом деле тривиально легко обрабатывать запросы GET и POST, а также возможность совершать гораздо более сложные вызовы с помощью метода $.ajax.
Как только вы привыкли к тому, что API доступен в ядре вашего приложения или в вашем распоряжении, трудно представить, что вы не работаете с ним (или с чем-то подобным).
Одной из особенностей, которую предлагает множество серверных фреймворков и библиотек, является возможность создания расширений для базовой кодовой базы. Современные клиентские библиотеки и платформы позволяют это, и jQuery не является исключением.