Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo các đối tượng media trong Bootstrap 3 và thực hiện việc canh chỉnh chúng trên web nhé các bạn.
Đối tượng media
Bootstrap 3 cung cấp 1 cách rất dễ dàng tạo và canh chỉnh các đối tượng media (như hình ảnh hoặc video) ở phía trái hoặc phải của phần nội dung nào đó. Việc này thuận lợi cho việc trình bày và hiển thị nội dung ở blog, bình luận, .. vân vân.
<div class="container"> <!-- Left-aligned --> <div class="media"> <div class="media-left"> <img src="nancy.jpg" class="media-object" style="width:60px"> </div> <div class="media-body"> <h4 class="media-heading">GaiXinh</h4> <p>Website Ảnh Gái Xinh</p> </div> </div> <!-- Right-aligned --> <div class="media"> <div class="media-body"> <h4 class="media-heading">GaiXinh</h4> <p>Website Ảnh Gái Xinh</p> </div> <div class="media-right"> <img src="cucccc.jpg" class="media-object" style="width:60px"> </div> </div> </div>
Kết quả như sau:
Phân tích ví dụ:
- Phần tử div với lớp .media để tạo 1 vùng chứa cho các đối tượng media.
- Lớp .media-left để canh chỉnh đối tượng media nào đó ở phía bên trái,
- Lớp .media-right để canh chỉnh ở phía bên phải.
- Văn bản xuất hiện bên cạnh 1 hình ảnh được đặt trong 1 vùng chứa với class=”media-body”. Ngoài ra, bạn có thể dùng lớp .media-heading để định nghĩa tiêu đề.
Canh chỉnh theo vị trí trên cùng (top), giữa (middle), và cuối cùng (bottom)
Chúng ta cũng có thể căn chỉnh đối tượng media ở vị trí top, middle hay bottom bằng cách sử dụng các lớp .media-top, .media-middle hay .media-bottom.
Ví dụ:
<!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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="cuccc.jpg" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Cúc Tịnh Y </h4>
<p>Cúc tịnh y siêu xinh dễ thương</p>
<p>Cúc tịnh y siêu xinh dễ thương</p>
<p>Cúc tịnh y siêu xinh dễ thương</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="cuccc.jpg" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Cúc Tịnh Y </h4>
<p>Cúc tịnh y siêu xinh dễ thương</p>
<p>Cúc tịnh y siêu xinh dễ thương</p>
<p>Cúc tịnh y siêu xinh dễ thương</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="cuccc.jpg" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Cúc Tịnh Y </h4>
<p>Cúc tịnh y siêu xinh dễ thương</p>
<p>Cúc tịnh y siêu xinh dễ thương</p>
<p>Cúc tịnh y siêu xinh dễ thương</p>
</div>
</div>
</div>
</body>
</html>Kết quả:
Đối tượng media phân cấp
Các đối tượng media cũng có thể phân cấp (1 đối tượng bên trong 1 đối tượng khác).
<div class="container"> <h3>Đối tượng media phân cấp (lồng nhau)</h3> <div class="media"> <div class="media-left"> <img src="cuccc.jpg" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">Cúc Tịnh Y <small><i>Đăng ngày 15/05/2020</i></small></h4> <p>Siêu xinh kute</p> <!-- Nested media object --> <div class="media"> <div class="media-left"> <img src="cuccc.jpg" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">Cúc Tịnh Y <small><i>Đăng ngày 15/05/2020</i></small></h4> <p>Siêu xinh kute</p> <!-- Nested media object --> <div class="media"> <div class="media-left"> <img src="cuccc.jpg" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">Cúc Tịnh Y <small><i>Đăng ngày 15/05/2020</i></small></h4> <p>Siêu xinh kute</p> </div> </div> </div> </div> </div> </div> </div>
kết quả:
Lời kết:
Các bạn thấy đấy tạo đối tượng media trong Bootstrap thông qua việc sử dụng các lớp có sẵn không hề khó. Điều chúng ta cần nhớ là các lớp sử dụng như thế nào. Nếu bạn cảm thấy khó nhớ hãy bookmark lại bài viết này xem dần nhé các bạn.
