با سلام خدمت شمادوستان خوب وگرامی امیدوارم که سلامت باشید.امروز درمورد بوت استراپ درمورد اینکه چگونه با استفاده از تویتربوت استرپ شماره گذاری کنید کمی میآموزیم.
ایجاد شماره گذاری (pagination) با تویتر بوت استرپ
شماره گذاری فرایند سازمان دهی محتوا به وسیله ی تقسیم بندی آن به صفحات مجزا می باشد.
شماره گذاری گاهی اوقات تقریبا برای همه ی برنامه های وب استفاده می شود. برای نمونه این برنامه در موتورهای جستجو برای نمایش تعداد محدودی از نتایج روی صفحه ی جستجو یا نشان دادن تعداد محدودی از پست ها برای هر صفحه روی وبلاگ یا فروم استفاده می شود.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
<ul class=”pagination”>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>«</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>1</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>2</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>3</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>4</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>5</a></li>
<li>
<a href=”/Administrator/“http:/tahlildadeh.com/””>
»
</a>
</li>
</ul>
خروجی مثال بالا مانند تصویر زیر خواهد بود:
Bootstrap
شماره گذاری با وضعیت هاب فعال و غیرفعال
شماره گذاری لینک های داخل تویتربوت استرپ برای محیط های مختلف مثلا وقتی که یوزر به یک پایان یا یک آغاز نزدیک می شود و یا نمایش شماره ی صفحه ی حاضر به یوزر ، می تواند به شکل دلخواه انجام شود. از گروه .disabled برای ساختن لینک های غیرقابل کلیک شدن و از .active برای نمایش صفحه ی حاضر استفاده کنید.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
<ul class=”pagination”>
<li class=”disabled”><a href=”/Administrator/“http:/tahlildadeh.com””>«</a></li>
<li class=”active”><a href=”/Administrator/“http:/tahlildadeh.com””>1</a></li>
<li><a href=”http://tahlildadeh.com”>2</a></li>
<li><a href=”http://tahlildadeh.com”>3</a></li>
<li><a href=”http://tahlildadeh.com”>4</a></li>
<li><a href=”http://tahlildadeh.com”>5</a></li>
<li>
<a href=”http://tahlildadeh.com”>
‘»’
</a>
</li>
</ul>
خروجی مثال بالا مانند زیر می باشد:
Bootstrap
نکته:
گروه . disabled تنها لینک های غیرفعال را نمایش می دهد و عملکرد کلیک را حذف نمی کند. برای انجام این کار می توانید پیکان های فعال یا غیرفعال را با اسپن ها جابجا کنید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
<ul class=”pagination”>
<li class=”disabled”><span>«</span></li>
<li class=”active”><span>1</span></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com””>2</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com””>3</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com””>4</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com””>5</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com””>»</a></li>
</ul>
تغییر اندازه های شماره گذاری:
شما می توانید برای افزایش یا کاهش منطقه ی کلیک کردن، اندازه ی شماره گذاری ها را نیز تغییر دهید. برای ایجاد شماره گذاریهای بزرگتر یا کوچکتر، گروه های اندازه گیری مربوطه مانند .pagination-lg, یا .pagination-sm را به گروه پایه ی .pagination اضافه کنید.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
<div>
<ul class=”pagination pagination-lg”>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>«</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>1</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>2</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>3</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>4</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>5</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>»</a></li>
</ul>
</div>
<div>
<ul class=”pagination”>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>«</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>1</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>2</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>3</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>4</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>5</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>»</a></li>
</ul>
</div>
<div>
<ul class=”pagination pagination-sm”>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>«</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>1</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>2</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>3</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>4</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>5</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com/””>»</a></li>
</ul>
</div>
خروجی مثال بالا مانند تصویر زیر خواهد بود:
Bootstrap
صفحه گذاری تویتر بوت استرپ:
گاهی اوقات ممکن است روی وب سایت به لینک های قبل و بعد احتیاج پیدا کنید تا به جای شماره گذاریهای پیچیده ای که در بالا بحث شد، یک مسیریابی ساده و سریع را به یوزر ارائه دهید. این کار با استفاده از گروه pager بوت استرپ قابل انجام می باشد.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
<ul class=”pager”>
<li><a href=”/Administrator/“http:/tahlildadeh.com””>Previous</a></li>
<li><a href=”/Administrator/“http:/tahlildadeh.com””>Next</a></li>
</ul>
خروجی مثال بالا مانند زیر می باشد:
Bootstrap
هم ترازی صفحه گذاری:
به طور پیش فرض صفحه گذارها به طور افقی در مرکز تنظیم شده اند، اما شما می توانید با استفاده از گروه .previous و .next به ترتیب لینک previous را به سمت چپ و لینک next را به سمت راست تنظیم کنید.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
<ul class=”pager”>
<li class=”previous”><a href=”/Administrator/“http:/tahlildadeh.com””>← Previous</a></li>
<li class=”next”><a href=”/Administrator/“http:/tahlildadeh.com””>Next →</a></li>
</ul>
خروجی مثال بالا مانند زیر خواهد بود:
Bootstrap
شما می توانید همان گروه های شماره گذاری را .disabled و .active برای صفحه گذاری نیز به کار برید.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
<ul class=”pager”>
<li class=”previous disabled”><a href=”/Administrator/“http:/tahlildadeh.com””>← Previous</a></li>
<li class=”next”><a href=”/Administrator/“http:/tahlildadeh.com””>Next →</a></li>
</ul>
خروجی مثال بالا مانند زیر می باشد:
Bootstrap
