Jumbotron trong bootstrap 5

Công nghệ Lập trình Bootstrap 5

11/12
Thạch
Bootstrap 5
0
191

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.

Bài 7: Ảnh trong Bootstrap 5

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 từ bản Bootstrap 3, tuy nhiên lại không còn được hỗ trợ trong Bootstrap 5. Nếu muốn tạo một khung nổi bật tương tự như Jumbotron trong Bootstrap 5 thì bạn có thể sử dụng phần tử <div> và thêm các lớp trợ giúp cùng màu sắc đặc biệt cũng sẽ ra hiệu quả tương tự:

<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 Sinitc.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 - Sinitc.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  - Sinitc.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 - Sinitc.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  - Sinitc.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: