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

بازدید: 415 بازدید

برای صفحه بندی صفحات وب سایتی که دارای صفحات متعددی است میتوانید صفحات را شماره بندی کنید.

برای شماره بندی صفحات از ویژگی pagination استفاده میکنیم.

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

با سلام خدمت کاربران عزیز وب سایت آموزشی پرنیان طرح

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

صفحه بندی اصلی (Basic Pagination):

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

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

سپس کلاس page-item. را به هر عنصر <li> و یک کلاس page-link.به هر لینک داخل <li> اضافه کنید.

یک مثال از صفحه بندی اصلی:

[php]

<div class=”container”>
<h2>Pagination</h2>
<p>To create a basic pagination, add the .pagination class to an ul element. Then add the .page-item to each li element and a .page-link class to each link inside li:</p>
<ul class=”pagination”>
<li class=”page-item”><a class=”page-link” href=”#”>Previous</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>2</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>3</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>Next</a></li>
</ul>
</div>

[/php]

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

basic pagination

حالت فعال (Active State):

حالت active برای برجسته کردن صفحه فعلی استفاده میشود.

در مثال زیر این حالت را ببینید:

[php]

<div class=”container”>
<h2>Pagination – Active State</h2>
<p>Add class .active to let the user know which page he/she is on:</p>
<ul class=”pagination”>
<li class=”page-item”><a class=”page-link” href=”#”>Previous</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>
<li class=”page-item active”><a class=”page-link” href=”#”>2</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>3</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>Next</a></li>
</ul>
</div>

[/php]

تصویر حالت فعال:

active state

حالت غیر فعال (Disable State):

از کلاس disabled. برای غیر قابل کلیک کردن لینک ها استفاده میکنیم.

[php]

<div class=”container”>
<h2>Pagination – Disabled State</h2>
<p>Add class .disabled if a page for some reason is disabled:</p>
<ul class=”pagination”>
<li class=”page-item disabled”><a class=”page-link” href=”#”>Previous</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>2</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>3</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>Next</a></li>
</ul>
</div>

[/php]

حالت غیر فعال را در تصویر زیر مشاهده کنید:

disabled state

اندازه ی صفحه بندی (Pagination Sizing):

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

در مثال بلوک های بزرگ و کوچک را ایجاد کرده ایم:

[php]

<div class=”container”>
<h2>Pagination – Sizing</h2>
<p>Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.</p>

<p>Large:</p>
<ul class=”pagination pagination-lg”>
<li class=”page-item”><a class=”page-link” href=”#”>Previous</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>2</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>3</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>Next</a></li>
</ul>

<p>Default:</p>
<ul class=”pagination”>
<li class=”page-item”><a class=”page-link” href=”#”>Previous</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>2</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>3</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>Next</a></li>
</ul>

<p>Small:</p>
<ul class=”pagination pagination-sm”>
<li class=”page-item”><a class=”page-link” href=”#”>Previous</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>2</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>3</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>Next</a></li>
</ul>
</div>

[/php]

تصویر بلوک های بزرگ و کوچک:

pagination sizing

جهت صفحه بندی (Pagination Alignment):

از کلاس های ابزار استفاده کنید تا جهت صفحه بندی را تغییر دهید.

مثال:

[php]

<div class=”container”>
<h2>Pagination</h2>
<p>Use utilitiy classes to change the alignment of the pagination:</p>
<ul class=”pagination”>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>Previous</a></li>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>1</a></li>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>2</a></li>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>Next</a></li>
</ul>
<ul class=”pagination justify-content-center”>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>Previous</a></li>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>1</a></li>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>2</a></li>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>Next</a></li>
</ul>
<ul class=”pagination justify-content-end”>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>Previous</a></li>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>1</a></li>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>2</a></li>
<li class=”page-item”><a class=”page-link” href=”javascript:void(0);”>Next</a></li>
</ul>
</div>

[/php]

تصویر مثال بالا:

pagination alignment

صفحه بندی (Breadcrumbs):

یک نوع دیگر از کلاس های صفحه بندی استفاده از کلاس breadcrumb است.

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

[php]

<div class=”container”>
<h2>Breadcrumbs</h2>
<p>The .breadcrumb class indicates the current page’s location within a navigational hierarchy:</p>
<ul class=”breadcrumb”>
<li class=”breadcrumb-item”><a href=”#”>Photos</a></li>
<li class=”breadcrumb-item”><a href=”#”>Summer 2017</a></li>
<li class=”breadcrumb-item”><a href=”#”>Italy</a></li>
<li class=”breadcrumb-item active”>Rome</li>
</ul>
</div>

[/php]

خروجی مثال بالا:

breadcrumbs
دسته بندی آموزش bootstrap
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.