Bootstrap Pagination

I.Latar Belakang.
Membuat suatu tampilan dengan Bootsrap.

II.Alat dan Bahan.
  Laptop / PC
  W3SCHOOLS
  Sublime Text

III.Tujuan.
Agar tampilan suatu program itu responsiv.

IV.Penjelasan.

Bootstrap Pagination

Basic Pagination

Jika Anda memiliki situs web dengan banyak halaman, Anda mungkin ingin menambahkan pagination ke setiap halaman.
Untuk membuat pagination dasar, tambahkan kelas .pagination ke elemen <ul>:
Contoh

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

Active State
Tambahkan kelas .aktif untuk memberi tahu pengguna laman mana dia berada:
Contoh

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


Disabled State
Tambahkan kelas .aktif untuk memberi tahu pengguna laman mana dia berada:
Contoh

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


Pagination Sizing
Tambahkan kelas .pagination-lg untuk blok lebih besar atau .pagination-sm untuk blok yang lebih kecil:
Contoh

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

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


Breadcrumbs
Kelas .breadcrumb menunjukkan lokasi halaman saat ini dalam hirarki navigasi:
Contoh

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li>
</ul>


Contoh :

Maka outputnya :

       
V.Kesimpulan.
Kita bisa gunakan bootstrap untuk membantu kita membuat tampilan web dengan cepat.

VI.Refrensi.
   https://www.w3schools.com/bootstrap/bootstrap_typography.asp

Komentar

Postingan Populer