خلق Jumbotron
ويشير jumbotron مربع كبير للفت الانتباه اضافية لبعض المحتويات الخاصة أو المعلومات.
يتم عرض jumbotron على شكل مربع رمادي مع زوايا مدورة. والتي تتعاظم أيضا أحجام خط النص داخله.
نصيحة: داخل jumbotron يمكنك وضع أي ما يقرب من HTML صالحة، بما في ذلك غيرها من Bootstrap عناصر / الطبقات.
استخدام <div> العنصر مع الطبقة .jumbotron لخلق jumbotron:
Bootstrap تعليمي
Bootstrap هو HTML، CSS، والإطار شبيبة الأكثر شعبية لتطوير مشاريع المحمول الحادية ومتجاوبة على شبكة الإنترنت.
Jumbotron داخل الحاويات
وضع jumbotron داخل <div class="container"> إذا كنت ترغب في jumbotron أن لا يمتد إلى حافة الشاشة:
مثال
<div class="container">
<div class="jumbotron">
<h1>Bootstrap
Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS
framework for developing
responsive, mobile-first projects on the
web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
انها محاولة لنفسك » Jumbotron خارج الحاويات
وضع jumbotron خارج <div class="container"> إذا كنت ترغب في jumbotron تمتد إلى حواف الشاشة:
مثال
<div class="jumbotron">
<h1>Bootstrap
Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS
framework for developing responsive,
mobile-first projects on the
web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
انها محاولة لنفسك » إنشاء رأس الصفحة
ورأس الصفحة هو مثل قسم المفرق.
و .page-header يضيف طبقة خط أفقي تحت عنوان (+ يضيف بعض مساحة إضافية حول العنصر):
مثال رأس الصفحة
استخدام <div> العنصر مع الطبقة .page-header لإنشاء رأس الصفحة: