Bootstrap 3 Pagination - Tutorial Bootstrap Indonesia
Tutorial Bootstrap 3 Pagination
TrikSonic - Apa itu Pagination ? Pagination ialah suatu prosses yang mengorganisir dan menata konten atau artikel dengan membaginya menjadi halaman terpisah.
Dengan memakai Bootstrap, keperluan untuk menciptakan Pagination sanggup dilakukan atau dibentuk dengan cepat efisien dan modern.
Berikut tutorial dan referensi wacana menciptakan Pagination dengan memakai Bootstrap 3 :
Default pagination
Secara default untuk menciptakan Pagination pada bootstrap memakai class dasar yaitu .pagination yang diterapkan pada elament html
<ul> atau <ol>Contoh :
<ul class="pagination"> <li><a href="#">«</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><a href="#">6</a></li> <li><a href="#">»</a></li> </ul> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- CSS Bootstrap 3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 pagination</h2> <ul class="pagination"> <li><a href="#">«</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><a href="#">6</a></li> <li><a href="#">»</a></li> </ul> </div> </body> </html>
Ukuran Pagination
Untuk mengatur ukuran pagination pada bootstrap 3, tambahkan class
.pagination-lg (untuk ukuran besar) atau .pagination-sm (untuk ukuran kecil) pada class dasar .paginationContoh :
<nav aria-label="Page navigation"> <ul class="pagination pagination-lg"> <li><a href="#">«</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="#">»</a></li> </ul> </nav> <nav aria-label="Page navigation"> <ul class="pagination pagination-sm"> <li><a href="#">«</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="#">»</a></li> </ul> </nav> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- CSS Bootstrap 3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - Ukuran pagination</h2> <nav aria-label="Page navigation"> <ul class="pagination pagination-lg"> <li><a href="#">«</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="#">»</a></li> </ul> </nav> <nav aria-label="Page navigation"> <ul class="pagination pagination-sm"> <li><a href="#">«</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="#">»</a></li> </ul> </nav> </div> </body> </html>
Pagination status active
Untuk menampilkan sebuah pagination yang sedang aktif, tambahkan class
.active pada element <li> yang berada didalam rentang pagination.Contoh :
<nav aria-label="Page navigation"> <ul class="pagination"> <li><a href="#">«</a></li> <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="#">»</a></li> </ul> </nav> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- CSS Bootstrap 3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - pagination Aktif</h2> <nav aria-label="Page navigation"> <ul class="pagination"> <li><a href="#">«</a></li> <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="#">»</a></li> </ul> </nav> </div> </body> </html>
Pagination status disabled
Untuk menampilkan sebuah pagination yang tidak aktif atau nonaktif, tambahkan class
.disabled pada element <li> yang berada didalam rentang pagination.Contoh :
<nav aria-label="Page navigation"> <ul class="pagination pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">»</a></li> </ul> </nav> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- CSS Bootstrap 3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - pagination Disabled</h2> <nav aria-label="Page navigation"> <ul class="pagination pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">»</a></li> </ul> </nav> <p> Area nomor 2 mempunyai tampilan disabled </p> </div> </body> </html>