در خدمت شما هستیم با آموزش Bootstrap جلسه دهم (Alert Box)
آموزش Bootstrap جلسه دهم (Alert Box) از سری آموزش های تک قسمتی است
سلام برنامه در این آموزش نحوه ساختن باکس های اعلان را به شما آموزش می دهد
این باکس ها برای نشان دادن پیام های شما به کاربران سایتتان با ظاهر های مختلف است
شما می توانید به کمک بوت استرپ امکان بستن این پیام ها توسط کاربر را فراهم کنید
این باکس ها رنگ های مختلفی دارند که معمولا هر کدام را برای کاری استفاده می کنند
مثلا رنگ قرمز خطا ، رنگ سبز موفقیت ، رنگ نارنجی اخطار و …
کلاس alert
اگر چه ما alert را به معنی خطا میدانیم اما اینجا منظور باکس های اعلان هستند.
این باکس ها برای نمایش پیغام های مختلف قرار داده می شوند مثل خبری جدید ،اخطار و یا حتی پیغام موفقیت.
این کلاس در بوت استرپ تعریف شده است و کافیست شما از آن استفاده کنید.
برای شما کلاس های مختلف alert را لیست میکنیم:
- alert-success : این کلاس باکسی با رنگ سبز نمایش میدهد که برای موارد پیغام های موفق مناسب است.
- alert-info : همانطور که از نام کلاس مشخص است برای نمایش اطلاعات و توضیحات استفاده میشود.
- alert-warning : این کلاس برای نمایش اخطار ها در قالب یک باکس استفاده میشود.
- alert-danger : معمولا برای خطاها و موار غیر قابل قبول از این کلاس استفاده میشود.
موارد گفته شده اجباری نیست و شما میتوانید هر کلاسی را برای هر موردی استفاده کنید.
مثال زیر نمونه مناسبی برای این کلاس محسوب میشود:
<!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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> نمایش پیغام موفقیت
</div>
<div class="alert alert-info">
<strong>Info!</strong> نمایش توضیحات و اطلاعات
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> نمایش اخطار ها
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> نمایش خطاها
</div>
</div>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه نهم(Jumbotron & wells)
آموزش Bootstrap جلسه یازدهم (Button)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
آموزش Bootstrap جلسه پایانی (Design Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template)
آموزش Bootstrap جلسه سی و چهارم (Affix)
آموزش Bootstrap جلسه سی و سوم (Scrollspy)
آموزش Bootstrap جلسه سی و دوم (Popover)