Bootstrap - Jumbotron

Chương này sẽ thảo luận về một tính năng nữa mà Bootstrap hỗ trợ, Jumbotron. Như tên gợi ý, thành phần này có thể tùy chọn tăng kích thước của tiêu đề và thêm nhiều lề cho nội dung trang đích. Để sử dụng Jumbotron -

• Tạo một vùng chứa <div> với lớp .jumbotron.

• Ngoài <h1> lớn hơn, font-weight được giảm xuống 200px.

Ví dụ sau đây chứng minh điều này -

<div class = "container">

   <div class = "jumbotron">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

Để có được một jumbotron có chiều rộng đầy đủ và không có góc tròn, hãy sử dụng .jumbotron lớp học bên ngoài tất cả .container các lớp học và thay vào đó thêm một .container bên trong, như được hiển thị trong ví dụ sau:

<div class = "jumbotron">
   
   <div class = "container">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>