Người Viết : ViKiMi Editor
Hiển thị nội dung hình ảnh hay bất kỳ một định dạng Video đòi hỏi phải có các hỗ trợ tốt để hiển thị hợp lý. Với bất kỳ một bài báo hay một trình bày nào cũng vậy hiển thị tốt với Media Objects luôn đem lại sự chuyên nghiệp. Việc hiển thị này có thể là tóm tắt hay toàn bộ một bài báo, nhưng luôn phải đạt được yêu cầu là một chuẩn thiết kế chung.
Hiển thị tốt các thiết kế bố cục với Hình Ảnh hay Video chúng ta luôn có kết quả như sau :
+ Hiển thị các tóm tắt bài báo hoàn thiện hơn
+ Hiển thị nội dung trao đổi, comment người dùng tốt hơn
+ Hiển thị thông tin Người dùng hoặc nhà phát triển tốt hơn
+ Hiển thị các sơ đồ thông tin tốt hơn
+ Hiển thị Video Playlists tốt hơn
+ Hiển thị các Video pages tốt hơn
…..
Do đó, hiển thị các đối tượng Media Objects cần được chú trọng
Bootstrap đã hỗ trợ cách hiển thị và căn chỉnh rất tốt cho các đối tượng Media Objects (Video và hình ảnh).
Các hỗ trợ của Bootstrap bao gồm :
+ Căn chỉnh theo chiều ngang : Căn chỉnh các đối tượng Media qua trái hay qua phải của nội dung.
+ Căn chỉnh theo chiều dọc : Căn chỉnh các đối tượng Media theo các vị trí trên cùng, ở giữa, hay ở dưới cùng.
+ Hiển thị các đối tượng Media Objects lồng nhau
A. HIỂN THỊ MEDIA OBJECTS THEO CHIỀU NGANG
Để hiển thị các Media Objects theo chiều ngang chúng ta được Bootstrap hỗ trợ cách xử lý chung như sau :
+ Chúng ta cần sử dụng thẻ <Div> với Class .media làm khung chứa các đối tượng Media Objects
+ Chúng ta sử dụng Class .media-left để căn chỉnh đối tượng Media Object qua bên trái (to left)
+ Chúng ta sử dụng Class .media-right để căn chỉnh đối tượng Media Object qua bên phải (to right)
+ Các Text sẽ được hiển thị bên cạnh đối tượng Media Object (Hình Ảnh / Video) , Các Text được đặt bên trong khung chứa có Class .media-body
+ Cuối cùng, Chúng ta có thể sử dụng Class .media-heading để hiển thị Tiêu Đề.
EXAMPLE 1 : CĂN CHỈNH ĐỐI TƯỢNG MEDIA OBJECT QUA BÊN TRÁI
HTML & Bootstrap :
<h2>Hiển Thị Các Media Object</h2>
<p>Trình bày cách hiển thị các Media Objects trên một bố cục Layout đơn giản hay dùng dành cho website:</p><br>
<div class="media">
<div class="media-left">
<img src="Đường dẫn/photo-1-16660001422311892959169.jpg" class="media-object" style="width:210px">
</div>
<div class="media-body">
<h4 class="media-heading">Hình ảnh bạn nhìn thấy đầu tiên trong bức tranh sẽ tiết lộ tuổi thật tâm hồn bạn</h4>
<p>Tuổi tâm hồn của chúng ta có thể khác rất nhiều so với tuổi thật. Hãy làm bài trắc nghiệm sau để đo mức độ trưởng thành về mặt tinh thần của bạn nhé!</p>
</div>
</div>
<hr>
<div class="media">
<div class="media-left">
<img src="Đường dẫn/photo-3-16660515553702122864878.jpeg" class="media-object" style="width:210px">
</div>
<div class="media-body">
<h4 class="media-heading">Karim Benzema đoạt Quả bóng vàng 2022</h4>
<p>Rạng sáng 18-10 (giờ Việt Nam), tại lễ trao giải Quả bóng vàng 2022 do tạp chí France Football tổ chức, tiền đạo người Pháp Karim Benzema đã lần đầu tiên trong sự nghiệp được vinh danh.</p>
</div>
</div>
<hr>
<div class="media">
<div class="media-left">
<img src="ĐƯỜNG DẪN/photo-11-16660005503641483633129.jpg" class="media-object" style="width:210px">
</div>
<div class="media-body">
<h4 class="media-heading">Mỹ nhân Việt đăng quang các cuộc thi Hoa hậu quốc tế: Người lên sao hạng A, người bị lãng quên</h4>
<p>Những năm qua, nhan sắc Việt đã được thăng hạng đáng kể trên bản đồ sắc đẹp thế giới. Minh chứng rõ ràng nhất là ngày càng có nhiều người đẹp Việt đăng quang tại các cuộc thi nhan sắc cấp quốc tế.</p>
</div>
</div>
KẾT QUẢ HIỂN THỊ
EXAMPLE 2 : CĂN CHỈNH ĐỐI TƯỢNG MEDIA OBJECT QUA BÊN PHẢI
HTML & Bootstrap :
<h2>Hiển Thị Các Media Object</h2>
<p>Trình bày cách hiển thị các Media Objects trên một bố cục Layout đơn giản hay dùng dành cho website:</p><br>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Hình ảnh bạn nhìn thấy đầu tiên trong bức tranh sẽ tiết lộ tuổi thật tâm hồn bạn</h4>
<p>Tuổi tâm hồn của chúng ta có thể khác rất nhiều so với tuổi thật. Hãy làm bài trắc nghiệm sau để đo mức độ trưởng thành về mặt tinh thần của bạn nhé!</p>
</div>
<div class="media-right">
<img src="Đường dẫn/photo-1-16660001422311892959169.jpg" class="media-object" style="width:210px">
</div>
</div>
KẾT QUẢ HIỂN THỊ
B. HIỂN THỊ MEDIA OBJECTS THEO CHIỀU DỌC
Để thực hiện căn chỉnh các đối tượng Media Objects theo chiều dọc chúng ta sẽ sử dụng như sau :
+ Sử dụng Class .media-top để căn chỉnh Media Objects vào vị trí trên cùng
+ Sử dụng Class .media-middle để căn chỉnh Media Objects vào vị trí ở giữa
+ Sử dụng Class .media-bottom để căn chỉnh Media Objects vào vị trí cuối cùng
EXAMPLE 1 : CĂN CHỈNH ĐỐI TƯỢNG MEDIA OBJECT THEO CHIỀU DỌC
HTML & Bootstrap :
<h1>TRÌNH BÀY HIỂN THỊ ĐƠN GIẢN NHẤT VỚI MEDIA OBJECT THEO CHIỀU DỌC</h1>
<h2>Hiển Thị Các Media Object</h2>
<p>Trình bày cách hiển thị các Media Objects trên một bố cục Layout đơn giản hay dùng dành cho website:</p><br>
<div class="media">
<div class="media-left media-top">
<img src="ĐƯỜNG DẪN/photo-1-16660001422311892959169.jpg" class="media-object" style="width:100px">
</div>
<div class="media-body">
<h4 class="media-heading">Hình ảnh bạn nhìn thấy đầu tiên trong bức tranh sẽ tiết lộ tuổi thật tâm hồn bạn</h4>
<p>Tuổi tâm hồn của chúng ta có thể khác rất nhiều so với tuổi thật. Hãy làm bài trắc nghiệm sau để đo mức độ trưởng thành về mặt tinh thần của bạn nhé!</p>
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-middle">
<img src="ĐƯỜNG DẪN/photo-3-16660515553702122864878.jpeg" class="media-object" style="width:100px">
</div>
<div class="media-body">
<h4 class="media-heading">Karim Benzema đoạt Quả bóng vàng 2022</h4>
<p>Rạng sáng 18-10 (giờ Việt Nam), tại lễ trao giải Quả bóng vàng 2022 do tạp chí France Football tổ chức, tiền đạo người Pháp Karim Benzema đã lần đầu tiên trong sự nghiệp được vinh danh.</p>
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-bottom">
<img src="ĐƯỜNG DẪN/photo-11-16660005503641483633129.jpg" class="media-object" style="width:100px">
</div>
<div class="media-body">
<h4 class="media-heading">Mỹ nhân Việt đăng quang các cuộc thi Hoa hậu quốc tế: Người lên sao hạng A, người bị lãng quên</h4>
<p>Những năm qua, nhan sắc Việt đã được thăng hạng đáng kể trên bản đồ sắc đẹp thế giới. Minh chứng rõ ràng nhất là ngày càng có nhiều người đẹp Việt đăng quang tại các cuộc thi nhan sắc cấp quốc tế.</p>
</div>
</div>
KẾT QUẢ HIỂN THỊ
C. HIỂN THỊ MEDIA OBJECTS LỒNG NHAU
Để hiển thị đối tượng Media lồng nhau, chúng ta có thể hiểu cấu trúc chung và thực hành như sau :
EXAMPLE 1 : MEDIA OBJECTS LỒNG NHAU. VÍ DỤ THỰC HIỆN HIỂN THỊ NỘI DUNG COMMENTS CỦA USER TRONG BÀI POST
HTML & Bootstrap :
<h2>HIỂN THỊ MEDIA OBJECT LỒNG NHAU</h2>
<p>MEDIA OBJECTS có thể được hiển thị dưới dạng lồng nhau (media objects bên trong một media object):</p><br>
<div class="media">
<div class="media-left">
<img src="Đường dẫn/1665974080188627590749.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">COMMENTER A <small><i>Ngày đăng March 01, 2022</i></small></h4>
<p>Hãy hiển thị thêm định dạng văn bản với Javasript bạn sẽ có cấu trúc bằng nhau, không bị trôi bố cục layout web.</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="Đường dẫn/1666000546228841583708.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">COMMENTER B <small><i>Ngày đăng March 17, 2022</i></small></h4>
<p>Cách hiển thị nhu vậy chưa được bạn có thể cung cấp cách khác không, thực sự tôi không phải một lập trình viên chuyên nghiệp.</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="Đường dẫn/16659694142621454909064.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">COMMENTER C <small><i>Ngày đăng May 24, 2022</i></small></h4>
<p>Cách hiển thị bạn đưa ra đã làm được các thành phần đã hoạt động ổn đinh. Cảm ơn về Code đã gủi nhé.</p>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="Đường dẫn/166588479599185107904.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">COMMENTER D <small><i>Ngày đăng May 24, 2022</i></small></h4>
<p>Bạn hãy chia sẻ mã code cho mình nữa nhé. Email của mình commentd@xyz.com Thanks.</p>
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="Đường dẫn/1665974080188627590749.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">COMMENTER A <small><i>Ngày đăng May 30, 2022</i></small></h4>
<p>Đã cập nhật phiên bản mới. Chúc các bạn thành công.</p>
</div>
</div>
</div>
KẾT QUẢ HIỂN THỊ
