اسپینر ها یا گردونه ها معمولا استفاده های مختلفی دارند ، یکی از بازرترین نوع استفاده انها در هنگام ارسال یک فرم می باشد که بعد از تکمیل اطلاعات اسپینر به نمایش در می آید و به صفحه ی جدید یا قدم بعدی فرم منتقل میشوید.
پیشنهاد میشود برای درک بهتر این قسمت سایر قسمت های دوره ی بوت استرپ 4 را مطالعه فرمایید.
ساخت اسپینر یا لود کننده
قدم اول برای ساخت یک اسپینر این است که شما در جای مد نظر خود کافی است کلاس .spinner-border را اضافه کنید ، با همین کار ساده شما توانستید لودر خود را فراخوانی کنید.
نکته : فراموش نشود که برای اضافه کردن این کدها اول باید قسمت اول بوت استرپ یعنی نصب بوت استرپ را بلد باشید.
به مثال زیر توجه فرمایید:
|
1 |
<div class="spinner-border"></div> |
لودر های رنگی
برای داشتن ظاهر بهتر لودر ها میتوانید از رنگ های مختلف استفاده کنید ، در قسمت دوم به این پرداختیم که رنگ ها در بوت استرپ به چه نحوی تعریف میشوند.
برای درک بهتر این مثال قطعه کد زیر را مورد بررسی قرار دهید:
|
1 2 3 4 5 6 7 8 9 |
<div class="spinner-border text-muted"></div> <div class="spinner-border text-primary"></div> <div class="spinner-border text-success"></div> <div class="spinner-border text-info"></div> <div class="spinner-border text-warning"></div> <div class="spinner-border text-danger"></div> <div class="spinner-border text-secondary"></div> <div class="spinner-border text-dark"></div> <div class="spinner-border text-light"></div> |
لودر های در حال رشد
بوت استرپ برای بهتر شدن کارها انواع مختلفی به اسپینرهای خود داده است یکی از نماهایی که میتوانید از اسپینرها استفاده کنید ، اسپینرهای درحال رشد هستند برای درک این موضوع به قطعه کد زیر توجه کنید :
|
1 2 3 4 5 6 7 8 9 |
<div class="spinner-grow text-muted"></div> <div class="spinner-grow text-primary"></div> <div class="spinner-grow text-success"></div> <div class="spinner-grow text-info"></div> <div class="spinner-grow text-warning"></div> <div class="spinner-grow text-danger"></div> <div class="spinner-grow text-secondary"></div> <div class="spinner-grow text-dark"></div> <div class="spinner-grow text-light"></div> |
سایز لودر ها
یکی از دغدغه هایی که بر سرراه طراحی های وجود دارد اندازه های مختلف است ، بوت استرپ این مسئله را به خوبی پشتیبانی میکند و با استفاده از کلاس های .spinner-border-sm و .spinner-grow-sm برای نمایش لودرها در سایز های کوچکتر میتوان استفاده کرد.
برای درک بهتر این موضوع به قطعه کد زیر توجه فرمایید:
|
1 2 |
<div class="spinner-border spinner-border-sm"></div> <div class="spinner-grow spinner-grow-sm"></div> |
اسپینرهای دکمه ای
یکی از راه هایی که شما میتوانید از اسپینرها استفاده کنید این است که در دکمه ها از اسپینر ها استفاده کنید.
برای درک بهتر این موضوع به مثال زیر توجه فرمایید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> </button> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-primary" disabled=""> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-primary" disabled=""> <span class="spinner-grow spinner-grow-sm"></span> Loading.. </button> |
ویدیو قسمت سیزدهم
پیشنهاد میشود برای دریافت اطلاعات بیشتر به سایت getbootstrap مراجعه فرمایید.
موفق باشید
