Friday, May 17, 2013

Menggunakan Pagination Pada CSS Bootstrap

Pagination Pada CSS Bootstrap - Pagination adalah sebuah teknik untuk lebih mempermudah user agar tidak scroll terlalu jauh saat inign menampilkan data dalam bentuk yang ratusan hingga ribuan data. Dengan Menggunakan Pagination, Maka Akan terbentuk Halaman-halaman yang berurutan untuk menampilkan data-data tersebut.

Bagi Pengguna Bootstrap, CSS yang satu ini cukup populer digunakan dalam membangun Website yang responsive, membuat pagination sepertinya adalah hal yang agak sedikit rumit, dan kali ini akan saya ulas seputar cara menggunakan pagination pada Bootstrap.

Berikut Cara Membuat Pagination dengan CSS Bootstrap :

Standar Pembuatan Pagination dengan CSS Bootstrap yaiut seperti dibawah ini:

<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<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>
<li><a href="#">Next</a></li>
</ul>
</div>

Untuk Memilih Besar kecil pagination anda dapat menambahkan class nya dengan large, small, dan mini, untuk Large ukurannya cukup besar, small lebih kecil dari ukuran defaultnya, mini lebih kecil daripada small.


<div class="pagination pagination-large">
<ul>
...
</ul>
</div>
<div class="pagination">
<ul>
...
</ul>
</div>
<div class="pagination pagination-small">
<ul>
...
</ul>
</div>
<div class="pagination pagination-mini">
<ul>
...
</ul>
</div>

Untuk mengubah Aligment atau posisi dari pagination, bisa menggunakan align centered, dan left seperti berikut ini: 



<div class="pagination pagination-centered">
...
</div>

<div class="pagination pagination-left">
...
</div>


Semoga artikel Menggunakan Pagination Pada CSS Bootstrap bermanfaat bagi Anda. Jika kamu suka dengan artikel Menggunakan Pagination Pada CSS Bootstrap ini, like dan bagikan ketemanmu.

Post a Comment

Belajar Syntax - All Right Reserved.Powered By Blogger
Edit by : Agungjies.web.id