TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć Bootstrap 5 Popovery?

1

Popover to nic innego jak większa podpowiedź pokazana w wyskakującym okienku i wskazująca na aktywowany element. Podobnie jak komponent Bootstrap tooltip, komponent popover wymaga również do pozycjonowania biblioteki JavaScript popper.min.js innej firmy. Możesz odwołać się do pełnego szablonu startowego Bootstrap, aby użyć wymaganych plików CSS i skryptów.

Samouczek Bootstrap 5 Popover

  1. Pierwsze kroki z popoverem Bootstrap
  2. Inicjowanie komponentu Bootstrap
  3. Popover na przyciskach
  4. Pozycjonowanie popover
  5. Odrzucane popover
  6. Dostosowywanie popover

1 Pierwsze kroki z Popover

Przed użyciem komponentu popover pamiętaj o następujących kwestiach:

  • Popover potrzebuje wtyczki tooltip, co oznacza, że ​​w szablonie HTML należy umieścić plik „bootstrap.min.js".
  • Potrzebuje również zewnętrznej biblioteki JavaScript „popper.min.js” do odpowiedniego pozycjonowania.
  • W Bootstrap 4 możesz użyć prekompilowanego pliku „bootstrap.bundle.min.js” zawierającego „bootstrap.min.js” i „popper.min.js”.
  • Aby poprawić wydajność ładowania strony, domyślnie popover nie będzie ładowany na stronie. Powinieneś jawnie zainicjować z elementem nadrzędnym, aby załadować popover.
  • Popover nie będzie wyświetlany, jeśli w popover nie ma tytułu ani treści.
  • Domyślny popover ukryje się tylko wtedy, gdy ponownie klikniesz wyzwolony element. W przeciwnym razie zostanie wyświetlony nawet podczas przewijania treści na stronie.
  • Odrzucane okienko popover zostanie ukryte po kliknięciu w dowolnym miejscu.

2 Inicjalizacja Popover

Podobnie jak podpowiedzi, popovery również muszą zostać zainicjowane przed użyciem. Najbardziej ogólnym sposobem jest inicjalizacja globalna, jak poniżej:

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

Jeśli widzisz, że style zakłócają kod z popoverem, możesz zdefiniować oddzielny kontener dla określonego elementu.

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

Pamiętaj o dołączeniu skryptu inicjującego zaraz po skryptach „popper.min.js” i „bootstrap.min.js”.

3 Popover na przycisku

Zacznijmy dodawać popover na elemencie przycisku:

<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>

W przypadku, gdy zainicjowałeś dla body, powinieneś dodać atrybut data-container=”body” do przycisku.

Podczas gdy podpowiedzi są wyświetlane po najechaniu kursorem, popovery są wyświetlane dopiero po kliknięciu elementu. W powyższym przykładowym kodzie kliknięcie elementu przycisku spowoduje wyświetlenie wyskakującego okienka we właściwym kierunku, jak pokazano poniżej:

Jak stworzyć Bootstrap 5 Popovery?

4 pozycjonujące popovery

Popovery można ustawić w czterech kierunkach – w lewo, w prawo, od góry i od dołu do elementu wyzwalającego. Osiąga się to za pomocą atrybutu „data-placement”, jak w poniższym kodzie:

<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>

Poniżej przedstawiono różne pozycje popoverów:

Jak stworzyć Bootstrap 5 Popovery?

5 Odrzucane Popover

Domyślnie popover pojawi się po kliknięciu elementu i zniknie po ponownym kliknięciu. Nie zniknie, gdy klikniesz losowo na stronie poza elementem. Możesz utworzyć okienko popover, które można odrzucić, korzystając z poniższego kodu:

<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>

Atrybut data-trigger = „focus” jest używany, aby popover pojawiał się / znikał po podświetleniu klawiszem tabulatora na klawiaturze.

Jak stworzyć Bootstrap 5 Popovery?

Zauważ, że tag jest używany zamiast

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów