Bootstrap Jumbotron và Tiêu đề trang
Tạo Jumbotron
Jumbotron biểu thị một hộp lớn để thu hút sự chú ý nhiều hơn đến một số nội dung hoặc thông tin đặc biệt.
Jumbotron được hiển thị dưới dạng hộp màu xám với các góc được bo 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ư mọi HTML hợp lệ, bao gồm các thành phần/lớp Bootstrap khác.
Sử dụng phần tử <div> với lớp .jumbotron để tạo jumbotron:
Hướng dẫn khởi động
Bootstrap là khung HTML, CSS và JS phổ biến nhất để phát triển các dự án đáp ứng, di động đầu tiên trên web.
Jumbotron bên trong container
Đặt jumbotron bên trong <div class="container"> nếu bạn muốn jumbotron KHÔNG mở rộng ra mép màn hình:
Ví dụ
<div class="container">
<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>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Hãy tự mình thử » Thùng chứa bên ngoài Jumbotron
Đặ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:
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>
Hãy tự mình thử »Tạo tiêu đề trang
Tiêu đề trang giống như một bộ chia phần.
Lớp .page-header thêm một đường ngang dưới tiêu đề (+ thêm một số khoảng trắng xung quanh phần tử):
Tiêu đề trang mẫu
Sử dụng phần tử <div> với lớp .page-header để tạo tiêu đề trang:
