Bootstrap/jumbotron

استخدم مكوِّن 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.