Bootstrap Pagination

অনুবাদ করেছে Abu Jubair Mahin

Bootstrap Pagination

Pagination বলতে পত্রাঙ্কন বুঝায় , সহজ ভাবে বলতে গেলে এক পেইজ থেকে অন্য পেইজে সহজ ভাবে যাওয়াকে বুঝায় ।

আপনার যদি একটা web site থাকে যাতে পেইজের সংখ্যা অনেক তাহলে আপনি প্রত্যেক পেইজে ছোট করে pagination ব্যবহার করতে পারেন ।

সাধারণত Bootstrap এ নিচের মত pagination দেখা যায়।

pagination তৈরি করার জন্য <ul> element এর ভিতরে .pagination class যুক্ত করতে হয়

উদাহরনঃ


<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 দ্বারা আপনি বর্তমানে কোণ পেইজে আছেন সেটা বোঝা যায়, আর সেটা নিচের মত দেখাবেঃ

.active ক্লাস ব্যবহার করলে, ব্যবহারকারি জানতে পারবে বর্তমানে সে কোণ পেইজে অবস্থান করছে

উদাহরনঃ


<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 ব্যবহার করলে সেটাতে ক্লিক করা সম্ভব নয়।

.disabled ক্লাস ব্যবহার করলে লিঙ্ক আর কাজ করবে না

উদাহরনঃ


<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

এটা দিয়ে Pagination blocks ছোট হবে না বড় হবে সেটা বুঝানো হয়

.pagination-lg class ব্যবহার করা হয় ব্লক বড় করার জন্য আর .pagination-sm ব্যবহার করা হয় ব্লক ছোট করার জন্য

উদাহরনঃ

বড় blocks এর জন্য


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

 

ছোট blocks এর জন্য


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

 

 

Permanent link to this article: http://bangla.sitestree.com/bootstrap-pagination/