نمادها

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

آموزش Bootstrap 4 جلسه هشتم (alert)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه هشتم (alert)

آموزش Bootstrap 4 جلسه هشتم (alert) از سری آموزش های تک قسمتی است.

 

باکس های پیغام (alert)

امروز قصد داریم درباره یکی از پرکاربرد ترین موارد بوت استرپ ۴ صحبت کنیم باکس های پیغام برای جاهای مختلف و موارد متنوعی استفاده میشوند مواردی مثل پیغام های خطا و یا پیام های تبریک و تشکر و حتی پیام های اضافه شدن خدمات جدید در حالت عادی شما باید این باکس هارا در css طراحی کنید حتی برای آنها باید جاوا اسکریپت و جیکوئری هم بلد باشید اما به کمک بوت استرپ کافیست از کلاس ها و attribute های آماده آن استفاده کنید و به راحتی هر باکسی را بسازید.ما در این آموزش ۴ حالت این باکس هارا آموزش میدهیم که این حالات را برای شما لیست میکنیم:

  • باکس های ساده
  • باکس هایی با امکان درج لینک
  • باکس هایی با امکان بسته شدن از نوع ساده
  • باکس هایی با امکان بسته شدن با افکت

هر یک از موارد بالا را توضیح میدهیم و از هرکدام برای شما مثال عملی میزنیم.

 

ساخت باکس alert ساده

برای ساخت این باکس تنها از کلاس های ساده بوت استرپ استفاده میکنیم باکس ها در بوت استرپ از کلاس های رنگی پشتیبانی میکنند اگر آموزش جداول در بوت استرپ ۴ را به یاد داشته باشید گفتیم که کلاس table در آنها ثابت است و برای ظاهر کلاس های دیگر را به آن اضافه میکردیم در مورد باکس ها نیز کلاس alert ثابت است و ما کلاس های دیگر را به آن اضافه میکنیم. در آموزش جدول گفتیم برای کلاس های رنگی اسم کلاس رنگی را به table اضافه میکنیم مانند table-success در باکس نیز همین حالت صدق میکند شما باید کلاس رنگی را به alert اضافه کنید مانند alert-success با این کلاس باکسی با رنگ سبز میسازید کلاس های رنگی alert را برای شما لیست میکنیم:

  • alert-success : به کمک این کلاس باکس با رنگ سبز میتوانید بسازید.
  • alert-info : به کمک این کلاس میتوانید رنگ آبی به باکس های خود بدهید.
  • alert-warning : رنگی که این کلاس به باکس شما میدهد نارنجی است.
  • alert-danger : با این کلاس میتوانید رنگ قرمز به باکس های خود بدهید.
  • alert-primary :به کمک این کلاس رنگ آبی کمرنگ میتوانید به باکس خود بدهید.
  • alert-secondary : رنگ این کلاس خاکستری است.
  • alert-light : رنگ روشن نزدیک به سفید توسط این کلاس ساخته میشود.
  • alert-dark : رنگ تیره نزدیک به سیاه نیز توسط این کلاس ایجاد میشود.

برای واضح شدن موضوع میتوانید از کد زیر استفاده کنید این کد باکسی با رنگ سبز برای شما میسازد:

<div class="alert alert-success">
    This alert box could indicate a successful or positive action.
  </div>

ساخت باکس با لینک

اگر قصد دارید درون باکس های خود لینک قرار دهید باید به روش بوت استرپ آن را انجام دهید . بوت استرپ برای لینک ها نیز کلاس مخصوصی دارد برای این کار باید از کلاس alert-link در تگ a خود استفاده کنید در این صورت بر پایه رنگی که برای باکس خود انتخاب کرده اید لینک شما نیز رنگ گرفته و با باکس شما سازگار میشود برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="alert alert-success">
    You should <a href="#" class="alert-link">read this message</a>.
  </div>

باکس هایی با امکان بسته شدن از نوع ساده

