آموزش صفحه بندی در بوت استرپ

4 سال پیش

امتیاز دهید post

آموزش صفحه بندی در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش صفحه بندی در بوت استرپ خواهیم پرداخت.
در این درس در مورد ویژگی صفحه بندی که بوت استرپ پشتیبانی می کند بحث می شود. صفحه بندی ، یک لیست نامرتب توسط بوت استرپ مانند بسیاری از عناصر رابط دیگر اداره می شود.

صفحه بندی

جدول زیر کلاسهایی را که بوت استرپ برای مدیریت صفحه بندی ارائه می دهد لیست می کند.

کلاس

توضیحات

نمونه کد

pagination.

برای دریافت صفحه بندی در صفحه خود ، این کلاس را اضافه کنید.

&lt;ul class = "pagination"&gt;
   &lt;li&gt;&lt;a href = "#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;1&lt;/a&gt;&lt;/li&gt;
   .......
&lt;/ul&gt;

<li><a href = "#">&laquo;</a></li>

.......

</ul>

.disabled,. .active

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

&lt;ul class = "pagination"&gt;
   &lt;li class = "disabled"&gt;&lt;a href = "#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
   &lt;li class = "active"&gt;&lt;a href = "#"&gt;1&lt;span class = "sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
   .......
&lt;/ul&gt;

<li class = "disabled"><a href = "#">&laquo;</a></li>

<li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>

.......

</ul>

.pagination-lg, .pagination-sm

برای به دست آوردن موارد با اندازه های مختلف از این کلاس ها استفاده کنید.

&lt;ul class = "pagination pagination-lg"&gt;...&lt;/ul&gt;
&lt;ul class = "pagination"&gt;...&lt;/ul&gt;
&lt;ul class = "pagination pagination-sm"&gt;...&lt;/ul&gt;

مثال زیر استفاده از کلاس pagination. در جدول بالا را نشان می دهد –

&lt;ul class = "pagination"&gt;
   &lt;li&gt;&lt;a href = "#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;3&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;4&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;5&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<li><a href = "#">&laquo;</a></li>

<li><a href = "#">&raquo;</a></li>

</ul>

حالت ها

مثال زیر استفاده از کلاس disabled, .active. را نشان می دهد که در جدول بالا بحث شده است –

&lt;ul class = "pagination"&gt;
   &lt;li&gt;&lt;a href = "#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
   &lt;li class = "active"&gt;&lt;a href = "#"&gt;1&lt;/a&gt;&lt;/li&gt;
   &lt;li class = "disabled"&gt;&lt;a href = "#"&gt;2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;3&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;4&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;5&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<li><a href = "#">&laquo;</a></li>

<li><a href = "#">&raquo;</a></li>

</ul>

سایز بندی

مثال زیر استفاده از کلاسها را برای اندازه گذاری ، *-pagination. در جدول فوق نشان داده شده است –

&lt;ul class = "pagination pagination-lg"&gt;
   &lt;li&gt;&lt;a href = "#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;3&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;4&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;5&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;br&gt;

&lt;ul class = "pagination"&gt;
   &lt;li&gt;&lt;a href = "#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;3&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;4&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;5&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;br&gt;

&lt;ul class = "pagination pagination-sm"&gt;
   &lt;li&gt;&lt;a href = "#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;3&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;4&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;5&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<li><a href = "#">&laquo;</a></li>

<li><a href = "#">&raquo;</a></li>

</ul>

<br>

<li><a href = "#">&laquo;</a></li>

<li><a href = "#">&raquo;</a></li>

</ul>

<br>

<li><a href = "#">&laquo;</a></li>

<li><a href = "#">&raquo;</a></li>

</ul>

پیجر

اگر شما نیاز به ایجاد لینک های صفحه بندی ساده ای دارید که فراتر از متن باشد ، پیجر می تواند بسیار خوب کار کند. مانند لینک های صفحه بندی، صفحه ساز نیز لیستی غیر مرتب است. به طور پیش فرض پیوندها مرکز هستند. در جدول زیر کلاس هایی که بوت استرپ برای پیجر ارائه می دهد ، آورده شده است.

کلاس

توضیحات

کد نمونه

pager.

برای دریافت پیوندهای صفحه ، این کلاس را اضافه کنید.

&lt;ul class = "pager"&gt;
   &lt;li&gt;&lt;a href = "#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;Next&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<li><a href = "#">Previous</a></li>

</ul>

.previous,. next

از کلاس. .previous ترازبندی چپ استفاده کنید و .next پیوندها را از راست تراز کنید.

&lt;ul class = "pager"&gt;
   &lt;li class = "previous"&gt;&lt;a href = "#"&gt;&amp;larr; Older&lt;/a&gt;&lt;/li&gt;
   &lt;li class = "next"&gt;&lt;a href = "#"&gt;Newer &amp;rarr;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<li class = "previous"><a href = "#">&larr; Older</a></li>

<li class = "next"><a href = "#">Newer &rarr;</a></li>

</ul>

disabled.

این کلاس را اضافه کنید تا ظاهری خاموش داشته باشید.

&lt;ul class = "pager"&gt;
   &lt;li class = "previous disabled"&gt;&lt;a href = "#"&gt;&amp;larr; Older&lt;/a&gt;&lt;/li&gt;
   &lt;li class = "next"&gt;&lt;a href = "#"&gt;Newer &amp;rarr;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<li class = "previous disabled"><a href = "#">&larr; Older</a></li>

<li class = "next"><a href = "#">Newer &rarr;</a></li>

</ul>

پیجر پیش فرض

مثال زیر استفاده از کلاس pager. را نشان می دهد که در جدول بالا بحث شده است –

&lt;ul class = "pager"&gt;
   &lt;li&gt;&lt;a href = "#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;Next&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<li><a href = "#">Previous</a></li>

</ul>

لینک های تراز شده

&lt;ul class = "pager"&gt;
   &lt;li class = "previous"&gt;&lt;a href = "#"&gt;&amp;larr; Older&lt;/a&gt;&lt;/li&gt;
   &lt;li class = "next"&gt;&lt;a href = "#"&gt;Newer &amp;rarr;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<li class = "previous"><a href = "#">&larr; Older</a></li>

<li class = "next"><a href = "#">Newer &rarr;</a></li>

</ul>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش صفحه بندی در بوت استرپ

آموزش صفحه بندی در بوت استرپ

صفحه بندی

حالت ها

سایز بندی

پیجر

پیجر پیش فرض

لینک های تراز شده

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش صفحه بندی در بوت استرپ

صفحه بندی

حالت ها

سایز بندی

پیجر

پیجر پیش فرض

لینک های تراز شده

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه