Heim > Artikel > Web-Frontend > Wie richtet man die Paginierung in Bootstrap 4 aus?

Wie richtet man die Paginierung in Bootstrap 4 aus?

王林nach vorne: 2023-09-16 10:05:021324Durchsuche

如何在 Bootstrap 4 中对齐分页？

Bootstrap 4 ist ein beliebtes Front-End-Programmierframework zum Erstellen reaktionsfähiger, für Mobilgeräte optimierter Websites. Es bietet verschiedene CSS- und JavaScript-Elemente wie Navigationsleisten, Formulare, Schaltflächen, Modalitäten usw., mit denen Sie schnell eine Website mit einem modernen und schönen Aussehen erstellen können.

Paginierungsausrichtung in Bootstrap 4 bezieht sich auf die Art und Weise, wie die Paginierungskomponenten einer Webseite positioniert sind. Die Paginierung erfolgt jedoch normalerweise zentriert. Die justify-content-*-Klassen ermöglichen eine Links- oder Rechtsausrichtung.

Methode

Es gibt viele Möglichkeiten, die Paginierung in Bootstrap 4 auszurichten -

Verwenden Sie .justify-content-*-Klassen
Verwenden Sie Text-*-Klassen

Lassen Sie uns nun jede Methode anhand von Beispielen im Detail verstehen.

Methode 1: Verwenden Sie „.justify-content-*-Klassen“

Die erste Möglichkeit, die Paginierung in Bootstrap 4 auszurichten, ist „die Verwendung von .justify-content-*-Klassen“.

Beispiel

Hier werden wir diese Methode anhand eines Schritt-für-Schritt-Beispiels umsetzen -

Schritt 1 – Stellen Sie sicher, dass die Bootstrap 4-JavaScript- und CSS-Dateien im Kopf des HTML-Dokuments enthalten sind.

Schritt 2 – Um die Paginierungskomponente zu erstellen, erstellen Sie das ff6d136ddc5fdfeffaf53ff6ee95f185-Element mithilfe der Paginierungsklasse. Fügen Sie für jede Seite ein 3499910bf9dac5ae3c52d5ede7383485-Element mit einem seitenähnlichen Link und ein 25edfb22a4f469ecb59f1190150159c6-Element mit einem seitenähnlichen Element innerhalb des ff6d136ddc5fdfeffaf53ff6ee95f185-Elements hinzu.

Schritt 3 – Sie müssen eine der folgenden Klassen zum ff6d136ddc5fdfeffaf53ff6ee95f185-Element hinzufügen, um die Paginierungskomponente links, zentriert oder rechts auszurichten –

Die Paging-Komponente verwendet den .justify-content-start-Stil zur Linksausrichtung.
Die Paginierungskomponente wird zentriert, wenn der Stil „justify-content-center“ verwendet wird.
align-pagination-end: Verschieben Sie das Paginierungselement nach rechts

Schritt 4 – Dies ist ein Beispiel dafür, wie der HTML-Code aussehen wird, wenn die Paginierung linksbündig ist –

<ul class="pagination justify-content-start">
   <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="#">Next</a>
   </li>
</ul>

Schritt 5 – Nachdem Sie die erforderlichen Klassen hinzugefügt haben, sollte die Paginierungskomponente wie erwartet ausgerichtet sein.

Schritt 6 – Der endgültige Code sieht so aus –

<!DOCTYPE html>
<html>
<head>
   <link rel= "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
      <div class="row justify-content-center">
         <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
               <li class="page-item">
                  <a class="page-link" href="#" aria-label="Previous">
                     <span aria-hidden="true">«</span>
                     <span class="sr-only">Previous</span>
                  </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="#" aria-label="Next">
                     <span aria-hidden="true">»</span>
                     <span class="sr-only">Next</span>
                  </a>
               </li>
            </ul>
         </nav>
      </div>
   </div>
</body>
</html>

Methode 2: Text-*-Klassen verwenden

Um die Paginierungskomponente jeweils links, zentriert oder rechts auszurichten, verwenden Sie . Text links, Textmitte und. Text richtige Klasse.

Beispiel

Wir werden uns nun ein Schritt-für-Schritt-Beispiel für die Umsetzung dieser Methode ansehen -

Schritt 1 – Erstellen Sie ein Container-Div-Element und geben Sie ihm die Klasse justify-content-center. Dadurch wird die Paginierung innerhalb des Containers zentriert.

<div class="justify-content-center">

Schritt 2 – Erstellen Sie ein ff6d136ddc5fdfeffaf53ff6ee95f185-Element innerhalb des Container-Div und geben Sie ihm eine Klassenpaginierung und richten Sie die Paginierungslinks an der gewünschten Seite aus (z. B. Textmitte, Textlinks, Textrechts)

<ul class="pagination text-center">

Schritt 3 – Erstellen Sie 25edfb22a4f469ecb59f1190150159c6-Elemente für jede Seitenzahl oder die vorherigen und nächsten Schaltflächen innerhalb eines ff6d136ddc5fdfeffaf53ff6ee95f185-Elements. Geben Sie die Klasse „page-item“ für jedes li-Element an.

<li class="page-item">

Schritt 4 – Erstellen Sie 3499910bf9dac5ae3c52d5ede7383485-Elemente für Schaltflächen oder Seitenzahlen in jedem 25edfb22a4f469ecb59f1190150159c6 Weisen Sie dem Element 3499910bf9dac5ae3c52d5ede7383485 die Klasse „page-link“ zu.

<a class="page-link" href="#">1</a>

Schritt 5 – Der endgültige Code sieht so aus –




   
   
   
   


   <div class="justify-content-center">
      <ul class="pagination text-center">
         <li class="page-item">
            Previous
         
         <li class="page-item">
            <a class="page-link" href="#">1</a>
         
         <li class="page-item">
            2
         
         <li class="page-item">
            3
         
         <li class="page-item">
            Next

Fazit

Durch die Nutzung der integrierten Klassen des Frameworks wird die Paginierungsausrichtung in Bootstrap 4 vereinfacht. Mithilfe des oben beschriebenen Schritt-für-Schritt-Prozesses können Sie eine voll funktionsfähige und visuell auf die Seite ausgerichtete Paginierungskomponente erstellen. Binden Sie die Bootstrap-CSS- und JavaScript-Dateien in das Projekt ein, erstellen Sie ein Navigationselement mit dem aria-label-Attribut und stellen Sie ein ungeordnetes Listenelement mit Paginierungslinks bereit. Die Textcenter-Klasse erledigt dies. Diese Strategie macht es einfach, die Farbe und Richtung der Paginierung zu ändern, ohne viel einzigartiges CSS erstellen zu müssen.

Das obige ist der detaillierte Inhalt vonWie richtet man die Paginierung in Bootstrap 4 aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css bootstrap html ul li

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：CSS-Animationseffekt zum AusblendenNächster Artikel：CSS-Animationseffekt zum Ausblenden

In Verbindung stehende Artikel

Mehr sehen