در خدمت شما هستیم با آموزش Bootstrap 4 جلسه سیزدهم (Spinner)
آموزش Bootstrap 4 جلسه سیزدهم (Spinner) از سری آموزش های تک قسمتی است.
اسپینر چیست؟
قبل از هر چیز برای آن دسته از دوستانی که نمیدانند اسپینر چیست این مورد را توضیحی میدهیم . در بوت استرپ به آیکن هایی که برای انتظار کاربر در زمان لود استفاده میشود اسپینر گفته میشود.
ساخت spinner
در جلسات قبل درباره اسپینر ها مختصری توضیح داده شد در این جلسه مفصل به آن میپردازیم برای ساخت اسپینر در بوت استرپ کلاس های آماده ای وجود دارد که به راحتی امکان ساخت اسپینر را به شما میدهد . برای ساخت یک اسپینر ساده کافیست کلاس spinner-border را به تگ مد نظر خود بدهید تا اسپینری برای شما نمایش داده شود این اسپینر حالت پیشفرض است و به رنگ مشکی است که در ادامه آموزش موارد بیشتری را برای تغییرات ظاهری آن به شما آموزش میدهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="spinner-border"></div>
اضافه کردن رنگ به اسپینر
ساده بخواهیم توضیح دهیم ظاهری که شما از اسپینر میبینید شکل یا تصویر نیست بلکه گلیف آیکن است. گلیف آیکن به آیکن هایی گفته میشود که از نوع فونت باشند. رفتار این اسپینر مشابه متن نوشتاری در وب است پس هر آنچه روی متن جواب میدهد روی این اسپینر هم جواب میدهد در جلسه color گفتیم که برای رنگ کردن نوشته از کلاس text به اضافه نام کلاس رنگی استفاده میکنیم مثل text-success که رنگ نوشته مارا سبز میکرد برای اسپینر هم از همین کلاس استفاده میکنیم کافیست کلاس های رنگی را در کنار کلاس خود اسپینر بنویسید ما کلاس های رنگی را با رنگ آن برای شما لیست میکنیم:
- text-muted : به کمک این کلاس میتوانید به اسپینر خود رنگ طوسی بدهید.
- text-primary : این کلاس رنگ آبی میسازد.
- text-success :به کمک این کلاس میتوانید رنگ سبز به اسپینر خود بدهید.
- text-info : این کلاس رنگ آبی به اسپینر میدهد.
- text-warning :رنگ این کلاس برای اسپینر نارنجی است.
- text-danger : به کمک این کلاس میتوانید رنگ قرمز اضافه کنید.
- text-secondary : رنگ خاکستری برای اسپینر با این کلاس ساخته میشود.
- text-dark : این کلاس رنگ تیره نزدیک به سیاه میسازد.
- text-light :این کلاس رنگ روشن نزدیک به سفید میسازد.
برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="spinner-border text-success"></div>
در کد بالا ما از رنگ سبز استفاده کرده ایم.
حالت دیگری از اسپینر (growing)
اگر میخواهید اسپینر شما به حالت border نباشد میتوانید از حالت grow استفاده کنید کلاس های رنگی بالا برای هردو حالت یکسان است . دقت داشته باشید که این اسپینر ها به صورت اتوماتیک انیمیشن دارند و نیاز به کلاس animated ندارند اگر قصد دارید از حالت grow استفاده کنید باید به جای کلاس spinner-border از کلاس spinner-grow استفاده کنید معمولا برای حالت های انتظار لاگین و یا ثبت نام از این حالت استفاده میشود برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="spinner-grow text-muted"></div>
تغییر اندازه اسپینر ها
بوت استرپ برای اندازه اسپینر ها نیز فکری کرده است در حالت عادی اندازه اسپینر در نوع بزرگ خود است و اگر قصد دارید آن را کوچکتر کنید باید از کلاس آماده بوت استرپ استفاده کنید این کلاس هم برای border تعریف شده است و هم برای grow کافیست برای حالت border از کلاس spinner-border-sm و برای حالت grow از کلاس spinner-grow-sm استفاده کنید توجه کنید حالت های دیگر مانند lg یا md در این حالت کار نمیکند و وجود ندارند. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<div class="spinner-border spinner-border-sm"></div> <div class="spinner-grow spinner-grow-sm"></div>
استفاده از spinner در دکمه ها
تا اینجای کار ما از اسپینر ها به صورت جدا استفاده کردیم اگر قصد دارید این اسپینر هارا در داخل دکمه و در کنار نوشته قرار دهید به راحتی میتوانید این کار را انجام دهید کافیست بین تگ باز و بسته button اسپینر خود را داخل تگ span بنویسید و به راحتی آن را داخل دکمه خود مشاهده کنید همچنین میتوانید به راحتی از کلاس های رنگی نیز استفاده کنید تا دکمه هایی با رنگ های متنوع و اسپینر های رنگارنگ بسازید. برای واضح شدن این موضوع میتوانید از کد زیر کمک بگیرید:
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm text-danger"></span>
Loading..
</button>در کد بالا ما از دکمه با رنگ آبی و اسپینر با رنگ قرمز استفاده کرده ایم.
برای راحتی شما ما کد کامل این جلسه که در ویدیو آموزش از آن استفاده کرده ایم را قرار میدهیم:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Spinners</h2>
<p>To create a spinner/loader, use the <code>.spinner-border</code> class:</p>
<div class="spinner-border"></div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Colored Spinners</h2>
<p>Use any <strong>text color utilites</strong> to add a color to the spinner:</p>
<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>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Growing Spinners</h2>
<p>Use the <code>.spinner-grow</code> class if you want the spinner/loader to grow instead of "spin":</p>
<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>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Spinner Size</h2>
<p>Use <code>.spinner-border-sm</code> or <code>.spinner-grow-sm</code> to create a smaller spinner:</p>
<div class="spinner-border spinner-border-sm text-danger"></div>
<div class="spinner-grow spinner-grow-sm"></div>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Spinner Buttons</h2>
<p>Add spinners to buttons:</p>
<button class="btn btn-success">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm text-warning"></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>
</div>
<br>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه دوازدهم (Progress Bar)
آموزش Bootstrap 4 جلسه چهاردهم (Pagination)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.