Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Подключение Bootstrap 4 стилей CSS в шаблон сайта Joomla

Верстать, так верстать! В этой статье рассмотрим вопрос, как подключить библиотеку CSS-стилей Bootstrap 4 в шаблон сайта Joomla. Можно установить подключение к файлам библиотеки с внешнего репозитория разработчиков, но я более склонен доверять тому, что лежит у меня на сервере, так как если мой сервер упадёт, то не важно, что там с чужим репозиторием, а если упадёт чужой репозиторий (или кто-то удалит требуемые файлы), то даже на моём работающем сайте всё рухнет. Именно по этой причине я стараюсь хранить то, что влияет на работоспособность сайта у себя на сервере.



Предварительная подготовка к подключению CSS-стилей Bootstrap 4 в шаблон сайта Joomla

Итак, перед тем, как подключать библиотеку CSS-стилей Bootstrap 4 в шаблон сайта Joomla, нужно её:

  1. Скачать (как это сделать, можно узнать по → этой ссылке).
  2. Залить на сервер (что конкретно заливать, написано по → этой ссылке).

Однако, по поводу того, куда заливать 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 можно будет переопределить, если это потребуется).

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )


Обсудить эту статью

INFO: Вы отправляете сообщение как 'Гость'