Jumbotron và Page Header

Trong bài học ngày hôm nay chúng ta sẽ tìm hiểu cách tạo một hộp để kêu gọi sự chú ý của người đọc bằng cách sử dụng lớp jumbotron trong Bootstrap 3. Đồng thời cũng tìm hiểu về cách tạo phần đầu trang (Page Header) giống như 1 phần ngăn cách đầu với các phần nội dung khác.

Lớp .Jumbotron

Lớp jumbotron tạo ra một hộp lớn để kêu gọi sự chú ý nhiều hơn đến một số nội dung hoặc thông tin đặc biệt.

Một jumbotron được hiển thị dưới dạng một hộp màu xám với các góc tròn. Nó cũng phóng to kích thước phông chữ của văn bản bên trong nó.

Mẹo: Bên trong jumbotron, bạn có thể đặt gần như bất kỳ HTML hợp lệ nào, bao gồm các phần tử / lớp Bootstrap khác.

Sử dụng phần tử <div> với lớp .jumbotron để tạo jumbotron:

Ví dụ:

  <div class="jumbotron">
    <h5>Học Bootstrap jumbotron</h5>
    <p>Amazing goob job Bootstrap</p>
  </div>

Kết quả :

Jumbotron bên trong Container

Đặt jumbotron bên trong <div class="container">nếu bạn muốn jumbotron KHÔNG kéo dài đến mép màn hình:

Ví dụ

<div class="container">
<div class="jumbotron">
<h3 id="hoc-bootstrap-jumbotron">Học Bootstrap jumbotron </h3>
<p>Amazing goob job Bootstrap</p>
</div>
</div>

Jumbotron bên ngoài Container

Đặt jumbotron bên ngoài </div class="container"> nếu bạn muốn jumbotron mở rộng ra các cạnh màn hình.

<div class="jumbotron">
<h3 id="hoc-bootstrap-jumbotron">Học Bootstrap jumbotron </h3>
<p>Amazing goob job Bootstrap</p>

Tạo đầu trang (page header)

Lớp .page-header thêm một đường ngang bên dưới tiêu đề (+ thêm một số khoảng trắng xung quanh phần tử):

Ví dụ page header trong bootstrap 3

Sử dụng phần tử <div>với lớp .page-headerđể tạo tiêu đề trang:

Ví dụ:

<div class="container">
  <div class="page-header">
    <h1 id="vi-du-page-header">V&iacute; dụ Page Header</h1>      
  </div>
  <p>Học Bootstrap.</p>      
  <p>Học TV.</p>
 </div>

Kết quả: