Skip to main content

Bootstrap Italia

Il tema Bootstrap 4 per lo sviluppo di applicazioni web per la PA

Oggetti Media

Oggetti Media

Documentazione ed esempi degli oggetti media per la costruzione di componenti come commenti blog, tweets e similari.

Esempio

L’oggetto “media” aiuta a costruire complessi e ripetitivi componenti dove alcuni media si posizionano accanto ai contenuti senza sovrapporsi.

Grazie a flexbox è necessario l’utilizzo di solo due classi: nel contenitore .media e nell’elemento contenuto .media-body. Padding e margin possono essere gestiti tramite le utility di spaziatura.

testo alternativo
Testata Media
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">
  <img class="mr-3" src="https://placehold.co/64x64/ebebeb/808080/?text=Immagine" alt="testo alternativo">
  <div class="media-body">
    <h5 class="mt-0">Testata Media</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: Gli elementi inline non sono trattati come elementi flex.

IE10 e IE11 non eseguono il rendering di elementi inline di link o immagini (o ::before e ::after pseudo-elementi) come elementi flex. L’unica soluzione è impostare un valore display non inline (es.: block, inline-block o flex). Ti suggeriamo di usare .d-flex, una delle display utility, come soluzione.

Fonte: Flexbugs su GitHub

Annidamento

Per annidare gli oggetti media posiziona il nuovo elemento .media all’interno del contenitore .media-body. In linea teorica gli oggetti media possono essere annidati all’infinito, me per una corretta visualizzazione grafica ti suggeriamo di non creare troppi livelli di annidamento.

testo alternativo
Testata media
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.
testo alternativo
Testata media
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">
  <img class="mr-3" src="https://placehold.co/64x64/ebebeb/808080/?text=Immagine" alt="testo alternativo">
  <div class="media-body">
    <h5 class="mt-0">Testata media</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="https://placehold.co/64x64/ebebeb/808080/?text=Immagine" alt="testo alternativo">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Testata media</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>

Allineamento

Il media presente dentro l’oggetto media può essere allineato grazie alle utility flexbox in alto (prefedinito), in mezzo o in basso del contenuto .media-body.

testo alternativo
Media allineato in alto

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.

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="https://placehold.co/64x64/ebebeb/808080/?text=Immagine" alt="testo alternativo">
  <div class="media-body">
    <h5 class="mt-0">Media allineato in alto</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>
testo alternativo
Media allineato in mezzo

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.

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="https://placehold.co/64x64/ebebeb/808080/?text=Immagine" alt="testo alternativo">
  <div class="media-body">
    <h5 class="mt-0">Media allineato in mezzo</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>
testo alternativo
Media allineato in basso

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.

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="https://placehold.co/64x64/ebebeb/808080/?text=Immagine" alt="testo alternativo">
  <div class="media-body">
    <h5 class="mt-0">Media allineato in basso</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>

Ordinamento

Puoi modificare l’ordine del contenuto negli oggetti media utilizzando HTML stesso oppure aggiungendo alcuni CSS personalizzati per impostare la proprietà order (di un numero intero di tua scelta).

Media object
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.
testo alternativo 
<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="https://placehold.co/64x64/ebebeb/808080/?text=Immagine" alt="testo alternativo">
</div>

Elenco Media

Poiché l’oggetto media ha pochi requisiti strutturali, è anche possibile utilizzare queste classi sugli elementi HTML di elenco. Su <ul> o <ol> aggiungi .list-unstyled per rimuovere tutti gli stili di elenco predefiniti del browser, quindi applica .media ai tuoi <li>. Come sempre, utilizzare le utilità di spaziatura ovunque sia necessario per ottimizzare la visualizzazione grafica.

  • testo alternativo
    Elenco basato sull'oggetto media
    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.
  • testo alternativo
    Elenco basato sull'oggetto media
    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.
  • testo alternativo
    Elenco basato sull'oggetto media
    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. 
<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src="https://placehold.co/64x64/ebebeb/808080/?text=Immagine" alt="testo alternativo">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Elenco basato sull'oggetto media</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="https://placehold.co/64x64/ebebeb/808080/?text=Immagine" alt="testo alternativo">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Elenco basato sull'oggetto media</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="https://placehold.co/64x64/ebebeb/808080/?text=Immagine" alt="testo alternativo">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Elenco basato sull'oggetto media</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>