Интерактивные компоненты Bootstrap в CMS Joomla 4

Информация о материале: Родительская категория: CMS — движки сайтов; Категория: Joomla 4

Alert (Предупреждение)
Button (Кнопка)
Carousel (Карусель)
Collapse (Сворачивание)
Dropdown (Выпадающий элемент)
Modal (Модальное окно)
Offcanvas
Popover (Всплывающие окна)
Scrollspy
Tab (Вкладка)
Tooltip (Всплывающие подсказки)
Toast
Прочее

Честный VDS/VPS, на котором «Лунная База» живет уже 20+ лет

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

Лунная База хостится на FirstVDS более 20 лет. Мыслей о том, чтобы перебраться на другой хостинг, не было ни разу (хотя опыт работы с другими вариантами, конечно, есть).

Бывали разные ситуации, но они бывают на любом железе. Главное, что нужно понять: здесь нет маркетинговой шелухи и сказок про «мы всё сделаем за вас». Если вы берете VDS — вам дают полный root, возможность накатить любую ОС и не лезут в ваши конфиги.

Если в саппорт написать с вопросом по вашему коду и получить ответ: «Читайте документацию и разбирайтесь сами» или «Обратитесь к профильному специалисту» — это не повод обижаться. Это повод углубить свои знания в DevOps и сайтостроении! Бегите от тех, кто пообещает: «Мы всё чиним и настраиваем абсолютно бесплатно!». Никто никогда не работает «по доброте душевной» в ущерб себе, а бесплатный сыр в администрировании обычно заканчивается сломанной базой данных.

Что по факту: Гибкое масштабирование ядер и RAM, экономия по сравнению с физическими серверами и адекватная панель ispmanager, если она вам нужна.

Посмотреть тарифы VDS/VPS

Alert (Предупреждение)

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.alert', '.selector');

.selector ссылается на CSS-селектор для предупреждения. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Никаких дополнительных опций не предусмотрено

Button (Кнопка)

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.button', '.selector');

.selector ссылается на CSS-селектор для кнопки. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Никаких дополнительных опций не предусмотрено

Carousel (Карусель)

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);

.selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Третий аргумент относится к опциям, доступным для карусели:

Варианты для карусели могут быть:

interval, number, по умолчанию: 5000, время задержки между автоматическим циклом элемента карусели. Если значение false, карусель не будет автоматически переключаться.
keyboard, boolean, по умолчанию: true, должна ли карусель реагировать на события клавиатуры.
pause, string|boolean, наведение курсора (hover) приостанавливает вращение карусели, если указатель мыши находится на её объекте и возобновляет вращение карусели, если указатель мыши находится в другом месте.
slide, string|boolean, по умолчанию: false. Автоматически запускает карусель после того, как пользователь вручную переключит первый элемент. Если значение = "carousel", автоматически запускает карусель при загрузке.

Collapse (Сворачивание)

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.collapse', '.selector', []);

.selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Третий аргумент относится к опциям, доступным для сворачивания:

Варианты сворачивания могут быть:

parent, string, по умолчанию: false. Если указан родитель, то все складные элементы под указанным родителем будут закрыты при отображении этого складного элемента.
toggle, boolean, по умолчанию: true. Переключает сворачиваемый элемент при вызове.

Dropdown (Выпадающий элемент)

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.dropdown', '.selector', []);

.selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Третий аргумент относится к опциям, доступным для выпадающего элемента:

Варианты выпадающего элемента могут быть:

flip, boolean, по умолчанию: true. Позволяет раскрывающемуся элементу переворачиваться в случае срабатывания.
boundary, string, по умолчанию: scrollParent. Граница ограничения overflow раскрывающегося меню.
reference, string, по умолчанию: toggle. Элемент управления выпадающего меню. Принимает toggle или parent.
display, string, по умолчанию: dynamic. По умолчанию используется Popper для динамического позиционирования. Отключение с помощью static.

Modal (Модальное окно)

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', []);

.selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Третий аргумент относится к опциям, доступным для выпадающего модального элемента:

Варианты для модального элемента могут быть:

backdrop, string|boolean, значение по умолчанию: true. Включает фоновый элемент модального окна. В качестве альтернативы, укажите static для фона, который не закрывает модальный элемент при нажатии.
keyboard, boolean, по умолчанию: true. Закрывает модальное окно при нажатии клавиши Escape.
focus, boolean, по умолчанию: true. Закрывает модальное окно при наведении.

Offcanvas

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.offcanvas', '.selector', []);

.selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Третий аргумент относится к опциям, доступным для Offcanvas:

Варианты для offcanvas могут быть:

backdrop, boolean, по умолчанию: true. Применить фон к документу, когда offcanvas открыт.
keyboard, boolean, по умолчанию: true. Закрывает offcanvas при нажатии клавиши Escape.
scroll, boolean, по умолчанию: false. Разрешить прокрутку документы, когда offcanvas открыт.

Popover (Всплывающие окна)

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.popover', '.selector', []);

.selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Третий аргумент относится к опциям, доступным для всплывающего окна:

