Wie passe ich Links für die Paginierung in Bootstrap an?
Bei vielen Websites stellen wir fest, dass bei der Suche nach etwas alle zugehörigen Inhalte angezeigt werden, aber wenn die Anzahl der Inhalte groß ist, wird die Website länger.
Um dies zu lösen, gibt es eine Paginierung auf der Webseite, dh die Inhalte werden in viele Seiten unterteilt und der Benutzer kann durch Klicken durch die zugehörigen Inhalte navigieren.
Hinweis: Paginierung wird verwendet, um eine Reihe verwandter Inhalte zu verwalten, die auf mehreren Seiten vorhanden sind.
Vorgehensweise: Die Paginierungsklasse wird verwendet, um die Paginierung auf der Website anzuzeigen. Verwenden Sie ein umschließendes <nav> -Element, um es als Navigationsabschnitt für Screenreader zu identifizieren. Verwenden Sie die ungeordnete Liste , um die Liste der Seiten mit Links zu erstellen.
Unten ist das Verfahren zum Implementieren einer einfachen Paginierung mit Anpassung in Bootstrap.
Schritt 1: Fügen Sie Bootstrap und jQuery CDN vor allen anderen Stylesheets in das <head> -Tag ein, um unser CSS zu laden.
<link rel=“stylesheet“ href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css“>
<script src=“https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/ popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
Schritt 2:
- Paginierungsklasse mit <ul>-Tag für ungeordnete Liste hinzufügen . Fügen Sie die Listenelemente mit Klassennamen -Seitenelementen hinzu.
- Da Seiten wahrscheinlich mehr als einen solchen Navigationsabschnitt haben, stellen Sie außerdem ein beschreibendes Arien-Label für <nav> bereit , um seinen Zweck widerzuspiegeln.
- Um die Links für jede Seite anzupassen, entfernen Sie einfach „#“ und fügen Sie den gewünschten Link hinzu.
- Verwenden Sie zum Ausrichten an der Mitte die Klasse justify-content-center in <ul> .
HTML
<nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <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>
- Fügen Sie jeder Seite eine Paginierung hinzu, um sicherzustellen, dass der Link zur vorherigen Seite um eins kleiner ist als die aktuelle Seite und der Benutzer sich leicht durch die Seiten bewegen kann.
Beispiel:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body style="text-align: center;"> <h2>GeeksforGeeks</h2><br><br> <h3>Contents of Page 3</h3> <br><br><br><br> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link" href="Page2.html">Previous</a> </li> <li class="page-item"> <a class="page-link" href="Page1.html">1</a> </li> <li class="page-item"> <a class="page-link" href="Page2.html">2</a> </li> <li class="page-item"> <a class="page-link" href="Page3.html">3</a> </li> </ul> </nav> </body> </html>
Seite1.html: Befindet sich der Benutzer auf Seite 1, enthält „nächste Seite“ einen Link zu Seite 2. Nachfolgend die Codes für die Inhalte „Seite1.html“, „Seite2.html“ und „Seite3.html“
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body style="text-align: center;"> <h2>GeeksForGeeks</h2><br><br> <h3>Contents of Page 1</h3> <br><br><br><br> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link" href="Page1.html">1</a> </li> <li class="page-item"> <a class="page-link" href="Page2.html">2</a> </li> <li class="page-item"> <a class="page-link" href="Page3.html">3</a> </li> <li class="page-item"> <a class="page-link" href="Page2.html">Next</a> </li> </ul> </nav> </body> </html>
Seite2.html: Wenn sich der Benutzer auf Seite 2 befindet, enthält die „Vorherige“ Seite einen Link zu Seite 1 und die „Nächste Seite“ einen Link zu Seite 3.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body style="text-align:center;"> <h2>GeeksforGeeks</h2><br><br> <h3>Contents of Page 2</h3> <br><br><br><br> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link" href="Page1.html"> Previous </a> </li> <li class="page-item"> <a class="page-link" href="Page1.html">1</a> </li> <li class="page-item"> <a class="page-link" href="Page2.html">2</a> </li> <li class="page-item"> <a class="page-link" href="Page3.html">3</a> </li> <li class="page-item"> <a class="page-link" href="Page3.html"> Next </a> </li> </ul> </nav> </body> </html>
Seite3.html: Befindet sich der Benutzer auf Seite 3, enthält die „Vorherige“ Seite einen Link zu Seite 2.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body style="text-align:center;"> <h2>GeeksforGeeks</h2><br><br> <h3>Contents of Page 3</h3> <br><br><br><br> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link" href="Page2.html"> Previous </a> </li> <li class="page-item"> <a class="page-link" href="Page1.html">1</a> </li> <li class="page-item"> <a class="page-link" href="Page2.html">2</a> </li> <li class="page-item"> <a class="page-link" href="Page3.html">3</a> </li> </ul> </nav> </body> </html>
Ausgabe:
