Trong bài viết này, chúng mình sẽ cùng tìm hiểu về các đối tượng media trong Bootstrap 4, cách tạo và canh chỉnh chúng trên web nhé các bạn.
Đối tượng Media
Bootstrap cung cấp một cách dễ dàng để căn chỉnh các đối tượng đa phương tiện (như hình ảnh hoặc video) so với các nội dung. Các đối tượng phương tiện thường được sử dụng để hiển thị các bình luận blog, tweet, v.v.
Đối tượng phương tiện cơ bản
Để tạo một đối tượng media, hãy thêm lớp .media vào phần tử vùng chứa và đặt nội dung phương tiện bên trong vùng chứa con với lớp .media-body. Thêm padding và margin nếu cần, với các tiện ích giãn cách: Ví dụ:
<div class="media border p-3"> <img src="gx5.jpg" alt="NARA" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>NARA <small><i>Gia nhập ngày 15,10,2020</i></small></h4> <p>Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm</p> </div> </div>
Đối tượng phương tiện (Media) lồng nhau
Các đối tượng media cũng có thể được lồng vào nhau (một đối tượng media bên trong một đối tượng media): Để lồng các đối tượng phương tiện, hãy đặt một vùng chứa .media mới bên trong vùng chứa .media-body:
<div class="container mt-3"> <div class="media border p-3"> <img src="gx5.jpg" alt="NARA" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>NARA <small><i>Gia nhập ngày 15,10,2020</i></small></h4> <p>Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm</p> <div class="media border p-3"> <img src="gx55.jpg" alt="LUDA" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>NARA <small><i>Gia nhập ngày 15,5,2020</i></small></h4> <p>Là cô gái hay mộng mơ, xinh đẹp như tiên giang trần</p> </div> </div> </div></div></div>
</div></div>Kết quả:
Căn phải ảnh hình ảnh phương tiện Bootstrap 4
Để căn phải hình ảnh phương tiện, hãy thêm hình ảnh sau vùng chứa .media-body: Ví dụ :
<div class="container mt-3"> <div class="media border p-3"> <div class="media-body"> <h4>NARA <small><i>Gia nhập ngày 15,10,2020</i></small></h4> <p>Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm</p> </div> <img src="gx5.jpg" alt="NARA" class="mr-3 mt-3 rounded-circle" style="width:60px;"> </div> </div> </div>
Căn chỉnh trên cùng, giữa hoặc dưới cùng
Sử dụng các tiện ích flex, các lớp align-self- * để đặt đối tượng media ở trên cùng, giữa hoặc ở dưới cùng:
<div class="container mt-3"> <div class="media border p-3"> <img src="gx5.jpg" alt="NARA" class="mr-3 mt-3 rounded-circle align-self-center" style="width:60px;"> <div class="media-body"> <h4>NARA <small><i>Gia nhập ngày 15,10,2020</i></small></h4> <p>Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm</p> Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm </div> </div> <div class="media border p-3"> <img src="gx5.jpg" alt="NARA" class="mr-3 mt-3 rounded-circle align-self-start" style="width:60px;"> <div class="media-body"> <h4>NARA <small><i>Gia nhập ngày 15,10,2020</i></small></h4> <p>Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm</p> Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm </div> </div> <div class="media border p-3"> <img src="gx5.jpg" alt="NARA" class="mr-3 mt-3 rounded-circle align-self-end" style="width:60px;"> <div class="media-body"> <h4>NARA <small><i>Gia nhập ngày 15,10,2020</i></small></h4> <p>Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm</p> Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm Là cô gái mạnh mẽ nhưng không kém phần iếu đuối, yêu tím ghét hồng sống thủy chung không khóc thầm </div> </div> </div>
Lời kết:
Việc căn chỉnh các đối tượng media trong Bootstrap 4 tương đối dễ dàng phải không nào. Có gì chưa hiểu các bạn hãy để lại comment bên dưới nhé!
