نمادها

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

آموزش 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 : رنگ تیره نزدیک به سیاه نیز توسط این کلاس ایجاد میشود.

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

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

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

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

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

 

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

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

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

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

 

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

 

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

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

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

 

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

 

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

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (1 رای, میانگین: 5٫00 امتیاز از 5)
Loading...

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

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

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

پاسخی بگذارید

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

*

code

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