Bootstrap 4 -paginering
Basiese paginering
As jy 'n webwerf met baie bladsye het, wil jy dalk 'n soort paginering by elke bladsy voeg.
Om 'n basiese paginering te skep, voeg die .pagination
klas by 'n <ul>
element. Voeg dan die .page-item
by elke <li>
element en 'n .page-link
klas by elke skakel binne <li>
:
Voorbeeld
<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>
Aktiewe staat
Die .active
klas word gebruik om die huidige bladsy te "uitlig":
Voorbeeld
<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
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="#">Next</a></li>
</ul>
Gestremde staat
Die .disabled
klas word gebruik vir onklikbare skakels:
Voorbeeld
<ul class="pagination">
<li class="page-item
disabled"><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>
Paginering Grootte
Pagineringsblokke kan ook 'n groter of kleiner grootte hê:
Voeg klas .pagination-lg
by vir groter blokke of .pagination-sm
vir kleiner blokke:
Voorbeeld
<ul class="pagination
pagination-lg">
<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>
<ul class="pagination pagination-sm">
<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>
Paginering-belyning
Gebruik nutsklasse om die belyning van die paginering te verander:
Voorbeeld
<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px
0">
<li class="page-item">...</li>
</ul>
<!--
Center-aligned -->
<ul class="pagination justify-content-center"
style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul
class="pagination justify-content-end" style="margin:20px 0">
<li
class="page-item">...</li>
</ul>
Wenk: Lees meer oor Bootstrap 4 Utility/Helper-klasse in ons BS4 Utilities-hoofstuk .
Broodkrummels
Nog 'n vorm vir paginering, is broodkrummels:
Die .breadcrumb
en .breadcrumb-item
klasse dui die huidige bladsy se ligging binne 'n navigasiehiërargie aan:
Voorbeeld
<ul class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Photos</a></li>
<li
class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li
class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item
active">Rome</li>
</ul>