Bootstrap Jumbotron ورأس الصفحة
صنع جمبوترون
يشير jumbotron إلى صندوق كبير لاستدعاء مزيد من الاهتمام لبعض المحتويات أو المعلومات الخاصة.
يتم عرض jumbotron كمربع رمادي بزوايا مستديرة. يقوم أيضًا بتكبير أحجام خطوط النص الموجود بداخله.
تلميح: داخل jumbotron ، يمكنك وضع أي HTML صالح تقريبًا ، بما في ذلك عناصر / فئات Bootstrap الأخرى.
استخدم <div>عنصرًا مع فئة .jumbotronلإنشاء jumbotron:
البرنامج التعليمي Bootstrap
Bootstrap هو إطار عمل HTML و CSS و JS الأكثر شيوعًا لتطوير مشاريع متنقلة سريعة الاستجابة على الويب.
جمبوترون داخل الحاوية
ضع 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>
حاوية جمبوترون الخارجية
ضع الجامبوترون خارج <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>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
إنشاء رأس الصفحة
رأس الصفحة مثل مقسم القسم.
يضيف الفصل .page-headerخطًا أفقيًا أسفل العنوان (+ يضيف بعض المساحة الإضافية حول العنصر):
مثال على رأس الصفحة
استخدم <div>عنصرًا مع فئة .page-headerلإنشاء رأس صفحة:
مثال
<div class="page-header">
<h1>Example Page Header</h1>
</div>