Bootstrap 4 - Bootstrap Jumbotron
Bootstrap Jumbotron
Jumbotron là một phần không thể thiếu ở giao diện trong bootstrap, tác dụng chính của Jumbotron làm tạo ra một vùng hiển thị nội dung quan trọng nhất của website.
Jumbotron chính là 1 class, lớp dùng để tạo ra một background màu xám, nó được bọc các nội dung ở bên trong và thường được dùng để mô tả những thông tin quan trọng như khuyến mãi, giới thiệu hay đưa ra thông báo quan trọng của cửa hàng hay doanh nghiệp trên chính website đó.
Lớp .jumbotron trong thẻ <div> được sử dụng để tạo jumbotron.
Ví dụ lớp
Nếu bạn muốn jumbotron không kéo dài đến mép màn hình. Đặt lớp jumbotron trong lớp container,
Đặt jumbotron bên trong <div class = "container">.
Ví dụ:
<div class="container">
<div class="jumbotron">
<h1>This is Jumbotron inside container!</h1>
<p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Lớp Jumbotron đặt ngoài lớp Container
Khi bạn muốn jumbotron kéo dài đến các cạnh màn hình.
Đặt jumbotron bên ngoài <div class="container">.
Ví dụ:
<div class="jumbotron">
<h1>This is Jumbotron outside container!</h1>
<p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Jumbotron hiện thị tràn màn hình
Để có được một jumbotron không có đường viền tròn, bạn phải thêm lớp .jumbotron-liquid và .container hoặc .container-liquid bên trong nó.
Ví dụ:
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Full-width Jumbotron</h1>
<p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Làm tiêu đề trang
Một website sẽ có một hoặc nhiều trang (web) khác nhau. Và mỗi trang web thường sẽ có một tiêu đề để phân biệt giữa chúng. Nó thêm một đường ngang dưới tiêu đề.
Lớp .page-header được sử dụng để tạo tiêu đề trang.
Ví dụ:
<div class="container">
<div class="page-header">
<h1>Example Page Header</h1>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>