مكوِّن Jumbotron (شاشة الإعلانات) في إطار العمل Bootstrap

استخدم مكوِّن Jumbotron (شاشة الإعلان) للتركيز على محتوى ذي أهميّة في صفحة الويب.

مكوِّن مرن وخفيف يمكنه التمدّد على كامل إطار العرض لإبراز رسائل دعائيّة أساسيّة على الموقع.

<div class="jumbotron">
  <h1 class="display-4">مرحبا أيّها العالم!</h1>
  <p class="lead">هذا مثال على محتوى شديد الأهميّة، مكوِّن يشبه شاشات الإعلانات لجذب انتباه أكبر لمحتوى مميَّز.
  </p>
  <hr class="my-4">
  <p>يستخدم المكوِّن أصنافًا خدميّة للخطوط والتباعد لنشر المحتوى ضمن الحاويّة الأعرض.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">اقرأ المزيد.</a>
  </p>
</div>

طبِّق الصنف المعدِّل ‎.jumbotron-fluid مع الصنف ‎.jumbotron وأضف في الداخل الصنف ‎.container أو ‎.container-fluid للحصول مكوِّن Jumbotron مائع (fluid).

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">مكوِّن Jumbotron مائع</h1>
    <p class="lead">هذا صنف Jumbotron مُعَدَّل يشغل المساحة الأفقيّة للعنصُر الأب كاملة.</p>
  </div>
</div>

مصادر

• صفحة Jumbotron في توثيق Bootstrap.