Kết nối

[Bootstrap 4] Phần 8: Jumbotron

4.323 lượt xem 
 Cập nhật lần cuối: 24/10/2018 lúc 18:45:21
Thể loại: Bootstrap 

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ả.

Một màn hình tivi (jumbotron) ở trận bóng chày tại Chicago.

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.

Liên quan:  [Bootstrap 4] Phần 13: Thanh tiến trình
Trích dẫn bài viết
  • 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 = {2024-03-15}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x