Bootstrap objets multimédias
Dans ce chapitre, nous allons expliquer les objets multimédia Bootstrap (médias d'objets). Ce style d'objet abstrait utilisé pour créer divers types de composants (par exemple: commentaires de blog), nous pouvons utiliser la photo-texte dans le composant, l'image peut être justifié à gauche ou à droite. Les objets multimédias peuvent être obtenus avec moins de code et les médias objets texte scramble.
Léger objet multimédia caractéristique marquée est facile d'étendre par la simple classe d'application de la balise à atteindre. Vous pouvez ajouter les deux formes suivantes dans les balises HTML pour définir l'objet média:
- .media: Cette classe permet aux objets multimédias dans le multimédia (images, vidéo, audio) flottaient au bloc contenu gauche ou à droite.
- .media-list: Si vous avez besoin d' une liste des différents éléments fait partie de la liste à puces, vous pouvez utiliser la classe.Les commentaires peuvent être utilisés pour la liste et la liste des articles.
Jetons un coup d'oeil à l'information suivante sur les médias par défaut des objets .media instance:
Exemples
<Div class = "media">
<A class = "pull-gauche" href = "#">
<Img class = "media-objet" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "objet média">
</ A>
<Div class = "media-body">
<H4 class = "media-rubrique"> Titre du média </ h4> Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. </ Div>
</ Div>
<Div class = "media">
<A class = "pull-gauche" href = "#">
<Img class = "media-objet" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "objet média">
</ A>
<Div class = "media-body">
<H4 class = "media-rubrique"> Titre du média </ h4> Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. <Div class = "media">
<A class = "pull-gauche" href = "#">
<Img class = "media-objet" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "objet média">
</ A>
<Div class = "media-body">
<H4 class = "media-rubrique"> Titre du média </ h4> Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. </ Div>
</ Div>
</ Div>
</ Div>
Essayez »
Les résultats sont les suivants:
Regardons les exemples suivants de la liste des médias d'objets .media-liste:
Exemples
<Ul class = "media-list">
<Li class = "media">
<A class = "pull-gauche" href = "#">
<Img class = "media-objet" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "image d'espace réservé générique">
</ A>
<Div class = "media-body">
<H4 class = "media-rubrique"> Titre du média </ h4>
<P> Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. </ P>
<! - Objets emboîtés médias ->
<Div class = "media">
<A class = "pull-gauche" href = "#">
<Img class = "media-objet" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "image d'espace réservé générique">
</ A>
<Div class = "media-body">
<H4 class = "media-rubrique"> media imbriquée rubrique </ h4> Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. <! - Objets emboîtés médias ->
<Div class = "media">
<A class = "pull-gauche" href = "#">
<Img class = "media-objet" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "image d'espace réservé générique">
</ A>
<Div class = "media-body">
<H4 class = "media-rubrique"> media imbriquée rubrique </ h4> Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. </ Div>
</ Div>
</ Div>
</ Div>
<! - Objets emboîtés médias ->
<Div class = "media">
<A class = "pull-gauche" href = "#">
<Img class = "media-objet" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "image d'espace réservé générique">
</ A>
<Div class = "media-body">
<H4 class = "media-rubrique"> media imbriquée rubrique </ h4> Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. </ Div>
</ Div>
</ Div>
</ Li>
<Li class = "media">
<A class = "pull-droite" href = "#">
<Img class = "media-objet" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "image d'espace réservé générique">
</ A>
<Div class = "media-body">
<H4 class = "media-rubrique"> Titre du média </ h4> Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. Ceci est un exemple de texte. </ Div>
</ Li>
</ Ul>
Essayez »
Les résultats sont les suivants:
