Bài 8: Jumbotron trong Bootstrap 5
Jumbotron là gì? Cách sử dụng Jumbotron Bootstrap 5 như thế nào? Hãy cùng Download.vn tìm hiểu nhé!
Jumbotron là gì?
Jumbotron đôi khi được gọi là jumbovision, là một loại màn hình video sử dụng công nghệ truyền hình màn hình lớn (video wall). Công nghệ này ban đầu được phát triển vào đầu những năm 1980 bởi Mitsubishi Electric và Sony, và từ năm 1985, Mitsubishi Electric đã đặt JumboTron là thương hiệu của mình. Jumbotron thường được sử dụng trong các sân vận động và địa điểm tổ chức buổi hòa nhạc để hiển thị những hình ảnh cận cảnh của sự kiện, cũng như những nơi công cộng ngoài trời như quảng trường, phố đi bộ.
Trong Bootstrap, Jumbotron là một hộp màu xám chứa văn bản, với mục đích là làm nổi bật văn bản trong đó. Khi muốn văn bản/thông tin nào quan trọng, cần làm cho nó xuất hiện lớn và thu hút, bạn chỉ cần viết nó trong Jumbotron.
Jumbotron trên Bootstrap 5
Jumbotron đã được giới thiệu từ Bootstrap 3 như là một hộp lớn, có viền nổi bật nội dung hoặc thông tin đặc biệt. Mặc dù jumbotron không còn được hỗ trợ trong phiên bản Bootstrap 5, nhưng chúng ta vẫn có thể đạt được kết quả tương tự bằng cách sử dụng thẻ <div>, class đặc biệt và class màu.
Jumbotron là một phần không thể thiếu trong phát triển trang web. Nó giúp chủ sở hữu hiểu nội dung được truyền tải tới người dùng. Nó tóm tắt trang và gói gọn nội dung chính trong một không gian nhỏ. Bootstrap 5 sử dụng margin, padding, class liên quan và class thiết kế khác để tạo một jumbotron cơ bản.
Công thức chung của Jumbotron trong Bootstrap
Công thức dưới đây tạo ra một jumbotron cơ bản trên trang web. Bạn có thể sử dụng class khác để tạo các jumbotron theo ý muốn:
<div class=”m-3 p-5 bg-secondary text-white”> thông tin và dữ liệu. </div>
- Class “m-3” (margin) được sử dụng để thiết lập margin của thẻ <div>. Bạn có thể sử dụng phần tử top, bottom, left hoặc right.
- Class “p-5” được sử dụng để thiết lập padding của thẻ <div>.
- Class background theo ngữ cảnh sẽ thiết lập một background cho jumbotron. Bạn cũng có thể chọn sử dụng ảnh làm background trong thẻ <div>.
Ví dụ cụ thể trên trang web Quantrimang.com
<div class=”mt-4 p-5 bg-primary text-white rounded”> <h1>Ví dụ về Jumbotron</h1> <p>Đây là đoạn văn bản giới thiệu về Jumbotron trên trang web QuanTriMang.com</p> </div>
Bạn sẽ thấy kết quả tương tự như sau:
Cách sử dụng Jumbotron trên Bootstrap 4
Bên trong Jumbotron, bạn có thể đặt gần như bất kỳ thành phần HTML nào, thậm chí cả các thành phần và class của Bootstrap.
Để tạo một Jumbotron như ví dụ dưới đây, hãy sử dụng thẻ <div> với class <.jumbotron>:
<!DOCTYPE html> <html lang=”en”> <head> <title>Ví dụ Bootstrap – Quantrimang.com</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.5.0/css/bootstrap.min.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js”></script> </head> <body> <div class=”container”> <div class=”jumbotron”> <h1>Jumbotron</h1> <p>Đây là thông tin cần làm nổi bật – Quantrimang.com.</p> </div> <p>Đây là thông tin bình thường.</p> <p>Đây là văn bản bình thường khác.</p> </div> </body> </html>
Khi đó, bạn sẽ nhận được kết quả như sau:
Jumbotron với chiều rộng full
Nếu bạn muốn tạo một Jumbotron với chiều rộng đầy đủ, không bo góc, hãy thêm class <.jumbotron-fluid> và <.container> hoặc <.container-fluid> bên trong nó, như sau:
<!DOCTYPE html> <html lang=”en”> <head> <title>Ví dụ Bootstrap – Quantrimang.com</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.5.0/css/bootstrap.min.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js”></script> </head> <body> <div class=”jumbotron jumbotron-fluid”> <div class=”container”> <h1>Jumbotron</h1> <p>Đây là thông tin cần làm nổi bật – Quantrimang.com.</p> </div> </div> <div class=”container”> <p>Đây là thông tin bình thường.</p> <p>Đây là văn bản bình thường khác.</p> </div> </body> </html>
Kết quả sẽ xuất hiện như sau:
Đó là tất cả, tên nghe có vẻ lạ rồi, nhưng cách sử dụng Jumbotron cũng khá đơn giản phải không?