Bootstrap 3 Pager - Tutorial Bootstrap Indonesia
Bootstrap 3 Pager - Tutorial Bootstrap Indonesia - Kembali lagi di blog Root Flash, Pada kesempatan kali ini admin akan membagikan artikel tentang Bootstrap 3 Pager - 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 Pager - Tutorial Bootstrap Indonesia
link : Bootstrap 3 Pager - Tutorial Bootstrap Indonesia
Bootstrap 3 Pager - Tutorial Bootstrap Indonesia
Tutorial Bootstrap 3 Pager
TrikSonic - Apa itu Pager Pada Bootstrap ? Pager merupakan bab dari Pagination dengan susunan dan tampilan yang sederhana.
Berikut tutorial dan teladan wacana menciptakan Pager memakai Bootstrap 3 :
Default Pager
Untuk menciptakan pager memakai bootstrap 3 diharapkan susunan dan class default biar dapat direalisasikan dengan sebagimana mestinya
Nama class default yang dipakai ialah .pager yang ditulis didalam element
<ul> atau <ol> (rekomendasi gunakan element <ul>)Contoh :
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</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 Bootstrap3 --> <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 - Pager</h2> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </div> </body> </html>
Posisi Pager
Untuk mengatur Keselarasan atau posisi pager tambahkan class
.previous (posisi kiri) dan .next (posisi kanan) kedalam element <li> yang berada didalam rentang element Pager.Contoh :
<ul class="pager"> <li class="previous"><a href="#">Previous</a></li> <li class="next"><a href="#">Next</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 Bootstrap3 --> <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 - Posisi Pager</h2> <ul class="pager"> <li class="previous"><a href="#">Previous</a></li> <li class="next"><a href="#">Next</a></li> </ul> </div> </body> </html>
Bootstrap 3 Pager dengan Status disabled
Untuk menunjukkan tampilan nonaktif atau tidak aktif tambahkan class
.disabled kedalam element <li> yang berada didalam rentang element PagerContoh :
<ul class="pager"> <li class="previous disabled"><a href="#">Previous</a></li> <li class="next"><a href="#">Next</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 Bootstrap3 --> <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 - Pager Disabled</h2> <ul class="pager"> <li class="previous disabled"><a href="#">Previous</a></li> <li class="next"><a href="#">Next</a></li> </ul> </div> </body> </html>
Demikianlah artikel kali ini tentang Bootstrap 3 Pager - Tutorial Bootstrap Indonesia
dengan adanya artikel Bootstrap 3 Pager - 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 Pager - Tutorial Bootstrap Indonesia dengan alamat link https://cararootflashandroid.blogspot.com/2014/10/bootstrap-3-pager-tutorial-bootstrap.html
