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òn được gọi là jumbovision là 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, công ty đã đặt JumboTron làm thương hiệu vào năm 1985. 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 bức ả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 (ví dụ như quảng trường, phố đi bộ).

Còn trong Bootstrap, Jumbotron là một box màu xám chứa văn bản, với mục đích là tăng thêm sự chú ý cho văn bản trong đó. Khi cảm thấy văn bản/thông tin nào thật quan trọng, cần phải làm cho nó xuất hiện thật lớn, thật gây chú ý, bạn chỉ cần viết nó trong Jumbotron.

Jumbotron trên Bootstrap 5

Jumbotron được giới thiệu ở Bootstrap 3 như một box lớn, có phần đệm làm nổi bật nội dung hoặc thông tin đặc biệt. Dù hiện jumbotron không còn được hỗ trợ ở 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 phần tử <div>, class trợ giúp đặc biệt và class màu.

Jumbotron là một hàm cần thiết trong phát triển trang web . Nó giúp chủ sở hữu hiểu nội dung 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 dùng margin, padding, contextual 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 sau tạo nên một jumbotron cơ bản trên trang web. Bạn có thể dùng class khác để sáng tạo các jumbotron như ý muốn:

<div class = "m-3 p-5 bg-secondary text-white"> information and data. </div>

• Class "m-3" (margin) dùng để thiết lập margin của tag <div>. Bạn có thể dùng phần tử top, bottom, left hoặc right.
• Class p-5 dùng để đặt padding của tag <div>.
• Class background theo ngữ cảnh cần thiết lập một background jumbotron. Bạn có thể chọn ảnh làm background trong tag <div>.

Ví dụ cụ thể trên 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 cứ thành phần HTML nào, thậm chí cả các thành phần, class của Bootstrap.

Sử dụng <div> với class .jumbotron để tạo một Jumbotron như ví dụ dưới đây:

<!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ả 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ư thế này này:

<!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>

Và kết quả sẽ xuất hiện như dưới đây:

Đó hết rồi, cái tên nghe có vẻ lạ thôi, chứ cách sử dụng Jumbotron cũng khá đơn giản bạn nhỉ.