Tutorial Bootstrap 3 Pager
TrikSonic - Apa itu Pager Pada Bootstrap ? Pager merupakan bagian dari Pagination dengan susunan dan tampilan yang sederhana.
Berikut tutorial dan contoh tentang membuat Pager menggunakan Bootstrap 3 :
Default Pager
Untuk membuat pager menggunakan bootstrap 3 diperlukan susunan dan class default agar bisa direalisasikan dengan sebagimana mestinya
Nama class default yang digunakan adalah .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 memberikan 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>
Posting Komentar