پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
در طراحی وب سایت گاهی لازم است تا پیغام های را از سمت سیستم به کاربران بدهیم.
برای هشدار دادن از دستور alert استفاده میشود بوت استرپ انواع کلاس های پیغام هشدار مهیا است.
شما میتوانید با استفاده از کلاس های موجود در bootstrap پیغام های زیبایی را در صفحه نمایش ایجاد کنید.
در بوت استرپ به راحتی از پیغام های هشدار آماده و زیبا استفاده کنید.
با سلام خدمت دوستان و همراهان عزیز وب سایت پرنیان طرح
در این جلسه از آموزش های بوت استرپ قصد داریم تا انواع کلاس های alert را به شما آموزش دهیم.
همانطور که میدانید در طراحی وب سایت لازم است پیغام ها و هشدارهایی را به کاربران سایت ارسال کنیم.
هنگامی که ارسال اطلاعات از طرف کاربران با مشکل یا خطایی مواجه باشد سیستم پیغام خطایی را برای کاربر ارسال میکند تا کاربر متوجه شود که خطایی رخ داده است.
در بوت استرپ کلاس های alert زیبایی طراحی شده است که به خوبی و آسانی میتوانید از این کلاس ها استفاده کنید.
Bootstrap alerts :
bootstrap 4 راهی آسان برای ایجاد پیغام های هشدار از پیش تعریف شده فراهم میکند.
هشدارها (Alerts) :
پیغام ها توسط کلاس alert. ساخته میشود.
که در دنباله ی آن هر کدام از 4 کلاس متنی 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 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]
بستن هشدارها (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”>×</button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
[/php]
تصویر زیر را ببینید:
هشدارهای متحرک (Animated alerts) :
کلاس های fade. و show. یک حالت افکت محو را هنگام بستن پیغام هشدار ایجاد میکند.
مثال :
[php]
<div class=”alert alert-success alert-dismissible fade show”>
<button type=”button” class=”close” data-dismiss=”alert”>×</button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
[/php]
