Jumbotron là một màn hình tivi cỡ lớn, được chiếu ở nơi công cộng (chẳng hạn như sân vận động) phục vụ rất đông khán giả.

Jumbotron
Trong Boostrap, jumbotron là một vùng hộp xám chứa thông tin hay nội dung đặc biệt nào đó. Bạn có thể nhúng bất kỳ thẻ HTML nào bên trong jumbotron, bao gồm các lớp và phần tử Bootstrap.
Bạn có thể một phần tử div chứa lớp .jumbotron để tạo ra một jumbotron. Jumbotron có thể dùng để tạo phần header cho trang web hoặc phần nội dung lớn trong trang.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>Sử dụng Jumbotron --- dammio.com</h1> <p>Bootstrap là 1 framework dùng để thiết kế giao diện Web đáp ứng phổ biến hiện nay.</p> </div> <p>Đoạn văn bản 1.</p> <p>Đoạn văn bản 2.</p> </div> </body> </html>
Trong ví dụ trên, bạn có thể thấy jumbotron được tạo là 1 vùng xám với nội dung bên trong với 4 góc bo tròn.
Jumbotron đầy đủ kích thước
Nếu bạn muốn jumbotron hiển thị đầy đủ kích thước (full-width) mà không có 4 góc bo tròn, bạn có thể thêm lớp .jumbotron-fluid và bên trong jumbotron thêm một lớp .container hoặc .container-fluid nằm trong phần tử div.
<!DOCTYPE html> <html lang="en"> <head> <title>Ví dụ Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1>Jumbotron Full-width --- dammio.com</h1> <p>Bootstrap là 1 framework dùng để thiết kế giao diện Web đáp ứng phổ biến hiện nay.</p> </div> </div> <div class="container"> <p>Đoạn văn bản 1.</p> <p>Đoạn văn bản 2.</p> </div> </body> </html>
Kết luận
Bạn đã tìm hiểu về jumbotron trong bài này. Tuy nhiên, để có những giao diện Web đẹp, bạn phải kết hợp jumbotron với một số lớp khác nữa. Mời bạn tiếp tục theo dõi bài tiếp theo.
- APA:
Dammio. (2018). [Bootstrap 4] Phần 8: Jumbotron. https://www.dammio.com/2018/10/05/bootstrap-4-phan-8-jumbotron.
- BibTeX:
@misc{dammio,
author = {Dammio},
title = {[Bootstrap 4] Phần 8: Jumbotron},
year = {2018},
url = {https://www.dammio.com/2018/10/05/bootstrap-4-phan-8-jumbotron},
urldate = {2025-02-07}
}