dasar Pagination
Jika Anda memiliki situs web dengan banyak halaman, Anda mungkin ingin menambahkan beberapa jenis pagination untuk setiap halaman.
Sebuah pagination dasar dalam Bootstrap terlihat seperti ini:
Untuk membuat pagination dasar, menambahkan .pagination kelas ke <ul> elemen:
Contoh
<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> Cobalah sendiri " Negara aktif
Keadaan aktif menunjukkan apa adalah halaman saat ini:
Menambahkan kelas .active untuk membiarkan pengguna mengetahui halaman ia / dia di:
Contoh
<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> Cobalah sendiri " Disabled State
Sebuah link cacat tidak bisa diklik:
Menambahkan kelas .disabled jika link untuk beberapa alasan dinonaktifkan:
Contoh
<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> Cobalah sendiri " Pagination Sizing
blok pagination juga dapat menjadi ukuran untuk ukuran yang lebih besar atau ukuran yang lebih kecil:
Menambahkan kelas .pagination-lg untuk blok yang lebih besar atau .pagination-sm untuk blok yang lebih kecil:
Contoh
<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> Cobalah sendiri " Remah roti
Bentuk lain untuk pagination, adalah remah roti:
The .breadcrumb kelas menunjukkan lokasi halaman saat ini dalam hirarki navigasi:
Contoh
<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> Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »
Menyelesaikan Bootstrap Navigasi Referensi
Untuk referensi yang lengkap dari semua kelas navigasi, pergi ke kami lengkap Bootstrap Navigasi Referensi .