گروه مقاله : Bootstrap
تاريخ انتشار : 1394/06/11 - 16:53
كد :6105
یک jumbotron یک جعبه بزرگ است که برای جلب کردن یک توجه ویژه به یک محتوا یا اطلاعات خاص، ایجاد شده است.
یک jumbotron به صورت یک جعبه ی خاکستری با گوشه های گرد نمایش داده می شود. همچنین اندازه ی فونت متن درون آن نیز بزرگ می شود.
برای ایجاد یک jumbotron می توانید از یک عنصر <div> با کلاس jumbotron. استفاده کنید.
مثال زیر، سرفصل و اولین پاراگراف را درون یک jumbotron قرار می دهد :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
نکته : آیا این امکان وجود دارد که jumbotron را سفارشی سازی کنیم؟ در صورتی که یک رنگ دیگر را بخواهیم باید چکار کنیم؟
شما می توانید تمام عناصر و کلاس ها را در Bootstrap سفارشی سازی کنید. در مقالات بعدی به سفارشی سازی نیز می پردازیم.