Source

Đối tượng phương tiện

Tài liệu và ví dụ về đối tượng media của Bootstrap để xây dựng các thành phần có tính lặp lại cao như bình luận blog, tweet và những thứ tương tự.

Thí dụ

Đối tượng phương tiện giúp xây dựng các thành phần phức tạp và lặp đi lặp lại trong đó một số phương tiện được định vị cùng với nội dung không bao quanh phương tiện đã nói. Thêm vào đó, nó thực hiện điều này chỉ với hai lớp bắt buộc nhờ vào flexbox.

Dưới đây là một ví dụ về một đối tượng phương tiện duy nhất. Chỉ cần có hai lớp — phần bao bọc .mediavà phần .media-bodyxung quanh nội dung của bạn. Khoảng đệm và lề tùy chọn có thể được kiểm soát thông qua các tiện ích giãn cách .

64x64
Tiêu đề phương tiện
Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus. 
<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
Flexbug # 12: Các phần tử nội tuyến không được coi là các mục linh hoạt

Internet Explorer 10-11 không hiển thị các phần tử nội tuyến như liên kết hoặc hình ảnh (hoặc ::beforevà ::aftercác phần tử giả) dưới dạng các mục linh hoạt. Cách giải quyết duy nhất là đặt một displaygiá trị không nằm trong dòng (ví dụ:, blockhoặc inline-block) flex. Chúng tôi khuyên bạn nên sử dụng .d-flex, một trong những tiện ích hiển thị của chúng tôi , như một cách khắc phục dễ dàng.

Nguồn: Flexbugs trên GitHub

Làm tổ

Các đối tượng phương tiện có thể được lồng vào nhau vô hạn, mặc dù chúng tôi khuyên bạn nên dừng lại ở một số điểm. Đặt lồng .mediatrong .media-bodyđối tượng phương tiện mẹ.

64x64
Tiêu đề phương tiện
Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.
64x64
Tiêu đề phương tiện
Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus. 
<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="pr-3" href="#">
        <img src="..." alt="Generic placeholder image">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

Căn chỉnh

Phương tiện trong một đối tượng phương tiện có thể được căn chỉnh bằng các tiện ích flexbox ở đầu (mặc định), giữa hoặc cuối .media-bodynội dung của bạn.

64x64
Phương tiện được căn chỉnh trên cùng

Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cối xã hội natoque penatibus et magnis dis parturient montes, nascetur nhạo báng.

<div class="media">
  <img class="align-self-start mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Top-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
64x64
Phương tiện căn giữa

Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cối xã hội natoque penatibus et magnis dis parturient montes, nascetur nhạo báng.

<div class="media">
  <img class="align-self-center mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Center-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
64x64
Phương tiện được căn chỉnh dưới cùng

Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cối xã hội natoque penatibus et magnis dis parturient montes, nascetur nhạo báng.

<div class="media">
  <img class="align-self-end mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Bottom-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

Gọi món

Thay đổi thứ tự của nội dung trong các đối tượng phương tiện bằng cách sửa đổi chính HTML hoặc bằng cách thêm một số CSS flexbox tùy chỉnh để đặt thuộc ordertính (thành số nguyên bạn chọn).

Đối tượng phương tiện
Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.
64x64 
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img class="ml-3" src="..." alt="Generic placeholder image">
</div>

Danh sách phương tiện

Vì đối tượng media có rất ít yêu cầu về cấu trúc, bạn cũng có thể sử dụng các lớp này trên các phần tử HTML danh sách. Trên <ul>hoặc của bạn <ol>, thêm biểu tượng .list-unstyledđể xóa mọi kiểu danh sách mặc định của trình duyệt, sau đó áp dụng .mediacho các kiểu của bạn <li>. Như thường lệ, hãy sử dụng các tiện ích giãn cách bất cứ khi nào cần thiết để tinh chỉnh.

  • 64x64
    Đối tượng phương tiện dựa trên danh sách
    Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.
  • 64x64
    Đối tượng phương tiện dựa trên danh sách
    Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.
  • 64x64
    Đối tượng phương tiện dựa trên danh sách
    Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus. 
<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src="..." alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media my-4">
    <img class="mr-3" src="..." alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media">
    <img class="mr-3" src="..." alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>