قسمت سیزدهم bootstrap : نحوه ی تعریف اسپینرها در بوت استرپ ۴

قسمت سیزدهم bootstrap : نحوه ی تعریف اسپینرها در بوت استرپ ۴

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

پیشنهاد میشود برای درک بهتر این قسمت سایر قسمت های دوره ی بوت استرپ ۴ را مطالعه فرمایید.

ساخت اسپینر یا لود کننده

قدم اول برای ساخت یک اسپینر این است که شما در جای مد نظر خود کافی است کلاس .spinner-border را اضافه کنید ، با همین کار ساده شما توانستید لودر خود را فراخوانی کنید.

نکته : فراموش نشود که برای اضافه کردن این کدها اول باید قسمت اول بوت استرپ یعنی نصب بوت استرپ را بلد باشید.

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

لودر های رنگی

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

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

لودر های در حال رشد

بوت استرپ برای بهتر شدن کارها انواع مختلفی به اسپینرهای خود داده است یکی از نماهایی که میتوانید از اسپینرها استفاده کنید ، اسپینرهای درحال رشد هستند برای درک این موضوع به قطعه کد زیر توجه کنید :

سایز لودر ها

یکی از دغدغه هایی که بر سرراه طراحی های وجود دارد اندازه های مختلف است ، بوت استرپ این مسئله را به خوبی پشتیبانی میکند و با استفاده از کلاس های .spinner-border-sm و .spinner-grow-sm برای نمایش لودرها در سایز های کوچکتر میتوان استفاده کرد.

برای درک بهتر این موضوع به قطعه کد زیر توجه فرمایید:

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

یکی از راه هایی که شما میتوانید از اسپینرها استفاده کنید این است که در دکمه ها از اسپینر ها استفاده کنید.

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

پیشنهاد میشود برای دریافت اطلاعات بیشتر به سایت getbootstrap مراجعه فرمایید.

موفق باشید

برچسب ها : Bootstrap، اسپینر

دیدگاه تازه ای بنویسید