Lompat ke konten Lompat ke sidebar Lompat ke footer

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 Pager

Contoh :

<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>