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ỉ.
Bạn nên đọc
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Giải đáp những câu hỏi về Bootstrap thường gặp
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 5: Màu sắc trong Bootstrap 5
-
Bài 4: Typography trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 3: Hệ thống lưới Grid System trong Bootstrap 5
-
Bài 6: Bảng trong Bootstrap 5
Cũ vẫn chất
-
Công thức Minecraft để chế tạo đồ cơ bản, thức ăn, công cụ dụng cụ, đồ bảo hộ, len, màu nhuộm
Hôm qua 1 -
200 biệt danh cho người yêu bằng tiếng Anh hay và ngọt ngào
2 ngày -
Cách xem phiên bản di động của một trang web bất kỳ trên máy tính
Hôm qua -
11 thủ thuật mở Local Group Policy Editor trên Windows
Hôm qua -
Stt cho những đêm tâm trạng không ngủ được
Hôm qua -
Câu nói hay về người thứ ba, stt về người thứ ba trong tình yêu thâm thúy
Hôm qua -
Cách chuyển dữ liệu giữa các máy tính
2 ngày -
Những status cảm động níu kéo người yêu cũ
2 ngày -
Cách quản lý mật khẩu đã lưu trên Microsoft Edge: Xem, xóa, sửa, xuất
Hôm qua -
Khắc phục tình trạng các phím chức năng không hoạt động trong Windows 10
Hôm qua