نمادها

شما اینجا هستید

آموزش Bootstrap جلسه دهم (Alert Box)

در خدمت شما هستیم با آموزش 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)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

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

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه دهم (Alert Box): نوع فایل:mp4 حجم فایل:29.61 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

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

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

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