ایجاد یک Jumbotron
Jumbotron نشان دهنده یک کادر بزرگ است برای اینکه توجه بیشتری را نسبت به برخی مطالب و یا اطلاعات خاص جلب کند.
Jumbotron به شکل یک کادر خاکستری با گوشه های گرد نمایش داده می شود. همچنین اندازه فونت متن را بزرگ تر می کند.
نکته : داخل یک jumbotron می توانید هر HTML معتبری را به همراه عناصر یا کلاس های دیگر قرار دهید.
برای ایجاد یک jumbotron از یک عنصر <div> با کلاس jumbotron. استفاده کنید.
قرار دادن jumbotron داخل یک Container (ظرف)
چنانچه نمی خواهید jumbotron تا لبه های صفحه کشیده شود، آن را داخل یک div با کلاس Container قرار دهید (<"div class="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="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>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 خارج از یک Container (ظرف)
چنانچه می خواهید jumbotron تا لبه های صفحه کشیده شود آن را خارج از <"div class="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="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="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>
</html>
ایجاد یک هدر برای صفحه
هدر صفحه شبیه یک جدا کننده عمل می کند.
کلاس .page-header یک خط افقی را زیر هدر اضافه می کند ( علاوه بر آن مقداری فضای ویژه را در اطراف عنصر اضافه می کند )
مثال هدر صفحه
برای ایجاد هدر از عنصر <div> با کلاس page-header. استفاده کنید.
<!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="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="page-header">
<h1>Example Page Header</h1>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>