bootstrap - css framework

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

Lớp .media trong Boostrap để tạo ra các đối tượng trực quan có cấu trúc lặp lại như danh sách các bài viết, danh sách bình luận, comment

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}.order-first, .order-last, vị dụ hiện thị thứ 2 là .order-2


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

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/8/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/8/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>

Vui lòng đăng ký ủng hộ kênh