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

1.278 lượt xem 
 Cập nhật lần cuối: 10/01/2017 lúc 18:18:15
Thể loại: Bootstrap, Thiết kế Web 

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.

jumbotron

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

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

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

Bình luận Facebook

1
Để lại bình luận

avatar
1000
0 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of