В этой статье мы познакомимся с основными принципами использования Bootstrap и подключим его к CMS Joomla.
Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 2. Основные принципы использования Bootstrap.

Если вы читаете эту статью, значит, вдохновились и решили освоить создание шаблона Joomla с адаптивным дизайном. В этой статье мы познакомимся с основными принципами использования Bootstrap и подключим его к CMS Joomla.

Как работает Bootstrap Framework?

В свое время, когда я только знакомился с данной технологией, несмотря на наличие массы информации в Интернете, мне было сложно понять что же вообще такое CSS-фреймворки. Почему-то все сайты об этом умалчивали, рассказывая непосредственно про их использование.

Вообще, фреймворк или, по-нашему, библиотека – это набор готовых функций, которые можно вызывать. Это можно описать следующей конструкцией:

Результат = Функция(Передаваемые данные)

Или:

Передаваемые данные -> [Функция] -> Результат

Примеры возьмем из интернет-магазинов:

  • Получить данные заказа, передавая идентификатор заказа в функцию получения данных о заказах.
  • Получить информацию о пользователе, передавая идентификатор пользователя в функцию получения данных о пользователях.
  • Получить информацию о товарах категории, передавая идентификатор категории в функцию получения данных о товарах категорий.

Это действительно похоже на классическую библиотеку. Вы приходите в библиотеку, передаете библиотекарю информацию о книге (название, автор, год выпуска) и в результате получаете книгу (информацию из книги). В данном примере функция – это библиотекарь, который по переданным вами данным пойдет и принесет нужную вам книгу.

Все описанное выше – пример классического фреймворка. Так все работает и в Joomla, и в Virtuemart, и в других расширениях.

Любой CSS-фреймворк, в том числе и Bootstrap, устроен немного иначе. Здесь роль функций выполняют заранее подготовленные CSS-конструкции, а роль передаваемых данных – css-классы, css-идентификаторы и html-разметка.

Рассмотрим простейший пример: создание красивой кнопки.

Исходные данные:

 

<button type="button">Success</button>

 

  • Html-кнопка Button.
  • Новая кнопка должна выглядеть как кнопка.
  • Цвет новой кнопки должен быть зеленым.
  • Размер новой кнопки должен быть большим.

Внешний вид кнопки по умолчанию:

html-кнопка

С исходными данными все понятно. Но как называется функция и как ее вызвать? Очень просто. Мы заменяем в шаблоне код кнопки на:

 

<button class="btn btn-success btn-lg" type="button">Success</button>

 

Т.е. добавляем CSS-класс с передаваемыми данными, которые сами являются функциями.

Разберем:

  • btn – говорит фреймворку, что нужно сделать из исходного html-кода кнопку в стиле Bootstrap
  • btn-success – говорит фреймворку, что нужно сделать эту кнопку зеленой (не спрашивайте в чем логика).
  • btn-lg – говорит фреймворку, что нужно сделать эту кнопку большой.

В результате наша стандартная кнопка превратится в:

Bootstrap-кнопка

Предвижу вопрос: «Как я должен был понять, что нужно писать "btn btn-success btn-lg"?». Ответ прост. Это описано в документации. Знакомьтесь, Альма-матер каждого Bootstrap’щика, документация по Bootstrap.

Я бы представил ее в виде 3 основных частей:

Все это представлено в очень удобном виде, с примерами, но на английском языке. Есть и русскоязычные сайты с переводом документации, но использовать их я не рекомендую, поскольку информация, представленная там, может быть уже не актуальной. Официальная документация хоть и представлена на английском языке, является интуитивно понятной и снабжена примерами по принципу «скопируй и пользуйся».

Если вы уже занимались версткой сайтов ранее, то вам будет проще представить принцип работы Bootstrap как задачу, обратную CSS-верстке.

Задача классической CSS-верстки:

  1. Добавить html-тегу css-класс.
  2. Добавить в CSS-файле этот класс и указать в нем css-стили.

Задача верстки с использованием Bootstrap Framework:

  1. Узнать в документации css-классы и html-структуру элемента, который требуется создать.
  2. Привести html-код страницы к этой структуре с этими классами.

Вот таким образом, можно представить принцип работы Bootstrap Framework. Надеюсь, что это понятно.

Как подключить Bootstrap Framework к Joomla?

В вопросе подключения фреймворка Bootstrap к Joomla есть одна особенность. Joomla, сразу после установки, содержит в себе Bootstrap Framework. Но. Версия фреймворка, используемая CMS Joomla, устаревшая, и применять ее для шаблона фронтенда настоятельно не рекомендуется. С другой стороны, админка Joomla использует Bootstrap из Joomla, который заменять не рекомендуется также настоятельно. В этом нет конфликта. Админка Joomla и фронтенд используют разные шаблоны. Это значит, ничего не мешает нам использовать разные версии Bootstrap.

Теперь про подключение. Подключить Bootstrap Framework к Joomla очень просто:

  1. Скачиваем архив с Bootstrap Framework c официального сайта.
  2. Копируем файл bootstrap.min.css из папки css архива в папку css используемого шаблона Joomla.
  3. Копируем файл bootstrap.min.js из папки js архива в папку js используемого шаблона Joomla.
  4. Копируем все файлы из папки fonts архива в папку fonts используемого шаблона Joomla. Если такой папки в шаблоне не существует, создаем ее в корневом каталоге шаблона.
  5. В файле 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 и испробовать примеры из документации.

Подписывайтесь на обновления и получайте все новые статьи на электронную почту!  

Об авторе
Об авторе
Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Комментарии  

+2 # Виктор 13.08.2017 16:10
Уважаемый Виталий! Благодарю за подробную и развернутую тематику с использованием Bootstrap. С уважением, Виктор Георгиевич
Ответить | Ответить с цитатой | Цитировать
0 # Дима 14.08.2018 09:03
Новая джумла 4 основана на bootsrap 4, значит фрейморк уже подключен и ничего дополнительно делать не надо?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 15.08.2018 02:48
Дима, новая Joomla 4 еще не вышла в релиз. Вот информация по вашему вопросу с официального сайта:
Цитата:
The facts

Let’s state the facts :

As of Alpha 2, the Joomla 4 backend template (Atum) is a Bootstrap 4 based template. (Note that at this point we cannot confirm any other dependencies, as soon as we have more information on this we will communicate this.)
The Joomla 4 frontend template (Cassiopeia) is a Bootstrap 4 based template
The default templates (to include the default extension layouts, as those are essentially designed against the default templates) are the ONLY part of Joomla coupled to a specific framework as it relates to UI elements; the use of system overrides will allow template builders to use any framework of their preference.
Joomla 4 will ship with Bootstrap 4 and jQuery 3, but they will not be required elements when using core functionality (some overrides may be necessary, especially for UI components, but the JavaScript API is explicitly being rewritten to not be dependent on jQuery)
Так что ответ ДА.
Ответить | Ответить с цитатой | Цитировать