Basic paginare
Dacă aveți un site web cu o mulțime de pagini, ați putea dori să adăugați un fel de paginare la fiecare pagină.
Un paginare de bază în Bootstrap arată astfel:
Pentru a crea un paginare de bază, adăugați .pagination de clasă la o <ul> Element:
Exemplu
<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> Încearcă - l singur » stat activ
Starea activă arată ce este pagina curentă:
Adăugați clasa .active pentru a permite utilizatorului știu ce pagină de el / ea este pe:
Exemplu
<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> Încearcă - l singur » Disabled State
Un link cu handicap nu se poate face clic:
Adăugați clasa .disabled în cazul în care un link pentru un motiv oarecare este dezactivat:
Exemplu
<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> Încearcă - l singur » Pagination Sizing
Blocuri de paginare poate fi, de asemenea, de dimensiuni la o dimensiune mai mare sau o dimensiune mai mică:
Adăugați clasa .pagination-lg pentru blocuri mai mari sau .pagination-sm pentru blocuri mai mici:
Exemplu
<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> Încearcă - l singur » Firimituri de pâine
O altă formă de paginare, este pesmet:
.breadcrumb Clasa indică locația paginii curente în cadrul unei ierarhii de navigație:
Exemplu
<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> Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »
Completați Bootstrap de navigare de referință
Pentru o referință completă a tuturor claselor de navigare, du - te pentru a completa nostru Bootstrap de navigare de referință .