سبد (0)

آموزش foundation-صفحه بندی

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

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

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

نتیجه:

خودتان امتحان کنید »

مکان فعال

برای اینکه برای کاربر مشخص کنید که در کدام صفحه قرار دارد، کلاس current. را به <li> اضافه نمایید:

مثال

<ul class="pagination">
  <li class="current"><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>

نتیجه:

خودتان امتحان کنید »

غیرفعال کردن یک شماره

در صورتی که می خواهید یک شماره(لینک) به هر علتی، غیرفعال و غیرقابل کلیک باشد، کلاس unavailable را اضافه کنید: 

مثال

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li class="unavailable"><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

نتیجه:

خودتان امتحان کنید »

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

برای ایجاد پیکان ها، کلاس arrow. را به اولین و آخرین عنصر <li> اضافه کنید، و سپس نهاد های اچ تی ام ال ;laquo& و ;raquo& را نیز اضافه نمایید:

مثال

<ul class="pagination">
  <li class="arrow"><a href="#">&laquo;</a></li>
  <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>
  <li class="arrow"><a href="#">&raquo;</a></li>
</ul>

نتیجه:

خودتان امتحان کنید »

وسط قرار دادن صفحه بندی

برای وسط قرار دادن صفحه بندی، یک عنصر <div> را به همراه کلاس pagination-centerd. به دور عنصر <ul> اضافه کنید: 

مثال

<div class="pagination-centered">
  <ul class="pagination">
    <li class="arrow"><a href="#">&laquo;</a></li>
    <li class="current"><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>
    <li class="arrow"><a href="#">&raquo;</a></li>
  </ul>
</div>

نتیجه:

خودتان امتحان کنید »

مکان جاری(breadcrumbs)

مکان جاری، درواقع مکان جاری صفحه و یا به عبارت دیگر مکان صفحه ای که شما در آن قرار دارید را مشخص می کند. 

برای ایجاد مکان جاری، کلاس breadcrumb. را به یک عنصر <ul> اضافه کنید. شما همچنین می توانید از کلاس های current. یا unavailable. درون عناصر <li> استفاده کنید:

مثال

<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li class="unavailable"><a href="#">Pictures</a></li>
  <li class="current">Vacation</li> 
</ul>

نتیجه:

خودتان امتحان کنید »

زیر منو ها(sub navs)

یک زیر منو(sub nav) برای حرکت بین قسمت های مختلف یک صفحه، بسیار مناسب می باشد. 

کلاس sub-nav. را به یک عنصر <dl> اضافه کنید. سپس به وسیله ی یک عنصر <dt> یک عنوان را به ابتدای آن اضافه کنید و سپس کلاس active. را به یک عنصر <dd> اضافه کنید تا استایل فعال به آن اضافه شود:

مثال

<ul class="sub-nav">
  <dt>Filter:</dt>
  <dd class="active"><a href="#">All</a></dd>
  <dd><a href="#">Active</a></dd>
  <dd><a href="#">Pending</a></dd>
  <dd><a href="#">Suspended</a></dd>
</ul>

نتیجه:

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