TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити Bootstrap 5 Popovers?

1

Popover – це не що інше, як велика підказка, показана у спливаючому вікні та вказує на викликаний елемент. Подібно до компонента підказки Bootstrap, компонент popover також потребує сторонньої бібліотеки JavaScript popper.min.js для позиціонування. Ви можете звернутися до повного шаблону запуску Bootstrap для використання необхідних файлів CSS та сценаріїв.

Bootstrap 5 Popovers Tutorial

  1. Початок роботи з bootstrap popover
  2. Ініціалізація компонента Bootstrap
  3. Перехід на кнопки
  4. Позиціонування popover
  5. Заборонене скупчення
  6. Налаштування popover

1 Початок роботи з Popover

Перед використанням компонента popover пам’ятайте наступне:

  • Popover потребує підказки підказки, що означає, що ви повинні включити файл "bootstrap.min.js" у свій шаблон HTML.
  • Для відповідного позиціонування йому також потрібна стороння бібліотека JavaScript “popper.min.js".
  • У Bootstrap 4 можна використовувати попередньо скомпільований файл “bootstrap.bundle.min.js”, що містить “bootstrap.min.js” та “popper.min.js”.
  • Щоб покращити продуктивність завантаження сторінки, за замовчуванням popover не завантажуватиметься на сторінку. Вам слід явно ініціалізувати з батьківським елементом для завантаження спливаючого вікна.
  • Повернення не відображатиметься, якщо всередині спливаючого вікна немає заголовка чи вмісту.
  • Спливаюче вікно за замовчуванням буде приховано, лише якщо ви знову натиснете на запущений елемент. В іншому випадку він буде відображатися навіть при прокручуванні вмісту на сторінці.
  • Заборонене спливання буде приховано, коли ви натискаєте будь -де.

2 Ініціалізація Popover

Як і підказки, спливаючі вікна також потрібно ініціалізувати перед використанням. Найбільш загальний спосіб – це глобальна ініціалізація, як показано нижче:

<script> $(function() { $('[data-toggle="popover"]').popover() }) </script>

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

<script> $(function() { $('.example-popover').popover({ container: 'body' }) }) </script>

Не забудьте включити сценарій ініціалізації відразу після сценаріїв “popper.min.js” та “bootstrap.min.js”.

3 Popover on Button

Давайте почнемо додавати спливаюче вікно на елемент кнопки:

<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Large Button Element </button>

У випадку, якщо ви ініціалізували для body, вам слід додати до кнопки атрибут data-container = “body”.

У той час як підказки відображаються при наведенні курсора миші, спливаючі вікна відображаються лише після натискання елемента. У наведеному вище прикладі коду натискання елемента кнопки викликає спливаюче вікно у правильному напрямку, як показано нижче:

Як створити Bootstrap 5 Popovers?

4 Позиціонування Popovers

Захист може бути розміщений у чотирьох напрямках – ліворуч, праворуч, зверху та знизу до тригерного елемента. Це досягається за допомогою атрибута “розміщення даних”, такого як код нижче:

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Left </button> <button type="button" class="btn btn-danger" data-toggle="popover" data-placement="right" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Right </button> <button type="button" class="btn btn-info" data-toggle="popover" data-placement="top" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Top </button> <button type="button" class="btn btn-success" data-toggle="popover" data-placement="bottom" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Bottom </button>

Нижче показано різні варіанти розташування переходів:

Як створити Bootstrap 5 Popovers?

5 Недопустимий Поповер

За замовчуванням спливаюче вікно з’являється при натисканні на елемент і зникає при повторному натисканні на елемент. Він не зникне, якщо випадково натиснути на сторінку поза елементом. Ви можете створити неприйнятне спливаюче вікно, використовуючи код нижче:

<a tabindex="0" class="btn btn-lg btn-warning" role="button" data-toggle="popover" data-trigger="focus" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Dismissble Popover on A Tag </a>

Атрибут data-trigger = “focus” використовується для того, щоб спливаюче вікно з’являлося / зникало під час виділення за допомогою клавіші табуляції на клавіатурі.

Як створити Bootstrap 5 Popovers?

Зауважте, що тег використовується замість

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі