Bootstrap Media Object

Trong hướng dẫn này, bạn sẽ học cách tạo các đối tượng media trong Bootstrap.

Sử dụng đối tượng media trong Bootstrap

Đối tượng media trong Bootstrap đã bị ngừng cung cấp từ phiên bản 5. Tuy nhiên, bạn vẫn có thể tạo bố cục chứa đối tượng media được căn trái hoặc phải như hình ảnh hoặc video cùng với nội dung văn bản như bình luận blog, Tweet, v.v. bằng cách sử dụng các lớp tiện ích bo tròn và khoảng cách.

<div class="d-flex">
    <div class="flex-shrink-0">
        <img src="images/avatar.svg" alt="Sample Image">
    </div>
    <div class="flex-grow-1 ms-3">
        <h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
        <p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Bạn cũng có thể tạo các biến thể khác của đối tượng media. Áp dụng các lớp sửa đổi hình ảnh như .rounded hoặc .rounded-circle cho hình ảnh để tạo hình ảnh bo góc tròn hoặc hình tròn.

<div class="d-flex">
    <div class="flex-shrink-0">
        <img src="images/avatar.svg" class="rounded-circle" alt="Sample Image">
    </div>
    <div class="flex-grow-1 ms-3">
        <h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
        <p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo các đối tượng media lồng nhau trong Bootstrap

Các đối tượng media cũng có thể được lồng vào bên trong đối tượng media khác. Nó có thể rất hữu ích để tạo các chủ đề bình luận trong một bài đăng trên blog. Hãy xem một ví dụ:

<div class="d-flex">
    <div class="flex-shrink-0">
        <img src="images/avatar.svg" class="rounded-circle" alt="Sample Image">
    </div>
    <div class="flex-grow-1 ms-3">
        <h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
        <p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
        
        <!-- Nested media object -->
        <div class="d-flex mt-4">
            <div class="flex-shrink-0">
                <img src="images/avatar.svg" class="rounded-circle" alt="Sample Image">
            </div>
            <div class="flex-grow-1 ms-3">
                <h5>Clark Kent <small class="text-muted"><i>Posted on January 12, 2021</i></small></h5>
                <p>Thanks, you found this component useful. Don't forget to check out other Bootstrap components as well. They're also very useful.</p>
            </div>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Căn chỉnh các đối tượng media trong Bootstrap

Bạn cũng có thể thay đổi căn chỉnh theo chiều ngang của nội dung và media chỉ bằng cách điều chỉnh chính mã HTML, như được minh họa trong ví dụ sau:

<div class="d-flex">
    <div class="flex-grow-1 me-3">
        <h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
        <p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
    </div>
    <div class="flex-shrink-0">
        <img src="images/avatar.svg" alt="Sample Image">
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Bên cạnh đó, bạn cũng có thể căn chỉnh hình ảnh hoặc media khác ở giữa hoặc dưới cùng của khối nội dung bằng cách sử dụng các lớp tiện ích flexbox, ví dụ: bạn có thể sử dụng lớp .align-self-center để căn giữa theo chiều dọc và lớp .align-self-end cho căn chỉnh dưới cùng.

Theo mặc định, media bên trong đối tượng media được căn trên cùng. Đây là một ví dụ:

<!--Top aligned media-->
<div class="d-flex">
    <div class="flex-shrink-0">
        <img src="images/avatar.svg" alt="Sample Image">
    </div>
    <div class="flex-grow-1 ms-3">
        <h5>Top aligned media <small class="text-muted"><i>This is Default</i></small></h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
</div>
<hr>

<!--Middle aligned media-->
<div class="d-flex">
    <div class="flex-shrink-0 align-self-center">
        <img src="images/avatar.svg" alt="Sample Image">
    </div>
    <div class="flex-grow-1 ms-3">
        <h5>Middle Aligned Media</h5>
        <p>Vestibulum quis quam ut magna consequat faucibus aleo...</p>
    </div>
</div>
<hr>

<!--Bottom aligned media-->
<div class="d-flex">
    <div class="flex-shrink-0 align-self-end">
        <img src="images/avatar.svg" alt="Sample Image">
    </div>
    <div class="flex-grow-1 ms-3">
        <h5>Bottom Aligned Media</h5>
        <p>Amet nibh libero, in gravida nulla. Nulla vel metus...</p>
    </div>
</div>

Bootstrap • Bootstrap Cơ Bản