آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

بررسی اجمالی 

ما از یک بلوک بزرگ از لینک هاب متصل برای صفحه بندی استفاده می کنیم که باعث می شود لینک ها به سختی از دست رفته و به راحتی قابل مقایسه باشد در حالی که در حال فراهم کردن مناطق ضربه هستند.صفحه بندی با عناصر لیست html ساخته شده است، بنابر این خوانندگان صفحه می توانند تعداد لینک های موجود را اعلام کنند. از یک عنصر <nav> استفاده کنید تا آن را به عنوان بخش ناوبری برای نمایش خوانندگان و دیگر تکنیک های کمک رسانی شناسایی کنید.

علاوه بر این، به عنوان صفحات به احتمال زیاد دارای بیش از یک بخش ناوبری است، توصیه می شود یک برچسب apia توصیفی برای <nav> برای نشان دادن هدف آن ارائه دهد. برای مثال، اگر مولفه صفحه بندی برای حرکت بین مجموعه ای از نتایج جستجو استفاده شود، یک برچسب مناسب می تواند aria-label="Search results pages" باشد.

<nav aria-label="Page navigation example">
  <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>
</nav>

 

کار با آیکون ها 

به دنبال استفاده از نماد یا نماد در جای متن برای برخی از پیوندهای صفحه بندی؟ اطمینان حاصل کنید که پشتیبانی از صفحه نمایش مناسب را با ویژگی های aria و sr-only. فقط فراهم کنید.

 <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </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="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>

 

دولت های غیر فعال و فعال 

لینک های صفحه بندی برای شرایط مختلف قابل تنظیم است. استفاده ازdisabled. برای لینکهایی که به نظر غیر قابل کلیک و active. هستند برای نمایش صفحه فعلی استفاده می شود.

در حالی که کلاس .disabled از رویدادهای اشاره گر استفاده می کند: وجود ندارد که سعی کند قابلیت پیوند <a> را غیر فعال کند، خصوصیت CSS هنوز استاندارد نشده و برای ناوبری صفحه کلید حساب نمی شود. به همین ترتیب، شما همیشه باید tabindex = "- 1" را در لینک های غیر فعال اضافه کنید و از جاوا اسکریپت سفارشی استفاده کنید تا عملکرد آنها را کاملا غیر فعال کنید.

 <nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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 <span class="sr-only">(current)</span></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> </nav>

شما می توانید گزینه های فعال یا غیر فعال را برای <span> تعویض کنید یا لنگر را در مورد فلش های پیش / بعدی حذف کنید، برای حذف قابلیت های کلیک و جلوگیری از تمرکز صفحه کلید در حین حفظ سبک های مورد نظر تعویض کنید.

 <nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <span class="page-link">Previous</span> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"> <span class="page-link"> 2 <span class="sr-only">(current)</span> </span> </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> </nav>

 

اندازه گیری 

صفحه نمایش بزرگتر یا کوچکتر را دوست داشتید؟ pagination-lg. یا pagination-sm.برای اندازه های اضافی، اضافه کنید.

 <nav aria-label="..."> <ul class="pagination pagination-lg"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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> </ul> </nav>

 

 <nav aria-label="..."> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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> </ul> </nav>

 

هم ترازی 

هم ترازی اجزای صفحه بندی را با سرویس های flexbox تغییر دهید.

 <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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> </nav>

 

 <nav aria-label="Page navigation example"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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> </nav>