Использование Bootstrap в Joomla 4
В Joomla 4 используется модульный подход для интерактивных компонентов. Рассмотрим, как правильно подключать Bootstrap 5 в Joomla 4.
Оглавление
При модульном подходе функциональность разбита на отдельные компоненты (файлы). При этом нет единого файлового подхода, как это было с Bootstrap в Joomla 3. Модульный подход в Joomla 4 был сделан для повышения эффективности и производительности. Загружаем только то, что нужно. И здесь на помощь приходят вспомогательные функции класса HTMLHelper, которые позволяют загружать отдельные Javascript компоненты Bootstrap 5.
Для создания аккордеона на Бутстрап (BS) в Joomla 4 используется несколько функций:
Добавляет поддержку bootstrap.collapse и вставляет разметку начала аккордеона.
Описание параметров при создании аккордеона (Joomla 4):
| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| parent | string | » | Если указан родительский элемент, все сворачиваемые элементы в указанном родительском элементе будут закрыты при отображении этого сворачиваемого элемента. |
| toggle | boolean | true | Переключает сворачиваемый элемент при вызове. |
| active | string | » | Устанавливает активный слайд во время загрузки. |
Открывает текущий слайд.
Описание параметров при создании слайда:
| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| #selector | string | Селектор идентификатора для слайда (без # ) | |
| text | string | Название слайда. | |
| .selector | string | » | Селектор CSS для группы аккордеона. |
Закрывает текущий слайд.
Для создания карусели на Bootstrap в Joomla 4 используйте:
Описание параметров при создании collapse (Joomla 4):
| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| parent | string | false | Если указан родительский элемент, все сворачиваемые элементы в указанном родительском элементе будут закрыты при отображении этого сворачиваемого элемента. |
| toggle | boolean | true | Переключает сворачиваемый элемент при вызове. |
Для создания модальных (всплывающих окон) на Bootstrap в Joomla 4 используйте:
Описание параметров при создании модальных окон (Joomla 4 и Bootstrap):
| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| backdrop | string | boolean | true | Включает элемент модального фона. В качестве альтернативы укажите ‘static’ для фона, который не закрывает модальное окно при щелчке. |
| keyboard | boolean | true | Закрывает модальное окно при нажатии клавиши выхода (Esc). |
| focus | boolean | true | При инициализации фокусируется на модальном окне. |
Для рендеринга содержимого в модальном окне Joomla 4 используйте:
Для создания вкладок на Бутстрап (BS5) используется несколько функций:
Добавляет поддержку bootstrap.tab и cоздает панель вкладок.
| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| active | string | » | Устанавливает активную вкладку. |
Начинает показ новой вкладки.
Закрывает содержимое текущей вкладки.
Закрывает панель вкладок.
Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 2. Основные принципы использования Bootstrap.
Если вы читаете эту статью, значит, вдохновились и решили освоить создание шаблона Joomla с адаптивным дизайном. В этой статье мы познакомимся с основными принципами использования Bootstrap и подключим его к CMS Joomla.
Как работает Bootstrap Framework?
В свое время, когда я только знакомился с данной технологией, несмотря на наличие массы информации в Интернете, мне было сложно понять что же вообще такое CSS-фреймворки. Почему-то все сайты об этом умалчивали, рассказывая непосредственно про их использование.
Вообще, фреймворк или, по-нашему, библиотека – это набор готовых функций, которые можно вызывать. Это можно описать следующей конструкцией:
Результат = Функция(Передаваемые данные)
Примеры возьмем из интернет-магазинов:
Это действительно похоже на классическую библиотеку. Вы приходите в библиотеку, передаете библиотекарю информацию о книге (название, автор, год выпуска) и в результате получаете книгу (информацию из книги). В данном примере функция – это библиотекарь, который по переданным вами данным пойдет и принесет нужную вам книгу.
Все описанное выше – пример классического фреймворка. Так все работает и в Joomla, и в Virtuemart, и в других расширениях.
Любой CSS-фреймворк, в том числе и Bootstrap, устроен немного иначе. Здесь роль функций выполняют заранее подготовленные CSS-конструкции, а роль передаваемых данных – css-классы, css-идентификаторы и html-разметка.
Рассмотрим простейший пример: создание красивой кнопки.
Внешний вид кнопки по умолчанию:
С исходными данными все понятно. Но как называется функция и как ее вызвать? Очень просто. Мы заменяем в шаблоне код кнопки на:
Т.е. добавляем CSS-класс с передаваемыми данными, которые сами являются функциями.
В результате наша стандартная кнопка превратится в:
Предвижу вопрос: «Как я должен был понять, что нужно писать «btn btn-success btn-lg»?». Ответ прост. Это описано в документации. Знакомьтесь, Альма-матер каждого Bootstrap’щика, документация по Bootstrap.
Я бы представил ее в виде 3 основных частей:
Все это представлено в очень удобном виде, с примерами, но на английском языке. Есть и русскоязычные сайты с переводом документации, но использовать их я не рекомендую, поскольку информация, представленная там, может быть уже не актуальной. Официальная документация хоть и представлена на английском языке, является интуитивно понятной и снабжена примерами по принципу «скопируй и пользуйся».
Если вы уже занимались версткой сайтов ранее, то вам будет проще представить принцип работы Bootstrap как задачу, обратную CSS-верстке.
Задача классической CSS-верстки:
Задача верстки с использованием Bootstrap Framework:
Вот таким образом, можно представить принцип работы Bootstrap Framework. Надеюсь, что это понятно.
Как подключить Bootstrap Framework к Joomla?
В вопросе подключения фреймворка Bootstrap к Joomla есть одна особенность. Joomla, сразу после установки, содержит в себе Bootstrap Framework. Но. Версия фреймворка, используемая CMS Joomla, устаревшая, и применять ее для шаблона фронтенда настоятельно не рекомендуется. С другой стороны, админка Joomla использует Bootstrap из Joomla, который заменять не рекомендуется также настоятельно. В этом нет конфликта. Админка Joomla и фронтенд используют разные шаблоны. Это значит, ничего не мешает нам использовать разные версии Bootstrap.
Теперь про подключение. Подключить Bootstrap Framework к Joomla очень просто:
После этого проверяем на сайте пример с кнопкой, описанный выше. Он должен работать.
Подключение 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, а также множество позиций модулей и некоторые опции. При этом данный шаблон не содержит практически ничего лишнего и прост в понимании, он прекрасно подойдет для создания сайта на Joomla c нуля. В последующих уроках мы будем использовать данный шаблон, как основу, изменяя и дорабатывая его под свои нужды. Это, с одной стороны, позволит избежать массы ошибок и упущений, а с другой сэкономит нам много времени.
В следующей статье серии мы рассмотрим систему разметки Bootstrap Framework, научимся создавать фиксированные и плавающие адаптивные колонки, которые подстраиваются под мобильные устройства, и разместим в них компонент и модули Joomla. А самые нетерпеливые уже сейчас могут установить шаблон Master Bootstrap и испробовать примеры из документации.
Подписывайтесь на обновления и получайте все новые статьи на электронную почту!
Подключение Bootstrap 4 стилей CSS в шаблон сайта Joomla
Верстать, так верстать! В этой статье рассмотрим вопрос, как подключить библиотеку 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-стилей Bootstrap 4 в шаблон сайта Joomla будет выглядеть так:
Простое подключение bootstrap к самым популярным движкам Joomla и WordPress
Приветствую всех читателей текущей публикации. Очень часто у начинающих веб-разработчиков возникает вопрос: «Как осуществляется Bootstrap подключение к CMS?». Поэтому чтобы дать ответы на подобные вопросы, я решил написать данную статью.
Я подробно расскажу, как подключить фреймворк к WordPress и Joomla!, объясню, что такое кастомизация и для чего она нужна. Ну что ж, приступим!
Подключение Bootstrap к Joomla
На самом деле подключение фреймворка к движкам осуществляется достаточно просто. А в ситуации с Joomla Бутстрап уже включен в сборку и подключается автоматически. Так, он используется в админпанелях движка.
Однако тут есть одно НО. Версия фреймворка, которая используется в этой CMS, устаревшая. Поэтому вам желательно подключить последнюю версию Bootstrap. И тут важно не заменить старую на новую, так как админка может полететь, а использовать их совместно (конфликта не будет).
Чтобы элементы фреймворка заработали, необходимо выполнить несколько действий:
Если вам необходимо также добавить скрипт библиотеки jQuery, то прописывайте его перед указанными скриптами.
Вот и все необходимые действия. Я привел один из самых простых и действующих способов, который не требует огромного количества настроек и шагов. В принципе, примерно идентичным образом фреймворк можно подключить к любому известному движку.
Подключение Bootstrap к WordPress
Чтобы не дублировать прошлый вариант подключения Бутстрапа, я расскажу, как пользоваться онлайн-хранилищами. Как вы уже, наверное, знаете, не обязательно скачивать файлы описываемого инструмента. Иногда достаточно воспользоваться ссылками на CDN.
Для этого в хедере файла с названием index.php вам необходимо по таким же правилам, как и в предыдущем варианте (описание стилей, скрипты js и jQuery, скрыпты Bootstrap), вставить строки:
Для CMS WordPress существует и другой способ:
Несколько слов о Customize 
В случае, когда вы точно знаете, какие элементы фреймворка вам нужны, а какие вы вообще не используете или когда изначально вам хочется поменять базовые значения параметров, стоит использовать Customize ( http://getbootstrap.com/customize/ ).
С ее помощью можно выбрать перечень компонентов, утилит, плагинов, настроек css и другие элементы из файлов Less. К примеру, можно отключить иконки и символы, известные под названием Glyphicons (если не знаете, как они выглядят, то посмотрите в Google или по этой ссылке).
К тому же в отдельных диалоговых окнах можно задать другие значения цветов, шрифтов, отступов и т.д., которые впоследствии станут параметрами по умолчанию.
На этом моя статья подошла к концу. Подписывайтесь на обновления моего обучающего блога и рассказывайте о нем друзьям. Желаю удачи! Пока-пока!
Пошаговое создание шаблона с адаптивной вёрсткой на основе Twitter Bootstrap
Вступление
Рис. Интеграция Twitter Bootstrap в Joomla шаблон
Joomla шаблоны
Как известно, Joomla делится на фронтальную часть (фронтэнд) и панель администратора («админка»). Обе части имеют свои шаблоны, они хранятся в папках:
У каждого шаблона есть своя папка. В дистрибутиве Joomla 2.5 идут два предустановленных шаблона без адаптивной верстки (Beez 2 и 5) и один шаблон фреймворка (Atomic):
Папка с админ.шаблонами выглядит точно также:
Как создать новый шаблон?
Существует три способа:
Название шаблона
Файлы и папки
Итак, создадим папку /templates/cocoate
В данной папке нам нужно создать файлы и подпапку для css стилей:
index.php
Листинг 1: index.php
templateDetails.xml
Листинг 2: templateDetails.xml
Поиск и установка шаблона
Рис. 1: Поиск шаблона cocoate
Рис. 2: Успешная установка шаблона cocoate
В процессе установки также автоматически будет создан стиль шаблона. Отметим стиль («Расширения -> Менеджер шаблонов») и назначим его стилем шаблона по умолчанию (Рисунок 3).
Рис 3: Выбираем cocoate шаблоном по умолчанию
А теперь давайте откроем фронтальную часть сайта и посмотрим что же у нас получилось (Рисунок 4).
Рис. 4: Вид сайта с новым шаблоном без стилей
Если поиграться с просмотром шаблона на различных разрешениях и на мобильных устройствах, можно заметить, что вёрстка полностью отзывчивая, однако без какого-либо пользовательского интерфейса, и это не очень хорошо, и к тому же у нас нет картинок.
Подключение файлов Twitter Bootstrap
Теперь нам нужно обязательно подключить Twitter Bootstrap в Joomla для дальнейшей работы. В рассматриваемом примере я использовал дистрибутив Twitter Bootstrap, который идёт с документацией (https://github.com/twbs/bootstrap) (Рисунок 5). Скачайте и распакуйте архив (https://github.com/twitter/bootstrap/zipball/master) и скопируйте папку /assets в папку /template/cocoate (Рисунок 6).
Рисунок 5: Официальный сайт Twitter Bootstrap
Рисунок 6: копирование или перенос папки assets
Папка /assets содержит все необходимые CSS и JavaScript файлы, в комплекте с которыми идут предустановленные изображения и иконки.
После того, как у вас появится больше опыта работы с шаблонами Joomla, вы сможете перенести необходимые Twitter Bootstrap файлы в другую папку. Но в нашем примере будет проще использовать папку /assets.
Интеграция Twitter Bootstrap в Joomla шаблон
Этот doctype является HTML5 версией и идёт в комплекте с примерами шаблонов Twitter Bootstrap.
В разделе нам нужно создать Мета-теги Joomla через вызов команды и интегрировать файлы Bootstrap.
Главная страница расположена в т.н. «подвижном контейнере» («Fluid Container»), который имеет 12 строк по умолчанию. Мы используем 9 строк для отображения компонента Joomla и 3 для правой колонки с модулями под названием «right». Правая колонка должна отображраться только если в ней есть активные модули.
Как видно из кода, подгружается фреймворк jQuery и минимальная версия Twitter Bootstrap. Листинг окончательного варианта index.php можно увидеть здесь /templates/cocoate/index.php.
Результат пока еще далек от идеала (Рисунок 7), но уже выглядит как вебсайт и. шаблон имеет адаптивную верстку. Попробуйте поиграться с изменением размера окна вашего браузера!
Рисунок 7: Первый взгляд на новый шаблон
Переопределения Joomla
Рисунок 8: переопределения HTML
Выпадающее меню
По умолчанию в Joomla нет режима выпадающего меню, но с помощью Twitter Bootstrap возможно легко реализовать эффект выпадающего меню и, конечно же, мы воспользуемся этой возможностью в рамках нашего шаблона. В целом, достаточно сложно разобраться во всех тонкостях HTML вывода модулей. В рамках данного урока мы рассмотрели существующие переопределения. Выражаю благодарность Gary Gisclair за проделанную им работу и теперь у нас есть возможность скачать шаблон (Strapped и использовать существующие переопределения. Я только скопировал папку /html целиком в папку нашего шаблона /templates/cocoate
Тестирование готового шаблона
Интеграция между Joomla и Twitter Bootstrap работает. Выпадающее меню имеет отзывчивую верстку и даже изображения автоматически меняют размер при изменении разрешения экрана. (Рисунок 10).
Рисунок 10: Адаптивная верстка, основанная на Twitter Bootstrap
Я установил пример этого шаблона на свой тестовый полигон, который можно посмотреть в действии здесь: http://joomla25.cocoate.com.