NTM Solutions

Thứ Hai, 13 tháng 3, 2017

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>