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

من موسوعة حسوب
< Bootstrap
مراجعة 12:37، 15 أبريل 2018 بواسطة محمد-أحمد-العيل (نقاش | مساهمات) (إضافة محتوى الصفحة)
اذهب إلى التنقل اذهب إلى البحث

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

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

مصادر