Bootstrap 5 sivutus
- Edellinen sivu BS5-lataaja
- Seuraava sivu BS5-listiryhmä
Perus sivutus
Jos verkkosivustollasi on paljon sivuja, saattaa olla hyödyllistä lisätä jokin sivutus jokaiselle sivulle.
Jos haluat luoda perus sivutus, lisää .pagination
Lisää luokka <ul>
elementtiin. Lisäksi lisää .page-item
jokaiselle <li>
elementtiin, ja lisää .page-link
Lisää luokka <li>
jokaiselle linkille:
Esimerkki
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">edellinen sivu</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="#">Seuraava sivu</a></li> </ul>
Aktiivinen tila
.active
Luokka käytetään "korostettu" nykyiselle sivulle:
Esimerkki
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">edellinen sivu</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</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Seuraava sivu</a></li> </ul>
Estetty tila
.disabled
Luokka käytetään klikattavia linkkejä:
Esimerkki
<ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">edellinen sivu</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="#">Seuraava sivu</a></li> </ul>
Sivutus koko
Sivutuslohkot voidaan myös muuttaa suuremmaksi tai pienemmäksi kohteeksi:
Lisää luokka suuremmille lohkoille .pagination-lg
tai lisää pienempiä lohkoja .pagination-sm
Laji:
Esimerkki
<ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">edellinen sivu</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="#">Seuraava sivu</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">edellinen sivu</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="#">Seuraava sivu</a></li> </ul>
Sivutuksen tasansointi
Muuta sivutusta tasannolla utility-luokan avulla:
Esimerkki
<!-- Oletus (vasemmalta oikealle) --> <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- Keskelle tarkoitettu --> <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- Vasemmalta oikealle --> <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul>
Leipäjyvät (Breadcrumbs)
Sivutus toinen muoto on leipäjyvät:
.breadcrumb
ja .breadcrumb-item
Luokka määrittää nykyisen sivun sijainnin navigointihierarkiassa:
Esimerkki
<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Kuvat</a></li> <li class="breadcrumb-item"><a href="#">2019 syksy</a></li> <li class="breadcrumb-item"><a href="#">Kiina</a></li> <li class="breadcrumb-item active">Peking</li> </ul>
- Edellinen sivu BS5-lataaja
- Seuraava sivu BS5-listiryhmä