TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5 Popovers?

3

Popover ei ole muuta kuin suurempi työkaluvihje, joka näkyy ponnahdusikkunassa ja osoittaa laukaisuelementtiä kohti. Kuten Bootstrap -työkaluvinkkikomponentti, myös popover -komponentti vaatii paikannukseen kolmannen osapuolen JavaScript -kirjaston popper.min.js. Voit käyttää kaikkia Bootstrap -käynnistysmalleja tarvittavien CSS- ja komentotiedostojen käyttämiseen.

Bootstrap 5 Popovers -opetusohjelma

  1. Bootstrap -popoverin käytön aloittaminen
  2. Alustetaan Bootstrap -osaa
  3. Popover painikkeissa
  4. Popoverin sijoittaminen
  5. Hylättävä popover
  6. Popoverin mukauttaminen

1 Popoverin käytön aloittaminen

Ennen kuin käytät popover -komponenttia, muista seuraavat asiat:

  • Popover tarvitsee työkaluvihjelaajennuksen, mikä tarkoittaa, että sinun tulee sisällyttää "bootstrap.min.js" -tiedosto HTML -malliin.
  • Se tarvitsee myös kolmannen osapuolen JavaScript -kirjaston “popper.min.js" asianmukaiseen paikannukseen.
  • Kanssa Bootstrap 4, voit käyttää esikäännetty “bootstrap.bundle.min.js” sisältävä tiedosto “bootstrap.min.js” ja “popper.min.js”.
  • Sivun lataamisen suorituskyvyn parantamiseksi popover ei lataudu oletusarvoisesti sivulle. Sinun on alustettava nimenomaan pääelementillä, jotta voit ladata popoverin.
  • Popoveria ei näytetä, jos popoverin sisällä ei ole otsikkoa tai sisältöä.
  • Oletus popover piiloutuu vain, jos napsautat käynnistettyä elementtiä uudelleen. Muussa tapauksessa se näkyy, vaikka vierität sivun sisältöä.
  • Hylättävä popover piilotetaan, kun napsautat mitä tahansa.

2 Popoverin alustus

Työkaluvihjeiden tavoin myös ponnahdusikkunat on alustettava ennen käyttöä. Yleisin tapa on alustaa maailmanlaajuisesti kuten alla:

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

Jos näet tyylien häiritsevän koodia popoverin kanssa, voit määrittää erillisen säilön tietylle elementille.

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

Muista sisällyttää alustusskripti heti "popper.min.js" – ja "bootstrap.min.js" -skriptien jälkeen.

3 Popover -painike

Aloitetaan ponnahdusikkunan lisääminen painike -elementtiin:

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

Jos olet alustanut kehon, lisää painikkeeseen data-container = “body” -attribuutti.

Vaikka työkaluvihjeet näkyvät hiiren osoittimessa, ponnahdusikkunat näytetään vasta elementin napsauttamisen jälkeen. Yllä olevassa esimerkkikoodissa painike -elementin napsauttaminen käynnistää ponnahdusikkunan oikeaan suuntaan, kuten alla on esitetty:

Kuinka luoda Bootstrap 5 Popovers?

4 Paikannussuuttimet

Ponnahduslaitteet voidaan sijoittaa neljään suuntaan – vasen, oikea, ylhäältä ja alhaalta liipaisuselementtiin. Se saavutetaan käyttämällä "data-placement" -määritettä, kuten alla olevaa koodia:

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

Popoverien eri paikat on esitetty alla:

Kuinka luoda Bootstrap 5 Popovers?

5 Irrotettava ponnahduslaite

Oletuksena ponnahdusikkuna tulee näkyviin, kun napsautat elementtiä, ja katoaa, kun napsautat elementtiä uudelleen. Se ei katoa, kun napsautat satunnaisesti elementin ulkopuolella olevaa sivua. Voit luoda hylättävän popoverin käyttämällä alla olevaa koodia:

<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” -attribuuttia käytetään niin, että popover ilmestyy / katoaa korostettaessa näppäimistön sarkainnäppäimellä.

Kuinka luoda Bootstrap 5 Popovers?

Huomaa, että tunnistetta käytetään sen sijaan

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja