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

من موسوعة حسوب
< Bootstrap
مراجعة 07:21، 12 يوليو 2020 بواسطة محمد-بغات (نقاش | مساهمات) (4.5)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى التنقل اذهب إلى البحث

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

مصادر