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

Kuinka luoda Bootstrap 5 Scrollspy?

18

Scrollspy on nimi, joka osoittaa tavan seurata tai vakoilla sisällön sijaintia selaimen vierityspalkin perusteella. Vaikka tästä ei yleensä ole paljon hyötyä sisällössä, se on tyylikäs tapa näyttää liikkuvat pilleripalkit navigointivalikossa. Erityisesti yhden sivun malleissa on järkevää korostaa valikko vierityspalkin sijainnin perusteella. Bootstrap tarjoaa tähän tarkoitukseen oletuskomponentin nimeltä scrollspy. Tässä opetusohjelmassa tarkastellaan lisää vierityspyörän luomisesta Bootstrap 5: n avulla.

Kuinka luoda Bootstrap 5 Scrollspy?

Bootstrap 4 Scrollspy Esimerkki

Alla on joitain scrollspy -komponentin perustarpeita ja ominaisuuksia:

  • Scrollspy on JavaScript -laajennus, joten sinun tulee sisällyttää Bootstrap -komentotiedostot, jotta scrollspy toimii.
  • Sinun pitäisi käyttää nav -komponenttia linkkien korostamiseen.
  • Yksittäiset valikkokohdat ja myös avattavan valikon kohdat on korostettu.
  • Sinun tulee käyttää "position: relative", jotta kohde voidaan jäljittää, jotta scrollspy -komponentti toimisi.
  • Kun sitä käytetään muiden elementtien kanssa kuin sisällön runko (kuten osio tai div), korkeus ja "ylivuoto-y: scroll;" olisi määriteltävä yksinomaan.

Scrollspy voidaan käyttää navigointipalkin ja luetteloryhmän osien kanssa sekä vaaka- että pystysuunnassa. Sitä voidaan käyttää myös sisäkkäisissä navigointipalkin asetuksissa. Luodaan esimerkki vierityksestä navigointikomponentin avulla.

Navigointipalkin luominen

Kuten näet esitteessä, sisällön vieritys korostaa vastaavan valikkokohdan yläosassa. Luodaan ensin valikko navigointipalkin ja nav -komponentin avulla, kuten alla oleva koodi:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-warning" id="scrollspy"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="index.html"> <img src=" logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo"> Bootstrap 4 Demo Site</a> <ul class="nav nav-pills mr-auto ml-auto"> <li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li> <li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li> <li class="nav-item"><a class="nav-link" href="#section3">Section 3</a></li>   </ul> <!-- Start Search --> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> <!-- End Search --> </nav>

Ensimmäinen askel on tunnistaa navigointipalkki yksilöllisellä tunnuksella, tässä tapauksessa olemme käyttäneet id = "scrollspy”. Toiseksi, jokainen navigointikohde tulisi linkittää yksilöllisillä tunnuksilla. Tässä olemme käyttäneet "href =#section1", "href =#section2" ja "href =#section3" kolmen valikkokohdan seurantaan.

Vieritettävän sisällön luominen

Nyt navigointipalkki on valmis yksilöllisellä tunnuksella ja yksilöllisillä linkkiviittauksilla kullekin valikkokohteelle. Luodaan div -elementti, joka sisältää kolme osaa kolmen valikkokohdan seurantaa varten.

<div data-spy="scroll" data-target="#scrollspy" data-offset="0" style="overflow-y: scroll; height: 800px; position:relative;"> <section class="sec1"> <h4 id="section1">Section 1</h4> <p>Here is a content for section 1.</p> <p>"Here is your content for section 1. Enter long content for covering 800px height".</p></section> <section class="sec2"> <h4 id="section2">Section 2</h4> <p>Here is a content for section 2.</p> <p>"Here is your content for section 2. Enter long content for covering 800px height".</p> </section> <section class="sec3"> <h4 id="section3">Section 3</h4> <p>Here is a content for section 3.</p> <p>"Here is your content for section 3. Enter long content for covering 800px height".</p> </section> </div>

Jos haluat ottaa navigointipalkin vakoilun käyttöön, käytä "data-target =#scrollspy". Tässä "#scrollspy" on navigointipalkin tunnus. Olemme käyttäneet "overflow-y: scroll;" ja määritti korkeudeksi 800 pikseliä näyttääksesi vierityspalkin div -elementtitasolla. Luo vanhemman div -elementin sisälle kolme osaa. Jokaisessa osassa on h4 -otsikko, jonka tunnus vastaa valikkokohdan tunnuksia. Esimerkiksi osion 1 h4: ssä on "id = section1", jossa jakso 1 on linkkiviite valikkokohdalle "Section 1".

Yhdistäminen

Kun navigointipalkki ja div -elementti yhdistetään Bootstrap -aloitusmalliin, luodaan yksinkertainen vierittävä sivu.


Opi Bootstrap 5 (hakemisto )


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