Σελίδες Πρόοδου Bootstrap 5

Βασική πλοήγηση

Αν ο ιστότοπός σας έχει πολλά σελίδες, μπορεί να θέλετε να προσθέσετε κάτι από τύπο πλοήγησης σε κάθε σελίδα.

Για να δημιουργήσετε βασική πλοήγηση, προσθέστε .pagination Προσθέστε την κλάση στο <ul> στοιχείο. Στη συνέχεια προσθέστε .page-item στο κάθε <li> στοιχείο και προσθέστε .page-link Προσθέστε την κλάση στο <li> για κάθε σύνδεσμο στο

Παράδειγμα

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">πρώτη σελίδα</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="#">Επόμενη σελίδα</a></li>
</ul>

Δοκιμάστε το προσωπικά

Κατάσταση ενεργοποίησης

.active Η κλάση χρησιμοποιείται για την "απόδοση» της τρέχουσας σελίδας:

Παράδειγμα

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">πρώτη σελίδα</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="#">Επόμενη σελίδα</a></li>
</ul>

Δοκιμάστε το προσωπικά

Κατάσταση απενεργοποίησης

.disabled Η κλάση χρησιμοποιείται για μη ενεργές συνδέσμους:

Παράδειγμα

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">πρώτη σελίδα</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="#">Επόμενη σελίδα</a></li>
</ul>

Δοκιμάστε το προσωπικά

Μέγεθος πλοήγησης

Οι διαμορφώσεις των κουμπιών πλοήγησης μπορούν να προσαρμοστούν σε μεγαλύτερο ή μικρότερο μέγεθος:

Παρακαλώ προσθέστε τύπο για μεγαλύτερες μονάδες .pagination-lg ή προσθέστε για μικρότερες μονάδες .pagination-sm Τύπος:

Παράδειγμα

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">πρώτη σελίδα</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="#">Επόμενη σελίδα</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">πρώτη σελίδα</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="#">Επόμενη σελίδα</a></li>
</ul>

Δοκιμάστε το προσωπικά

Θέση σελίδας

Χρησιμοποιήστε τη κλάση utility για να αλλάξετε τη θέση της σελίδας:

Παράδειγμα

<!-- Προεπιλεγμένο (αριστερά κατευθυνόμενος) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Κεντρικά κατευθυνόμενος -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Δεξιά κατευθυνόμενος -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

Δοκιμάστε το προσωπικά

Κουτάκια (Breadcrumbs)

Μια άλλη μορφή σελίδων είναι τα κουτάκια: (Breadcrumbs)

.breadcrumb και .breadcrumb-item Η κλάση καθορίζει τη θέση της τρέχουσας σελίδας στην δομή πλοήγησης:

Παράδειγμα

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Φωτογραφίες</a></li>
  <li class="breadcrumb-item"><a href="#">2019 Φθινόπωρο</a></li>
  <li class="breadcrumb-item"><a href="#">Κίνα</a></li>
  <li class="breadcrumb-item active">Πεκίνο</li>
</ul>

Δοκιμάστε το προσωπικά