Bootstrap skrin lebih besar


Bab ini akan menerangkan satu lagi ciri yang disokong oleh Bootstrap, Jumbotron. Seperti namanya, komponen ini meningkatkan saiz tajuk dan menambah lebih banyak margin pada kandungan halaman pendaratan. Langkah-langkah untuk menggunakan Jumbotron adalah seperti berikut:

  • Buat bekas <div> dengan kelas .jumbotron.

  • Selain <h1> yang lebih besar, berat fon berat fon telah dikurangkan kepada 200px.

Contoh berikut menunjukkan ini:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <div class="jumbotron">
      <h1>欢迎登陆页面！</h1>
      <p>这是一个超大屏幕（Jumbotron）的实例。</p>
      <p><a class="btn btn-primary btn-lg" role="button">
         学习更多</a>
      </p>
   </div>
</div>

</body>
</html>

Instance Running»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Hasil berjalan

Untuk mendapatkan lebar penuh tanpa bulat sudut Untuk skrin jumbo, sila gunakan kelas .jumbotron di luar semua kelas .bekas, seperti ditunjukkan dalam contoh berikut:


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron">
   <div class="container">
      <h1>欢迎登陆页面！</h1>
      <p>这是一个超大屏幕（Jumbotron）的实例。</p>
      <p><a class="btn btn-primary btn-lg" role="button">
         学习更多</a>
      </p>
   </div>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian