Ứng dụng lớp .media của Bootstrap

Các đối tượng Media trong Bootstrap được tạo ra từ lớp .media, mục đích là tạo ra một dạng trình bày một loạt đối tượng giống nhau về cấu trúc như một danh sách mục lục các bài viết (mỗi bài viết có một hình ảnh, có tiêu đề, có nội dung tóm tắt), hay danh sách các bình luận (mỗi bình luận thể hiện có một ảnh đại diện, tên người, nội dung bình luận ...)

Tạo và định dạng một đối tượng Media

Bạn có thể tạo ra theo cấu trúc sau, phần tử chứa .media, bên trong chứa một hình ảnh <img>, và một phần tử chứa nội dung .media-body

<div class="media">
    <img class="mr-3 rounded order-0" src="https://i.pinimg.com/236x/d1/53/85/d1538552cd2e82e25d3f5693fb056388--flower-corsage-a-flower.jpg" >
    <div class="media-body">
        <h5 class="mt-0">Tiêu đề phần tử Media</h5>
        <p>Phần tử <code>.media</code> có sử dụng kỹ thuật <a href="/su-dung-flexbox-bo-cuc-trang-trong-css.html">flexbox</a> của CSS, nên việc căn chỉnh vị trí của hình ảnh theo chiều đứng dễ dàng bởi các thuộc tình về align-self <code>.align-self-end</code>, <code>.align-self-start</code>, <code>.align-self-end</code>, <code>.align-self-auto</code>, <code>.align-self-center</code>, <code>.align-self-center</code></p>
        <p>Nếu muốn hình ảnh hiện thị phía sau thì có thể để <code>&lt;img&gt;</code> sau <code>.media-body</code> trong HTML, hoặc để nguyên HTML nhưng điều chỉnh lại thứ tự hiện thị bằng các thuộc tính <code>.order-{0-12}</code> và <code>.order-first</code>, <code>.order-last</code>, vị dụ hiện thị thứ 2 là <code>.order-2</code></p>
    </div>
</div>

Tiêu đề phần tử Media

Phần tử .media có sử dụng kỹ thuật flexbox của CSS, nên việc căn chỉnh vị trí phần tử con của nó theo chiều đứng dễ dàng bởi các thuộc tình về align-self .align-self-end, .align-self-start, .align-self-end, .align-self-auto, .align-self-center, .align-self-stretch

Nếu muốn hình ảnh hiện thị phía sau thì có thể để <img> sau .media-body trong HTML, hoặc để nguyên HTML nhưng điều chỉnh lại thứ tự hiện thị bằng các thuộc tính .order-{0-12} và .order-first, .order-last, vị dụ hiện thị thứ 2 là .order-2

Ví dụ căn ảnh trong Media bằng dùng class

Đổi thứ tự hiện thị hình ảnh

Danh sách Media

Để tạo ra danh sách Media đơn giản là tạo ra nhiều các Media đơn ở trên. Cách hay nhất là dùng chính ul, li với thiết lập li có lớp .media và thiết lập ul có lớp .list-unstyled (để laoij bỏ kiểu list mặc định)

Ví dụ một danh sách Media

Học HTML cơ bản

HTML viết tắt của chữ HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản). Được gọi là ngôn ngữ nhưng nó không giống như các ngôn ngữ kịch bản sử dụng các kịch bản để thi hành các tác vụ ...
Cài đặt Zend Framework

Cài đặt thiết lập chương trình khung Zend skeleton application, cấu trúc ứng dụng Zend Framework 3 cơ bản để phát triển website ...
Cài đặt Android Studio, máy ảo Android

Hướng dẫn cài đặt môi trường phát triển ứng dụng Android Studio, tạo máy ảo để chạy thử ứng dụng, thực hành tạo project Android đầu tiên để tìm hiểu cấu trúc cơ bản

Danh sách Media có mã HTML như sau


<ul class="list-unstyled">
    <li class="media">
        <img class="mx-3 rounded order-0" src="https://xuanthulab.net/photo/sm/sandwich-4176.jpg" alt="" style="width: 100px; max-height: 200px">
        <div class="media-body">
            <h5 class="mt-0"><a href="/khai-quat-ve-html.html">Học HTML cơ bản</a></h5>
            <p>HTML viết tắt của chữ HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản). Được gọi là ngôn ngữ nhưng nó không giống như các ngôn ngữ kịch bản sử dụng các kịch bản để thi hành các tác vụ ...</p>
        </div>
    </li>
    <li class="media">
        <img class="mx-3 rounded order-0" src="https://xuanthulab.net/photo/sm/zf3-4225.jpg" alt="" style="width: 100px; max-height: 200px">
        <div class="media-body">
            <h5 class="mt-0"><a href="/cai-dat-zend-framework-chuong-trinh-dau-tien.html">Cài đặt Zend Framework</a></h5>
            <p>Cài đặt thiết lập chương trình khung Zend skeleton application, cấu trúc ứng dụng Zend Framework 3 cơ bản để phát triển website ...</p>
        </div>
    </li>
    <li class="media">
        <img class="mx-3 rounded order-0" src="https://3.bp.blogspot.com/-a0JHeEKwR_4/WqOndV28JnI/AAAAAAAAQlw/WbfV2a91lPI-PzpkLwynEGC0cARJd8ItwCLcBGAs/s1600/androidstudio.PNG" alt="" style="width: 100px; max-height: 200px">
        <div class="media-body">
            <h5 class="mt-0"><a href="/cai-dat-zend-framework-chuong-trinh-dau-tien.html">Cài đặt Android Studio, máy ảo Android</a></h5>
            <p>Hướng dẫn cài đặt môi trường phát triển ứng dụng Android Studio, tạo máy ảo để chạy thử ứng dụng, thực hành tạo project Android đầu tiên để tìm hiểu cấu trúc cơ bản</p>
        </div>
    </li>
</ul>

Media lồng nhau

Để tạo ra dạng lồng nhau, đơn giản trong .media-body này chứa một Media khác. Dạng này có thể dùng để tạo ra cấu trúc hiện thị bình luận, trả lời bình luận (comment) ...

Nguyễn Thu Hà

Bình luận về một vấn đề gì đó, hỏi cái gì đó, cứ thoải mái hỏi đi, câu hỏi dài vào ...

Xuan Thu - Lab

Tôi đang trả lời một vấn đề nào đó, trả lời thật dài thật dài thật dài thật dài thật dài thật dài thật dài ...

<div class="media">
    <img class="mr-3" src="https://cdn.iconscout.com/public/images/icon/free/png-512/avatar-user-girl-33d5bc8209527f81-512x512.png" style="width: 64px">
    <div class="media-body">
        <h5 class="mt-0">Nguyễn Thu Hà</h5>
        Bình luận về một vấn đề gì đó, hỏi cái gì đó, cứ thoải mái hỏi đi, câu hỏi dài vào ...

        <div class="media mt-3">
            <a class="pr-3" href="#">
                <img src="http://icons-for-free.com/free-icons/png/512/403024.png" style="width: 64px">
            </a>
            <div class="media-body">
                <h5 class="mt-0">Xuan Thu - Lab</h5>
                Tôi đang trả lời một vấn đề nào đó, trả lời thật dài thật dài thật dài thật dài thật dài thật dài thật dài ...
            </div>
        </div>
    </div>
</div>

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB