آموزش foundation-صفحه بندی
صفحه بندی پایه
اگر که شما یک وب سایت با تعداد زیادی صفحه دارید، ممکن است بخواهید صفحات را منظم کنید و به هر صفحه، صفحه بندی را اعمال کنید.
برای ایجاد یک صفحه بندی پایه، کافیست کلاس pagination. را به یک عنصر <ul> اضافه کنید:
مثال
<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> اضافه نمایید:
مثال
<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 را اضافه کنید:
مثال
<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& را نیز اضافه نمایید:
مثال
<li class="arrow"><a href="#">«</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="#">»</a></li>
</ul>
نتیجه:
وسط قرار دادن صفحه بندی
برای وسط قرار دادن صفحه بندی، یک عنصر <div> را به همراه کلاس pagination-centerd. به دور عنصر <ul> اضافه کنید:
مثال
<ul class="pagination">
<li class="arrow"><a href="#">«</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="#">»</a></li>
</ul>
</div>
نتیجه:
مکان جاری(breadcrumbs)
مکان جاری، درواقع مکان جاری صفحه و یا به عبارت دیگر مکان صفحه ای که شما در آن قرار دارید را مشخص می کند.
برای ایجاد مکان جاری، کلاس breadcrumb. را به یک عنصر <ul> اضافه کنید. شما همچنین می توانید از کلاس های current. یا unavailable. درون عناصر <li> استفاده کنید:
مثال
<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> اضافه کنید تا استایل فعال به آن اضافه شود:
مثال
<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>
نتیجه:
- نوشته شده توسط احسان عباسی
- بازدید: 3640
