TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur man skapar Bootstrap 5 Popovers?

1

Popover är inget annat än ett större verktygstips som visas i en popup -låda och pekar mot det utlösta elementet. I likhet med Bootstrap tooltip -komponent kräver popover -komponent också ett tredjeparts JavaScript -bibliotek popper.min.js för positionering. Du kan se den kompletta startmallen för Bootstrap för att använda nödvändiga CSS- och skriptfiler.

Handledning för Bootstrap 5 Popovers

  1. Komma igång med Bootstrap popover
  2. Initierar Bootstrap -komponent
  3. Popover på knapparna
  4. Placering av popover
  5. Avvisbar popover
  6. Anpassa popover

1 Komma igång med Popover

Kom ihåg följande innan du använder popover -komponenten:

  • Popover behöver verktygstips -plugin vilket innebär att du bör inkludera filen "bootstrap.min.js" i din HTML -mall.
  • Det behöver också ett tredjeparts JavaScript -bibliotek "popper.min.js" för lämplig positionering.
  • Med Bootstrap 4 kan du använda den förkompilerade filen "bootstrap.bundle.min.js" som innehåller "bootstrap.min.js" och "popper.min.js".
  • För att förbättra sidladdningens prestanda laddas popover som standard inte på sidan. Du bör uttryckligen initialisera med det överordnade elementet för att ladda popover.
  • Popover visas inte när det inte finns någon titel eller innehåll i popover -fönstret.
  • Standard popover kommer bara att döljas om du klickar på det utlösta elementet igen. Annars kommer det att visas även om du rullar innehållet på sidan.
  • Avvisbar popover kommer att döljas när du klickar på någonstans.

2 Initiering av Popover

Precis som verktygstips måste popovers också initieras före användning. Det mest generiska sättet är att initialisera globalt som nedan:

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

Om du ser att stilarna stör kod med pop -up kan du definiera en separat behållare för specifika element.

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

Kom ihåg att inkludera initialiseringsskriptet direkt efter "popper.min.js" och "bootstrap.min.js" -skript.

3 Popover på knappen

Låt oss börja lägga till en popover på ett knappelement:

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

Om du har initierat för body så bör du lägga till data-container = "body” -attribut till knappen.

Medan verktygstips visas när du håller muspekaren, visas popup -fönster först efter att du har klickat på elementet. I ovanstående exempelkod aktiveras popup -rutan i rätt riktning genom att klicka på knappelementet enligt nedan:

Hur man skapar Bootstrap 5 Popovers?

4 Positionering av pop -ups

Pop -ups kan placeras i fyra riktningar – vänster, höger, topp och botten till det utlösande elementet. Det uppnås med attributet "dataplacering" som koden nedan:

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

Olika placering av popover visas nedan:

Hur man skapar Bootstrap 5 Popovers?

5 Avvisbar Popover

Som standard visas popover när du klickar på elementet och försvinner när du klickar på elementet igen. Det försvinner inte när du klickade slumpmässigt på sidan utanför elementet. Du kan skapa en avvisbar popover med hjälp av koden nedan:

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

Attributet data-trigger = “focus” används så att popup-fönstret visas / försvinner vid markering med tangentbordstangentknappen.

Hur man skapar Bootstrap 5 Popovers?

Observera att taggen används istället för

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer