[Bootstrap] Phần 7: Jumbotron, Well và Page Header

Trong bài này, chúng ta sẽ học 2 lớp .jumbotron và .well dùng để tạo một vùng văn bản có nền xám.

Lớp .jumbotron: Lớp này dùng để tạo 1 hộp xám với 1 đoạn nội dung bên trong. Một jumbotron là 1 hộp xám với các góc được bo tròn. Ví dụ sau tạo các jumbotron bên trong và bên ngoài lớp .container.

<div class="container">
  <div class="jumbotron">
    <p>Hộp Jumbotron bên trong lớp .container</p> 
  </div>
</div>
<div class="jumbotron">
    <p>Hộp Jumbotron bên ngoài lớp .container</p> 
</div>

Lớp .page-header

Một phần đầu trang giống như 1 phần ngăn cách đầu với các phần nội dung khác.
Chúng ta có thể dùng lớp .page-header để tạo phần đầu trang.

<div class="page-header">
    <p>Phần đầu trang .page-header</p> 
</div>

Lớp .well: Tương tự như jumbotron, lớp .well dùng để vùng xám chứa 1 dòng văn bản. Các lớp .well-sm và .well-lg dùng để định nghĩa cho well có kích thước nhỏ và well có kích thước lớn.

<div class="container">
	<div class="well">Well cơ bản</div>
	<div class="well well-sm">Well kích thước nhỏ</div>
	<div class="well well-lg">Well kích thước lớn</div>
</div>

Như vậy bài viết đã giúp các bạn biết cách dùng các lớp khai báo cho các vùng Jumbotron, Well và Page Header.