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

Kuinka luoda Bootstrap 5 -sivu?

2

Olet ehkä nähnyt sivutuskomponentin useimmilla blogin hakemisto- ja arkistosivuilla. Yleensä hakemistosivut näyttävät kymmenen viimeisintä artikkelia ja käyttävät sitten lataa enemmän tai numeroituja sivuja siirtyäksesi muille sivuille. Vuonna Bootstrap 5, sinun tarvitsee vain sisällyttää koodinpätkä näytön sivutuksen eri tyylejä. Huomaa, että Bootstrap on käyttöliittymä, joka tarjoaa vain sisäänrakennetun sivutuskomponentin pelkkää näyttöä varten. Sinun on koodattava itsesi lisätäksesi automaattisia sivutettuja linkkejä hakemisto- ja arkistosivuille.

Jos sivustossasi on vähemmän sivuja, jokainen linkki on helppo lisätä manuaalisesti sivunumerointiin. Mutta jos haluat isomman sivuston, jos sinulla on 500 blogipostausta, sinun on käytettävä sopivia komentosarjoja ja teeman asetuksia automaattisten linkkien lisäämiseksi sivutukseen.

Tässä opetusohjelmassa käsitellään seuraavia tapoja luoda Bootstrap -sivutus:

  1. Bootstrapin oletussivujen luominen
  2. Kuvakkeiden lisääminen edelliseen ja seuraavaan navigointiin
  3. Näytetään aktiiviset ja käytöstä poistetut linkit
  4. Eri kokoisten sivujen luominen
  5. Eri kohdistusten käyttäminen

Bootstrapin sivutuskomponentti on vain järjestämätön luettelo kohteista, kuten alla:

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav>
  • Periaatteessa sinun pitäisi käyttää

    osa sivutuksen sisällyttämiseen.

  • Sisällytä järjestämätön luettelo luokkaan .pagination.

  • Jokaisella valaistulla kohteella tulee olla ".page-item" -luokka.

  • Jokaisen linkin tulisi käyttää .page-link-luokkaa.

Oletussivunumerointi näyttää alla olevan kuvan mukaiselta:

Kuinka luoda Bootstrap 5 -sivu?

2 Kuvakkeiden lisääminen edelliselle ja seuraavalle

Sivut käyttävät oletusarvoisesti tekstiä edelliseen ja seuraavaan navigointiin. Voit käyttää kuvakkeita sen sijaan käyttämällä alla olevaa koodia.

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>

Koska näkövammaiset käyttäjät eivät voi lukea kuvakkeita, käytä näytönlukuohjelman edellistä / seuraavaa tekstiä käyttämällä vain .sr-luokkaa. Tämä ei näy selaimessa. Komponentti näyttää seuraavalta selaimessa:

Kuinka luoda Bootstrap 5 -sivu?

3 Näytetään aktiivinen linkki ja poistetaan linkki käytöstä

Voit näyttää aktiivisen linkin sivussa lisäämällä ".aktiivinen" -luokan vaadittuun luettelokohteeseen. Samalla tavalla lisää ".disabled" -luokka, jos haluat poistaa kyseisen linkin napsauttamisen käytöstä. Alla olevassa esimerkissä edellinen navigointiteksti on poistettu käytöstä ja linkki 2 näkyy aktiivisena.

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"> <a class="page-link" href="#">2 <span class="sr-only">Active Page</span></a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

Luokka ".disabled" käyttää oletusarvoista "osoitin-tapahtumat: ei" CSS-ominaisuutta. Tämä poistaa napsautuksen käytöstä hiirellä, mutta käyttäjät voivat silti korostaa linkin näppäimistövälilehden avulla ja avata linkitetyn sivun painamalla välilyöntiä. Määritettä tabindex = "-1″ käytetään poistamaan linkki käytöstä näppäimistöltä.

Alla on, kuinka aktiivinen linkki näkyy sivussa. Poistetut linkit näyttävät pysäytyskohdistimen symbolin, kun siirrät hiiren päälle.

Kuinka luoda Bootstrap 5 -sivu?

4 Suuria ja pieniä sivuja

Useimpien muiden Bootstrap 4 -komponenttien tapaan sivutus voidaan myös muuttaa suuremmaksi tai pienemmäksi. Suuremman pitäisi sisältää ".pagination-lg" -luokka ja järjestämätön luettelo, kuten alla:

<nav aria-label="Pagination"> <ul class="pagination pagination-lg"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

Ja oikein !!! Pienemmän on sisällettävä luokka ".pagination-sm":

<nav aria-label="Pagination"> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

Suurempi ja pienempi sivutuskomponentti näyttää tältä:

Kuinka luoda Bootstrap 5 -sivu?

5 Tasattu keskelle ja oikealle

Viimeinen vaihtelu on kohdistus. Oletusarvoisesti sivutuskomponentti tasataan vasemmalla puolella. Voit tehdä sen keskelle tai oikealle käyttämällä lisäluokkia. Jos haluat kohdistaa keskelle, lisää ".justtify-content-center" järjestämättömään luetteloon.

<nav aria-label="Pagination"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

Oikeaa kohdistusta varten lisää ".justtify-content-end" -luokka järjestämättömään luetteloon.

<nav aria-label="Pagination"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

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