میرممد

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

سید محمد میرعالی

امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.

دسته بندی مطالب آمار سایت
  • کل مطالب : 13
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • آی پی امروز : 15
  • آی پی دیروز : 11
  • بازدید امروز : 122
  • باردید دیروز : 17
  • گوگل امروز : 1
  • گوگل دیروز : 0
  • بازدید هفته : 234
  • بازدید ماه : 437
  • بازدید سال : 22,946
  • بازدید کلی : 22,946
  • صفحه بندی در Bootstrap 4


    در اين مطلب از سايت ميرممد با صفحه بندی در بوتسترپ نسخه چهار كار خواهيم كرد.نمونه کد pagination در بوتسترپ 4 :

    <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>

    خروجی کد بالا :

    فقط کافیه کلاس های سبز رنگ در کد بالا رو به لیستمون بدیم.

    اگر بخوایم یکی از صفحه ها حالت اکتیو بگیره هم به به اون صفحه کلاس active رو میدیم :

    <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 active"><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>

    خروجی کد بالا :

    اگر بخوایم یکی از صفحه ها حالت غیر فعال بگیره هم به به اون صفحه کلاس disabled رو میدیم :

    <ul class="pagination">
      <li class="page-item disabled"><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>

    خروجی کد بالا :

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

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

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

    خروحی کد بالا :

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

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

    خروجی کد بالا :

    برای وسطچین کردن صفحه بندی میتونید کلاس justify-content-centern را به لیست اضافه کنید به شکل زیر:

    <ul class="pagination justify-content-centern">
      <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>

    خروجی کد بالا :

     

    اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد

    ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.

     



    پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :

    آموزش DocType در HTML 5

    آموزش کار با Progress Bar در Bootstrap 4

    آموزش کار با Badge در Bootstrap 4

    آموزش کار با Button در Bootstrap 4

    آموزش کار با Alerts در Bootstrap 4

    آموزش کار با Jumbotron در Bootstrap 4

    آموزش کار با جداول در Bootstrap 4

    آموزش استفاده از Tooltip در Bootstrap 4

    آموزش استفاده از تگ video در HTML5

    آموزش كار با تصاوير در Bootstrap 4

    بازدید : 330 پنجشنبه 03 آبان 1397 : 12:17 نظرات ()
    ارسال نظر برای این مطلب

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی