آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش شماره گذاری صفحات با bootstrap

شماره گذاری با تویتربوت استرپ

در این آموزش فراخواهید گرفت که چگونه با استفاده از تویتربوت استرپ شماره گذاری کنید.

ایجاد شماره گذاری (pagination) با تویتر بوت استرپ

شماره گذاری فرایند سازمان دهی محتوا به وسیله ی تقسیم بندی آن به صفحات مجزا می باشد.

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

مثال:

خروجی مثال بالا مانند تصویر زیر خواهد بود:

Bootstrap

شماره گذاری با وضعیت هاب فعال و غیرفعال

شماره گذاری لینک های داخل تویتربوت استرپ برای محیط های مختلف مثلا وقتی که یوزر به یک پایان یا یک آغاز نزدیک می شود و یا نمایش شماره ی صفحه ی حاضر به یوزر ، می تواند به شکل دلخواه انجام شود. از گروه .disabled برای ساختن لینک های غیرقابل کلیک شدن و از .active برای نمایش صفحه ی حاضر استفاده کنید.

مثال:



خروجی مثال بالا مانند زیر می باشد:

Bootstrap
نکته:

گروه . disabled تنها لینک های غیرفعال را نمایش می دهد و عملکرد کلیک را حذف نمی کند. برای انجام این کار می توانید پیکان های فعال یا غیرفعال را با اسپن ها جابجا کنید.

تغییر اندازه های شماره گذاری:

شما می توانید برای افزایش یا کاهش منطقه ی کلیک کردن، اندازه ی شماره گذاری ها را نیز تغییر دهید. برای ایجاد شماره گذاریهای بزرگتر یا کوچکتر، گروه های اندازه گیری مربوطه مانند .pagination-lg, یا .pagination-sm را به گروه پایه ی .pagination اضافه کنید.

مثال:

خروجی مثال بالا مانند تصویر زیر خواهد بود:

Bootstrap

صفحه گذاری تویتر بوت استرپ:

گاهی اوقات ممکن است روی وب سایت به لینک های قبل و بعد احتیاج پیدا کنید تا به جای شماره گذاریهای پیچیده ای که در بالا بحث شد، یک مسیریابی ساده و سریع را به یوزر ارائه دهید. این کار با استفاده از گروه pager بوت استرپ قابل انجام می باشد.

مثال:

خروجی مثال بالا مانند زیر می باشد:

Bootstrap

هم ترازی صفحه گذاری:

به طور پیش فرض صفحه گذارها به طور افقی در مرکز تنظیم شده اند، اما شما می توانید با استفاده از گروه .previous و .next به ترتیب لینک previous را به سمت چپ و لینک next را به سمت راست تنظیم کنید.

مثال:


خروجی مثال بالا مانند زیر خواهد بود:

Bootstrap

شما می توانید همان گروه های شماره گذاری را .disabled و .active برای صفحه گذاری نیز به کار برید.

مثال:

خروجی مثال بالا مانند زیر می باشد:

Bootstrap
  • 1149
  •    1868
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .