akofaraji.ir
spinner ها و صفحه بندی (Pagination)
نوشته شده در تاریخ 31 خرداد 1403
نظرات: 0 امتیاز: 10 زمان مطالعه: 16 دقیقه
spinner ها و صفحه بندی (Pagination) در بوت استرپ

spinner در بوت استرپ

 

spinner ها (در لغت به معنی «چرخنده») همان علامت های بارگذاری و loading هستند که به کاربر نمایش داده می شوند تا بداند که سیستم در حال انجام پردازش کارهای موردنظر است. برای استفاده از spinner ها باید از کلاس spinner-border. استفاده کنید:

 

مشاهده ی خروجی در JSBin

 

Spinner های رنگی

 

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

به مثال زیر توجه کنید:

 

مشاهده ی خروجی در JSBin

 

Spinner های بزرگ شونده (نبض دار)

 

Spinner های نبض دار، Spinner هایی هستند که به جای چرخیدن، مانند نبض بزرگ و سپس محو می شوند. برای استفاده از این دست Spinner ها از کلاس spinner-grow. استفاده کنید:

 

مشاهده ی خروجی در JSBin

 

اندازه Spinner ها

 

می توانید با استفاده از کلاس های spinner-border-sm. و spinner-grow-sm. اندازه ی Spinner های خود را تغییر دهید:

 

مشاهده ی خروجی در JSBin

 

Spinner در دکمه ها

 

یکی از استفاده های بسیار رایج Spinner ها، استفاده از آن ها در دکمه هاست. به طور مثال زمانی که کاربر دکمه ای را کلیک می کند تا فرمی را ثبت و پردازش کنیم، به او یک Spinner در همان دکمه نمایش می دهیم تا بداند که باید صبر کند. به این مثال توجه کنید:

 

مشاهده ی خروجی در JSBin

 

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

 

اگر وب سایت شما دارای صفحات متعدد است (مانند یک وبلاگ و …) بهتر است مطالب خود را صفحه بندی کنید. برای ساخت یک صفحه بندی ساده با بوت استرپ باید کلاس pagination. را به یک <ul> اضافه کرده و سپس کلاس page-item. را به هر <li> و کلاس page-link. را به هر لینکی که داخل <li> است، اضافه کنید. به مثال زیر توجه کنید:

 

مشاهده ی خروجی در JSBin

 

صفحه فعلی

 

برای مشخص کردن صفحه ی فعلی که کاربر در آن است، باید از وضعیت active استفاده کنید. بنابراین باید کلاس active. را به تگ li موردنظر اضافه کنید:

 

مشاهده ی خروجی در JSBin

 

وضعیت غیرفعال

 

گاهی اوقات، برخی از دکمه ها در صفحه بندی ها غیرفعال هستند؛ به طور مثال اگر کاربر در صفحه ی اول قرار دارد، دکمه ی «صفحه ی قبل» بی معنی است. بنابراین باید غیرفعال باشد. برای انجام این کار از کلاس disabled. استفاده کنید:

 

مشاهده ی خروجی در JSBin

 

اندازهدکمه های صفحه بندی

 

با استفاده از کلاس های pagination-lg. و pagination-sm. اندازه ی دکمه های مربوط به صفحه بندی را تغییر دهید:

 

مشاهده ی خروجی در JSBin

 

هم ترازی و موقعیت

 

برای تراز کردن دکمه های صفحه بندی به سمت راست، چپ یا وسط باید از justify-content-center (برای وسط چین شدن) و justify-content-end (برای راست چین شدن) استفاده کنید. نیازی به استفاده از کلاسی برای چپ چین کردن ندارید چرا که حالت پیش فرض همان چپ چین است:

 

مشاهده ی خروجی در JSBin

 

صفحه بندی از نوع breadcrumb

 

نوع دیگری از صفحه بندی وجود دارد که به آن breadcrumb (به معنی «خرده نان») می گوییم. برای استفاده از آن باید از کلاس breadcrumb. و  breadcrumb-item. استفاده کنید:

 

مشاهده ی خروجی در JSBin

 

منبع: سایت روکسو


اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر
به نظر خوب میاد!
لطفا نام را وارد کنید
@
لطفا یک ایمیل منحصر به فرد و معتبر انتخاب کنید.
لطفا متن با کلمات و معانی مفهوم دار وارد نمایید