گاهی اوقات میخواهید به کاربر خود این امکان را بدهید که پس از مطالعه محتوای باکس آن را ببندد تا دیگر مزاحم مشاهده باقی مطالب در صفحه نشود. در حالت عادی اگر بخواهید این کار را انجام بدهید باید از جیکوئری کمک بگیرید اما باز بوت استرپ به کمک شما آمده و تنها با یک کلاس ساده و یک attribute این کار را برای شما انجام میدهد. برای این کار شما به یک تگ button نیاز دارید تا دکمه ضبدر یا همان بستن صفحه شما باشد. اگر خاطرتان باشد گفتیم کلاس alert یک کلاس ثابت برای باکس ها هست و بعد آن کلاس رنگی خود را اضافه میکردیم به عنوان کلاس دوم حال کلاس بسته شدن را به عنوان کلاس سوم با نام alert-dismissible اضافه میکنیم. بعد از آن شما باید button خود را تعریف کنید و به آن کلاس close را بدهید و همچنین attribute با نام data-dismiss با مقدار alert به آن بدهید. به همین راحتی شما باکسی با امکان بسته شدن ساخته اید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

 

باکس هایی با امکان بسته شدن با افکت

در آموزش بالا باکس های شما یک باره بسته میشوند چون افکتی ندارند اگر قصد دارید باکس هایی با امکان fade شدن بسازید مجددا باید از کلاس های بوت استرپ کمک بگیرید . همه موارد مشابه قسمت بالاست با این تفاوت که شما باید کلاس های افکت را نیز اضافه کنید . در قسمت قبل ما به تگ خود ۳ کلاس دادیم یکی alert که گفتیم ثابت است دیگری کلاس رنگی که alert-success بود و آخری alert-dismissible که برای امکان بسته شدن بود حال کلاس ۴ رو fade قرار میدهیم اگر این کار را انجام بدهید به بوت استرپ میگویید که تگ من را fade کن یا اصطلاحا محو کن پس هیچ چیز در خروجی نمیبینید پس راه حل چیست؟

باید بعد از کلاس fade کلاس show را هم قرار دهید با این کار میگویید که در حالت عادی تگ من نمایش داده شود و بعد از کلیک روی button محو شود. به همین راحتی شما امکان محو شدن با افکت را به باکس خود دادید.

برای واضح شدن موضوع از کد زیر کمک بگیرید:

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

 

برای کمک به شما عزیزان کل موارد آموزش را در کد زیر قرار داده ایم:

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<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>
------------------------------------------------------------------------------------------------------------------------

<div class="container">
  <h2>Alert Links</h2>
  <p>Add the alert-link class to any links inside the alert box to create "matching colored links".</p>
  <div class="alert alert-success">
    <strong>Success!</strong> You should <a href="http://hiprogram.ir" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-primary">
    <strong>Primary!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-secondary">
    <strong>Secondary!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-dark">
    <strong>Dark!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-light">
    <strong>Light!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
</div>
------------------------------------------------------------------------------------------------------------------------

<div class="container">
  <h2>Alerts</h2>
  <p>The button with class="close" and data-dismiss="alert" is used to close the alert box.</p>
  <p>The alert-dismissible class adds some extra padding to the close button.</p>
  <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>
  <div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
  </div>
  <div class="alert alert-warning alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.
  </div>
  <div class="alert alert-danger alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
  </div>
  <div class="alert alert-primary alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Primary!</strong> Indicates an important action.
  </div>
  <div class="alert alert-secondary alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Secondary!</strong> Indicates a slightly less important action.
  </div>
  <div class="alert alert-dark alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-light alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Light!</strong> Light grey alert.
  </div>
</div>
------------------------------------------------------------------------------------------------------------------------
<div class="container">
  <h2>Animated Alerts</h2>
  <p>The .fade and .show classes adds a fading effect when closing the alert message.</p>
  <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>
  <div class="alert alert-info alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
  </div>
  <div class="alert alert-warning alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.
  </div>
  <div class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
  </div>
  <div class="alert alert-primary alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Primary!</strong> Indicates an important action.
  </div>
  <div class="alert alert-secondary alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Secondary!</strong> Indicates a slightly less important action.
  </div>
  <div class="alert alert-dark alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-light alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Light!</strong> Light grey alert.
  </div>
</div>
<br>
</body>
</html>

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه هفتم (تصویر)

آموزش Bootstrap 4 جلسه نهم (button)

 

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

 

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

اگر این مطلب آموزنده بود به ما امتیاز دهید

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

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


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

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

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

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

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

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