Source

Obiekt medialny

Dokumentacja i przykłady obiektu multimedialnego Bootstrap do konstruowania wysoce powtarzalnych komponentów, takich jak komentarze na blogu, tweety i tym podobne.

Przykład

Obiekt multimedialny pomaga budować złożone i powtarzalne komponenty, w których niektóre multimedia są umieszczane obok treści, które nie otaczają tych multimediów. Dodatkowo robi to z tylko dwoma wymaganymi klasami dzięki flexboxowi.

Poniżej znajduje się przykład pojedynczego obiektu multimedialnego. Wymagane są tylko dwie klasy — zawijanie .mediai otaczanie .media-bodytreści. Opcjonalne dopełnienie i margines można kontrolować za pomocą narzędzi do odstępów .

Nagłówek mediów

Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, przedsionek w vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis w 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: Elementy wbudowane nie są traktowane jako elementy elastyczne

Internet Explorer 10-11 nie renderuje elementów wbudowanych, takich jak łącza lub obrazy (lub ::beforepseudoelementy ::after) jako elementy elastyczne. Jedynym obejściem jest ustawienie displaywartości niewbudowanej (np. block, inline-blocklub flex). Sugerujemy użycie .d-flexjednego z naszych narzędzi wyświetlania , jako łatwego rozwiązania.

Źródło: Flexbugs na GitHub

Zagnieżdżanie

Obiekty multimedialne mogą być zagnieżdżane w nieskończoność, chociaż sugerujemy, abyś w pewnym momencie przestał. Miejsce zagnieżdżone .mediaw .media-bodynadrzędnym obiekcie multimedialnym.

Nagłówek mediów

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

Wyrównanie

Multimedia w obiekcie multimedialnym można wyrównać za pomocą narzędzi Flexbox do góry (domyślnie), środka lub końca .media-bodytreści.

Media wyrównane do góry

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.

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

Media wyrównane do środka

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.

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

Media wyrównane do dołu

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.

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

Zamówienie

Zmień kolejność treści w obiektach multimedialnych, modyfikując sam kod HTML lub dodając niestandardowy CSS Flexbox, aby ustawić orderwłaściwość (na wybraną liczbę całkowitą).

Obiekt medialny

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

Lista mediów

Ponieważ obiekt multimedialny ma tak mało wymagań strukturalnych, możesz również użyć tych klas na elementach listy HTML. Na swoim <ul>lub <ol>dodaj , .list-unstyledaby usunąć wszystkie domyślne style listy przeglądarki, a następnie zastosuj .mediado swoich <li>s. Jak zawsze, używaj narzędzi do odstępów wszędzie tam, gdzie jest to potrzebne, aby dostroić.

Obiekt multimedialny oparty na liście
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, przedsionek w vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis w faucibus.
Obiekt multimedialny oparty na liście
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, przedsionek w vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis w faucibus.
Obiekt multimedialny oparty na liście
Cras siedzą amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, przedsionek w vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis w 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>

Obiekt medialny

Przykład

Nagłówek mediów

Flexbug #12: Elementy wbudowane nie są traktowane jako elementy elastyczne

Zagnieżdżanie

Nagłówek mediów

Nagłówek mediów

Wyrównanie

Media wyrównane do góry

Media wyrównane do środka

Media wyrównane do dołu

Zamówienie

Obiekt medialny

Lista mediów

Obiekt multimedialny oparty na liście

Obiekt multimedialny oparty na liście

Obiekt multimedialny oparty na liście