Если вы читаете эту статью, значит, вдохновились и решили освоить создание шаблона Joomla с адаптивным дизайном. В этой статье мы познакомимся с основными принципами использования Bootstrap и подключим его к CMS Joomla.
Содержание
Как работает Bootstrap Framework?
В свое время, когда я только знакомился с данной технологией, несмотря на наличие массы информации в Интернете, мне было сложно понять что же вообще такое CSS-фреймворки. Почему-то все сайты об этом умалчивали, рассказывая непосредственно про их использование.
Вообще, фреймворк или, по-нашему, библиотека – это набор готовых функций, которые можно вызывать. Это можно описать следующей конструкцией:
Результат = Функция(Передаваемые данные)
Или:
Передаваемые данные -> [Функция] -> Результат
Примеры возьмем из интернет-магазинов:
- Получить данные заказа, передавая идентификатор заказа в функцию получения данных о заказах.
- Получить информацию о пользователе, передавая идентификатор пользователя в функцию получения данных о пользователях.
- Получить информацию о товарах категории, передавая идентификатор категории в функцию получения данных о товарах категорий.
Это действительно похоже на классическую библиотеку. Вы приходите в библиотеку, передаете библиотекарю информацию о книге (название, автор, год выпуска) и в результате получаете книгу (информацию из книги). В данном примере функция – это библиотекарь, который по переданным вами данным пойдет и принесет нужную вам книгу.
Все описанное выше – пример классического фреймворка. Так все работает и в Joomla, и в Virtuemart, и в других расширениях.
Любой CSS-фреймворк, в том числе и Bootstrap, устроен немного иначе. Здесь роль функций выполняют заранее подготовленные CSS-конструкции, а роль передаваемых данных – css-классы, css-идентификаторы и html-разметка.
Рассмотрим простейший пример: создание красивой кнопки.
Исходные данные:
<button type="button">Success</button>
- Html-кнопка Button.
- Новая кнопка должна выглядеть как кнопка.
- Цвет новой кнопки должен быть зеленым.
- Размер новой кнопки должен быть большим.
Внешний вид кнопки по умолчанию:
С исходными данными все понятно. Но как называется функция и как ее вызвать? Очень просто. Мы заменяем в шаблоне код кнопки на:
<button class="btn btn-success btn-lg" type="button">Success</button>
Т.е. добавляем CSS-класс с передаваемыми данными, которые сами являются функциями.
Разберем:
- btn – говорит фреймворку, что нужно сделать из исходного html-кода кнопку в стиле Bootstrap
- btn-success – говорит фреймворку, что нужно сделать эту кнопку зеленой (не спрашивайте в чем логика).
- btn-lg – говорит фреймворку, что нужно сделать эту кнопку большой.
В результате наша стандартная кнопка превратится в:
Предвижу вопрос: «Как я должен был понять, что нужно писать "btn btn-success btn-lg"?». Ответ прост. Это описано в документации. Знакомьтесь, Альма-матер каждого Bootstrap’щика, документация по Bootstrap.
Я бы представил ее в виде 3 основных частей:
- Документация по оформлению основной типографики (заголовки, блоки, таблицы, формы, кнопки, картинки)
- Документация по оформлению CSS-компонентов (иконки, списки, меню, хлебные крошки, разбиение на страницы, превьюшки, и др.)
- Документация по оформлению компонентов, использующих JS-скрипты (всплывающие окна, выпадающие списки, вкладки, всплывающие подсказки, аккордеоны, слайдеры и др.)
Все это представлено в очень удобном виде, с примерами, но на английском языке. Есть и русскоязычные сайты с переводом документации, но использовать их я не рекомендую, поскольку информация, представленная там, может быть уже не актуальной. Официальная документация хоть и представлена на английском языке, является интуитивно понятной и снабжена примерами по принципу «скопируй и пользуйся».
Если вы уже занимались версткой сайтов ранее, то вам будет проще представить принцип работы Bootstrap как задачу, обратную CSS-верстке.
Задача классической CSS-верстки:
- Добавить html-тегу css-класс.
- Добавить в CSS-файле этот класс и указать в нем css-стили.
Задача верстки с использованием Bootstrap Framework:
- Узнать в документации css-классы и html-структуру элемента, который требуется создать.
- Привести html-код страницы к этой структуре с этими классами.
Вот таким образом, можно представить принцип работы Bootstrap Framework. Надеюсь, что это понятно.
Как подключить Bootstrap Framework к Joomla?
В вопросе подключения фреймворка Bootstrap к Joomla есть одна особенность. Joomla, сразу после установки, содержит в себе Bootstrap Framework. Но. Версия фреймворка, используемая CMS Joomla, устаревшая, и применять ее для шаблона фронтенда настоятельно не рекомендуется. С другой стороны, админка Joomla использует Bootstrap из Joomla, который заменять не рекомендуется также настоятельно. В этом нет конфликта. Админка Joomla и фронтенд используют разные шаблоны. Это значит, ничего не мешает нам использовать разные версии Bootstrap.
Теперь про подключение. Подключить Bootstrap Framework к Joomla очень просто:
- Скачиваем архив с Bootstrap Framework c официального сайта.
- Копируем файл bootstrap.min.css из папки css архива в папку css используемого шаблона Joomla.
- Копируем файл bootstrap.min.js из папки js архива в папку js используемого шаблона Joomla.
- Копируем все файлы из папки fonts архива в папку fonts используемого шаблона Joomla. Если такой папки в шаблоне не существует, создаем ее в корневом каталоге шаблона.
- В файле index.php шаблона добавляем перед </head> следующий код:
<link rel="stylesheet" href="/templates/ВАШ_ШАБЛОН/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="/templates/ВАШ_ШАБЛОН/js/bootstrap.min.js"></script>
После этого проверяем на сайте пример с кнопкой, описанный выше. Он должен работать.
Подключение Bootstrap элементарно. Этот фреймворк может работать не только с Joomla, но и с любой другой CMS, а также с сайтами, работающими на чистом html. Единственная вещь, про которую не следует забывать – к сайту также должна быть подключена библиотека jQuery, которая должна находиться выше подключения файла скриптов Bootstrap.
Поисковые системы для ускорения загрузки сайта рекомендуют подключать js-файлы в конце страницы. Это же относится и к js-файлу Bootstrap. Данные вопрос не является критичным, но желательно следовать хорошему тону (в списке подключения выше это действие целенаправленно исключено для упрощения).
Master Bootstrap – базовый шаблон Joomla для использования Bootstrap
Каким бы хорошим не был Bootstrap Framework, он не сделает за вас всю грязную работу по созданию шаблона Joomla: создание всех файлов, в том числе xml, написания базовой разметки и минимального CSS-кода, создания позиций модулей, другие мелочи.
Чтобы не выполнять эту работу, я использую бесплатный шаблон Joomla 3, который называется Master Bootstrap. Скачать его можно по этой ссылке. В принципе, это уже готовый шаблон для Joomla 3, который содержит в себе свежий подключенный по умолчанию Bootstrap, а также множество позиций модулей и некоторые опции. При этом данный шаблон не содержит практически ничего лишнего и прост в понимании, он прекрасно подойдет для создания сайта на Joomla c нуля. В последующих уроках мы будем использовать данный шаблон, как основу, изменяя и дорабатывая его под свои нужды. Это, с одной стороны, позволит избежать массы ошибок и упущений, а с другой сэкономит нам много времени.
В следующей статье серии мы рассмотрим систему разметки Bootstrap Framework, научимся создавать фиксированные и плавающие адаптивные колонки, которые подстраиваются под мобильные устройства, и разместим в них компонент и модули Joomla. А самые нетерпеливые уже сейчас могут установить шаблон Master Bootstrap и испробовать примеры из документации.
Подписывайтесь на обновления и получайте все новые статьи на электронную почту!
