نحوه تعریف Jumbotron و هشدارها (Alert) در بوت‌استرپ


نویسنده:
شنبه ۱۰ آبان ۱۳۹۹
Jumbotron و هشدارها در بوت‌استرپ

برای تاکید بر روی مطلبی و جذب نظر خوانندگان در وب‌سایتمان‌ می‌توانیم از کلاس‌هایی مانند Jumbotron که Bootstrap4 در اختیارمان قرار می‌دهد استفاده کنیم. همچنین اگر می‌خواهید به بازدیدکنندگان سایت خود هشدارهایی دهید یا اطلاع‌رسانی‌هایی کنید، می‌توانید از Alerts کمک بگیرید. در این مقاله به بررسی کلاس‌های Jumbotron و هشدارها در بوت‌استرپ خواهیم پرداخت.

Jumbotron در بوت‌استرپ

jumbotron یک کادرِ مربع‌مانندِ خاکستری رنگ است که می‌تواند توجه بازدیدکننده را به خود جلب کند. این کادر مربعی معمولا برای مشخص کردن قسمت‌های حساس و مهم یک متن مورد استفاده قرار می‌گیرد و اندازه فونت متون داخل خود را بزرگ می‌کند. شما می‌توانید هر کد HTML‌ای را در jumbotron قرار دهید. برای ایجاد این کادرها، ابتدا یک عنصر <div> ایجاد کرده و سپس به آن کلاس jumbotron. اضافه می‌کنیم. در مثال زیر نمونه‌ای از کد jumbotron را مشاهده می‌کنید:

Jumbotron و هشدارها در بوت‌استرپ


jumbotron تمام صفحه

اگر می‌خواهید Jumbotron تمام عرض فضای صفحه نمایش شما را اشغال نکند، آن را داخل عنصر <“div class=”container> قرار دهید:

Jumbotron در بوت‌استرپ


کلاس contianer

شما می‌توانید در مثال jumbotron تمام صفحه، بجای contianer از کلاس container-fluid استفاده کنید. کلاس .contianer مطالب را در وسط صفحه قرار داده و دو طرف ان را فضایی خالی می‌گذارد. ولی در سایزهای کوچک مانند دستگاه موبایل، این فاصله از بین رفته و به صورت تمام صفحه نمایش داده می‌شود.

کلاس .container-fluid به این صورت است که در تمامی نمایشگرها می‌توانید، آن را به صورت تمام صفحه ببینید. همچنی در تمام نمایشگرها به صورت تمام صفحه المان‌های شما به نمایش در خواهند امد.

حال که متوجه شدید، Jumbotron چیست و چگونه می‌توانید از آن در کدهای خود استفاده کنید، نوبت به معرفی کلاس‌های مربوط به Alerts می‌باشد:

Alerts

بوت‌استرپ یک راه ساده برای ساخت پیغام‌های از پیش تعریف شده فراهم آورده است. آن هم استفاده از کدهای Alerts است.

alerts در بوت‌استرپ

هشدارها در بوت‌استرپ‌4 معمولا مستطیل‌هایی رنگی هستند که دارای پیام خاصی برای کاربر می‌باشند. برای ساختن آن ها باید کلاس alert. را به همراه یکی از کلاس‌های زیر به آن اضافه کنید:

  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light
  • .alert-dark

به این مثال توجه کنید:

کلاس alert-link

اگر بخواهید در داخل هشدارهای خود لینکی قرار دهید، متوجه می‌شوید که رنگ آن تغییر می‌کند و با بقیه هشدارها تفاوت دارد. بنابراین برای حل مشکل می‌توانید به لینک‌های خود کلاس alert-link. را اضافه کنید:

بستن پیغام‌ها در Alerts

برای بستن پیغام‌ها باید بر روی علامت ضربدر در انتهای پیغام کلیلک کرد. برای بسته شدن یک پیغام باید کلاس  alert-dismissible. را به container پیغام افزود. سپس کلاس “class=”close و “data-dismiss=”alert را به لینک یا دکمهِ مربوطه اضافه کرد.

افزودن انیمیشن به Alerts

کلاس‌های .fade و .show هنگام بستن پیام هشدار، یک اثر محو می‌کند به مثال زیر توجه کنید :

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

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

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