Как включить/активировать встроенный Bootstrap в Joomla 3 в своём чистом шаблоне.

Этот материал может заинтересовать тех, кто разрабатывает шаблон для Joomla 3 с нуля или хочет добавить в уже готовый сайт на joomla 3 кросбраузерности и не хочет догружать лишние файлы.

Joomla 3 включает в себя framework  от Twitter. Находиться всё это в каталоге media/jui/:

  • css - файлы стилей фрейворка
  • fonts - шрифты
  • img - наборы иконок
  • js - библиотека и скрипты jquery, плагины avascript
  • less - файлы адаптации стилей для отзывчивого дизайнв

Этот каталог является общим для всей системы, то есть может использоваться для любого шаблона, в том числе и для шаблонов администратора. Вам предлагаются готовые решения оформления и набор инструментов строительства позиций сайта. Таким образом Вы немного ограничены в дизайне. Ведь если вы будете менять стили непосредственно в этом каталоге media/jui/css/*.css, то это может повлиять и на остальные шаблоны сайта. Можно ничего не менять и всё верстать с готового набора, дизайн будет зависеть от вашей выдумки - как из готового набоа инстументов соорудить что-то своё оригинальное.

Но если хочется что-то сделать покрасивее, выходя из рамок предложенного, то Вам ничего не мешает, переписать стили в папку css в своём шаблоне, а там уже меняйте селекторы стилей как Вам угодно.

Можно также состряпать свой файл стилей, обычно это template.css и загружать его вместе со стандартным bootstrap.css.

Все это добро разместить вверху index.php

defined('_JEXEC') or die;
JLoader::import('joomla.filesystem.file');
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$user = JFactory::getUser();
$this->language = $doc->language;
$this->direction = $doc->direction;
// Getting params from template
$params = $app->getTemplate(true)->params;
//Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Add Stylesheets
JHtml::_('bootstrap.loadCss', true, $this->direction);
$doc->addStyleSheet('templates/' . $this->template . '/css/template.css');

 

Заметили, что template.css грузим после bootstrap.css. Это для того, что если какие-то стандартные стили нам не нравятся, то мы можем их переопределить их в template.css (приоритет загрузки стилей, надеюсь, помните).

За подключение Bootstrap и стилей отвечают строки JHtml::_('bootstrap.framework'); и  JHtml::_('bootstrap.loadCss', true, $this->direction);

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

$doc->addStyleSheet('templates/' . $this->template . '/css/ bootstrap.css
$doc->addStyleSheet('templates/' . $this->template . '/css/template.css');

 

Если Вы стили bootstrap.css грузите из своего шаблона, то не забудьте переписать в свой шаблон и папку img - наборы иконок, ну а там по мере разработки шаблона и остальное придётся подтянуть при необходимости, я так думаю.

Ну а библиотеки JQuery, JS-скрипты джумла сама загрузит.

Статья очень понравилась и позаимствована с mybootstrap.ru