tRikSonic

Bootstrap 3 Pager - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.50

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

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.