Верстать, так верстать! В этой статье рассмотрим вопрос, как подключить библиотеку CSS-стилей Bootstrap 4 в шаблон сайта Joomla. Можно установить подключение к файлам библиотеки с внешнего репозитория разработчиков, но я более склонен доверять тому, что лежит у меня на сервере, так как если мой сервер упадёт, то не важно, что там с чужим репозиторием, а если упадёт чужой репозиторий (или кто-то удалит требуемые файлы), то даже на моём работающем сайте всё рухнет. Именно по этой причине я стараюсь хранить то, что влияет на работоспособность сайта у себя на сервере.
Предварительная подготовка к подключению CSS-стилей Bootstrap 4 в шаблон сайта Joomla
Итак, перед тем, как подключать библиотеку CSS-стилей Bootstrap 4 в шаблон сайта Joomla, нужно её:
- Скачать (как это сделать, можно узнать по → этой ссылке).
- Залить на сервер (что конкретно заливать, написано по → этой ссылке).
Однако, по поводу того, куда заливать CSS-стили Bootstrap, имеет смысл рассмотреть подробнее, так как рассматриваем конкретный шаблон конкретной CMS.
Потому заливать файлы CSS-стилей Bootstrap нужно из папки css скаченного архива в папку css шаблона (а она у нас уже должна быть или её нужно создать и прописать в файле templateDetails.xml так, как описано в → этой статье).
После того, как все файлы CSS-библиотеки Bootstrap будут в папке css шаблона сайта, предварительную подготовку можно считать завершённой.
Подключение библиотеки CSS-стилей Bootstrap 4 в шаблон сайта Joomla
Итак, у нас есть собственные css-стили шаблона сайта в файле template.css. То, как их подключить в шаблон подробно описано в → этой статье.
Важно понимать то, что собственные стили имеют больший приоритет и именно они должны применяться на страницах сайта. Принцип работы CSS таков, что при прочих равных применяется последнее встретившееся свойство. Поэтому файл с собственными css-стилями шаблона сайта, находящимися в файле
template.cssдолжен находиться последним для того, чтобы все его свойства были в «самом низу». Поэтому подключение собственных стилей должно быть у тега</head>. А вот стили Bootstrap сразу над ним.
Поэтому подключение библиотеки CSS-стилей Bootstrap 4 в шаблон сайта Joomla будет выглядеть так:
<head>
<jdoc:include type="head"/>
<?php
JHtml::_('stylesheet', 'bootstrap.min.css', array('version' => 'auto', 'relative' => 'false'));
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => 'false'));
?>
</head>Где строка:
JHtml::_('stylesheet', 'bootstrap.min.css', array('version' => 'auto', 'relative' => 'false'));служит для подключения файла bootstrap.min.css.
Резюме
Именно такое расположение и последовательность подключения CSS-стилей позволяют быть уверенным в том, что стили Bootstrap будут применяться вне зависимости от того, какие стили ещё будут подтянуты в HTML-документ, а замыкающий файл template.css с собственными стилями позволит дополнять и перепрописывать все стили, которые встречаются в документе (в том числе и стили Bootstrap можно будет переопределить, если это потребуется).
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)