Варианты всплывающего окна могут быть:

animation, boolean, по умолчанию: true. Применить переход CSS с плавным переходом к всплывающему окну.
container, string|boolean, по умолчанию: false. Добавляет всплывающее окно к определенному элементу. Например: body.
content, string, по умолчанию: null. Значение содержимого по умолчанию, если атрибут data-bs-content отсутствует.
delay, number, по умолчанию: 0. Задержка отображения и скрытия всплывающего окна (мс) не применяется к trigger типа manual.
html, boolean, по умолчанию: true. Вставить HTML-код во всплывающее окно. Если значение false, свойство innerText будет использоваться для вставки содержимого в DOM.
placement, string, по умолчанию: right. Как расположить всплывающее окно - auto | top | bottom | left | right. Если указано значение auto, он будет динамически переориентировать всплывающее окно.
selector, string, значение по умолчанию: false. Если предусмотрен селектор, всплывающие объекты будут делегированы указанным целевым объектам.
template, string, по умолчанию: null. Базовый шаблон HTML для использования при создании всплывающего окна.
title, string, по умолчанию: null. Значение заголовка по умолчанию, если тег title отсутствует.
trigger, string, по умолчанию: click. Как запускается всплывающее окно - click | hover | focus | manual.
offset, integer, по умолчанию: 0. Смещение всплывающего окна относительно его цели..

Scrollspy

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.scrollspy', '.selector', []);

.selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Третий аргумент относится к параметрам, доступным для scrollspy:

Параметры для Scrollspy могут быть:

offset, number. Количество пикселей, смещаемых сверху при расчете положения прокрутки.
method, string. Находит, в каком месте находится наблюдаемый элемент.
target, string. Указывает элемент для применения плагина Scrollspy.

Tab (Вкладка)

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tabs', '.selector', []);

.selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Третий аргумент относится к параметрам, доступным для вкладки:

Параметры вкладки могут быть:

тут писатель документации пошёл за пивом и, вернувшись, забил на мануал и решил залипнуть в игрухе. (Прим. переводчика)

Tooltip (Всплывающие подсказки)

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tabs', '.selector', []);

.selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Третий аргумент относится к параметрам, доступным для всплывающей подсказки:

Параметры всплывающей подсказки могут быть:

animation, boolean. Применить переход css с плавным переходом к всплывающему окну.
container, string|boolean. Добавляет всплывающее окно к определенному элементу: { container: body }
delay, number|object. Задержка отображения и скрытия всплывающего окна (мс) - не применяется к типу ручного запуска (manual trigger), если указано число, задержка применяется как к скрытию, так и к отображению структуры объекта: delay: { show: 500, hide: 100 }
html, boolean. Вставка HTML-кода во всплывающее окно. Если значение равно false, для вставки содержимого в DOM будет использоваться текстовый метод jQuery.
placement, string|function. Как расположить всплывающее окно - top | bottom | left | right.
selector, string. Если предусмотрен селектор, всплывающие объекты будут делегированы указанным целевым объектам.
template, string. Базовый HTML шаблона для использования при создании всплывающего окна.
title, string|function, по умолчанию: title. Значение, если тег title отсутствует
trigger, trigger. Как запускать всплывающее окно - hover | focus | manual.
constraints, array. Массив ограничений - передаётся в Popper.
offset, string. Смещение всплывающего окна относительно его цели.

Toast

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.toast', '.selector', []);

.selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
Третий аргумент относится к вариантам, доступным для тостов:

Варианты тостов могут быть:

animation, boolean, по умолчанию: true. Примените переход CSS-затухания к тосту.
autohide, boolean, по умолчанию: true. Автоматическое скрытие тоста.
delay, number, по умолчанию: 5000. Задержка скрытия тоста (мс)

Прочее

Accordian (аккордион) использует сворачивание для отображения панелей данных.
List Group можно объединить с вкладкой (Tab) для отображения содержимого с вкладками.

Использование компонентов Bootstrap в Joomla 4

Перевод с английского официальной документации Joomla 4:
https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4

Самый честный хостинг за 20+ лет существования Лунной Базы

Задумываешься о том, чтобы поднять свой сайт в Интернете? Уже пора подумать о том, какой хостинг выбрать?

Лунная База хостится 20+ лет на firstDVS. При этом, мыслей о том, чтобы перебраться на другой хостинг не было. (Но, при этом есть опыт работы с другими вариантами.)

Бывали с firstDVS разные ситуации, но, они бывают на всех хостингах. Единственное, что тут важно понять, - это то, что никто ничего тебе не будет впаривать... Но, и работать за тебя тоже никто не станет. Если в саппорт ответили: «Читайте по ссылке и разбирайтесь сами...» или вообще «Обратитесь за помощью к специалисту», - это повод углубить свои знания в области сайтостроения, а не бежать к тем, что пообещают: «Мы всё чиним и всё делаем за своих клиентов абсолютно бесплатно!» Никто никогда ничего ни за кого "по доброте душевной" не делал, не делает и не будет делать!

Выбрать