Bootstrap oggetti multimediali
In questo capitolo spiegheremo oggetti multimediali Bootstrap (media Object). Questi stile oggetto astratto utilizzato per creare diversi tipi di componenti (ad esempio: commenti del blog), siamo in grado di utilizzare la foto-testo nel componente, l'immagine può essere giustificato a sinistra oa destra giustificato. oggetti multimediali possono essere raggiunti con meno codice e oggetti multimediali di testo scramble.
Leggero oggetto multimediale marcata caratteristica è facile estendere attraverso la semplice classe di applicazione di tag da raggiungere. È possibile aggiungere i seguenti due forme di tag HTML per impostare l'oggetto multimediale:
- .media: Questa classe consente gli oggetti multimediali nelle multimediali (immagini, video, audio) galleggiavano al blocco di contenuti a sinistra oa destra.
- .media-list: Se avete bisogno di un elenco dei vari elementi fa parte della lista non ordinata, è possibile utilizzare la classe.Commenti possono essere utilizzati per elencare e l'elenco di articoli.
Diamo uno sguardo al seguente informazioni sul supporto di default oggetti .media esempio:
Esempi
<div class = "media">
<A class = "pull-sinistra" href = "#">
<IMG class = "media-oggetto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "oggetto multimediale">
</ A>
<div class = "media-body">
<H4 class = "media-rubrica"> titolo multimediale </ h4> Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. </ Div>
</ Div>
<div class = "media">
<A class = "pull-sinistra" href = "#">
<IMG class = "media-oggetto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "oggetto multimediale">
</ A>
<div class = "media-body">
<H4 class = "media-rubrica"> titolo multimediale </ h4> Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. <div class = "media">
<A class = "pull-sinistra" href = "#">
<IMG class = "media-oggetto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "oggetto multimediale">
</ A>
<div class = "media-body">
<H4 class = "media-rubrica"> titolo multimediale </ h4> Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. </ Div>
</ Div>
</ Div>
</ Div>
Prova »
I risultati sono i seguenti:
Diamo un'occhiata ai seguenti esempi di elenco degli oggetti .media-list dei media:
Esempi
<ul class = "media-list">
<Li class = "media">
<A class = "pull-sinistra" href = "#">
<IMG class = "media-oggetto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "immagine segnaposto generico">
</ A>
<div class = "media-body">
<H4 class = "media-rubrica"> titolo multimediale </ h4>
<P> Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. </ P>
<! - Oggetti multimediali nidificati ->
<div class = "media">
<A class = "pull-sinistra" href = "#">
<IMG class = "media-oggetto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "immagine segnaposto generico">
</ A>
<div class = "media-body">
<H4 class = "media-rubrica"> voce dei media annidato </ h4> Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. <! - Oggetti multimediali nidificati ->
<div class = "media">
<A class = "pull-sinistra" href = "#">
<IMG class = "media-oggetto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "immagine segnaposto generico">
</ A>
<div class = "media-body">
<H4 class = "media-rubrica"> voce dei media annidato </ h4> Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. </ Div>
</ Div>
</ Div>
</ Div>
<! - Oggetti multimediali nidificati ->
<div class = "media">
<A class = "pull-sinistra" href = "#">
<IMG class = "media-oggetto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "immagine segnaposto generico">
</ A>
<div class = "media-body">
<H4 class = "media-rubrica"> voce dei media annidato </ h4> Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. </ Div>
</ Div>
</ Div>
</ Li>
<Li class = "media">
<A class = "pull-destra" href = "#">
<IMG class = "media-oggetto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "immagine segnaposto generico">
</ A>
<div class = "media-body">
<H4 class = "media-rubrica"> titolo multimediale </ h4> Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. Questo è un testo di esempio. </ Div>
</ Li>
</ Ul>
Prova »
I risultati sono i seguenti:
