اینترنت همانند دریاست ، کسی که آن را نمی شناسد همانند کسی ست که شنا را نمی داند.
خوش آمدید - امروز : پنج شنبه ۳۰ شهریور ۱۳۹۶

آموزش کار با فریمورک رایگان بوت استرپ / قسمت نهم

آموزش کار با فریمورک رایگان بوت استرپ / قسمت نهم

http://ivahid.com/wp-content/uploads/2014/11/cover8.png

صفحه بندی در بوت استرپ (Bootstrap Pagination)

آیا مطالب در وب سایت شما صفحات زیادی دارد؟ نمی دانید چطور آنها را به صورت مرتب در چند صفحه نشان دهید به طوری که شماره صفحات به صورت مرتب در هر صفحه دیده بشه.

این خواسته را می توانید با استفاده از صفحه بندی بوت استرپ بر آورده کنید. برای آشنایی ونحوه استفاده از صفحه بندی بوت استرپ با ما همراه باشید.

صفحه بندی پایه
اگر شما یک وب سایت با تعداد زیادی از صفحات دارید، ممکن است مایل به اضافه کردن برخی مرتب ساز ها بر اساس صفحه بندی به هر صفحه باشید.
صفحه بندی پایه در بوت استرپ شبیه این است:

default-pagination

برای ایجاد یک صفحه بندی پایه، کلاس .pagination را به عنصر ul اضافه کنید.

مثال:

۱
۲
۳
۴
۵
۶
۷
<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)
وضعیت فعال نشان می دهد که صفحه فعلی کدام است:

bootstrap pagination

کلاس 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>

وضعیت غیر فعال
لینکی را که نمی توان روی آن کلیک کرد، غیر فعال کنید:
bootstrap pagination states

اگر یک لینک بنابر دلایلی غیر فعال است کلاس .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>

اندازه صفحه بندی
بلوک های صفحه بندی می توانند در اندازه بزرگ و یا کوچک باشند:

bootstrap pagination size

برای بلوک های بزرگ کلاس 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>

Breadcrumbs
نوع دیگری برای صفحه بندی، Breadcrumbs است:
bootstrap Breadcrumbs
کلاس breadcrumb محل صفحه فعلی را در یک سلسله مراتب navigational نشان می دهد:
مثال:

۱
۲
۳
۴
۵
۶
<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>

آموزش کار با فریمورک رایگان بوت استرپ / قسمت نهم