اسپینرها (spinners) در بوت استرپ

بازدید: 582 بازدید

اسپینرها نوعی آیکن هستند که در زمانی که کاربر را در حالت انتظار میگذارید نمایش داده میشوند.

این آیکن ها حالت لود شدن را نمایش میدهند.

در این مبحث شما را با انواع کلاس های spinner در بوت استرپ آشنا میکنیم.

با سلام خدمت شما همراهان عزیز وب سایت آموزشی پرنیان طرح

با آموزش مبحث spinner ها در بوت استرپ همراه شما عزیزان هستیم.

اسپینرها (spinners):

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

یک مثال از یک اسپینر ساده:

[php]

<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>

[/php]

تصویر مثال بالا:

spinner

اسپینر های رنگی (Colored Spinners):

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

مثال:

[php]

<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>

[/php]

اسپینرهای رنگی:

colored spinners

اسپینرهای بزرگ شونده (Growing Spinners):

یک نوع دیگر اسپینر ها ْ اسپینرهای بزرگ شونده هستند با استفاده از کلاس spinner-grow. میتوانید از این نوع اسپینر ها استفاده کنید.

برای توضیح بیشتر مثال زیر را ببینید:

[php]

<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>

[/php]

تصویر اسپینرهای بزرگ شونده:

سایز اسپینرها (Spinners Size):

از کلاس های spinner-border-sm. و spinner-grow-sm. برای ایجاد اسپینرهای کوچک تر استفاده کنید.

برای مثال:

[php]

<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”></div>
<div class=”spinner-grow spinner-grow-sm”></div>
</div>

[/php]

تصویر اسپینرهای کوچک شده:

spinner size

دکمه های اسپینر (Spinner Buttons):

همچنین میتوان اسپینرها را به یک دکمه با یا بدون متن اضافه کرد.

در این مثال توضیح کامل این ویژگی را ببینید:

[php]

<div class=”container”>
<h2>Spinner Buttons</h2>
<p>Add spinners to buttons:</p>

<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>
</div>

[/php]

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

spinner buttons
دسته بندی آموزش bootstrap
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

هیچ محصولی در سبد خرید نیست.