Kamis, 09 Maret 2017

Bootstrap: Pagination


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Pagination dengan Bootstrap.

Pagination Dasar

Jika Anda memiliki situs web dengan banyak halaman, Anda mungkin ingin menambahkan beberapa jenis pagination untuk setiap halaman. Untuk membuat pagination dasar, tambahkan class .pagination ke elemen <ul>.

Contoh:
  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Pagination</h2>
  <p>Class .pagination memberikan link pagination:</p>                
  <ul class="pagination">
    <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>
  </ul>
</div>

</body>
</html>


Mengaktifkan State

Keadaan aktif menunjukkan halaman saat ini. Tambahkan class .active untuk membiarkan pengguna mengetahui pada halaman berapa ia berada.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Pagination - State Aktif</h2>
  <p>Tambahkan class .active untuk membiarkan pengguna mengetahui pada halaman berapa ia berada:</p>
  <ul class="pagination">
    <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="#">5</a></li>
  </ul>
</div>

</body>
</html>




Menonaktifkan State

Sebuah link cacat tidak bisa diklik. Tambahkan class .disabled jika link untuk beberapa alasan dinonaktifkan.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Pagination - Menonaktifkan State</h2>
  <p>Tambahkan class .disabled jika link untuk beberapa alasan dinonaktifkan:</p>
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="disabled"><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

</body>
</html>




Merubah Ukuran Pagination

Blok pagination juga dapat dirubah menjadi ukuran yang lebih besar atau ukuran yang lebih kecil. Tambahkan class .pagination-lg untuk blok yang lebih besar atau .pagination-sm untuk blok yang lebih kecil.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Merubah Ukuran Pagination</h2>
  <p>Tambahkan class .pagination-lg untuk blok yang lebih besar atau .pagination-sm untuk blok yang lebih kecil.</p>

  <p>Besar:</p>
  <ul class="pagination pagination-lg">
    <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>
  </ul>

  <p>Default:</p>
  <ul class="pagination pagination">
    <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>
  </ul>

  <p>Kecil:</p>
  <ul class="pagination pagination-sm">
    <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>
  </ul>
</div>

</body>
</html>




Sekian Cara Membuat Pagination dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb


EmoticonEmoticon