آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه نهم

0 دیدگاه

آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه نهم

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

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

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

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

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

</ul>

وضعیت فعال صفحه بندی در بوت استرپ : وضعیت فعال صفحه جاری را نشان میدهد. برای اینکه به کاربر نشان دهید درحال حاضر در چه صفحه ای قرار دارد ، باید کلاس .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>

</ul>

جهت مشاهده دمو کلیک نمایید.

وضعیت غیر فعال صفحه بندی در بوت استرپ : نمیتوان بر روی یک لینک یا شماره صفحه غیر فعال کلیک کرد، مانند تصویر زیر :

اگر یک لینک به هر دلیلی غیرفعال است ، کلاس .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>

</ul>

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

جعبه (بلوک) های صفحه بندی را میشود به اندازه های مختلف در اورد :

برای بلوک های بزرگتر از کلاس .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>

</ul>

</ul>

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

پیجر چیست : پیجر نیز نوعی صفحه بندی ست که در بخش قبل توضیح داده شد . پیجر گزینه های قبلی (previous) و بعدی (Next) (لینک) را در اختیار مان قرار میدهد

برای ساخت دکمه های قبلی و بعدی کلاس .pager را بع عنصر <ul> اضافه کنید :

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

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

</ul>

تراز بندی دکمه ها در بوت استرپ :

برای تراز بندی کردن دکمه ها به کناره های صفحه از کلاس .previous و .next استفاده کنید :

<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

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

</ul>

برای تازه شدن دیر نیست.

موفق و پیروز باشید

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

صابر بوستانی

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

دوره آموزش طراحی وب سایت مدرسه با PHP و MySql

انتشار: ۱۰ اردیبهشت ۱۳۹۵

آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه نهم

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط