JUMBOTRON چیست ؟
عبارت jumbotron از کلمه ی jumbovision نشات گرفته شده است.
در بوت استرپ jumbotron به کادری بزرگ و عریض گفته میشود که بیشتر برای جلب توجه کاربران به تصاویر ,مطالب یا محتوای خاص مورد استفاده قرار میگیرد.
این
کادر به صورت پیش فرض و تعریف شده دارای پیش زمینه خاکستری و متون بزرگ و
لبه گرد است که با استفاده از دستورات css میتوان آن را به سلیقه خود
تغییر داد.
در این جلسه از دوره آموزش بوت استرپ به بررسی jumbortron در بوت استرپ می پردازیم .Jumbotron زمانی کاربرد دارد که در صفحات وب می خواهید برای یک متن خاص جلب توجه بیشتر ایجاد کنید.جامبوترون دربوت استرپ به صورت یک جعبه خاکستری با گوشه های گرد نمایش داده می شود.فونتی که داخل این کلاس قرار می گیردسایزبزرگ تری نسبت به فونت پیش فرض در بوت استرپ دارد.در Jumbotron میتوانید از تمام تگ های html و استایل ها و کلاس های Bootstrap استفاده کنید.
جامبوترون داخل DIV با کلاس CONTAINER:
جامبوترون به طور پیش فرض تمام عرض صفحه را در بر می گیردو برای اینکه آن را دروسط صفحه قرار دهین باید آن را درون یک div با کلاس container قراردهیم.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
JUMBOTRON خارج DIV با کلاس CONTAINER:
اگر می خواهید جامبوترون تمام عرض صفحه را در بر گیردآن را بیرون از تگ ازcontainer قراردهید.
<body><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>
</body>
کلاس PAGE HEADER در بوت استرپ :
به وسیله این کلاس یک خط افقی به زیر عنوان اضافه می شود و به صورت یک هدر نمایش داده می شود.