نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه سیزدهم (Spinner)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه سیزدهم (Spinner)

آموزش Bootstrap 4 جلسه سیزدهم (Spinner) از سری آموزش های تک قسمتی است.

 

اسپینر چیست؟

قبل از هر چیز برای آن دسته از دوستانی که نمیدانند اسپینر چیست این مورد را توضیحی میدهیم . در بوت استرپ به آیکن هایی که برای انتظار کاربر در زمان لود استفاده میشود اسپینر گفته میشود.

 

ساخت spinner

در جلسات قبل درباره اسپینر ها مختصری توضیح داده شد در این جلسه مفصل به آن میپردازیم برای ساخت اسپینر در بوت استرپ کلاس های آماده ای وجود دارد که به راحتی امکان ساخت اسپینر را به شما میدهد . برای ساخت یک اسپینر ساده کافیست کلاس spinner-border را به تگ مد نظر خود بدهید تا اسپینری برای شما نمایش داده شود این اسپینر حالت پیشفرض است و به رنگ مشکی است که در ادامه آموزش موارد بیشتری را برای تغییرات ظاهری آن به شما آموزش میدهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

اضافه کردن رنگ به اسپینر

ساده بخواهیم توضیح دهیم ظاهری که شما از اسپینر میبینید شکل یا تصویر نیست بلکه گلیف آیکن است. گلیف آیکن به آیکن هایی گفته میشود که از نوع فونت باشند. رفتار این اسپینر مشابه متن نوشتاری در وب است پس هر آنچه روی متن جواب میدهد روی این اسپینر هم جواب میدهد در جلسه color گفتیم که برای رنگ کردن نوشته از کلاس text به اضافه نام کلاس رنگی استفاده میکنیم مثل text-success که رنگ نوشته مارا سبز میکرد برای اسپینر هم از همین کلاس استفاده میکنیم کافیست کلاس های رنگی را در کنار کلاس خود اسپینر بنویسید ما کلاس های رنگی را با رنگ آن برای شما لیست میکنیم:

  • text-muted : به کمک این کلاس میتوانید به اسپینر خود رنگ طوسی بدهید.
  • text-primary : این کلاس رنگ آبی میسازد.
  • text-success :به کمک این کلاس میتوانید رنگ سبز به اسپینر خود بدهید.
  • text-info : این کلاس رنگ آبی به اسپینر میدهد.
  • text-warning :رنگ این کلاس برای اسپینر نارنجی است.
  • text-danger : به کمک این کلاس میتوانید رنگ قرمز اضافه کنید.
  • text-secondary : رنگ خاکستری برای اسپینر با این کلاس ساخته میشود.
  • text-dark : این کلاس رنگ تیره نزدیک به سیاه میسازد.
  • text-light :این کلاس رنگ روشن نزدیک به سفید میسازد.

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

 

حالت دیگری از اسپینر (growing)

اگر میخواهید اسپینر شما به حالت border نباشد میتوانید از حالت grow استفاده کنید کلاس های رنگی بالا برای هردو حالت یکسان است . دقت داشته باشید که این اسپینر ها به صورت اتوماتیک انیمیشن دارند و نیاز به کلاس animated ندارند اگر قصد دارید از حالت grow استفاده کنید باید به جای کلاس spinner-border از کلاس spinner-grow استفاده کنید معمولا برای حالت های انتظار لاگین و یا ثبت نام از این حالت استفاده میشود برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

تغییر اندازه اسپینر ها

بوت استرپ برای اندازه اسپینر ها نیز فکری کرده است در حالت عادی اندازه اسپینر در نوع بزرگ خود است و اگر قصد دارید آن را کوچکتر کنید باید از کلاس آماده بوت استرپ استفاده کنید این کلاس هم برای border تعریف شده است و هم برای grow کافیست برای حالت border از کلاس spinner-border-sm و برای حالت grow از کلاس spinner-grow-sm استفاده کنید توجه کنید حالت های دیگر مانند lg یا md در این حالت کار نمیکند و وجود ندارند. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

استفاده از spinner در دکمه ها

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

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

 

برای راحتی شما ما کد کامل این جلسه که در ویدیو آموزش از آن استفاده کرده ایم را قرار میدهیم:

 

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

آموزش Bootstrap 4 جلسه دوازدهم (Progress Bar)

آموزش Bootstrap 4 جلسه چهاردهم (Pagination)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (3 رای, میانگین: 5٫00 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه سیزدهم (Spinner): نوع فایل:mp4 حجم فایل:26.04 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

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