Bootstrap 3 Pagination - Tutorial Bootstrap Indonesia
Bootstrap 3 Pagination - Tutorial Bootstrap Indonesia - Kembali lagi di blog Root Flash, Pada kesempatan kali ini admin akan membagikan artikel tentang Bootstrap 3 Pagination - Tutorial Bootstrap Indonesia, dan admin telah menyiaplkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan pada Artikel Bootstrap 3, yang kami tulis ini dapat dengan mudah anda pahami. baiklah, tidak usah berlama-lama selamat membaca.Judul : Bootstrap 3 Pagination - Tutorial Bootstrap Indonesia
link : Bootstrap 3 Pagination - Tutorial Bootstrap Indonesia
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>
Demikianlah artikel kali ini tentang Bootstrap 3 Pagination - Tutorial Bootstrap Indonesia
dengan adanya artikel Bootstrap 3 Pagination - Tutorial Bootstrap Indonesia yang admin bagikan kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan atau artikel menarik selanjutnya dan terimaksih telah berkunjung.
Anda sekarang membaca artikel Bootstrap 3 Pagination - Tutorial Bootstrap Indonesia dengan alamat link https://cararootflashandroid.blogspot.com/2014/11/bootstrap-3-pagination-tutorial.html
