Wie richtet man die Paginierung in Bootstrap 4 aus?

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

-Element mithilfe der Paginierungsklasse. Fügen Sie für jede Seite ein -Element mit einem seitenähnlichen Link und ein
• -Element mit einem seitenähnlichen Element innerhalb des
  -Elements hinzu.

  Schritt 3– Sie müssen eine der folgenden Klassen zum

  -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 –

   
   Previous 
   
   1 
   
   2 
   
   Next 
   

  Nach dem Login kopieren

  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 –

  Nach dem Login kopieren

  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.

  Nach dem Login kopieren

  Schritt 2– Erstellen Sie ein

  -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)

  Nach dem Login kopieren

  Schritt 3– Erstellen Sie

  • -Elemente für jede Seitenzahl oder die vorherigen und nächsten Schaltflächen innerhalb eines
    -Elements. Geben Sie die Klasse „page-item“ für jedes li-Element an.

    Nach dem Login kopieren

    Schritt 4– Erstellen Sie-Elemente für Schaltflächen oder Seitenzahlen in jedem

    • Weisen Sie dem Elementdie Klasse „page-link“ zu.

      1

      Nach dem Login kopieren

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

                         
                         
      
                          
      
                           
                          
                         
                         
      
                          
      
                           
                          
                         
       
       
      Previous

    • 1
    • 2
    • 3
    • Next