Kết nối

[Bootstrap 4] Phần 8: Jumbotron

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

Bình luận Facebook

1
Để lại bình luận

avatar
1000
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Các tác giả bình luận
Các tác giả bình luận gần đây
  Theo dõi  
mới nhất cũ nhất được bình chọn nhiều nhất
Thông báo của
trackback

[…] << Bài trước Trang mục lục Bài tiếp theo >> […]