گروه مقاله : Bootstrap
تاريخ انتشار : 1394/06/11 - 16:53
كد :6105

اضافه کردن گزینه Jumbotron در Bootstrap

یک 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 سفارشی سازی کنید. در مقالات بعدی به سفارشی سازی نیز می پردازیم.
 
 
نظرات كاربران :