%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (آخرین فرصت)
سبد (0)

تبلیغات

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

صفحه بندی مقدماتی در بوت استرپ

Wiki

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

یک صفحه بندی در بوتسترپ چیزی شبیه زیر خواهد بود:

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

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

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

Wiki

مکان فعال، در واقع نشان دهنده ی صفحه ی جاری می باشد:

با اضافه کردن کلاس active. می توانید به کاربر نشان دهید که در چه صفحه ای قرار دارد:

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

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

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

منطقه غیر فعال در صفحه بندی بوت استرپ

Wiki

با استفاده از آن، نمی توان بر روی یک لینک غیر فعال کلیک کرد:

در صورتی که در سایت شما یک لینک به یک علت مشخص، غیر فعال می باشد،می توانید کلاس disabled. را اضافه کنید:

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

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

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

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

Wiki

بلوک های صفحه بندی را می توان در دو اندازه ی بزرگ و یا کوچک ارائه داد:

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

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

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

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

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

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

Wiki

برای دیدن یک مرجع کامل از تمام کلاس های ناوبری بوت استرپ، مرجع کامل ناوبری بوت استرپ را مطالعه نمایید.

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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