Bootstrap 5 sivutus

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>

Kokeile itse

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>

Kokeile itse

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>

Kokeile itse

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>

Kokeile itse

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>

Kokeile itse

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>

Kokeile itse