Bootstrap-Paginierung

Seitennummerierung ist der Prozess der Aufteilung des Inhalts in separate Seiten und stellt Paginierungslinks mit der mehrseitigen Paginierungskomponente bereit. Paginierung wird oft in jeder Webanwendung verwendet, die dazu dient, eine begrenzte Anzahl von Ergebnissen auf Ergebnisseiten anzuzeigen.
In diesem Tutorial werden folgende Themen erläutert, die bei der Bootstrap-Paginierung verwendet werden:

  • Standard-Paginierung
  • Deaktivierte und aktive Zustände
  • Größenbestimmung
  • Pager
  • Ausgerichtete Links
  • Optionaler deaktivierter Status
  • lesen Sie auch:

    • Bootstrap-Setup
    • Bootstrap-Typografie
    • Foundation 3-Framework
    • JQuery-Tutorials

    Die folgenden Beispiele zeigen die verschiedenen Techniken, die zur Implementierung der Paginierung verwendet werden Bootstrap. Wenn Sie Fragen zur Bootstrap-Paginierung haben, schreiben Sie diese bitte in den Kommentarbereich.

    Bootstrap-Paginierung

    Bootstrap-Standardpaginierung

    Wir können mit Bootstrap eine einfache Paginierung erstellen, indem wir die verwenden .Seitennummerierung Klasse wie im folgenden Beispiel gezeigt:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Default Pagination</h2>
    <ul  >
    	 <li><a href="#">&laquo;</a></li>
    	 <li><a href="#">1</a></li>
    	 <li><a href="#">2</a></li>
    	 <li><a href="#">3</a></li>
    	 <li><a href="#">4</a></li>
    	 <li><a href="#">5</a></li>
    	 <li><a href="#">&raquo;</a></li>
    </ul><br><br>
    <ul  >
    	 <li><a href="#">Prev</a></li>
    	 <li><a href="#">1</a></li>
    	 <li><a href="#">2</a></li>
    	 <li><a href="#">3</a></li>
    	 <li><a href="#">4</a></li>
    	 <li><a href="#">5</a></li>
    	 <li><a href="#">Next</a></li>
    </ul>
    </div>
    </body>
    </html>
    
    • Führen Sie die Beispieldemo für die Bootstrap-Standardpaginierung aus

    Beispiel für die Bootstrap-Standardpaginierung

    Deaktivierte und aktive Zustände

    Wir können den Link deaktivieren, indem wir verwenden .deaktiviert Klasse für nicht anklickbare Links, die den Hover-Effekt auf diesem Link deaktiviert und dem Benutzer mithilfe von die aktuelle Seitennummer anzeigt .aktiv Klasse. Das Folgende ist ein Beispiel:

      <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Disabled and Active States</h2>
    <ul  >
    	 <li><a href="#">&laquo;</a></li>
    	 <li><a href="#">1</a></li>
    	 <li  ><a href="#">2</a></li>
    	 <li><a href="#">3</a></li>
    	 <li><a href="#">4</a></li>
    	 <li  ><a href="#">5</a></li>
    	 <li><a href="#">&raquo;</a></li>
    </ul><br><br>
    <ul  >
    	 <li  ><a href="#">Prev</a></li>
    	 <li><a href="#">1</a></li>
    	 <li><a href="#">2</a></li>
    	 <li  ><a href="#">3</a></li>
    	 <li><a href="#">4</a></li>
    	 <li><a href="#">5</a></li>
    	 <li><a href="#">Next</a></li>
    </ul>
    </div>
    </body>
    </html>
    
    • Führen Sie eine Beispieldemo für deaktivierte und aktive Bootstrap-Zustände aus

    Beispiel für deaktivierte und aktive Bootstrap-Zustände

    Paginierungsgröße anpassen

    Wir können die Paginierung durch Hinzufügen vergrößern oder verkleinern .pagination-lg oder .pagination-sm Zu .Seitennummerierung Basisklasse wie im folgenden Beispiel gezeigt:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Larger Pagination</h2>
    <ul  >
    	 <li><a href="#">&laquo;</a></li>
    	 <li><a href="#">1</a></li>
    	 <li><a href="#">2</a></li>
    	 <li><a href="#">3</a></li>
    	 <li><a href="#">4</a></li>
    	 <li><a href="#">5</a></li>
    	 <li><a href="#">&raquo;</a></li>
    </ul><br><br>
    <h2>Smaller Pagination</h2>
    <ul  >
    	 <li><a href="#">Prev</a></li>
    	 <li><a href="#">1</a></li>
    	 <li><a href="#">2</a></li>
    	 <li><a href="#">3</a></li>
    	 <li><a href="#">4</a></li>
    	 <li><a href="#">5</a></li>
    	 <li><a href="#">Next</a></li>
    </ul>
    </div>
    </body>
    </html>
    
    • Führen Sie die Beispieldemo „Bootstrap Sizing Pagination“ aus

    Beispiel für die Paginierung der Bootstrap-Größe

    Bootstrap-Pager

    Manchmal benötigen wir möglicherweise vorherige und nächste Links oder alte und neue Links für eine einfache Navigation mit leichtem Markup und Stilen für den Benutzer, anstatt wie oben beschrieben eine komplexe Paginierung zu verwenden. Dies kann durch die Verwendung von with erfolgen .pager Klasse. Standardmäßig sind die Links zentriert. Das Folgende ist ein Beispiel für einen Standard-Pager:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Bootstrap Pager</h2>
    <ul  >
      <li><a href="#">Previous</a></li>
      <li><a href="#">Next</a></li>
    </ul><br>
    <ul  >
      <li><a href="#">Older</a></li>
      <li><a href="#">Newer</a></li>
    </ul>
    </div>
    </body>
    </html>
    
    • Führen Sie die Bootstrap-Pager-Beispieldemo aus

    Beispiel für einen Bootstrap-Pager

    Ausgerichtete Links und deaktivierte Zustände

    Standardmäßig sind die Pager-Links mittig ausgerichtet, wie im obigen Abschnitt gezeigt. Wir können den vorherigen Link nach links und den nächsten Link nach rechts ausrichten, indem wir verwenden .vorherige Und .nächste Klassen bzw. Es ist auch möglich, die oben genannten Links zu deaktivieren, indem Sie auf klicken .deaktiviert Klasse. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Alignment Links</h2>
    <ul  >
      <li  ><a href="#">&larr; Previous</a></li>
      <li  ><a href="#">Next &rarr;</a></li>
    </ul><br>
    <h2>Disabled States</h2>
    <ul  >
      <li  ><a href="#">&larr; Previous</a></li>
      <li  ><a href="#">Next &rarr;</a></li></ul>
    </div>
    </body>
    </html>
    
    • Führen Sie die Beispieldemo „Bootstrap Alignment and Disabled State“ aus

    Beispiel für Bootstrap-Ausrichtung und deaktivierten Zustand

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen