tab Yayasan
Jika Anda memiliki banyak halaman konten, Anda perlu menggunakan fungsi paging.
Untuk membuat fitur paging dasar membutuhkan <ul> pada elemen ditambah .pagination kategori:
contoh
<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>
Coba »
Halaman saat
Anda dapat <li> menambahkan .current kelas untuk menandai halaman saat:
contoh
<Li class = "saat ini"> <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>
Coba »
Nonaktifkan tab
Jika Anda perlu mengatur tab Anda tidak dapat diklik perlu .unavailable kategori:
contoh
<Li> <a href = "#"> 1 </ a> </ li>
<Li> <a href = "#"> 2 </ a> </ li>
<Li class = "tidak tersedia"> <a href = "#"> 3 </ a> </ li>
<Li> <a href = "#"> 4 </ a> </ li>
<Li> <a href = "#"> 5 </ a> </ li>
</ Ul>
Coba »
arah paging
Dalam kode pertama dan terakhir> <li> Tambahkan elemen .arrow entitas kelas insert HTML Symbol « dan » untuk membuat simbol arah paging:
contoh
<Li class = "panah"> <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 class = "panah"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
Pager berpusat
Kita bisa menambahkan <ul> luar <div> elemen dan <div> Add on .pagination-centered kelas untuk menerapkan paging berpusat:
contoh
<Class Ul = "pagination">
<Li class = "panah"> <a href = "#"> & laquo; </ a> </ li>
<Li class = "saat ini"> <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 class = "panah"> <a href = "#"> & raquo; </ a> </ li>
</ Ul>
</ Div>
Coba »
Breadcrumbs
struktur navigasi breadcrumbs digunakan untuk menampilkan halaman ini.
Dalam <ul> pada elemen ditambahkan .breadcrumbs kelas untuk melaksanakan remah roti. Anda dapat menambahkan <li> pada .current atau .unavailable kelas mengatur halaman saat ini dan efek tidak dapat diklik:
contoh
<Li> <a href = "#"> Rumah </ a> </ li>
<Li> <a href = "#"> Swasta </ a> </ li>
<Class Li = "tidak tersedia"> <a href = "#"> Gambar </ a> </ li>
<Class Li = "saat ini"> Liburan </ li>
</ Ul>
Coba »
sub menu
Beralih pada halaman, sub-menu ini sangat berguna.
Dalam <dl> elemen ditambahkan .sub-nav kelas untuk membuat sub-navigasi. Dalam <dt> pada elemen untuk menambahkan judul untuk opsi yang dipilih <dd> Add .active kategori:
contoh
<Dt> Filter: </ dt >
<Class Dd = "aktif"> <a href = "#"> Semua </ a> </ dd>
<Dd> <a href = "#"> Aktif </ a> </ dd>
<Dd> <a href = "#"> Tertunda </ a> </ dd>
<Dd> <a href = "#"> Suspended </ a> </ dd>
</ Ul>
Coba »