جامبوترون

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

جامبوترون (به انگلیسی: Jumbotron) در بوت استرپ ۴

جامبوترون نشان دهنده یک جعبه بزرگ برای جلب توجه بیشتر به مفهوم یا اطلاعات خاصی است.[۱]

نکته: درون یک جامبوترون تقریباً می‌توانید هر نوع HTML معتبری را قرار دهید، شامل کلاس ها/عناصر بوت استرپ دیگر.

از عنصر <div> با کلاس .jumbotronبرای ایجاد یک جامبوترون استفاده کنید:

مثال

1 <div class="jumbotron">
2   <h1>Bootstrap Tutorial</h1>
3   <p>Bootstrap is the most popular HTML, CSS...</p>
4 </div>


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


جامبوترون با عرض کامل

اگر می‌خواهید یک جامبوترون با عرض کامل (به انگلیسی: Full-width) و بدون گوشه‌های گِرد ایجاد کنید، کلاس .jumbotron-fluid و یک .container یا .container-fluid در داخل آن ایجاد کنید:

مثال

1 <div class="jumbotron jumbotron-fluid">
2   <div class="container">
3     <h1>Bootstrap Tutorial</h1>
4     <p>Bootstrap is the most popular HTML, CSS...</p>
5   </div>
6 </div>


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



منابع آموزشی