Die Anleitung zu Bootstrap Pagination

View more Tutorials:

1- Pagination (die Paginierung)

Wenn Sie eine Seite mit mehreren Daten (oder etwas ähnlich) haben, ist es zu lang um auf eine einzige Seite anzuzeigen. Deshalb müssen Sie es in mehren Teilen verteilen. Jede Teil ist eine Seite. Es zeigt nur einige Daten an und Sie brauchen eine Kombination der Linken damit der Benutzer auf die nächsten Seite (oder die vorherigen Seiten) springen kann. Diese Kombination der Linke wird ein Pagination Komponent genannt (Pagination Component).
Wenn Sie etwas auf  Google durchsuchen, können Sie das  Pagination Komponent sehen:
In diesem Artikel werden wird lernen, wie wird ein Komponent  Pagination mit  Bootstrap erstellt werden können.
pagination-example
<h4 class="mb-5">Pagination example:</h4>

<nav aria-label="Search results pages">
   <ul class="pagination">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">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>
Das ist die Struktur von  Bootstrap Pagination:
In der Praxis können Sie ohne das Element  <nav> ein Komponent  Bootstrap Pagination  erstellen, aber der Rat ist, dass es verwendet werden soll.  <nav> ist wie ein Hinweis, dass es ist ein Navigationsraum und nutzlich für die Geräten wie  Screen Reader. Sie können  <nav> durch  <div role="nav"> setzen um die ähnliche Bedeutung zu schaffen.
<nav aria-label="Search results pages">
   ...
</nav>


<div role="nav" aria-label="Search results pages">
  ...
</div>

Icon

Die Elemente  "Next" oder  "Previous" können Sie durch das Symbol ersetzen aber Sie sollen den Hinweis für  Screen Reader durch die Verwendung von  ".sr-only" geben. Das Element versteckt ganz mit den allen Geräten außer Screen Reader.
pagination-icon-example
<h4 class="mb-5">Pagination example:</h4>

<nav aria-label="Page navigation example">
   <ul class="pagination">
      <li class="page-item">
         <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</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">&raquo;</span>
         <span class="sr-only">Next</span>
         </a>
      </li>
   </ul>
</nav>

2- .disable & .active

Verwenden Sie die Klasse  .active für  Pagination-item um dieses  item hervorzuheben und betonen, dass das ist die Seite, die der Benutzer gerade anschaut (die aktuelle Seite). Und verwenden Sie die Klasse  .disabled für die Links (Link) wenn Sie es deaktivieren möchten. Der Benutzer kann auf dieser Link nicht klicken.
pagination-status-example
<h4 class="mb-5">Pagination (.active & .disabled):</h4>

<nav aria-label="Something..">
   <ul class="pagination">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</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 <span class="sr-only">(current)</span></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>

3- Die Größebestimmung (Sizing)

Wenn Sie das Komponent  Pagination größer möchten, verwenden Sie die Klasse   .pagination-lg:
.pagination .pagination-lg
<h5 class="mb-2">Pagination (.pagination .pagination-lg):</h5>

<nav aria-label="Something">
   <ul class="pagination pagination-lg">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">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>
   </ul>
</nav>
 
Oder Sie brauchen eine  Pagination einbisschen kleiner, verwenden Sie die Klasse  .pagination-sm:
.pagination .pagination-sm
<h5 class="mb-2">Pagination (.pagination .pagination-sm):</h5>

<nav aria-label="Something">
   <ul class="pagination pagination-sm">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">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>
   </ul>
</nav>

4- Einstellen (justify)

Bootstrap Pagination ist eigentlich ein  Flex Container, denn sie wird  Css property {display: flex} einstellt. So können einige Utility-Klasse vom  Bootstrap Flex für  Pagination angewendet werden:
  • justify-content-start
  • justify-content-center
  • justify-content-end
  • justify-content-between
  • justify-content-around
.pagination .justify-content-center
<h6 class="mb-3">.pagination .justify-content-center</h6>

<nav aria-label="Something">
   <ul class="pagination justify-content-center bg-light">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">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>
.pagination .justify-content-end
<h6 class="mb-3">.pagination .justify-content-end</h6>

<nav aria-label="Something">
   <ul class="pagination justify-content-end bg-light">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">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>

View more Tutorials: