Tự học Bootstrap – Cơ bản – bài 06 - Hộp Jumbotron

Tạo 01 hộp Jumbotron

01 Jumbotron là 01 hộp lớn bao quanh 01 nội dung đáng chú ý (có thông tin đặc biệt).

01 hộp jumbotron có màu nền xám và đường viền tròn. Nó cũng phóng lớn dòng chữ bên trong.

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

Sử dụng 01 thẻ <div> với tên lớp .jumbotron để tạo 01 hộp jumbotron:

---

Jumbotron bên trong thẻ Container

Đặt hộp jumbotron bên trong thẻ <div class="container"> nếu bạn muốn hộp jumbotron KHÔNG mở rộng ra đến cạnh của màn hình.

Ví dụ:

<div class="container">
  <div class="jumbotron">
    <h1>Lớp học vi tính.COM</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>

---

Jumbotron bên ngoài thẻ Container

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

Ví dụ:

<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>

---

Tạo 01 tiêu đề trang

01 tiêu đề trang giống như 01 phần phân đoạn văn.

Lớp .page-header thêm 01 đường kẻ ngang dưới tiêu đề ( thêm vài khoảng trắng xung quanh phần tử):

Ví dụ: Page Header

Dùng 01 thẻ <div> với lớp .page-header để tạo 01 tiêu đề trang.

Ví dụ:

<div class="page-header">
  <h1>Ví dụ: Page Header</h1>
</div>