Podstawowe Pagination
Jeśli masz stronę internetową z dużą ilością stron, możesz dodać jakieś paginacji na każdej stronie.
Podstawowy podział na strony w Bootstrap wygląda następująco:
Aby utworzyć podstawowy podział na strony, dodaj .pagination klasę do <ul> element:
Przykład
<ul class="pagination">
<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>
</ul> Spróbuj sam " stan aktywny
Stan aktywny pokazuje jaka jest aktualna strona:
Dodaj klasę .active pozwolić użytkownik wie, która strona jest on / ona na:
Przykład
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Spróbuj sam " Disabled State
Niepełnosprawny link nie można kliknąć:
Dodaj klasę .disabled czy link z jakiegoś powodu jest wyłączona:
Przykład
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Spróbuj sam " Pagination Sizing
Bloki paginacji może również zostać dobrany do większego rozmiaru lub mniejszym rozmiarze:
Dodaj klasy .pagination-lg dla większych bloków lub .pagination-sm dla mniejszych bloków:
Przykład
<ul class="pagination
pagination-lg">
<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>
</ul>
<ul class="pagination pagination-sm">
<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>
</ul> Spróbuj sam " Bułka tarta
Inną formą dla paginacji jest panierka:
.breadcrumb Klasy wskazuje lokalizację bieżącej strony w obrębie hierarchii nawigacji:
Przykład
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul> Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »
Wypełnij Bootstrap nawigacji Reference
Pełną odniesienia wszystkich klas nawigacji, przejdź do naszej pełnej Bootstrap Nawigacji Reference .