Một Jumbotron chỉ ra một hộp lớn để gom những nội dung hoặc thông tin cần chú ý lại.
Một Jumbotron được hiển thị một hộp màu xám với các góc tròn. Nó cũng phóng to cỡ chữ của văn bản bên trong nó.
Ví dụ sau tạo một Jumbotron bên trong container đầu tiên:
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<html>
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
</div>
<div class="container">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
</div>
<div class="container">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Kết quả:
Với Bootstrap các bạn chỉ cần đặt cho nó những class như vậy là nó sẽ tự gọi trong thư viện của nó ra. Thật thú vị phải không nào, đón chờ tiếp bài mới nhé sẽ còn nhiều điều hay cần khám phá đó. Nếu có yêu cầu, thắc mắc các bạn cứ comment phía dưới cùng trao đổi nhé!
Thiết kế web Hà Nội chúc các bạn thành công!
Thiết kế web Hà Nội chúc các bạn thành công!
1 comments:
Cảm ơn bạn đã chia sẻ thông tin !
......................................
LAPTOP ĐẠI DƯƠNG
118/17 Trần Quang Diệu, P.14, Q.3, HCM Hotline: 0906.112.812 - 0909730124 (A MINH)
Click xem chi tiết:
laptop xách tay giá rẻ tphcm hoặc laptop xach tay gia re tphcm
Post a Comment