Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--کار با صفحه بندی ها (Pagination) و Pager در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت بیست ویکم آموزش در زیر قرار داده شده است.

کار با صفحه بندی ها (Pagination) و Pager در بوت استرپ                                   قسمت بیست ویکم

صفحه بندی عمومی (Basic Pagination) :

اگر وب سایت شما صفحاتی دارد که شامل آیتم های زیادی می باشد برای جلوگیری از اسکرول خوردن زیاد صفحه می توانید از صفحه بندی یا Pagination استفاده کنید

برای ایجاد صفحه بندی لیستی از آیتم هایمان ایجاد می کنیم و خصوصیت کلاس المان <ul> را برابر با pagination. قرار می دهیم

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

 

6358447652164955181.png

اندازه صفحه بندی :

برای بلاک ها یا صفحه بندی بزرگ از کلاس pagination-lg. وبرای بلاک های کوچک از کلاس pagination-sm. استفاده می کنیم

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

 

6358447659108352322.png

کلاس Pager :

پیجر نیز شکلی از صفحه بندی است که دکمه های قبلی و بعدی را فراهم می کند

برای ایجاد دکمه های previous/next کلاس pager. را به المان <ul> اضافه می کنیم

<ul class="pager">
  <li><href="#">Previous</a></li>
  <li><href="#">Next</a></li>
</ul>

 

6358447667799249413.png

برای اینکه دکمه هایمان به دو طرف صفحه بروند از کلاس previous. و next. استفاده می کنیم

<ul class="pager">
  <li class="previous"><href="#">Previous</a></li>
  <li class="next"><href="#">Next</a></li>
</ul>

 

6358447674970059554.png

پایان قسمت بیست و یکم

 ادامه آموزش در قسمت بیست ودوم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

منبع : https://www.w3schools.com

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.