В этой статье мы познакомимся с основными принципами использования 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, а также множество позиций модулей и некоторые опции. При этом данный шаблон не содержит практически ничего лишнего и прост в понимании. В последующих уроках мы будем использовать данный шаблон, как основу, изменяя и дорабатывая его под свои нужды. Это, с одной стороны, позволит избежать массы ошибок и упущений, а с другой сэкономит нам много времени.

В следующей статье серии мы рассмотрим систему разметки Bootstrap Framework, научимся создавать фиксированные и плавающие адаптивные колонки, которые подстраиваются под мобильные устройства, и разместим в них компонент и модули Joomla. А самые нетерпеливые уже сейчас могут установить шаблон Master Bootstrap и испробовать примеры из документации.

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

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

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

4.92 1 1 1 1 1 4.92

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

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

Вверх