Подключение Bootstrap к шаблону Joomla v5/6 (Часть 4)

Для чего это вообще нужно?

При создании данного руководства, местами, мы использовали ИИ, для уточнения некоторых моментов и улучшения формулировок. На просьбу обосновать с юмором полезность и даже необходимость применения bootstrap, нейросеть ответила следующим анекдотом:

>Встречаются два верстальщика. Один другому говорит:
— Слушай, тут на чистом HTML/CSS такой крутой лендинг заделал, две недели на верстку потратил!
Второй, смотрит лендинг, и  отвечает:
— Смотри, вчера на Bootstrap за пол-часа собрал примерно такой же.
— Да ну, это же неспортивно!
— "Неспортивно" это сотку бегать за минуту, и неделю тратить на адаптивность [табличной верстки](https://www.qmedia.by/blog/evolyuciya_ot_tablichnoj_vyorstki_k_novejshemu_bootstrap_4.html).

Юмор у модели конечно-же своеобразный, но в прагматизме отказать нельзя.

Bootstrap 5 в контексте Joomla

Bootstrap — это популярный фронтенд-фреймворк, предоставляющий готовые компоненты для реализации следующих возможностей:

Адаптивная сетка (Grid System)
Навигационные меню, выпадающие списки
Модальные окна, аккордеоны, вкладки
Формы, кнопки, утилитарные классы

Почему Bootstrap важен для Joomla?

Большинство стандартных расширений используют классы Bootstrap
Сторонние компоненты часто полагаются на его стили
Единый визуальный язык упрощает поддержку шаблона
Адаптивность «из коробки» для мобильных устройств

⚠️ Важно: Использование Bootstrap не является обязательным. Как уже говорилось ранее, можно разрабатывать шаблоны с нуля, используя чистый CSS. Однако это потребует дополнительных усилий для обеспечения совместимости с расширениями и адаптивности.

Таблица соответствия версий Bootstrap и Joomla

Ниже приведена таблица соответствия версий фреймворка Bootstrap, встроенных в ядро CMS Joomla, по версиям релизов.

Версия Joomla	Версия Bootstrap	Примечания
Joomla 1.0 – 2.5	-	Не использовался
Joomla 3.0 – 3.4	Bootstrap 2.3.2	Первая версия с интеграцией Bootstrap
Joomla 3.5 – 3.10	Bootstrap 3.3.7	Обновлён до версии 3.x, использовался до конца ветки 3.x
Joomla 4.0.0 – 4.1	Bootstrap 5.1.3	Обновление до Bootstrap 5 при переходе на Joomla 4
Joomla 4.2 – 4.3	Bootstrap 5.2.2	Обновление в рамках поддержки Joomla 4
Joomla 4.4	Bootstrap 5.2.3	Последнее обновление Bootstrap в ветке Joomla 4
Joomla 5.0	Bootstrap 5.3.2	Актуальная версия на момент релиза Joomla 5
Joomla 6.0+	Bootstrap 5.3.8	Обновляется в зависимости от минорных релизов Joomla

💡 Совет: При разработке шаблона для Joomla 5/6 ориентируйтесь на документацию Bootstrap 5.3, так как именно эта версия интегрирована в ядро.

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

Системный Bootstrap размещен в папке Медиа-ресурсов Joomla:

/media/vendor/bootstrap/
├── css/
│   └── bootstrap.min.css
├── js/
    └── компоненты.js

Самый точный способ определить, какая версия Bootstrap встроена в вашу версию Joomla это выполнение команды

console.log(document.querySelector('script[src*="bootstrap"]')?.src);

через консоль браузера (DevTools) в административной панели сайта. Рисунок №1

Подключаем встроенный Bootstrap

Подключать, встроенную в Joomla, версию Bootstrap будем в два этапа.

Файл стилей стилей Bootstrap мы добавим в наш joomla.asset.json и загрузим
через Менеджер Медиа-ресурсов (Web Assets Managet).

{
  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
  "name": "simple",
  "version": "1.0.4",
  "description": "This file contains details of the assets used by Simple template.",
  "license": "GPL-2.0-or-later",
  "assets": [
    {
      "name": "bootstrap.css",
      "type": "style",
      "uri": "media/vendor/bootstrap/css/bootstrap.min.css",
      "version": "5.3.8"
    },
    {
      "name": "template.simple.mainstyles",
      "description": "The default css style to use.",
      "type": "style",
      "uri": "media/templates/site/simple/css/template.css"
    },
    {
      "name": "template.simple.scripts",
      "description": "The file containing the javascript for this template.",
      "type": "script",
      "uri": "media/templates/site/simple/js/template.js",
      "attributes": {
        "defer": true
      },
      "dependencies": [
        "core"
      ]
    },
    {
      "name": "preset.simple",
      "type": "preset",
      "dependencies": [
        "bootstrap.css#style",
        "template.simple.mainstyles#style",
        "template.simple.scripts#script"
      ]
    }
  ]
}

Мы можем добавить его в наш Preset, и если мы загружаем медиа-ресрусы с помощью

$wa->usePreset('preset.simple');

то стили Bootstrap попадут в нашу страницу через загрузку этого Preset.

JavaScript Bootstrap можно загрузить аналогично, через Менеджер, но в Joomla существует более простой и менее громоздкий способ для этого, с помощью HTMLHelper.

Добавим его импорт в начало файла index.php (после других use).

use Joomla\CMS\HTML\HTMLHelper;

Для подключения совершенно всех скриптов Bootstrap, которые попали в дистрибутив Joomla всего одной строкой, добавим эту строку в index.php:

HTMLHelper::_('bootstrap.framework');

Сразу после команды загрузки стилей. В реальных проектах так загружать bootstrap не рекомендуется, потому как в страницу будет загружено много дополнительного кода, который вам, вероятно, не нужен.

Мы можем загружать только нужные нам скрипты bootstrap. Например для работы мобильного меню загрузим collapse.js при помощи:

HTMLHelper::_('bootstrap.collapse');

Для создания раскрывающегося(выпадающего) главного меню загрузим:

HTMLHelper::_('bootstrap.dropdown');

Посмотреть какие скрипты входят в состав дистрибутива можно в папке: media/vendor/bootstrap/js -

После внесения всех изменений index.php выглядит следующим образом:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.Simple
 *
 * @Copyright   (C) Futurelab LLC by Mike J.K.
 * @license     GNU General Public License версия 2 или новее; см. LICENSE.txt
 * Это сильно упрощённа, версия шаблона Joomla, предназначенная для объяснения 
 приципов построения новых шаблонов.
 **/

defined('_JEXEC') or die;

use Joomla\CMS\Factory; // Factory class: Содержит статические методы получения глобальных объектов из приложения Joomla. 
use Joomla\CMS\Language\Text;
use Joomla\CMS\HTML\HTMLHelper;

/** @var Joomla\CMS\Document\HtmlDocument $this */
$app   = Factory::getApplication(); 
$app->getDocument()->setGenerator('J-CMS');
$wa    = $this->getWebAssetManager(); // Получем ссылку на менеджер медиа-ресурсов - используется для загрузки нашего CSS  и др. в будущем 

//Файлы стилей и сриптов определены в joomla.asset.json!
//$wa->useStyle('template.simple.mainstyles');
//$wa->useScript('template.simple.scripts');
$wa->usePreset('preset.simple');
HTMLHelper::_('bootstrap.framework');

$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

// Get this template's Media path
$templatePath = '/media/templates/site/' . $this->template;
$this->addHeadLink($templatePath . '/images/favicon.ico', 'icon', 'rel', ['type' => 'image/x-icon']);
// Browsers support SVG favicons
$this->addHeadLink($templatePath . '/images/favicon.svg', 'icon', 'rel', ['type' => 'image/svg+xml']);

// Detecting Active Variables
$option   = $app->input->getCmd('option', '');
$view     = $app->input->getCmd('view', '');
$layout   = $app->input->getCmd('layout', '');
$task     = $app->input->getCmd('task', '');
$itemid   = $app->input->getCmd('Itemid', '');
$sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8');
$menu     = $app->getMenu()->getActive();
$pageclass = $menu !== null ? $menu->getParams()->get('pageclass_sfx', '') : '';

//Get params from template styling
//If you want to add your own parameters you may do so in templateDetails.xml
$testparam =  $this->params->get('testparam');

?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">
<head>
    <jdoc:include type="metas" />
    <jdoc:include type="styles" />
    <jdoc:include type="scripts" />
</head>
<body>

<!-- Заголовок сайта -->
<header class="header">
    <?php if ($this->countModules('header')) : ?>
    <div class="top-bar">
        <jdoc:include type="modules" name="header" style="raw" />
    </div>
    <?php endif; ?>
</header>

<!-- Основной контент -->
<main>
<!-- Область компонента -->
<jdoc:include type="component" />

</main>

<!-- Подвал (футер) сайта -->
<footer>     
<?php if ($this->countModules('footer')) : ?>
    <jdoc:include type="modules" name="footer" style="raw" />
<?php endif; ?>
 <p><?php echo Text::_('TPL_SIMPLE_COPYRIGHT'); ?></p>
</footer>

    <!-- Debug position -->
    <jdoc:include type="modules" name="debug" style="none" />

</body>
</html>

Если вы вн если изменения в каталоге проекта, то сверните дистрибутив в архив и выполните установку обновленного шаблона. При обновлении страницы вы практически не увидите изменений.

Проверим работу bootstrap самым элементарным образом. Создадим материал для главной страницы в которой в режиме "без редактора" запишем первый попавшийся демонстрационный пример с сайта bootstrap:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-auto">
      <!-- Горизонтально центрированный контент -->


        <button type="button" class="btn btn-primary position-relative">
          Письма <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">непрочитанные сообщения</span></span>
        </button>

        <button type="button" class="btn btn-dark position-relative">
          Метка <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
        </button>

        <button type="button" class="btn btn-primary position-relative">
          Уведомления <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">непрочитанные сообщения</span></span>
        </button>

    </div>
  </div>
  <div class="row d-flex align-items-center" style="height: 200px;">
    <div class="col-md-auto">
      <!-- Вертикально и горизонтально центрированный контент -->


    </div>
  </div>
</div>

Если у вас пустой сайт, то привяжем созданный материал к пункту меню Home, заменив им, установленные по умолчанию: "Избранные материалы".

Рисунок №2

Чтобы убрать мусор (служебную информацию) имеет смысл отключить отображение заголовков, авторов, счетчика посещений и всего прочего, что будет отвлекать нас от главного. Для этого в Параметрах поставим все переключатели в положение "Скрыть". Рисунок №3 Дополнительно на вкладке "Страница", отключаем "Заголовок на странице "

Если Bootstrap подключился корректно, то на странице вы увидите следующее:

Рисунок №4 Bootstrap работает и можно двигаться дальше.

Использовать CDN для подключения Bootstrap (если нужно)

Менеджер медиа-ресурсов может подключить Bootstrap с CDN.

$wa->registerStyle('bootstrap.css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css')
   ->registerScript('bootstrap.js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js', ['defer' => true])
   ->useStyle('bootstrap.css')
   ->useScript('bootstrap.js');

Совет: Если вы разрабатываете новый шаблон для Joomla 5, избегайте HTMLHelper::_('bootstrap...'). Ориентируйтесь на структуру index.php из Cassiopeia, где все активы управляются через WebAssets.

⚠️ Рекомендации для разработчиков шаблонов

Рекомендация	Описание
Не дублируйте Bootstrap	Joomla уже загружает Bootstrap. Повторное подключение вызовет конфликты
Используйте WebAssets	Подключайте Bootstrap через `$wa->useStyle('bootstrap.css')`
Проверяйте совместимость	При обновлении Joomla версия Bootstrap может измениться
Тестируйте шаблоны	Убедитесь, что ваш шаблон работает с актуальной версией Bootstrap

Код шаблона на GitHub

Назад: Часть 3