Bootstrap Jumbotron và Tiêu đề trang
Tạo một Jumbotron
Một jumbotron chỉ ra một hộp lớn để kêu gọi sự chú ý nhiều hơn đến một số nội dung hoặc thông tin đặc biệt.
Một jumbotron được hiển thị dưới dạng một hộp màu xám với các góc 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ư bất kỳ HTML hợp lệ nào, bao gồm các phần tử / lớp Bootstrap khác.
Sử dụng một <div>phần tử với lớp .jumbotronđể tạo một jumbotron:
Hướng dẫn Bootstrap
Bootstrap là khuôn khổ HTML, CSS và JS phổ biến nhất để phát triển các dự án đáp ứng, ưu tiên thiết bị di động trên web.
Jumbotron Inside Container
Đặt jumbotron bên trong <div class="container">nếu bạn muốn jumbotron KHÔNG kéo dài đến mép màn hình:
Thí 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ộp chứa bên ngoài Jumbotron
Đặt jumbotron bên ngoài <div class="container">nếu bạn muốn jumbotron kéo dài đến các cạnh màn hình:
Thí 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 đầu trang
Tiêu đề trang giống như một ngăn chia phần.
Lớp .page-headerthêm một đường ngang dưới tiêu đề (+ thêm một số khoảng trống thừa xung quanh phần tử):
Tiêu đề trang mẫu
Sử dụng một <div>phần tử có lớp .page-headerđể tạo tiêu đề trang:
Thí dụ
<div class="page-header">
<h1>Example Page Header</h1>
</div>