هشدارها (alerts) در Bootstrap

بهاره حسنیبهاره حسنی
316 بازدید

در طراحی وب سایت گاهی لازم است تا پیغام های را از سمت سیستم به کاربران بدهیم.

برای هشدار دادن از دستور alert استفاده میشود بوت استرپ انواع کلاس های پیغام هشدار مهیا است.

شما میتوانید با استفاده از کلاس های موجود در bootstrap پیغام های زیبایی را در صفحه نمایش ایجاد کنید.

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

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

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

همانطور که میدانید در طراحی وب سایت لازم است پیغام ها و هشدارهایی را به کاربران سایت ارسال کنیم.

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

در بوت استرپ کلاس های alert زیبایی طراحی شده است که به خوبی و آسانی میتوانید از این کلاس ها استفاده کنید.

Bootstrap alerts :

bootstrap 4 راهی آسان برای ایجاد پیغام های هشدار از پیش تعریف شده فراهم میکند.

alert

هشدارها (Alerts) :

پیغام ها توسط کلاس alert. ساخته میشود.

که در دنباله ی آن هر کدام از ۴ کلاس متنی  alert-warning. یا alert-info. یا alert-success. و یا alert-danger.  قرار میگیرند.

[php]

<body>

<div class=”container”>
<h2>Alerts</h2>
<p>Alerts are created with the .alert class, followed by a contextual color classes:</p>
<div class=”alert alert-success”>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class=”alert alert-info”>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class=”alert alert-warning”>
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class=”alert alert-danger”>
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
<div class=”alert alert-primary”>
<strong>Primary!</strong> Indicates an important action.
</div>
<div class=”alert alert-secondary”>
<strong>Secondary!</strong> Indicates a slightly less important action.
</div>
<div class=”alert alert-dark”>
<strong>Dark!</strong> Dark grey alert.
</div>
<div class=”alert alert-light”>
<strong>Light!</strong> Light grey alert.
</div>
</div>

</body>

[/php]

خروجی مثال بالا :

alert

لینک های پیغام (Alert links) :

با افزودن کلاس alert-link. به لینک های باکس پیغام لینک های رنگی ایجاد میکنیم.

همانند مثال زیر:

[php]

<div class=”alert alert-success”>
<strong>Success!</strong> You should <a href=”#” class=”alert-link”>read this message</a>.
</div>

[/php]

alert links

بستن هشدارها (Closing alerts) :

برای بستن پیغام هشدار از کلاس alert-dismissible. در قسمت container استفاده کنید.

سپس کلاس close و date-dismiss=”alert” را به یک لینک یا دکمه بیافزایید.

یک مثال از کلاس های گفته شده :

[php]

<div class=”alert alert-success alert-dismissible”>
<button type=”button” class=”close” data-dismiss=”alert”>&times;</button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>

[/php]

تصویر زیر را ببینید:

closing alerts

هشدارهای متحرک (Animated alerts) :

کلاس های fade. و show. یک حالت افکت محو را هنگام بستن پیغام هشدار ایجاد میکند.

مثال :

[php]

<div class=”alert alert-success alert-dismissible fade show”>
<button type=”button” class=”close” data-dismiss=”alert”>&times;</button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>

[/php]

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

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

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

22+ محصولات
400+ سفارشات تکمیل شده
2086+ کاربران
399+ مطالب وبلاگ
سبد خرید

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

ورود به سایت