آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه نهم

آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه نهم

سلام خدمت دوستان عزیز، توی این مطلب درخدمتتون هستیم با آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه نهم که از وب سایت آموزش برنامه نویسی سورس باران مشاهده می نمایید. همونطور که گفته شده این دوره بصورت متنی می باشد و از منابع خارجی ترجمه شده که به صورت متنی در ادامه مطلب ارائه می شود. دوستان عزیز در این جلسه با صفحه بندی و پیجر در بوت استرپ آشنا خواهید شد.

 

 

آموزش ایجاد صفحه بندی در بوت استرپ :

 

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

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

1

برای ایجاد یک صفحه بندی ساده  کلاس .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 را اضافه کنید.

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

جهت مشاهده دمو کلیک نمایید.

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

3

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

 

 

اندازه های صفحه بندی در بوت استرپ :

جعبه (بلوک) های صفحه بندی را میشود به اندازه های مختلف در اورد :

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

 

 

آموزش پیجر بوت استرپ :

پیجر چیست : پیجر نیز نوعی صفحه بندی ست که در بخش قبل توضیح داده شد . پیجر گزینه های قبلی (previous) و بعدی (Next) (لینک) را در اختیار مان قرار میدهد

5

برای ساخت دکمه های قبلی و بعدی کلاس .pager را بع عنصر <ul> اضافه کنید :

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

 

تراز بندی دکمه ها در بوت استرپ :

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

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

 

6

برای تازه شدن دیر نیست.

موفق و پیروز باشید

 

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

پکیج آموزش طراحی وب سایت مدرسه با PHP و MySql
  • انتشار: ۱۰ اردیبهشت ۱۳۹۵

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید

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