آموزش اسپینر در بوت استرپ

در این بخش به بررسی اسپینر در بوت استرپ می‌پردازیم. اسپینرها با استفاده از کلاس .spinner وضعیت بارگذاری یک پروژه را نمایش می‌دهند.

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

اسپینرهای بوت استرپ تنها با استفاده از HTML و CSS، وضعیت بارگذاری پروژه را به نمایش می‌گذارند و برای ساخت آن‌ها نیازی به جاوا اسکریپت نیست.

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

ظاهر، اندازه و نحوه قرارگیری اسپینرها به‌سادگی با استفاده از کلاس‌های ابزار کمکی (utility classes) در بوت استرپ قابل تنظیم هستند.

برای رعایت اصول دسترس پذیری (accessibility)، هر اسپینر باید دارای ویژگی role="status" باشد و درون آن از یک عنصر <span class="visually-hidden">Loading...</span> برای نمایش متنی معادل استفاده شود.

ایجاد Border Spinner

برای ایجاد یک اسپینر ساده و کم‌حجم که نقش نماد بارگذاری را ایفا کند، می‌توانید از کلاس .spinner-border استفاده کنید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تعیین رنگ اسپینر در بوت استرپ

Border Spinner از مقدار currentColor برای رنگ حاشیه خود استفاده می‌کند. برای تغییر رنگ اسپینر، می‌توانید از کلاس‌های کمکی مربوط به رنگ متن (text color utilities) استفاده کنید. کافی است این کلاس‌ها را روی اسپینر معمولی اعمال کنید تا رنگ آن مطابق با نیاز شما تنظیم شود.

رنگ اسپینر در بوت استرپ

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

چرا از کلاس‌های border-color استفاده نمی‌کنیم؟ در Border Spinner یکی از اضلاع حاشیه به صورت شفاف (transparent) طراحی شده است. زمانی که از کلاس‌های .border-{color} استفاده می‌کنید، این ویژگی خاص اسپینر توسط رنگ جدید بازنویسی می‌شود و دیگر ظاهر چرخشی اسپینر حفظ نمی‌شود.

اسپینر Growing در بوت استرپ

می‌توانید نوع چرخش اسپینر را به حالت “grow” تغییر دهید. این نوع اسپینر از نظر فنی چرخشی ندارد، اما با بزرگ و کوچک شدن پی‌در‌پی، حالت بارگذاری را القا می‌کند.

برای ساخت یک Growing Spinner از کلاس .spinner-grow استفاده کنید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

این اسپینر از مقدار currentColor استفاده می‌کند تا ظاهر آن با کمک کلاس‌های رنگ متن (text color utilities) قابل تغییر باشد.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تراز بندی اسپینر در بوت استرپ

اسپینرهای بوت استرپ با استفاده از واحد rem، مقدار currentColor و ویژگی display: inline-flex طراحی شده‌اند. به همین دلیل، به‌راحتی می‌توان آن‌ها را تغییر اندازه داد، رنگ‌شان را تنظیم کرد و در موقعیت دلخواه قرار داد.

ایجاد فاصله (Margin)

برای ایجاد فاصله ساده در اطراف اسپینر، می‌توانید از کلاس‌های مربوط به margin مانند .m-4 استفاده کنید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

موقعیت دهی اسپینر در بوت استرپ

اسپینرهای بوت استرپ را می‌توان با استفاده از کلاس‌های ابزار کمکی Flexbox، کلاس‌های شناورسازی (float utilities)، یا ابزارهای تراز متن (text alignment utilities) در محل مورد نظر قرار داد.

فلکس

برای تعیین موقعیت اسپینرها، از کلاس‌های موقعیت دهی Flexbox استفاده کنید.

موقعیت دهی اسپینر در بوت استرپ

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

می‌توانید ترازبندی اسپینر را با استفاده از کلاس‌های موقعیت دهی Flexbox تغییر دهید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

شناورسازی (Float)

برای تعیین موقعیت اسپینرها، می‌توانید از کلاس‌های شناورسازی (float placement classes) استفاده کنید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تراز متن (Text Align)

برای موقعیت دهی به آیتم‌های اسپینر، می‌توانید از کلاس‌های تراز متن مانند .text-start، .text-center یا .text-end استفاده کنید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

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

اندازه اسپینرها را می‌توان برای ایجاد اسپینرهایی در ابعاد مختلف تنظیم کرد.

  • برای ساخت اسپینرهای کوچک، از کلاس‌های .spinner-border-sm و .spinner-grow-sm استفاده کنید.
  • برای ساخت اسپینرهای متوسط، از کلاس‌های .spinner-border-md و .spinner-grow-md استفاده کنید.

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

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

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

برای تغییر ابعاد اسپینر مطابق نیاز، می‌توانید از CSS سفارشی یا استایل‌های خطی (inline styles) استفاده کنید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

اسپینر در دکمه‌ها

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

برای ساخت یک دکمه با اسپینر، از ترکیب کلاس‌های .btn و .spinner-border استفاده کنید.

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

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

برای ساخت دکمه‌های اسپینر از نوع growing، از ترکیب کلاس‌های .btn و .spinner-grow استفاده کنید.

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

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

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

دوره آموزش برنامه نویسی پایتون در 24 ساعت + ساخت ربات تلگرامی
  • انتشار: ۲۱ خرداد ۱۴۰۴

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

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

مشاهده همه

نظرات

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