جمبوترون (Jumbotron)
جمبوترون بوت استرپ یک «باکس برجسته» است. «باکس برجسته» یعنی بخشی بزرگ و پرپدینگ برای جلب توجه. در بوت استرپ 5، جمبوترون حذف شده؛ اما می توانیم با کلاس های کمکی همان اثر را بسازیم. مثل ساخت پوستر بزرگ برای اطلاعیه مدرسه.
جمبوترون در بوت استرپ 5
جمبوترون اصلی حذف شد. بنابراین از یک <div> ساده با کلاس های کمکی استفاده می کنیم. «کلاس (Class)» یعنی برچسب آماده استایل.
<div class="mt-4 p-5 bg-primary text-white rounded">
<h1>Jumbotron Example</h1>
<p>Lorem ipsum...</p>
</div>
چطور همان اثر را بسازیم؟
- یک
<div>بساز. .p-5برای پدینگ زیاد بزن..bg-primaryبرای پس زمینه رنگی بزن..text-whiteبرای کنتراست متن اضافه کن..roundedبرای گوشه های نرم بزن.
نکته: اگر پس زمینه تیره است، خوانایی متن را بررسی کن. کنتراست کم، خسته کننده می شود.
برای ادامه مسیر، صفحه تصاویر (Images) را ببین. همچنین بخش هشدارها (Alerts) برای پیام های مهم کاربردی است.
جمع بندی سریع
- جمبوترون 5 رسمی نیست.
- با
.p-5و رنگ ها جایگزین کن. - خوانایی متن را همیشه بسنج.
- گوشه گرد، ظاهر را دوستانه تر می کند.